:root {
  --bg: #f6f5f2; --panel: #ffffff; --ink: #1d1d1f; --muted: #6b6b70; --line: #e2e0da;
  --accent: #3b4cca; --mine: #e7eafc; --theirs: #ffffff; --bad: #b3261e;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121216; --panel: #1b1b21; --ink: #ececf0; --muted: #9a9aa3; --line: #2c2c35;
    --accent: #8f9bff; --mine: #262c52; --theirs: #1f1f27; --bad: #ff8a80;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.45 system-ui, sans-serif; }
code, pre { font: 13px/1.4 ui-monospace, monospace; }
pre { white-space: pre-wrap; word-break: break-all; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: .55em 1em; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button.quiet { background: none; color: var(--accent); padding: .3em .5em; }
.status { color: var(--muted); min-height: 1.4em; margin: .4em 0 0; }
.status.bad { color: var(--bad); }

.card { max-width: 30rem; margin: 8vh auto; padding: 1.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.card h1 { margin: 0 0 .3rem; font-size: 1.6rem; letter-spacing: .02em; }
.lede { color: var(--muted); margin-top: 0; }
form label { display: block; margin: .9rem 0; }
form input[type=password], form input[type=file] { display: block; width: 100%; margin-top: .3rem; padding: .5rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
details { margin-top: 1rem; color: var(--muted); }
summary { cursor: pointer; }

#app { display: grid; grid-template-columns: 16rem 1fr; height: 100vh; }
#peers-pane { border-right: 1px solid var(--line); background: var(--panel); overflow-y: auto; }
#peers-pane header, #conversation header { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem;
  border-bottom: 1px solid var(--line); min-height: 3.2rem; }
#me { font-weight: 600; flex: 1; }
#peers { list-style: none; margin: 0; padding: 0; }
#peers li { padding: .7rem 1rem; cursor: pointer; border-bottom: 1px solid var(--line); display: flex; gap: .5rem; align-items: baseline; }
#peers li[aria-current=true] { background: var(--mine); }
#peers li .tag { font-size: .8em; color: var(--muted); margin-left: auto; }
#peers li .unread { width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); align-self: center; }

#conversation { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
#conversation h2 { margin: 0; font-size: 1.05rem; flex: 1; }
#peer-key { font-size: .72em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24rem; }
#messages { list-style: none; margin: 0; padding: 1rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
#messages li { max-width: min(36rem, 85%); padding: .5rem .75rem; border-radius: 12px; background: var(--theirs);
  border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
#messages li.mine { align-self: flex-end; background: var(--mine); }
#messages li.broken { color: var(--bad); font-style: italic; }
#messages .meta { display: flex; gap: .6rem; font-size: .78em; color: var(--muted); margin-top: .25rem; }
#messages .meta button { font-size: 1em; padding: 0; }
#messages .file { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
#composer { display: flex; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--line); align-items: flex-end; }
#composer textarea { flex: 1; resize: none; max-height: 10rem; padding: .55rem .7rem; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); }
.file-button { margin: 0; cursor: pointer; font-size: 1.4rem; line-height: 1; padding: .35rem .5rem; color: var(--accent); }
#conv-status { padding: 0 1rem .5rem; }
.narrow-only { display: none; }

@media (max-width: 700px) {
  #app { grid-template-columns: 1fr; }
  #app.in-conversation #peers-pane { display: none; }
  #app:not(.in-conversation) #conversation { display: none; }
  .narrow-only { display: inline-block; }
}