/* ════════════════════════════════════════════════════════════════════════
   ai-float.css — Eney-style floating AI assistant
   Loaded LAST so it wins over app.css + enhance.css. Frontend only.
════════════════════════════════════════════════════════════════════════ */

/* ── 1. PANEL IS INVISIBLE — only its children float ──────────────── */
.ai-panel,
[data-theme="dark"] .ai-panel {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  gap: 10px;
  padding: 0;
  /* starting height only — JS (_aiPanelFollowFab) sets the real height
     inline based on the room above the blob, so NO !important here */
  height: min(520px, calc(100vh - 190px));
  /* enhance.css collapses this under 680px viewport — hold the width */
  width: min(390px, calc(100vw - 28px)) !important;
  max-width: none !important;
  min-width: 0;
}
/* kill the glass sheen overlay from enhance.css */
.ai-panel::before { display: none !important; }

/* ── 2. HEADER — floating pill (this is the drag handle) ──────────── */
.ai-panel .ai-head,
[data-theme="dark"] .ai-panel .ai-head {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 10px 26px rgba(0,0,0,.16) !important;
  padding: 8px 10px 8px 8px !important;
  margin: 0 2px;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;          /* required for pointer-drag on touch */
}
.ai-panel .ai-head:active { cursor: grabbing; }
/* header text must be readable in BOTH themes */
.ai-panel .ai-head h3 { color: var(--text) !important; font-size: 13.5px; }
.ai-panel .ai-head .ai-sub { color: var(--text-3) !important; font-size: 10.5px; }
.ai-panel .ai-head .ai-ava { width: 32px !important; height: 32px !important; border-radius: 50% !important; }
.ai-panel .ai-head .ai-ava svg { width: 17px !important; height: 17px !important; }
.ai-panel .ai-head-btn {
  width: 27px !important; height: 27px !important;
  border-color: var(--border) !important;
  background: var(--surface-2) !important;
  color: var(--text-3) !important;
}
.ai-panel .ai-head-btn:hover { background: var(--brand) !important; color: #fff !important; }
.ai-panel .ai-head-btn svg { width: 14px !important; height: 14px !important; }

/* ── 3. MACHINE SELECT — floating pill ────────────────────────────── */
.ai-panel > div:has(> #ai-machine-sel) { padding: 0 2px !important; flex-shrink: 0; }
#ai-machine-sel {
  border-radius: 999px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.1), 0 8px 20px rgba(0,0,0,.13);
  padding: 8px 14px !important;
}

/* ── 4. CHAT AREA — no container, bubbles float free ──────────────── */
.ai-panel .ai-body {
  background: none !important;
  padding: 4px 2px !important;
  gap: 12px !important;
  overflow-y: auto;
  scrollbar-width: thin;
}
.ai-panel .ai-body::-webkit-scrollbar { width: 5px; }
.ai-panel .ai-body::-webkit-scrollbar-thumb { background: rgba(128,128,128,.3); border-radius: 3px; }
.ai-panel .ai-body::-webkit-scrollbar-track { background: transparent; }

.ai-panel .ai-msg.bot,
[data-theme="dark"] .ai-panel .ai-msg.bot {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: none !important;
  border-radius: 20px !important;
  border-bottom-left-radius: 7px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.13), 0 10px 26px rgba(0,0,0,.17) !important;
  color: var(--text) !important;
}
.ai-panel .ai-msg.me {
  background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  border-bottom-right-radius: 7px !important;
  box-shadow: 0 2px 8px rgba(37,99,235,.32), 0 10px 28px rgba(124,58,237,.34) !important;
}
.ai-panel .ai-thinking {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  border-bottom-left-radius: 7px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.13), 0 10px 26px rgba(0,0,0,.17) !important;
}

/* ── 5. PRESET CHIPS — floating ───────────────────────────────────── */
.ai-panel .ai-presets { background: none !important; border: none !important; padding: 2px !important; flex-shrink: 0; }
.ai-panel .ai-preset,
[data-theme="dark"] .ai-panel .ai-preset {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: none !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 5px rgba(0,0,0,.1), 0 6px 16px rgba(0,0,0,.13);
  transition: transform .15s var(--ease), box-shadow .15s;
}
.ai-panel .ai-preset:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.14), 0 12px 26px rgba(0,0,0,.18); }

/* ── 6. INPUT BAR — floating pill ─────────────────────────────────── */
.ai-panel .ai-input,
[data-theme="dark"] .ai-panel .ai-input {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-top-color: var(--border) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 12px 30px rgba(0,0,0,.2) !important;
  margin: 0 2px 2px;
  padding: 6px 6px 6px 16px !important;
  flex-shrink: 0;
}
.ai-panel .ai-input textarea,
[data-theme="dark"] .ai-panel .ai-input textarea {
  background: none !important;
  border: none !important;
  color: var(--text) !important;
}
.ai-panel .ai-send { border-radius: 50% !important; flex-shrink: 0; }

/* usage / history popovers still need a solid backing */
.ai-panel .ai-usage-panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  margin: 0 2px;
}

/* ── 7. FULLSCREEN ─────────────────────────────────────────────────
   NOTE: `[data-theme="dark"] .ai-panel` above is specificity (0,2,0) —
   the same as `.ai-panel.fullscreen` in app.css — and this file loads
   later, so it was winning and pinning the width to 390px. These rules
   are (0,3,0) so fullscreen actually takes over.                      */
html .ai-panel.fullscreen,
[data-theme="dark"] .ai-panel.fullscreen {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  left: 0 !important; top: 0 !important;
  right: auto !important; bottom: auto !important;
  background: var(--bg) !important;
  border-radius: 0 !important;
  padding: 22px 20px !important;
  gap: 14px;
  align-items: center;              /* centre the stack of floating parts */
}
/* Each part keeps its own floating container, just centred and wider */
html .ai-panel.fullscreen .ai-head,
html .ai-panel.fullscreen > div:has(> #ai-machine-sel),
html .ai-panel.fullscreen .ai-body,
html .ai-panel.fullscreen .ai-presets,
html .ai-panel.fullscreen .ai-input,
html .ai-panel.fullscreen .ai-usage-panel {
  width: 100%;
  max-width: 860px;
}
html .ai-panel.fullscreen .ai-body {
  padding: 8px 4px !important;
  gap: 16px !important;
}
/* bubbles can breathe on a big screen, but stay individual cards */
html .ai-panel.fullscreen .ai-msg { max-width: 74%; font-size: 14px; }
html .ai-panel.fullscreen .ai-presets { display: flex; flex-wrap: wrap; gap: 8px; }
/* the blob is meaningless in fullscreen — hidden from JS via .hidden */

/* ── 9. BLOB MASCOT — eyes that look around ───────────────────────── */
.ai-fab {
  overflow: visible !important;
  cursor: grab;
  touch-action: none;          /* let us drag it on touch screens */
}
.ai-fab:active { cursor: grabbing; }
/* the idle bob uses transform — kill it while dragging so it can't fight
   the left/top we are setting */
.ai-fab[style*="left"] { animation: none !important; }
/* smooth slide when parking / popping out of an edge */
.ai-fab { transition: left .3s cubic-bezier(.34,1.56,.64,1),
                      top  .3s cubic-bezier(.34,1.56,.64,1),
                      box-shadow .2s; }

/* ── 9c. EDGE PEEK — half the blob tucked off screen ──────────────── */
.ai-fab.peek-left, .ai-fab.peek-right {
  animation: none !important;
  box-shadow: 0 6px 22px rgba(37,99,235,.5) !important;
}
/* hide the eye that sits on the off-screen half */
.ai-fab.peek-left  .ai-eye:first-child { opacity: 0; }
.ai-fab.peek-right .ai-eye:last-child  { opacity: 0; }
.ai-fab.peek-left  .ai-eye, .ai-fab.peek-right .ai-eye { transition: opacity .2s; }
/* squash it against the edge it is pressed into */
.ai-fab.peek-left  { border-radius: 0 50% 50% 0 / 0 50% 50% 0 !important; }
.ai-fab.peek-right { border-radius: 50% 0 0 50% / 50% 0 0 50% !important; }
/* the tooltip would hang off screen while parked */
.ai-fab.peek-left .ai-fab-tip, .ai-fab.peek-right .ai-fab-tip { display: none; }

.ai-fab svg { display: none; }              /* old robot icon — replaced by eyes */
.ai-eyes {
  display: flex; gap: 9px; align-items: center;
  pointer-events: none; position: relative; z-index: 2;
  transition: transform .18s cubic-bezier(.22,.61,.36,1);
}
.ai-eye {
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(8,15,30,.3), inset 0 -2px 3px rgba(8,15,30,.1);
  transition: transform .12s ease;
  transform-origin: center;
}
/* blink is driven from JS so the timing feels random, not metronomic */
.ai-fab.blink .ai-eye { transform: scaleY(.1); }
/* one-eye wink */
.ai-fab.wink .ai-eye:first-child { transform: scaleY(.1); }

/* thinking — blob wobbles, eyes roll */
.ai-fab.thinking { animation: aiBlobThink 1.1s ease-in-out infinite !important; }
.ai-fab.thinking .ai-eyes { animation: aiEyeRoll 1.4s ease-in-out infinite; }
@keyframes aiBlobThink {
  0%,100% { transform: rotate(-6deg) scale(1,1); }
  50%     { transform: rotate(6deg)  scale(1.05,.95); }
}
@keyframes aiEyeRoll {
  0%,100% { transform: translate(-3px,-2px); }
  25%     { transform: translate(3px,-2px); }
  50%     { transform: translate(3px,2px); }
  75%     { transform: translate(-3px,2px); }
}

/* click squash */
.ai-fab.poke { animation: aiPoke .45s cubic-bezier(.34,1.56,.64,1) !important; }
@keyframes aiPoke {
  0%   { transform: scale(1,1); }
  30%  { transform: scale(1.2,.78) translateY(6px); }
  55%  { transform: scale(.88,1.16) translateY(-8px); }
  78%  { transform: scale(1.06,.95) translateY(2px); }
  100% { transform: scale(1,1) translateY(0); }
}

/* ── 9b. BLOB EMOTIONS ────────────────────────────────────────────── */
/* happy — squinty ^ ^ smile (on click) */
.ai-fab.happy .ai-eye {
  height: 5px !important;
  border-radius: 8px 8px 3px 3px !important;
  transform: scaleX(1.25);
}
.ai-fab.happy { animation: aiHappyHop .7s ease-in-out !important; }
@keyframes aiHappyHop {
  0%,100% { transform: translateY(0)    scale(1,1); }
  30%     { transform: translateY(-9px) scale(.94,1.08); }
  60%     { transform: translateY(0)    scale(1.06,.94); }
}

/* typing — eyes shrink and look down at the input */
.ai-fab.typing .ai-eyes { transform: translateY(3.5px) !important; }
.ai-fab.typing .ai-eye  { height: 9px !important; width: 11px !important; }

/* wow — wide eyes when the answer lands */
.ai-fab.wow .ai-eye { width: 16px !important; height: 16px !important; }
.ai-fab.wow { animation: aiWowPop .5s cubic-bezier(.34,1.56,.64,1) !important; }
@keyframes aiWowPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* thinking overrides cursor-tracking */
.ai-fab.thinking .ai-eyes { transition: none; }

/* ── 10. Feedback thumbs ──────────────────────────────────────────── */
.ai-fb button { background: var(--surface-2) !important; border-color: var(--border) !important; }

/* ── 12. Light blur behind the panel while AI is open ─────────────── */
.ai-scrim {
  display: block !important;
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8,15,30,.18);
  backdrop-filter: blur(3px) saturate(.9);
  -webkit-backdrop-filter: blur(3px) saturate(.9);
  opacity: 0; pointer-events: none;
  transition: opacity .28s var(--ease);
}
.ai-scrim.open { opacity: 1; }        /* stays click-through: clicks fall to the page handler */
[data-theme="dark"] .ai-scrim { background: rgba(0,0,0,.34); }
/* panel + blob must sit above the blur */
.ai-panel { z-index: 100 !important; }
.ai-fab   { z-index: 101 !important; }

/* ── 11. Mobile ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ai-panel { width: calc(100vw - 24px) !important; }
}