/* Onyx interaction system: the existing palette and typography remain the foundation. */
:root{--onyx-accent:#FE6409;--onyx-wash:rgba(254,100,9,.07)}
.onyx-figure{display:inline-block;position:relative;width:var(--onyx-size,160px);height:var(--onyx-size,160px);flex-shrink:0;vertical-align:middle;isolation:isolate}
.onyx-sprite{position:absolute;inset:0;display:block;background-image:url('assets/onyx-poses.png?v=3');background-size:300% 200%;background-repeat:no-repeat;transform-origin:50% 88%;will-change:transform}
.pose-wave{background-position:0 0}
.pose-think{background-position:50% 0}
.pose-inspect{background-position:100% 0}
.pose-pause{background-position:0 100%}
.pose-happy{background-position:50% 100%}
.pose-repair{background-position:100% 100%}
.onyx-floor{position:absolute;bottom:4%;left:29%;right:26%;height:5%;border-radius:50%;background:rgba(0,0,0,.12);filter:blur(8px);z-index:-1}
.onyx-size-inline{--onyx-size:78px}
.onyx-size-welcome{--onyx-size:200px}
.onyx-size-working{--onyx-size:94px}
.onyx-size-empty{--onyx-size:150px}
.onyx-size-coach{--onyx-size:100px}
.onyx-size-feedback{--onyx-size:100px}
.onyx-size-notification{--onyx-size:48px}
.onyx-figure.is-interactive:hover .onyx-sprite{transform:translateY(-3px) rotate(-2deg);transition:transform .25s ease}
.motion-hello>.onyx-sprite{animation:onyxHello 1s cubic-bezier(.22,1,.36,1) both}
.motion-curious>.onyx-sprite{animation:onyxCurious .8s ease-out both}
.motion-working>.onyx-sprite{animation:onyxRead 2.4s ease-in-out infinite}
.motion-success>.onyx-sprite{animation:onyxSuccess .75s cubic-bezier(.22,.8,.32,1) both}
.motion-settle>.onyx-sprite{animation:onyxNod .55s ease-out both}
.reacting>.onyx-sprite{animation:onyxHighFive .85s cubic-bezier(.22,.8,.32,1) both!important}
.onyx-inline{display:flex;align-items:center;gap:13px;padding:10px 14px 10px 3px;border:1px solid var(--line-soft);border-radius:9px;background:var(--surface);margin:0 0 17px;min-height:80px}
.onyx-inline>.onyx-figure{display:block;border:0;padding:0;margin:0;background:none;min-height:0}
.onyx-inline>div{min-width:0;flex:1}
.onyx-inline strong{font-size:13px;font-weight:500;color:var(--secondary);line-height:1.7}
.onyx-inline p{font-size:12px;color:var(--muted);line-height:1.8;margin:4px 0 0}
.onyx-welcome.chat-welcome{width:100%;height:auto}
.welcome-onyx{flex-shrink:0;align-self:center;border-radius:15px;position:relative;padding:0}
.welcome-onyx:hover .onyx-sprite{transform:rotate(-2deg);transition:transform .2s}
.onyx-working.message{display:flex;align-items:center;gap:18px;border:1px solid var(--line-soft);background:var(--surface);border-radius:12px;padding:8px 22px 8px 2px;margin:20px 0 0;min-width:0}
.onyx-working.message>.onyx-figure{display:block;margin:0;padding:0;border:0;background:none}
.onyx-working.message>div{min-width:0}
.onyx-working.message strong{font-size:14px;line-height:1.8;font-weight:500;color:var(--secondary)}
.onyx-working.message p{font-size:12px;line-height:1.8;color:var(--muted);display:flex;align-items:center;gap:10px;margin:5px 0}
.onyx-working.message small{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px;margin-top:7px}
.onyx-working.message small>.icon{width:12px;height:12px}
.onyx-working.message .message-identity{font-size:12px;margin-bottom:8px}
.composer-presence{font-size:10px;color:var(--muted);line-height:1.8;margin:7px 2px 0}
.composer-note{margin-top:6px}
.composer.onyx-drop-active{outline:2px dashed var(--orange);outline-offset:5px;background:var(--onyx-wash)}
.onyx-filter-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.onyx-filter-empty>.onyx-figure{margin:0}
.onyx-filter-empty p{margin:0 0 10px}
.empty>.onyx-figure{display:block;margin:0 auto}
#onyx-layer{position:relative;z-index:65}
.onyx-coach,.onyx-feedback{position:fixed;right:26px;bottom:25px;width:415px;max-width:calc(100vw - 30px);border:1px solid rgba(254,100,9,.4);background:var(--surface);border-radius:13px;box-shadow:var(--shadow);padding:19px 20px 16px;animation:onyxSceneIn .3s ease-out}
.onyx-coach>.icon-btn,.onyx-feedback>.icon-btn{position:absolute;right:6px;top:6px;width:29px;height:29px;color:var(--muted)}
.onyx-coach>.icon-btn .icon,.onyx-feedback>.icon-btn .icon{width:15px;height:15px}
.coach-body,.feedback-body{display:flex;align-items:center;gap:7px}
.coach-body>.onyx-figure,.feedback-body>.onyx-figure{display:block;background:none;margin:0;padding:0;border:0;box-shadow:none;position:relative;right:auto;bottom:auto;max-width:none;min-height:0}
.coach-body>div,.feedback-body>div{min-width:0;flex:1;padding-right:5px}
.coach-step{font-size:8px;letter-spacing:1px;color:var(--orange-light)}
.coach-body h2{font-size:14px;line-height:1.7;margin:7px 0;font-family:Inter,Arial,sans-serif!important;text-transform:none!important;letter-spacing:0}
.coach-body p,.feedback-body p{font-size:12px;line-height:1.8;color:var(--muted)}
.coach-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line-soft);padding-top:14px;margin-top:12px;gap:15px}
.coach-footer .text-link{font-size:12px;color:var(--muted)}
.coach-footer .btn{font-size:12px}
.feedback-body strong{font-size:14px;line-height:1.6;font-weight:500;color:var(--secondary);display:block;margin-bottom:7px}
.feedback-body .text-link{font-size:12px;margin-top:10px;display:inline-flex;gap:8px;align-items:center}
.feedback-body .text-link>.icon{width:14px;height:14px}
.onyx-highlight{outline:2px solid rgba(254,100,9,.6)!important;outline-offset:4px}
.notice-top>.onyx-figure{height:48px;width:48px;margin-left:-6px;margin-right:-4px}
@keyframes onyxHello{0%{opacity:0;transform:translateY(13px) rotate(4deg)}45%{opacity:1;transform:translateY(-3px) rotate(-4deg)}72%{transform:translateY(0) rotate(2deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes onyxCurious{0%{transform:rotate(0)}35%{transform:rotate(-4deg)}70%{transform:rotate(1deg)}100%{transform:rotate(0)}}
@keyframes onyxRead{0%,100%{transform:rotate(-1deg) translateY(0)}50%{transform:rotate(1deg) translateY(-3px)}}
@keyframes onyxSuccess{0%{transform:translateY(0) scale(1)}25%{transform:translateY(2px) scale(1.02,.98)}50%{transform:translateY(-10px) scale(.99,1.01)}80%{transform:translateY(1px) scale(1.01,.99)}100%{transform:none}}
@keyframes onyxNod{0%,100%{transform:rotate(0)}40%{transform:rotate(3deg) translateY(2px)}}
@keyframes onyxHighFive{0%,100%{transform:rotate(0) scale(1)}35%{transform:rotate(-7deg) translateY(-8px) scale(1.04)}60%{transform:rotate(4deg) translateY(-3px) scale(1.02)}}
@keyframes onyxSceneIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
html[data-onyx-motion=subtle] .onyx-sprite{animation-duration:.6s;animation-timing-function:ease-out}
html[data-onyx-motion=subtle] .motion-working>.onyx-sprite{animation:onyxRead 4s ease-in-out infinite}
html[data-onyx-motion=subtle] .motion-success>.onyx-sprite{animation:onyxNod .55s ease-out both}
html[data-onyx-motion=subtle] .motion-hello>.onyx-sprite{animation:onyxNod .55s ease-out both}
html[data-onyx-motion=still] .onyx-sprite,html[data-onyx-motion=still] .onyx-coach,html[data-onyx-motion=still] .onyx-feedback{animation:none!important;transition:none!important;transform:none!important}
html[data-onyx-motion=still] .onyx-figure:hover .onyx-sprite{transform:none!important}
@media(max-width:1200px){}
@media(max-width:950px){.welcome-intro .onyx-size-welcome{--onyx-size:165px}}
@media(max-width:700px){.onyx-coach,.onyx-feedback{right:13px;bottom:15px;width:355px;max-width:calc(100vw - 106px);padding:19px 15px 15px}.coach-body,.feedback-body{flex-direction:column;align-items:flex-start;gap:0}.coach-body>.onyx-figure,.feedback-body>.onyx-figure{--onyx-size:77px;align-self:center}.coach-body h2{font-size:14px}.coach-body p,.feedback-body p{font-size:12px}.coach-footer{gap:8px}.coach-footer .btn{font-size:11px;padding:8px 9px}.coach-footer .text-link{font-size:11px}.onyx-inline{padding:9px 12px 10px 2px;gap:4px;align-items:flex-start}.onyx-inline>.onyx-figure{--onyx-size:65px}.onyx-inline>div{padding-top:8px}.onyx-inline strong{font-size:12px}.onyx-inline p{font-size:11px}.onyx-working.message{padding:10px 12px 12px 3px;gap:5px;align-items:flex-start}.onyx-working.message>.onyx-figure{--onyx-size:65px}.onyx-working.message>div{padding-top:3px}.onyx-working.message strong{font-size:12px}.onyx-working.message p{font-size:11px;align-items:flex-start}.onyx-working.message small{font-size:10px}.composer-presence{font-size:9px}.top-actions{gap:6px}.onyx-size-empty{--onyx-size:130px}}
@media(prefers-reduced-motion:reduce){.onyx-sprite,.onyx-coach,.onyx-feedback{animation:none!important;transition:none!important;transform:none!important}.onyx-figure:hover .onyx-sprite{transform:none!important}}
html[data-onyx-motion=still] .onyx-working .typing-dots span{animation:none!important}