/* Jarwiz web chat. Dark is the only theme; edges are 1px hairlines, no shadows. */

/* IBM Plex Sans and Mono, latin and latin-ext. The files are the build's
   (scripts/build.mjs, VENDOR): it copies them from their pinned packages and
   points each url() below at the hashed copy it writes beside the stylesheet. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("ibm-plex-sans-latin-400-normal-3b646991d300.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("ibm-plex-sans-latin-ext-400-normal-c93d2a12aaa2.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("ibm-plex-sans-latin-500-normal-0717336fb31f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("ibm-plex-sans-latin-ext-500-normal-2846035d8510.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ibm-plex-sans-latin-600-normal-8960851d691c.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("ibm-plex-sans-latin-ext-600-normal-b25dfd4f979e.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("ibm-plex-mono-latin-400-normal-08949f728dc5.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("ibm-plex-mono-latin-ext-400-normal-6bc0f226a5b7.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("ibm-plex-mono-latin-500-normal-01d285447409.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("ibm-plex-mono-latin-ext-500-normal-6bb06407c975.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  /* Grounds, darkest first: the sidebar and quiet rows, the page, cards and
     the composer, the person's own message and quiet buttons, what is pressed
     or disabled. */
  --sunken: #171a1c;
  --bg: #131517;
  --surface: #1b1e21;
  --raised: #23272b;
  --pressed: #2c3136;
  /* Edges: between regions, around blocks, around controls. */
  --hairline: #2a2f34;
  --edge-soft: #353b41;
  --edge: #4a5158;
  --text: #e7e9eb;
  --text-2: #c9ced3;
  --muted: #a4abb1;
  --faint: #8b9299;
  --disabled: #7b838a;
  /* Accent: the one primary action, what is live, what is unread. */
  --accent: #83c9ab;
  --accent-hover: #9ad6bc;
  --accent-contrast: #0e1a15;
  --accent-soft: #1e3a2f;
  --warning: #f1c46e;
  --warning-soft: #372c14;
  --warning-edge: #5a4819;
  --danger: #f2948a;
  --danger-text: #f6c4be;
  --danger-soft: #3c201d;
  --danger-edge: #5c2d29;
  --danger-line: #7a4a45;
  --danger-contrast: #2b1210;
  --info: #c4dcf3;
  --info-soft: #1d2b39;
  --info-edge: #2c4258;
  --focus: #7cb2ff;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sidebar-width: 280px;
  --content-width: 760px;
  /* Every control is at least 44 by 44. A row's own buttons (Stop, Renew,
     Delete, New, the filter, a sidebar row) may be lower, with a mouse only. */
  --row-control: 44px;
}

@media (hover: hover) and (pointer: fine) {
  :root {
    --row-control: 36px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

/* Signed in, only the panes scroll: the page under them neither scrolls nor
   rubber-bands. The auth screens and the privacy page still scroll as a page. */
html:has(.shell),
html:has(.shell) body {
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app,
.screen-host {
  height: 100%;
}

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

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

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

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.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;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 10px;
  color: var(--text);
}

.skip-link:focus {
  top: 12px;
}

.noscript {
  padding: 24px;
  text-align: center;
}

.muted {
  color: var(--muted);
}

.icon {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-more {
  stroke-width: 3.4;
}

.icon-send {
  stroke-width: 2.2;
}

/* ----------------------------------------------------------------- buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--raised);
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}

.button:hover:not(:disabled) {
  background: var(--pressed);
}

.button-primary {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

.button-primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.button-quiet {
  border-color: var(--edge-soft);
  background: none;
  color: var(--text-2);
}

.button-quiet:hover:not(:disabled) {
  background: var(--raised);
}

.button-danger {
  border-color: var(--danger-line);
  background: none;
  color: var(--danger);
}

.button-danger:hover:not(:disabled) {
  background: var(--danger-soft);
}

.button:disabled {
  border-color: transparent;
  background: var(--pressed);
  color: var(--disabled);
  cursor: not-allowed;
}

/* A row's own button: Stop, Renew, Delete, Send again, Try again. */
.button-small {
  min-height: var(--row-control);
  padding: 0 14px;
  font-size: 14px;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  cursor: pointer;
}

.icon-button:hover:not(:disabled) {
  background: var(--raised);
}

.badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--pressed);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-running {
  background: var(--accent-soft);
  color: var(--accent);
}

.badge-running::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge-warning,
.badge-dev {
  background: var(--warning-soft);
  color: var(--warning);
}

.spinner {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* A table in a box that scrolls sideways when the screen is narrower than it:
   a reply's Markdown table (ui/chat_view.js) and the watches table. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table-scroll th {
  padding: 9px 14px;
  background: var(--sunken);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: start;
  text-transform: uppercase;
  white-space: nowrap;
}

.table-scroll td {
  padding: 11px 14px;
  border-top: 1px solid var(--hairline);
  text-align: start;
  vertical-align: top;
}

/* ------------------------------------------------------------------- brand */

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  display: block;
  flex: none;
  width: 26px;
  height: 26px;
}

.brand-mark-large {
  width: 56px;
  height: 56px;
}

.brand-name {
  font-size: 16px;
  font-weight: 600;
}

.language-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.language-label {
  display: inline-grid;
  place-items: center;
}

.language-select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--raised);
  color: var(--text);
  cursor: pointer;
}

/* ------------------------------------------------------------- auth screens */

.auth-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  padding: 16px;
  padding-bottom: 48px;
}

.auth-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 960px;
  padding: 4px 0 24px;
}

.auth-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  max-width: 460px;
  margin-top: 6vh;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.auth-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.auth-text {
  margin: 0;
  color: var(--muted);
}

.auth-strong {
  color: var(--text);
  font-weight: 600;
}

.auth-meta {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.auth-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}

.auth-icon-warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.auth-loading {
  display: flex;
  align-items: center;
}

.gis-button {
  min-height: 44px;
  margin-top: 6px;
}

.notice {
  margin: 0;
  padding: 10px 12px;
  width: 100%;
  border: 1px solid var(--info-edge);
  border-radius: 10px;
  background: var(--info-soft);
  color: var(--info);
  font-size: 14px;
}

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

/* Beside each other: the conversation list with the cards and New under it, and
   the screen. On a phone (below) they are one screen at a time. */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  padding-top: env(safe-area-inset-top);
}

.sidebar {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--sunken);
  border-right: 1px solid var(--hairline);
}

.main {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  min-width: 0;
  min-height: 0;
}

.popover-wrap {
  position: relative;
}

.popover {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 220px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--edge-soft);
  border-radius: 12px;
}

/* The account's settings, under the avatar in the sidebar's head; a sheet on a phone. */
.account-panel {
  left: 0;
  right: auto;
  width: 320px;
  padding: 12px;
}

.avatar-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}

.avatar-button:hover .avatar,
.avatar-button[aria-expanded="true"] .avatar {
  box-shadow: 0 0 0 2px var(--accent);
}

.avatar .icon {
  width: 18px;
  height: 18px;
}

.account-who {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 12px;
}

.account-who .avatar {
  width: 40px;
  height: 40px;
  font-size: 16px;
}

.account-address {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-group {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
}

.settings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  width: 100%;
  min-height: 52px;
  padding: 6px 10px 6px 12px;
  border: 0;
  border-top: 1px solid var(--hairline);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: start;
}

.settings-group > .settings-row:first-child {
  border-top: 0;
}

button.settings-row {
  cursor: pointer;
}

button.settings-row:hover,
button.settings-row[aria-current="page"] {
  background: var(--surface);
}

.settings-row > .icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.settings-row > .icon-chevron {
  width: 16px;
  height: 16px;
  color: var(--faint);
}

.settings-label {
  flex: 1;
  font-size: 14px;
}

.account-panel .language-picker {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
}

.account-panel .language-select {
  flex: 1;
  min-width: 0;
}

.ask-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ask-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--row-control);
  padding: 0 12px;
  border: 1px solid var(--edge-soft);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.ask-pill .icon {
  display: none;
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

.ask-pill[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: var(--accent);
}

.ask-pill[aria-pressed="true"] .icon {
  display: block;
}

/* A phone's: what the account's sheet leaves dimmed. */
.sheet-backdrop {
  display: none;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 8px;
  cursor: pointer;
}

.checkbox {
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  accent-color: var(--accent);
}

.modal-body .check-row {
  padding: 4px 0;
}

.menu-item {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: start;
  cursor: pointer;
}

.menu-item:hover {
  background: var(--raised);
}

.menu-item-danger {
  color: var(--danger);
}

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

.sidebar-head {
  display: flex;
  align-items: center;
  flex: none;
  gap: 10px;
  height: 56px;
  padding: 0 12px 0 16px;
}

.sidebar-head .brand {
  flex: 1;
}

/* The list's own heading is a phone's, where the list is a screen. */
.list-title {
  display: none;
  flex: 1;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.sidebar-dock {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid var(--hairline);
}

.shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.shelf-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.shelf-card:hover {
  background: var(--raised);
}

.shelf-card[aria-current="page"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.shelf-name {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

.shelf-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shelf-name .icon {
  flex: none;
  width: 16px;
  height: 16px;
}

.shelf-count {
  font-size: 14px;
  font-weight: 600;
}

.shelf-count:empty {
  display: none;
}

.new-button {
  min-height: var(--row-control);
  padding: 0 14px;
}

.new-button .icon {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: none;
  gap: 4px;
  margin: 4px 12px 10px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

.segmented .segment {
  min-height: var(--row-control);
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.segmented .segment[aria-pressed="true"] {
  background: var(--pressed);
  border-color: var(--edge);
  color: var(--text);
  font-weight: 600;
}

.list-status,
.list-notice {
  flex: none;
  padding: 0 16px;
  font-size: 13px;
}

.list-status p {
  margin: 0 0 8px;
}

.list-status .button {
  margin-bottom: 8px;
}

.list-notice {
  margin: 0 0 8px;
  color: var(--accent);
}

.list-notice-error {
  color: var(--danger);
}

.conversation-list {
  flex: 1;
  margin: 0;
  padding: 0 8px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

/* A row: a green layer (archive) and a red one (delete) under a surface that a
   touch drags sideways. The surface is opaque so a layer shows only where the
   surface has moved off it. */
.conversation-row {
  position: relative;
  margin: 0 0 2px;
  overflow: hidden;
  border-radius: 8px;
  /* Up and down stay the browser's scroll; sideways is the swipe. */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.conversation-row.is-collapsing {
  margin: 0;
  transition: height 180ms ease, margin 180ms ease;
}

.row-surface {
  --row-bg: var(--sunken);
  position: relative;
  display: flex;
  align-items: center;
  background: var(--row-bg);
  border: 1px solid transparent;
  border-radius: inherit;
  transition: transform 180ms ease;
}

.conversation-row[data-dragging] .row-surface {
  transition: none;
}

@media (hover: hover) {
  .conversation-row:hover .row-surface {
    --row-bg: var(--surface);
  }
}

.conversation-row.is-selected .row-surface {
  --row-bg: var(--raised);
  border-color: var(--edge-soft);
}

.conversation-item {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  padding: 6px 8px;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

/* Where a watch's unread update shows its dot; empty otherwise, so titles line up. */
.conversation-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.conversation-row.is-unread .conversation-dot {
  background: var(--accent);
}

.conversation-text {
  flex: 1;
  min-width: 0;
}

.conversation-title,
.conversation-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.conversation-row.is-selected .conversation-title,
.conversation-row.is-unread .conversation-title {
  font-weight: 600;
}

/* The row's second line: its state when it has one, the start of its last message otherwise. */
.conversation-line {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.conversation-line .icon,
.conversation-line .spinner {
  width: 12px;
  height: 12px;
  margin: 0 6px 0 0;
  vertical-align: -1px;
}

.conversation-line .icon {
  stroke-width: 2.2;
}

.line-running,
.line-unread .icon {
  color: var(--accent);
}

.line-unread {
  color: var(--text-2);
}

.line-warning {
  color: var(--warning);
}

.line-danger {
  color: var(--danger);
}

.conversation-time {
  flex: none;
  color: var(--faint);
  font: 11px/1.3 var(--mono);
}

.conversation-row.is-unread .conversation-time {
  color: var(--accent);
}

.conversation-item .icon-chevron {
  display: none;
}

.row-actions {
  display: flex;
  flex: none;
  gap: 2px;
  padding-inline-end: 4px;
}

.row-action {
  width: var(--row-control);
  height: var(--row-control);
  color: var(--muted);
}

.row-action .icon {
  width: 18px;
  height: 18px;
}

.row-action:hover:not(:disabled) {
  background: var(--pressed);
  color: var(--text);
}

.row-action-danger:hover:not(:disabled) {
  background: var(--danger-soft);
  color: var(--danger);
}

.row-action:disabled {
  color: var(--disabled);
  cursor: default;
}

/* With a mouse a row shows its time until it is pointed at or its buttons hold
   the focus; the buttons then take the time's place. */
@media (hover: hover) {
  .row-actions {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    align-items: center;
    padding-inline-start: 4px;
    background: var(--row-bg);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
  }

  .conversation-row:hover .row-actions,
  .row-actions:focus-within {
    opacity: 1;
    pointer-events: auto;
  }
}

.row-layer {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  font-weight: 600;
}

.row-layer-archive {
  justify-content: flex-end;
  background: var(--accent);
  color: var(--accent-contrast);
}

.row-layer-delete {
  justify-content: flex-start;
  background: var(--danger);
  color: var(--danger-contrast);
}

.conversation-row[data-swipe="left"] .row-layer-archive,
.conversation-row[data-swipe="right"] .row-layer-delete {
  display: flex;
}

.row-layer-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-layer-spinner,
.conversation-row[data-busy] .row-layer .icon {
  display: none;
}

.conversation-row[data-busy] .row-layer-spinner {
  display: inline-block;
  margin: 0;
}

/* -------------------------------------------------------------------- chat */

.chat,
.memories {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.chat-header {
  display: flex;
  align-items: center;
  flex: none;
  gap: 12px;
  min-height: 56px;
  padding: 0 12px 0 24px;
  border-bottom: 1px solid var(--hairline);
}

/* A phone's: the way to the list, and a new conversation (the sidebar has both here). */
.menu-button,
.chat-new,
.back-button {
  display: none;
}

.chat-heading {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.chat-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.chat-title:focus-visible {
  outline-offset: 4px;
}

/* Under the title on a phone, beside it here: the conversation's state when it
   has one, when it last changed otherwise. */
.chat-sub {
  display: flex;
  flex: none;
  color: var(--muted);
  font: 12px/1.3 var(--mono);
}

.chat-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.state-running,
.state-unread {
  color: var(--accent);
}

.state-running::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.state-warning,
.chat-meta-offline {
  color: var(--warning);
}

.state-danger {
  color: var(--danger);
}

.actions-menu {
  min-width: 200px;
}

.banners,
.flash {
  width: 100%;
  max-width: calc(var(--content-width) + 48px);
  margin: 0 auto;
  padding: 0 24px;
}

.banners {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
}

.banners:empty {
  display: none;
}

.banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--info-edge);
  border-radius: 10px;
  background: var(--info-soft);
  color: var(--info);
  font-size: 14px;
  line-height: 1.35;
}

.banner .icon {
  width: 18px;
  height: 18px;
}

.banner-text {
  flex: 1 1 240px;
  margin: 0;
}

.banner-blocked,
.banner-recovering,
.banner-offline {
  background: var(--warning-soft);
  border-color: var(--warning-edge);
  color: var(--warning);
}

.banner-muted {
  background: var(--surface);
  border-color: var(--hairline);
  color: var(--muted);
}

.flash {
  flex: none;
  margin: 8px auto 0;
  color: var(--accent);
  font-size: 13px;
}

.flash-error {
  color: var(--danger);
}

.memory-body .flash {
  margin: 0;
  padding: 0;
}

.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.messages:focus-visible {
  outline-offset: -2px;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: 100%;
  max-width: calc(var(--content-width) + 48px);
  margin: 0 auto;
  padding: 28px 24px 20px;
  list-style: none;
}

/* The person's own message: a block on the right, its photos above it and its time under it. */
.message-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.message-text {
  max-width: min(520px, 84%);
  margin: 0;
  padding: 10px 14px;
  background: var(--raised);
  border: 1px solid var(--edge-soft);
  border-radius: 12px 12px 4px 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message-time {
  color: var(--faint);
  font: 11px/1.3 var(--mono);
}

/* A reply is flat: a small header, then its text on the page itself. */
.reply {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.reply-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reply-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.reply-head-failed .reply-dot {
  background: var(--danger);
}

.message-author {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.segments {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.segments:empty {
  display: none;
}

.live-status:empty {
  display: none;
}

/* What a running turn is doing now: one row, the step and how long it has run. */
.progress-card {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 520px;
  min-height: 48px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

.progress-card .spinner {
  width: 18px;
  height: 18px;
  margin: 0;
  border-width: 2.4px;
  color: var(--accent);
}

.progress-step {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.progress-age {
  flex: none;
  color: var(--muted);
  font: 13px/1.3 var(--mono);
}

.live-problem {
  margin: 8px 0 0;
  color: var(--warning);
  font-size: 13px;
}

.message-status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
}

.message-status-error {
  color: var(--danger);
}

.note {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.note-text {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.note-error > .note-text {
  padding: 12px;
  background: var(--danger-soft);
  border: 1px solid var(--danger-edge);
  border-radius: 10px;
  color: var(--danger-text);
  font-size: 14px;
  line-height: 1.45;
}

/* A message that was not sent: where it would have been, dashed, with Send again. */
.note-unsent {
  align-items: flex-end;
  gap: 6px;
}

.note-quote {
  max-width: min(520px, 84%);
  margin: 0;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px dashed var(--danger-line);
  border-radius: 12px 12px 4px 12px;
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.note-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.note-unsent .note-text {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--danger);
}

.note-unsent .note-text .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 12vh auto 0;
  max-width: 420px;
  text-align: center;
}

.empty-title {
  margin: 10px 0 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.empty-state p {
  margin: 0;
}

/* Where a reply's facts came from: one chip a site, each a link to the page read. */
.sources {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.sources-label {
  margin-right: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.source-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--edge-soft);
  border-radius: 6px;
  color: var(--text-2);
  font-size: 12px;
  text-decoration: none;
}

.source-chip:hover {
  background: var(--raised);
  color: var(--text);
}

/* Drawn 28 high, touched 44 high. */
.source-chip::after {
  content: '';
  position: absolute;
  inset: -8px 0;
}

/* ---------------------------------------------------------------- markdown */

.markdown {
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.markdown > :first-child {
  margin-top: 0;
}

.markdown > :last-child {
  margin-bottom: 0;
}

.markdown p,
.markdown ul,
.markdown ol,
.markdown blockquote,
.markdown pre,
.markdown .table-scroll {
  margin: 0 0 14px;
}

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4 {
  margin: 20px 0 8px;
  font-weight: 600;
  line-height: 1.3;
}

.markdown h1 {
  font-size: 20px;
}

.markdown h2 {
  font-size: 17px;
}

.markdown h3,
.markdown h4 {
  font-size: 15px;
}

.markdown strong {
  font-weight: 600;
}

.markdown ul,
.markdown ol {
  padding-inline-start: 20px;
}

.markdown li + li {
  margin-top: 4px;
}

.markdown code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--raised);
  font: 0.9em/1.4 var(--mono);
}

.markdown pre {
  padding: 12px 14px;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
}

.markdown pre code {
  padding: 0;
  background: none;
}

.markdown blockquote {
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--edge);
  color: var(--muted);
}

/* As wide as its box at least, and as wide as its cells' text at most 320
   apiece: a table wider than the screen scrolls inside its box. */
.markdown table {
  width: max-content;
  min-width: 100%;
}

.markdown th,
.markdown td {
  max-width: 320px;
}

.markdown td {
  color: var(--text-2);
}

.markdown td:first-child {
  color: var(--text);
  font-weight: 500;
}

.markdown td a {
  color: inherit;
  text-decoration-color: var(--edge);
  text-underline-offset: 3px;
}

.markdown hr {
  border: 0;
  border-top: 1px solid var(--hairline);
}

.md-image-omitted {
  color: var(--muted);
  font-style: italic;
}

/* ------------------------------------------------------------------ images */

.images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.image-card {
  margin: 0;
}

.image-frame {
  display: grid;
  place-items: center;
  min-height: 200px;
  overflow: hidden;
  border: 1px solid var(--edge-soft);
  border-radius: 10px;
  background: var(--raised);
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

/* The photos the person sent, over their message: small squares on the right. */
.images-sent {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.images-sent .image-card,
.images-sent .image-frame {
  width: 132px;
  height: 132px;
  min-height: 0;
}

.images-sent .image-open,
.images-sent .image {
  height: 100%;
  object-fit: cover;
}

.images-sent .image-placeholder {
  padding: 8px;
}

.images-sent .image-id {
  display: none;
}

/* The card's image is a button that opens the viewer. */
.image-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.image-placeholder {
  gap: 4px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
  align-content: center;
}

.image-placeholder .icon {
  width: 36px;
  height: 36px;
}

.image-placeholder-text,
.image-id,
.image-loading {
  margin: 0;
  font-size: 13px;
}

.image-id {
  font: 11px/1.3 var(--mono);
  overflow-wrap: anywhere;
}

.image-attempts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.image-attempt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--edge-soft);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 14px;
}

.image-attempt .icon {
  width: 18px;
  height: 18px;
}

/* The documents a message carries (docs/documentplan.md §2.7): one chip each, its
   name and page count; a tap opens the original. Over the message, on the right,
   as the photos are. */
.documents {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 100%;
}

.doc-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(320px, 100%);
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--edge-soft);
  border-radius: 10px;
  background: var(--raised);
  color: var(--text-2);
  font-size: 13px;
  text-align: left;
}

.doc-chip .icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.doc-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-chip-pages {
  flex: none;
  color: var(--muted);
  font-size: 12px;
}

.doc-chip-open {
  cursor: pointer;
}

.doc-chip-open:hover {
  background: var(--pressed);
  color: var(--text);
}

/* Drawn 36 high, touched 44 high. */
.doc-chip-open::after {
  content: '';
  position: absolute;
  inset: -4px 0;
}

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

.composer {
  flex: none;
  width: 100%;
  max-width: calc(var(--content-width) + 48px);
  margin: 0 auto;
  padding: 0 24px max(18px, env(safe-area-inset-bottom));
}

.composer-row {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--edge-soft);
  border-radius: 14px;
}

.composer-row:has(.composer-input:focus-visible) {
  border-color: var(--focus);
}

/* One line tall when empty; it grows with what is written (ui/composer.js, autoGrow). */
.composer-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  max-height: 40vh;
  padding: 10px 4px;
  border: 0;
  background: none;
  resize: none;
  line-height: 24px;
}

.composer-input::placeholder {
  overflow: hidden;
  color: var(--faint);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-input:focus-visible {
  outline: none;
}

.composer-input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.composer-row .icon-button,
.composer-row .button {
  flex: none;
  border-radius: 10px;
}

.attach-button {
  color: var(--muted);
}

.attach-button:disabled {
  color: #596067;
  cursor: not-allowed;
}

.send-button {
  width: 44px;
  padding: 0;
}

.icon-stop {
  width: 14px;
  height: 14px;
  fill: var(--danger);
  stroke: var(--danger);
  stroke-width: 3;
}

.composer-hint {
  margin: 6px 8px 0;
  color: var(--faint);
  font-size: 12px;
}

.composer-error {
  margin: 6px 8px 0;
  color: var(--danger);
  font-size: 13px;
}

.composer-error:empty {
  display: none;
}

/* Images picked to send: a strip of thumbnails above the message box, each with
   its status and a remove button. */
.attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
  padding: 10px 0 0;
  list-style: none;
}

.attachment {
  position: relative;
  display: grid;
  gap: 4px;
  width: 96px;
}

.attachment-thumb,
.attachment .image-card,
.attachment .image-frame {
  width: 96px;
  height: 96px;
  min-height: 0;
}

.attachment-thumb {
  display: grid;
  place-items: center;
  object-fit: cover;
  border: 1px solid var(--edge-soft);
  border-radius: 10px;
  background: var(--raised);
}

.attachment .image {
  width: 96px;
  height: 96px;
  object-fit: cover;
}

.attachment .image-id {
  display: none;
}

.attachment-status {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.attachment-failed .attachment-status {
  color: var(--danger);
}

.attachment-preparing .attachment-thumb,
.attachment-uploading .attachment-thumb,
.attachment-uploading .doc-chip {
  opacity: 0.6;
}

/* A document is a chip as wide as its name, not a 96px thumbnail. */
.attachment-document {
  width: auto;
  max-width: 100%;
}

/* Its page count stays clear of the remove button over the chip's top right corner. */
.attachment-document .doc-chip {
  padding-right: 30px;
}

/* Drawn as a 26px disc on the thumbnail's corner, touched 44 wide. */
.attachment-remove {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 0;
}

.attachment-remove:hover:not(:disabled) {
  background: none;
}

.attachment-remove::before {
  content: '';
  position: absolute;
  inset: 9px;
  z-index: -1;
  border: 1px solid var(--edge);
  border-radius: 50%;
  background: var(--raised);
}

.attachment-remove .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

.attachment-retry {
  justify-self: start;
}

/* ------------------------------------------------- memories and watches */

.memories {
  --screen-width: 760px;
}

.watches {
  --screen-width: 1040px;
}

.screen-header {
  flex: none;
  width: 100%;
  max-width: calc(var(--screen-width) + 64px);
  margin: 0 auto;
  padding: 32px 32px 0;
}

.screen-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.screen-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

/* The one place a count is said: "3 running", "5 kept · 1 pending". */
.screen-count {
  color: var(--muted);
  font: 13px/1.3 var(--mono);
}

.screen-intro {
  max-width: 620px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.memory-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: calc(var(--screen-width) + 64px);
  min-height: 0;
  margin: 0 auto;
  padding: 20px 32px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.memory-body > * {
  flex: none;
}

.memory-body > p {
  margin: 0;
}

.memory-body .muted {
  font-size: 14px;
}

.notice-quiet {
  padding: 12px 14px;
  border: 1px solid var(--info-edge);
  border-radius: 10px;
  background: var(--info-soft);
  color: var(--info);
  font-size: 13px;
  line-height: 1.45;
}

.memory-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  list-style: none;
}

.memory-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 8px 6px 16px;
}

.memory-item + .memory-item {
  border-top: 1px solid var(--hairline);
}

.memory-fact {
  flex: 1;
  min-width: 0;
  margin: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Delete reads as a word here and is a bin on a phone. */
.memory-delete .icon {
  display: none;
}

.empty-note {
  padding: 24px 0;
}

/* The library: a memory's rows, each a document to open, what it is, and its
   state while it is not ready; Add stands over them, as a task's does. */
.library-add,
.shared-add {
  align-self: flex-start;
}

.library-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 4px 0;
}

.library-name {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
}

.library-name .icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.library-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-open {
  cursor: pointer;
}

.library-open:hover .library-label {
  text-decoration: underline;
}

/* Drawn 28 high, touched 44 high. */
.library-open::after {
  content: '';
  position: absolute;
  inset: -8px 0;
}

.library-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding-left: 26px;
  color: var(--muted);
  font-size: 12px;
}

.library-item.is-uploading {
  background: var(--sunken);
}

.library-item.is-uploading .library-name {
  color: var(--text-2);
}

/* Shared pictures: a card for each batch, with who added it and when over its
   pictures, which are small squares as the photos a person sent are
   (.images-sent). */
.shared-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shared-batch {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.shared-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.shared-who {
  flex: 1;
  min-width: 0;
}

.shared-title {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.shared-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.shared-pictures {
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The remove button (.attachment-remove) sits on the picture's corner. */
.shared-picture {
  position: relative;
}

/* The title field of the Add dialog stands apart from the picker above it. */
.shared-field {
  margin-top: 14px;
}

/* Under a reply: the documents it offers to take out of the library, one
   button each, and each one once it is out. */
.removal-offers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.removal-offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 100%;
}

.removal-offer .button {
  max-width: 100%;
}

.removal-offer .icon {
  width: 16px;
  height: 16px;
}

.removal-offer .spinner {
  margin-right: 0;
}

.removal-offer-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.removal-offer-done {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--row-control);
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.removal-offer-error {
  margin: 0;
  color: var(--danger);
  font-size: 13px;
}

/* Under a reply: the facts it offers to keep or to drop, one card each, and
   each one once it is answered. The mail rule card and the tidied card (ui/calendars.js) are drawn the same. */
.memory-offers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.memory-offer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--edge-soft);
  border-radius: 12px;
}

.memory-offer p {
  margin: 0;
  max-width: 100%;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.memory-offer-old {
  color: var(--muted);
  font-size: 14px;
}

.memory-offer .icon {
  width: 16px;
  height: 16px;
}

.memory-offer .spinner {
  margin-right: 0;
}

.memory-offer-done {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--row-control);
  color: var(--muted);
  font-size: 14px;
}

.memory-offer-error {
  color: var(--danger);
  font-size: 13px;
}

/* The arcade (docs/arcadeplan.md): its card under a reply, and the wall of covers and the player over everything. */
.arcade-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--edge-soft);
  border-radius: 12px;
}

.arcade-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.arcade-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.arcade-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.arcade-count,
.arcade-facts {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-2);
}

.arcade-resume {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  min-height: 124px;
  box-sizing: border-box;
  padding: 16px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--raised);
}

.arcade-resume-art {
  position: absolute;
  top: 0;
  right: 0;
  width: 72%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 52%);
  mask-image: linear-gradient(to right, transparent, #000 52%);
}

.arcade-resume-text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.arcade-resume-name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.arcade-resume .button {
  position: relative;
}

.arcade-saved-when {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
}

.arcade-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(76px, 100%), 1fr));
  gap: 8px;
}

.arcade-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--raised);
  font: inherit;
  cursor: pointer;
  transition: transform 160ms ease, opacity 160ms ease;
}

.arcade-tile:hover {
  transform: scale(1.04);
  z-index: 1;
}

.arcade-tile:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.arcade-cover {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  outline: 1px solid var(--edge-soft);
  outline-offset: -1px;
}

.arcade-cover-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  text-align: center;
  color: var(--text-2);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.arcade-tile[aria-pressed="true"] .arcade-cover {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

.arcade-saved {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--accent-contrast);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
}

.arcade-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.arcade-wall {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}

/* The chosen game's colours behind the wall, as light rather than as a picture. */
.arcade-glow {
  position: absolute;
  top: -220px;
  left: 50%;
  width: 1500px;
  height: 760px;
  margin-left: -750px;
  object-fit: cover;
  opacity: 0.34;
  filter: blur(110px) saturate(1.3);
  pointer-events: none;
}

.arcade-wall-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding: 22px 40px 18px;
}

.arcade-wall-head > .button {
  margin-left: auto;
}

/* One tab a system, in the look of .segmented. */
.arcade-tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

.arcade-tab {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  min-height: var(--row-control);
  padding: 7px 16px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}

.arcade-tab:hover {
  color: var(--text);
}

.arcade-tab[aria-selected="true"] {
  background: var(--pressed);
  border-color: var(--edge);
  color: var(--text);
  font-weight: 600;
}

.arcade-tab-count {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-2);
}

.arcade-wall-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

/* Only the covers scroll, so the tabs and the chosen game stay in view. */
.arcade-grid {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  align-content: start;
  gap: 14px;
  padding: 6px 40px 28px;
}

/* A console's box has its own shape: SNES boxes are wide, GBA boxes square. */
.arcade-grid[data-system="snes"] {
  grid-template-columns: repeat(auto-fill, minmax(min(208px, 100%), 1fr));
}

.arcade-grid[data-system="snes"] .arcade-tile {
  aspect-ratio: 7 / 5;
}

.arcade-grid[data-system="gba"] .arcade-tile {
  aspect-ratio: 1;
}

@media (hover: hover) {
  .arcade-grid:hover .arcade-tile:not(:hover) {
    opacity: 0.5;
  }
}

.arcade-chosen {
  position: relative;
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding: 14px 40px;
  overflow: hidden;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
}

.arcade-band {
  position: absolute;
  top: 0;
  right: 0;
  width: 56%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0.62;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 58%);
  mask-image: linear-gradient(to right, transparent, #000 58%);
  pointer-events: none;
}

.arcade-chosen-box {
  position: relative;
  width: 51px;
  height: 68px;
  object-fit: cover;
  border-radius: 4px;
}

.arcade-chosen-text {
  position: relative;
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.arcade-chosen-name {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.arcade-chosen-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
}

.arcade-chosen .button-primary {
  position: relative;
  min-height: 52px;
  min-width: 168px;
  padding: 0 24px;
  font-size: 16px;
}

/* The sound button joined to the one beside it: Play on the wall, Close in the player. */
.arcade-join {
  position: relative;
  display: inline-flex;
}

.arcade-join .button {
  position: relative;
  border-radius: 0;
}

.arcade-join .button:focus-visible {
  z-index: 1;
}

.arcade-join > :first-child {
  border-radius: 10px 0 0 10px;
}

.arcade-join > :last-child {
  border-radius: 0 10px 10px 0;
}

.arcade-chosen .arcade-sound {
  width: 52px;
  min-width: 52px;
  padding: 0;
  border-left: 1px solid rgba(14, 26, 21, 0.32);
}

.arcade-bar .arcade-sound {
  width: var(--row-control);
  padding: 0;
  border-right: 0;
}

.arcade-sound[aria-pressed="true"],
.arcade-sound[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent);
}

.arcade-player {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: #000;
}

/* The small boxes keep a console's whole cover rather than a tall slice of it. */
.arcade-chosen:not([data-system="dos"]) .arcade-chosen-box,
.arcade-player:not([data-system="dos"]) .arcade-bar-box,
.arcade-player:not([data-system="dos"]) .arcade-launch-box .arcade-cover {
  object-fit: contain;
  outline: 0;
}

.arcade-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding: 7px 8px 7px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}

.arcade-bar-box {
  width: 27px;
  height: 36px;
  object-fit: cover;
  border-radius: 3px;
}

.arcade-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.arcade-status {
  flex: 1;
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
}

.arcade-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
}

.arcade-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

.arcade-frame {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 0;
  background: #000;
}

.arcade-launch {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow: hidden;
  background: #000;
}

.arcade-launch-art {
  position: absolute;
  inset: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  object-fit: cover;
  filter: blur(10px) brightness(0.3);
}

.arcade-launch-body {
  position: relative;
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.arcade-launch-box {
  width: 186px;
  aspect-ratio: 3 / 4;
}

.arcade-launch-text {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.arcade-launch-name {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.arcade-meter {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
}

.arcade-meter::-webkit-progress-bar {
  background: rgba(255, 255, 255, 0.18);
}

.arcade-meter::-webkit-progress-value {
  background: var(--accent);
}

.arcade-meter::-moz-progress-bar {
  background: var(--accent);
}

.arcade-launch-status {
  margin: 0;
  font-size: 15px;
}

.arcade-launch-note {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}

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

  .arcade-tile:hover {
    transform: none;
  }
}

/* A watch's update, above the first message of the conversation it writes to. */
.watch-header {
  padding: 10px 12px;
  border: 1px solid var(--info-edge);
  border-radius: 10px;
  background: var(--info-soft);
  color: var(--info);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.watch-what {
  margin: 0;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.watch-expired .watch-what {
  color: var(--text-2);
}

.watch-sub,
.watch-foot-text {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.watch-sub::first-letter,
.watch-foot-text::first-letter {
  text-transform: uppercase;
}

.watch-help,
.watch-paused .watch-sub {
  color: var(--warning);
}

.watch-actions {
  display: inline-flex;
  flex: none;
  gap: 8px;
}

/* Beside the sidebar: a table, a row a watch. Drawn only from the width at which
   it fits (WATCH_CARDS in ui/app.js); under it each watch is a card. */
.watch-table {
  min-width: 860px;
}

.watch-table th:first-child,
.watch-table td:first-child {
  padding-inline-start: 16px;
}

.watch-table th:last-child,
.watch-table td:last-child {
  padding-inline-end: 16px;
  text-align: end;
}

.watch-table td {
  vertical-align: middle;
}

.watch-table .watch-expired {
  background: var(--sunken);
}

.watch-value {
  font: 13px/1.3 var(--mono);
  white-space: nowrap;
}

.watch-table .watch-expired .watch-value,
.watch-value-none {
  color: var(--muted);
}

.watch-table td:last-child {
  padding-block: 8px;
  white-space: nowrap;
}

/* On a phone, and wherever the table does not fit: a card a watch. */
.watch-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.watch-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.watch-card.watch-paused {
  border-color: var(--warning-edge);
}

.watch-card.watch-expired {
  background: var(--sunken);
}

.watch-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.watch-top .watch-what {
  flex: 1;
  min-width: 0;
}

.watch-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.watch-facts dt {
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.watch-facts dd {
  margin: 0;
}

.watch-help {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.watch-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.watch-foot-text {
  flex: 1;
  min-width: 0;
}

/* ------------------------------------------------------------------- tasks */

/* A card a task, in three groups: the open and timed, the to-dos, the done. */
.task-add {
  align-self: flex-start;
}

.task-notify {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

.task-notify p {
  flex: 1;
  min-width: 200px;
  margin: 0;
}

.task-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-group-title {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.task-card.task-done {
  background: var(--sunken);
}

/* The task a notification opened the screen at. */
.task-card.is-target {
  border-color: var(--accent);
}

.task-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.task-check {
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.task-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.task-title {
  margin: 0;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.task-done .task-title {
  color: var(--text-2);
  text-decoration: line-through;
}

.task-slot {
  margin: 0;
  font: 13px/1.3 var(--mono);
}

.task-slot-none {
  color: var(--warning);
}

.task-facts {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.task-facts::first-letter {
  text-transform: uppercase;
}

.task-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* The add and edit form: tall on a small screen, so it scrolls inside its box. */
.modal-tall {
  max-height: 100%;
  overflow-y: auto;
}

.task-field,
.task-box {
  margin-top: 12px;
}

.task-box {
  display: flex;
  flex-direction: column;
}

.modal-body > .task-field:first-child,
.task-box > .task-field:first-child {
  margin-top: 0;
}

.task-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.task-row > .task-field {
  margin-top: 0;
}

.task-days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
}

.task-days legend {
  padding: 0;
}

.task-day {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  cursor: pointer;
}

.modal-body .task-hint {
  margin: 12px 0 0;
  font-size: 13px;
}

/* The routine dialog: a group a day, each range two time lists and a remove button. */
.routine-day {
  min-width: 0;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
}

.routine-day legend {
  padding: 0;
}

.routine-range {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}

.routine-time {
  flex: 1;
  min-width: 0;
}

/* ---------------------------------------------------------------- calendars */

/* An account a card, its calendars a second level under it, each with a switch. */
.calendar-accounts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.calendar-account {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.calendar-account.calendar-broken {
  border-color: var(--warning-edge);
}

.calendar-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.calendar-who {
  flex: 1;
  min-width: 0;
}

.calendar-who p {
  margin: 0;
}

.calendar-account-name {
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.calendar-provider {
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.calendar-help {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.calendar-calendars {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.calendar-row + .calendar-row {
  border-top: 1px solid var(--hairline);
}

.calendar-row.is-busy {
  opacity: 0.6;
}

.calendar-label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  cursor: pointer;
}

.calendar-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.calendar-name {
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.calendar-tags {
  color: var(--muted);
  font-size: 12px;
}

/* A Gmail rule in the Gmail block: its sentence, and the Remove that ends it. */
.gmail-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}

.gmail-rule .calendar-name {
  flex: 1;
  min-width: 0;
}

.gmail-rule .button {
  flex: none;
}

/* A checkbox drawn as a switch: the track, and the knob that moves to the right when it is on. */
.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--raised);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.switch::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 120ms ease, background-color 120ms ease;
}

.switch:checked {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.switch:checked::before {
  background: var(--accent);
  transform: translateX(16px);
}

.calendar-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.calendar-add {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}

.calendar-add-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.calendar-add-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.calendar-after p {
  margin: 0;
}

.calendar-after p + p {
  margin-top: 6px;
}

.calendar-link {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* What the Apple password reaches: said in the form, above the fields. */
.modal-body .calendar-warning {
  padding: 10px 12px;
  border: 1px solid var(--warning-edge);
  border-radius: 10px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 14px;
  line-height: 1.45;
}

.calendar-field {
  margin-top: 12px;
}

/* ------------------------------------------------------------ calendar cards */

/* What a turn proposes to change in the calendars, under its reply (ui/proposals.js). */
.cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.calendar-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--edge-soft);
  border-radius: 12px;
}

.calendar-card.card-pending {
  border-color: var(--warning-edge);
}

.calendar-card:focus-visible {
  outline-offset: 3px;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.card-counts {
  margin: 0;
  color: var(--text-2);
  font: 13px/1.3 var(--mono);
}

.card-changes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-change {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

/* A deletion and a whole-series change stand out of a long list. */
.card-change-delete {
  background: var(--danger-soft);
  border-color: var(--danger-edge);
}

.card-change-series {
  border-left: 4px solid var(--warning);
}

.change-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.badge-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.card-change-delete .badge-danger {
  background: var(--danger-edge);
  color: var(--danger-text);
}

.change-result {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.change-result-done {
  color: var(--accent);
}

.change-result-stale,
.change-result-refused,
.change-result-not_sent {
  color: var(--danger);
}

.change-title {
  margin: 0;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.change-time {
  display: flex;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.change-label {
  flex: none;
  width: 52px;
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.change-when {
  min-width: 0;
  overflow-wrap: anywhere;
}

.change-place,
.change-calendar,
.change-note,
.change-notifies,
.change-reason {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.change-reason {
  color: var(--danger-text);
}

.card-change-series .change-note {
  color: var(--warning);
}

.card-status {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.card-progress {
  display: flex;
  align-items: center;
  color: var(--muted);
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--danger-edge);
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger-text);
  font-size: 14px;
}

/* ------------------------------------------------------------------ dialogs */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgb(0 0 0 / 55%);
}

.modal {
  width: 100%;
  max-width: 440px;
  padding: 20px;
  border: 1px solid var(--edge-soft);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}

.modal-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.modal-body p {
  margin: 0 0 8px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.modal-body .features-list {
  margin: 0;
  padding-left: 20px;
  overflow-wrap: anywhere;
}

.modal-body .features-list li {
  margin: 0 0 6px;
}

.modal-error {
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--danger-edge);
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger-text);
  font-size: 14px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

/* The image viewer: the image whole, as large as the viewport allows. */
.modal-viewer {
  max-width: min(100%, 960px);
}

.viewer-image {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 10px;
  background: var(--raised);
}

.viewer-status {
  min-height: 1.4em;
  margin: 8px 0 0;
  font-size: 13px;
}

.field-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.text-input {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--bg);
}

/* --------------------------------------------------------------- phone size */

/* One screen at a time: the list (the Chats tab), a conversation, the watches,
   the memories, the library or the calendars. Every one but the conversation
   stands over the tab bar. */
@media (max-width: 859px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar,
  .main {
    grid-column: 1;
    grid-row: 1;
  }

  .sidebar {
    display: none;
    z-index: 1;
    background: var(--bg);
    border-right: 0;
  }

  .shell.list-open .sidebar {
    display: flex;
  }

  /* Kept laid out under the list, so the messages keep their place. */
  .shell.list-open .main {
    visibility: hidden;
  }

  /* The account's settings as a sheet over the list. */
  .account-panel {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-height: 85dvh;
    overflow-y: auto;
    padding: 16px 16px max(20px, env(safe-area-inset-bottom));
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
  }

  .sheet-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 29;
    background: rgba(5, 6, 7, 0.68);
  }

  /* The cards are a strip that scrolls sideways, above New. */
  .sidebar-dock {
    padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  }

  .shelf {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 16px;
    scrollbar-width: none;
  }

  .shelf-card {
    flex: none;
    min-width: 124px;
    padding: 10px 12px;
  }

  .sidebar-dock .new-button {
    min-height: 52px;
    margin: 0 16px;
    border-radius: 14px;
  }

  .sidebar-head {
    gap: 10px;
    padding: 0 16px;
  }

  .sidebar-head .brand {
    flex: none;
  }

  .sidebar-head .brand-mark {
    width: 28px;
    height: 28px;
  }

  .sidebar-head .brand-name,
  .sidebar-head .badge-dev {
    display: none;
  }

  .list-title {
    display: block;
  }

  .segmented {
    margin: 4px 16px 12px;
    padding: 4px;
    background: var(--surface);
    border-radius: 12px;
  }

  .segmented .segment {
    border-radius: 8px;
  }

  .conversation-list {
    padding: 0;
    border-top: 1px solid var(--hairline);
  }

  .conversation-row {
    margin: 0;
    border-bottom: 1px solid var(--raised);
    border-radius: 0;
  }

  .row-surface,
  .conversation-row.is-selected .row-surface {
    --row-bg: var(--bg);
    border: 0;
  }

  .conversation-row.is-unread .row-surface {
    --row-bg: var(--sunken);
  }

  .conversation-item {
    gap: 12px;
    min-height: 68px;
    padding: 10px 6px 10px 16px;
  }

  .conversation-dot {
    width: 8px;
    height: 8px;
  }

  .conversation-title {
    font-size: 15px;
  }

  .conversation-line {
    font-size: 13px;
  }

  .conversation-item .icon-chevron {
    display: block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: #6f777e;
    stroke-width: 2;
  }

  .chat-header {
    gap: 4px;
    height: 56px;
    padding: 0 6px;
  }

  .menu-button,
  .chat-new,
  .back-button {
    display: inline-grid;
  }

  .chat-heading {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
  }

  .chat-title {
    flex: none;
    font-size: 15px;
  }

  .chat-sub {
    font-size: 11px;
  }

  /* Edge to edge under the header, as the offline strip is drawn. */
  .banners {
    gap: 0;
    padding: 0;
  }

  .banners .banner {
    min-height: 44px;
    padding: 8px 16px;
    border-width: 0 0 1px;
    border-radius: 0;
  }

  .flash {
    padding: 0 16px;
  }

  .message-list {
    gap: 20px;
    padding: 16px 16px 12px;
  }

  .reply,
  .segments {
    gap: 12px;
  }

  .markdown {
    line-height: 1.5;
  }

  .message-text {
    line-height: 1.45;
  }

  .images-sent {
    gap: 6px;
  }

  .images-sent .image-card,
  .images-sent .image-frame {
    width: 96px;
    height: 96px;
  }

  .composer {
    padding: 8px 12px max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--hairline);
  }

  .composer-row {
    padding: 4px;
  }

  /* 16px keeps a phone's browser from zooming into the box. */
  .composer-input {
    font-size: 16px;
  }

  .stop-button {
    padding: 0 14px;
  }

  .composer-hint:not(.composer-hint-status) {
    display: none;
  }

  .screen-header {
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--hairline);
  }

  .screen-heading {
    align-items: center;
    gap: 10px;
  }

  .back-button {
    margin-left: -10px;
  }

  .screen-title {
    flex: 1;
    font-size: 20px;
  }

  .screen-count {
    font-size: 12px;
  }

  .screen-intro {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
  }

  .memory-body {
    padding: 12px;
  }

  /* The memories are rows the width of the screen; what stands around them keeps a margin. */
  .memory-body:not(.watch-body, .task-body, .calendar-body) {
    gap: 12px;
    padding: 0 0 12px;
  }

  .memory-body:not(.watch-body, .task-body, .calendar-body) > :not(.memory-list) {
    margin: 12px 12px 0;
  }

  .memory-list {
    border: 0;
    border-radius: 0;
  }

  .memory-item {
    gap: 8px;
    min-height: 60px;
    padding: 8px 6px 8px 16px;
  }

  .memory-item,
  .memory-item + .memory-item {
    border-top: 0;
    border-bottom: 1px solid var(--raised);
  }

  .memory-delete {
    width: 44px;
    padding: 0;
    border: 0;
    color: var(--muted);
  }

  .memory-delete .icon {
    display: block;
    width: 20px;
    height: 20px;
  }

  .memory-delete .button-label {
    display: none;
  }

  .auth-card {
    padding: 24px;
    margin-top: 2vh;
  }
}

/* A touch device has no Shift+Enter: there Enter adds a line and the Send button
   sends, so the keyboard hint does not apply whatever the width. Its rows are
   swiped, so their buttons leave the screen but stay for screen readers, which
   cannot swipe. */
@media (hover: none) and (pointer: coarse) {
  .composer-hint:not(.composer-hint-status) {
    display: none;
  }

  .row-actions {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* With a mouse a row's own button is 36 high, and drawn to match. */
@media (hover: hover) and (pointer: fine) {
  .button-small,
  .new-button {
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
  }

  .new-button {
    gap: 6px;
    font-size: 14px;
  }

  .new-button .icon {
    width: 16px;
    height: 16px;
  }

  .segmented .segment {
    font-size: 13px;
  }
}

/* --------------------------------------------------------- privacy policy */

.privacy-card {
  max-width: 640px;
  margin-top: 0;
  margin-bottom: 24px;
}

.privacy-card:first-of-type {
  margin-top: 2vh;
}

.privacy-heading {
  margin: 8px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}