/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!../../../node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Global stylesheet.
 *
 * Only three things belong here: the token definitions, a reset, and element
 * defaults. Component appearance lives with the component.
 *
 * Colour is never written literally below this line — every value comes from
 * `styles/_tokens.scss`, which is the one file to edit when the palette
 * changes.
 */
/**
 * Design tokens — the single source of truth for colour in the app.
 *
 * Nothing else in the codebase may name a colour. Components reference
 * `var(--color-*)` only, so re-theming is an edit to this file and nothing
 * else. That is the whole point: a future palette change must not require
 * touching a single component.
 *
 * The palette follows the Tvam apps: the Tvam orange as the one brand colour,
 * peach as its soft tint, white cards on a light grey ground, and neutral
 * (not tinted) dark chrome around the video. Matching the apps the patient
 * and doctor arrive from is what makes this page read as part of them.
 *
 * Contrast ratios in the comments are measured against `--color-canvas`
 * (light) or `--color-shell` (dark) and are WCAG AA or better for body text.
 * If you change a value, re-check the pair it is annotated against.
 */
:root {
  /* ---------------------------------------------------------------- *
   * Brand
   * ---------------------------------------------------------------- */
  /*
   * Tvam orange. 3.1:1 against white, so it is a fill colour — buttons,
   * icons, the sender's own chat bubbles — and never small text on a light
   * surface; text in the brand colour uses --color-primary-ink.
   */
  --color-primary: #e8711f;
  --color-primary-hover: #cc5f14;
  --color-primary-ink: #b9520e; /* 4.9:1 on white — orange text, links */
  --color-primary-wash: #fdeee3; /* tinted background for focus rings */
  /**
   * Lighter step of the primary, used as the top of button and brand-mark
   * gradients. It must be a token: hardcoding it means a re-theme leaves
   * every gradient fading from the OLD hue.
   */
  --color-primary-light: #f08a3e;
  --color-on-primary: #ffffff;
  /**
   * Peach — the soft tint of the orange, as on the Tvam apps' table headers.
   * A tint, not a primary: it can never carry text by itself, only behind
   * --color-on-accent.
   */
  --color-accent: #fce5d2;
  --color-accent-strong: #f9d3b4;
  --color-on-accent: #8a3d0b; /* 7.1:1 on accent */
  /* ---------------------------------------------------------------- *
   * Light surfaces — white cards on a light grey ground
   * ---------------------------------------------------------------- */
  --color-canvas: #f5f5f5; /* page ground */
  --color-surface: #ffffff; /* cards, panels */
  --color-raised: #f3f3f3; /* hover, selected row, received chat bubbles */
  --color-sunken: #ececec; /* wells, slider tracks, disabled */
  --color-line: #e6e6e6; /* borders, dividers */
  /* ---------------------------------------------------------------- *
   * Ink
   * ---------------------------------------------------------------- */
  --color-ink: #2b2b2b; /* 13.9:1 on white — body text */
  --color-ink-soft: #6b6b6b; /* 5.3:1 on white, 4.9:1 on canvas */
  --color-ink-faint: #a3a3a3; /* decorative only, never body text */
  /* ---------------------------------------------------------------- *
   * Dark chrome — neutral, so the orange is the only colour on screen.
   * Used for the video stage, where UI floats over a live feed.
   * ---------------------------------------------------------------- */
  --color-shell: #18181b; /* video stage ground */
  --color-dock: #232326; /* control dock */
  --color-raised-dark: #2e2e33; /* self-view, raised dark surfaces */
  --color-on-dark: #ffffff;
  --color-on-dark-soft: rgba(255, 255, 255, 0.66);
  --color-line-dark: rgba(255, 255, 255, 0.15);
  /* ---------------------------------------------------------------- *
   * Status
   *
   * `live` and `critical` are deliberately different hues. "Auscultation is
   * running" and "end the call" must never look alike — in the control dock
   * they sit inches apart.
   * ---------------------------------------------------------------- */
  --color-ok: #2f7d62; /* 4.81:1 — connected, peer joined */
  --color-live: #a85a28; /* 4.89:1 — capture running */
  --color-critical: #b03a2c; /* 5.83:1 — end call, hard failure */
  --color-caution: #8a6a2f; /* 4.86:1 — no device, degraded link */
  --color-info: #3c6e8f; /* 5.33:1 — translation, neutral notices */
  /* Lightened variants — the same five meanings over dark video chrome. */
  --color-ok-dark: #5dc59d; /* 8.41:1 on shell */
  --color-live-dark: #f09a5b; /* 8.02:1 on shell */
  --color-critical-dark: #e2564a; /* 4.79:1 on shell */
  --color-caution-dark: #e8b44a;
  --color-info-dark: #7ab5d6;
  /* ---------------------------------------------------------------- *
   * Elevation
   * ---------------------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(42, 36, 48, 0.08);
  --shadow-md: 0 6px 22px rgba(42, 36, 48, 0.1);
  --shadow-lg: 0 18px 50px rgba(42, 36, 48, 0.16);
  --shadow-dark-md: 0 12px 30px rgba(0, 0, 0, 0.42);
  --shadow-dark-lg: 0 18px 44px rgba(0, 0, 0, 0.42);
  /* ---------------------------------------------------------------- *
   * Radius — liquid treatment: asymmetric on panels, pills on controls
   * ---------------------------------------------------------------- */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-panel: 30px 30px 30px 30px / 24px 24px 24px 24px;
  --radius-pill: 999px;
  /* ---------------------------------------------------------------- *
   * Spacing — one scale, so no component invents its own gaps
   * ---------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  /* ---------------------------------------------------------------- *
   * Type
   * ---------------------------------------------------------------- */
  /* Poppins, as in the Tvam apps; loaded in index.html. */
  --font-sans: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont,
    "Roboto", "Helvetica Neue", sans-serif;
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 13.5px;
  --text-md: 15px;
  --text-lg: 19px;
  --text-xl: 24px;
  /* ---------------------------------------------------------------- *
   * Controls — touch targets. 44px is the accessible minimum; the dock
   * uses the larger size on pointer devices and the minimum on phones.
   * ---------------------------------------------------------------- */
  --control-size: 50px;
  --control-size-sm: 46px;
  /* ---------------------------------------------------------------- *
   * Motion. Everything collapses to 0s under reduced-motion, below.
   * ---------------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.18s;
  --duration-base: 0.24s;
  --duration-slow: 0.32s;
  /* Liquid treatment: blur strength for frosted surfaces. */
  --blur-panel: blur(28px) saturate(178%);
  --blur-chrome: blur(22px) saturate(168%);
}

/**
 * Users who ask their OS for less motion get none of the slide and fade
 * transitions. The rail still opens and closes — it simply arrives.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0s;
    --duration-base: 0s;
    --duration-slow: 0s;
  }
}
/**
 * Breakpoints and responsive helpers.
 *
 * Mobile-first: base rules are the phone layout, and mixins widen from there.
 * Components must not hard-code widths in media queries — import this and use
 * the mixins, so a future change to where the layout breaks is one edit here.
 *
 * The values are chosen from the layout, not from device marketing names:
 *
 *   sm  480px   phone landscape / large phone
 *   md  760px   the rail stops being a bottom sheet and becomes a side panel
 *   lg  1100px  room for the rail and the video side by side, comfortably
 *   xl  1400px  wide desktop
 */
/** Width at or above a named breakpoint. */
/** Width below a named breakpoint. Prefer `from()`; use this for overrides. */
/**
 * Coarse pointer — a finger, not a mouse.
 *
 * Tied to input, not width: a 1200px-wide tablet still needs large targets
 * and gets no hover. Use this for touch sizing rather than guessing from the
 * viewport.
 */
/** Devices that genuinely support hover — guards :hover-only affordances. */
/**
 * Safe-area padding for the notch and the home indicator.
 *
 * The app runs inside an Android WebView where the bottom inset is real; the
 * `max()` keeps a sane minimum on devices reporting zero.
 */
/** Visually hidden but available to screen readers. */
/**
 * A viewport too short for the desktop layout, regardless of its width.
 *
 * A phone held in landscape is ~900px wide and ~400px tall. Width alone reads
 * that as a small desktop, so it got a full-height side rail and a dock sized
 * for a tall stage — the rail covered the video, the panel's dark-on-dark text
 * was unreadable, and the caption ran under the panel edge.
 *
 * Height is the thing that actually constrains this layout, so it is the thing
 * tested. Paired with `orientation: landscape` so a tall narrow phone keeps the
 * bottom sheet it is already correct with.
 */
/** Compact: either narrow enough or short enough to need the phone chrome. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /**
   * The consultation is a full-bleed dark stage, so the document ground is
   * the shell colour: any gap around the app (rubber-banding, a short route)
   * shows the stage rather than a white flash.
   */
  background: var(--color-shell);
  color: var(--color-ink);
}

/**
 * The stage is fixed to the viewport and scrolling happens inside panels, so
 * the document itself must not scroll — otherwise the dock drifts on mobile
 * when the URL bar collapses.
 */
body {
  overflow: hidden;
  overscroll-behavior: none;
}

app-root {
  display: block;
  width: 100%;
  height: 100%;
}

video {
  display: block;
  background: var(--color-shell);
}

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

/**
 * Remove focus rings for pointer users only. Keyboard focus stays visible
 * everywhere — components opt into the themed ring via the focus-ring mixins.
 */
:focus:not(:focus-visible) {
  outline: none;
}

/**
 * Touch targets.
 *
 * Interactive elements are at least 44px on touch devices. Applied globally
 * so a new control cannot ship below the accessible minimum by omission.
 */
@media (pointer: coarse) {
  button,
  [role=button],
  a[href] {
    min-height: 44px;
  }
}
/** Screen-reader-only utility, for icon-only controls and live regions. */
.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;
}

/* WebView: honour the display cutout and gesture areas. */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/*# sourceMappingURL=styles.69903f3b06e74f71.css.map*/