/* ──────────────────────────────────────────────────────────────
   PLAN MAPS — AI ASSISTANT WIDGET
   Uses only design tokens from base.css — no hardcoded colors.
────────────────────────────────────────────────────────────── */

/* Toggle button */
#asst-toggle {
  position: fixed; bottom: 24px; right: 24px;
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 100%);
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  box-shadow: 0 4px 14px rgba(59,130,246,.45);
  z-index: 60; transition: transform .15s, box-shadow .2s, filter .2s;
}
#asst-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 18px rgba(59,130,246,.6); }
#asst-toggle.asst-active { filter: brightness(1.12); box-shadow: 0 4px 14px rgba(20,184,166,.5); }

/* Panel */
#asst-panel {
  position: fixed; bottom: 84px; right: 24px;
  width: 360px; height: 520px;
  max-height: calc(100dvh - 120px);
  background: var(--bg-surface);
  border: 1px solid var(--bg-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; overflow: hidden;
  z-index: 60;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .22s cubic-bezier(.34, 1.56, .64, 1),
              transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
#asst-panel.asst-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Header */
.asst-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 14px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--bg-line);
}
.asst-title-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.asst-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; color: var(--ink-100);
}
.asst-plan-select {
  margin-top: 2px; max-width: 200px;
  background: var(--bg-surface); color: var(--ink-300);
  border: 1px solid var(--bg-line); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 10px;
  padding: 2px 4px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.asst-plan-select:hover { color: var(--ink-100); border-color: var(--ink-400); }
.asst-plan-select:focus { outline: none; border-color: var(--accent); color: var(--ink-100); }
.asst-header-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* Icon buttons (clear, close) */
.asst-icon-btn {
  width: 28px; height: 28px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-300);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; cursor: pointer;
  transition: background .15s, color .15s;
}
.asst-icon-btn:hover { background: var(--bg-elevated); color: var(--ink-100); }

/* Messages area */
.asst-messages {
  flex: 1; overflow-y: auto; scroll-behavior: smooth;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-line) transparent;
}
.asst-messages::-webkit-scrollbar { width: 4px; }
.asst-messages::-webkit-scrollbar-track { background: transparent; }
.asst-messages::-webkit-scrollbar-thumb { background: var(--bg-line); border-radius: 999px; }

/* Bubbles */
.asst-msg {
  max-width: 80%; padding: 10px 13px;
  font-size: 13px; line-height: 1.5;
  word-wrap: break-word; overflow-wrap: anywhere;
}
.asst-msg--user {
  align-self: flex-end;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 12px 12px 2px 12px;
}
.asst-msg--assistant {
  align-self: flex-start;
  background: var(--bg-elevated); color: var(--ink-100);
  border-radius: 12px 12px 12px 2px;
}
.asst-msg strong { font-weight: 700; }
.asst-msg code {
  font-family: var(--font-mono); font-size: 12px;
  background: var(--bg-deep); padding: 1px 5px; border-radius: var(--radius-sm);
}
.asst-msg ul { margin: 4px 0 4px 16px; }
.asst-msg li { margin: 2px 0; }

/* Inline charts (pie/donut) */
.asst-chart { display: flex; flex-direction: column; gap: 8px; }
.asst-chart-title { font-size: 12px; font-weight: 600; color: var(--ink-100); }
.asst-chart svg { width: 100%; max-width: 160px; align-self: center; }
.asst-chart-legend { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ink-200); }
.asst-chart-legend-row { display: flex; align-items: center; gap: 6px; }
.asst-chart-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* Scope-change note */
.asst-scope-note {
  align-self: center; max-width: 92%;
  text-align: center; font-size: 10px;
  color: var(--ink-400);
  background: var(--bg-elevated);
  border: 1px solid var(--bg-line);
  border-radius: 999px;
  padding: 3px 12px;
}

/* Typing indicator */
.asst-typing { display: flex; gap: 4px; align-items: center; }
.asst-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-300); display: inline-block;
  animation: asst-bounce 1.2s infinite ease-in-out;
}
.asst-typing span:nth-child(2) { animation-delay: .15s; }
.asst-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes asst-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: .5; }
  30%           { transform: translateY(-5px); opacity: 1;  }
}

/* Input row */
.asst-input-row {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--bg-line);
}
#asst-input {
  flex: 1; resize: none; border: 0; background: transparent;
  color: var(--ink-100); font-family: var(--font-body);
  font-size: 13px; line-height: 1.4;
  min-height: 36px; max-height: 120px; padding: 8px 0;
}
#asst-input::placeholder { color: var(--ink-400); }
#asst-input:disabled { opacity: .6; }

/* Send button */
.asst-send-btn {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: var(--bg-deep); border: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; cursor: pointer; transition: opacity .15s;
}
.asst-send-btn:disabled { opacity: .5; pointer-events: none; }

/* Settings row */
.asst-settings {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 12px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--bg-line);
}
.asst-settings-label { font-size: 10px; color: var(--ink-400); }
.asst-settings-controls { display: flex; gap: 6px; }
.asst-settings select {
  background: var(--bg-surface); color: var(--ink-200);
  border: 1px solid var(--bg-line); border-radius: var(--radius-sm);
  font-size: 11px; padding: 3px 6px; cursor: pointer;
}

/* RTL layout — applied when Arabic language is active */
#asst-panel[dir="rtl"] { direction: rtl; }
#asst-panel[dir="rtl"] .asst-msg--user {
  align-self: flex-start;
  border-radius: 12px 12px 12px 2px;
  text-align: right;
}
#asst-panel[dir="rtl"] .asst-msg--assistant {
  align-self: flex-end;
  border-radius: 12px 12px 2px 12px;
  text-align: right;
}
#asst-panel[dir="rtl"] .asst-scope-note { text-align: right; }
#asst-panel[dir="rtl"] #asst-input { text-align: right; direction: rtl; }
#asst-panel[dir="rtl"] .asst-header { flex-direction: row-reverse; }
#asst-panel[dir="rtl"] .asst-header-actions { flex-direction: row-reverse; }
#asst-panel[dir="rtl"] .asst-input-row { flex-direction: row-reverse; }
#asst-panel[dir="rtl"] .asst-settings { flex-direction: row-reverse; }

/* ── Docked side-panel mode ──────────────────────────────────────
   The panel attaches to the right edge as a full-height column and the
   page makes room for it, so it reads as part of the app rather than a
   floating popup. Toggled back to popup via the header dock button. */
#asst-panel.asst-docked {
  --asst-dock-w: 380px;
  /* Sit just left of the fixed right sidebar so the vertical menu stays visible. */
  top: 0; bottom: 0; right: var(--sidebar-w);
  width: var(--asst-dock-w); height: 100dvh; max-height: none;
  border-radius: 0;
  border-top: 0; border-bottom: 0;
  border-left: 1px solid var(--bg-line);
  border-right: 1px solid var(--bg-line);
  box-shadow: -4px 0 24px rgba(0,0,0,.18);
  transform: translateX(24px);
}
#asst-panel.asst-docked.asst-open { transform: translateX(0); }

/* Reserve space for the docked panel so content isn't hidden behind it. */
body { transition: background .3s, padding-right .22s ease; }
body.asst-docked-open { padding-right: calc(380px + var(--sidebar-w)); }
/* The floating launcher would sit on top of the docked panel — hide it while
   docked & open; it returns when the panel is closed so it can be reopened. */
body.asst-docked-open #asst-toggle { display: none; }
/* The header user-menu dropdown is anchored to the right edge, which the docked
   panel now covers — shift it clear of the panel and lift it above. */
body.asst-docked-open .user-dropdown {
  right: calc(var(--sidebar-w) + 8px + 380px);
  z-index: 70;
}

/* Mobile */
@media (max-width: 480px) {
  #asst-panel { left: 8px; right: 8px; width: auto; bottom: 76px; }
  #asst-toggle { bottom: 16px; right: 16px; }
  /* Docking on a phone isn't useful — fall back to the popup layout. */
  #asst-panel.asst-docked {
    top: auto; bottom: 76px; left: 8px; right: 8px;
    width: auto; height: auto; max-height: calc(100dvh - 120px);
    border: 1px solid var(--bg-line); border-radius: var(--radius-lg);
  }
  body.asst-docked-open { padding-right: 0; }
}