/* ================================================================
   pandō bitwarden privacy demo — scoped widget
   Used by:
     - /demo-bitwarden.html  (standalone preview)
     - /index-standard.html  (landing-page hero slot)
   All styles scoped to .bw-demo to prevent leakage.
   ================================================================ */

.bw-demo {
  /* === scoped design tokens ===
     Terminal content (panes, band, scrubber) stays dark regardless of
     page theme — terminal-widget convention. Only the chrome bar inherits
     page theme tokens so it doesn't fight a dark-mode page. */
  --bw-bg-pane: #0a0c0a;
  --bw-bg-pane-2: #0d100d;
  --bw-bg-chrome: var(--color-paper-dim, #f4f1ec);
  --bw-border: rgba(255,255,255,0.08);
  --bw-border-chrome: var(--color-border-subtle, rgba(10,10,10,0.12));
  --bw-text-primary: rgba(255,255,255,0.92);
  --bw-text-secondary: rgba(255,255,255,0.62);
  --bw-text-muted: rgba(255,255,255,0.42);
  --bw-text-faint: rgba(255,255,255,0.28);
  --bw-accent-pando: #4a8c62;
  --bw-accent-native: #d7ba7d;
  --bw-diff-add: #6fb98b;
  --bw-diff-del: #e0837d;
  --bw-warn: #d7ba7d;
  --bw-chrome-text: var(--color-text-secondary, #4d4d4d);
  --bw-chrome-strong: var(--color-text-primary, #111);

  /* === outer container === */
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--bw-bg-pane);
  border: 1px solid var(--bw-border-chrome);
  border-radius: 12px;
  overflow: hidden;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--bw-text-primary);
  /* Video-like: no selection, no text cursor inside */
  user-select: none;
  -webkit-user-select: none;
}
.bw-demo *, .bw-demo *::before, .bw-demo *::after { box-sizing: border-box; }

/* === Chrome (top bar with file path) === */
.bw-demo .bw-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bw-bg-chrome);
  border-bottom: 1px solid var(--bw-border-chrome);
  flex: 0 0 auto;
}
.bw-demo .bw-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--color-paper-dark, #e9e3da);
  border: 1px solid var(--bw-border-chrome);
}
.bw-demo .bw-chrome-title {
  flex: 1;
  text-align: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--bw-chrome-text);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bw-demo .bw-chrome-title .strong { color: var(--bw-chrome-strong); font-weight: 500; }

/* === Viewport (two panes + divider) === */
.bw-demo .bw-viewport {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  background: var(--bw-bg-pane);
  position: relative;
  flex: 1 1 auto;
  min-height: 280px;
  max-height: 520px;
  height: 480px; /* default in unconstrained contexts (standalone preview) */
}
.bw-demo .bw-divider { background: var(--bw-border); }
.bw-demo .bw-pane {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: 14px 16px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.55;
  color: var(--bw-text-primary);
  cursor: default;
}
.bw-demo .bw-pane-pando { background: var(--bw-bg-pane); }
.bw-demo .bw-pane-native { background: var(--bw-bg-pane-2); }

/* === Prompt line === */
@keyframes bw-blink { 50% { opacity: 0; } }
.bw-demo .bw-line.prompt-line {
  color: var(--bw-text-primary);
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px dashed rgba(255,255,255,0.10);
  font-size: 12.5px;
}
.bw-demo .bw-line.prompt-line .muted { color: var(--bw-text-muted); }
.bw-demo .bw-line.prompt-line .caret {
  display: inline-block;
  width: 7px; height: 13px;
  background: var(--bw-text-primary);
  vertical-align: -2px;
  margin-left: 1px;
  animation: bw-blink 1s steps(2,end) infinite;
}
.bw-demo .bw-line.prompt-line .caret.gone { display: none; }

/* === Log lines === */
.bw-demo .bw-line {
  white-space: pre-wrap;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 220ms ease, transform 220ms ease;
  margin: 0;
  padding: 1px 0;
}
.bw-demo .bw-line.show { opacity: 1; transform: none; }
.bw-demo .bw-line.thinking { color: var(--bw-text-muted); font-style: italic; }
.bw-demo .bw-line.call    { color: var(--bw-accent-pando);  font-weight: 500; }
.bw-demo .bw-line.call-n  { color: var(--bw-accent-native); font-weight: 500; }
.bw-demo .bw-line.arg     { color: var(--bw-text-secondary); }
.bw-demo .bw-line.response{ color: var(--bw-text-secondary); }
.bw-demo .bw-line.tool    { color: var(--bw-text-secondary); }
.bw-demo .bw-line.tool-cont { color: var(--bw-text-muted); }
.bw-demo .bw-line.diff    { color: var(--bw-text-secondary); font-size: 11.5px; }
.bw-demo .bw-line.success { color: var(--bw-diff-add); font-weight: 500; padding-top: 6px; }
.bw-demo .bw-line.gap     { padding-top: 10px; }

.bw-demo .op    { color: var(--bw-accent-pando);  font-weight: 600; }
.bw-demo .op-n  { color: var(--bw-accent-native); font-weight: 600; }
.bw-demo .ident { color: var(--bw-text-primary); }
.bw-demo .muted { color: var(--bw-text-muted); }
.bw-demo .ok    { color: var(--bw-diff-add); }
.bw-demo .warn  { color: var(--bw-warn); }
.bw-demo .add   { color: var(--bw-diff-add); }
.bw-demo .del   { color: var(--bw-diff-del); }

/* === Scrubber === */
.bw-demo .bw-scrubber {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
  background: #050605;
  border-top: 1px solid rgba(255,255,255,0.05);
  flex: 0 0 auto;
  user-select: none;
}
.bw-demo .bw-scrub-play {
  width: 20px; height: 20px;
  flex: 0 0 20px;
  border: none;
  background: transparent;
  color: var(--bw-text-secondary);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 120ms ease, color 120ms ease;
}
.bw-demo .bw-scrub-play:hover  { background: rgba(255,255,255,0.08); color: var(--bw-text-primary); }
.bw-demo .bw-scrub-play:active { background: rgba(255,255,255,0.14); }
.bw-demo .bw-scrub-icon { width: 10px; height: 10px; fill: currentColor; }
.bw-demo .bw-scrub-icon-pause { display: none; }
.bw-demo .bw-scrub-play.is-playing .bw-scrub-icon-play  { display: none; }
.bw-demo .bw-scrub-play.is-playing .bw-scrub-icon-pause { display: inline; }
.bw-demo .bw-scrub-track {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.10);
  border-radius: 1.5px;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: height 120ms ease;
}
.bw-demo .bw-scrub-track:hover { height: 5px; }
.bw-demo .bw-scrub-track:hover .bw-scrub-head { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bw-demo .bw-scrub-track:focus-visible { box-shadow: 0 0 0 2px rgba(74,140,98,0.45); }
.bw-demo .bw-scrub-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--bw-accent-pando);
  border-radius: 1.5px;
  pointer-events: none;
}
.bw-demo .bw-scrub-head {
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px; height: 10px;
  background: var(--bw-accent-pando);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(74,140,98,0.20);
}
.bw-demo .bw-scrubber.is-dragging .bw-scrub-head { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bw-demo .bw-scrubber.is-dragging .bw-scrub-track { height: 5px; }
.bw-demo .bw-scrub-time {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 10px;
  color: var(--bw-text-muted);
  flex: 0 0 auto;
  min-width: 58px;
  text-align: right;
  letter-spacing: 0.01em;
}
.bw-demo .bw-scrub-time-sep { color: var(--bw-text-faint); margin: 0 1px; }

/* === Bottom band === */
.bw-demo .bw-band {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  background: linear-gradient(180deg, rgba(13,16,13,1), rgba(8,10,8,1));
  flex: 0 0 auto;
}
.bw-demo .bw-band-shared-head {
  grid-column: 1 / -1;
  padding: 9px 18px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bw-text-muted);
  text-align: center;
}
.bw-demo .bw-band-divider { background: var(--bw-border); }
.bw-demo .bw-band-col {
  padding: 12px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.bw-demo .bw-band-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Geist', sans-serif;
  font-size: 12.5px;
}
.bw-demo .bw-band-label-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}
.bw-demo .bw-band-col-pando  .bw-band-label-dot { background: var(--bw-accent-pando); }
.bw-demo .bw-band-col-native .bw-band-label-dot { background: var(--bw-accent-native); }
.bw-demo .bw-band-label-name { color: var(--bw-text-primary); font-weight: 500; }
.bw-demo .bw-band-label-time {
  margin-left: auto;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--bw-text-secondary);
  letter-spacing: 0.01em;
}
.bw-demo .bw-band-col-pando  .bw-band-label-time .num { color: var(--bw-accent-pando); font-weight: 600; }
.bw-demo .bw-band-col-native .bw-band-label-time .num { color: #e8c98a;                font-weight: 600; }
.bw-demo .bw-band-label-time .num.frozen { opacity: 0.7; }
.bw-demo .bw-band-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 18px;
}
.bw-demo .bw-band-bar {
  flex: 1;
  height: 14px;
  background: transparent;
  position: relative;
  overflow: hidden;
}
.bw-demo .bw-band-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  transition: width 60ms linear;
  background-size: 12px 100%;
  background-repeat: repeat-x;
}
.bw-demo .bw-band-bar-pando .bw-band-bar-fill {
  background-image: linear-gradient(to right,
    var(--bw-accent-pando) 0,
    var(--bw-accent-pando) 9px,
    transparent 9px,
    transparent 12px);
  filter: drop-shadow(0 0 4px rgba(74,140,98,0.45));
}
.bw-demo .bw-band-bar-native .bw-band-bar-fill {
  background-image: linear-gradient(to right,
    var(--bw-accent-native) 0,
    var(--bw-accent-native) 9px,
    transparent 9px,
    transparent 12px);
  filter: drop-shadow(0 0 4px rgba(215,186,125,0.30));
}
.bw-demo .bw-band-count {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  flex: 0 0 auto;
  min-width: 110px;
  text-align: right;
  color: var(--bw-text-secondary);
}
.bw-demo .bw-band-col-pando  .bw-band-count .num { color: var(--bw-accent-pando); }
.bw-demo .bw-band-col-native .bw-band-count .num { color: #e8c98a; }
.bw-demo .bw-band-anno {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 7px 10px;
  border-radius: 4px;
  font-family: 'Geist', sans-serif;
  font-size: 11.5px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 350ms ease, transform 350ms ease;
  pointer-events: none;
}
.bw-demo .bw-band-anno.show { opacity: 1; transform: none; }
.bw-demo .bw-band-anno-pando {
  background: rgba(74,140,98,0.12);
  border-left: 3px solid var(--bw-accent-pando);
  color: #8cd0a3;
}
.bw-demo .bw-band-anno-native {
  background: rgba(215,186,125,0.12);
  border-left: 3px solid var(--bw-accent-native);
  color: #f0d495;
}
.bw-demo .bw-band-anno-arrow { flex: 0 0 auto; }
.bw-demo .bw-band-anno-text strong { color: var(--bw-text-primary); font-weight: 600; }

/* === Responsive === */
@media (max-width: 900px) {
  .bw-demo .bw-viewport { height: 380px; min-height: 240px; max-height: 380px; }
  .bw-demo .bw-pane { font-size: 11px; padding: 12px 12px; }
  .bw-demo .bw-chrome-title { font-size: 11px; }
  .bw-demo .bw-band-col { padding: 10px 14px 12px; }
  .bw-demo .bw-band-count { min-width: 90px; font-size: 12px; }
}
@media (max-width: 640px) {
  .bw-demo .bw-viewport { height: 320px; min-height: 220px; max-height: 320px; }
  .bw-demo .bw-pane { font-size: 10.5px; padding: 10px 10px; }
  .bw-demo .bw-line.diff { font-size: 10px; }
  .bw-demo .bw-line.prompt-line { font-size: 11px; }
  .bw-demo .bw-band-shared-head { font-size: 9px; padding: 7px 10px; }
  .bw-demo .bw-band-col { padding: 9px 10px 10px; gap: 6px; }
  .bw-demo .bw-band-label { font-size: 11.5px; }
  .bw-demo .bw-band-label-time { font-size: 10.5px; }
  .bw-demo .bw-band-count { font-size: 11.5px; min-width: 78px; }
  .bw-demo .bw-band-anno { font-size: 10.5px; padding: 6px 8px; }
  .bw-demo .bw-chrome { padding: 8px 10px; }
  .bw-demo .bw-chrome-title { font-size: 10px; }
  .bw-demo .bw-dot { width: 7px; height: 7px; }
}

/* When embedded in a constrained landing slot, fill the parent height */
.bw-demo[data-fill="true"] {
  height: 100%;
}
.bw-demo[data-fill="true"] .bw-viewport {
  height: auto;
  max-height: none;
}

@media (prefers-reduced-motion: reduce) {
  .bw-demo .bw-line { transition: none; }
  .bw-demo .bw-band-anno { transition: none; }
  .bw-demo .bw-line.prompt-line .caret { animation: none; }
  .bw-demo .bw-scrub-track,
  .bw-demo .bw-scrub-head,
  .bw-demo .bw-scrub-fill,
  .bw-demo .bw-band-bar-fill { transition: none; }
}