@import '../tokens/tokens.css';

/* ------------------------------------------------------------------ */
/* Reset & base                                                         */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body { height: 100%; overflow: hidden; }

html {
  font-size: 16px;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------------------ */
/* Header                                                               */
/* ------------------------------------------------------------------ */
header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--space-5);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  gap: var(--space-4);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

h1 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Debug button — secondary base + warning tint */
.debug-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  font-family: inherit;
  white-space: nowrap;
  background: var(--color-surface);
  color: #eab308;
  border: 1px solid #6b5a20;
  transition: background var(--transition-fast);
}
.debug-btn:hover { background: #2a2410; }

/* ------------------------------------------------------------------ */
/* Full-page state containers (loading / error / empty)                */
/* ------------------------------------------------------------------ */
.state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: calc(100vh - var(--header-h));
  padding: 40px var(--space-6);
  text-align: center;
}

.state-icon { font-size: 3.5rem; }
.state-container h2 { font-size: 1.375rem; font-weight: var(--font-weight-bold); }
.state-container p { color: var(--color-text-muted); max-width: 380px; }

.state-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  text-decoration: none;
  background: var(--color-accent-solid);
  color: var(--color-text-on-accent);
  transition: background var(--transition-fast);
}
.state-link:hover { background: var(--color-accent-solid-hover); }

#error-detail {
  max-width: 640px;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3) 14px;
  font-family: ui-monospace, "Cascadia Code", "Fira Mono", monospace;
  font-size: var(--font-size-base);
  color: var(--color-critical);
  white-space: pre-wrap;
  word-break: break-all;
  text-align: left;
}

/* ------------------------------------------------------------------ */
/* Player view — outer shell                                            */
/* ------------------------------------------------------------------ */
#player-view {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h));
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Player section (iframe + info panel side by side)                   */
/* ------------------------------------------------------------------ */
.player-section {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.player-wrapper {
  flex: 2;
  min-width: 0;
  background: #000;
  position: relative;
}

#yt-player {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

/* ------------------------------------------------------------------ */
/* Info panel (sticky info on top, scrollable accordion below)         */
/* ------------------------------------------------------------------ */
.info-panel {
  flex: 1;
  min-width: 250px;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Sticky video info + actions */
.info-sticky {
  flex-shrink: 0;
  padding: 14px var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  position: relative;
}

/* wla-menu for the video options (⋮) button */
#video-menu-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}

.info-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.info-channel-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 2px;
}

.info-channel {
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.info-video-duration {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  padding-left: var(--space-2);
  border-left: 1px solid var(--color-border);
}
.info-video-duration:empty { display: none; }

.info-duration {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.info-actions {
  display: flex;
  gap: 6px;
}

/* Single row: Remove & Next takes 50%, Keep / Open on YouTube take 25%
   each. flex-basis 0 makes flex-grow divide the space left over after the
   two 6px gaps are subtracted, so the ratio holds exactly regardless of gap
   size. min-width: 0 overrides the flex default (min-content), letting
   these shrink below their label's width instead of blowing past their
   25%/50% share when the sidebar gets narrow; the label wraps rather than
   overflowing. */
.info-btn-remove { flex: 2 1 0; min-width: 0; }
.info-btn-remove::part(button) { width: 100%; justify-content: center; white-space: normal; }

.info-btn-flex { flex: 1 1 0; min-width: 0; }
.info-btn-flex::part(button) { width: 100%; justify-content: center; white-space: normal; }
.info-actions > a { flex: 1 1 0; min-width: 0; display: flex; }

/* ------------------------------------------------------------------ */
/* Accordion group (fills remaining info panel height)                 */
/* ------------------------------------------------------------------ */
.acc-group {
  flex: 1;
  min-height: 0;
}

/* Give accordion bodies the bg-level background for visual depth */
.acc-group wla-accordion {
  background: var(--color-bg);
}

/* ------------------------------------------------------------------ */
/* AI panel content                                                     */
/* ------------------------------------------------------------------ */
.ai-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-2);
}
.ai-status:empty { display: none; margin: 0; }
.ai-status.error { color: var(--color-critical); }

.ai-refresh {
  background: none;
  border: none;
  color: var(--color-info);
  cursor: pointer;
  font-size: var(--font-size-sm);
  padding: 0;
}
.ai-refresh:hover { text-decoration: underline; }

/* Summary text */
.summary-p {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin-bottom: 10px;
}
.summary-p:last-child { margin-bottom: 0; }

/* No-transcript inline note */
.no-transcript-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.no-transcript-note.transcript-offline {
  color: var(--color-warning);
}

/* Click-bait answer block */
.clickbait-answer {
  margin-top: 10px;
  padding: var(--space-2) 10px;
  background: var(--color-warning-bg);
  border: 1px solid rgba(212, 150, 30, 0.25);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
}
.clickbait-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-warning);
  margin-bottom: var(--space-1);
}

/* Key takeaways list */
.takeaways-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.placeholder-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  font-style: italic;
  margin-bottom: 10px;
}

.btn-setup-ai {
  display: inline-block;
  padding: 6px 14px;
  font-size: var(--font-size-sm);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.btn-setup-ai:hover {
  border-color: var(--color-border-focus);
  color: var(--color-text);
}

/* Comment themes */
.theme-list { display: flex; flex-direction: column; gap: var(--space-3); }
.theme-item {
  border-left: 3px solid var(--color-border);
  padding: 2px 0 2px var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.theme-item.positive { border-left-color: var(--color-accent); }
.theme-item.negative { border-left-color: var(--color-critical); }
.theme-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: var(--line-height-base);
}
.theme-sign {
  font-weight: var(--font-weight-bold);
  margin-right: 4px;
}
.theme-sign-pos { color: var(--color-accent); }
.theme-sign-neg { color: var(--color-critical); }
.theme-quote {
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}

/* AI contextual tag chips */
.ai-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ai-chip {
  background: rgba(159, 193, 255, 0.08);
  border: 1px solid rgba(159, 193, 255, 0.2);
  color: var(--color-info);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}
.ai-chip-group-label {
  width: 100%;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 6px 0 2px;
}

/* ------------------------------------------------------------------ */
/* Settings modal — fieldsets inside wla-modal body                    */
/* ------------------------------------------------------------------ */
.provider-radios {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.provider-radios wla-radio-card { flex: 1; }

.provider-config {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0 14px 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.provider-config-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  padding: 0 4px;
}
.provider-config wla-form-field { margin-top: var(--space-2); }

.form-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
  line-height: var(--line-height-base);
}
.form-hint a { color: var(--color-info); }

.form-test-result {
  font-size: var(--font-size-base);
  padding: var(--space-2) 10px;
  border-radius: var(--radius-sm);
}
.form-test-result.ok  {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid rgba(40, 173, 160, 0.3);
}
.form-test-result.err {
  background: var(--color-critical-bg);
  color: var(--color-critical);
  border: 1px solid rgba(229, 72, 77, 0.3);
}

.harvester-status-row {
  margin: 6px 0 2px;
}
.harvester-status-row .harvester-status { display: inline-block; }

.harvester-status {
  font-size: var(--font-size-sm);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.harvester-status[data-state="online"]  { color: var(--color-success);  background: var(--color-success-bg); }
.harvester-status[data-state="offline"] { color: var(--color-warning);  background: var(--color-warning-bg); }
.harvester-status[data-state="error"]   { color: var(--color-critical); background: var(--color-critical-bg); }

/* ------------------------------------------------------------------ */
/* Inspect modal — wla-modal part overrides + wla-tabs sizing          */
/* ------------------------------------------------------------------ */
#inspect-modal::part(modal) {
  max-width: min(860px, 96vw);
  max-height: 82vh;
}
#inspect-modal::part(body) {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#inspect-modal wla-tabs {
  flex: 1;
  min-height: 0;
}
#inspect-modal pre {
  margin: 0;
  font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
}
#inspect-modal pre.inspect-error {
  color: var(--color-critical);
  font-weight: var(--font-weight-semibold);
}

/* ------------------------------------------------------------------ */
/* Queue section                                                        */
/* ------------------------------------------------------------------ */
.queue-section {
  height: var(--queue-h);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  overflow: hidden;
}

.queue-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-4) 4px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}

.queue-title-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.queue-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.queue-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.queue-sync {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

#sync-status {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* Vertical divider between the refresh/sync group and the title —
   bigger gap on both sides than the header's base --space-2 flex gap */
.queue-title-sep {
  width: 1px;
  height: 16px;
  flex-shrink: 0;
  background: var(--color-border);
  margin: 0 var(--space-3);
}

/* Collapse/expand indicator, pinned to the true center of the bar (not
   the midpoint between the two side groups) so it doesn't drift when the
   left and right groups are different widths. Purely decorative: the
   whole bar is the click target (see #queue-collapse-toggle in
   watchlater.js), so this ignores pointer events and just reflects
   hover/collapsed state. At typical window widths there's plenty of
   room either side, so it doesn't collide with the side groups. */
.queue-collapse-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  color: var(--color-text);
  pointer-events: none;
  transition: color var(--transition-fast), transform var(--transition-base);
}
.queue-header:hover .queue-collapse-icon { color: var(--color-accent); }
.queue-section.collapsed .queue-collapse-icon { transform: translate(-50%, -50%) rotate(180deg); }

.queue-nav {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
}

.queue-section.collapsed { height: auto; }
.queue-section.collapsed .queue-scroll { display: none; }

.queue-scroll {
  flex: 1;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) 14px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: stretch;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}

/* Load-more sentinel card in the queue */
.queue-load-more-card {
  width: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.queue-load-more-btn {
  width: 100%;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: var(--space-2) var(--space-1);
  text-align: center;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.queue-load-more-btn:hover { border-color: var(--color-border-hover); color: var(--color-text); }

/* ------------------------------------------------------------------ */
/* Persistent error banner                                              */
/* ------------------------------------------------------------------ */
#error-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--color-critical-bg);
  border: 1px solid rgba(229, 72, 77, 0.4);
  border-radius: var(--radius);
  padding: var(--space-3) 14px;
  max-width: min(680px, 92vw);
  width: max-content;
  box-shadow: var(--shadow-md);
  animation: slideUp .2s ease;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.error-banner-text {
  flex: 1;
  font-family: ui-monospace, "Cascadia Code", "Fira Mono", monospace;
  font-size: var(--font-size-base);
  color: var(--color-critical);
  white-space: pre-wrap;
  word-break: break-all;
  line-height: var(--line-height-base);
  max-height: 160px;
  overflow-y: auto;
}

.error-banner-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.error-banner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(229, 72, 77, 0.4);
  background: rgba(229, 72, 77, 0.08);
  color: var(--color-critical);
  font-size: var(--font-size-base);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.error-banner-btn:hover { background: rgba(229, 72, 77, 0.16); }
.error-banner-close { padding: 4px 6px; }