/* ivrit.ai's look on top of the shared stylesheet: ink on white, like the
   mark, with no colour of its own. styles.css stays a plain copy of
   Communicator's, so the two can be compared and kept in step.

   Light or dark is <html data-theme>, set by theme.js (the device's, or the
   user's choice), not the media query alone: the dark colours styles.css gives
   under prefers-color-scheme are undone here for a chosen light, and given
   here for a chosen dark. */

:root {
  --paper: #f7f6f3;
  --paper-2: #efede8;
  --card: #ffffff;
  --ink: #111110;
  --ink-2: #3d3c39;
  --muted: #74726c;
  --line: #dcdad4;
  --line-soft: #e9e7e2;
  --accent: #111110;
  --accent-hover: #2e2d2a;
  --accent-ink: #ffffff;
  --accent-soft: rgba(17, 17, 16, 0.07);
}

/* styles.css's light colours, over its dark ones when light is chosen. */
:root[data-theme="light"] {
  --ok: #2e7a4b;
  --ok-soft: rgba(46, 122, 75, 0.12);
  --danger: #b3261e;
  --shadow-sm: 0 1px 0 rgba(28, 27, 23, 0.04), 0 2px 6px -3px rgba(28, 27, 23, 0.12);
  --shadow: 0 1px 0 rgba(28, 27, 23, 0.04), 0 14px 32px -18px rgba(28, 27, 23, 0.32);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #111110;
  --paper-2: #191917;
  --card: #1d1d1b;
  --ink: #f2f1ed;
  --ink-2: #cfcdc7;
  --muted: #94928b;
  --line: #2f2e2b;
  --line-soft: #262523;
  --accent: #f2f1ed;
  --accent-hover: #ffffff;
  --accent-ink: #111110;
  --accent-soft: rgba(242, 241, 237, 0.1);
  --ok: #6cc58f;
  --ok-soft: rgba(108, 197, 143, 0.14);
  --danger: #ff8a80;
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.3);
  --shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

:root[data-theme="light"] .avatar.mono {
  color: oklch(0.42 0.1 var(--hue));
  background: oklch(0.93 0.04 var(--hue));
}

:root[data-theme="dark"] .avatar.mono {
  color: oklch(0.86 0.08 var(--hue));
  background: oklch(0.32 0.05 var(--hue));
}

/* The wordmark is a domain name: set it in the text face, not the serif. */
.wordmark {
  font: 600 20px/1 var(--font-text);
  letter-spacing: -0.01em;
}

.quiet-panel {
  background: transparent;
  box-shadow: none;
  border-style: dashed;
}

.footer-links {
  margin: 40px 0 8px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

#transcribe-back {
  margin-bottom: 12px;
}

/* Shown by index.html when the app failed to start. */
.startup-failed {
  margin: 24px 0;
  text-align: center;
}
.startup-failed pre {
  margin-top: 24px;
  text-align: start;
  direction: ltr;
  white-space: pre-wrap;
  font-size: 12px;
  color: var(--muted);
}

/* A transcription still on its way (see "transcribe here" in app.js). */
.msg-body.pending {
  color: var(--muted);
  font-style: italic;
}


/* A brand glyph shown as an avatar (WhatsApp's): no box, frame or tint behind
   it, and a little clear space inside the avatar's square. */
.avatar.glyph {
  background: none;
  box-shadow: none;
  border-radius: 0;
  object-fit: contain;
  padding: 4px;
}

/* After the first draw, redrawn cards appear in place rather than sliding in
   again (see renderInbox). */
.feed.settled .msg {
  animation: none;
}

/* The Transcribe tab (web/transcription/) is a working surface: as wide as its own
   layout allows. */
main.wide {
  max-width: 960px;
}

/* Live transcription, from the landing: no account needed. */
.btn.landing-live {
  width: 100%;
  min-height: 48px;
}

/* A live session running while another tab is shown. */
.tabs .live-dot {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5484d;
  animation: live-pulse 1.6s ease-in-out infinite;
}

@media (max-width: 719px) {
  .tabs .live-dot {
    top: 4px;
    inset-inline-end: auto;
    inset-inline-start: calc(50% + 8px);
  }
}

@keyframes live-pulse {
  50% {
    opacity: 0.35;
  }
}

/* Signed out: Settings holds only what needs no account. */
body.signed-out .account-only {
  display: none !important;
}

/* On a phone the tabs are at the bottom and the languages in Settings, which would
   leave the bar holding only the mark: it folds away (its tabs stay, fixed at the
   bottom), keeping only the status bar's room above the page. Support is in
   Settings. */
@media (max-width: 719px) {
  body.app {
    --bar-h: env(safe-area-inset-top, 0px);
  }

  body.app .bar {
    height: 0;
    padding: 0;
    border: 0;
  }

  body.app .bar .brand,
  body.app .bar .support {
    display: none;
  }

  body.app main {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
}

/* The mark at its size whatever the browser makes of the <img>'s own width and
   height (a phone's WebView drew the bar's 30 px one several times larger). */
.brand img {
  flex: none;
  width: 30px;
  height: 30px;
}

.landing-mark {
  flex: none;
  width: 56px;
  height: 56px;
}