/*
 * 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.
 */

/* The dashboard's main wrapper gets a right-padding when the panel is
 * docked, so the table doesn't slide under the panel. */
body.has-ai-dock {
  padding-right: var(--ai-dock-w, 360px);
  transition: padding-right 180ms var(--ease-standard, ease);
}
body.has-ai-dock.ai-collapsed {
  padding-right: 64px;
}
body.ai-floating { /* undocked → no body padding shift */
  padding-right: 0;
}

.ai-panel {
  position: fixed;
  /* Default position: docked to the right edge, full-height minus header. */
  top: 56px;          /* below the sticky header */
  right: 0;
  bottom: 0;
  width: 360px;
  background: var(--surface);
  border-left: 1px solid var(--border-bright);
  display: flex;
  flex-direction: column;
  z-index: 90;        /* below header (z:100), above feed-tray */
  box-shadow: -8px 0 24px -16px rgba(0, 0, 0, 0.6);
  font-family: 'DM Sans', sans-serif;
  /* When floating (undocked) we override these via .ai-panel--floating. */
}

/* Floating: free-positioned via top/left, with a rounded card look. */
.ai-panel--floating {
  top: var(--ai-y, 120px);
  left: var(--ai-x, calc(100vw - 380px));
  right: auto;
  bottom: auto;
  height: var(--ai-h, 540px);
  border: 1px solid var(--border-bright);
  border-radius: 12px;
  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-panel.ai-collapsed {
  height: 56px;
  bottom: auto;
  /* Floating + collapsed → still a small pill at its current x/y. */
}
.ai-panel.ai-collapsed .ai-body,
.ai-panel.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: panel becomes full-screen modal-ish, padding removed. */
@media (max-width: 760px) {
  body.has-ai-dock { padding-right: 0; }
  .ai-panel {
    top: auto; bottom: 0; right: 0; left: 0;
    width: 100%;
    height: 60vh;
    border-left: 0;
    border-top: 1px solid var(--border-bright);
  }
  .ai-panel--floating { /* on mobile, floating collapses back to docked */
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; height: 60vh;
    border-radius: 0;
  }
  .ai-panel.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; }
}