/* The embedded call keeps its dark surface, a recorded exception. It re-points the palette tokens so
   the shared rules inside draw dark. */
#akashic-health-records-patient-portal-root .ahr-call {
    --surface: #1b1f27;
    --sunken: #232830;
    --line: #2d3441;
    --ink: #c3cddc;
    --ink-strong: #f2f5fa;
    --ink-muted: #9aa6bb;
    --blue-soft: #232830;
    --red-soft: #3a2626;
    --green-soft: #1d2a24;
    --green-line: #2f6b46;
    --sage-ink: #c8e6d4;
    --line-soft: #262c36;
    --paper: #15181d;
    --ring: #5aa9e6;
    /* The shared notice draws on these, so an empty thread would otherwise sit in daylight cream. */
    --amber-soft: #2b251b;
    --amber-line: #5c4a24;
    --amber-ink: #f0c987;
    --amber-link: #f3d49c;
    /* The aliases resolve where they are declared, so they must be re-pointed here too. */
    --foreground: var(--ink);
    --background: var(--sunken);
    --card: var(--surface);
    --card-foreground: var(--ink);
    --popover: var(--surface);
    --popover-foreground: var(--ink);
    --secondary: var(--ink-muted);
    --muted-foreground: var(--ink-muted);
    --accent: var(--line-soft);
    --accent-foreground: var(--ink-strong);
    --border: var(--line);
    --input: var(--line);
    color-scheme: dark;
    color: var(--ink);
}

#akashic-health-records-patient-portal-root .ahr-call__window {
    background: var(--paper);
}

#akashic-health-records-patient-portal-root .ahr-call a {
    color: var(--ring);
}

#akashic-health-records-patient-portal-root .ahr-call :is(button, input, select, textarea):focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* On a phone the count sits in the title bar as the deck's chip: no border, a full touch height. */
#akashic-health-records-patient-portal-root .ahr-call-header-count .btn {
    height: 44px;
    gap: 6px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: var(--sunken);
    font-size: 12px;
}

/* The phone call bar stacks glyph over label in 44px cells, as the deck draws it; the shared
   13px button padding would clip "Messages" and "No video" in a fifth of 390px. */
#akashic-health-records-patient-portal-root .ahr-call .ahr-call__rail-btn {
  height: 44px;
  min-width: 0;
  padding: 0 2px;
  gap: 3px;
  font-size: var(--ak-font-10-5);
  line-height: 1.2;
  white-space: nowrap;
}

/* The picker marks each record item with its kind, in a small tile as the deck draws it. */
#akashic-health-records-patient-portal-root .ahr-call .ahr-call__kind {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 6px;
  border-radius: 6px;
  background: var(--sunken);
  color: var(--ink-muted);
}

/* Over a call the title steps down to the window title size, in white. */
#akashic-health-records-patient-portal-root .ahr-call :is([data-slot="dialog-title"], [data-slot="sheet-title"], .ak-overlay__title) {
  font-size: 15px;
  font-weight: var(--ak-heading-weight);
  color: #f2f5fa;
}

/* Heading weight is the bold cap; the deck's 600 is not an exception. */
#akashic-health-records-patient-portal-root .ahr-call .ahr-call__shown-title {
    font-weight: var(--ak-heading-weight);
}

/* Someone else is showing this viewer an item: the deck tints it blue, apart from the host's green. */
#akashic-health-records-patient-portal-root .ahr-call .ahr-call__shown--viewer {
    border-color: #33506e;
    background: #1b2430;
    color: #c6d6ea;
    font-size: 12.5px;
}

/* The rail names its thread above the list, on a hairline, as the frame draws it. */
.ahr-call .ahr-call__rail-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0 0 11px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-strong);
    font-size: 14px;
    font-weight: var(--ak-label-weight);
}

/* On a phone an open panel is a sheet over the running call, as the deck draws it; the bar stays below. */
#akashic-health-records-patient-portal-root .ahr-call__sheet {
    position: absolute;
    inset: 22% 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--line);
    border-radius: 14px 14px 0 0;
    background: var(--surface);
}

#akashic-health-records-patient-portal-root .ahr-call__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* The device menus fold to one line, so the note above the bar keeps its room. */
#akashic-health-records-patient-portal-root .ahr-call__devices > summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--ink-muted);
}