/* =============================================================
   AI Toolbar — global styles
   NOTE: CSS isolation (.razor.css) is NOT loaded in this app.
   All AiToolbar component styles must live here as global CSS.
   ============================================================= */

/* ── MudBlazor portal overrides (global scope required) ──── */
.ai-drawer .mud-drawer-paper {
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  box-shadow: -4px 0 40px rgba(0,0,0,.18);
  overflow: hidden;
}


/* ── Markdown content inside AI bubbles ──────────────────────── */
.ai-md { font-size: .875rem; line-height: 1.6; }
.ai-md p { margin: 0 0 .5rem; }
.ai-md p:last-child { margin-bottom: 0; }
.ai-md ul, .ai-md ol { padding-left: 1.4rem; margin: .25rem 0 .6rem; }
.ai-md li { margin-bottom: .2rem; }
.ai-md a { color: var(--mud-palette-primary); text-decoration: underline; word-break: break-word; }
.ai-md a:hover { opacity: .8; }
.ai-md pre {
  background: rgba(0,0,0,.06);
  border-radius: 8px;
  padding: .6rem .85rem;
  margin: .4rem 0 .7rem;
  overflow-x: auto;
}
.ai-md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: .8rem;
  background: rgba(0,0,0,.06);
  border-radius: 4px;
  padding: .1em .3em;
}
.ai-md pre code { background: none; padding: 0; }
.ai-md blockquote {
  border-left: 3px solid var(--mud-palette-primary);
  margin: .4rem 0;
  padding: .25rem .75rem;
  color: var(--mud-palette-text-secondary);
}
.ai-md h1,.ai-md h2,.ai-md h3{margin:.5rem 0 .3rem;font-weight:700}
.ai-md h1{font-size:1.05rem}
.ai-md h2{font-size:.95rem}
.ai-md h3{font-size:.875rem}
.ai-md table{width:100%;border-collapse:collapse;margin:.4rem 0;font-size:.8rem}
.ai-md th,.ai-md td{border:1px solid var(--mud-palette-lines-default);padding:.3rem .5rem}
.ai-md th{background:var(--mud-palette-background-grey);font-weight:600}

/* ── Drawer shell ────────────────────────────────────────── */
/* NOTE: Do NOT override `right` here.
   MudBlazor v9 animates the Temporary right drawer by transitioning the `right`
   CSS property: right:0 when open, right:calc(-1*--mud-drawer-width) when closed.
   Any !important rule on `right` will prevent the close animation (drawer stays static). */
.ai-drawer{overflow-x:hidden;max-width:100vw;--mud-drawer-width:33.3333vw}

/* ── Full-height flex panel ──────────────────────────────── */
.ai-panel{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--mud-palette-background);
  overflow:hidden;
}

/* ── Header ──────────────────────────────────────────────── */
.ai-hd{
  flex-shrink:0;
  background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 100%);
  color:#fff;
  padding:0;
}
.ai-hd-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px 8px;
  gap:8px;
}
.ai-hd-identity{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.ai-hd-avatar{
  width:36px;height:36px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  position:relative;
}
.ai-hd-avatar--ready{background:linear-gradient(135deg,var(--mud-palette-primary),var(--mud-palette-secondary))}
.ai-hd-avatar--busy{background:linear-gradient(135deg,#6366f1,#8b5cf6);animation:ai-avatar-pulse 1.4s ease-in-out infinite}
@keyframes ai-avatar-pulse{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,0.5)}50%{box-shadow:0 0 0 8px rgba(99,102,241,0)}}
.ai-hd-icon{font-size:1.1rem;color:#fff;width:20px;height:20px}
.ai-hd-text{display:flex;flex-direction:column;min-width:0}
.ai-hd-title{font-size:.875rem;font-weight:700;color:#fff;line-height:1.2}
.ai-hd-sub{font-size:.72rem;color:rgba(255,255,255,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-hd-thinking{display:flex;align-items:center;gap:4px;color:rgba(255,255,255,.7)}
.ai-dot{
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,.7);
  animation:ai-dot-bounce .9s ease-in-out infinite;
  flex-shrink:0;
}
.ai-dot:nth-child(1){animation-delay:0s}
.ai-dot:nth-child(2){animation-delay:.18s}
.ai-dot:nth-child(3){animation-delay:.36s}
@keyframes ai-dot-bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}}

.ai-hd-btns{display:flex;align-items:center;gap:2px;flex-shrink:0}
.ai-hd-btn{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;
  background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,.75);border-radius:6px;
  transition:background .15s,color .15s;
}
.ai-hd-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.ai-hd-btn--active{background:rgba(255,255,255,.18) !important;color:#fff !important}
.ai-hd-btn--close:hover{background:rgba(239,68,68,.3);color:#fca5a5}

/* Advanced mode info chips in header */
.ai-hd-chips{
  display:flex;align-items:center;gap:6px;
  padding:0 14px 8px;flex-wrap:wrap;
}
.ai-hd-chip{
  display:inline-flex;align-items:center;gap:3px;
  font-size:.68rem;color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.08);
  border-radius:999px;padding:2px 8px;
}
.ai-hd-chip--on{color:rgba(110,231,183,.9);background:rgba(16,185,129,.15)}
.ai-hd-progress{padding:0 0 2px}
.ai-progress-bar{margin:0;border-radius:0}

/* ── Context pills bar ───────────────────────────────────── */
.ai-ctx-bar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:6px 14px;
  background:var(--mud-palette-surface);
  border-bottom:1px solid var(--mud-palette-lines-default);
}
.ai-ctx-pill{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.72rem;color:var(--mud-palette-text-secondary);
  background:var(--mud-palette-background-grey);
  border-radius:999px;padding:2px 8px;
  white-space:nowrap;
}
.ai-ctx-pill .mud-icon-root{font-size:.8rem;width:.8rem;height:.8rem;opacity:.7}

/* ── Body (relative for overlays) ───────────────────────── */
.ai-body{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  overflow:hidden;
}

/* ── Overlays (History / Tools) ─────────────────────────── */
.ai-overlay{
  position:absolute;top:0;left:0;right:0;bottom:0;
  z-index:20;
  background:var(--mud-palette-background);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.ai-overlay-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--mud-palette-lines-default);
  flex-shrink:0;
}
.ai-overlay-title{font-size:.875rem;font-weight:600;color:var(--mud-palette-text-primary)}
.ai-overlay-actions{display:flex;align-items:center;gap:2px}
.ai-overlay-search{padding:8px 12px;flex-shrink:0;border-bottom:1px solid var(--mud-palette-lines-default)}
.ai-overlay-body{flex:1;overflow-y:auto;padding:12px 14px}
.ai-tools-sub{font-size:.78rem;color:var(--mud-palette-text-secondary);margin:0 0 10px}

/* Import row */
.ai-import-row{
  padding:8px 12px;
  background:var(--mud-palette-background-grey);
  border-bottom:1px solid var(--mud-palette-lines-default);
  flex-shrink:0;
}

/* History list */
.ai-history-list{flex:1;overflow-y:auto;padding:4px 0}
.ai-history-empty{
  display:flex;flex-direction:column;align-items:center;
  padding:32px 16px;gap:8px;color:var(--mud-palette-text-secondary);
}
.ai-history-empty-icon{opacity:.3;font-size:2rem !important;width:2rem !important;height:2rem !important}
.ai-history-empty p{font-size:.82rem;margin:0}

.ai-history-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;cursor:pointer;
  transition:background .12s;border-bottom:1px solid var(--mud-palette-lines-default);
}
.ai-history-item:hover{background:var(--mud-palette-action-hover)}
.ai-history-item--active{background:var(--mud-palette-primary-hover) !important}
.ai-history-icon{flex-shrink:0;opacity:.5}
.ai-history-item-body{flex:1;min-width:0;display:flex;flex-direction:column}
.ai-history-item-title{font-size:.82rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--mud-palette-text-primary)}
.ai-history-item-date{font-size:.7rem;color:var(--mud-palette-text-secondary)}
.ai-history-item-actions{display:flex;align-items:center;gap:2px;opacity:0;transition:opacity .15s}
.ai-history-item:hover .ai-history-item-actions{opacity:1}

/* Ghost action buttons (history item, overlay) */
.ai-ghost-btn{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;background:none;border:none;cursor:pointer;
  color:var(--mud-palette-text-secondary);border-radius:5px;
  transition:background .12s,color .12s;
}
.ai-ghost-btn:hover{background:var(--mud-palette-action-hover);color:var(--mud-palette-text-primary)}
.ai-ghost-btn--danger:hover{background:rgba(239,68,68,.1);color:var(--mud-palette-error)}

/* ── Voice section ───────────────────────────────────────── */
.ai-voice-section{
  flex-shrink:0;
  border-bottom:1px solid var(--mud-palette-lines-default);
  background:linear-gradient(135deg,rgba(99,102,241,.05) 0%,rgba(139,92,246,.04) 100%);
}
.ai-voice-section-hd{
  display:flex;align-items:center;gap:6px;
  padding:8px 14px 4px;
  font-size:.78rem;font-weight:600;color:var(--mud-palette-primary-text);
}
.ai-voice-section-hd .mud-icon-root{color:var(--mud-palette-primary);opacity:.8}
.ai-voice-section-body{padding:0 12px 10px}

/* ── Messages area ───────────────────────────────────────── */
.ai-msgs{
  flex:1;
  overflow-y:auto;
  padding:16px 12px;
  scroll-behavior:smooth;
  min-height:0;
}

/* Empty state */
.ai-empty{
  display:flex;flex-direction:column;align-items:center;
  padding:32px 20px 24px;text-align:center;
}
.ai-empty-icon-wrap{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--mud-palette-primary),var(--mud-palette-secondary));
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  box-shadow:0 8px 24px rgba(33,150,243,.25);
}
.ai-empty-icon{color:#fff !important;font-size:1.4rem !important;width:1.4rem !important;height:1.4rem !important}
.ai-empty-heading{margin:0 0 6px;font-size:1rem;font-weight:700;color:var(--mud-palette-text-primary)}
.ai-empty-sub{margin:0 0 20px;font-size:.8rem;color:var(--mud-palette-text-secondary);line-height:1.5}
.ai-suggestions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ai-sug{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 14px;border-radius:999px;
  background:var(--mud-palette-surface);
  border:1px solid var(--mud-palette-lines-default);
  font-size:.78rem;font-weight:500;cursor:pointer;
  color:var(--mud-palette-text-primary);
  transition:background .15s,border-color .15s,transform .12s,box-shadow .15s;
}
.ai-sug:hover{
  background:var(--mud-palette-primary-hover);
  border-color:var(--mud-palette-primary);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(33,150,243,.15);
}
.ai-sug .mud-icon-root{color:var(--mud-palette-primary);opacity:.8;font-size:.9rem !important;width:.9rem !important;height:.9rem !important}

/* Message rows */
.ai-msgs-list{display:flex;flex-direction:column;gap:12px}

.ai-row{display:flex;gap:8px;animation:ai-msg-in .2s ease-out}
@keyframes ai-msg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.ai-row--ai{align-items:flex-start}
.ai-row--user{justify-content:flex-end}
.ai-row--compact{gap:4px}

/* AI avatar circle */
.ai-row-avatar{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--mud-palette-primary),var(--mud-palette-secondary));
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.ai-row-avatar .mud-icon-root{color:#fff !important;font-size:.75rem !important;width:.75rem !important;height:.75rem !important}

/* Bubbles */
.ai-bubble{
  border-radius:16px;
  padding:10px 14px;
  max-width:82%;
  position:relative;
  font-size:.875rem;line-height:1.55;
}
.ai-row--compact .ai-bubble{padding:6px 12px}

.ai-bubble--ai{
  background:var(--mud-palette-surface);
  border:1px solid var(--mud-palette-lines-default);
  border-top-left-radius:4px;
  color:var(--mud-palette-text-primary);
}
.ai-bubble--user{
  background:linear-gradient(135deg,var(--mud-palette-primary),var(--mud-palette-primary-darken));
  color:#fff;
  border-bottom-right-radius:4px;
  border-top-right-radius:16px;
}

.ai-bubble--thinking{
  display:flex;align-items:center;
  padding:12px 16px;min-width:60px;
}
.ai-dots{display:flex;gap:4px;align-items:center}
.ai-dots span{
  width:7px;height:7px;border-radius:50%;
  background:var(--mud-palette-primary);opacity:.7;
  animation:ai-dot-bounce .9s ease-in-out infinite;
}
.ai-dots span:nth-child(1){animation-delay:0s}
.ai-dots span:nth-child(2){animation-delay:.2s}
.ai-dots span:nth-child(3){animation-delay:.4s}

/* Bubble action bar (copy, apply) - revealed on hover */
.ai-bubble-actions{
  display:flex;align-items:center;gap:4px;
  margin-top:6px;opacity:0;transition:opacity .15s;
}
.ai-bubble--ai:hover .ai-bubble-actions{opacity:1}
.ai-ba-btn{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px;background:none;border:1px solid var(--mud-palette-lines-default);
  border-radius:999px;font-size:.7rem;cursor:pointer;color:var(--mud-palette-text-secondary);
  transition:background .12s,color .12s;
}
.ai-ba-btn:hover{background:var(--mud-palette-action-hover);color:var(--mud-palette-text-primary)}
.ai-ba-btn--apply{color:var(--mud-palette-secondary);border-color:var(--mud-palette-secondary)}
.ai-ba-btn--apply:hover{background:var(--mud-palette-secondary-hover)}
.ai-ba-btn .mud-icon-root{font-size:.7rem !important;width:.7rem !important;height:.7rem !important}

/* Markdown inside AI bubble (global selectors — no ::deep needed) */
.ai-bubble--ai .ai-md p{margin:.25rem 0 .6rem;font-size:.875rem}
.ai-bubble--ai .ai-md a{color:var(--mud-palette-primary);word-break:break-word}
.ai-bubble--ai .ai-md ul,.ai-bubble--ai .ai-md ol{padding-left:1.2rem;margin:.2rem 0 .6rem}
.ai-bubble--ai .ai-md pre{font-size:.78rem;border-radius:8px}
.ai-bubble--ai .ai-md code{font-size:.8rem}

/* ── Input area ──────────────────────────────────────────── */
.ai-input-area{
  flex-shrink:0;
  padding:10px 12px 8px;
  border-top:1px solid var(--mud-palette-lines-default);
  background:var(--mud-palette-surface);
}
.ai-sending-bar{
  display:flex;align-items:center;gap:8px;
  margin-bottom:8px;padding:6px 10px;
  background:var(--mud-palette-background-grey);border-radius:10px;
}
.ai-sending-text{font-size:.78rem;color:var(--mud-palette-text-secondary);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-stop-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;background:var(--mud-palette-error);color:#fff;
  border:none;border-radius:999px;font-size:.72rem;font-weight:600;cursor:pointer;
  transition:opacity .15s;flex-shrink:0;
}
.ai-stop-btn:hover{opacity:.88}
.ai-stop-btn .mud-icon-root{font-size:.8rem !important;width:.8rem !important;height:.8rem !important}

.ai-input-box{display:flex;align-items:flex-end;gap:8px}
.ai-input-field{flex:1}
.ai-input-btns{display:flex;flex-direction:column;gap:4px;align-items:center;padding-bottom:2px}

.ai-apply-btn{
  width:34px;height:34px;border-radius:50%;
  border:2px solid var(--mud-palette-secondary);
  background:var(--mud-palette-secondary-hover);
  color:var(--mud-palette-secondary);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s;
}
.ai-apply-btn:hover{background:var(--mud-palette-secondary);color:#fff}

.ai-send-btn{
  width:36px;height:36px;border-radius:50%;
  border:none;
  background:linear-gradient(135deg,var(--mud-palette-primary),var(--mud-palette-primary-darken));
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:transform .12s,box-shadow .15s,opacity .15s;
  box-shadow:0 3px 10px rgba(33,150,243,.3);
}
.ai-send-btn:hover{transform:scale(1.08);box-shadow:0 5px 16px rgba(33,150,243,.4)}
.ai-send-btn:active{transform:scale(.96)}
.ai-send-btn--off{opacity:.38;cursor:not-allowed;box-shadow:none}
.ai-send-btn--off:hover{transform:none}
.ai-send-btn .mud-icon-root{font-size:.9rem !important;width:.9rem !important;height:.9rem !important}

.ai-input-hint{
  margin:4px 0 0;font-size:.68rem;
  color:var(--mud-palette-text-disabled);text-align:right;
}

/* MudTextField override inside input box */
.ai-input-field .mud-input-outlined .mud-input-outlined-border{border-radius:12px}
.ai-input-field textarea{font-size:.875rem;line-height:1.5}

/* ── Logs styling ────────────────────────────────────────── */
.ai-logs {
  background: var(--mud-palette-surface);
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: 12px;
}
.ai-logs .ai-logs-entry { font-size: .85rem; padding: 2px 0; }
.ai-logs .ai-logs-entry .lvl { display:inline-block; min-width:48px; text-align:center; border-radius:8px; padding:2px 6px; margin-right:6px; }
.ai-logs .lvl-INFO { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); color: var(--mud-palette-text-primary); }
.ai-logs .lvl-DEBUG { background: color-mix(in srgb, var(--mud-palette-secondary) 12%, transparent); color: var(--mud-palette-text-secondary); }
.ai-logs .lvl-ERROR { background: color-mix(in srgb, var(--mud-palette-error) 18%, transparent); color: var(--mud-palette-error); }