/*
 * Plain and small on purpose. No gradients, no shadows, no animation beyond
 * what tells you something is happening. System fonts only, so there is no
 * font to download and text paints on the first frame.
 *
 * Mobile is the default here; the wider layout is the media query, not the
 * other way round.
 */

:root {
  --bg: #ffffff;
  --bg2: #f6f6f6;
  --text: #111111;
  --muted: #5f5f5f;
  --line: #d0d0d0;
  --accent: #1a4fd0;
  --mine: #e7eefb;
  --theirs: #f2f2f2;
  --bad: #b3261e;
  --ok: #1a7f37;
  /* 16px minimum on inputs, otherwise iOS Safari zooms in on focus. */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --bg2: #1a1a1a;
    --text: #e8e8e8;
    --muted: #9a9a9a;
    --line: #343434;
    --accent: #7aa2f7;
    --mine: #1b2740;
    --theirs: #1f1f1f;
    --bad: #f2857e;
    --ok: #5cc271;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 var(--font);
}

a { color: var(--accent); }

button, input, textarea {
  font: inherit;
  color: inherit;
}

.hide { display: none !important; }

/* --- controls ---------------------------------------------------------- */

.btn {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg2);
  color: var(--text);
  text-align: center;
  cursor: pointer;
}
.btn:active { background: var(--line); }
.btn[disabled] { opacity: 0.5; cursor: default; }

.btn-main {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.btn-plain {
  display: inline-block;
  width: auto;
  min-height: 0;
  padding: 8px 10px;
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
}

.field {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg);
  /* Never below 16px — smaller text makes iOS zoom the page on focus. */
  font-size: 16px;
}
.field:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

label {
  display: block;
  margin: 14px 0 5px;
  font-size: 14px;
  color: var(--muted);
}

.hint { margin: 5px 0 0; font-size: 13px; color: var(--muted); }
.err { margin: 10px 0 0; font-size: 14px; color: var(--bad); }
.ok { margin: 10px 0 0; font-size: 14px; color: var(--ok); }

/* --- sign in / sign up ------------------------------------------------- */

.page {
  max-width: 380px;
  margin: 0 auto;
  padding: 32px 18px 48px;
}

.page h1 { margin: 0 0 4px; font-size: 21px; }
.page .sub { margin: 0 0 22px; font-size: 15px; color: var(--muted); }

.tabs {
  display: flex;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.tab {
  flex: 1;
  min-height: 44px;
  padding: 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.tab[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.page form button[type="submit"] { margin-top: 20px; }

/* --- app shell --------------------------------------------------------- */

/* On phones .side is position:fixed and so out of flow, leaving .col to fill
   the row on its own. On wide screens .side becomes static and sits beside it.
   Either way .col is the flex column that pins the composer to the bottom. */
.shell {
  display: flex;
  height: 100dvh;
}
.col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-height: 48px;
  padding: 6px 10px;
  padding-top: max(6px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.bar h1 {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar .who { font-size: 13px; color: var(--muted); font-weight: normal; }
.icon {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 17px;
  cursor: pointer;
}

/* --- list of chats ----------------------------------------------------- */

.side {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  width: 84%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  transition: transform 0.15s ease-out;
}
.side.open { transform: none; }
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }

.side-head {
  flex: none;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  padding-top: max(10px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
}
.side-head .btn { flex: 1; }
/* The drawer covers most of the screen, so the strip of scrim beside it is a
   poor tap target. This gives the drawer its own way out. */
.side-close {
  flex: none;
  width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg2);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}
.list { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.side-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 10px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.side-foot span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.item[aria-current="true"] { background: var(--bg2); }
.item .t {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item .p {
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item .m { margin-top: 3px; font-size: 12px; color: var(--muted); }
.count {
  float: right;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 2px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
}

.scrim {
  position: fixed;
  z-index: 10;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

/* --- messages ---------------------------------------------------------- */

.stream {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 10px;
}
.wrap { max-width: 680px; margin: 0 auto; }

.msg { margin-bottom: 14px; }
.msg .from {
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.msg .body {
  padding: 9px 11px;
  border-radius: 3px;
  background: var(--theirs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg.mine { text-align: right; }
.msg.mine .body {
  display: inline-block;
  max-width: 90%;
  text-align: left;
  background: var(--mine);
}
.msg .body code {
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(127, 127, 127, 0.2);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px;
}

.note {
  margin: 14px 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.day {
  margin: 14px 0 10px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.blank { padding: 28px 4px; color: var(--muted); }
.blank.tight { padding: 18px 12px; }
.blank h2 { margin: 0 0 6px; font-size: 17px; color: var(--text); }
.blank p { margin: 0; font-size: 15px; }

/* --- composer ---------------------------------------------------------- */

.composer {
  flex: none;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 8px 10px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.composer textarea {
  flex: 1;
  min-height: 44px;
  max-height: 140px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg);
  font-size: 16px;
  line-height: 1.4;
  resize: none;
}
.composer textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.composer button {
  flex: none;
  min-width: 60px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.composer button[disabled] { opacity: 0.45; }

/* --- notification prompt ----------------------------------------------- */

.banner {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg2);
  font-size: 14px;
}
.banner span { flex: 1; }
.banner button { flex: none; width: auto; min-height: 36px; padding: 6px 12px; }

/* --- owner details panel ----------------------------------------------- */

.panel { padding: 12px 10px; border-top: 1px solid var(--line); background: var(--bg2); }
.panel h3 { margin: 0 0 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.panel textarea { min-height: 60px; resize: vertical; }
.panel .row { display: flex; gap: 8px; margin-top: 8px; }
.panel .row .btn { flex: 1; }

/* --- wide screens ------------------------------------------------------ */

@media (min-width: 760px) {
  .side {
    position: static;
    flex: none;
    width: 280px;
    max-width: none;
    transform: none;
    transition: none;
  }
  .icon.menu { display: none; }
  .scrim { display: none; }
  .side-close { display: none; }
  .stream { padding: 16px; }
}

/* Inside the embedded bubble there is no room for a chat list. */
body.embed .side, body.embed .icon.menu, body.embed .scrim { display: none; }