/* =========================================================================
   Arc Dialog
   =========================================================================

   The centred modal card. One component, four screens: sign in, log out,
   delete account, and the App Store promo. Figma component "Dialog"
   (node 6267:61) on the Surfaces page.

   An Arc dialog is not a plain white box. It is always four layers stacked
   on top of each other, and it stops being an Arc dialog if any one of them
   is missing:

     1. the Scrim    - the dim behind it, Primary at 60% (warm, not black)
     2. the surface  - off-white #f8f8f8, never pure white
     3. the pattern  - a grid of faint dots, fading in toward the top-right
     4. the noise    - a fine grain image over the whole card

   Everything below is built from the tokens in ../tokens.css. The literals
   that remain are deliberate: the per-theme palette values at the top (dark
   Arc has never been designed, so there are no Figma variables to point at),
   and a handful of sizes with no token yet. Anywhere a token exists, use it.
   ========================================================================= */


/* -------------------------------------------------------------------------
   Palette
   -------------------------------------------------------------------------

   The Figma design is drawn in light mode only. Arc also runs a dark app and
   a set of chat themes, so the dialog's colours are declared once here as
   local variables and then re-pointed per theme. Only these blocks change
   between themes; every rule further down reads the variables and never
   needs a theme-specific copy.

   The default below is the DARK app (Arc's plain :root), because that is
   what index.html treats as its base. The light values - the ones that match
   Figma exactly - are in the block after it.
   ------------------------------------------------------------------------- */

.arc-dialog-scrim {
    --dlg-scrim: rgba(0, 0, 0, 0.6);
    --dlg-surface: #1c1c1e;
    /* Same colour as --dlg-surface at zero alpha. The two fades that mask the
       dot pattern have to fade to THIS, not to the keyword `transparent`:
       `transparent` means transparent BLACK, so a gradient running to it
       passes through a dirty grey on the way and the mask reads as a smudge
       instead of disappearing. Keep the two in sync. */
    --dlg-surface-0: rgba(28, 28, 30, 0);
    --dlg-pattern-dot: rgba(255, 255, 255, 0.035);
    --dlg-close-inset: 6px;
    /* The disc an emoji avatar sits on. It belongs to THIS palette, not the
       header's: the header sits on the chat wallpaper, the avatar in here sits
       on the dialog card, and the two go dark at different times. */
    --dlg-avatar-plate: #48484a;
    --dlg-title: var(--arc-on-primary);
    --dlg-body: rgba(255, 255, 255, 0.6);
    --dlg-close-bg: rgba(255, 255, 255, 0.12);
    --dlg-close-fg: rgba(255, 255, 255, 0.75);
    --dlg-close-bg-hover: rgba(255, 255, 255, 0.2);

    --dlg-primary-bg: var(--arc-on-primary);
    --dlg-primary-fg: var(--arc-primary);
    --dlg-secondary-bg: transparent;
    --dlg-secondary-fg: var(--arc-on-primary);
    --dlg-secondary-border: rgba(255, 255, 255, 0.22);

    --dlg-field-bg: rgba(255, 255, 255, 0.06);
    --dlg-field-border: rgba(255, 255, 255, 0.14);
    --dlg-field-placeholder: rgba(255, 255, 255, 0.35);
}

/* Light app, and any chat theme (a chat theme already forces dialogs to a
   light card - see the --modal-* notes in index.html). These are the values
   drawn in Figma. */
html[data-theme="light"] .arc-dialog-scrim,
html[data-chat-theme-tone] .arc-dialog-scrim {
    --dlg-scrim: var(--arc-scrim);
    --dlg-surface: var(--arc-surface-sunken);
    /* --arc-surface-sunken (#f8f8f8) at zero alpha - see the note above. */
    --dlg-surface-0: rgba(248, 248, 248, 0);
    --dlg-pattern-dot: rgba(26, 26, 26, 0.045);
    --dlg-avatar-plate: var(--arc-surface-plate);
    --dlg-title: var(--arc-primary);
    --dlg-body: var(--arc-secondary);
    --dlg-close-bg: var(--arc-border);
    --dlg-close-fg: var(--arc-primary);
    --dlg-close-bg-hover: #dcdcdc;

    --dlg-primary-bg: var(--arc-primary);
    --dlg-primary-fg: var(--arc-on-primary);
    --dlg-secondary-bg: var(--arc-surface);
    --dlg-secondary-fg: var(--arc-primary);
    --dlg-secondary-border: var(--arc-border);

    --dlg-field-bg: var(--arc-surface);
    --dlg-field-border: var(--arc-border);
    --dlg-field-placeholder: var(--arc-secondary);
}


/* -------------------------------------------------------------------------
   Layer 1: the Scrim
   -------------------------------------------------------------------------
   Full-bleed dim that centres the card and swallows clicks behind it.
   Hidden until JS adds .show.
   ------------------------------------------------------------------------- */

.arc-dialog-scrim {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--arc-space-20);
    background: var(--dlg-scrim);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.arc-dialog-scrim.show {
    opacity: 1;
    visibility: visible;
}


/* -------------------------------------------------------------------------
   Layers 2 + 3: the surface and the dot pattern
   -------------------------------------------------------------------------
   Four background layers in one declaration. CSS paints the FIRST one on
   top, so read this list back-to-front:

     4th (bottom) flat off-white fill
     3rd          the dot grid, 10px dots on a 20px pitch
     2nd          a left-to-right fade that hides the dots on the left
     1st (top)    a top-to-bottom fade that hides the dots at the bottom

   The two fades are painted in the surface colour, so wherever they are
   opaque the dots underneath disappear. They overlap everywhere except the
   top-right corner, which is the only place the pattern shows through. The
   percentages are lifted straight from the Figma fill.
   ------------------------------------------------------------------------- */

.arc-dialog {
    position: relative;
    box-sizing: border-box;
    width: min(352px, 100%);
    max-height: calc(100dvh - (var(--arc-space-20) * 2));
    overflow-y: auto;
    overscroll-behavior: contain;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--arc-space-24);

    padding: var(--arc-space-48) var(--arc-space-20) var(--arc-space-32);
    border-radius: var(--arc-radius-20);

    background-color: var(--dlg-surface);
    background-image:
        linear-gradient(180deg, var(--dlg-surface-0) 40.967%, var(--dlg-surface) 78.643%),
        linear-gradient(270deg, var(--dlg-surface-0) 0%, var(--dlg-surface) 57.42%),
        radial-gradient(circle at center,
            var(--dlg-pattern-dot) 0 5px,
            var(--dlg-surface-0) 5.5px);
    background-repeat: no-repeat, no-repeat, repeat;
    background-position: top left, top left, top right;
    background-size: 100% 100%, 100% 100%, var(--arc-space-20) var(--arc-space-20);

    font-family: var(--arc-font);
    text-align: center;

    /* Guarantees a stacking context so the noise layer's z-index: -1 lands
       above this card's background and below its content, and never slips
       behind the card entirely. Without this, the reduced-motion rule below
       (which drops the transform) would take the stacking context away. */
    isolation: isolate;

    transform: scale(0.94);
    transition: transform 0.25s ease;
}

.arc-dialog-scrim.show .arc-dialog {
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {

    .arc-dialog,
    .arc-dialog-scrim {
        transition: none;
    }

    .arc-dialog {
        transform: none;
    }
}


/* -------------------------------------------------------------------------
   Layer 4: the noise
   -------------------------------------------------------------------------
   A fine grain texture over the whole card at 70%. This is a real exported
   image, not a CSS effect - see styles/assets/README.md. The size and the
   top-left anchor are the values from the Figma layer, so the grain lands at
   the same scale it was designed at.

   Sits above the surface and below the content, and never eats a click.

   z-index: -1 puts it above the card's own background and below every piece
   of content, without needing a matching z-index on each child. (An earlier
   version did that with a `.arc-dialog > *` rule, which quietly outranked
   .arc-dialog-close and knocked the close button out of its corner.)
   ------------------------------------------------------------------------- */

.arc-dialog-noise {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background-image: url("/styles/assets/dialog-noise.png");
    background-repeat: no-repeat;
    background-position: top left;
    /* The export is the Noise layer at its own size, 352x450 - the card's
       width and a bit more than its tallest height. `cover` keeps the grain
       edge to edge whatever the card ends up being, without tiling (which
       would seam) or leaving a bare patch under long copy.

       No opacity here on purpose. Figma bakes a layer's opacity into its
       export, so the 70% is already in the file: its pixels are black at an
       alpha of 0 to 2 out of 255. Setting 0.7 again would double-count it and
       leave the grain invisible. */
    background-size: cover;
}


/* -------------------------------------------------------------------------
   Close button
   -------------------------------------------------------------------------
   32px disc pinned 6px in from the top-right corner. The glyph is a plus
   rotated 135 degrees, which is how it is drawn in Figma - the same icon
   used for "add" elsewhere, turned into an X.
   ------------------------------------------------------------------------- */

.arc-dialog-close {
    position: absolute;
    top: var(--dlg-close-inset);
    right: var(--dlg-close-inset);
    z-index: 1;
    width: var(--arc-size-icon-lg);
    height: var(--arc-size-icon-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--arc-radius-full);
    background: var(--dlg-close-bg);
    color: var(--dlg-close-fg);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

.arc-dialog-close:hover {
    background: var(--dlg-close-bg-hover);
}

.arc-dialog-close svg {
    display: block;
    width: 21px;
    height: 21px;
    transform: rotate(135deg);
}


/* -------------------------------------------------------------------------
   Header and body
   -------------------------------------------------------------------------
   Identical on all four screens, which is the point: one title style, one
   body style, one gap.

   .arc-dialog-intro is the optional wrapper used when a screen leads with an
   avatar or an icon. It keeps the 16px gap between the artwork and the
   title, without changing the 24px rhythm of the dialog itself.
   ------------------------------------------------------------------------- */

.arc-dialog-intro {
    display: flex;
    flex-direction: column;
    gap: var(--arc-space-16);
}

.arc-dialog-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1px 0;
    overflow: hidden;
}

.arc-dialog-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--arc-space-8);
    text-align: center;
    word-break: break-word;
}

.arc-dialog-title {
    margin: 0;
    width: 100%;
    font-size: var(--arc-type-title-size);
    font-weight: var(--arc-type-title-weight);
    letter-spacing: var(--arc-type-title-tracking);
    line-height: normal;
    color: var(--dlg-title);
}

.arc-dialog-body {
    margin: 0;
    width: 100%;
    font-size: var(--arc-type-body-size);
    font-weight: var(--arc-type-body-weight);
    line-height: var(--arc-type-body-line);
    color: var(--dlg-body);
}

.arc-dialog-body strong {
    color: var(--dlg-title);
    font-weight: 600;
}


/* -------------------------------------------------------------------------
   Avatar
   -------------------------------------------------------------------------
   The Arc face, large. Painted by the same code that paints the one in the
   header (_renderAvatarInto in lib/ui.js), so whatever Arc looks like on the
   home screen - a red monogram, a blue monogram, an emoji - is what appears
   here. Only the size differs: Avatar/Large, 92px.
   ------------------------------------------------------------------------- */

.arc-dialog-avatar {
    width: var(--arc-size-avatar-lg);
    height: var(--arc-size-avatar-lg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The default Arc icon. Shared with .header-avatar through one token, so
       the two cannot drift; an explicit colour pick arrives as an inline
       background from JS and overrides it. */
    background: var(--arc-avatar-default);
    color: var(--arc-on-primary);
    font-family: 'Inter', var(--arc-font);
    font-weight: 500;
    font-size: 40px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    user-select: none;
}

/* Emoji avatars sit on a neutral plate instead of a coloured disc, with no
   letter shadow. The `html` prefix lifts specificity just enough to beat the
   coloured monogram gradient above.

   The plate reads --dlg-avatar-plate, which is set once per theme alongside
   the card's own colours. That is the whole point: a chat theme with a dark
   tone darkens the header but NOT the dialog card, so a plate that followed
   the header would put a near-black disc on a near-white card. */
html .arc-dialog-avatar.is-emoji {
    background: var(--dlg-avatar-plate);
    text-shadow: none;
    font-size: 46px;
}

/* A flat piece of artwork rather than an avatar: the App Store icon. Figma
   sizes this slot at 72. */
.arc-dialog-artwork {
    width: var(--arc-size-avatar-sm);
    height: var(--arc-size-avatar-sm);
    object-fit: contain;
    display: block;
}

/* Both of these set `display`, which beats the browser's own [hidden] rule, so
   the attribute does nothing unless it is restated here. Without this the App
   Store card shows the icon AND the fallback avatar stacked on top of each
   other. */
.arc-dialog-artwork[hidden],
.arc-dialog-avatar[hidden] {
    display: none;
}

/* Avatar/Small, 72px. Same disc as the one in the chat header. Stands in for
   the artwork above when its image file is missing. */
.arc-dialog-avatar--sm {
    width: var(--arc-size-avatar-sm);
    height: var(--arc-size-avatar-sm);
    font-size: 32px;
}

html .arc-dialog-avatar--sm.is-emoji {
    font-size: 36px;
}


/* -------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------
   Figma component "Button" (5739:1365): the pill. Full width inside a
   dialog, 48px tall, stacked with an 8px gap and inset 4px from the card's
   padding so the pills do not touch the dot pattern.

   Never give one of these a chat-theme colour. Themes in Arc only reach the
   wallpaper, the sent bubble and the Send button.
   ------------------------------------------------------------------------- */

/* The action stack. Holds the pills, and any control that has to sit in the
   same rhythm as them - the delete dialog's confirm field does. */
.arc-dialog-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--arc-space-8);
    padding: 0 var(--arc-space-4);
}

.arc-dialog-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--arc-space-4);
    width: 100%;
    min-width: 96px;
    height: var(--arc-size-control);
    padding: var(--arc-space-8) var(--arc-space-20);
    border: 1px solid transparent;
    border-radius: var(--arc-radius-full);
    overflow: hidden;

    font-family: inherit;
    font-size: var(--arc-type-label-size);
    font-weight: var(--arc-type-label-weight);
    line-height: var(--arc-type-label-line);
    text-align: center;
    text-decoration: none;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.arc-dialog-btn:hover:not(:disabled) {
    opacity: 0.88;
}

.arc-dialog-btn:active:not(:disabled) {
    transform: scale(0.99);
}

.arc-dialog-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.arc-dialog-btn--primary {
    background: var(--dlg-primary-bg);
    border-color: var(--dlg-primary-bg);
    color: var(--dlg-primary-fg);
}

.arc-dialog-btn--secondary {
    background: var(--dlg-secondary-bg);
    border-color: var(--dlg-secondary-border);
    color: var(--dlg-secondary-fg);
}

.arc-dialog-btn--destructive {
    background: var(--arc-destructive);
    border-color: var(--arc-destructive);
    color: var(--arc-on-primary);
}

/* Icon slot inside a pill (the Google mark). The slot is 24px so every
   button lines up; the mark itself is 18px and centred in it. */
.arc-dialog-btn-icon {
    flex: 0 0 auto;
    width: var(--arc-size-icon);
    height: var(--arc-size-icon);
    display: flex;
    align-items: center;
    justify-content: center;
}

.arc-dialog-btn-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}


/* -------------------------------------------------------------------------
   Field
   -------------------------------------------------------------------------
   Used only by the delete-account screen, for the type-to-confirm box.
   ------------------------------------------------------------------------- */

.arc-dialog-field {
    width: 100%;
    height: var(--arc-size-control);
    padding: 0 var(--arc-space-20);
    border: 1px solid var(--dlg-field-border);
    border-radius: var(--arc-radius-full);
    background: var(--dlg-field-bg);
    color: var(--dlg-title);
    font-family: inherit;
    font-size: var(--arc-type-label-size);
    text-align: center;
    outline: none;
}

.arc-dialog-field::placeholder {
    color: var(--dlg-field-placeholder);
}

.arc-dialog-field:focus {
    border-color: var(--dlg-title);
}


/* -------------------------------------------------------------------------
   Fine print and errors
   ------------------------------------------------------------------------- */

/* Micro type, centred, held to 208px so it wraps the way it does in Figma. */
.arc-dialog-legal {
    margin: 0 auto;
    max-width: 208px;
    font-size: var(--arc-type-micro-size);
    font-weight: var(--arc-type-micro-weight);
    line-height: var(--arc-type-micro-line);
    color: var(--dlg-body);
}

/* Figma draws this line as one flat text node: Terms and Privacy Policy are
   not underlined and are not a different colour. They still have to be real
   links, so the underline comes back on hover and on keyboard focus. That
   keeps the design as drawn without shipping a link nobody can find. */
.arc-dialog-legal a {
    color: inherit;
    text-decoration: none;
}

.arc-dialog-legal a:hover,
.arc-dialog-legal a:focus-visible {
    color: var(--dlg-title);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.arc-dialog-error {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--arc-destructive);
}


/* -------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------
   The card is already fluid (min(352px, 100%)). Below the iPhone SE width
   the 48px top padding is more air than the screen can spare, so it comes
   down; nothing else changes.
   ------------------------------------------------------------------------- */

@media (max-width: 360px) {
    .arc-dialog {
        padding-top: var(--arc-space-32);
        padding-bottom: var(--arc-space-24);
        gap: var(--arc-space-20);
    }

    /* With less air above it, a long title's first line now runs alongside the
       close disc (32px wide, 6px in). Hold it clear on both sides so it stays
       centred and can never slide underneath. */
    .arc-dialog-intro>.arc-dialog-head>.arc-dialog-title,
    .arc-dialog>.arc-dialog-head>.arc-dialog-title {
        padding: 0 var(--arc-space-32);
    }
}