@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
/* v2 tokens are defined on :root so both the prejoin page and the
   meeting room can read them. The meeting room scopes its rules under
   body.meeting-room (v2 is the default — the ?ui=v2 flag was dropped). */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --body-bg: linear-gradient(135deg, #0e0e14, #1e1e28);
    --border: 0.5px solid rgb(255 255 255 / 18%);
    --border-radius: 1.125rem;
    --msger-width: 800px;
    --msger-height: 700px;
    --msger-bubble-width: 85%;
    --msger-bg: linear-gradient(135deg, #0e0e14, #1e1e28);
    --wb-width: 1920px;
    --wb-height: 1080px;
    --wb-bg: linear-gradient(135deg, #0e0e14, #1e1e28);
    --select-bg: #161622;
    --select-border-radius: 12px;
    --select-focus-color: rgba(102, 190, 255, 0.5);
    --left-msg-bg: #141420;
    --right-msg-bg: #1a1a26;
    --private-msg-bg: #6b1226;
    --box-shadow: 0px 8px 16px 0px rgb(0 0 0);
    --btns-hover-scale: scale(1.1);
    --settings-bg: linear-gradient(135deg, #0e0e14, #1e1e28);
    --tab-btn-active: #1e1e28;
    --btns-bg-color: rgba(10, 10, 16, 0.8);

    /* bottom buttons bar horizontal default */
    --bottom-btns-top: auto;
    --bottom-btns-left: 50%;
    --bottom-btns-bottom: 0;
    --bottom-btns-translate-X: -50%;
    --bottom-btns-translate-Y: 0%;
    --bottom-btns-margin-bottom: 18px;
    --bottom-btns-flex-direction: row;

    --transcription-height: 680px;
    --transcription-width: 420px;
    --trx-bg: linear-gradient(135deg, #0e0e14, #1e1e28);

    --editor-container-width: 100%;
    --editor-container-height: 100%;
    --editor-height: 85vh;

    --vmi-wh: 15vw;
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
    --videoObjFit: cover;

    --dd-color: #e8e8ec;

    --videoBar-active: 1px solid rgba(102, 190, 255, 0.32);
}

* {
    outline: none;
    font-family: 'Montserrat';
}

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

/* ---------------------------------------------------------------------------
   v2 design tokens — Himitsu Lab briefing

   Defined on :root so they're always available. Both the prejoin page and
   the meeting room (default v2 chrome — ?ui=v2 flag dropped) read from
   these same tokens. v1 styles do not reference --v2-* variables, so
   there's no leak into v1 surfaces.

   All v2 surfaces read from these custom properties; legacy rules below the
   marker stay unchanged.
   --------------------------------------------------------------------------- */
:root {
    /* 9-color palette */
    --v2-bg: #0a0b14;
    --v2-surface: #15171f;
    --v2-surface-2: #1c1f2a;
    --v2-accent: #5b5bf7;
    --v2-live: #ff6b5b;
    --v2-ok: #4dd4b5;
    --v2-warn: #f2b847;
    --v2-text: #ececf3;
    --v2-text-dim: #9b9db0;
    --v2-text-mute: #62647a;

    /* 3-font stack */
    --v2-font-display: 'Manrope', 'Inter', system-ui, sans-serif;
    --v2-font-body: 'Inter', system-ui, sans-serif;
    --v2-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

    /* Line-height scale */
    --v2-lh-display: 1.05;
    --v2-lh-h2: 1.2;
    --v2-lh-h3: 1.3;
    --v2-lh-body: 1.55;
    --v2-lh-small: 1.4;

    /* Spacing scale — 4/8/12/16/24/32/48 */
    --v2-space-1: 4px;
    --v2-space-2: 8px;
    --v2-space-3: 12px;
    --v2-space-4: 16px;
    --v2-space-5: 24px;
    --v2-space-6: 32px;
    --v2-space-7: 48px;

    /* Radius scale — 4/8/12/full */
    --v2-radius-sm: 4px;
    --v2-radius-md: 8px;
    --v2-radius-lg: 12px;
    --v2-radius-pill: 9999px;

    /* Surfaces / chrome */
    --v2-shell-bg: var(--v2-bg);
    --v2-topbar-bg: rgba(10, 11, 20, 0.72);
    --v2-topbar-border: 1px solid rgba(236, 236, 243, 0.06);
    --v2-text-primary: var(--v2-text);
    --v2-text-secondary: var(--v2-text-dim);
    --v2-text-tertiary: var(--v2-text-mute);
    --v2-divider: 1px solid rgba(236, 236, 243, 0.08);
    --v2-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --v2-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5);
}