/* ===========================================================================
   Habibi TTS - design system
   ---------------------------------------------------------------------------
   One neutral scale + one accent. No gradients, no glows, no second accent.
   Colour is reserved for two jobs: the primary action, and money/credit values.
   Everything else is neutral and separated by space, weight and hairlines.

   Tailwind handles LAYOUT (flex/grid/spacing) in the templates.
   This file handles LOOK (colour, borders, states) via component classes,
   so a template never hardcodes a palette.
   =========================================================================== */

:root {
    color-scheme: dark;

    /* Neutral ramp - true grey, not blue-grey */
    --c-canvas: 10 10 11;
    --c-surface: 24 24 27;
    --c-sunken: 16 16 18;
    --c-line: 39 39 42;
    --c-line-strong: 63 63 70;

    --c-ink: 250 250 250;
    --c-ink-2: 161 161 170;
    /* 4.85:1 on the surface behind it. The previous #71717a measured
       3.67:1, which 13px muted text and 11px labels do not clear. The
       light theme's own #71717a sits on white and passes at 4.65:1. */
    --c-ink-3: 133 133 143;

    /* The single accent */
    --c-accent: 16 185 129;
    --c-accent-soft: 6 78 59;
    --c-on-accent: 9 9 11;

    --c-danger: 244 63 94;
    --c-warn: 234 179 8;

    --radius: 10px;
    --radius-lg: 14px;
}

/* Dark is the product's default look, not a system-following preference.
   Light stays available, but only when the viewer asks for it via the toggle. */
:root[data-theme="light"] {
    color-scheme: light;
    --c-canvas: 250 250 250;
    --c-surface: 255 255 255;
    --c-sunken: 244 244 245;
    --c-line: 228 228 231;
    --c-line-strong: 212 212 216;
    --c-ink: 24 24 27;
    --c-ink-2: 82 82 91;
    --c-ink-3: 113 113 122;
    --c-accent: 5 150 105;
    --c-accent-soft: 209 250 229;
    --c-on-accent: 255 255 255;
    --c-danger: 225 29 72;
    --c-warn: 161 98 7;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html,
body {
    background: rgb(var(--c-canvas));
    color: rgb(var(--c-ink));
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

[dir="rtl"] body,
html[dir="rtl"],
body.font-ar,
:lang(ar) {
    font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgb(var(--c-accent) / 0.25);
    color: rgb(var(--c-ink));
}

:focus-visible {
    outline: 2px solid rgb(var(--c-accent));
    outline-offset: 2px;
}

.ar {
    font-family: "Cairo", system-ui, sans-serif;
}

.mono {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */

.t-title {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: rgb(var(--c-ink));
}

.t-section {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgb(var(--c-ink));
}

.t-body {
    font-size: 0.875rem;
    color: rgb(var(--c-ink-2));
    line-height: 1.6;
}

.t-muted {
    font-size: 0.8125rem;
    color: rgb(var(--c-ink-3));
}

.t-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(var(--c-ink-3));
}

.t-accent {
    color: rgb(var(--c-accent));
}

/* A link inside a paragraph must not be distinguishable by colour alone.
   Standalone accent links - buttons, nav, list rows - carry their own
   shape and are left as they are. */
p a.t-accent,
.t-body a.t-accent,
.t-muted a.t-accent {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.t-danger {
    color: rgb(var(--c-danger));
}

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */

.card {
    background: rgb(var(--c-surface));
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius-lg);
}

.card-pad {
    padding: 1.25rem;
}

.sunken {
    background: rgb(var(--c-sunken));
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius);
}

.divide-line > * + * {
    border-top: 1px solid rgb(var(--c-line));
}

.hr {
    height: 1px;
    background: rgb(var(--c-line));
    border: 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5625rem 0.9375rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: 0.8125rem;
    font-weight: 550;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
    white-space: nowrap;
    text-decoration: none;
}

.btn:disabled,
.btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-primary {
    background: rgb(var(--c-accent));
    color: rgb(var(--c-on-accent));
}

.btn-primary:hover:not(:disabled) {
    background: rgb(var(--c-accent) / 0.88);
}

.btn-secondary {
    background: rgb(var(--c-sunken));
    color: rgb(var(--c-ink));
    border-color: rgb(var(--c-line));
}

.btn-secondary:hover:not(:disabled) {
    border-color: rgb(var(--c-line-strong));
}

.btn-ghost {
    background: transparent;
    color: rgb(var(--c-ink-2));
}

.btn-ghost:hover:not(:disabled) {
    background: rgb(var(--c-sunken));
    color: rgb(var(--c-ink));
}

.btn-danger {
    background: transparent;
    color: rgb(var(--c-danger));
    border-color: rgb(var(--c-danger) / 0.35);
}

.btn-danger:hover:not(:disabled) {
    background: rgb(var(--c-danger) / 0.1);
}

/* The recharge call-to-action. Outlined rather than filled so it never competes
   with the page's real primary action. */
.btn-topup {
    background: transparent;
    color: rgb(var(--c-warn));
    border-color: rgb(var(--c-warn) / 0.45);
}

.btn-topup:hover:not(:disabled) {
    background: rgb(var(--c-warn) / 0.1);
    border-color: rgb(var(--c-warn) / 0.7);
}

.btn-lg {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
}

.btn-xl {
    padding: 0.9375rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
}

.btn-sm {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
}

.btn-block {
    width: 100%;
}

/* --------------------------------------------------------------------------
   Generate transcript
   -------------------------------------------------------------------------- */
/* Its own green rather than the accent: this is the one button on the page
   that writes words instead of spending tokens, and it should not be mistaken
   for the primary action, which is generating the voice. */
.btn-scriptwriter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    background: #0e794b;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 550;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 0.15s, opacity 0.15s;
}

.btn-scriptwriter:hover:not(:disabled) {
    background: #0b643e;
}

.btn-scriptwriter:disabled,
.btn-scriptwriter.is-busy {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-scriptwriter svg {
    flex: 0 0 auto;
}

/* The four text tools sit on one line, the writer first. Each is a peer: the
   page has exactly one filled button and it is the one that makes audio. */
.studio-toolbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.studio-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Outlined rather than filled, for the same reason. */
.btn-scriptwriter-outline {
    background: transparent;
    border-color: #0e794b;
    color: #0e794b;
}

:root:not([data-theme="light"]) .btn-scriptwriter-outline,
[data-theme="dark"] .btn-scriptwriter-outline {
    border-color: #1aa86a;
    color: #1aa86a;
}

.btn-scriptwriter-outline:hover:not(:disabled) {
    background: rgb(14 121 75 / 0.12);
}

.scriptwriter {
    position: static;
}

/* Below the row and over the composer, the way the other tool menus open,
   rather than pushing the textarea down the page every time it is used. */
.scriptwriter-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    inset-inline: 0;
    z-index: 40;
    padding: 1rem;
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius);
    background: rgb(var(--c-surface));
    box-shadow: 0 18px 40px rgb(0 0 0 / 0.28);
}

/* The taller composer, for people writing full scripts rather than a line.
   Desktop only as a min-height: on mobile the composer is sized against the
   viewport, and min-height wins over max-height, so an unscoped value here
   would push the tools and the generate button off the screen. */
@media (min-width: 1024px) {
    #tts-text.is-expanded { min-height: 560px; }
}

/* The panel header for each side of the Studio. */
.studio-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.studio-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(var(--c-ink));
}

.studio-panel-title svg {
    flex: 0 0 auto;
    color: rgb(var(--c-accent));
}

.scriptwriter-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.scriptwriter-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Social follow rewards
   -------------------------------------------------------------------------- */
.social-card {
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s, opacity 0.15s;
}

.social-card:hover {
    border-color: rgb(var(--c-accent) / 0.4);
}

.social-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Each network in its own colour: the mark is the thing being recognised, and
   a row of identical grey glyphs asks the reader to stop and read instead. */
.social-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius);
    background: rgb(var(--c-ink) / 0.04);
}

.social-mark svg {
    width: 1.25rem;
    height: 1.25rem;
}

.social-mark-linkedin { color: #0A66C2; }
.social-mark-instagram { color: #E4405F; }
.social-mark-facebook { color: #1877F2; }
.social-mark-tiktok { color: rgb(var(--c-ink)); }

.social-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 999px;
    background: rgb(var(--c-accent));
    color: rgb(var(--c-on-accent));
}

.social-check svg {
    width: 0.875rem;
    height: 0.875rem;
}

.social-card-body {
    margin-top: 0.875rem;
    flex: 1;
}

.social-reward {
    margin-top: 0.25rem;
    font-size: 1.125rem;
}

/* A claimed card steps back rather than disappearing: the reader should still
   see that this one is done, not wonder where it went. */
.social-card-done {
    opacity: 0.72;
}

.social-done {
    cursor: default;
    pointer-events: none;
}

.social-error:empty {
    display: none;
}

/* Brand marks on the sign-in buttons. Their own colours in both themes - a
   provider logo recoloured to match the page is no longer the provider's
   logo - so nothing here touches fill. */
.oauth-logo {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */

.input,
.select,
.textarea {
    width: 100%;
    background: rgb(var(--c-sunken));
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius);
    padding: 0.5625rem 0.75rem;
    font-size: 0.875rem;
    color: rgb(var(--c-ink));
    transition: border-color 0.15s;
}

.input::placeholder,
.textarea::placeholder {
    color: rgb(var(--c-ink-3));
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: rgb(var(--c-accent));
}

.textarea {
    resize: none;
    line-height: 1.7;
}

.select {
    appearance: none;
    padding-inline-end: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2371717a'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5'  stroke='%2371717a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    /* The shorthand has no logical form, so the RTL page flips it explicitly
       below rather than leaving the arrow stranded on the reading-end side. */
    background-position: right 0.5rem center;
    background-size: 1.125rem;
}

html[dir="rtl"] .select {
    background-position: left 0.5rem center;
}

.field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 550;
    color: rgb(var(--c-ink-2));
    margin-bottom: 0.375rem;
}

/* Radio / checkbox rendered as a selectable tile.
   Markup: <label class="choice"><input type="radio" class="choice-input"><span class="choice-body">…</span></label> */
.choice-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-body {
    display: block;
    border: 1px solid rgb(var(--c-line));
    background: rgb(var(--c-sunken));
    border-radius: var(--radius);
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    color: rgb(var(--c-ink-2));
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.choice-body:hover {
    border-color: rgb(var(--c-line-strong));
}

.choice-input:checked + .choice-body {
    border-color: rgb(var(--c-accent));
    color: rgb(var(--c-ink));
    background: rgb(var(--c-accent) / 0.07);
}

.choice-input:focus-visible + .choice-body {
    outline: 2px solid rgb(var(--c-accent));
    outline-offset: 2px;
}

/* Compact variant for pill rows */
.choice-pill {
    display: inline-block;
    border: 1px solid rgb(var(--c-line));
    background: rgb(var(--c-sunken));
    border-radius: 999px;
    padding: 0.3125rem 0.75rem;
    font-size: 0.75rem;
    color: rgb(var(--c-ink-2));
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.choice-pill:hover {
    border-color: rgb(var(--c-line-strong));
}

.choice-input:checked + .choice-pill {
    border-color: rgb(var(--c-accent));
    color: rgb(var(--c-accent));
    background: rgb(var(--c-accent) / 0.09);
}

/* Square scale cell, used by every 1-5 rating row */
.choice-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgb(var(--c-line));
    background: rgb(var(--c-sunken));
    border-radius: var(--radius);
    font-size: 0.8125rem;
    color: rgb(var(--c-ink-3));
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
    font-variant-numeric: tabular-nums;
}

.choice-cell:hover {
    border-color: rgb(var(--c-line-strong));
    color: rgb(var(--c-ink));
}

.choice-input:checked + .choice-cell {
    border-color: rgb(var(--c-accent));
    color: rgb(var(--c-accent));
    background: rgb(var(--c-accent) / 0.09);
    font-weight: 600;
}

/* Segmented control */
.seg {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: rgb(var(--c-sunken));
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius);
}

.seg-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.75rem;
    border-radius: 7px;
    font-size: 0.8125rem;
    font-weight: 550;
    color: rgb(var(--c-ink-3));
    cursor: pointer;
    border: 0;
    background: transparent;
    transition: background-color 0.15s, color 0.15s;
}

.seg-item:hover {
    color: rgb(var(--c-ink));
}

.seg-item[aria-selected="true"],
.choice-input:checked + .seg-item {
    background: rgb(var(--c-surface));
    color: rgb(var(--c-ink));
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
}

/* A .seg that states rather than offers - the accepted cards, where the choice
   itself belongs to someone else's checkout page. Same shape as the control so
   it sits in the card layout, without the affordances that would invite a
   click that does nothing. */
.seg-static {
    cursor: default;
}

.seg-note {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4375rem 0.75rem;
    border-radius: 7px;
    font-size: 0.8125rem;
    font-weight: 550;
    color: rgb(var(--c-ink-3));
    background: transparent;
    cursor: default;
    user-select: none;
}

/* The mark on a choice - a speed dial, a purpose. Sized in em so it tracks
   whatever type size the control it is dropped into uses, and drawn in
   currentColor so it inherits that control's selected and hover states rather
   than needing a rule per state. */
.choice-icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
}

/* The speed and purpose tabs stack their mark above the label. Side by side,
   four Arabic purpose labels plus four marks do not fit the options column,
   and what gives is the end of each label - ريل لمواقع التواصل truncated to
   ريل لمو... tells the user less than no icon would have. */
.speed-tab-btn,
.purpose-tab-btn {
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0.375rem;
    line-height: 1.3;
    text-align: center;
}

.speed-tab-btn .choice-icon,
.purpose-tab-btn .choice-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.seg-item[aria-selected="true"] .choice-icon {
    color: rgb(var(--c-accent));
}

/* --------------------------------------------------------------------------
   Payment marks
   --------------------------------------------------------------------------
   The cards and services a panel actually accepts, as their own logos. Each
   sits on a light plate: half of these marks are dark navy on transparent
   (Algerie Poste, PayPal, BaridiMob) and would disappear against the dark
   theme's canvas, and a plate for some and not others reads as a mistake.
   -------------------------------------------------------------------------- */

.pay-marks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.pay-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    padding: 0 0.625rem;
    border-radius: 9px;
    border: 1px solid rgb(var(--c-line));
    /* Not var(--c-surface): the plate has to stay light in both themes, since
       it exists to hold marks that are only legible on a light ground. */
    background: #fff;
}

.pay-mark img {
    display: block;
    width: auto;
    height: 1.25rem;
    /* A cap, so one wide wordmark cannot set the width of the whole row. */
    max-width: 5.5rem;
    object-fit: contain;
}

/* Wordmarks sit at 18px, where they are still readable because they are wide.
   A square or stacked mark at 18px is a smudge - Algerie Poste is a mark over
   a wordmark, CIB is three letters inside a badge - so those get the height
   the wordmarks do not need. */
.pay-mark-tall img {
    height: 1.75rem;
}

/* --------------------------------------------------------------------------
   Voice picker
   --------------------------------------------------------------------------
   One selectable row per voice: index, avatar, name and accent, a preview
   link, and the per-conversion limit. Selection is a real radio input, so the
   whole list is keyboard- and screen-reader-navigable.
   -------------------------------------------------------------------------- */

.voice-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.625rem;
    /* Extra room on the start side for the absolutely-positioned index badge. */
    padding-inline: 1.75rem 0.75rem;
    border: 1px solid rgb(var(--c-line));
    background: rgb(var(--c-sunken));
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.voice-row:hover {
    border-color: rgb(var(--c-line-strong));
}

.voice-row.is-selected {
    border-color: rgb(var(--c-accent));
    background: rgb(var(--c-accent) / 0.07);
}

.voice-index {
    position: absolute;
    top: 0.3125rem;
    inset-inline-start: 0.4375rem;
    font-size: 0.625rem;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--c-ink-3));
    line-height: 1;
}

.voice-radio-dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid rgb(var(--c-line-strong));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s;
}

.voice-radio-dot::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgb(var(--c-accent));
    opacity: 0;
    transition: opacity 0.15s;
}

.voice-row.is-selected .voice-radio-dot {
    border-color: rgb(var(--c-accent));
}

.voice-row.is-selected .voice-radio-dot::after {
    opacity: 1;
}

/* Initial-based avatar: no image assets, still distinct per voice. */
.avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    background: rgb(var(--c-line));
    color: rgb(var(--c-ink-2));
    border: 1px solid rgb(var(--c-line-strong));
    user-select: none;
}

.voice-row.is-selected .avatar {
    background: rgb(var(--c-accent) / 0.15);
    border-color: rgb(var(--c-accent) / 0.4);
    color: rgb(var(--c-accent));
}

/* Inline text action, e.g. the per-voice "Example" preview. */
.link-action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 550;
    color: rgb(var(--c-accent));
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.link-action:hover {
    text-decoration: underline;
}

.link-quiet {
    color: rgb(var(--c-ink-3));
    font-size: 0.75rem;
    text-decoration: none;
}

.link-quiet:hover {
    color: rgb(var(--c-ink));
}

/* Scroll region for long lists, with the fade cue at the bottom edge. */
.scroll-list {
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* --------------------------------------------------------------------------
   Disclosure (More settings)
   -------------------------------------------------------------------------- */

details > summary {
    list-style: none;
}

details > summary::-webkit-details-marker,
details > summary::marker {
    display: none;
    content: "";
}

details > summary:hover .chevron {
    color: rgb(var(--c-ink-2));
}

details[open] > summary .chevron {
    transform: rotate(180deg);
}

.chevron {
    transition: transform 0.15s ease;
}

/* --------------------------------------------------------------------------
   Dropdown menu (Insert pause)
   -------------------------------------------------------------------------- */

.menu-wrap {
    position: relative;
}

.menu {
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 0.375rem);
    z-index: 30;
    min-width: 13rem;
    padding: 0.25rem;
    background: rgb(var(--c-surface));
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.4);
    display: none;
}

/* The default anchors to the menu's own inline-start edge. A menu opened from
   a button hugging the far edge of the header needs the other edge instead,
   or it runs off the viewport. */
.menu-end {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.menu.is-open {
    display: block;
    animation: fade-in 0.12s ease-out;
}

.menu-head {
    padding: 0.5rem 0.5625rem 0.625rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid rgb(var(--c-line));
}

.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.4375rem 0.5625rem;
    border: 0;
    background: none;
    border-radius: 7px;
    font-size: 0.8125rem;
    color: rgb(var(--c-ink-2));
    text-decoration: none;
    cursor: pointer;
    text-align: start;
}

.menu-item:hover {
    background: rgb(var(--c-sunken));
    color: rgb(var(--c-ink));
}

.menu-item.is-current {
    color: rgb(var(--c-ink));
}

/* On a phone a menu cannot be anchored to its own button and stay on screen.
   The header wraps below `sm`, so the account button lands at a different x at
   every width - at 390 it is against one edge, at 360 it has wrapped to the
   other - and the panel follows it off the viewport. It was leaving `Account`
   through `Sign out` entirely past the right edge in Arabic, with nothing to
   scroll to them.

   Pinned to the viewport instead, keeping only its vertical placement under
   the button. Same treatment the Studio's own tool menus already get. */
@media (max-width: 639px) {
    .menu {
        position: fixed;
        top: auto;
        inset-inline: 12px;
        min-width: 0;
        max-width: none;
        max-height: min(70svh, 28rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 60;
    }

    /* Touch targets. 13px rows at 7px of padding are a 30px target; the
       guidance is 44, and this is the menu holding Sign out. */
    .menu-item {
        min-height: 44px;
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
    }

    .menu-head {
        padding: 0.625rem 0.75rem 0.75rem;
    }
}

/* The header wraps on a phone, and what wraps last is the account button -
   which ends up alone on a third row, on a sticky bar already eating a quarter
   of the screen. The word after the balance is what buys that row back: a
   number sitting against a Top up button does not need "tokens" spelled out,
   and in Arabic توكن is the longest part of the chip. */
@media (max-width: 479px) {
    .balance-chip > span + span {
        display: none;
    }

    .balance-chip {
        padding-inline: 0.5rem;
    }
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.4375rem;
    border-radius: 6px;
    border: 1px solid rgb(var(--c-line));
    background: rgb(var(--c-sunken));
    color: rgb(var(--c-ink-2));
    font-size: 0.6875rem;
    font-weight: 550;
    line-height: 1.2;
    white-space: nowrap;
}

.badge-accent {
    border-color: rgb(var(--c-accent) / 0.35);
    background: rgb(var(--c-accent) / 0.1);
    color: rgb(var(--c-accent));
}

.badge-danger {
    border-color: rgb(var(--c-danger) / 0.35);
    background: rgb(var(--c-danger) / 0.1);
    color: rgb(var(--c-danger));
}

.badge-warn {
    border-color: rgb(var(--c-warn) / 0.35);
    background: rgb(var(--c-warn) / 0.1);
    color: rgb(var(--c-warn));
}

.badge-solid {
    border-color: transparent;
    background: rgb(var(--c-accent));
    color: rgb(var(--c-on-accent));
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius-lg);
    background: rgb(var(--c-surface));
}

table.tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

table.tbl th {
    text-align: start;
    padding: 0.6875rem 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(var(--c-ink-3));
    background: rgb(var(--c-sunken));
    border-bottom: 1px solid rgb(var(--c-line));
    white-space: nowrap;
}

table.tbl td {
    padding: 0.6875rem 1rem;
    color: rgb(var(--c-ink-2));
    border-bottom: 1px solid rgb(var(--c-line) / 0.6);
}

table.tbl tbody tr:last-child td {
    border-bottom: 0;
}

table.tbl tbody tr:hover td {
    background: rgb(var(--c-sunken) / 0.5);
}

.num {
    text-align: right;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--c-ink));
}

.empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: rgb(var(--c-ink-3));
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Meters
   -------------------------------------------------------------------------- */

.meter {
    height: 4px;
    border-radius: 999px;
    background: rgb(var(--c-line));
    overflow: hidden;
}

.meter > span {
    display: block;
    height: 100%;
    background: rgb(var(--c-accent));
    border-radius: 999px;
}

.meter-neutral > span {
    background: rgb(var(--c-ink-3));
}

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */

.notice {
    border: 1px solid rgb(var(--c-line));
    background: rgb(var(--c-surface));
    border-radius: var(--radius);
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
    color: rgb(var(--c-ink-2));
}

.notice-accent {
    border-color: rgb(var(--c-accent) / 0.3);
    background: rgb(var(--c-accent) / 0.06);
}

.notice-danger {
    border-color: rgb(var(--c-danger) / 0.3);
    background: rgb(var(--c-danger) / 0.06);
    color: rgb(var(--c-danger));
}

.notice-warn {
    border-color: rgb(var(--c-warn) / 0.3);
    background: rgb(var(--c-warn) / 0.06);
}

/* --------------------------------------------------------------------------
   Audio
   -------------------------------------------------------------------------- */

audio {
    width: 100%;
    height: 36px;
    border-radius: var(--radius);
}

/* The native player is built for light backgrounds; invert it back on dark. */
:root:not([data-theme="light"]) audio {
    filter: invert(92%) hue-rotate(180deg) saturate(0.2);
}

:root[data-theme="light"] audio {
    filter: none;
}

/* --------------------------------------------------------------------------
   Code
   -------------------------------------------------------------------------- */

code,
kbd {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.8125em;
}

.code-block {
    background: rgb(var(--c-sunken));
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius);
    padding: 0.875rem 1rem;
    overflow-x: auto;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.75rem;
    line-height: 1.7;
    color: rgb(var(--c-ink-2));
    white-space: pre;
    tab-size: 2;
}

.code-block .tok-key {
    color: rgb(var(--c-accent));
}

.code-block .tok-str {
    color: rgb(var(--c-ink));
}

.code-block .tok-com {
    color: rgb(var(--c-ink-3));
}

.code-inline {
    background: rgb(var(--c-sunken));
    border: 1px solid rgb(var(--c-line));
    border-radius: 5px;
    padding: 0.0625rem 0.3125rem;
    color: rgb(var(--c-ink));
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.spinner {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.fade-in {
    animation: fade-in 0.2s ease-out;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--c-line-strong));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--c-ink-3));
}

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(0 0 0 / 0.6);
    backdrop-filter: blur(2px);
}

.modal.is-open {
    display: flex;
}

.modal-panel {
    width: 100%;
    max-width: 30rem;
    max-height: 88vh;
    overflow-y: auto;
    background: rgb(var(--c-surface));
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgb(0 0 0 / 0.35);
    animation: fade-in 0.2s ease-out;
}

/* ---------------------------------------------------------------------------
   Legal documents
   Long prose typed as plain HTML: the rhythm is set here once instead of
   hanging a utility class on every paragraph.
   --------------------------------------------------------------------------- */
.legal-doc h2 {
    font-size: 15px;
    font-weight: 600;
    color: rgb(var(--c-ink));
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.legal-doc h3 {
    font-size: 13.5px;
    font-weight: 600;
    color: rgb(var(--c-ink-2));
    margin-top: 1.1rem;
    margin-bottom: 0.35rem;
}

.legal-doc p,
.legal-doc li {
    font-size: 13.5px;
    line-height: 1.7;
    color: rgb(var(--c-ink-2));
}

.legal-doc p {
    margin-bottom: 0.75rem;
}

.legal-doc ul,
.legal-doc ol {
    margin: 0 0 0.9rem;
    margin-inline-start: 1.25rem;
    list-style: disc;
}

.legal-doc ol {
    list-style: decimal;
}

.legal-doc li {
    margin-bottom: 0.35rem;
}

.legal-doc a {
    color: rgb(var(--c-accent));
}

.legal-doc a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Layout shell, nav and footer links
   -------------------------------------------------------------------------- */

.shell {
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 640px) {
    .shell {
        padding-inline: 1.5rem;
    }
}

.skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    top: -3rem;
    z-index: 50;
    padding: 0.5rem 0.875rem;
    background: rgb(var(--c-accent));
    color: rgb(var(--c-on-accent));
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: top 0.15s;
}

.skip-link:focus {
    top: 0.75rem;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 550;
    color: rgb(var(--c-ink-2));
    text-decoration: none;
    white-space: nowrap;
}

.nav-link:hover {
    color: rgb(var(--c-ink));
    background: rgb(var(--c-sunken));
}

.nav-link.is-current {
    color: rgb(var(--c-ink));
    background: rgb(var(--c-sunken));
}

.balance-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius);
    border: 1px solid rgb(var(--c-line));
    background: rgb(var(--c-sunken));
    font-size: 0.8125rem;
    text-decoration: none;
}

.initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: rgb(var(--c-accent) / 0.15);
    color: rgb(var(--c-accent));
    font-size: 0.75rem;
    font-weight: 700;
}

.footer-link {
    display: block;
    font-size: 0.8125rem;
    color: rgb(var(--c-ink-2));
    text-decoration: none;
}

.footer-link:hover {
    color: rgb(var(--c-ink));
}

.footer-link.is-current {
    color: rgb(var(--c-accent));
}

/* --------------------------------------------------------------------------
   Home page
   -------------------------------------------------------------------------- */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgb(var(--c-line));
    background: rgb(var(--c-sunken));
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(var(--c-ink-2));
}

.eyebrow .dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 999px;
    background: rgb(var(--c-accent));
}

.display {
    font-size: 2rem;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: rgb(var(--c-ink));
}

@media (min-width: 640px) {
    .display {
        font-size: 2.5rem;
    }
}

.lede {
    font-size: 1rem;
    line-height: 1.6;
    color: rgb(var(--c-ink-2));
    max-width: 38rem;
}

.section-head {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.hero-panel {
    background: rgb(var(--c-surface));
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* --------------------------------------------------------------------------
   Logo animation
   --------------------------------------------------------------------------
   A port of the Natiq Studio logo scene to plain SVG + CSS. The authored
   version runs on the Claude Design canvas runtime (React, JSX, a 69 KB editor
   bundle); none of that belongs in a page load, so the four cues are rebuilt
   here as declarative animations on the real logo geometry.

   The timeline, in seconds, matching the authored scenes:
     Draw   0.0 - 1.7   the waveform strokes itself on, tip to tail
     Settle 1.7 - 3.0   the green mark fades in behind it, the whole thing
                        scales down to logo size, the trailing bar draws
     Reveal 3.0 - 3.7   the wordmark fades and rises into place
     Hold   3.7 - 4.8   one slow breath

   Each element carries its own delay, duration and easing rather than sharing
   one keyframe block, so a cue can be retimed without recomputing percentages.
   -------------------------------------------------------------------------- */

.natiq-logo {
    --nl-duration: 5.1s;
    --nl-iterations: 1; /* set to `infinite` to loop the whole scene */
    --nl-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); /* easeOutCubic  */
    --nl-ease-io: cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
    --nl-green: #0e8356; /* the logo green, identical to static/img/logo.svg */

    display: block;
    width: 100%;
    height: auto;
}

/* CSS transforms on SVG children default to a bounding-box origin; these two
   lines put them back in user-space coordinates, so the numbers below are the
   same ones the authored scene used. */
.natiq-logo g,
.natiq-logo text {
    transform-box: view-box;
    transform-origin: 0 0;
}

.nl-breathe {
    animation: nl-breathe 1.15s var(--nl-ease-io) 3.95s var(--nl-iterations) both;
}

.nl-mark {
    animation: nl-mark 1.3s var(--nl-ease-io) 1.7s var(--nl-iterations) both;
}

.nl-rect {
    animation: nl-in 0.6s var(--nl-ease-out) 1.7s var(--nl-iterations) both;
}

/* Two copies of the same path: green while it draws on bare canvas, white once
   the green mark is behind it. The crossfade is what makes the line look like
   it was always part of the logo. */
.nl-stroke {
    stroke-width: 32;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 524.2;
    animation: nl-draw 1.7s var(--nl-ease-out) 0s var(--nl-iterations) both;
}

.nl-stroke-lead {
    stroke: var(--nl-green);
    animation:
        nl-draw 1.7s var(--nl-ease-out) 0s var(--nl-iterations) both,
        nl-out 0.6s var(--nl-ease-out) 1.7s var(--nl-iterations) both;
}

.nl-stroke-final {
    stroke: #ffffff;
    animation:
        nl-draw 1.7s var(--nl-ease-out) 0s var(--nl-iterations) both,
        nl-in 0.6s var(--nl-ease-out) 1.7s var(--nl-iterations) both;
}

.nl-bar {
    stroke: #ffffff;
    stroke-width: 32;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 70;
    animation:
        nl-draw-bar 0.8s var(--nl-ease-out) 2.2s var(--nl-iterations) both,
        nl-in 0.6s var(--nl-ease-out) 1.7s var(--nl-iterations) both;
}

.nl-word {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 600;
    font-size: 64px;
    direction: ltr;
}

/* "natiq" arrives first, drifting the short distance out of the mark. */
.nl-word-natiq {
    fill: rgb(var(--c-ink));
    animation: nl-word 0.4s var(--nl-ease-out) 3s var(--nl-iterations) both;
}

/* ".studio" is then swept on left to right by a clip rect - a playhead
   crossing the word rather than a second fade, which is what makes the two
   halves read as one movement instead of two. */
.nl-word-studio {
    fill: rgb(var(--c-accent));
}

.nl-wipe-rect {
    transform-box: fill-box;
    transform-origin: left center;
    animation: nl-wipe 0.6s var(--nl-ease-out) 3.35s var(--nl-iterations) both;
}

@keyframes nl-draw {
    from { stroke-dashoffset: 524.2; }
    to   { stroke-dashoffset: 0; }
}

@keyframes nl-draw-bar {
    from { stroke-dashoffset: 70; }
    to   { stroke-dashoffset: 0; }
}

@keyframes nl-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes nl-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* translate(cx - 200s, cy - 160s) scale(s): the mark stays centred on (cx, cy)
   while it shrinks. It starts centred in the frame at (500, 500) and finishes
   on (296, 500), which parks it to the left of the wordmark. */
@keyframes nl-mark {
    from { transform: translate(200px, 260px) scale(1.5); }
    to   { transform: translate(136px, 372px) scale(0.8); }
}

/* One slow breath on the finished lockup, about the centre of the frame. */
@keyframes nl-breathe {
    0%, 100% { transform: translate(500px, 500px) scale(1) translate(-500px, -500px); }
    50%      { transform: translate(500px, 500px) scale(1.015) translate(-500px, -500px); }
}

@keyframes nl-word {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes nl-wipe {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Reduced motion gets the finished lockup, not a frozen blank first frame. */
@media (prefers-reduced-motion: reduce) {
    .natiq-logo * {
        animation: none !important;
    }
    .nl-stroke,
    .nl-bar {
        stroke-dashoffset: 0;
    }
    .nl-stroke-lead {
        opacity: 0;
    }
    .nl-mark {
        transform: translate(136px, 372px) scale(0.8);
    }
    .nl-wipe-rect {
        transform: scaleX(1);
    }
    .nl-rect,
    .nl-stroke-final,
    .nl-bar,
    .nl-word {
        opacity: 1;
    }
}

.tile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgb(var(--c-line));
    background: rgb(var(--c-surface));
}

.tile-value {
    font-size: 1.375rem;
    font-weight: 700;
    color: rgb(var(--c-ink));
}

.tile-label {
    font-size: 0.75rem;
    color: rgb(var(--c-ink-3));
}

.voice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.375rem;
    padding: 1rem 0.75rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgb(var(--c-line));
    background: rgb(var(--c-surface));
}

.price-figure {
    font-size: 1.75rem;
    font-weight: 700;
    color: rgb(var(--c-ink));
}

.sample-panel {
    background: rgb(var(--c-sunken));
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius-lg);
    padding: 1.125rem 1.25rem;
    line-height: 1.9;
}

.faq {
    border-top: 1px solid rgb(var(--c-line));
}

.faq-item {
    border-bottom: 1px solid rgb(var(--c-line));
    padding: 0.875rem 0;
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item p {
    margin-top: 0.625rem;
}

.faq-mark {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: rgb(var(--c-ink-3));
    transition: transform 0.15s;
}

.faq-item[open] .faq-mark {
    transform: rotate(180deg);
}

.cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgb(var(--c-line));
    background: rgb(var(--c-surface));
}

/* Voice chooser: compact trigger and a bounded, accessible modal. */
.voice-picker {
    border: 1px solid rgb(var(--c-line));
    border-radius: var(--radius);
    min-width: 0;
}
.voice-picker-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 56px;
    padding: 0.75rem;
    cursor: pointer;
    list-style: none;
}

.voice-picker-selection {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
}
.voice-picker-chevron { flex-shrink: 0; }

.voice-picker-options { padding: 0 0.75rem 0.75rem; }

.voice-picker-summary:focus-visible,
.voice-picker .voice-row:focus-within { outline: 2px solid rgb(var(--c-accent)); outline-offset: 2px; }

.voice-picker-summary { width: 100%; background: transparent; color: inherit; text-align: start; border: 0; border-radius: inherit; }
.voice-dialog {
    width: min(560px, calc(100vw - 24px));
    max-height: min(760px, calc(100dvh - 32px));
    margin: auto;
    padding: 0;
    border: 1px solid rgb(var(--c-line));
    border-radius: 16px;
    color: rgb(var(--c-ink));
    background: rgb(var(--c-surface));
    box-shadow: 0 24px 80px rgb(0 0 0 / 0.25);
}
.voice-dialog::backdrop { background: rgb(0 0 0 / 0.5); }
.voice-dialog[open] { display: flex; flex-direction: column; }
.voice-dialog-header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; padding: 1rem; }
.voice-dialog-header .t-muted { margin-top: 0.375rem; }
.voice-dialog .voice-picker-options { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-inline: 1rem; }
.voice-dialog #voices-container { max-height: none; overflow: visible; }
.voice-dialog-header, .voice-dialog-footer { flex-shrink: 0; }
.voice-dialog-footer { display: flex; gap: 0.75rem; padding: 1rem; border-top: 1px solid rgb(var(--c-line)); }
.voice-dialog-footer .btn { flex: 1; min-height: 44px; }
@media (max-width: 640px) {
    .voice-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 24px); }
    .voice-dialog-footer { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
}

/* Mobile Studio: one compact write / choose / generate flow. */
.studio-compact-option { display: none; }
@media (max-width: 1023px) {
    #tts-form { display: flex; flex-direction: column; gap: 0; }
    #tts-form .studio-script, #tts-form .studio-controls { display: contents; }
    #tts-form .studio-script > *, #tts-form .studio-controls > * { margin-top: 0; margin-bottom: 0; width: 100%; }
    .studio-limits { display: none; }
    /* The panel headings are the two-column layout's way of labelling its
       sides. Here the composer, the tools and the options are one joined card,
       and a heading above it would cut that card in half. The character count
       is still under the box. */
    .studio-panel-head { display: none; }

    /* Where the pricing paragraph used to sit: after the generate button, out
       of the way of the write / choose / generate flow. */
    #tts-form .studio-info { order: 4; margin-top: 1rem; font-size: 11px; line-height: 1.6; }



    /* Pinned to the viewport, exactly as the other tool menus are: the strip it
       would otherwise hang from is only a few pixels tall, and the panel is
       taller than the composer above it. */
    .scriptwriter-panel {
        position: fixed;
        top: auto;
        bottom: 12px;
        inset-inline: 12px;
        z-index: 60;
        max-height: min(72svh, 560px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    #tts-form #tts-text.is-expanded { height: 45svh; max-height: 60svh; }
    #tts-form .studio-composer { order: 0; border: 1px solid rgb(var(--c-line)); border-top: 0; border-bottom: 0; border-radius: 0; background: rgb(var(--c-surface)); }
    #tts-form #tts-text {
        display: block;
        height: clamp(150px, 25svh, 220px);
        min-height: 150px;
        max-height: 45svh;
        border: 0;
        border-radius: 0;
        font-size: 16px;
        resize: vertical;
        background: transparent;
    }
    /* The toolbar splits here: the writer goes above the composer, the three
       insert menus stay in their strip below it. Crowding a fourth control into
       that strip cost every label its last few characters. */
    #tts-form .studio-toolbar { display: contents; }
    /* The strip under the composer carries two counts and two icons across a
       phone; at 11px they sit on one line with room to spare. */
    .studio-composer .absolute { font-size: 11px; gap: 0.25rem; }
    /* The width rule above reaches only direct children of .studio-script, and
       the wrapper hands its own children straight to the column instead. */
    #tts-form .studio-toolbar > * { width: 100%; }

    /* "Help me write" is the answer to an empty box, so on a phone it sits
       above the box rather than beside the tools for editing what is already
       there. Full width, and it forms the top of the joined card. */
    #tts-form .scriptwriter {
        order: -1;
        padding: 0.5rem;
        border: 1px solid rgb(var(--c-line));
        border-bottom: 0;
        border-radius: 16px 16px 0 0;
        background: rgb(var(--c-surface));
    }
    #tts-form .scriptwriter > .btn-scriptwriter {
        width: 100%; min-height: 44px; font-size: 13px;
    }

    /* Three across, as before the writer existed: at a third of a phone each
       label still fits whole. */
    #tts-form .studio-tools {
        order: 1; display: grid; grid-template-columns: repeat(3, 1fr);
        align-items: stretch; gap: 0.25rem;
        padding: 0.25rem 0.5rem;
        border-inline: 1px solid rgb(var(--c-line));
        background: rgb(var(--c-surface));
    }
    .studio-tools > * { margin: 0 !important; min-width: 0; }
    .studio-tools > .menu-wrap > .btn {
        width: 100%; padding-inline: 0.35rem; font-size: 11px; min-height: 40px; gap: 0.25rem;
    }
    .studio-tools > .menu-wrap > .btn > span:not([aria-hidden]) {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
    }
    .studio-tools .menu { position: fixed; top: auto; inset-inline: 12px; width: auto !important; max-width: calc(100vw - 24px) !important; z-index: 60; }
    #tts-form .studio-options {
        order: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
        padding: 0.5rem 0.75rem 0.75rem;
        background: rgb(var(--c-surface)); border-inline: 1px solid rgb(var(--c-line));
    }
    .studio-options #voice-step { grid-column: 1 / -1; background: rgb(var(--c-sunken)); }
    .studio-options .voice-picker-summary { min-height: 44px; padding: 0.5rem 0.75rem; }
    .studio-options .voice-picker-summary .t-section { font-size: 12px; }
    .studio-desktop-option { display: none; }
    .studio-compact-option { display: block; position: relative; min-width: 0; }
    .studio-dropdown-trigger {
        display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
        /* height:100% so that when one label wraps to two lines the pair still
           reads as a pair, rather than one box standing taller than the other. */
        width: 100%; height: 100%; min-height: 54px; padding: 0.375rem 0.625rem;
        border: 1px solid rgb(var(--c-line)); border-radius: var(--radius);
        background: rgb(var(--c-sunken)); color: rgb(var(--c-ink)); text-align: start;
    }
    .studio-dropdown-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 0.125rem; }
    /* The chosen option's own mark, so the collapsed row says which pace and
       which job are set without having to be opened. */
    .studio-dropdown-mark {
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        width: 34px; height: 34px; border-radius: 9px;
        background: rgb(var(--c-accent) / 0.12); color: rgb(var(--c-accent));
    }
    .studio-dropdown-mark .choice-icon { width: 18px; height: 18px; }
    .studio-dropdown-label { font-size: 10px; color: rgb(var(--c-ink-2)); }
    /* Wrapped to two lines rather than truncated. The mark takes 42px out of
       the row, which at 360px is enough to cost إعلان تجاري its second word -
       and a purpose the user cannot read is worse than a row one line taller.
       Clamped at two so a long label cannot push the strip out of shape. */
    .studio-dropdown-value {
        font-size: 14px;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        overflow-wrap: anywhere;
    }
    .studio-dropdown-trigger > svg { flex-shrink: 0; color: rgb(var(--c-ink-2)); }
    .studio-dropdown-trigger[aria-expanded="true"] > svg { transform: rotate(180deg); }
    .studio-dropdown-list {
        position: absolute; bottom: calc(100% + 6px); inset-inline: 0; z-index: 65;
        max-height: min(260px, 40svh); overflow-y: auto; overscroll-behavior: contain;
        padding: 0.25rem; border: 1px solid rgb(var(--c-line)); border-radius: var(--radius);
        background: rgb(var(--c-surface)); box-shadow: 0 8px 28px rgb(0 0 0 / 0.18);
    }
    .studio-dropdown-list[hidden] { display: none; }
    .studio-dropdown-option {
        display: flex; align-items: center; justify-content: space-between; gap: 0.375rem;
        width: 100%; min-height: 44px; padding: 0.5rem; border: 0; border-radius: 6px;
        background: transparent; color: rgb(var(--c-ink)); font-size: 14px; text-align: start;
    }
    /* flex-start, not space-between: a mark belongs against its own label, not
       pushed to the far edge of the row by the tick. */
    .studio-dropdown-option { justify-content: flex-start; }
    .studio-dropdown-option > span { overflow-wrap: anywhere; }
    .studio-dropdown-option > .choice-icon { width: 18px; height: 18px; color: rgb(var(--c-ink-3)); }
    .studio-dropdown-option[aria-selected="true"] > .choice-icon { color: rgb(var(--c-accent)); }
    .studio-dropdown-check { flex-shrink: 0; visibility: hidden; margin-inline-start: auto; }
    .studio-dropdown-option[aria-selected="true"] { background: rgb(var(--c-sunken)); font-weight: 600; }
    .studio-dropdown-option[aria-selected="true"] .studio-dropdown-check { visibility: visible; }
    .studio-dropdown-option:hover { background: rgb(var(--c-sunken)); }
    .studio-dropdown-trigger:focus-visible, .studio-dropdown-option:focus-visible {
        outline: 2px solid rgb(var(--c-accent)); outline-offset: -2px;
    }
    .studio-accent-label, .studio-accent { grid-column: 1 / -1; }
    .studio-options .studio-accent { margin: 0; }
    #tts-form #generate-btn {
        order: 3; width: calc(100% - 24px); align-self: center; min-height: 48px;
        margin: 0 12px 12px; border-radius: 10px;
        box-shadow: 0 0 0 12px rgb(var(--c-surface));
    }
    #tts-form #out-of-tokens-banner { order: 5; margin-top: 0.75rem; }
    #tts-form #result-card { order: 6; margin-top: 1rem; }
    #tts-form .studio-recent { order: 8; margin-top: 1rem; }
}

/* Large screens show the voice catalogue directly beside the script. */
.desktop-voice-picker { display: none; }
@media (min-width: 1024px) {
    #voice-picker-open { display: none; }
    .desktop-voice-picker { display: block; }
    .desktop-voice-heading { padding: 0.75rem; }
    .desktop-voice-picker #voices-container { max-height: 340px; overflow-y: auto; }
}