/* Atlas AI inside the dock (same font, tokens and components as the rest of Atlas). */
.ai { display: flex; flex-direction: column; height: 100%; }
.ai-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px var(--s-4); border-bottom: 1px solid var(--c-line); }
.ai-title { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-14); }
.ai-title .i { color: var(--c-accent); }
.ai-context { display: flex; align-items: center; gap: 6px; margin: 8px var(--s-3) 0; padding: 2px 2px 2px 10px; border-radius: 999px; background: var(--c-brand-50); color: var(--c-brand); font-size: var(--fs-12); font-weight: 600; }
.ai-context.off { background: var(--c-surface-3); color: var(--c-muted); }
.ai-ctx-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-context .icon-btn { width: 28px; height: 28px; color: inherit; }
.ai-body { flex: 1; overflow: auto; padding: var(--s-3) var(--s-3) var(--s-4); overscroll-behavior: contain; }
.ai-msgs { display: flex; flex-direction: column; gap: var(--s-3); }
.ai-msg { max-width: 100%; }
.ai-user { align-self: flex-end; max-width: 88%; background: var(--c-brand); color: #fff; padding: 8px 12px; border-radius: var(--r-3) var(--r-3) 4px var(--r-3); font-size: var(--fs-13); white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-assistant { font-size: var(--fs-13); color: var(--c-ink); }
.ai-segs { display: flex; flex-direction: column; gap: 8px; }
.ai-note { align-self: center; font-size: var(--fs-12); color: var(--c-muted); background: var(--c-surface-2); padding: 4px 10px; border-radius: 999px; text-align: center; }
.ai-text { line-height: 1.55; overflow-wrap: anywhere; }
.ai-text p { margin: 0 0 8px; }
.ai-text p:last-child { margin-bottom: 0; }
.ai-text ul, .ai-text ol { margin: 4px 0 8px; padding-left: 20px; }
.ai-text h1, .ai-text h2, .ai-text h3 { font-size: var(--fs-14); margin: 10px 0 4px; }
.ai-text code { background: var(--c-surface-3); padding: 1px 4px; border-radius: 4px; }
.ai-text pre { background: var(--c-surface-2); padding: 8px; border-radius: var(--r-1); overflow: auto; }
.ai-text .table-wrap { margin: 6px 0; max-height: 360px; }
.ai-entity { color: var(--c-brand-600); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(31, 100, 168, .35); text-underline-offset: 2px; cursor: pointer; }
.ai-think { font-size: var(--fs-12); color: var(--c-muted); }
.ai-think > summary { cursor: pointer; font-style: italic; }
.ai-think-body { white-space: pre-wrap; padding: 6px 10px; margin-top: 4px; border-left: 2px solid var(--c-line); max-height: 240px; overflow: auto; }
.ai-steps { display: flex; flex-direction: column; gap: 2px; }
.ai-step { font-size: var(--fs-12); color: var(--c-ink-2); }
.ai-step > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 6px; border-radius: var(--r-1); list-style: none; }
.ai-step > summary::-webkit-details-marker { display: none; }
.ai-step.no-detail > summary { cursor: default; }
.ai-step > summary:hover { background: var(--c-surface-2); }
.ai-step-icon { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 2px solid var(--c-line-2); }
.ai-step.running .ai-step-icon { border-color: var(--c-brand-600); border-top-color: transparent; animation: spin .8s linear infinite; }
.ai-step.ok .ai-step-icon { background: var(--c-good); border-color: var(--c-good); }
.ai-step.err .ai-step-icon { background: var(--c-danger); border-color: var(--c-danger); }
.ai-step-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-step-meta { color: var(--c-muted); white-space: nowrap; }
.ai-sql { margin: 4px 0 6px 26px; padding: 8px; background: var(--c-surface-2); border-radius: var(--r-1); font-size: var(--fs-11); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }
.ai-artifact { display: grid; gap: 6px; }
.ai-art-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ai-art-title { font-weight: 650; flex: 1; }
.ai-art-note { font-size: var(--fs-11); color: var(--c-muted); }
.ai-art-actions { display: flex; gap: 4px; }
.ai-error { color: var(--c-danger); background: var(--c-danger-bg); padding: 8px 10px; border-radius: var(--r-1); font-size: var(--fs-12); }
.ai-stopped { color: var(--c-muted); font-size: var(--fs-12); font-style: italic; }
.ai-opened { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--c-brand-100); background: var(--c-brand-50); color: var(--c-brand); border-radius: 999px; padding: 3px 10px 3px 8px; font-size: var(--fs-12); font-weight: 600; }
.ai-feedback { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.ai-feedback .icon-btn { width: 30px; height: 30px; color: var(--c-muted); }
.ai-feedback .input { max-width: 260px; }
.ai-empty { display: grid; gap: 8px; padding: var(--s-3) 0; }
.ai-empty-title { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-16); }
.ai-empty-title .i { color: var(--c-accent); }
.ai-empty-sub { font-size: var(--fs-13); color: var(--c-muted); }
.ai-suggest { display: grid; gap: 6px; margin-top: 6px; }
.ai-suggest-btn { text-align: left; border: 1px solid var(--c-line); background: var(--c-surface); border-radius: var(--r-2); padding: 8px 12px; font-size: var(--fs-13); color: var(--c-ink-2); }
.ai-suggest-btn:hover { border-color: var(--c-brand-100); background: var(--c-brand-50); color: var(--c-brand); }
.ai-form { border-top: 1px solid var(--c-line); padding: 8px var(--s-3) 10px; display: grid; gap: 6px; background: var(--c-surface); }
.ai-input { width: 100%; resize: none; border: 1px solid var(--c-line-2); border-radius: var(--r-2); padding: 8px 10px; font-size: var(--fs-14); min-height: 40px; max-height: 160px; }
.ai-input:focus-visible { outline-offset: 0; border-color: var(--c-focus); }
.ai-form-row { display: flex; align-items: center; gap: 8px; }
.ai-deep { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--c-ink-2); }
.ai-deep input { accent-color: var(--c-brand-600); }
.ai-hint { flex: 1; font-size: var(--fs-11); color: var(--c-muted); text-align: right; }
.ai-send { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--c-brand); color: #fff; display: grid; place-items: center; flex: none; }
.ai-send:hover { background: var(--c-brand-700); }
.ai-send.stop { background: var(--c-danger); }
@media (max-width: 768px) { .ai-hint { display: none; } }