/* admin/assets/components/ai/chat-panel.css
   Right-edge AI assistant. AESTHETIC §4 chrome, §5 motion, §2 type. */
.ai-launcher {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 170;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ai); background: var(--surface); border: 1px solid var(--ai); border-radius: 1px;
  padding: 8px 12px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 14px -4px var(--ai);
  transition: transform 140ms cubic-bezier(.2,.7,.2,1), opacity 140ms;
}
.ai-launcher:hover { transform: translateY(-1px); }
.ai-launcher.hidden { opacity: 0; pointer-events: none; }
.ai-launcher .spark { font-size: 11px; }

.ai-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 180; width: 380px; max-width: 92vw;
  display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--rule);
  transform: translateX(100%); transition: transform 260ms cubic-bezier(.2,.7,.2,1);
  box-shadow: -12px 0 32px rgba(0,0,0,0.4);
}
.ai-panel.open { transform: translateX(0); }
.ai-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rule); }
.ai-title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ai); }
.ai-close { background: none; border: none; color: var(--ink-faint); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.ai-close:hover { color: var(--ink); }
.ai-empty { padding: var(--sp-5) var(--sp-4); font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-faint); line-height: 1.5; }
.ai-messages { flex: 1; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.ai-msg { display: flex; flex-direction: column; gap: 6px; max-width: 88%; }
.ai-msg.user { align-self: flex-end; align-items: flex-end; }
.ai-msg.assistant { align-self: flex-start; }
.ai-msg .ai-body { font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--ink); border-radius: 1px; padding: var(--sp-3); white-space: pre-wrap; word-break: break-word; }
.ai-msg.user .ai-body { background: var(--surface-2); color: var(--ink-mid); }
.ai-msg.assistant .ai-body { background: var(--ai-soft); border-left: 2px solid var(--ai); }
.ai-msg .ai-body.ai-error { background: var(--warn-soft); border-left: 2px solid var(--warn); color: var(--warn); font-style: italic; }
.ai-meta { padding-left: 2px; }
.ai-thinking { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-faint); padding: var(--sp-3); background: var(--ai-soft); border-left: 2px solid var(--ai); border-radius: 1px; }
.ai-thinking::after { content: '\2026'; display: inline-block; overflow: hidden; vertical-align: bottom; width: 1.1em; animation: aiDots 1.2s steps(4, end) infinite; }
@keyframes aiDots { 0% { width: 0; } 100% { width: 1.1em; } }
.ai-input { display: flex; align-items: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--rule); }
.ai-input textarea { flex: 1; resize: none; background: var(--bg); border: 1px solid var(--rule); border-radius: 1px; padding: var(--sp-3); font-family: var(--serif); font-size: 14px; color: var(--ink); line-height: 1.4; max-height: 140px; outline: none; }
.ai-input textarea:focus { border-color: var(--ai); }
.ai-send { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 1px; cursor: pointer; background: var(--ai-soft); border: 1px solid var(--ai); color: var(--ai); font-size: 16px; line-height: 1; transition: background 140ms cubic-bezier(.2,.7,.2,1); }
.ai-send:hover { background: var(--ai); color: var(--bg-deep); }

/* Reachable above the focus-mode overlay (focus-root is z 1000). Raised only
   while focus is active, so canvas layering is unchanged. */
body.focus-active .ai-launcher { z-index: 1010; }
body.focus-active .ai-panel { z-index: 1020; }

/* Generation spinner shown under the chat reply until the cell is filled. */
.ai-filling { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; font-style: italic; color: var(--ink-dim); }
.ai-spinner { width: 12px; height: 12px; flex: none; border: 2px solid rgba(255,255,255,0.18); border-top-color: var(--ai); border-radius: 50%; animation: ai-spin 0.7s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }