/* In-dashboard chat window (chat-widget.js): side panel or floating bubble.
   The chat inside is styled by chat-core.css. */

:root { --aiw-width: 420px; }

.aiw {
  position: fixed; z-index: 58;
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  visibility: hidden; opacity: 0;
  transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease), visibility 0s linear var(--t-base);
}
.aiw.is-open {
  visibility: visible; opacity: 1; transform: none;
  transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease), visibility 0s;
}

/* Side panel: full height under the sticky top bar (--nav-top from nav.css; 0 with the desktop sidebar). */
.aiw--panel {
  top: var(--nav-top, 60px); inset-inline-end: 0; bottom: 0; width: var(--aiw-width);
  border-width: 0 0 0 1px; border-radius: 0;
  transform: translateX(24px);
}
/* Wide screens: make room instead of covering the charts (they re-flow via ResizeObserver). */
.app-shell { transition: padding-inline-end var(--t-base) var(--ease); }
html.aiw-push .app-shell { padding-inline-end: var(--aiw-width); }

/* Floating bubble window. It sits below the sticky topbar (max z-index), so cap its height to stay
   clear of it: 92px launcher gap + 60px topbar + 16px breathing room. */
.aiw--bubble {
  inset-inline-end: 24px; bottom: 92px; width: 400px; height: min(620px, calc(100vh - 168px));
  border-radius: var(--radius-lg); overflow: hidden;
  transform: translateY(12px) scale(.98); transform-origin: bottom right;
}

.aiw-head {
  display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 14px;
  background: var(--panel); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.aiw-mark {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--c-blue), var(--c-violet) 60%, var(--c-magenta));
}
.aiw-mark .icon { width: 16px; height: 16px; }
.aiw-title { flex: 1; min-width: 0; line-height: 1.2; margin-inline-start: 4px; }
.aiw-title strong { display: block; font-size: 14px; }
.aiw-title span { display: block; font-size: 11.5px; color: var(--muted); }
.aiw-btn {
  border: none; background: none; color: var(--muted); border-radius: var(--radius-sm);
  width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.aiw-btn:hover { background: var(--row-hover); color: var(--text); }
.aiw-btn .icon { width: 16px; height: 16px; }
.aiw-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.aiw-body > .aic { flex: 1; }

/* Floating launcher */
.aiw-launcher {
  position: fixed; inset-inline-end: 24px; bottom: 24px; z-index: 59;
  width: 56px; height: 56px; border-radius: 50%; padding: 0; border: none;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--c-blue), var(--c-violet) 60%, var(--c-magenta));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--c-violet) 45%, transparent);
}
.aiw-launcher:hover { background: linear-gradient(135deg, var(--c-blue), var(--c-violet) 60%, var(--c-magenta)); filter: brightness(1.08); }
.aiw-launcher .icon { width: 24px; height: 24px; }
.aiw-launcher > span { display: inline-flex; transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease); }
.aiw-launcher-close { position: absolute; opacity: 0; transform: rotate(-90deg); }
.aiw-launcher.is-open .aiw-launcher-open { opacity: 0; transform: rotate(90deg); }
.aiw-launcher.is-open .aiw-launcher-close { opacity: 1; transform: none; }
/* Toasts share the bottom-right corner; stack them above the launcher instead of covering it. */
html.aiw-has-launcher .toast-region { bottom: 92px; }

/* The topbar "Ask AI" button reads as pressed while the panel is open. */
.ask-ai-link[aria-expanded="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .aiw, .aiw.is-open, .app-shell, .aiw-launcher > span { transition: none; }
}

/* Phones: both styles become a full-screen sheet below the topbar. */
@media (max-width: 760px) {
  .aiw--panel, .aiw--bubble {
    top: var(--nav-top, 60px); inset-inline-end: 0; bottom: 0; inset-inline-start: 0; width: auto; height: auto;
    border-radius: 0; border-width: 1px 0 0;
    transform: translateY(16px);
  }
  .aiw-launcher { inset-inline-end: 16px; bottom: 16px; width: 52px; height: 52px; }
  html.aiw-open-bubble .aiw-launcher { display: none; }
  html.aiw-has-launcher .toast-region { bottom: 80px; }
}

/* ---- Right-to-left (Arabic) ---- */
[dir="rtl"] .aiw--panel { border-width: 0 1px 0 0; transform: translateX(-24px); }
[dir="rtl"] .aiw--bubble { transform-origin: bottom left; }
[dir="rtl"] .aiw.is-open { transform: none; }