/* Work for Watts — terminal chrome + three skins */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }
body {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Roboto Mono", "DejaVu Sans Mono", monospace;
  font-size: 13.5px;
  font-variant-emoji: text;
  line-height: 1.5;
  overflow: hidden;
}

#app { display: flex; flex-direction: column; height: 100%; padding: 10px 14px 4px; }
#scroller { flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; }
#scroller::-webkit-scrollbar { display: none; }
#view { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
#bottom { flex: 0 0 auto; padding-top: 8px; }

.ln { white-space: pre-wrap; word-break: break-word; }
pre { font-family: inherit; }
.dim { opacity: 0.55; }

.cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* controls strip */
#controls {
  position: fixed; top: 10px; right: 12px; z-index: 10;
  display: flex; gap: 6px; align-items: center;
  background: rgba(20, 20, 22, 0.82); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 5px 7px;
  transition: opacity 0.5s; font-size: 12px;
}
#controls.hidden { opacity: 0; pointer-events: none; }
#controls button {
  font: inherit; color: #bbb; background: transparent; border: 1px solid transparent;
  border-radius: 5px; padding: 3px 8px; cursor: pointer;
}
#controls button:hover { color: #fff; border-color: rgba(255,255,255,0.2); }
#controls button.on { color: #fff; background: rgba(255,255,255,0.14); }
#controls .sep { width: 1px; height: 16px; background: rgba(255,255,255,0.15); }
#controls #inputToggle.typer { color: #7ee787; }

/* parody disclaimer — always in the markup; visible whenever the control
   strip is awake (mouse activity), hidden during idle second-monitor mode */
#disclaimer {
  flex: 0 0 auto; text-align: center; font-size: 8.5px; opacity: 0;
  padding: 2px 0 1px; user-select: none; transition: opacity 0.5s;
}
body.chrome-awake #disclaimer { opacity: 0.4; }
#disclaimer a { color: inherit; }

/* ============================== CLAUDE ============================== */
body[data-skin="claude"] { background: #1f1d1a; color: #e8e3da; }
body[data-skin="claude"] #disclaimer { color: #b5aa98; }

.claude-hdr { line-height: 1.35; margin: 4px 0 10px; }
.cl-logo { color: #d97757; }
.cl-b { font-weight: 700; }
.cl-accent { color: #d97757; }
.cl-user { margin-top: 10px; }
.cl-text, .cl-tool, .cl-todo, .cl-edit { margin-top: 10px; }
.cl-dot { color: #e8e3da; }
.cl-dot-tool { color: #6fbf82; }
.cl-spinner { margin-top: 10px; }
.cl-spark { color: #d97757; }
.cl-err { color: #e5695f; }

.cl-result-block { display: flex; }
.cl-todo-list { padding-left: 4px; }
.cl-todo-done { text-decoration: line-through; opacity: 0.55; }
.cl-todo-row { white-space: pre-wrap; }

.cl-diff { margin-left: 21px; margin-top: 2px; }
.cl-lnno { opacity: 0.4; display: inline-block; min-width: 4ch; text-align: right; margin-right: 1ch; }
.cl-diff-add { background: rgba(78, 154, 90, 0.22); }
.cl-diff-del { background: rgba(201, 74, 66, 0.2); }

.cl-composer {
  border: 1px solid #57503f; border-radius: 6px; padding: 5px 9px;
  color: #e8e3da; min-height: 1.5em;
}
.cl-prompt { opacity: 0.8; }
.cl-status { display: flex; justify-content: space-between; padding: 3px 9px 0; font-size: 0.95em; }

.cl-perm {
  border: 1px solid #d97757; border-radius: 6px; padding: 8px 12px; margin-bottom: 6px;
}
.cl-perm-title { font-weight: 700; margin-bottom: 4px; }
.cl-perm-body { white-space: pre-wrap; margin-bottom: 6px; }
.cl-cmd { color: #e8e3da; }
.cl-perm-q { margin-bottom: 4px; }
.cl-perm-sel { color: #7cb8f2; }

/* ============================== CODEX =============================== */
body[data-skin="codex"] { background: #0e0e10; color: #d9d9d9; }
body[data-skin="codex"] #disclaimer { color: #9a9a9a; }

.cx-hdr-box {
  border: 1px solid #38383c; border-radius: 6px; padding: 6px 12px;
  margin: 4px 0 10px; display: inline-block; min-width: 44ch;
}
.cx-b { font-weight: 700; }
.cx-tips { }
.cx-usermsg { }
.cx-user-caret { font-weight: 700; opacity: 0.6; }
.cx-user { }
.cx-text, .cx-ran, .cx-explored, .cx-plan, .cx-diff, .cx-worked { margin-top: 8px; }
.cx-out { }
.cx-add { color: #7ec87e; }
.cx-del { color: #e06c75; }
.cx-magenta { color: #c678dd; }
.cx-plan-done { opacity: 0.5; text-decoration: line-through; }
.cx-plan-active { color: #56b6c2; font-weight: 600; }
.cx-explore-verb { font-weight: 600; }

.cx-spinner { margin-top: 8px; }
.cx-shimmer {
  background: linear-gradient(90deg, #9a9a9a 20%, #ffffff 50%, #9a9a9a 80%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: cx-shimmer 1.8s linear infinite;
}
@keyframes cx-shimmer { from { background-position: 180% 0; } to { background-position: -20% 0; } }

.cx-composer { padding: 4px 2px; min-height: 1.5em; }
.cx-caret { font-weight: 700; }
.cx-foot { display: flex; justify-content: space-between; padding: 2px 2px 0; }
.cx-model-line { padding: 1px 2px 0; font-size: 0.95em; }

.cx-perm { border: 1px solid #38383c; border-radius: 6px; padding: 8px 12px; margin-bottom: 6px; }
.cx-perm-cmd { margin: 5px 0; opacity: 0.9; }
.cx-perm-sel { color: #56b6c2; }

/* ============================== GEMINI ============================== */
body[data-skin="gemini"] { background: #1e1e2e; color: #cdd6f4; }
body[data-skin="gemini"] #app { font-size: 21px; }
body[data-skin="gemini"] #disclaimer { color: #a6adc8; font-size: 10.5px; }

.gm-banner {
  font-size: min(1em, 2.1vw);
  line-height: 1.02;
  background: linear-gradient(90deg, #4796e4, #847ace, #c3677f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 4px 0 2px;
}
.gm-b { font-weight: 700; }
.gm-accent { color: #89b4fa; }
.gm-green { color: #a6e3a1; }
.gm-red { color: #f38ba8; }
.gm-yellow { color: #f9e2af; }
.gm-tips { }
.gm-usermsg { margin-top: 12px; color: #a6adc8; }
.gm-caret { color: #89dceb; }
.gm-text { margin-top: 10px; }
.gm-star { color: #89b4fa; }
.gm-plan { padding-left: 2ch; }
.gm-spinner { margin-top: 10px; }
.gm-spin { color: #89b4fa; }
.gm-error { margin-top: 8px; }
.gm-warn { margin-top: 8px; }
.gm-switch { margin-top: 10px; }

.gm-toolbox {
  border: 1px solid #45475a; border-radius: 8px;
  padding: 4px 12px; margin-top: 10px;
}
.gm-tool-body { white-space: pre-wrap; }
.gm-diff-add { color: #a6e3a1; }

.gm-composer {
  border: 1px solid #45475a; border-radius: 8px; padding: 6px 12px; min-height: 1.5em;
}
.gm-foot { display: flex; justify-content: space-between; gap: 12px; padding: 4px 2px 0; font-size: 0.8em; }
.gm-foot-left { color: #89b4fa; }

.gm-perm { border: 1px solid #f9e2af; border-radius: 8px; padding: 8px 14px; margin-bottom: 8px; }
.gm-perm-cmd { margin: 6px 0; color: #a6adc8; }
.gm-perm-sel { color: #a6e3a1; }

/* smaller screens: gemini stays big but not absurd */
@media (max-width: 900px) {
  body[data-skin="gemini"] #app { font-size: 17px; }
  body { font-size: 12.5px; }
}