/* AI Assistant — console layout (brand dark) */
.ai-shell { display: grid; grid-template-columns: 1fr 360px; gap: 18px; height: calc(100vh - 66px); padding: 18px; }

/* Chat column */
.chat { background: var(--surface); border: 1px solid var(--steel); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.chat-head { padding: 16px 20px; border-bottom: 1px solid var(--steel); display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; border-radius: 12px; background: var(--gradient-brand); display: grid; place-items: center; font-size: 1.4rem; box-shadow: 0 6px 16px rgba(59,201,240,.4); }
.chat-head .st { color: var(--good); font-size: .8rem; font-weight: 700; }
.chat-head .st::before { content: "●"; margin-inline-end: 5px; }

.messages { flex: 1; overflow: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; gap: 10px; max-width: 80%; }
.msg .bubble { padding: 12px 16px; border-radius: 16px; line-height: 1.55; }
.msg.bot .bubble { background: var(--surface-2); border: 1px solid var(--steel); border-start-start-radius: 4px; }
.msg.user { margin-inline-start: auto; flex-direction: row-reverse; }
.msg.user .bubble { background: var(--gradient-brand); color: #04222b; border-start-end-radius: 4px; font-weight: 600; }
.msg .mav { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; font-size: 1rem; background: var(--surface-2); border: 1px solid var(--steel); }
.msg.user .mav { background: var(--steel-2); }

.typing .bubble { display: inline-flex; gap: 5px; }
.typing .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.typing .dot:nth-child(2) { animation-delay: .2s; } .typing .dot:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.suggest { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 20px 12px; }
.chat-input { border-top: 1px solid var(--steel); padding: 14px 16px; display: flex; gap: 10px; }
.chat-input .input { flex: 1; }
.clear-chat { margin-inline-start: auto; flex: none; }
.voice-btn { flex: none; }
.voice-btn.recording { background: var(--bad); border-color: var(--bad); color: #fff; animation: micpulse 1s infinite; }
@keyframes micpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,.55); } 50% { box-shadow: 0 0 0 9px rgba(248,113,113,0); } }

/* Side column */
.ai-side { display: flex; flex-direction: column; gap: 16px; overflow: auto; }
.mini-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-kpi { background: var(--surface); border: 1px solid var(--steel); border-radius: var(--radius); padding: 14px; }
.mini-kpi b { font-size: 1.35rem; display: block; }
.mini-kpi span { color: var(--muted); font-size: .74rem; }
.wf { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--steel); }
.wf:last-child { border: none; }
.wf .wi { font-size: 1.3rem; }
.wf .wb { flex: 1; }
.wf .wb strong { font-size: .9rem; display: block; }
.wf .wb span { color: var(--muted); font-size: .76rem; }
.switch { width: 42px; height: 24px; border-radius: 999px; background: var(--steel); position: relative; cursor: pointer; transition: .2s; flex: none; }
.switch::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .2s; }
.switch.on { background: var(--good); }
.switch.on::after { inset-inline-start: 21px; }
html[dir="rtl"] .switch::after { inset-inline-start: auto; inset-inline-end: 3px; }
html[dir="rtl"] .switch.on::after { inset-inline-end: 21px; }
.chart-box { position: relative; height: 150px; }

@media (max-width: 900px) {
  .ai-shell { grid-template-columns: 1fr; height: auto; }
  .chat { height: 70vh; }
  .msg { max-width: 92%; }
}