/**
 * AskAshwin — the web chat.
 *
 * A WARM LIGHT THEME, DELIBERATELY. Contrast sensitivity falls with age and
 * this page is read by older people and by their children on their behalf. A
 * dark UI is harder work for exactly that audience, so there is no dark mode
 * here — the palette is fixed rather than following the device.
 *
 * TWO TYPEFACES, TWO JOBS. Lora (serif) is Ashwin's voice: his replies, the
 * greeting. DM Sans is the interface around him — buttons, labels, what the
 * family types. Keeping the split honest is what stops the page reading like a
 * form and starts it reading like a conversation.
 *
 * Layout: a fixed sidebar beside a chat column capped at 760px. Below 760px
 * the sidebar becomes a drawer that starts closed, because on a phone the
 * conversation is the entire point and nothing should sit in front of it.
 */

:root {
  --bg: #f7f3ea;
  --bg-elevated: #fdfbf6;
  --bg-elevated-2: #f1ece0;
  --panel-border: rgba(42, 46, 39, 0.12);

  --sage: #5f7a63;
  --sage-deep: #3f5943;
  --sage-dim: rgba(95, 122, 99, 0.12);

  --amber: #c68a3d;
  --amber-soft: #ddaf63;
  /* Dark enough to hold AA contrast on cream — the lighter ambers do not. */
  --amber-deep: #8c5a17;

  --ink: #2a2e27;
  --muted: #5b6555;
  --muted-2: #7a8274;
  --danger: #a34a38;

  --radius: 14px;
  --sidebar-w: 272px;
  --column: 760px;

  --serif: "Lora", Georgia, serif;
  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

::selection {
  background: var(--amber);
  color: #1a1a16;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgba(42, 46, 39, 0.15);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(42, 46, 39, 0.25);
}

/* Visible to a screen reader, invisible on screen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.app {
  display: flex;
  height: 100vh;
  height: 100dvh; /* Keeps the composer above the on-screen keyboard. */
  width: 100vw;
}

/* ---------- sidebar ---------- */

.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--bg-elevated);
  border-right: 1px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  /* Closed until the script decides otherwise, so a phone never flashes the
     drawer open on load. */
  margin-left: calc(var(--sidebar-w) * -1);
  transition: margin-left 0.25s ease;
}

.app.nav-open .sidebar {
  margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar {
    transition: none;
  }
}

.brand {
  display: flex;
  align-items: center;
  padding: 8px 6px 18px 2px;
}

.brand img {
  width: 100%;
  max-width: 192px;
  height: auto;
  display: block;
}

.new-chat {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 12px;
  background: var(--sage-dim);
  border: 1px solid rgba(95, 122, 99, 0.35);
  color: var(--ink);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.new-chat:hover {
  background: rgba(95, 122, 99, 0.15);
  border-color: var(--sage);
}

/* Drawn, but nothing behind it yet — see .nav-item.pending. */
.new-chat.pending {
  opacity: 0.5;
  cursor: default;
}
.new-chat.pending:hover {
  background: var(--sage-dim);
  border-color: rgba(95, 122, 99, 0.35);
}

.nav {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.nav-item:hover {
  background: rgba(42, 46, 39, 0.05);
  color: var(--ink);
}
.nav-item.active {
  background: var(--sage-dim);
  color: var(--ink);
}
.nav-item svg {
  opacity: 0.85;
  flex-shrink: 0;
}

/* Chat is a button — you are already there. Every other section is a real page
   at its own address, so it is a link. Both have to look identical in the
   list, which is all this rule is for. */
a.nav-item {
  text-decoration: none;
}

.nav-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted-2);
  padding: 0 10px;
  margin: 22px 0 8px 0;
}

.history-list {
  margin-top: 4px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* One conversation: its name, and a delete control that appears on hover. */
.history-row {
  display: flex;
  align-items: center;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.history-row:hover {
  background: rgba(42, 46, 39, 0.05);
}
.history-row.active {
  background: var(--sage-dim);
}

.history-item {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border: none;
  background: none;
  text-align: left;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease;
}
.history-row:hover .history-item,
.history-row.active .history-item {
  color: var(--ink);
}

/* Hidden until the row is hovered, so a list of conversations does not read as
   a row of delete buttons. Always present for keyboard and touch, where there
   is no hover to reveal it. */
.history-del {
  flex: none;
  width: 26px;
  height: 26px;
  margin-right: 4px;
  border: none;
  background: none;
  border-radius: 6px;
  color: var(--muted-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}
.history-row:hover .history-del,
.history-del:focus-visible {
  opacity: 1;
}
.history-del:hover {
  background: rgba(163, 74, 56, 0.1);
  color: var(--danger);
}
@media (hover: none) {
  /* No hover on a touchscreen — the control would never appear. */
  .history-del {
    opacity: 1;
  }
}

/* The placeholder shown while there is only one conversation to show. */
.history-empty {
  padding: 9px 10px;
  font-size: 13px;
  color: var(--muted-2);
  opacity: 0.75;
}

.sidebar-foot {
  border-top: 1px solid var(--panel-border);
  padding-top: 14px;
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted-2);
}

/* Which number is signed in. Shown rather than a bare "signed in", because on
   a shared computer the number is the part that matters. */
.account-who {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-btn {
  display: block;
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: 1px solid var(--panel-border);
  border-radius: 9px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  /* Comfortably tappable — this is pressed with a thumb on a phone. */
  min-height: 40px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.account-btn:hover {
  background: rgba(42, 46, 39, 0.05);
  border-color: var(--sage);
  color: var(--ink);
}

/* "What should I call you?" — asked once, in the sidebar.
   Sits between who is signed in and the sign-out button, quiet enough that it
   reads as an offer rather than a form standing in the way. */
.name-ask {
  margin: 0 0 10px 0;
  padding: 10px;
  background: var(--bg-elevated-2);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
}

.name-ask-label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink);
}

.name-ask-input {
  display: block;
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  /* 16px on the phone, or iOS zooms the whole page in on focus. */
  min-height: 38px;
}

.name-ask-input:focus {
  outline: 2px solid var(--sage);
  outline-offset: 1px;
}

.name-ask-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.name-ask-row .account-btn {
  margin: 0;
  flex: 1;
}

/* Refusing is a plain word, not a cross in a corner. Somebody sorting out
   care for a parent should be able to say no without hunting for how. */
.name-ask-skip {
  padding: 6px 4px;
  background: none;
  border: none;
  color: var(--muted-2);
  font-family: var(--sans);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  min-height: 38px;
}

.name-ask-skip:hover {
  color: var(--ink);
}

.name-ask-error {
  margin: 8px 0 0 0;
  font-size: 12px;
  color: var(--danger);
}

@media (max-width: 640px) {
  /* The drawer is touched, not clicked, and iOS zooms any field under 16px. */
  .name-ask-input {
    font-size: 16px;
  }
}

.account-note {
  margin: 12px 0 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted-2);
}

/* ---------- main column ---------- */

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}

.icon-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.icon-btn:hover {
  background: rgba(42, 46, 39, 0.06);
  color: var(--ink);
}

.who {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.who b {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.who span {
  font-size: 12px;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-scroll {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- empty state ---------- */

.empty-state {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
}
.empty-state[hidden] {
  display: none;
}

/* ABOVE the greeting, not behind it.
 *
 * Behind the text the amber sun sits over the words and drops their contrast
 * — which is the one thing this palette exists to protect. Anchoring the
 * motif's bottom edge to the top of the greeting keeps the signature and
 * leaves the words on clean cream. */
.sunrise-mark {
  position: absolute;
  top: 132px;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 520px;
  height: 260px;
  max-width: 100%;
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}

.empty-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 640px;
  padding-top: 132px;
}

.empty-greeting,
.empty-sub,
.prompt-chips {
  position: relative;
  z-index: 1;
}

.empty-greeting {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 8px 0;
  letter-spacing: 0.2px;
  line-height: 1.3;
  /* Evens the two lines out instead of stranding a single word on its own. */
  text-wrap: balance;
}
.empty-greeting em {
  color: var(--amber-deep);
  font-style: normal;
}

.empty-sub {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 30px 0;
}

.prompt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.chip {
  padding: 13px 17px;
  background: var(--bg-elevated-2);
  border: 1.5px solid var(--panel-border);
  border-radius: 11px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  max-width: 260px;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.1s ease;
}
.chip:hover {
  border-color: var(--sage);
  background: rgba(140, 168, 143, 0.08);
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
  .chip:hover {
    transform: none;
  }
}

/* ---------- the conversation ---------- */

.thread {
  width: 100%;
  max-width: var(--column);
  padding: 28px 24px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.msg {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
}

.msg.you {
  flex-direction: row-reverse;
}
.msg.you .msg-avatar {
  background: var(--sage-dim);
  color: var(--sage);
  border: 1px solid rgba(95, 122, 99, 0.35);
}
.msg.them .msg-avatar {
  background: linear-gradient(135deg, var(--amber), var(--sage-deep));
  color: #16190f;
}

.msg-body {
  flex: 1;
  min-width: 0;
}
.msg.you .msg-body {
  display: flex;
  justify-content: flex-end;
}

.msg-bubble {
  font-size: 15.5px;
  line-height: 1.7;
  /* Tokens arrive as plain text with real line breaks in them, so the bubble
     preserves whitespace WHILE STREAMING. `.md` turns that off once the
     finished reply is rendered into real block elements. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- a rendered reply ---------- */

.msg-bubble.md {
  white-space: normal;
}

.msg-bubble.md > :first-child {
  margin-top: 0;
}
.msg-bubble.md > :last-child {
  margin-bottom: 0;
}

.md-p {
  margin: 0 0 12px 0;
}

/* Headings sit INSIDE a conversation, so they step down from the page rather
   than competing with it — h3 is the largest a reply can produce. */
.md-h {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  margin: 18px 0 8px 0;
}
h3.md-h {
  font-size: 17.5px;
}
h4.md-h {
  font-size: 16px;
}
h5.md-h,
h6.md-h {
  font-size: 15px;
  color: var(--muted);
}

.md-list {
  margin: 0 0 12px 0;
  padding-left: 22px;
}
.md-list li {
  margin-bottom: 6px;
}
.md-list li:last-child {
  margin-bottom: 0;
}

.msg-bubble strong {
  color: var(--amber-deep);
  font-weight: 600;
}
.msg-bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--bg-elevated-2);
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  padding: 1px 5px;
}

/* A wide table scrolls inside the reply rather than pushing the page sideways
   — which on a phone would break the whole layout, not just the table. */
.md-table-wrap {
  overflow-x: auto;
  margin: 0 0 14px 0;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: var(--bg-elevated);
}
.md-table {
  border-collapse: collapse;
  width: 100%;
  /* Below this the columns start breaking words mid-syllable rather than
     admitting they do not fit. The wrapper scrolls instead, which keeps every
     cell readable on a phone. */
  min-width: 460px;
  font-family: var(--sans);
  font-size: 14px;
}
.md-table th,
.md-table td {
  text-align: left;
  padding: 9px 13px;
  border-bottom: 1px solid var(--panel-border);
  vertical-align: top;
  /* The bubble breaks anywhere so long URLs cannot overflow; inside a table
     that turns names into "Nighting / ales". Cells wrap at words only. */
  overflow-wrap: normal;
  word-break: normal;
}
.md-table th {
  background: var(--bg-elevated-2);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.md-table tbody tr:last-child td {
  border-bottom: none;
}

.msg.you .msg-bubble {
  background: var(--bg-elevated-2);
  border: 1px solid var(--panel-border);
  padding: 11px 15px;
  border-radius: 14px 14px 3px 14px;
  font-family: var(--sans);
  color: var(--ink);
  max-width: 480px;
}

/* Ashwin's own voice — serif, unboxed, so it reads as writing rather than as
   a message from a system. */
.msg.them .msg-bubble {
  font-family: var(--serif);
  color: var(--ink);
  padding-top: 3px;
}

.msg-bubble a {
  color: var(--amber-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  /* A phone number must never break across lines. `overflow-wrap: anywhere` on
     the bubble was splitting "044 4344 4444" into three stacked fragments in a
     narrow table cell, which reads as broken rather than as a number. The
     table scrolls sideways instead. */
  white-space: nowrap;
}

/* A crisis reply. Marked so it cannot be mistaken for an ordinary answer, and
   never followed by a sign-in prompt. */
.msg.crisis .msg-bubble {
  border-left: 3px solid var(--danger);
  padding-left: 14px;
  background: rgba(163, 74, 56, 0.05);
  border-radius: 0 10px 10px 0;
}

/* The cursor that trails a reply while it is still being written. */
.caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--sage);
  animation: caret 1s steps(2, start) infinite;
}
@keyframes caret {
  to {
    visibility: hidden;
  }
}

/* ---------- progress while working ---------- */

.working {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  color: var(--muted);
  font-family: var(--sans);
}
.working .line {
  display: flex;
  align-items: center;
  gap: 9px;
}
.working .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage);
  opacity: 0.45;
  flex-shrink: 0;
  animation: blink 1.2s infinite ease-in-out;
}
.working .dot.done {
  animation: none;
  opacity: 0.85;
  background: var(--amber);
}
@keyframes blink {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: scale(0.85);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- signing in ---------- */

.gate {
  background: var(--bg-elevated);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gate h2 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.gate p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.gate .or {
  text-align: center;
  font-size: 12px;
  color: var(--muted-2);
  margin: 2px 0;
}
.gate input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px; /* 16px stops iOS zooming the page on focus. */
  outline: none;
}
.gate input:focus {
  border-color: var(--sage);
}
.gate .code-input {
  letter-spacing: 8px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
}
.gate .err {
  color: var(--danger);
  font-size: 13px;
}

.btn {
  padding: 12px 16px;
  border-radius: 10px;
  border: none;
  background: var(--amber);
  color: #1a1a16;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition:
    background 0.15s ease,
    opacity 0.15s ease;
}
.btn:hover {
  background: var(--amber-soft);
}
.btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.btn.quiet {
  background: none;
  border: 1px solid var(--panel-border);
  color: var(--muted);
  font-weight: 500;
}
.btn.quiet:hover {
  background: rgba(42, 46, 39, 0.05);
  color: var(--ink);
}
.btn.google {
  background: var(--bg);
  border: 1px solid var(--panel-border);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn.google:hover {
  background: var(--bg-elevated-2);
}

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

.composer {
  width: 100%;
  max-width: var(--column);
  margin: 0 auto;
  padding: 14px 24px 20px 24px;
  flex-shrink: 0;
}

.counter {
  text-align: center;
  font-size: 12px;
  color: var(--muted-2);
  margin: 0 0 8px 0;
}
.counter[hidden] {
  display: none;
}

.field {
  background: var(--bg-elevated-2);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 8px 8px 8px 18px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  transition: border-color 0.15s ease;
}
.field:focus-within {
  border-color: var(--sage);
}

.field textarea {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  resize: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px; /* 16px stops iOS zooming the page on focus. */
  line-height: 1.5;
  max-height: 160px;
  padding: 9px 0;
}
.field textarea::placeholder {
  color: var(--muted-2);
}

#send {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--amber);
  color: #1a1a16;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.15s ease,
    opacity 0.15s ease;
}
#send:hover {
  background: var(--amber-soft);
}
#send:disabled {
  opacity: 0.35;
  cursor: default;
}

.fineprint {
  text-align: center;
  font-size: 11px;
  color: var(--muted-2);
  margin: 10px 0 0 0;
  line-height: 1.5;
}
.fineprint a {
  color: var(--muted);
}

/* The legal pages, one step quieter than the line above them — that line
   carries the emergency number, and this row must not compete with it. Wraps
   onto as many lines as it needs on a phone rather than scrolling sideways. */
.legal {
  text-align: center;
  font-size: 10.5px;
  color: var(--muted-2);
  margin: 6px 0 0 0;
  line-height: 1.8;
}
.legal a {
  color: var(--muted-2);
  text-decoration: none;
}
.legal a:hover {
  color: var(--muted);
  text-decoration: underline;
}

/* ---------- the drawer, on a phone ---------- */

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 15, 0.4);
  z-index: 19;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.sidebar-backdrop[hidden] {
  display: none;
}
.app.nav-open .sidebar-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Above 760px the sidebar is part of the layout, so the dimming behind it
   would be dimming nothing. */
@media (min-width: 761px) {
  .sidebar-backdrop {
    display: none;
  }
}

@media (max-width: 760px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    height: 100vh;
    height: 100dvh;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.18);
  }
  .empty-greeting {
    font-size: 26px;
  }
  /* The ornament shrinks on a phone rather than eating the screen. */
  .empty-inner {
    padding-top: 88px;
  }
  .sunrise-mark {
    top: 88px;
    width: 320px;
    height: 160px;
  }
  .thread,
  .composer {
    padding-left: 16px;
    padding-right: 16px;
  }
  .chip {
    max-width: 100%;
  }
}