/* ============================================================
   Intake Styles — patient-facing pages (landing, chat, voice)
   ============================================================
   Depends on: tokens.css, base.css (loaded first)
   ============================================================ */

/* ── Appointment badge ── */

.appointment-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--color-primary-bg);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}

.appointment-badge-icon {
  width: 48px;
  height: 48px;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.appointment-badge-icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.appointment-badge-content {
  flex: 1;
}

.appointment-badge-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-primary-dark);
  margin-bottom: 2px;
}

.appointment-badge-datetime {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ── Feature list ── */

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  color: var(--text-secondary);
}

.feature-list-icon {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Disclaimer box ── */

.disclaimer-box {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  padding: 20px;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border-color);

  /* Scroll-shadow cue (Lea Verou technique): the box clips most of the
     legal copy behind a subtle iOS scrollbar, so patients had no signal
     there was more to read. The ``local`` background layers scroll WITH
     the content and cover the ``scroll``-attached shadows at the edges —
     shadows appear only on the clipped side(s). color-mix keys the shadow
     off --text-primary so it reads in both themes. */
  background:
    linear-gradient(var(--bg-secondary) 30%, transparent),
    linear-gradient(transparent, var(--bg-secondary) 70%) 0 100%,
    linear-gradient(color-mix(in srgb, var(--text-primary) 16%, transparent), transparent),
    linear-gradient(transparent, color-mix(in srgb, var(--text-primary) 16%, transparent)) 0 100%;
  background-color: var(--bg-secondary);
  background-repeat: no-repeat;
  background-size:
    100% 44px,
    100% 44px,
    100% 14px,
    100% 14px;
  background-attachment: local, local, scroll, scroll;
}

.disclaimer-box p {
  margin-bottom: 14px;
}

.disclaimer-box p:last-child {
  margin-bottom: 0;
}

.disclaimer-box strong {
  color: var(--text-primary);
}

/* ── Mode selector ── */

.mode-selector {
  margin-top: 24px;
}

.mode-selector-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  text-align: center;
}

.mode-selector-subtitle {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 20px;
}

.mode-options {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.mode-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.mode-option:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.mode-option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mode-option:disabled:hover {
  transform: none;
  box-shadow: none;
}

.mode-option-icon {
  width: 56px;
  height: 56px;
  background: var(--bg-primary);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.mode-option-icon svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}

.mode-option-icon.voice-icon {
  background: var(--color-accent-light);
}

.mode-option-icon.voice-icon svg {
  color: var(--bg-primary);
}

.mode-option:hover:not(:disabled) .mode-option-icon {
  background: var(--color-primary);
}

.mode-option:hover:not(:disabled) .mode-option-icon svg {
  color: var(--text-on-primary);
}

.mode-option:hover:not(:disabled) .mode-option-icon.voice-icon {
  background: var(--color-accent);
}

.mode-option-content {
  flex: 1;
}

.mode-option-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.mode-option-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0;
}

.mode-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  margin-top: 8px;
}

/* Why-are-these-disabled affordance: the mode tiles sit at 50% opacity
   until the consent checkbox (which may be scrolled off-screen above) is
   ticked. This line names the unlock condition; intake-landing.js hides
   it once the box is checked. */
.mode-consent-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.mode-consent-hint[hidden] {
  display: none;
}

.mode-consent-hint-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.mode-hint-icon {
  width: 16px;
  height: 16px;
}

/* Hidden at rest: this element is an htmx indicator, and the earlier
   ``display: flex`` here silently overrode base.css's ``.htmx-indicator
   { display: none }`` (same specificity, later sheet) — htmx's injected
   ``opacity: 0`` then left ~184px of invisible reserved space at the
   bottom of the landing card (2026-07-05 patient mobile audit). */
.mode-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  margin-top: 24px;
}

.mode-loading.htmx-request,
.htmx-request .mode-loading {
  display: flex;
}

.mode-loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border-color);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 16px;
}

.mode-loading-text {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

/* ── Chat ── */

/* Full-viewport chat shell. Pinned so the mobile soft keyboard can't
   resize/reflow the message stream (the old ``height: calc(100dvh - 72px)``
   recomputed on every keyboard open/close — the "jiggle"). ``intake-chat.js``
   refines the height to ``window.visualViewport.height`` for pixel-accurate
   keyboard handling; the ``svh`` baseline is a stable, keyboard-independent
   fallback when VisualViewport is unavailable. */
.chat-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg-secondary);
}

/* Lock the document behind the fixed shell so focusing the input can't
   scroll/rubber-band the whole page (a major source of the iOS jiggle).
   Scoped via :has() so the other intake pages keep normal scrolling. */
html:has(.chat-shell),
body:has(.chat-shell) {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.chat-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--bg-secondary);
}

/* Slim chat header — tight vertical padding to claw back screen real
   estate above the transcript. The 4px vertical padding pairs with the
   44px-tall End Session button (tap-target guideline) for a ~55px total
   header — the button, not the padding, sets the height. */
.chat-header {
  background: var(--bg-primary);
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border-color);
  flex: 0 0 auto;
}

/* The avatar now shows the Audri brand mark (a self-contained blue
   rounded tile), so the container is transparent and just clips the image
   to a rounded square — no separate tinted circle. */
.chat-avatar {
  width: 34px;
  height: 34px;
  background: transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-avatar-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.chat-header-info {
  flex: 1;
  /* Let the column shrink so the name line's ellipsis can engage instead of
     shoving the End Session button off-screen. */
  min-width: 0;
}

/* The title line stays a SINGLE line ("Audri · Collingwood Medical"),
   truncating with an ellipsis on a very long clinic name rather than
   wrapping the top bar onto extra rows — that wrap was the whole point of
   the tighten pass. */
.chat-header-name {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Clinic name folded into the chat title line after the standalone
   clinic-branding row was removed for a tighter mobile top bar. Lighter
   weight + secondary colour so "Audri" stays the emphasis. */
.chat-header-clinic {
  font-weight: 500;
  color: var(--text-secondary);
}

.chat-header-status {
  font-size: 0.8125rem;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-header-status::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
}

/* Issue 1805: a centered, muted in-stream reminder that the patient may skip
   a question. Deliberately not a .message bubble — it reads as a system note. */
.chat-hint {
  align-self: center;
  max-width: 85%;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-tertiary);
}

.message-streaming::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 18px;
  background: var(--color-primary);
  margin-left: 4px;
  animation: cursorBlink 1s infinite;
  vertical-align: text-bottom;
}

@keyframes cursorBlink {
  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

/* ── Chat input ── */

.chat-input-container {
  flex: 0 0 auto;
  /* Tighter side padding than before so the input gets more width. */
  padding: 12px;
  /* Forward-compatible home-indicator clearance: ``env(safe-area-inset-*)``
     is 0 under the default viewport (which already excludes the inset), so
     this is a no-op today and only engages if ``viewport-fit=cover`` is
     ever adopted. The ``0px`` fallback keeps old browsers at plain 12px. */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-primary);
  border-top: 1px solid var(--border-color);
}

.chat-input-form {
  display: flex;
  gap: 10px;
  /* Bottom-align so the fixed-size send button stays anchored to the
     bottom edge as the textarea grows upward (WhatsApp-style). */
  align-items: flex-end;
}

/* The input is an auto-growing <textarea> (see ``autoGrowInput`` in
   intake-chat.js): one row collapsed, growing with content up to ~5 lines
   (``max-height``) and then scrolling. */
.chat-input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  /* Keep ≥ 16px: smaller fonts make iOS Safari zoom on focus — itself a
     jiggle/layout-shift source. */
  font-size: 1rem;
  line-height: 1.4;
  font-family: inherit;
  border: 2px solid var(--border-color);
  /* Rounded rectangle, not a pill/oval (was --radius-full). */
  border-radius: var(--radius-md);
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  background: var(--bg-primary);
  color: var(--text-primary);
  /* Textarea specifics: no manual drag-resize, grow up to ~5 lines then
     scroll. JS (``autoGrowInput``) sets the live height; this caps it.
     The cap is expressed from the same metrics as one row — 5 text lines
     (``1.4em`` line-height each) + the vertical padding (14px×2) + border
     (2px×2) — so it tracks the font/line-height instead of a magic 144px. */
  resize: none;
  display: block;
  max-height: calc(1.4em * 5 + 28px + 4px);
  overflow-y: auto;
}

.chat-input::placeholder {
  color: var(--text-tertiary);
}

.chat-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-bg);
}

.chat-input:disabled {
  background: var(--bg-tertiary);
  cursor: not-allowed;
}

.send-btn {
  width: 52px;
  height: 52px;
  /* Rounded square to match the squared-off input (was --radius-full). */
  border-radius: var(--radius-md);
  border: none;
  background: var(--gradient-primary);
  color: var(--text-on-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.send-btn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.send-btn:disabled {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.send-btn svg {
  width: 22px;
  height: 22px;
}

/* ── End session button ── */

.end-session-btn {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  /* ≥44px tall tap target (the destructive header action; was ~33px). The
     slim header absorbs it via its 4px vertical padding. */
  min-height: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.end-session-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}

/* ── Typing indicator ── */

.typing-indicator {
  display: none;
  align-self: flex-start;
  padding: 16px 20px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-sm);
}

.typing-indicator.active {
  display: flex;
  gap: 5px;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* ── Completion state ── */

.completion-card {
  text-align: center;
  padding: 40px 28px;
}

/* The consolidated completion card leads with the appointment badge
   (2026-07-05 audit merge); the badge keeps its own left-aligned layout
   inside the otherwise-centered card. */
.completion-card .appointment-badge {
  text-align: left;
  margin-bottom: 24px;
}

.completion-icon {
  width: 80px;
  height: 80px;
  background: var(--color-success-bg);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.completion-icon svg {
  width: 40px;
  height: 40px;
  color: var(--color-success);
}

.completion-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.completion-message {
  color: var(--text-secondary);
  margin-bottom: 8px;
}

/* ── Admin shortcut link (completion pages) ──
   Unstyled anchors fall back to browser-default blue/purple, which is
   nearly invisible on the dark-mode --color-info-bg. Use the primary
   token so it adapts to both themes. */

.admin-shortcut-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-shortcut-link:hover,
.admin-shortcut-link:focus-visible {
  color: var(--color-primary-dark);
}

/* ── Completion overlay (chat page) ── */

.completion-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.completion-overlay.active {
  opacity: 1;
}

.completion-prompt {
  background: var(--bg-primary);
  border-radius: 16px;
  padding: 32px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.completion-overlay.active .completion-prompt {
  transform: translateY(0);
}

.completion-prompt-icon {
  width: 64px;
  height: 64px;
  background: var(--color-success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.completion-prompt-icon svg {
  width: 32px;
  height: 32px;
  stroke: white;
}

.completion-prompt h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  color: var(--text-primary);
}

.completion-prompt p {
  margin: 0 0 24px;
  color: var(--text-secondary);
}

.completion-prompt-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.completion-prompt-actions .btn {
  flex: 1;
  max-width: 150px;
}

/* ── Custom confirm modal (chat page) ──
   In-page replacement for ``window.confirm`` on the End Session button.
   iOS Safari lets users tick "Suppress dialogues", after which every native
   confirm()/alert() silently returns false — the patient could no longer end
   their session. This modal is plain DOM so it can't be suppressed, and it
   centres in the visual viewport (the JS blurs the input first) so the soft
   keyboard can't occlude it the way it did the native sheet. Shares the
   backdrop/animation shape with the completion overlay. */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1100;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.confirm-overlay.active {
  opacity: 1;
}

/* Only the fully-shown backdrop intercepts taps; while fading in/out it
   must let clicks through (it lingers ~200ms after teardown). */
.confirm-overlay:not(.active) {
  pointer-events: none;
}

.confirm-modal {
  background: var(--bg-primary);
  border-radius: 16px;
  padding: 28px 24px 20px;
  max-width: 360px;
  width: 100%;
  /* Never taller than the (small) viewport minus the overlay padding — on a
     short landscape phone a long question scrolls inside the card instead of
     clipping its buttons off-screen. */
  max-height: calc(100vh - 48px);
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: translateY(16px);
  transition: transform 0.2s ease;
}

.confirm-overlay.active .confirm-modal {
  transform: translateY(0);
}

.confirm-modal-title {
  margin: 0 0 8px;
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--text-primary);
}

.confirm-modal-message {
  margin: 0 0 24px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.confirm-modal-actions {
  display: flex;
  gap: 12px;
}

.confirm-modal-actions .btn {
  flex: 1;
  /* Keep each label on one line ("End Session" wrapped at the default
     .btn 28px side padding in the narrow 50/50 split). */
  padding-left: 16px;
  padding-right: 16px;
  white-space: nowrap;
}

/* Respect a reduced-motion preference: show/hide instantly, no slide. */
@media (prefers-reduced-motion: reduce) {
  .confirm-overlay,
  .confirm-modal {
    transition: none;
  }

  .confirm-modal {
    transform: none;
  }
}

/* ── Voice intake ── */

.voice-container {
  display: flex;
  flex-direction: column;
  /* The voice page now carries ONE slim chat-style header (~55px: 44px
     End Session button + 4px padding each side + border) instead of the
     old compact-clinic-bar + voice-header stack (~160px on a 390px phone —
     the "Ready to Start" double-header from the 2026-07-05 audit).
     min-height (not height) so the admin profile-selection variant can
     still scroll. */
  min-height: calc(100vh - 55px);
  min-height: calc(100svh - 55px);
  background: var(--bg-secondary);
}

/* Voice page reuses the slim .chat-header; this modifier only adds the
   stickiness the (scrollable) voice page needs — the chat page's header
   lives in a fixed shell and never scrolls. */
.voice-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.voice-session-active {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

/* The voice avatar is the glanceable "who has the floor" indicator
   (issue 1734). ``--va-accent`` / ``--va-tint`` are re-pointed per state
   below so the whole circle changes color AND swaps its inner glyph
   (mic / mic-off / animated waveform / thinking dots) — a patient reads
   the turn without reading the label. ``data-state`` is written by
   renderVoiceStatus() in intake-voice.js, the same single writer that
   owns the status line, so the visual and the words can't disagree.
   The pre-connect/connecting panes reuse ``.voice-avatar`` WITHOUT a
   data-state, so they fall through to these primary-tinted defaults. */
.voice-avatar {
  --va-accent: var(--color-primary);
  --va-tint: var(--color-primary-bg);
  width: 120px;
  height: 120px;
  background: var(--va-tint);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
  /* Only the tint animates between states; the glyph swap is a discrete
     display toggle. ``color`` tweens on the svg itself (below) so a
     same-glyph recolor — e.g. muted(grey) → disconnected(red) — is
     smooth rather than a hard snap. */
  transition: background-color 0.35s ease;
}

.voice-avatar svg {
  width: 60px;
  height: 60px;
  color: var(--va-accent);
  transition: color 0.35s ease;
}

/* Per-state tint. listening = green (your turn), thinking = amber
   (Audri working), muted = grey (you intentionally turned your mic
   off), disconnected = red (a PROBLEM — Audri dropped, distinct from a
   deliberate mute). speaking/connecting keep the primary tint. */
.voice-avatar[data-state="listening"] {
  --va-accent: var(--color-success);
  --va-tint: var(--color-success-bg);
}

.voice-avatar[data-state="thinking"] {
  --va-accent: var(--color-warning);
  --va-tint: var(--color-warning-bg);
}

.voice-avatar[data-state="muted"] {
  --va-accent: var(--text-secondary);
  --va-tint: var(--border-color);
}

.voice-avatar[data-state="disconnected"] {
  --va-accent: var(--color-error);
  --va-tint: var(--color-error-bg);
}

/* Glyph swapping. Every glyph is hidden by default; each state reveals
   exactly one. The pre-connect avatar has a bare <svg> (no .va-glyph),
   so it is unaffected and stays visible. */
.va-glyph {
  display: none;
}

/* The microphone glyphs are <svg> elements — reveal them as ``block``,
   NOT flex: a flex/grid outer display on an <svg> is a known Firefox
   rendering landmine (Bugzilla 1308793 et al.), and the glyph is already
   centered as a flex CHILD of .voice-avatar, so it needs no inner flex
   context of its own. */
.voice-avatar[data-state="connecting"] .va-mic,
.voice-avatar[data-state="connected"] .va-mic,
.voice-avatar[data-state="listening"] .va-mic,
.voice-avatar[data-state="muted"] .va-mic-off,
.voice-avatar[data-state="disconnected"] .va-mic-off {
  display: block;
}

/* The waveform/dots glyphs are <span> wrappers that DO need flex to lay
   out their bars/dots in a centered row. */
.voice-avatar[data-state="speaking"] .va-wave,
.voice-avatar[data-state="finishing"] .va-wave,
.voice-avatar[data-state="thinking"] .va-dots {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pulsing ring — a live, breathing halo for the active turn-taking
   states. Muted/disconnected get NO ring: both are inert (a breathing
   halo would imply a live audio path that isn't there). Thinking
   relies on its bouncing dots instead of a ring. */
.voice-avatar[data-state="speaking"]::after,
.voice-avatar[data-state="finishing"]::after,
.voice-avatar[data-state="listening"]::after,
.voice-avatar[data-state="connecting"]::after,
.voice-avatar[data-state="connected"]::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: var(--radius-full);
  border: 3px solid var(--va-accent);
  animation: voicePulse 1.6s ease-in-out infinite;
}

/* Listening's halo is calmer/slower — an inviting "go ahead" rather
   than the lively cadence of Audri's own voice. */
.voice-avatar[data-state="listening"]::after {
  animation-duration: 2.2s;
}

@keyframes voicePulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.12);
    opacity: 0.35;
  }
}

/* Speaking: a 5-bar equalizer that reads as "a voice is talking". */
.va-wave {
  gap: 5px;
  height: 46px;
}

.va-wave i {
  display: block;
  width: 6px;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--va-accent);
  transform-origin: center;
  animation: vaWave 0.95s ease-in-out infinite;
}

.va-wave i:nth-child(1) {
  animation-delay: -0.9s;
}

.va-wave i:nth-child(2) {
  animation-delay: -0.6s;
}

.va-wave i:nth-child(3) {
  animation-delay: -0.3s;
}

.va-wave i:nth-child(4) {
  animation-delay: -0.45s;
}

.va-wave i:nth-child(5) {
  animation-delay: -0.75s;
}

@keyframes vaWave {
  0%,
  100% {
    transform: scaleY(0.28);
  }

  50% {
    transform: scaleY(1);
  }
}

/* Thinking: three bouncing dots — the universal "working on it". */
.va-dots {
  gap: 9px;
}

.va-dots i {
  display: block;
  width: 13px;
  height: 13px;
  border-radius: var(--radius-full);
  background: var(--va-accent);
  animation: vaDot 1.3s ease-in-out infinite;
}

.va-dots i:nth-child(2) {
  animation-delay: 0.2s;
}

.va-dots i:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes vaDot {
  0%,
  100% {
    transform: translateY(4px);
    opacity: 0.4;
  }

  50% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

/* prefers-reduced-motion: keep every state visually distinct via the
   color tint + glyph (which are NOT motion), but freeze all animation.
   The status line stays the authoritative announcement. */
@media (prefers-reduced-motion: reduce) {
  .voice-avatar::after {
    animation: none;
  }

  .va-wave i {
    animation: none;
    transform: scaleY(0.55);
  }

  .va-dots i {
    animation: none;
    transform: none;
    opacity: 1;
  }

  .voice-status-dot {
    animation: none;
  }
}

.voice-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.voice-status {
  font-size: 1rem;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}

.voice-status-dot {
  width: 10px;
  height: 10px;
  background: var(--color-primary);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

/* Per-state accents for the voice status line. ``data-state`` is set
   by renderVoiceStatus() in intake-voice.js — the same single writer
   that owns both the label text AND the big avatar — so the line, the
   words, and the avatar can never disagree. The line is the labelled,
   screen-reader-announced echo of the avatar's glanceable state:
   speaking/connecting keep the primary default above; listening turns
   green (your turn); thinking turns amber with a faster pulse
   (Audri is working — wait); muted goes grey and static (a pulsing dot
   implies a live microphone); disconnected goes red and static (Audri
   dropped — a problem, distinct from a deliberate mute). */
.voice-status[data-state="listening"] {
  color: var(--color-success);
}

.voice-status[data-state="listening"] .voice-status-dot {
  background: var(--color-success);
}

.voice-status[data-state="thinking"] {
  color: var(--color-warning-text);
}

.voice-status[data-state="thinking"] .voice-status-dot {
  background: var(--color-warning);
  animation: pulse 1s infinite;
}

.voice-status[data-state="muted"] {
  color: var(--text-secondary);
}

.voice-status[data-state="muted"] .voice-status-dot {
  background: var(--text-secondary);
  animation: none;
}

.voice-status[data-state="disconnected"] {
  color: var(--color-error);
}

.voice-status[data-state="disconnected"] .voice-status-dot {
  background: var(--color-error);
  animation: none;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.voice-controls {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}

.voice-control-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
}

.voice-control-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.voice-control-btn svg {
  width: 28px;
  height: 28px;
  color: var(--text-primary);
}

.voice-control-btn span {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.voice-control-btn.muted {
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
}

.voice-control-btn.muted svg {
  color: var(--color-warning);
}

.voice-control-btn.end-call {
  background: var(--color-error-bg);
  border-color: var(--color-error);
}

.voice-control-btn.end-call svg {
  color: var(--color-error);
}

.voice-control-btn.end-call:hover {
  background: var(--color-error);
}

.voice-control-btn.end-call:hover svg {
  color: var(--text-on-primary);
}

/* ── Transcript panel ── */

.transcript-panel {
  width: 100%;
  max-width: 500px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  text-align: left;
}

.transcript-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.transcript-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.transcript-toggle {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 0.8125rem;
  cursor: pointer;
}

.transcript-content {
  max-height: 200px;
  overflow-y: auto;
}

.transcript-entry {
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.transcript-entry:last-child {
  margin-bottom: 0;
}

.transcript-entry.user {
  background: var(--color-primary-bg);
  border-left: 3px solid var(--color-primary);
}

.transcript-entry.assistant {
  background: var(--bg-secondary);
  border-left: 3px solid var(--color-accent);
}

.transcript-entry.system-notice {
  background: transparent;
  border-left: 3px solid var(--text-tertiary);
  opacity: 0.7;
  font-style: italic;
}

.transcript-entry.system-notice .transcript-entry-text {
  color: var(--text-tertiary);
}

.system-notice-label {
  color: var(--text-tertiary);
  font-size: 0.6875rem;
}

.transcript-entry-role {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  color: var(--text-tertiary);
}

/* ── Voice error / connecting / preconnect states ── */

.voice-error {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  max-width: 400px;
}

.voice-error-icon {
  width: 48px;
  height: 48px;
  color: var(--color-error);
  margin-bottom: 16px;
}

.voice-error-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.voice-error-message {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.voice-connecting {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.voice-connecting-spinner {
  width: 64px;
  height: 64px;
  border: 4px solid var(--border-color);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 24px;
}

.voice-connecting-text {
  font-size: 1.125rem;
  color: var(--text-secondary);
}

.voice-connecting-subtext {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  margin-top: 8px;
}

.voice-preconnect-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  text-align: center;
}

.voice-preconnect-text {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.voice-preconnect-subtext {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  margin-bottom: 24px;
}

/* Issue 1805: persistent on-screen reminder during the call that the patient
   can skip any question (voice has no text stream to carry the hint). */
.voice-skip-hint {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  text-align: center;
}

/* Privacy reminder callout — audio can't be routed to the phone earpiece
   from a web page, so advise headphones / a private space up front. Uses
   the info tokens (dark-mode aware) with --text-secondary body copy so it
   stays legible on --color-info-bg in both themes. */
.voice-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 380px;
  margin: 0 0 24px;
  padding: 12px 14px;
  text-align: left;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-secondary);
  background: var(--color-info-bg);
  border: 1px solid var(--color-info);
  border-radius: 12px;
}

.voice-privacy-note-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--color-info);
}

.btn-start-voice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 16px;
}

/* ── Admin STT mode selection ── */

.admin-stt-options {
  margin-top: 24px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  max-width: 400px;
  text-align: left;
}

.admin-stt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.875rem;
}

.admin-stt-header svg {
  color: var(--color-primary);
}

.admin-stt-choices {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-stt-choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  padding: 12px 16px;
  background: var(--bg-primary);
  border-radius: 8px;
  border: 2px solid var(--border-color);
  transition: all 0.2s ease;
  flex: 1;
  min-width: 140px;
}

.admin-stt-choice:hover {
  border-color: var(--color-primary-light);
  background: var(--bg-secondary);
}

.admin-stt-choice.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.admin-stt-choice input[type="radio"] {
  accent-color: var(--color-primary);
  margin-top: 2px;
}

.admin-stt-choice-content {
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
}

.admin-stt-choice-content strong {
  color: var(--text-primary);
}

.admin-stt-choice-desc {
  color: var(--text-tertiary);
  font-size: 0.75rem;
  margin-top: 2px;
}

.admin-stt-note {
  margin: 12px 0 0 0;
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

/* ── Turn detection profile selection ── */

.profile-selection {
  margin-top: 24px;
  padding: 20px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  max-width: 450px;
  text-align: left;
}

.profile-selection.highlight-required {
  animation: highlightPulse 0.5s ease-in-out;
  border-color: var(--color-warning);
}

@keyframes highlightPulse {
  0%,
  100% {
    box-shadow: none;
  }

  50% {
    box-shadow: 0 0 0 4px var(--color-warning-bg);
  }
}

.profile-selection-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
}

.profile-selection-header svg {
  color: var(--color-primary);
}

.profile-help-icon {
  margin-left: auto;
  color: var(--text-tertiary);
  cursor: help;
}

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

.profile-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 14px 16px;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  border: 2px solid var(--border-color);
  transition: all 0.2s ease;
}

.profile-choice:hover {
  border-color: var(--color-primary-light);
  background: var(--bg-tertiary);
}

.profile-choice.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.profile-choice input[type="radio"] {
  accent-color: var(--color-primary);
  margin-top: 3px;
  width: 18px;
  height: 18px;
}

.profile-choice-content {
  display: flex;
  flex-direction: column;
  font-size: 0.9375rem;
}

.profile-choice-content strong {
  color: var(--text-primary);
  font-size: 1rem;
}

.profile-choice-desc {
  color: var(--text-tertiary);
  font-size: 0.8125rem;
  margin-top: 4px;
  line-height: 1.4;
}

.profile-note {
  margin: 16px 0 0 0;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  text-align: center;
}

/* ── Completion page feedback ── */

.feedback-section.card {
  margin-top: 24px;
  padding: 24px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  text-align: center;
}

.feedback-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

/* Completion page uses larger horizontal feedback buttons */
.feedback-buttons .feedback-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s ease;
  min-width: 120px;
  max-width: none;
}

.feedback-buttons .feedback-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.feedback-buttons .feedback-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.feedback-btn.positive:hover:not(:disabled),
.feedback-btn.positive.selected {
  border-color: var(--color-success);
  background: var(--color-success-bg);
  color: var(--color-success);
}

.feedback-btn.negative:hover:not(:disabled),
.feedback-btn.negative.selected {
  border-color: var(--color-error);
  background: var(--color-error-bg);
  color: var(--color-error);
}

.feedback-btn svg {
  width: 24px;
  height: 24px;
}

.feedback-text-container {
  display: none;
  margin-top: 16px;
}

.feedback-text-container.visible {
  display: block;
}

.feedback-submit {
  padding: 10px 24px;
  background: var(--color-primary);
  color: var(--text-on-primary);
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.feedback-submit:hover:not(:disabled) {
  background: var(--color-primary-dark);
}

.feedback-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.feedback-thanks {
  display: none;
  padding: 16px;
  background: var(--color-success-bg);
  color: var(--color-success);
  border-radius: var(--radius-md);
  font-weight: 600;
}

.feedback-thanks.visible {
  display: block;
}

.feedback-form.submitted .feedback-buttons,
.feedback-form.submitted .feedback-text-container {
  display: none;
}

.feedback-form.submitted .feedback-thanks {
  display: block;
}

/* ── Voice session feedback ── */

.feedback-card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 450px;
  width: 100%;
  box-shadow: var(--shadow-md);
}

.feedback-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 24px;
  text-align: center;
}

.feedback-section {
  margin-bottom: 24px;
}

.feedback-question {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 16px;
  text-align: center;
}

.feedback-options {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.feedback-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 1;
  max-width: 120px;
}

.feedback-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.feedback-btn.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  box-shadow: 0 0 0 2px var(--color-primary-bg);
}

.feedback-icon {
  font-size: 1.5rem;
}

.feedback-btn span:last-child {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  text-align: center;
}

.feedback-btn small {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}

.feedback-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.feedback-textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 0.9375rem;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  resize: vertical;
  font-family: inherit;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.feedback-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.feedback-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

.feedback-actions .btn {
  min-width: 100px;
}

/* ── Responsive (intake) ── */

@media (max-width: 480px) {
  .chat-input {
    padding: 12px 14px;
  }

  .send-btn {
    width: 48px;
    height: 48px;
  }

  .mode-options {
    flex-direction: column;
  }

  .mode-option {
    flex-direction: row;
    text-align: left;
    padding: 16px;
  }

  .mode-option-icon {
    width: 48px;
    height: 48px;
  }

  .mode-option-icon svg {
    width: 24px;
    height: 24px;
  }

  .voice-controls {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
  }

  .voice-control-btn {
    flex-direction: row;
    justify-content: center;
  }

  .feedback-options {
    flex-direction: column;
  }

  .feedback-btn {
    max-width: none;
    flex-direction: row;
    justify-content: center;
  }
}

/* ── Card Arrow (scroll indicator between cards) ── */

.card:has(+ .card-arrow) {
  margin-bottom: 0;
}

.card-arrow {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0;
  color: var(--text-tertiary);
  animation: bounce-arrow 2s infinite;
}

.card-arrow svg {
  width: 32px;
  height: 32px;
  stroke-width: 3;
}

@keyframes bounce-arrow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-arrow {
    animation: none;
  }
}

/* ============================================================
   Clinic branding header (intake UX facelift)
   Logo + clinic name + tappable phone, leading the page-flow intake
   surfaces (landing / completion / walk-in). The chat and voice app
   shells deliberately DON'T use it — they fold the clinic name into
   their own slim header line ("Audri · <clinic>") instead. Stacked and
   centred on desktop; collapses to a single compact row on ≤480px
   screens. All colours are tokens; the logo sits on an always-light
   chip (--surface-logo-chip) so a dark wordmark reads in both themes.
   ============================================================ */
.clinic-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 24px 16px 8px;
}

.clinic-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-logo-chip);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 12px 18px;
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}

.clinic-logo {
  display: block;
  height: 44px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

.clinic-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.clinic-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.clinic-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  /* ≥40px tall tap target (was 4px/10px ≈ 28px). */
  padding: 8px 12px;
  border-radius: var(--radius-full);
  transition: background 0.15s ease;
}

.clinic-phone:hover {
  background: var(--color-primary-bg);
}

.clinic-phone-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ── Mobile: single-row clinic header ──
   The stacked variant (logo chip whose wordmark usually already names the
   clinic, then the name AGAIN as text, then the phone) consumed ~176px —
   over a fifth of a phone viewport — before any page content (2026-07-05
   audit). On small screens collapse it to one compact row: small chip
   left, name + phone right. */
@media (max-width: 480px) {
  .clinic-header {
    flex-direction: row;
    justify-content: center;
    text-align: left;
    gap: 12px;
    padding: 14px 12px 6px;
  }

  .clinic-logo-chip {
    padding: 6px 10px;
    border-radius: var(--radius-md);
  }

  .clinic-logo {
    height: 30px;
    max-width: 130px;
  }

  .clinic-identity {
    align-items: flex-start;
    gap: 0;
  }

  .clinic-name {
    font-size: 1rem;
  }

  .clinic-phone {
    font-size: 0.875rem;
    padding: 4px 0;
    /* Keep the ≥44px tap target even in the compact row (the visual stays
       a slim text line; inline-flex centering absorbs the extra height). */
    min-height: 44px;
  }

  .clinic-phone:hover {
    background: transparent;
  }
}