* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* App shell. JS sizes #app to the visible viewport (above the on-screen
   keyboard on mobile) via the visualViewport API. */
#app {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* --- top bar --- */
#bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 10px;
  background: #2d2d2d;
  border-bottom: 1px solid #000;
  font-size: 13px;
}
#title { font-weight: 600; white-space: nowrap; }
.spacer { flex: 1; }
.hint { color: #888; font-size: 12px; white-space: nowrap; }
.hint kbd {
  background: #1e1e1e; border: 1px solid #444; border-radius: 3px;
  padding: 1px 4px; font-size: 11px;
}
.status { font-size: 12px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.status.connecting   { background: #5a4a00; color: #ffd700; }
.status.connected    { background: #0a3d12; color: #6ad36a; }
.status.disconnected { background: #4a0a0a; color: #ff6a6a; }
#logout, #install-btn {
  background: #3a3a3a; color: #ddd; border: 1px solid #555;
  border-radius: 4px; padding: 5px 10px; cursor: pointer; font-size: 12px;
  white-space: nowrap;
}
#logout:active, #install-btn:active { background: #4a4a4a; }
#install-btn {
  background: #d97757; color: #1e1e1e; border-color: #d97757; font-weight: 600;
}
#install-btn:active { background: #c46545; }
#install-btn[hidden] { display: none; }

/* --- terminal --- */
#terminal {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 4px;
  /* the app handles finger scrolling itself; stop the browser from also
     panning, zooming or triggering pull-to-refresh on the terminal */
  touch-action: none;
}
/* xterm's own scrollback stays empty (tmux owns the history on the alternate
   screen), so its scrollbar only ever sat dead in the corner — hide it. */
.xterm-viewport { scrollbar-width: none; }
.xterm-viewport::-webkit-scrollbar { width: 0; height: 0; }

/* --- mobile compose bar ---
   A plain textarea where the on-screen keyboard behaves normally (it's a
   stable field that is only cleared on Send, so Gboard's model never drifts
   out of sync the way it does with xterm's hidden input). Send transmits the
   text to Claude as a bracketed paste followed by Enter. */
#composebar {
  flex: 0 0 auto;
  display: none;
  gap: 6px;
  padding: 6px;
  align-items: flex-end;
  background: #262a2e;
  border-top: 1px solid #000;
}
body.touch #composebar { display: flex; }
#compose {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  max-height: 120px;
  resize: none;
  padding: 9px 10px;
  background: #1e1e1e;
  color: #eee;
  border: 1px solid #555;
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;          /* 16px keeps mobile browsers from zooming on focus */
  line-height: 1.3;
}
#compose-send {
  flex: 0 0 auto;
  height: 40px;
  padding: 0 16px;
  background: #c96442;
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#compose-send:active { background: #b5573a; }

/* --- mobile key bar ---
   Two rows: the buttons don't fit legibly on one row on a phone, so they
   stack. Each .keyrow is its own flex row whose buttons share the width
   evenly, so spacing stays even regardless of how many a row holds. */
#keybar {
  flex: 0 0 auto;
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
  background: #2d2d2d;
  border-top: 1px solid #000;
}
body.touch #keybar { display: flex; }
.keyrow {
  display: flex;
  gap: 6px;
}
#keybar button {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  background: #3a3a3a;
  color: #eee;
  border: 1px solid #555;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#keybar button.pressed,
#keybar button:active { background: #c96442; border-color: #c96442; }
#keybar #copy-btn  { background: #2f4a5a; border-color: #3a6b82; }
#keybar #paste-btn { background: #2f5a3a; border-color: #3a824f; }
/* class (not id) selector, so the .pressed highlight still wins on hold */
#keybar .scrollbtn { background: #454545; border-color: #666; font-size: 17px; }

@media (max-width: 640px) {
  .hint { display: none; }
}

/* --- select-text panel --- */
#copypanel {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #1e1e1e;
  display: flex;
  flex-direction: column;
}
#copypanel[hidden] { display: none; }
#copypanel-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  padding-top: calc(8px + env(safe-area-inset-top));
  background: #2d2d2d;
  border-bottom: 1px solid #000;
}
.cp-hint { flex: 1; color: #aaa; font-size: 12px; line-height: 1.3; }
#copypanel-bar button {
  flex: 0 0 auto;
  background: #3a3a3a; color: #eee; border: 1px solid #555;
  border-radius: 6px; padding: 9px 14px; font-size: 14px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#copyall-btn { background: #2f4a5a; border-color: #3a6b82; }
#unwrap-btn.on { background: #2f5a3a; border-color: #3a824f; color: #cfedd6; }
#copytext {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  overflow: auto;
  font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: 13px;
  line-height: 1.4;
  color: #d4d4d4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* --- paste panel (http fallback for the clipboard API) --- */
#pastepanel {
  position: fixed;
  inset: 0;
  z-index: 32;
  background: #1e1e1e;
  display: flex;
  flex-direction: column;
}
#pastepanel[hidden] { display: none; }
#pastepanel-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  padding-top: calc(8px + env(safe-area-inset-top));
  background: #2d2d2d;
  border-bottom: 1px solid #000;
}
#pastepanel-bar button {
  flex: 0 0 auto;
  background: #3a3a3a; color: #eee; border: 1px solid #555;
  border-radius: 6px; padding: 9px 14px; font-size: 14px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#pasteinsert-btn { background: #2f5a3a; border-color: #3a824f; }
#pastetext {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: #1e1e1e;
  color: #d4d4d4;
  border: 0;
  resize: none;
  font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: 16px;          /* 16px keeps mobile from zooming on focus */
  line-height: 1.4;
  -webkit-user-select: text;
  user-select: text;
}

/* --- "copied" toast --- */
#toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  background: rgba(10, 61, 18, 0.96);
  color: #6ad36a;
  border: 1px solid #2a6b35;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 13px;
  z-index: 40;
  pointer-events: none;
  max-width: 80%;
  text-align: center;
}
#toast[hidden] { display: none; }

/* --- reconnect overlay --- */
#overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 35;
}
/* Higher specificity than #overlay above, so the `hidden` attribute works. */
#overlay[hidden] { display: none; }
.overlay-msg {
  background: #2d2d2d; border: 1px solid #555; border-radius: 6px;
  padding: 16px 24px; color: #ffd700; text-align: center;
}

/* --- login page --- */
.login-body {
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 16px;
}
.login-card {
  background: #2d2d2d; border: 1px solid #444; border-radius: 8px;
  padding: 28px; width: 320px; max-width: 100%;
  display: flex; flex-direction: column; gap: 12px;
}
.login-card h1 { margin: 0; font-size: 20px; }
.login-card .sub { margin: 0; color: #888; font-size: 13px; }
.login-card input {
  padding: 12px; border-radius: 4px; border: 1px solid #555;
  background: #1e1e1e; color: #eee; font-size: 16px;
}
.login-card button {
  padding: 12px; border-radius: 4px; border: 0;
  background: #c96442; color: #fff; font-size: 16px; cursor: pointer;
}
.login-card button:active { background: #b5573a; }
.err { color: #ff6a6a; font-size: 13px; margin: 0; }