/*
 * advisor-panel.css — Conversational System Advisor, Phase 1 (Deliverable 3a)
 * Slide-out chat panel. Inherits the dashboard palette via the same :root CSS
 * custom properties index.html declares (fallbacks supplied for standalone use).
 * All classes adv-* prefixed to avoid dashboard collisions. Mono terminal look.
 * The Integrity Protocol (Patent Pending) — Timothy Joseph Wrenn
 */

/* Toggle button — floating, bottom-right */
.adv-toggle {
  position: fixed; bottom: 20px; right: 20px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent-cyan, #0077b6); color: #fff;
  border: 1px solid var(--border-active, #2a3f60);
  font-size: 22px; line-height: 1; cursor: pointer; z-index: 9998;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.adv-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0,119,182,0.4); }

/* Panel container — slides in from the right */
.adv-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(400px, 100vw);
  display: flex; flex-direction: column;
  background: var(--bg-secondary, #0c1220);
  border-left: 2px solid var(--accent-cyan, #0077b6);
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-primary, #dfe6f0);
  transform: translateX(100%); transition: transform 0.28s ease; z-index: 9999;
}
.adv-panel.adv-open { transform: translateX(0); }

/* Header */
.adv-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border, #1a2740);
  background: var(--bg-card, #101826);
}
.adv-title {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-cyan, #0077b6);
}
.adv-close {
  background: none; border: none; color: var(--text-secondary, #8a9bba);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.adv-close:hover { color: var(--text-primary, #dfe6f0); }

/* Message area — fills space between header and input */
.adv-messages {
  flex: 1 1 auto; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 12.5px; line-height: 1.5;
}

/* Messages */
.adv-msg {
  max-width: 85%; padding: 8px 11px; border-radius: var(--radius-sm, 6px);
  white-space: pre-wrap; word-wrap: break-word;
}
.adv-msg-user {
  align-self: flex-end; color: var(--text-primary, #dfe6f0);
  background: var(--accent-cyan-dim, rgba(0,119,182,0.08));
  border: 1px solid rgba(0,119,182,0.3);
}
.adv-msg-assistant {
  align-self: flex-start; color: var(--text-secondary, #8a9bba);
  background: var(--bg-card, #101826); border: 1px solid var(--border, #1a2740);
}

/* Citation warning — amber, appended under a flagged message */
.adv-citation-warning {
  display: block; margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed rgba(255,179,71,0.3);
  font-size: 11px; color: var(--accent-amber, #ffb347);
}

/* Typing indicator */
.adv-typing { align-self: flex-start; display: flex; gap: 4px; padding: 8px 11px; }
.adv-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-cyan, #0077b6);
  animation: adv-blink 1.2s infinite ease-in-out;
}
.adv-dot:nth-child(2) { animation-delay: 0.2s; }
.adv-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes adv-blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* Input area — pinned at panel bottom */
.adv-input-area {
  display: flex; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--border, #1a2740); background: var(--bg-card, #101826);
}
.adv-input {
  flex: 1 1 auto; background: var(--bg-primary, #060a11);
  border: 1px solid var(--border, #1a2740); border-radius: var(--radius-sm, 6px);
  color: var(--text-primary, #dfe6f0); font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; padding: 8px 10px; resize: none;
}
.adv-input:focus { outline: none; border-color: var(--accent-cyan, #0077b6); }
.adv-send {
  background: var(--accent-cyan, #0077b6); color: #fff; border: none;
  border-radius: var(--radius-sm, 6px); font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600; padding: 0 14px; cursor: pointer;
}
.adv-send:hover { background: #008ed8; }
.adv-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* API key prompt — centered, shown when no key configured */
.adv-apikey {
  margin: auto; padding: 20px; max-width: 300px;
  display: flex; flex-direction: column; gap: 10px;
  text-align: center; font-size: 12px; color: var(--text-secondary, #8a9bba);
}
.adv-apikey .adv-input { text-align: center; }