/*
 * HeapFile Link - AI in the call (link-ai-call.js). Additive: uses the tokens
 * link.css already defines, adds no inline styles, and touches no existing rule.
 */

/* Caption overlay: sits above the control bar, never intercepts the pointer. */
.lk-ai-captions {
  position: fixed;
  left: 50%;
  bottom: calc(var(--controlbar-h, 72px) + var(--space-6));
  transform: translateX(-50%);
  z-index: var(--z-banner);
  width: min(720px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  pointer-events: none;
}
.lk-ai-captions[hidden] { display: none; }
.lk-ai-captions:empty { display: none; }
.lk-ai-caption {
  margin: 0;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  background: rgba(2, 9, 20, .82);
  color: #f7fbff;
  font-size: var(--fs-md, 1rem);
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}
.lk-ai-caption strong { color: #8fd3ff; font-weight: 700; }
.lk-ai-caption.is-interim { opacity: .72; }

/* AI tab */
.lk-ai-panel .lk-ai-section { margin-top: var(--space-4); }
.lk-ai-panel textarea { width: 100%; resize: vertical; }
.lk-ai-panel select { width: 100%; margin: var(--space-1) 0 var(--space-2); }
.lk-ai-consent {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 1px solid var(--warn, var(--line-strong));
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.lk-ai-consent[hidden] { display: none; }
.lk-ai-consent h4 { margin: 0 0 var(--space-1); }
.lk-ai-consent ul { margin: var(--space-2) 0; padding-left: 1.2em; }
.lk-ai-consent li { margin-bottom: var(--space-1); overflow-wrap: anywhere; }
.lk-ai-consent .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* Persistent reminder, for the person capturing, that transcription is running. */
.lk-ai-live-banner {
  position: fixed;
  top: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-banner);
  margin: 0;
  max-width: min(560px, calc(100vw - 32px));
  padding: 4px 12px;
  border-radius: var(--radius-md);
  background: rgba(2, 9, 20, .86);
  color: #f7fbff;
  font-size: var(--fs-sm, .875rem);
  text-align: center;
  pointer-events: none;
}
.lk-ai-live-banner[hidden] { display: none; }

/* Awareness stack: "AI is in this call" for everyone, plus the capturing person's reminder. */
.lk-ai-awareness {
  position: fixed;
  top: calc(var(--topbar-h, 64px) + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-banner);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: min(560px, calc(100vw - 32px));
  pointer-events: none;
}
.lk-ai-awareness .lk-ai-live-banner { position: static; transform: none; max-width: 100%; }
.lk-ai-presence {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  border: 1px solid #8fd3ff;
  background: rgba(2, 9, 20, .92);
  color: #f7fbff;
  font-size: var(--fs-sm, .875rem);
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}
.lk-ai-presence[hidden] { display: none; }
.lk-ai-presence-head { color: #8fd3ff; }
.lk-ai-presence-detail { opacity: .88; }
.lk-ai-presence-captions { margin-top: 2px; }
.lk-ai-presence-captions[hidden], .lk-ai-presence > div[hidden] { display: none; }
.lk-ai-notes h4 { margin: var(--space-3) 0 var(--space-1); }
.lk-ai-notes p, .lk-ai-answer { overflow-wrap: anywhere; white-space: pre-wrap; }
.lk-ai-notes ul, .lk-ai-answer ul { margin: 0; padding-left: 1.2em; }
.lk-ai-answer { margin-top: var(--space-3); }
.lk-ai-answer:empty { display: none; }
.lk-chat-msg.is-ai-authored { border-inline-start: 3px solid #8fd3ff; padding-inline-start: var(--space-2); }
.lk-chat-msg.is-ai-authored .lk-chat-meta strong { color: #8fd3ff; }

/* Notes card after a call: lives outside #call so it survives leaving the room. */
.lk-ai-postcall {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-dialog);
  width: min(420px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow: auto;
  padding: var(--space-4);
  background: var(--surface-raised, var(--bg));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}
.lk-ai-postcall[hidden] { display: none; }
.lk-ai-postcall h2 { margin-bottom: var(--space-2); }
.lk-ai-postcall .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

@media (max-width: 520px) {
  .lk-ai-postcall { left: var(--space-4); right: var(--space-4); width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .lk-ai-caption { transition: none; }
}

/* Files tab (link-files-ui.js). Same tokens, no inline styles. */
.lk-files-panel .lk-ai-section { margin-top: var(--space-4); }
.lk-files-panel select { width: 100%; margin: var(--space-1) 0 var(--space-2); }
.lk-files-drop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  padding: var(--space-4);
  border: 2px dashed var(--line-strong, var(--line));
  border-radius: var(--radius-md);
  background: var(--surface-2);
  text-align: center;
}
.lk-files-drop.is-active { border-color: var(--accent); background: var(--surface-1, var(--surface-2)); }
.lk-files-list { list-style: none; margin: var(--space-3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.lk-file {
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  overflow-wrap: anywhere;
}
.lk-file[data-status="failed"], .lk-file[data-status="rejected"] { border-color: var(--warn, var(--line-strong)); }
.lk-file-meta, .lk-file-status, .lk-file-note { color: var(--text-muted); font-size: var(--fs-sm, .875rem); }
.lk-file progress { width: 100%; margin: var(--space-1) 0; }
.lk-file .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }