* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: #1b1b1f;
  color: #eee;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

.screen {
  display: none;
  position: fixed;
  inset: 0;
  flex-direction: column;
}
.screen.active { display: flex; }
/* On a wide window, keep every screen a phone-width column in the middle. */
.screen { max-width: 480px; margin: 0 auto; }

/* ---------- Calculator ---------- */
#calc-screen {
  max-width: none;
  background: #000;
  justify-content: flex-end;
  align-items: center;
  padding: 16px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  user-select: none;
  -webkit-user-select: none;
}
/* Sized from whichever is tighter — the width or the height — so the five
   rows of round keys always fit without scrolling. */
.calc-body {
  --gap: clamp(8px, 3vw, 14px);
  width: min(100%, 440px, (100dvh - 190px) * 0.8);
  min-width: 220px;
}
.calc-readout { padding: 0 6px 14px; text-align: right; }
#calc-history {
  min-height: 1.4em;
  color: #8e8e93;
  font-size: clamp(0.95rem, 4.5vw, 1.25rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* flex-end keeps the newest digits visible if a very long number overflows. */
#calc-display {
  --base: min(4.6rem, 17vw, 17dvh);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: calc(var(--base) * 1.15);
  color: #fff;
  font-size: calc(var(--base) * var(--scale, 1));
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  transition: font-size 0.12s ease;
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.calc-grid button {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  font-size: min(2rem, 8vw, 5.5dvh);
  border: none;
  border-radius: 999px;
  background: #333336;
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s ease, transform 0.08s ease;
}
.calc-grid button:active { background: #737377; transform: scale(0.96); transition: none; }
.calc-grid button.muted { background: #a5a5aa; color: #000; font-size: min(1.6rem, 6.5vw, 4.5dvh); font-weight: 500; }
.calc-grid button.muted:active { background: #d9d9de; }
.calc-grid button.op { background: #ff9f0a; color: #fff; font-size: min(2.5rem, 10vw, 6.5dvh); }
.calc-grid button.op:active { background: #ffc76b; }
.calc-grid button.wide {
  grid-column: span 2;
  aspect-ratio: auto;
  justify-content: flex-start;
  padding-left: 13%;
}
.calc-grid button svg { width: 1.25em; height: 1.25em; fill: currentColor; pointer-events: none; }

/* ---------- Login ---------- */
#login-screen {
  background: #1b1b1f;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.picker-box { max-width: 340px; width: 100%; }
.picker-box h1 { font-size: 1.4rem; margin-bottom: 10px; }
.picker-box p { font-size: 0.9rem; color: #aaa; margin-bottom: 18px; line-height: 1.5; }
.login-input {
  display: block;
  width: 100%;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid #3a3a42;
  background: #232329;
  color: #fff;
  font-size: 1.1rem;
  text-align: center;
  letter-spacing: 2px;
}
.login-error { color: #ff6b6b; font-size: 0.85rem; min-height: 1.2em; margin-top: 6px; }
.picker-btn {
  display: block;
  width: 100%;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: none;
  background: #2f2f35;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}
.picker-btn:active { filter: brightness(1.3); }
.picker-btn.accent { background: #ff9f0a; color: #16161a; }
.link-btn {
  background: none;
  border: none;
  color: #8e8e93;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}
.link-btn.danger { color: #ff6b6b; }

/* ---------- Chat options menu / reveal panel ---------- */
.hidden { display: none !important; }
.menu-panel {
  position: absolute;
  top: calc(env(safe-area-inset-top, 10px) + 56px);
  right: 12px;
  z-index: 20;
  background: #232329;
  border: 1px solid #3a3a42;
  border-radius: 10px;
  padding: 8px;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.menu-item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: #fff;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.menu-item:active { background: #2f2f35; }
.reveal-row { display: flex; align-items: center; gap: 8px; padding: 6px 6px 10px; }
.reveal-row label { font-size: 0.82rem; color: #aaa; flex: 1; }
.reveal-row input {
  width: 64px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #3a3a42;
  background: #16161a;
  color: #fff;
  text-align: center;
}
#reveal-panel .picker-btn { margin: 0 6px 6px; width: calc(100% - 12px); padding: 10px; font-size: 0.9rem; }

/* ---------- Setup / Settings ---------- */
#settings-screen {
  background: #1b1b1f;
  overflow-y: auto;
  padding: 20px;
  padding-top: env(safe-area-inset-top, 20px);
}
.panel { max-width: 480px; margin: 0 auto; }
.panel h1 { font-size: 1.3rem; margin-bottom: 16px; }
.panel label {
  display: block;
  font-size: 0.85rem;
  color: #aaa;
  margin-bottom: 14px;
}
.panel label small { display: block; color: #777; font-weight: normal; margin-bottom: 4px; }
.panel input[type="text"],
.panel input[type="number"],
.panel select,
.panel textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #3a3a42;
  background: #232329;
  color: #fff;
  font-size: 0.95rem;
  font-family: inherit;
}
.panel textarea { resize: vertical; font-family: monospace; font-size: 0.75rem; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: auto; }
.panel hr { border: none; border-top: 1px solid #333; margin: 20px 0; }
.setup-status { font-size: 0.8rem; color: #ff9f0a; min-height: 1.2em; margin-bottom: 6px; }
.button-row { display: flex; gap: 10px; margin-top: 10px; padding-bottom: 30px; }
.panel button {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-size: 0.95rem;
}
.panel button.primary { background: #ff9f0a; color: #16161a; font-weight: 600; }
.panel button.secondary { background: #3a3a42; color: #fff; }

/* ---------- Chat list ---------- */
#chatlist-screen { background: #16161a; }
.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  padding-top: calc(env(safe-area-inset-top, 10px) + 14px);
  background: #1f1f25;
  border-bottom: 1px solid #2a2a30;
}
.list-title { font-size: 1.3rem; font-weight: 700; }
.chat-list { padding: 6px; }
.chat-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  background: none;
  border: none;
  border-radius: 10px;
  text-align: left;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chat-row:active { background: #232329; }
.chat-avatar {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ff9f0a;
  color: #16161a;
  font-weight: 700;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.online-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #6e6e76;
  border: 2px solid #16161a;
}
.online-dot.online { background: #34c759; }
.chat-row-body { flex: 1; min-width: 0; }
.chat-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-row-name { font-weight: 600; }
.chat-row-time { font-size: 0.72rem; color: #8e8e93; flex-shrink: 0; }
.chat-row-preview {
  font-size: 0.85rem;
  color: #8e8e93;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Chat ---------- */
#chat-screen { background: #16161a; }
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  padding-top: calc(env(safe-area-inset-top, 10px) + 10px);
  background: #1f1f25;
  border-bottom: 1px solid #2a2a30;
}
.chat-title { flex: 1; }
.chat-name { font-weight: 600; }
.chat-status { font-size: 0.75rem; color: #8e8e93; }
.icon-btn {
  background: none;
  border: none;
  color: #eee;
  font-size: 1.2rem;
  padding: 6px 8px;
  cursor: pointer;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bubble {
  max-width: 75%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 0.95rem;
  line-height: 1.35;
}
.bubble.me { align-self: flex-end; background: #ff9f0a; color: #16161a; border-bottom-right-radius: 4px; }
.bubble.peer { align-self: flex-start; background: #2b2b32; color: #fff; border-bottom-left-radius: 4px; }
.bubble-meta { font-size: 0.68rem; opacity: 0.65; margin-top: 3px; }
.bubble.hidden-msg .bubble-text { font-style: italic; opacity: 0.55; }
.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px;
  padding-bottom: calc(env(safe-area-inset-bottom, 10px) + 10px);
  background: #1f1f25;
  border-top: 1px solid #2a2a30;
}
.chat-input-row input {
  flex: 1;
  padding: 11px 14px;
  border-radius: 20px;
  border: none;
  background: #2b2b32;
  color: #fff;
  font-size: 0.95rem;
}
.chat-input-row .send {
  background: #ff9f0a;
  color: #16161a;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Mic while the box is empty, send arrow once something is typed. */
.chat-input-row .send svg { width: 22px; height: 22px; fill: currentColor; }
.chat-input-row .send .icon-send { display: none; margin-left: 2px; }
.chat-input-row .send.has-text .icon-send { display: block; }
.chat-input-row .send.has-text .icon-mic { display: none; }

/* ---------- Voice recording bar (replaces the text box while recording) ---------- */
.rec-bar { display: none; flex: 1; align-items: center; gap: 10px; }
.rec-bar svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff453a; animation: rec-blink 1s infinite; }
.rec-time { font-variant-numeric: tabular-nums; }
@keyframes rec-blink { 50% { opacity: 0.2; } }
.chat-input-row.recording input { display: none; }
.chat-input-row.recording .rec-bar { display: flex; }
.chat-input-row.recording .send .icon-send { display: block; }
.chat-input-row.recording .send .icon-mic { display: none; }

/* ---------- Voice message bubble ---------- */
.voice { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.voice-play {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}
.voice-play svg { width: 30px; height: 30px; fill: currentColor; display: block; }
.voice-play .i-pause { display: none; }
.voice-play.playing .i-pause { display: block; }
.voice-play.playing .i-play { display: none; }
.voice-track { flex: 1; height: 4px; border-radius: 2px; background: rgba(127, 127, 127, 0.45); overflow: hidden; }
.voice-fill { height: 100%; width: 0; background: currentColor; }
.voice-time { font-size: 0.75rem; opacity: 0.8; font-variant-numeric: tabular-nums; }
.chat-input-row input:disabled { opacity: 0.5; }
.chat-input-row .send:disabled { opacity: 0.4; }