:root { --ai-blue: #4a8dff; --ai-cyan: #6ae8ff; --ai-ink: #18233a; --ai-soft: #f7faff; }

#ai-assistant-root { position: relative; z-index: 2147483000; }
/* The empty assistant mount is a body grid item. On narrow login screens it can
   expand over the viewport even while its child assistant is hidden, blocking
   every touch target underneath it. Remove only the mount from the login flow;
   it returns unchanged as soon as authentication unlocks the application. */
body.auth-pending #ai-assistant-root,
body.login-locked #ai-assistant-root { display: none; }
.ai-assistant { position: fixed; right: 24px; bottom: 24px; z-index: 2147483000; font-family: inherit; color: var(--ai-ink); }
.ai-assistant.is-companion-disabled .ai-pet,
.ai-assistant.is-companion-disabled .ai-chat { display: none !important; }
body.auth-pending .ai-assistant,
body.login-locked .ai-assistant { display: none; }

.ai-pet { position: relative; width: 80px; height: 80px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; cursor: pointer; isolation: isolate; }
.ai-assistant[data-avatar-size="large"] .ai-pet { width: 104px; height: 104px; }
.ai-assistant[data-avatar-size="large"] .ai-pet-hide { top: 2px; right: 3px; }
.ai-pet-robot { animation: aiFloat 4s ease-in-out infinite; transition: transform .24s ease, filter .24s ease; }
.ai-pet.is-hovering .ai-pet-robot { transform: scale(1.1); animation-play-state: paused; filter: drop-shadow(0 9px 10px rgba(45,91,170,.25)); }
.ai-pet-halo { position: absolute; inset: 7px; z-index: -1; border-radius: 50%; background: rgba(74,141,255,.12); box-shadow: 0 7px 28px rgba(74,141,255,.28); opacity: 0; transition: opacity .2s ease,inset .2s ease,box-shadow .2s ease; }
.ai-pet.is-hovering .ai-pet-halo { inset: 0; opacity: 1; box-shadow: 0 8px 35px rgba(74,141,255,.4), 0 0 0 8px rgba(106,232,255,.08); }
.ai-robot { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 7px 6px rgba(45,91,170,.16)); }
.ai-robot .ai-antenna { transform-origin: 48px 21px; animation: aiAntenna 4s ease-in-out infinite; }
.ai-robot .ai-eyes { transform-origin: center; animation: aiBlink 4s ease-in-out infinite; }
.ai-expression, .ai-mood-decoration { opacity: 0; transition: opacity .12s ease; }
.ai-expression-default { opacity: 1; }
.ai-pet[data-mood="suspend"] .ai-expression-default,
.ai-pet[data-mood="click"] .ai-expression-default,
.ai-pet[data-mood="thinking"] .ai-expression-default,
.ai-pet[data-mood="happy"] .ai-expression-default,
.ai-pet[data-mood="wave"] .ai-expression-default,
.ai-pet[data-mood="look"] .ai-expression-default,
.ai-pet[data-mood="sparkle"] .ai-expression-default,
.ai-pet[data-mood="heart"] .ai-expression-default,
.ai-pet[data-mood="shy"] .ai-expression-default { opacity: 0; }
.ai-pet[data-mood="suspend"] .ai-expression-suspend,
.ai-pet[data-mood="suspend"] .ai-decoration-suspend,
.ai-pet[data-mood="click"] .ai-expression-click,
.ai-pet[data-mood="click"] .ai-decoration-click,
.ai-pet[data-mood="thinking"] .ai-expression-thinking,
.ai-pet[data-mood="thinking"] .ai-decoration-thinking,
.ai-pet[data-mood="happy"] .ai-expression-happy,
.ai-pet[data-mood="happy"] .ai-decoration-happy,
.ai-pet[data-mood="wave"] .ai-expression-wave,
.ai-pet[data-mood="wave"] .ai-decoration-wave,
.ai-pet[data-mood="look"] .ai-expression-look,
.ai-pet[data-mood="look"] .ai-decoration-look,
.ai-pet[data-mood="sparkle"] .ai-expression-sparkle,
.ai-pet[data-mood="sparkle"] .ai-decoration-sparkle,
.ai-pet[data-mood="heart"] .ai-expression-heart,
.ai-pet[data-mood="heart"] .ai-decoration-heart,
.ai-pet[data-mood="shy"] .ai-expression-shy,
.ai-pet[data-mood="shy"] .ai-decoration-shy { opacity: 1 !important; }
.ai-pet[data-mood="heart"] .ai-decoration-heart { transform-origin: 80px 25px; animation: aiHeartPop 2s ease-in-out infinite; }
.ai-pet[data-mood="shy"] .ai-decoration-shy { animation: aiShyMarks 2.4s ease-in-out infinite; }
.ai-pet[data-mood="click"] .ai-avatar-body { transform-origin: 48px 50px; animation: aiClickBounce .28s ease-out; }
.ai-pet[data-mood="click"] .ai-decoration-click { animation: aiRays .6s ease-out; }
.ai-pet[data-mood="thinking"] .ai-expression-thinking { animation: aiThinkFace 1.1s ease-in-out infinite; }
.ai-pet[data-mood="thinking"] .ai-decoration-thinking { transform-origin: 78px 24px; animation: aiBubble 1.2s ease-in-out infinite; }
.ai-pet[data-mood="happy"] .ai-expression-happy { transform-origin: 48px 43px; animation: aiHappyEyes .75s ease-in-out infinite; }
.ai-pet[data-mood="happy"] .ai-decoration-happy { transform-origin: 48px 30px; animation: aiSpark 1s ease-in-out infinite; }
.ai-pet[data-mood="wave"] .ai-decoration-wave { transform-origin: 83px 22px; animation: aiWaveMark .8s ease-in-out infinite; }
.ai-pet[data-mood="look"] .ai-decoration-look { animation: aiLookDots 1.1s ease-in-out infinite; }
.ai-pet[data-mood="sparkle"] .ai-expression-sparkle { transform-origin: 48px 42px; animation: aiStarEyes .85s ease-in-out infinite; }
.ai-pet[data-mood="sparkle"] .ai-decoration-sparkle { transform-origin: 48px 28px; animation: aiSpark .85s ease-in-out infinite; }
.ai-pet:is([data-mood="suspend"],[data-mood="happy"]) .ai-decoration-celestial,
.ai-avatar-option:is(:hover,:focus-within) .ai-decoration-celestial { opacity: 1; }
.ai-decoration-celestial { pointer-events: none; }
.ai-celestial-particle { transform-box: fill-box; transform-origin: center; opacity: 0; }
.ai-pet:is([data-mood="suspend"],[data-mood="happy"]) .ai-celestial-particle,
.ai-avatar-option:is(:hover,:focus-within) .ai-celestial-particle { animation: aiCelestialBloom 3.4s ease-in-out infinite both; }
.ai-celestial-particle:nth-child(2n) { animation-delay: .12s !important; }
.ai-celestial-particle:nth-child(3n) { animation-delay: .24s !important; }
.ai-celestial-star { filter: drop-shadow(0 0 1.1px rgba(255,202,45,.6)); }
.ai-celestial-blue,.ai-celestial-moon { filter: drop-shadow(0 0 1.1px rgba(82,170,255,.65)); }
.ai-avatar-option:is(:hover,:focus-within) .ai-expression-default { opacity: 0; }
.ai-avatar-option:is(:hover,:focus-within) .ai-expression-suspend { opacity: 1; }
@keyframes aiCelestialBloom {
  0%,100% { opacity: 0; transform: translate(var(--hx),var(--hy)) scale(.3) rotate(0); }
  25% { opacity: 1; transform: translate(var(--dx),var(--dy)) scale(1) rotate(-10deg); }
  45% { opacity: 1; transform: translate(var(--dx),var(--dy)) scale(1.04) rotate(12deg); }
  65% { opacity: 1; transform: translate(var(--dx),var(--dy)) scale(1) rotate(-9deg); }
  82% { opacity: .8; transform: translate(0,0) scale(.85) rotate(5deg); }
}
@keyframes aiShyMarks { 0%,100% { transform: translateY(0); } 50% { transform: translateY(1px); } }
@media (prefers-reduced-motion: reduce) { .ai-celestial-particle { animation: none !important; opacity: 1; } }
.ai-pet-tip { position: absolute; right: calc(100% + 8px); top: var(--ai-tip-top, -10px); width: max-content; max-width: min(360px, var(--ai-tip-space, calc(100vw - 140px))); box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; padding: 10px 14px; border: 1px solid rgba(74,141,255,.14); border-radius: 12px 12px 3px 12px; background: rgba(255,255,255,.96); color: #397ce9; box-shadow: 0 8px 24px rgba(59,104,180,.16); font-size: 13px; font-weight: 650; opacity: 0; transform: translate(8px,6px) scale(.96); pointer-events: none; transition: .22s ease; }
.ai-pet.is-hovering .ai-pet-tip { opacity: 1; transform: none; }
.ai-pet-tip.is-proactive { opacity: 1; transform: none; line-height: 1.65; }
.ai-pet-hide { position: absolute; z-index: 5; top: 0; right: 1px; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #d9dee7; border-radius: 50%; background: rgba(255,255,255,.96); color: #77808f; box-shadow: 0 3px 10px rgba(31,41,55,.12); font-size: 15px; font-weight: 400; line-height: 1; opacity: 0; pointer-events: none; transform: scale(.8); transition: .18s ease; }
.ai-pet.is-hovering .ai-pet-hide { opacity: 1; pointer-events: auto; transform: scale(1); }
.ai-pet-hide { cursor: pointer; }
.ai-pet.is-hovering .ai-pet-hide:hover { color: #b74552; border-color: #e6afb6; background: #fff0f2; box-shadow: 0 0 0 3px rgba(215,114,130,.12), 0 3px 10px rgba(31,41,55,.12); transform: scale(1.13); }
/* Move only the companion; chat windows retain their own stable positioning. */
.ai-pet.is-draggable { position: fixed; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.ai-pet.is-draggable > .ai-avatar-slot { display: block; width: 100%; height: 100%; transition: transform .2s ease, filter .2s ease; }
.ai-assistant .ai-pet.is-tip-right .ai-pet-tip { right: auto; left: calc(100% + 8px); border-radius: 12px 12px 12px 3px; }
.ai-pet.is-dragging { cursor: grabbing; will-change: transform; }
.ai-pet.is-dragging > .ai-avatar-slot { transform: translateY(-7px) scale(1.1) rotate(var(--ai-drag-lean, -4deg)); filter: drop-shadow(0 14px 9px rgba(35,64,104,.24)); }
.ai-pet.is-dragging .ai-pet-robot { animation-play-state: paused; }
.ai-pet.is-dragging .ai-pet-halo { opacity: .5; inset: 10px; box-shadow: 0 8px 18px rgba(74,141,255,.16); }
.ai-pet.is-dragging .ai-pet-tip,
.ai-pet.is-dragging .ai-pet-hide { opacity: 0; pointer-events: none; }
.ai-pet-drag-hint { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding: 3px 8px; border-radius: 8px; background: rgba(38,52,74,.86); color: #fff; font-size: 11px; line-height: 1.5; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.ai-pet.is-dragging .ai-pet-drag-hint { opacity: 1; }
.ai-pet.is-landing > .ai-avatar-slot { animation: aiPetLand .24s ease-out; }
@keyframes aiPetLand { 0% { transform: translateY(-4px) scale(1.07) rotate(-4deg); } 65% { transform: translateY(1px) scale(.97,1.02); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ai-pet.is-draggable > .ai-avatar-slot, .ai-pet-drag-hint { transition: none; animation: none; }
  .ai-pet.is-dragging > .ai-avatar-slot { transform: none; }
}
.ai-assistant[data-state="open"] .ai-pet,
.ai-assistant[data-state="workspace"] .ai-pet { display: none; }

.ai-chat { position: absolute; right: 0; bottom: 0; width: 360px; height: 500px; display: grid; grid-template-rows: 72px 1fr 70px 24px; overflow: hidden; border: 1px solid rgba(74,141,255,.13); border-radius: 20px; background: rgba(255,255,255,.98); box-shadow: 0 22px 60px rgba(41,79,139,.22), 0 4px 14px rgba(74,141,255,.08); opacity: 0; transform: translate(22px,22px) scale(.82); transform-origin: bottom right; pointer-events: none; transition: opacity .22s ease, transform .28s cubic-bezier(.2,.85,.25,1.15); }
.ai-assistant[data-state="open"] .ai-chat { opacity: 1; transform: none; pointer-events: auto; }
.ai-chat-head { position: relative; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #eaf0fa; background: rgba(255,255,255,.95); }
.ai-head-avatar { width: 44px; height: 44px; padding: 3px; border-radius: 14px; background: #f2f7ff; }
.ai-head-avatar .ai-robot { filter: none; }
.ai-chat-head h3 { margin: 0 0 3px; font-size: 16px; line-height: 1.15; }
.ai-chat-head h3 span { font-weight: 650; }
.ai-chat-head p { display: flex; align-items: center; gap: 5px; margin: 0; color: #77849a; font-size: 12px; }
.ai-chat-head p i { width: 7px; height: 7px; border-radius: 50%; background: #38d891; box-shadow: 0 0 0 3px rgba(56,216,145,.12); }
.ai-window-actions { display: flex; gap: 4px; margin-left: auto; }
.ai-window-actions button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #627088; box-shadow: none; font-size: 22px; line-height: 28px; }
.ai-window-actions button:hover { background: #f0f5fd; color: #286edb; }
.ai-window-actions .ai-expand-button { padding: 7px; }
.ai-window-actions .ai-expand-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ai-compact-mode-picker { position: relative; }
.ai-window-actions .ai-compact-mode-trigger { display: grid; place-items: center; font-size: 15px; line-height: 1; }
.ai-compact-mode-picker[data-mode="fast"] .ai-compact-mode-trigger { color: #b06b20; background: #fff8ec; }
.ai-compact-mode-picker[data-mode="thinking"] .ai-compact-mode-trigger { color: #6654a5; background: #f6f3ff; }
.ai-compact-mode-picker.open .ai-compact-mode-trigger { box-shadow: 0 0 0 2px rgba(91,117,159,.10); }
.ai-compact-mode-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 210px;
  padding: 6px;
  border: 1px solid #e3e7ec;
  border-radius: 13px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 14px 38px rgba(31,41,57,.16),0 2px 8px rgba(31,41,57,.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px) scale(.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .16s ease,transform .16s ease,visibility .16s ease;
}
.ai-compact-mode-picker.open .ai-compact-mode-menu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.ai-window-actions .ai-mode-option {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) 18px;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: auto;
  min-height: 52px;
  padding: 7px 8px;
  border-radius: 9px;
  color: #535b66;
  text-align: left;
  line-height: 1.2;
}
.ai-window-actions .ai-mode-option:hover { background: #f5f7f9; color: #2f3742; }
.ai-mode-option > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #f4f5f7; font-size: 14px; font-style: normal; }
.ai-mode-option[data-ai-response-mode="fast"] > i { color: #ae6b22; background: #fff7e9; }
.ai-mode-option[data-ai-response-mode="thinking"] > i { color: #6654a5; background: #f5f2ff; }
.ai-mode-option > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.ai-mode-option strong { color: #303741; font-size: 12px; font-weight: 650; }
.ai-mode-option small { color: #8b929c; font-size: 10px; white-space: nowrap; }
.ai-mode-option > b { opacity: 0; color: #4b78b8; font-size: 12px; font-weight: 700; }
.ai-mode-option.active > b { opacity: 1; }
.ai-chat-content { min-height: 0; overflow-y: auto; padding: 18px 24px 12px; background: linear-gradient(180deg,#fff 0%,#fbfdff 100%); }
.ai-welcome-robot { position: relative; width: 92px; height: 86px; margin: 0 auto 8px; }
.ai-welcome-svg { animation: aiFloat 4s ease-in-out infinite; }
.ai-spark { position: absolute; color: #ffc94e; animation: aiSpark 2.2s ease-in-out infinite; }
.ai-spark.s1 { left: -2px; top: 31px; }.ai-spark.s2 { right: -2px; top: 17px; color: #70a9ff; animation-delay: .6s; }
.ai-welcome-message { padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg,#f1f6ff,#eef4ff); color: #202b40; box-shadow: inset 0 0 0 1px rgba(74,141,255,.04); font-size: 13px; line-height: 1.65; }
.ai-welcome-message p { margin: 0 0 8px; }.ai-welcome-message p:last-child { margin-bottom: 0; }
.ai-chat-form { position: relative; display: flex; align-items: center; margin: 8px 14px 6px; padding: 0 10px 0 14px; border: 1px solid #e1e9f5; border-radius: 14px; background: #fff; }
.ai-chat-form:focus-within { border-color: rgba(74,141,255,.5); box-shadow: 0 0 0 3px rgba(74,141,255,.08); }
.ai-chat-form input { flex: 1; min-width: 0; height: 48px; padding: 0; border: 0; outline: 0; background: transparent; box-shadow: none; font: inherit; font-size: 13px; }
.ai-chat-form button { width: 34px; height: 34px; padding: 7px; border: 0; background: transparent; color: var(--ai-blue); box-shadow: none; }
.ai-chat-form button svg { width: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ai-coming-soon { position: absolute; right: 4px; bottom: 56px; width: max-content; max-width: 300px; padding: 9px 12px; border-radius: 10px; background: #22355c; color: #fff; box-shadow: 0 8px 20px rgba(20,42,82,.22); font-size: 12px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: .2s ease; }
.ai-coming-soon.show { opacity: 1; transform: none; }
.ai-chat footer { color: #9aa7bb; text-align: center; font-size: 10px; line-height: 18px; }

/* AI Workspace */
.ai-workspace { position: fixed; z-index: 2147482999; top: var(--ai-workspace-top,120px); right: 0; bottom: 0; left: var(--ai-workspace-left,260px); display: grid; grid-template-columns: 280px minmax(0,1fr); overflow: hidden; border-top: 1px solid #dde1e7; background: #fff; color: #20242b; opacity: 0; pointer-events: none; transform: translate(30%,28%) scale(.42); transform-origin: bottom right; transition: opacity 300ms ease, transform 300ms ease; }
.ai-assistant[data-state="workspace"] .ai-workspace { opacity: 1; pointer-events: auto; transform: none; }
.ai-workspace button { color: inherit; box-shadow: none; }
.ai-workspace-sidebar { min-width: 0; display: flex; flex-direction: column; padding: 18px 14px 14px; border-right: 1px solid #e3e6eb; background: #f7f7f6; }
.ai-workspace-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 17px; }
.ai-workspace-brand-avatar { width: 38px; height: 38px; }
.ai-workspace-brand div { display: grid; gap: 2px; }.ai-workspace-brand strong { font-size: 14px; }.ai-workspace-brand small { color: #8b9099; font-size: 10px; letter-spacing: .04em; }
.ai-workspace-create { display: grid; gap: 5px; padding-bottom: 18px; }
.ai-workspace-create button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 13px; font-weight: 600; }
.ai-workspace-create button:first-child:hover { background: #ececea; }.ai-workspace-create button span { color: #747a84; font-size: 18px; font-weight: 400; }
.ai-workspace-create button:disabled { color: #a1a6ae; cursor: default; }.ai-workspace-create em { margin-left: auto; color: #a3a7ae; font-size: 8px; font-style: normal; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ai-workspace-chats { min-height: 0; flex: 1; overflow-y: auto; padding: 0 2px; }
.ai-workspace-chats section { margin-bottom: 18px; }.ai-workspace-chats h4 { margin: 0 8px 7px; color: #9a9ea6; font-size: 10px; font-weight: 600; }
.ai-workspace-chats button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 35px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: #50555e; text-align: left; font-size: 12px; font-weight: 500; }
.ai-workspace-chats button:hover { background: #eeeeec; }.ai-workspace-chats button.active { background: #e8e8e5; color: #22262d; font-weight: 650; }.ai-workspace-chats button i { color: #a7abb2; font-size: 9px; font-style: normal; opacity: 0; }.ai-workspace-chats button:hover i { opacity: 1; }
.ai-chat-search { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 9px; border: 1px solid #e0e2e5; border-radius: 8px; background: #fff; color: #747982 !important; font-size: 12px; font-weight: 500; }.ai-chat-search svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }.ai-chat-search kbd { margin-left: auto; color: #a1a5ac; font: 9px inherit; }
.ai-workspace-conversation { min-width: 0; min-height: 0; display: grid; grid-template-rows: 64px minmax(0,1fr) auto; background: #fff; }
.ai-workspace-head { display: flex; align-items: center; gap: 10px; padding: 0 22px; border-bottom: 1px solid #eceef1; }
.ai-workspace-avatar { width: 38px; height: 38px; }.ai-workspace-head-avatar { width: 100%; height: 100%; filter: none; }.ai-workspace-head h3 { margin: 0 0 3px; font-size: 14px; }.ai-workspace-head p { display: flex; align-items: center; gap: 5px; margin: 0; color: #9398a1; font-size: 10px; }.ai-workspace-head p i { width: 6px; height: 6px; border-radius: 50%; background: #aaaeb5; }
.ai-workspace-actions { display: flex; gap: 4px; margin-left: auto; }.ai-workspace-actions button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #747a84; font-size: 21px; font-weight: 400; }.ai-workspace-actions button:hover { background: #f1f2f3; color: #24282f; }
.ai-workspace-messages { min-height: 0; overflow-y: auto; padding: 42px max(34px,calc((100% - 760px)/2)); }
.ai-message { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 14px; max-width: 760px; margin: 0 auto; }.ai-message-avatar { width: 34px; height: 34px; }.ai-reply-avatar { width: 100%; height: 100%; filter: none; }
.ai-message-body { color: #30343a; font-size: 14px; line-height: 1.72; }.ai-message-body p { margin: 0 0 12px; }.ai-message-body strong { color: #1e2228; }.ai-message-body ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 24px; margin: 5px 0 18px; padding: 0; list-style: none; }.ai-message-body li { position: relative; padding-left: 20px; }.ai-message-body li::before { content: "✓"; position: absolute; left: 0; color: #60666f; font-weight: 700; }
.ai-workspace-composer { padding: 12px max(28px,calc((100% - 780px)/2)) 18px; background: linear-gradient(180deg,rgba(255,255,255,0),#fff 22%); }.ai-composer-box { display: flex; align-items: flex-end; gap: 5px; max-width: 780px; min-height: 56px; margin: 0 auto; padding: 9px; border: 1px solid #dcdfe4; border-radius: 15px; background: #fff; box-shadow: 0 5px 20px rgba(24,31,42,.06); }.ai-composer-box textarea { min-height: 36px; flex: 1; resize: none; padding: 8px 5px; border: 0; outline: 0; background: transparent; color: #444a53; box-shadow: none; font: inherit; font-size: 13px; }.ai-composer-box button { width: 34px; height: 34px; flex: 0 0 auto; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: #a3a8b0; }.ai-composer-box button svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }.ai-composer-box .ai-composer-send { background: #e8e9eb; color: #a2a6ad; }.ai-workspace-composer > small { display: block; max-width: 780px; margin: 7px auto 0; color: #a0a4ab; text-align: center; font-size: 9px; }

/* Otter avatar: the shared mood classes above drive expressions; only motion anatomy is skin-specific. */
.ai-avatar-otter .ai-otter-tail { transform-origin: 70px 69px; transition: transform .25s ease; }
.ai-avatar-otter .ai-otter-head { transform-origin: 48px 49px; transition: transform .25s ease; }
.ai-avatar-otter .ai-otter-ear { transform-box: fill-box; transform-origin: center bottom; }
.ai-avatar-otter .ai-otter-arm { transition: transform .28s cubic-bezier(.2,.9,.25,1.2); }
.ai-avatar-otter .ai-otter-arm.right { transform-origin: 67px 65px; }
.ai-avatar-otter .ai-otter-arm.left { transform-origin: 29px 65px; }
.ai-avatar-otter .ai-otter-water { opacity: 0; transform-origin: 48px 84px; transition: opacity .2s ease; }
.ai-pet.is-hovering .ai-avatar-otter .ai-otter-tail { animation: aiOtterTailWave .65s ease-in-out 2; }
.ai-pet.is-hovering .ai-avatar-otter .ai-otter-ear.left { animation: aiOtterEarPop .55s ease-out; }
.ai-pet.is-hovering .ai-avatar-otter .ai-otter-ear.right { animation: aiOtterEarPop .55s .08s ease-out; }
.ai-pet.is-hovering .ai-avatar-otter .ai-otter-arm.right { animation: aiOtterWaveArm .72s ease-in-out infinite alternate; }
.ai-pet.is-hovering .ai-avatar-otter .ai-otter-water,
.ai-pet[data-mood="click"] .ai-avatar-otter .ai-otter-water,
.ai-pet[data-mood="happy"] .ai-avatar-otter .ai-otter-water,
.ai-welcome-svg.ai-avatar-otter .ai-otter-water { opacity: .82; animation: aiOtterWater 1.5s ease-in-out infinite; }
.ai-pet[data-mood="thinking"] .ai-avatar-otter .ai-otter-head { transform: rotate(-5deg); }
.ai-pet[data-mood="thinking"] .ai-avatar-otter .ai-otter-tail { animation: aiOtterTailSlow 1.5s ease-in-out infinite; }
.ai-pet[data-mood="happy"] .ai-avatar-otter .ai-avatar-body { transform-origin: 48px 80px; animation: aiOtterHappyJump .72s ease-in-out infinite; }
.ai-pet[data-mood="happy"] .ai-avatar-otter .ai-otter-arm.left { transform: rotate(72deg) translate(-1px,-1px); }
.ai-pet[data-mood="happy"] .ai-avatar-otter .ai-otter-arm.right { transform: rotate(-72deg) translate(1px,-1px); }
.ai-otter-brow { transform-box: fill-box; transform-origin: center; --brow-y:-1.1px; --brow-angle:-7deg; }
.ai-otter-brow.right { --brow-angle:7deg; }
.ai-pet:is([data-mood="suspend"],[data-mood="happy"],[data-mood="wave"],[data-mood="click"],[data-mood="sparkle"],[data-mood="heart"]) .ai-otter-brow,
.ai-avatar-option:is(:hover,:focus-within) .ai-otter-brow { animation: aiBrowExpression 1.8s ease-in-out infinite; }
.ai-pet:is([data-mood="thinking"],[data-mood="look"]) .ai-otter-brow { --brow-y:-1.6px; --brow-angle:-12deg; animation: aiBrowExpression 2.6s ease-in-out infinite; }
.ai-pet:is([data-mood="thinking"],[data-mood="look"]) .ai-otter-brow.right { --brow-y:.3px; --brow-angle:8deg; }
.ai-pet[data-mood="shy"] .ai-otter-brow { --brow-y:.7px; --brow-angle:10deg; animation: aiBrowExpression 2.4s ease-in-out infinite; }
.ai-pet[data-mood="shy"] .ai-otter-brow.right { --brow-angle:-10deg; }
@keyframes aiBrowExpression { 0%,100% { transform: translateY(0) rotate(0); } 35%,65% { transform: translateY(var(--brow-y)) rotate(var(--brow-angle)); } }
@media (prefers-reduced-motion: reduce) { .ai-otter-brow { animation: none !important; } }
.ai-avatar-otter .ai-otter-scarf-tail { transform-origin: 54px 64px; animation: aiScarfBreathe 3.2s ease-in-out infinite; }
.ai-pet[data-mood="wave"] .ai-avatar-otter .ai-otter-arm.right { animation: aiOtterHello .5s ease-in-out infinite alternate; }
.ai-pet[data-mood="wave"] .ai-avatar-otter .ai-otter-ear.right { animation: aiOtterEarPop .55s ease-out infinite alternate; }
.ai-pet[data-mood="look"] .ai-avatar-otter .ai-otter-head { animation: aiAvatarPeek 1.1s ease-in-out infinite; }
.ai-pet[data-mood="look"] .ai-avatar-otter .ai-otter-whiskers { animation: aiWhiskerTwitch .55s ease-in-out infinite alternate; }
.ai-pet[data-mood="sparkle"] .ai-avatar-otter .ai-avatar-body { transform-origin: 48px 82px; animation: aiOtterHappyJump .7s ease-in-out infinite; }

.ai-avatar-classic-bot .ai-bot-arm { transform-box: fill-box; transition: transform .25s ease; }
.ai-avatar-classic-bot .ai-bot-arm.right { transform-origin: left top; }
.ai-avatar-classic-bot .ai-bot-arm.left { transform-origin: right top; }
.ai-avatar-classic-bot .ai-bot-neckband { transform-origin: 48px 63px; animation: aiBotNeckBand 3.6s ease-in-out infinite; }
.ai-pet[data-mood="wave"] .ai-avatar-classic-bot .ai-bot-arm.right { animation: aiBotHello .5s ease-in-out infinite alternate; }
.ai-pet[data-mood="look"] .ai-avatar-classic-bot .ai-bot-body { transform-origin: 48px 56px; animation: aiAvatarPeek 1.1s ease-in-out infinite; }
.ai-pet[data-mood="sparkle"] .ai-avatar-classic-bot .ai-bot-body { transform-origin: 48px 82px; animation: aiBotStarJump .7s ease-in-out infinite; }

/* Drag is a distinct reaction, not a hover expression. Each skin keeps its personality. */
.ai-drag-face, .ai-drag-decoration { opacity: 0; pointer-events: none; }
.ai-pet.is-dragging .ai-expression,
.ai-pet.is-dragging .ai-mood-decoration { opacity: 0 !important; }
.ai-pet.is-dragging .ai-drag-face,
.ai-pet.is-dragging .ai-drag-decoration { opacity: 1; }
.ai-pet.is-dragging .ai-otter-shadow,
.ai-pet.is-dragging .ai-avatar-classic-bot > ellipse { opacity: 0; }
.ai-pet.is-dragging .ai-avatar-classic-bot .ai-bot-body { transform-origin: 48px 23px; animation: aiBotDragBalance .85s ease-in-out infinite; }
.ai-pet.is-dragging .ai-avatar-classic-bot .ai-antenna { animation: aiBotDragAntenna .38s ease-in-out infinite alternate; }
.ai-pet.is-dragging .ai-avatar-classic-bot .ai-bot-arm.left { animation: aiBotDragArm .45s ease-in-out infinite alternate; }
.ai-pet.is-dragging .ai-avatar-classic-bot .ai-bot-arm.right { animation: aiBotDragArm .45s -.45s ease-in-out infinite alternate-reverse; }
.ai-pet.is-dragging .ai-bot-drag-scan { animation: aiBotDragScan 1.2s ease-in-out infinite; }
.ai-pet.is-dragging .ai-bot-drag-signal { animation: aiDragSignal .8s ease-in-out infinite; }
.ai-pet.is-dragging .ai-avatar-otter .ai-otter-body { transform-origin: 48px 16px; animation: aiOtterDangle 1.2s ease-in-out infinite; }
.ai-pet.is-dragging .ai-avatar-otter .ai-otter-arm.left { animation: aiOtterPaddle .48s ease-in-out infinite alternate; }
.ai-pet.is-dragging .ai-avatar-otter .ai-otter-arm.right { animation: aiOtterPaddle .48s -.2s ease-in-out infinite alternate-reverse; }
.ai-pet.is-dragging .ai-avatar-otter .ai-otter-feet { transform-origin: 48px 83px; animation: aiOtterFeetKick .55s ease-in-out infinite alternate; }
.ai-pet.is-dragging .ai-avatar-otter .ai-otter-tail { transform-origin: 66px 82px; animation: aiOtterDragTail .4s ease-in-out infinite alternate; }
.ai-pet.is-dragging .ai-avatar-otter .ai-otter-brow { animation: none; transform: translateY(-2px) rotate(-12deg); }
.ai-pet.is-dragging .ai-avatar-otter .ai-otter-brow.right { transform: translateY(-2px) rotate(12deg); }
.ai-pet.is-dragging .ai-avatar-otter .ai-otter-ear { transform: rotate(-10deg); }
.ai-pet.is-dragging .ai-avatar-otter .ai-otter-ear.right { transform: rotate(10deg); }
.ai-pet.is-dragging .ai-otter-drag-fluster { animation: aiOtterFluster 1.2s ease-in-out infinite; }
@keyframes aiBotDragBalance { 0%,100% { transform: rotate(-5deg) translateY(1px); } 50% { transform: rotate(5deg) translateY(-1px); } }
@keyframes aiBotDragAntenna { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes aiBotDragArm { from { transform: rotate(-55deg); } to { transform: rotate(35deg); } }
@keyframes aiBotDragScan { 0%,100% { transform: translateY(0); opacity:.2; } 50% { transform: translateY(20px); opacity:.55; } }
@keyframes aiDragSignal { 0%,100% { opacity:.35; } 50% { opacity:1; } }
@keyframes aiOtterDangle { 0%,100% { transform: rotate(-7deg) translateY(1px); } 50% { transform: rotate(7deg) translateY(2px); } }
@keyframes aiOtterPaddle { from { transform: rotate(-38deg); } to { transform: rotate(38deg); } }
@keyframes aiOtterFeetKick { from { transform: translateY(0) rotate(-5deg); } to { transform: translateY(3px) rotate(5deg); } }
@keyframes aiOtterDragTail { from { transform: rotate(-20deg); } to { transform: rotate(16deg); } }
@keyframes aiOtterFluster { 0%,100% { transform: translateY(-1px); opacity:.55; } 60% { transform: translateY(3px); opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .ai-pet.is-dragging .ai-avatar * { animation: none !important; }
}

.ai-settings-panel { max-width: 720px; }
.settings-panel.ai-settings-panel { padding-top:12px; }
.ai-settings-panel .panel-head { position:relative; display:flex; align-items:center; min-height:228px; padding:24px 278px 24px 24px; overflow:hidden; border:0; border-radius:0; box-shadow:none; background:radial-gradient(ellipse at 78% 54%,rgba(130,170,216,.17) 0%,rgba(173,198,229,.075) 38%,transparent 72%); }
.ai-settings-panel .panel-head:has(.ai-settings-avatar[data-avatar-id="otter"]) { background:radial-gradient(ellipse at 78% 54%,rgba(180,151,126,.16) 0%,rgba(213,194,178,.07) 38%,transparent 72%); }
.ai-settings-panel .panel-head .ai-settings-eyebrow { margin: 0 0 8px; color: #397ce9; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.ai-settings-panel .panel-head .ai-settings-description { margin:12px 0 0; line-height:1.7; }
.ai-settings-avatar { position:absolute; width:352px; height:352px; right:-28px; top:6px; pointer-events:none; }
.ai-settings-avatar .ai-settings-illustration { display:block; width:100%; height:100%; object-fit:contain; transform:scaleX(-1); }
.ai-settings-avatar .ai-robot { width: 100%; height: 100%; filter: drop-shadow(0 16px 18px rgba(50,79,124,.16)); transform: scale(.82); }
@media (max-width:640px) {
  .ai-settings-panel .panel-head { min-height:180px; padding:18px 146px 18px 18px; }
  .ai-settings-avatar { width:206px; height:206px; right:-28px; }
}
.ai-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding: 18px; border: 1px solid #e7eef9; border-radius: 14px; background: #fbfdff; }
.ai-settings-row strong { font-size: 14px; }.ai-settings-row p { margin: 5px 0 0; color: #8491a5; font-size: 12px; }
.ai-switch { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.ai-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ai-switch span { position: relative; width: 44px; height: 24px; border-radius: 20px; background: #cad4e1; transition: .22s ease; }
.ai-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(41,59,91,.25); transition: .22s ease; }
.ai-switch input:checked + span { background: linear-gradient(90deg,var(--ai-blue),#70aaff); box-shadow: 0 0 0 3px rgba(74,141,255,.1); }
.ai-switch input:checked + span::after { transform: translateX(20px); }
.ai-switch em { min-width: 28px; color: #68778e; font-size: 12px; font-style: normal; }
.ai-settings-note { margin-top: 14px; padding: 15px 18px; border-radius: 14px; background: linear-gradient(135deg,rgba(74,141,255,.08),rgba(106,232,255,.08)); }
.ai-settings-note strong { color: #397ce9; font-size: 13px; }.ai-settings-note p { margin: 5px 0 0; color: #738198; font-size: 12px; line-height: 1.6; }
.ai-size-picker { margin: 20px 0 0; padding: 0; border: 0; }
.ai-size-picker legend { color: var(--ai-ink); font-size: 14px; font-weight: 750; }
.ai-size-picker > p { margin: 5px 0 12px; color: #8491a5; font-size: 12px; }
.ai-size-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.ai-size-options label { position: relative; cursor: pointer; }
.ai-size-options input { position: absolute; opacity: 0; pointer-events: none; }
.ai-size-options label > span { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; align-items: center; gap: 2px 12px; min-height: 70px; padding: 11px 14px; border: 1px solid #e2eaf6; border-radius: 14px; background: #fff; transition: .2s ease; }
.ai-size-options label:hover > span { border-color: #a9c9ff; transform: translateY(-1px); }
.ai-size-options input:checked + span { border-color: var(--ai-blue); background: #f8fbff; box-shadow: 0 0 0 3px rgba(74,141,255,.09); }
.ai-size-options img { grid-row: 1 / 3; display: block; justify-self: center; object-fit: contain; }
.ai-size-options img.is-small { width: 34px; height: 34px; }
.ai-size-options img.is-large { width: 44px; height: 44px; }
.ai-size-options input:focus-visible + span { outline:2px solid var(--ai-blue); outline-offset:3px; }
.ai-size-options strong { align-self: end; color: #253149; font-size: 13px; }
.ai-size-options small { align-self: start; color: #8390a5; font-size: 11px; }
.ai-avatar-picker { margin: 20px 0 0; padding: 0; border: 0; }
.ai-avatar-picker legend { margin-bottom: 4px; color: var(--ai-ink); font-size: 14px; font-weight: 750; }
.ai-avatar-picker > p { margin: 0 0 12px; color: #8491a5; font-size: 12px; }
.ai-avatar-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.ai-avatar-option { position: relative; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 11px; min-width: 0; padding: 13px; border: 1px solid #e2eaf6; border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ai-avatar-option:hover { transform: translateY(-1px); border-color: #a9c9ff; box-shadow: 0 8px 22px rgba(74,141,255,.1); }
.ai-avatar-option:has(input:checked) { border-color: var(--ai-blue); background: #f8fbff; box-shadow: 0 0 0 3px rgba(74,141,255,.09); }
.ai-avatar-option input { position: absolute; opacity: 0; pointer-events: none; }
.ai-avatar-option-art { width: 54px; height: 54px; display: block; border-radius: 16px; background: linear-gradient(135deg,#f4f8ff,#e9f2ff); }
.ai-picker-avatar { width: 100%; height: 100%; }
.ai-avatar-option span:nth-of-type(2) { min-width: 0; }
.ai-avatar-option strong,.ai-avatar-option small { display: block; }
.ai-avatar-option strong { color: #253149; font-size: 13px; }.ai-avatar-option small { margin-top: 4px; overflow: hidden; color: #8390a5; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ai-avatar-option i { align-self: start; padding: 3px 6px; border-radius: 8px; background: #eef5ff; color: #4a8dff; font-size: 9px; font-style: normal; }

/* AI workspace readability and modal focus */
.ai-workspace-backdrop { position: fixed; z-index: 2147482998; inset: 0; background: rgba(238,242,247,.5); -webkit-backdrop-filter: blur(5px) saturate(.82); backdrop-filter: blur(5px) saturate(.82); opacity: 0; pointer-events: none; transition: opacity 240ms ease; }
.ai-assistant[data-state="workspace"] .ai-workspace-backdrop { opacity: 1; pointer-events: auto; }
.ai-workspace { right: 12px; bottom: 12px; grid-template-columns: 292px minmax(0,1fr); border: 1px solid #d9dee7; border-radius: 16px; box-shadow: 0 24px 70px rgba(20,28,42,.2),0 4px 16px rgba(20,28,42,.08); }
.ai-welcome-robot { width: 108px; height: 101px; margin-bottom: 10px; }
.ai-welcome-message { padding: 15px 17px; font-size: 14px; line-height: 1.7; }
.ai-workspace-brand-avatar,.ai-workspace-avatar { width: 46px; height: 46px; }
.ai-workspace-brand div { gap: 3px; }
.ai-workspace-brand strong,.ai-workspace-head h3 { font-size: 16px; }
.ai-workspace-brand small,.ai-workspace-head p { font-size: 12px; }
.ai-workspace-create button { justify-content: flex-start; min-height: 42px; font-size: 14px; font-weight: 650; text-align: left; }
.ai-workspace-create em { margin-left: auto; font-size: 9px; font-weight: 700; }
.ai-workspace-chats section { margin-bottom: 20px; }
.ai-workspace-chats h4 { margin-bottom: 8px; color: #8e939c; font-size: 12px; font-weight: 650; }
.ai-workspace-chats button { min-height: 40px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 520; }
.ai-workspace-chats button.active { font-weight: 680; }
.ai-workspace-chats button i { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; font-size: 0; }
.ai-workspace-chats button i b { display: block; width: 4px; height: 4px; border-radius: 50%; background: #737983; }
.ai-workspace-chats button.active i { opacity: 1; }
.ai-chat-search { min-height: 42px; font-size: 13px; }
.ai-message { grid-template-columns: 48px minmax(0,1fr); gap: 16px; max-width: 800px; }
.ai-message-avatar { width: 48px; height: 48px; }
.ai-message-body { font-size: 16px; line-height: 1.75; }
.ai-composer-box textarea { font-size: 15px; }

/* Shared live-chat messages */
.ai-compact-messages { display: grid; align-content: start; gap: 22px; min-height: 100%; }
.ai-compact-message { position: relative; display: flex; align-items: flex-start; gap: 8px; color: #303946; font-size: 12px; line-height: 1.65; }
.ai-compact-message > div { max-width: calc(100% - 38px); padding: 10px 12px; border-radius: 12px; background: #f0f4fa; overflow-wrap: anywhere; }
.ai-compact-message-user { justify-content: flex-end; }.ai-compact-message-user > div { max-width: 82%; background: #e9edf3; color: #222a35; border-bottom-right-radius: 4px; }
.ai-compact-message-assistant > div { border-bottom-left-radius: 4px; }.ai-compact-avatar { width: 30px; height: 30px; flex: 0 0 auto; }.ai-compact-reply-avatar { width: 100%; height: 100%; filter: none; }
.ai-compact-message.is-error > div { border: 1px solid #ecd6d3; background: #fff7f6; color: #9c3d34; }
.ai-chat-form button:disabled { cursor: wait; opacity: .45; }
.ai-message + .ai-message { margin-top: 26px; }.ai-message-user { display: flex; justify-content: flex-end; }.ai-message-user .ai-message-body { max-width: min(78%,620px); padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: #f0f1f2; overflow-wrap: anywhere; }.ai-message.is-error .ai-message-body { color: #9c3d34; }
.ai-typing { display: inline-flex; align-items: center; gap: 4px; min-height: 18px; }.ai-typing i { width: 5px; height: 5px; border-radius: 50%; background: #8e949d; animation: aiTyping 1.1s ease-in-out infinite; }.ai-typing i:nth-child(2) { animation-delay: .14s; }.ai-typing i:nth-child(3) { animation-delay: .28s; }
.ai-composer-box .ai-composer-send { background: #292d33; color: #fff; }.ai-composer-box .ai-composer-send:disabled { background: #e8e9eb; color: #a2a6ad; cursor: wait; }

@keyframes aiFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes aiAntenna { 0%,82%,100% { transform: rotate(0); } 87% { transform: rotate(-7deg); } 93% { transform: rotate(7deg); } }
@keyframes aiBlink { 0%,43%,48%,100% { transform: scaleY(1); } 45%,46% { transform: scaleY(.08); } }
@keyframes aiSpark { 0%,100% { transform: scale(.7) rotate(0); opacity: .45; } 50% { transform: scale(1.15) rotate(25deg); opacity: 1; } }
@keyframes aiHeartPop { 0%,100% { transform: translateY(1px) scale(.9); } 50% { transform: translateY(-3px) scale(1.08); } }
@keyframes aiClickBounce { 0% { transform: scale(1); } 48% { transform: scale(.9,1.08); } 100% { transform: scale(1); } }
@keyframes aiRays { 0% { opacity: 0; transform: scale(.6); } 55% { opacity: 1; transform: scale(1.08); } 100% { opacity: .8; transform: scale(1); } }
@keyframes aiThinkFace { 0%,100% { transform: translateX(0); } 50% { transform: translateX(1px); } }
@keyframes aiBubble { 0%,100% { transform: translateY(1px); } 50% { transform: translateY(-2px); } }
@keyframes aiHappyEyes { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes aiOtterTailWave { 0%,100% { transform: rotate(0); } 40% { transform: rotate(13deg); } 75% { transform: rotate(-8deg); } }
@keyframes aiOtterTailSlow { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(8deg); } }
@keyframes aiOtterEarPop { 0%,100% { transform: scale(1); } 45% { transform: scale(1.16,.9); } }
@keyframes aiOtterHappyJump { 0%,100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-3px) scale(1.02); } }
@keyframes aiOtterWaveArm { from { transform: rotate(-126deg); } to { transform: rotate(-148deg); } }
@keyframes aiOtterWater { 0%,100% { transform: scaleX(.94) translateY(1px); } 50% { transform: scaleX(1.04) translateY(-1px); } }
@keyframes aiScarfBreathe { 0%,100% { transform: rotate(0); } 50% { transform: rotate(3deg); } }
@keyframes aiOtterHello { from { transform: rotate(-112deg) translate(-1px,-1px); } to { transform: rotate(-137deg) translate(-1px,-1px); } }
@keyframes aiBotHello { from { transform: translateX(7px) rotate(-75deg); } to { transform: translateX(7px) rotate(-105deg); } }
@keyframes aiAvatarPeek { 0%,100% { transform: rotate(0) translateX(0); } 50% { transform: rotate(5deg) translateX(1px); } }
@keyframes aiWhiskerTwitch { from { transform: translateX(0); } to { transform: translateX(1.4px); } }
@keyframes aiWaveMark { 0%,100% { transform: rotate(-5deg) scale(.92); opacity: .5; } 50% { transform: rotate(4deg) scale(1.08); opacity: 1; } }
@keyframes aiLookDots { 0%,100% { transform: translate(0,1px); opacity: .45; } 50% { transform: translate(2px,-2px); opacity: 1; } }
@keyframes aiStarEyes { 0%,100% { transform: scale(.9); } 50% { transform: scale(1.12); } }
@keyframes aiBotNeckBand { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.97); } }
@keyframes aiBotStarJump { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-3px) rotate(-1deg); } }
@keyframes aiTyping { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } }

@media (max-width: 560px) {
  .ai-assistant { right: 14px; bottom: 14px; }
  .ai-chat { width: min(360px, calc(100vw - 28px)); height: min(500px, calc(100vh - 28px)); }
  .ai-pet-tip { display: none; }
  .ai-avatar-options { grid-template-columns: 1fr; }
  .ai-size-options { grid-template-columns: 1fr; }
  .ai-workspace { grid-template-columns: 1fr; }
  .ai-workspace-sidebar { display: none; }
  .ai-workspace-messages { padding: 26px 20px; }
  .ai-message-body ul { grid-template-columns: 1fr; }
  .ai-workspace-composer { padding-right: 14px; padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-pet, .ai-robot .ai-antenna, .ai-robot .ai-eyes, .ai-welcome-svg, .ai-spark, .ai-expression, .ai-mood-decoration, .ai-bot-body { animation: none !important; }
  .ai-chat { transition-duration: .01ms; }
}

/* Persistent chat workspace */
body.ai-workspace-open { overflow: hidden !important; }
.ai-assistant[data-state="workspace"] .ai-workspace-backdrop { display: none; }
.ai-workspace {
  inset: 0;
  width: 100vw;
  height: 100vh;
  grid-template-columns: 286px minmax(0,1fr);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.ai-workspace-sidebar { padding: 22px 16px 16px; background: #f7f8f8; }
.ai-workspace-brand { padding: 0 8px 22px; }
.ai-workspace-brand strong { font-size: 17px; }
.ai-workspace-brand small { font-size: 12px; }
.ai-workspace-create { padding-bottom: 14px; }
.ai-workspace-create button { min-height: 44px; font-size: 15px; }
.ai-workspace-chats h4 { font-size: 13px; }
.ai-chat-row { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 32px; align-items: center; border-radius: 9px; }
.ai-chat-row.active { background: #e9ecef; }
.ai-workspace-chats .ai-chat-row > button { min-width: 0; min-height: 42px; font-size: 14px; }
.ai-workspace-chats .ai-chat-row > button:first-child { overflow: hidden; }
.ai-workspace-chats .ai-chat-row > button:first-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-workspace-chats .ai-chat-more { width: 30px; padding: 0; justify-content: center; gap: 2px; opacity: 0; }
.ai-chat-row:hover .ai-chat-more,.ai-chat-row.active .ai-chat-more { opacity: 1; }
.ai-workspace-chats .ai-chat-more b { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.ai-chat-empty { padding: 34px 12px; color: #747b86; text-align: center; }
.ai-chat-empty strong { color: #444b55; font-size: 14px; }
.ai-chat-empty p { margin: 8px 0 0; font-size: 13px; line-height: 1.55; }
.ai-chat-loading,.ai-conversation-loading { display: flex; align-items: center; justify-content: center; gap: 9px; color: #8a919b; font-size: 13px; }
.ai-chat-loading { min-height: 90px; }
.ai-chat-loading i { width: 15px; height: 15px; border: 2px solid #dce2e9; border-top-color: #7d96ba; border-radius: 50%; animation: aiLoadingSpin .8s linear infinite; }
.ai-conversation-loading { min-height: 100%; flex-direction: column; }
.ai-conversation-loading small { font-size: 12px; }
.ai-inline-toast { position: fixed; z-index: 2147483647; top: 22px; left: 50%; max-width: min(440px,calc(100vw - 32px)); padding: 11px 15px; border: 1px solid #e0e4e9; border-radius: 10px; background: rgba(255,255,255,.97); color: #434a54; box-shadow: 0 12px 30px rgba(22,30,42,.15); font-size: 14px; opacity: 0; transform: translate(-50%,-8px); transition: .22s ease; }
.ai-inline-toast.show { opacity: 1; transform: translate(-50%,0); }
.ai-chat-search { padding-right: 12px; }
.ai-chat-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #343a43; font: inherit; font-size: 14px; }
.ai-chat-search input::placeholder { color: #9a9fa7; }
.ai-chat-context-menu {
  position: fixed;
  z-index: 2147483646;
  width: 132px;
  padding: 6px;
  border: 1px solid #e0e3e7;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(22,28,38,.16);
}
.ai-chat-context-menu button { display: block; width: 100%; min-height: 35px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: #30353d; text-align: left; font-size: 14px; }
.ai-chat-context-menu button:hover { background: #f1f2f3; }
.ai-chat-context-menu button.danger { color: #b43b36; }
.ai-assistant-dialog { position: fixed; z-index: 2147483647; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(30,35,43,.28); }
.ai-assistant-dialog > div { width: min(410px,100%); padding: 22px; border: 1px solid #e0e3e7; border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(20,27,38,.22); }
.ai-assistant-dialog h3 { margin: 0; color: #272c34; font-size: 17px; }
.ai-assistant-dialog p { margin: 9px 0 0; color: #6e7580; font-size: 14px; line-height: 1.55; }
.ai-assistant-dialog input { width: 100%; height: 42px; margin-top: 16px; padding: 0 12px; border: 1px solid #d9dde3; border-radius: 9px; outline: 0; color: #30353d; font-size: 15px; }
.ai-assistant-dialog input:focus { border-color: #8eb2e8; box-shadow: 0 0 0 3px rgba(74,141,255,.1); }
.ai-assistant-dialog footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.ai-assistant-dialog button { min-width: 72px; height: 38px; padding: 0 14px; border: 1px solid #d9dde3; border-radius: 9px; background: #fff; color: #4b525d; font-size: 14px; }
.ai-assistant-dialog button.primary { border-color: #3f78d4; background: #3f78d4; color: #fff; }
.ai-assistant-dialog button.danger { border-color: #b7443e; background: #b7443e; color: #fff; }
.ai-workspace-conversation { position: relative; grid-template-rows: 72px minmax(0,1fr) auto; }
.ai-workspace-head { padding: 0 28px; }
.ai-workspace-head h3 { font-size: 18px; }
.ai-workspace-head p { font-size: 13px; }
.ai-workspace-head p i { width: 7px; height: 7px; background: #55b987; }
.ai-workspace-messages { padding: 42px 32px 30px; scroll-behavior: smooth; }
.ai-message-stream { width: min(100%,960px); margin: 0 auto; }
.ai-message {
  position: relative;
  max-width: none;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 13px;
  align-items: start;
}
.ai-message-avatar { width: 38px; height: 38px; }
.ai-message-body {
  width: fit-content;
  max-width: min(78%,760px);
  padding: 12px 15px;
  border: 1px solid #e8ebef;
  border-radius: 5px 16px 16px 16px;
  background: #f8f9fa;
  color: #292e36;
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.ai-message-user {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
}
.ai-message-user .ai-message-body {
  width: auto;
  max-width: min(76%,720px);
  padding: 12px 16px;
  border: 0;
  border-radius: 16px 5px 16px 16px;
  background: #e9edf2;
  color: #20252c;
}
.ai-message-actions {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity .16s ease,transform .16s ease;
}
.ai-message-assistant .ai-message-actions { left: 51px; bottom: -28px; }
.ai-compact-message-assistant .ai-message-actions { left: 38px; bottom: -23px; }
.ai-message-assistant:hover .ai-message-actions,
.ai-message-assistant:focus-within .ai-message-actions,
.ai-compact-message-assistant:hover .ai-message-actions,
.ai-compact-message-assistant:focus-within .ai-message-actions { opacity: 1; pointer-events: auto; transform: none; }
.ai-message-actions button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 5px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #858c96;
  box-shadow: none;
}
.ai-message-actions button:hover { background: #eef0f3; color: #303741; }
.ai-message-actions button.is-done { color: #4b9b72; }
.ai-message-actions svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ai-user-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: #4f5968;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.ai-user-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ai-user-avatar.compact { width: 28px; height: 28px; font-size: 11px; }
.ai-message-body pre { max-width: 100%; margin: 10px 0; padding: 13px 15px; overflow: auto; border-radius: 10px; background: #20242b; color: #eef1f5; line-height: 1.55; white-space: pre; }
.ai-message-body code { padding: 1px 4px; border-radius: 4px; background: rgba(37,42,49,.08); font-family: Consolas,monospace; font-size: .9em; }
.ai-message-body pre code { padding: 0; background: transparent; color: inherit; }
.ai-conversation-empty { display: grid; place-items: center; align-content: center; min-height: 100%; padding: 48px; color: #7d838c; text-align: center; }
.ai-conversation-empty h2 { margin: 0 0 9px; color: #2e343c; font-size: 22px; font-weight: 650; }
.ai-conversation-empty p { max-width: 500px; margin: 0; font-size: 15px; line-height: 1.65; }
.ai-message-attachments,.ai-compact-attachments,.ai-workspace-attachments { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-message-attachments { margin-bottom: 9px; }
.ai-compact-attachments:empty,.ai-workspace-attachments:empty { display: none; }
.ai-attachment-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 250px; min-height: 34px; padding: 4px 8px; border: 1px solid #dfe4ea; border-radius: 10px; background: #fff; color: #4c535d; font-size: 12px; }
.ai-attachment-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-attachment-chip > img { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; }
.ai-attachment-chip > i { color: #65768d; font-style: normal; }
.ai-attachment-chip > em { flex: 0 0 auto; color: #a06a28; font-size: 10px; font-style: normal; }
.ai-attachment-chip > button { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: #eef0f2; color: #6e747d; }
.ai-message-retry { display: block; margin-top: 9px; padding: 5px 9px; border: 1px solid #d9dde2; border-radius: 7px; background: #fff; color: #4a5360; font-size: 12px; }
.ai-workspace-composer { padding: 12px 28px 20px; }
.ai-workspace-attachments { width: min(100%,900px); margin: 0 auto 8px; }
.ai-response-mode { display: flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid #e1e5ea; border-radius: 10px; background: #f6f7f8; }
.ai-response-mode button { min-height: 28px; padding: 4px 10px; border: 0; border-radius: 7px; background: transparent; color: #707781; font-size: 12px; line-height: 1; transition: background .18s ease,color .18s ease,box-shadow .18s ease; }
.ai-response-mode button:hover { color: #343a43; }
.ai-response-mode button.active { background: #fff; color: #2f5f9e; box-shadow: 0 1px 4px rgba(33,45,63,.10); }
.ai-response-mode-workspace { width: max-content; max-width: 900px; margin: 0 auto 8px 0; margin-left: max(0px,calc((100% - 900px)/2)); }
.ai-message-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.ai-thinking-badge,.ai-source-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border: 1px solid #e1e5ea; border-radius: 8px; background: #f7f8fa; color: #6b7380; font-size: 10px; line-height: 1.25; }
.ai-thinking-badge { color: #655a86; background: #f8f7fb; border-color: #e5e1ee; }
.ai-source-chip { color: #52677d; }
.ai-response-loading { display: inline-flex; align-items: center; gap: 8px; color: #747c87; }
.ai-response-loading em { font-size: 12px; font-style: normal; }
.ai-composer-box {
  position: relative;
  z-index: 0;
  width: min(100%,900px);
  max-width: none;
  min-height: 66px;
  border-radius: 18px;
  border-color: #dde3ec;
  box-shadow: 0 4px 18px rgba(42,55,78,.045);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.ai-composer-box::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(110deg,transparent 18%,rgba(90,150,255,.20) 38%,rgba(90,220,220,.14) 50%,rgba(170,130,255,.14) 62%,transparent 82%);
  background-size: 220% 100%;
  background-position: 200% 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
}
.ai-composer-box:focus-within {
  border-color: rgba(95,140,255,.45);
  box-shadow: 0 4px 18px rgba(42,55,78,.045);
}
.ai-composer-box:focus-within::before { opacity: .62; animation: aiAurora 5s ease-in-out infinite; }
.ai-composer-box textarea { max-height: 200px; min-height: 38px; overflow-y: auto; font-size: 15px; line-height: 1.55; }
.ai-composer-box .ai-composer-send {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #3f78d4;
  color: #fff;
  transition: transform .18s ease,background .18s ease;
}
.ai-composer-box .ai-composer-send:hover:not(:disabled) { transform: scale(1.05); background: #316bc6; }
.ai-composer-box .ai-composer-send:disabled { background: #e5e8eb; color: #a7adb4; cursor: default; }
.ai-workspace-composer > small { max-width: 900px; font-size: 11px; }
.ai-scroll-latest { position: absolute; z-index: 3; left: 50%; bottom: 116px; display: none; transform: translateX(-50%); padding: 7px 12px; border: 1px solid #dde1e6; border-radius: 18px; background: rgba(255,255,255,.96); color: #59616c; box-shadow: 0 6px 18px rgba(30,37,49,.1); font-size: 12px; }
.ai-scroll-latest.show { display: block; }
.ai-chat { grid-template-rows: 72px minmax(0,1fr) auto 24px; }
.ai-chat-form { flex-wrap: wrap; min-height: 58px; padding-left: 8px; }
.ai-compact-attachments { flex: 0 0 100%; padding: 7px 4px 0; }
.ai-compact-attach { flex: 0 0 auto; color: #7e8998 !important; }
.ai-chat-form button[type="submit"] { border-radius: 50%; background: #4a78c4; color: #fff; }
.ai-chat-form button[type="submit"]:disabled { background: #edf0f3; color: #a7adb4; cursor: default; }
.ai-compact-message > div { font-size: 13px; }
.ai-compact-message pre { max-width: 100%; overflow: auto; white-space: pre; }
@keyframes aiAurora {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@keyframes aiLoadingSpin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .ai-workspace { grid-template-columns: 1fr; }
  .ai-workspace-sidebar { display: none; }
  .ai-workspace-messages { padding: 28px 16px; }
  .ai-message-body,.ai-message-user .ai-message-body { max-width: calc(100vw - 94px); font-size: 15px; }
  .ai-workspace-composer { padding: 10px 14px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-expression,.ai-mood-decoration { transition: none !important; }
  .ai-composer-box:focus-within::before { animation: none; }
  .ai-chat-loading i { animation: none; }
  .ai-workspace { transition-duration: .01ms; }
  .ai-workspace-messages { scroll-behavior: auto; }
}