/* CRM → AI assistant. app.css is pre-built (no build step), so the chat's own layout lives here. */
.ai-layout { display: grid; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 1024px) { .ai-layout { grid-template-columns: 16rem minmax(0, 1fr); align-items: start; } }
.ai-list { max-height: 70vh; overflow-y: auto; padding: .5rem; }
.ai-list a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-item { display: flex; align-items: center; gap: .25rem; border-radius: var(--radius-md); }
.ai-item:hover, .ai-item.is-on { background: color-mix(in oklab, var(--color-graphite-900) 6%, transparent); }
.ai-item form { opacity: 0; } .ai-item:hover form, .ai-item:focus-within form { opacity: 1; }
.ai-box { display: flex; flex-direction: column; min-height: 60vh; padding: 0; }
.ai-feed { display: flex; flex: 1; flex-direction: column; gap: .75rem; overflow-y: auto; min-height: 20rem; max-height: 62vh; padding: 1rem; background: color-mix(in oklab, var(--color-graphite-900) 3%, transparent); }
.ai-user, .ai-bot, .ai-warn { font-size: .875rem; border-radius: var(--radius-lg); }
.ai-user { align-self: flex-end; max-width: 85%; white-space: pre-wrap; overflow-wrap: anywhere; padding: .5rem 1rem; background: var(--color-graphite-900); color: var(--color-white); }
.ai-bot { align-self: flex-start; max-width: 95%; min-width: 0; padding: .75rem 1rem; background: var(--color-white); color: var(--color-graphite-900); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-graphite-900) 10%, transparent); overflow-wrap: anywhere; }
.ai-warn { align-self: flex-start; max-width: 95%; padding: .75rem 1rem; background: var(--color-amber-50); color: var(--color-amber-900); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-amber-600) 25%, transparent); }
.ai-note { padding: .5rem 1rem; font-size: .875rem; background: var(--color-amber-50); color: var(--color-amber-900); border-top: 1px solid color-mix(in oklab, var(--color-amber-600) 25%, transparent); }
.ai-note[hidden] { display: none; }
.ai-form { display: flex; align-items: flex-end; gap: .5rem; padding: .75rem; border-top: 1px solid color-mix(in oklab, var(--color-graphite-900) 10%, transparent); }
.ai-form textarea { flex: 1; min-height: 2.5rem; max-height: 10rem; resize: none; }
.ai-foot { padding: 0 1rem .5rem; font-size: .6875rem; color: var(--color-graphite-500, #6b7280); }
.ai-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; padding-top: .5rem; font-size: .75rem; border-top: 1px solid color-mix(in oklab, var(--color-graphite-900) 10%, transparent); }
.ai-actions a, .ai-actions button { color: var(--color-graphite-500, #6b7280); } .ai-actions a:hover, .ai-actions button:hover { color: var(--color-graphite-900); text-decoration: underline; }
.ai-title { padding: .5rem 1rem; font-size: .875rem; font-weight: 500; border-bottom: 1px solid color-mix(in oklab, var(--color-graphite-900) 10%, transparent); }
.ai-empty { margin: auto; max-width: 28rem; text-align: center; font-size: .875rem; }
.ai-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .75rem; }
.ai-chip { padding: .375rem .75rem; font-size: .75rem; border-radius: 999px; background: var(--color-white); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-graphite-900) 15%, transparent); }
.ai-chip:hover { background: color-mix(in oklab, var(--color-graphite-900) 5%, transparent); }
.ai-md p, .ai-md ul, .ai-md ol { margin: .25rem 0; } .ai-md ul { list-style: disc; padding-left: 1.25rem; } .ai-md ol { list-style: decimal; padding-left: 1.25rem; }
.ai-md h3, .ai-md h4, .ai-md h5, .ai-md h6 { margin: .75rem 0 .25rem; font-weight: 600; } .ai-md h3 { font-size: 1.05rem; }
.ai-md table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: .8125rem; } .ai-md .tbl { overflow-x: auto; margin: .5rem 0; }
.ai-md th, .ai-md td { padding: .3rem .6rem; border-bottom: 1px solid color-mix(in oklab, var(--color-graphite-900) 10%, transparent); text-align: left; }
.ai-md th { font-weight: 600; background: color-mix(in oklab, var(--color-graphite-900) 4%, transparent); } .ai-md td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ai-md code { padding: 0 .25rem; border-radius: 3px; background: color-mix(in oklab, var(--color-graphite-900) 6%, transparent); font-size: .85em; }
.ai-md pre { margin: .5rem 0; padding: .75rem; overflow-x: auto; border-radius: var(--radius-md); background: color-mix(in oklab, var(--color-graphite-900) 6%, transparent); font-size: .75rem; }
.ai-settings { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
@media (min-width: 1280px) { .ai-settings { grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); align-items: start; } }
@media print { .ai-md table { width: 100%; } }

.ai-chart { position: relative; margin: .5rem 0; padding: .5rem; border-radius: var(--radius-md); background: var(--color-white); box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-graphite-900) 10%, transparent); height: 16rem; }