/* Thunder Doug — pocket palette (matches Doug OS gold-on-near-black). */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&family=Inter:wght@400;500;600&display=swap');

:root {
  --bg:    #0a0a0f;
  --bg2:   #111118;
  --bg3:   #18181f;
  --ink:   #f0f0f0;
  --ink2:  #aaaaaa;
  --ink3:  #666666;
  --gold:  #B8974A;
  --gold2: #D4A84B;
  --gold3: #9A7B3A;
  --rule:  #222;
  --you:   #4ADE80;
  --warn:  #d97757;
  --radius: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 17px;          /* >=11px floor per LAW #1b */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
}

button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; }
textarea, input { caret-color: var(--gold); }
::placeholder { color: var(--ink3); opacity: 1; }

/* ------- top bar / wordmark ------------------------------------------ */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--rule);
  -webkit-app-region: drag;
}
.wordmark {
  font-family: 'Manrope', sans-serif;   /* LAW #2b: Doug wordmark = Manrope */
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 18px;
  color: var(--ink);
}
.wordmark .dot { color: var(--gold); }
.wordmark .sub {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 2px;
}
.dot-light {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ink3);
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  -webkit-app-region: no-drag;
}
.dot-light.live { background: var(--you); box-shadow: 0 0 8px var(--you); }
.dot-light.warn { background: var(--warn); box-shadow: 0 0 8px var(--warn); }

/* ------- transcript --------------------------------------------------- */
.transcript {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  user-select: text;
}
.transcript::-webkit-scrollbar { width: 6px; }
.transcript::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }

.line { margin-bottom: 12px; font-size: 14px; line-height: 1.55; }
.line .who {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.line.you .who  { color: var(--you); }
.line.doug .who { color: var(--gold); }
.line.sys .who  { color: var(--ink3); }
.line.sys       { color: var(--ink2); font-style: italic; }
.line.pending   { color: var(--ink2); font-style: italic; }
.line.pending::after {
  content: ' ●';
  color: var(--gold);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 1; }
}

/* ------- composer ----------------------------------------------------- */
.composer {
  border-top: 1px solid var(--rule);
  padding: 10px 12px 12px;
  background: var(--bg2);
}
.composer .row { display: flex; gap: 8px; align-items: center; }
.composer textarea {
  flex: 1;
  background: var(--bg);
  color: var(--ink);
  caret-color: var(--gold);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 9px 11px;
  font-size: 14px;
  resize: none;
  height: 38px;
  outline: none;
}
.composer textarea:focus { border-color: var(--gold); }

.btn {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-app-region: no-drag;
}
.btn:hover { border-color: var(--gold); color: var(--gold); }
.btn.gold {
  background: linear-gradient(180deg, var(--gold2), var(--gold3));
  color: #0a0a0f; border-color: var(--gold2); font-weight: 600;
}
.btn.gold:hover { color: #000; transform: translateY(-1px); }
.btn.active { color: var(--gold); border-color: var(--gold); }

.toggles {
  display: flex; gap: 6px; margin-top: 8px;
  font-size: 11px; letter-spacing: 0.06em;
}

/* mic button — circular, lives between textarea and Send */
.btn.mic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--bg);
  color: var(--gold);
  border: 1px solid var(--rule);
}
.btn.mic:hover { border-color: var(--gold); }
.btn.mic.recording {
  color: #fff;
  background: linear-gradient(180deg, #d94c4c, #a83232);
  border-color: #d94c4c;
  animation: mic-pulse 1.1s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 76, 76, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(217, 76, 76, 0); }
}
.btn.mic.busy { opacity: 0.55; pointer-events: none; }

/* ------- gate (lock + setup) ----------------------------------------- */
.gate {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; padding: 28px 24px; text-align: center;
}
.gate .wordmark { font-size: 22px; margin-bottom: 4px; }
.gate p { color: var(--ink2); font-size: 13px; margin: 8px 0 22px; }
.gate input[type="password"], .gate input[type="text"] {
  background: var(--bg2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px;
  letter-spacing: 0.22em;
  color: var(--ink);
  text-align: center;
  width: 260px;
  outline: none;
}
.gate input:focus { border-color: var(--gold); box-shadow: 0 0 14px rgba(212,168,75,0.18); }
.gate .err {
  color: var(--warn); font-size: 12px; min-height: 18px; margin-top: 8px;
}
.gate .ok { color: var(--you); }
.gate .btn.gold { margin-top: 14px; padding: 11px 22px; }
.gate .helper {
  margin-top: 28px; font-size: 11px; color: var(--ink3);
  letter-spacing: 0.04em;
}
.gate .helper a { color: var(--gold); text-decoration: none; cursor: pointer; }

/* ------- attach button — twin of mic, sits between textarea + mic --- */
.btn.attach {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--bg);
  color: var(--gold);
  border: 1px solid var(--rule);
}
.btn.attach:hover { border-color: var(--gold); }
.btn.attach.busy { opacity: 0.55; pointer-events: none; }

/* ------- ingest progress bar — between transcript + composer --------- */
.ingest-progress {
  height: 0;
  background: var(--bg2);
  border-top: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  transition: height 0.18s ease;
}
.ingest-progress.active { height: 22px; }
.ingest-progress-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 30%;
  background: linear-gradient(90deg, var(--gold3), var(--gold2));
  animation: ingest-slide 1.2s ease-in-out infinite;
  opacity: 0.9;
}
@keyframes ingest-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
.ingest-progress-label {
  position: relative;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  line-height: 22px;
  z-index: 1;
}

/* ------- learned-line — Doug's "I read your file" confirmation ------- */
.line.learned .who { color: var(--gold2); }
.line.learned {
  background: linear-gradient(90deg, rgba(184,151,74,0.08), transparent);
  border-left: 2px solid var(--gold3);
  padding: 6px 10px 6px 8px;
  border-radius: 4px;
}
.line.learned .slug {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--gold2);
  letter-spacing: 0.06em;
}

/* ------- drop overlay — covers chat area on drag-over ---------------- */
.drop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 15, 0.88);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: none;
  padding: 24px;
}
.drop-overlay.active { display: flex; }
.drop-frame {
  border: 2px dashed var(--gold);
  border-radius: 12px;
  padding: 28px 22px;
  background: rgba(184, 151, 74, 0.04);
  width: 100%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 0 24px rgba(184, 151, 74, 0.12);
}
.drop-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;          /* small label, not a hero — LAW "no big headlines" */
  color: var(--ink);
  letter-spacing: 0.01em;
}
.drop-hint {
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;          /* 11px floor */
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--gold);
}

/* ------- pocket layout ----------------------------------------------- */
.pocket {
  display: flex; flex-direction: column; height: 100%;
  position: relative;       /* anchor for .drop-overlay's absolute positioning */
}