:root {
  --bg: #ffffff;
  --bar: rgba(246, 246, 248, 0.92);
  --line: #d9d9de;
  --text: #000000;
  --muted: #8e8e93;
  --me: #0a84ff;
  --me-text: #ffffff;
  --them: #e9e9eb;
  --them-text: #000000;
  --card: #f2f2f7;
  --accent: #0a7c3e;
  --danger: #d70015;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bar: rgba(22, 22, 24, 0.92);
    --line: #38383a;
    --text: #ffffff;
    --muted: #8e8e93;
    --them: #262628;
    --them-text: #ffffff;
    --card: #1c1c1e;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
/* Sized to the visual viewport (set from app.js), so that with the iPhone keyboard up the
   header, the newest messages and the message box all sit in the part of the screen that
   is still visible, instead of the bottom of the chat hiding behind the keyboard. */
.screen {
  position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-height, 100%);
  display: flex; flex-direction: column;
}

.bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: calc(env(safe-area-inset-top) + 6px) 12px 8px;
  background: var(--bar); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 0.5px solid var(--line); z-index: 2;
}
.bar-btn { background: none; border: 0; color: var(--me); font-size: 16px; padding: 6px 0; cursor: pointer; }
.bar-btn:first-child { justify-self: start; }
.bar-btn:last-child { justify-self: end; }
.who { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; }
.who-name { font-size: 12px; color: var(--text); }

/* The typing dots live inside the scrolling area, after the last message, so they push the
   messages up rather than covering the bottom of the last bubble. */
#scroller {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
#thread { flex: none; padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 2px; }
#typing { flex: none; }
/* With the keyboard up, the home-indicator gap under the message box isn't needed. */
.keyboard #composer, .keyboard #recorder { padding-bottom: 8px; }
.stamp { align-self: center; color: var(--muted); font-size: 11px; margin: 12px 0 6px; }
.bubble {
  max-width: 78%; padding: 8px 13px; border-radius: 19px; font-size: 16px; line-height: 1.32;
  white-space: pre-wrap; overflow-wrap: anywhere; position: relative;
}
.bubble.me { align-self: flex-end; background: var(--me); color: var(--me-text); }
.bubble.them { align-self: flex-start; background: var(--them); color: var(--them-text); }
.bubble.me + .bubble.them, .bubble.them + .bubble.me { margin-top: 8px; }
.bubble.tail.me { border-bottom-right-radius: 5px; }
.bubble.tail.them { border-bottom-left-radius: 5px; }
.bubble a { color: inherit; }

/* Rowan's formatted replies: paragraphs, lists and headings with breathing room. */
.bubble.rich { white-space: normal; line-height: 1.42; padding: 9px 14px; }
.bubble.rich > :first-child { margin-top: 0; }
.bubble.rich > :last-child { margin-bottom: 0; }
.bubble.rich p { margin: 0 0 9px; }
.bubble.rich ul, .bubble.rich ol { margin: 2px 0 10px; padding-left: 20px; }
.bubble.rich li { margin: 0 0 5px; padding-left: 2px; }
.bubble.rich li:last-child { margin-bottom: 0; }
.bubble.rich ul li::marker { color: var(--accent); }
.bubble.rich ol li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.bubble.rich .rt-head {
  font-weight: 650; margin: 14px 0 5px; padding-top: 10px;
  border-top: 0.5px solid rgba(127, 127, 127, 0.28);
}
.bubble.rich > .rt-head:first-child { padding-top: 0; border-top: 0; }
.bubble.rich strong { font-weight: 650; }
.bubble.rich code {
  font: 0.9em ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1px 5px; border-radius: 6px;
  background: rgba(127, 127, 127, 0.16);
}
.bubble.rich > br { display: none; }
.bubble.rich .play { display: flex; width: fit-content; margin-top: 8px; }
/* Long replies on wide screens keep a comfortable line length. */
.bubble.them.rich { max-width: min(86%, 620px); }
@media (prefers-color-scheme: dark) { .bubble.rich ul li::marker { color: #34c759; } }

.card {
  align-self: flex-start; max-width: 86%; background: var(--card); border: 0.5px solid var(--line);
  border-radius: 16px; overflow: hidden; margin: 6px 0; flex: none;
}
.card-title { font-size: 13px; color: var(--muted); padding: 10px 14px 0; }
.card-body { padding: 6px 14px 12px; font-size: 15px; white-space: pre-wrap; }
.card-actions { display: flex; border-top: 0.5px solid var(--line); }
.card-actions button {
  flex: 1; background: none; border: 0; padding: 12px 8px; font-size: 16px; color: var(--me); cursor: pointer;
  min-width: 0; line-height: 1.2;
}
.card-actions button:disabled { opacity: 0.5; }
.card-actions button + button { border-left: 0.5px solid var(--line); }
.card-actions button.go { font-weight: 600; }
.card-edit {
  display: block; width: calc(100% - 20px); margin: 0 10px 10px; padding: 8px 10px; resize: none;
  border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 16px; line-height: 1.35;
  background: var(--bg); color: var(--text);
}
.card-edit:focus { outline: none; border-color: var(--me); }
.bubble.pending { opacity: 0.6; }
.card-done { padding: 10px 14px; font-size: 13px; color: var(--muted); border-top: 0.5px solid var(--line); }

.typing { display: flex; gap: 4px; padding: 12px 14px; margin: 2px 12px 10px; width: fit-content; }
.typing span { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
.typing.drafting { display: block; white-space: pre-wrap; max-width: 78%; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

#composer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 10px calc(env(safe-area-inset-bottom) + 8px);
  background: var(--bar); border-top: 0.5px solid var(--line);
}
#input {
  flex: 1; resize: none; border: 1px solid var(--line); border-radius: 19px; padding: 8px 14px;
  font: inherit; font-size: 16px; line-height: 1.3; max-height: 140px; background: var(--bg); color: var(--text);
}
#input:focus { outline: none; border-color: var(--muted); }
#send {
  width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--me); color: #fff;
  display: grid; place-items: center; margin-bottom: 3px; cursor: pointer;
}
#send:disabled { background: var(--line); }
#send svg { width: 18px; height: 18px; }

#mic {
  width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; color: var(--muted);
  display: grid; place-items: center; margin-bottom: 1px; cursor: pointer; flex: none;
}
#mic svg { width: 24px; height: 24px; }
#recorder {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px calc(env(safe-area-inset-bottom) + 8px);
  background: var(--bar); border-top: 0.5px solid var(--line);
}
#rec-cancel, #rec-send {
  width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center;
  cursor: pointer; flex: none;
}
#rec-cancel { background: var(--card); color: var(--text); }
#rec-send { background: var(--me); color: #fff; }
#rec-cancel svg, #rec-send svg { width: 20px; height: 20px; }
.rec-live {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border-radius: 20px; background: var(--bg); border: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: blink 1.2s infinite; flex: none; }
.rec-hint { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 12px 5px 10px;
  border-radius: 14px; border: 0; font: inherit; font-size: 14px; cursor: pointer;
  background: rgba(127, 127, 127, 0.18); color: inherit;
}
.play[aria-pressed="true"] { background: rgba(127, 127, 127, 0.32); }
.bubble .voice-tag { opacity: 0.8; }

.connections { padding: 4px 14px 10px; }
.conn { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 0.5px solid var(--line); }
.conn:first-of-type { border-top: 0; }
.conn > span { min-width: 0; overflow-wrap: anywhere; }
.conn small { color: var(--muted); display: block; }
.connections h3 { font-size: 13px; color: var(--muted); font-weight: 500; margin: 10px 0 4px; text-transform: uppercase; }
.conn-btn {
  flex: none; background: var(--me); color: #fff; border: 0; border-radius: 14px; padding: 7px 14px;
  font: inherit; font-size: 15px; text-decoration: none; cursor: pointer;
}
.conn-btn.quiet { background: none; color: var(--me); padding: 7px 0; }
.conn select { font: inherit; font-size: 15px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.connect-note { background: var(--card); border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; font-size: 15px; }

.signin-card {
  margin: auto; text-align: center; padding: 32px 24px; max-width: 360px; width: 100%;
}
.signin-icon { width: 88px; height: 88px; border-radius: 22px; }
.signin-card h1 { margin: 16px 0 4px; font-size: 28px; }
.signin-card p { color: var(--muted); margin: 0 0 28px; }
.primary {
  display: block; background: var(--me); color: #fff; text-decoration: none; padding: 14px; border-radius: 14px;
  font-size: 17px; font-weight: 600;
}
.note { margin-top: 16px !important; color: var(--danger) !important; }

.people-list { flex: 1; overflow-y: auto; padding: 12px 16px calc(env(safe-area-inset-bottom) + 16px); }
.person { background: var(--card); border-radius: 14px; margin-bottom: 14px; overflow: hidden; }
.person summary { padding: 14px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.person summary::-webkit-details-marker { display: none; }
.person .role { color: var(--muted); font-size: 14px; }
.group { padding: 4px 14px 10px; }
.group h3 { font-size: 13px; color: var(--muted); font-weight: 500; margin: 10px 0 4px; text-transform: uppercase; }
.perm { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 0.5px solid var(--line); gap: 12px; }
.perm small { color: var(--muted); display: block; }
.switch { appearance: none; width: 51px; height: 31px; border-radius: 16px; background: var(--line); position: relative; cursor: pointer; flex: none; transition: background 0.2s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.switch:checked { background: #34c759; }
.switch:checked::after { transform: translateX(20px); }
.switch:disabled { opacity: 0.5; }

/* Folding phones and tablets.
   Cover screens are narrow (about 340-380px): bubbles may use more of the width.
   Unfolded (about 700-900px) the chat keeps a readable column instead of stretching, and the
   People page sits beside it. When the fold is reported (viewport segments), nothing sits
   across the hinge: the chat stays on one side. */
@media (max-width: 380px) {
  .bubble { max-width: 86%; font-size: 15.5px; }
  .bubble.them.rich { max-width: 92%; }
  .card { max-width: 94%; }
  .card-actions button { font-size: 15px; padding: 12px 6px; }
  .bar { padding-left: 8px; padding-right: 8px; }
  .rec-hint { display: none; }
}
@media (min-width: 640px) {
  #thread, #composer, #recorder, .people-list { padding-left: max(16px, calc((100% - 760px) / 2)); padding-right: max(16px, calc((100% - 760px) / 2)); }
  .bubble { max-width: 70%; }
  .card { max-width: 72%; }
  .typing { margin-left: max(16px, calc((100% - 760px) / 2)); }
}
@media (horizontal-viewport-segments: 2) {
  .screen { right: auto; width: env(viewport-segment-width 0 0, 50%); }
  #thread, #composer, #recorder, .people-list { padding-left: 12px; padding-right: 12px; }
  .bubble { max-width: 80%; }
}
@media (vertical-viewport-segments: 2) {
  /* Laptop-style fold: messages on top, typing on the bottom half. */
  #chat main { flex: none; height: calc(env(viewport-segment-bottom 0 0, 50vh) - 70px); }
  #composer, #recorder { margin-top: auto; }
}