:root {
  --bg: #141518;
  --plate: #191a1e;
  --surface: #202227;
  --well: #0c0d0f;
  --screen: #08090b;
  --text: #e8e9ed;
  --dim: #8f939e;
  --legend: #6e727c;
  --working: #3db4ff;
  --waiting: #ffb224;
  --error: #ff5d66;
  --done: #3dd68c;
  --idle: #6e6882;
  --off: #2a2c32;
  --gold: #d4b26a;
  --line: rgba(255, 255, 255, 0.07);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.4 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
code { font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; color: var(--gold); }

#bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px;
  background: linear-gradient(var(--plate), #111214);
  border-bottom: 1px solid #000;
  box-shadow: inset 0 -1px 0 var(--line);
  flex: none;
}
#title {
  flex: 1;
  min-width: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icon {
  background: none;
  border: 0;
  font-size: 30px;
  line-height: 1;
  padding: 0 8px 4px 0;
  color: var(--gold);
}
#pcs {
  background: var(--surface);
  color: var(--text);
  border: 1px solid #000;
  border-radius: 6px;
  padding: 4px;
  max-width: 40vw;
}
.status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); white-space: nowrap; }

.lamp {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--off);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
  flex: none;
}
.lamp.working { background: var(--working); box-shadow: 0 0 8px var(--working); animation: pulse 1.6s ease-in-out infinite; }
.lamp.waiting { background: var(--waiting); box-shadow: 0 0 10px var(--waiting); }
.lamp.idle { background: var(--idle); }
.lamp.ended { background: var(--off); }
.lamp.online { background: var(--done); box-shadow: 0 0 6px var(--done); }
.lamp.offline { background: var(--error); }
.lamp.connecting { background: var(--waiting); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }

.view { flex: 1; min-height: 0; overflow-y: auto; }
#unpaired { padding: 24px; }
#unpaired h1 { font-family: Georgia, serif; color: var(--gold); font-weight: normal; }
#unpaired li { margin: 8px 0; }
.dim { color: var(--dim); }
.center { text-align: center; padding: 32px; }

.note {
  margin: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--well);
  color: var(--dim);
  border: 1px solid var(--line);
}

.group { margin: 12px 12px 0; }
.group h2 {
  margin: 0 0 6px 4px;
  font: 12px/1 -apple-system, "Segoe UI", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--legend);
}
.sess {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  border: 1px solid #000;
  background: linear-gradient(#202227, #1a1b1f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.5);
}
.sess:active { background: #1a1b1f; }
.sess.waiting { border-color: rgba(255, 178, 36, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 12px rgba(255, 178, 36, 0.18); }
.sess .what { flex: 1; min-width: 0; }
.sess .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess .line { color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess.waiting .line { color: var(--waiting); }

.foot { padding: 24px 12px calc(env(safe-area-inset-bottom) + 24px); text-align: center; }
.paste { display: flex; gap: 8px; margin-top: 20px; }
.paste input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--well);
  color: inherit;
  font-size: 16px;
}
.foot .link { display: block; margin: 0 auto 12px; }
.link { background: none; border: 0; color: var(--legend); text-decoration: underline; font-size: 13px; }

#session { display: flex; flex-direction: column; overflow: hidden; }
#screenwrap {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--screen);
  box-shadow: inset 0 2px 6px #000;
  -webkit-overflow-scrolling: touch;
}
#screen {
  margin: 0;
  padding: 6px;
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.3;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #d8d9de;
}
#keys {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px;
  background: var(--plate);
  border-top: 1px solid #000;
  flex: none;
  scrollbar-width: none;
}
#keys::-webkit-scrollbar { display: none; }
#keys button {
  flex: none;
  min-width: 42px;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid #000;
  background: linear-gradient(#2a2c32, #202227);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 3px rgba(0, 0, 0, 0.5);
  font-size: 14px;
}
#keys button:active { background: #1a1b1f; box-shadow: inset 0 1px 3px #000; }
#keys .zoom { color: var(--dim); }
#send {
  display: flex;
  gap: 8px;
  padding: 0 8px calc(env(safe-area-inset-bottom) + 8px);
  background: var(--plate);
  flex: none;
}
#text {
  flex: 1;
  resize: none;
  min-height: 42px;
  max-height: 30vh;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #000;
  background: var(--well);
  color: var(--text);
  font: 16px/1.3 -apple-system, "Segoe UI", sans-serif;
  box-shadow: inset 0 2px 4px #000;
}
#send button {
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid #000;
  background: linear-gradient(#e0c27e, #b8954d);
  color: #1a1408;
  font-weight: 600;
}

/* 0.21: projects, starting, resuming, push */
.ghead { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px 4px; }
.ghead h2 { margin: 0; }
.plus {
  width: 32px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid #000;
  background: linear-gradient(#26282e, #1d1e23);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--gold);
  font-size: 20px;
  line-height: 1;
}
.plus:disabled { color: var(--legend); opacity: 0.5; }
.sess { cursor: pointer; color: var(--text); font: inherit; }
.sess.paused { opacity: 0.75; }
.sess.starting { cursor: default; color: var(--dim); }
.lamp.paused { background: transparent; border: 1px solid var(--idle); }
.none { font-size: 13px; padding: 2px 4px 8px; }
.resume, .pill {
  flex: none;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid #000;
  background: linear-gradient(#3a3320, #2a2516);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: var(--gold);
  font: 600 13px/1 -apple-system, "Segoe UI", sans-serif;
}
.pill { padding: 10px 16px; margin-bottom: 12px; }
#notifyhint { font-size: 13px; margin: 0 0 12px; }
#resumebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--plate);
  border-top: 1px solid var(--line);
  color: var(--dim);
}
#resumebar .pill { margin: 0; }
.spinner {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  border-right-color: transparent;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.foot .pill { display: block; margin: 0 auto 12px; }

/* 0.22: opening any project, making new ones */
.tools { display: flex; gap: 8px; margin: 12px 12px 0; }
.tools .pill { margin: 0; }
#list .tools { justify-content: flex-end; }
#search, .create input, .create select {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--well);
  color: inherit;
  font-size: 16px;
}
.create {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 12px 0;
  padding: 12px;
  border-radius: 10px;
  background: var(--plate);
  border: 1px solid var(--line);
}
.create select { flex-basis: 70%; }
.create input { flex-basis: 100%; }
.create .pill { margin: 0; }
#createhint { flex-basis: 100%; margin: 0; font-size: 13px; }
#createhint.bad { color: var(--error); }
.root .rpath { margin: -2px 0 6px 4px; font-size: 11px; color: var(--legend); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder { padding: 10px 12px; }
.folder .git { flex: none; font-size: 11px; color: var(--done); border: 1px solid rgba(61, 214, 140, 0.4); border-radius: 4px; padding: 1px 5px; }