/*
 * Floating AI chat panel for the ProducerLens dashboard.
 *
 * Default state: docked to the right edge as a 360px-wide column.
 * The user can:
 *   • drag the header to reposition (becomes a floating window)
 *   • double-click the header to re-dock to the right edge
 *   • click the minimize chevron to collapse to a 56px-tall pill
 *   • click the chat-bubble icon (when minimized) to expand again
 *
 * Position + minimized state persist in localStorage so a reload
 * keeps the user's last layout.
 */

/* Docked state — handled entirely by .page-shell grid (components.css).
 * The aside takes its own grid column at wide+ tiers and becomes a
 * sticky bottom sheet at regular- tiers.
 *
 * No body padding-right needed any more; the grid handles it. The
 * .has-ai-dock / .ai-floating body classes are retained for backward
 * compatibility (legacy fallback in glass.css uses them) but no
 * longer drive any layout in modern mode. */

.ai-aside {
  display: flex;
  flex-direction: column;
  min-height: 0;
  font-family: 'DM Sans', sans-serif;
  /* glass.css supplies background / blur / border via the .glass class
   * that #ai-aside carries from dashboard.html. */
}

/* Floating (opt-in via the ⇆ button or by dragging the docked panel).
 * We override the grid by absolutely positioning over it. clampPosition
 * + the inline CSS clamp() guarantees x/y stay inside the viewport. */
.ai-aside--floating {
  position: fixed;
  top:  clamp(56px, var(--ai-y, 120px), calc(100vh - 200px));
  left: clamp(0px,  var(--ai-x, calc(100vw - 380px)), calc(100vw - 200px));
  width: min(380px, 90vw);
  height: var(--ai-h, 540px);
  border-radius: var(--radius-lg);
  z-index: var(--z-drawer);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.7),
              0 0 0 1px var(--border) inset;
}

/* Collapsed: just the header bar visible. */
.ai-aside.ai-collapsed {
  height: 56px;
  max-height: 56px;
}
.ai-aside.ai-collapsed .ai-body,
.ai-aside.ai-collapsed .ai-input-row {
  display: none;
}

.ai-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: grab;
  user-select: none;
  background: linear-gradient(180deg, rgba(59,130,246,0.06), transparent);
}
.ai-header:active { cursor: grabbing; }

.ai-header-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue, #3b82f6), var(--cyan, #22d3ee));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}

.ai-header-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.ai-header-sub {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

.ai-header-spacer { flex: 1; }

.ai-header-btn {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 120ms ease;
}
.ai-header-btn:hover {
  color: var(--text);
  background: var(--surface2);
  border-color: var(--border);
}

.ai-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 13px;
  line-height: 1.5;
}

.ai-msg {
  max-width: 90%;
  padding: 8px 12px;
  border-radius: 10px;
  word-wrap: break-word;
}
.ai-msg--user {
  align-self: flex-end;
  background: rgba(59, 130, 246, 0.14);
  border: 1px solid rgba(59, 130, 246, 0.28);
  color: var(--text);
}
.ai-msg--assistant {
  align-self: flex-start;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
}
.ai-msg--system {
  align-self: center;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  background: transparent;
  border: 0;
  padding: 4px 8px;
}

.ai-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  gap: 8px;
  padding: 24px;
}
.ai-empty-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue, #3b82f6), var(--cyan, #22d3ee));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: #fff;
  margin-bottom: 4px;
}
.ai-empty-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.ai-empty-prompt {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  color: var(--text-dim);
  transition: all 120ms ease;
}
.ai-empty-prompt:hover {
  border-color: var(--blue, #3b82f6);
  color: var(--text);
}

.ai-input-row {
  display: flex; gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.ai-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  outline: none;
  transition: border-color 120ms ease;
}
.ai-input:focus { border-color: var(--blue, #3b82f6); }

.ai-send {
  background: var(--blue, #3b82f6);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: opacity 120ms ease;
}
.ai-send:hover { opacity: 0.85; }
.ai-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Mobile floating: collapse back to a bottom-sheet shape so a dragged-
 * out panel doesn't strand itself off-screen on touch devices. The
 * grid handles the docked-state mobile layout (regular/compact tiers
 * in components.css), so this rule is only for floating mode. */
@media (max-width: 760px) {
  .ai-aside--floating {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; height: 60vh;
    border-radius: 0;
  }
  .ai-aside.ai-collapsed { height: 48px; }
}

/* Phone icon next to score (RingCentral / Krisp click-to-call hook).
 * Wired in dashboard.js when rendering rows. */
.tel-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.30);
  color: var(--green, #10b981);
  font-size: 11px;
  cursor: pointer;
  margin-left: 6px;
  transition: all 120ms ease;
  text-decoration: none;
}
.tel-btn:hover {
  background: rgba(16, 185, 129, 0.22);
  border-color: rgba(16, 185, 129, 0.50);
  transform: scale(1.05);
}
.tel-btn:disabled,
.tel-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}
.tel-btn--calling {
  background: rgba(59, 130, 246, 0.20);
  border-color: rgba(59, 130, 246, 0.50);
  color: var(--blue, #3b82f6);
  animation: tel-pulse 1.2s ease-in-out infinite;
}
@keyframes tel-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}