/* Bantergram app. Sits on top of /assets/relay-style.css and relay-alive.css:
   same fonts, same blue, soft cards. Mobile first, logical properties for RTL.
   Every class is prefixed a- so nothing collides with the marketing styles. */

:root {
  --a-bg: #fafbff;
  --a-card: #fff;
  --a-ink: #192136;
  --a-soft: #66708a;
  --a-faint: #98a2b8;
  --a-line: #e2e6f1;
  --a-blue: #315cff;
  --a-blue-dark: #234bdf;
  --a-blue-wash: #eef2ff;
  --a-good: #14805e;
  --a-good-wash: #e6f6ef;
  --a-warn: #a2620c;
  --a-warn-wash: #fff4df;
  --a-bad: #c23b2b;
  --a-bad-wash: #fdecea;
  --a-radius: 20px;
  --a-shadow: 0 14px 36px #2a50bc0f;
  --a-gutter: 16px;
}

[hidden] { display: none !important; }

.a-body { background: var(--a-bg); color: var(--a-ink); min-height: 100vh; min-height: 100dvh; font-size: 16px; line-height: 1.5; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
.a-body button:focus-visible, .a-body a:focus-visible, .a-body input:focus-visible, .a-body textarea:focus-visible, .a-body select:focus-visible, .a-body summary:focus-visible { outline: 3px solid #315cff66; outline-offset: 2px; }
.a-body button:disabled { cursor: not-allowed; }
.a-offscreen { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }

/* ---- shell ---- */
.a-top { position: sticky; inset-block-start: 0; z-index: 20; background: #fafbffe6; backdrop-filter: blur(10px); border-block-end: 1px solid var(--a-line); }
.a-top-in { max-inline-size: 1180px; margin-inline: auto; padding-inline: var(--a-gutter); block-size: 60px; display: flex; align-items: center; gap: 12px; }
.a-logo.logo { font-size: 22px; letter-spacing: -1px; gap: 8px; min-block-size: 44px; }
.a-logo .logo-symbol { transform: scale(.82); transform-origin: center; }
.a-nav { display: flex; gap: 4px; margin-inline-start: auto; }
.a-nav a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 14px; border-radius: 100px; font-size: 14px; font-weight: 550; color: var(--a-soft); }
.a-nav a:hover { color: var(--a-blue); }
.a-nav a.on { background: var(--a-blue-wash); color: var(--a-blue); }
.a-top-lang { margin-inline-start: auto; }
.a-lang { inline-size: auto; min-block-size: 44px; padding-block: 8px; font-size: 16px; }

.a-view { display: block; max-inline-size: 1180px; margin-inline: auto; padding: 24px var(--a-gutter) 72px; outline: none; }
.a-page { display: grid; gap: 20px; min-inline-size: 0; }
.a-page > * { min-inline-size: 0; }
.a-boot, .a-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 48px 0; color: var(--a-soft); font-size: 15px; }
.a-noscript { text-align: center; padding: 40px 16px; }
.a-spinner { inline-size: 22px; block-size: 22px; border-radius: 50%; border: 2.5px solid #cfd8f5; border-block-start-color: var(--a-blue); animation: spin .8s linear infinite; flex: none; }
.a-spinner-small { inline-size: 14px; block-size: 14px; border-width: 2px; }

.a-banner-host:empty { display: none; }
.a-banner { max-inline-size: 1180px; margin: 12px auto 0; inline-size: calc(100% - 2 * var(--a-gutter)); background: var(--a-warn-wash); border: 1px solid #f3dcae; color: #6b4309; border-radius: 16px; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: start; font-size: 14px; }
.a-banner .icon { margin-block-start: 2px; }
.a-banner-text strong { display: block; font-weight: 650; }
.a-banner-text span { overflow-wrap: anywhere; }
.a-banner-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.a-banner-status { grid-column: 1 / -1; font-size: 13px; }
.a-banner-status:empty { display: none; }

/* ---- type ---- */
.a-h1 { font-size: clamp(26px, 5.4vw, 38px); font-weight: 500; letter-spacing: -1.4px; line-height: 1.1; overflow-wrap: anywhere; }
.a-h1-big { font-size: clamp(32px, 7vw, 52px); letter-spacing: -2px; }
.a-h2 { font-size: clamp(21px, 4vw, 26px); font-weight: 500; letter-spacing: -.8px; line-height: 1.15; }
.a-h3 { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 500; letter-spacing: -.4px; display: block; }
.a-lead { color: var(--a-soft); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.a-eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: #7e88a3; margin-block-end: 6px; }
.a-fine { font-size: 13px; color: var(--a-faint); }
.a-link { color: var(--a-blue); font-weight: 550; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: 10px; }
.a-center { text-align: center; justify-items: center; }
.a-mascot { inline-size: auto; max-inline-size: 100%; border-radius: 50%; background: #edf3ff; object-fit: cover; mix-blend-mode: multiply; animation: mascot-bob 7s ease-in-out infinite; }

/* ---- cards, chips, notices ---- */
.a-card { background: var(--a-card); border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: 20px; box-shadow: var(--a-shadow); min-inline-size: 0; }
.a-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 100px; background: #eef0f6; color: #5b6479; white-space: nowrap; }
.a-chip i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
.a-chip-connected { background: var(--a-good-wash); color: var(--a-good); }
.a-chip-paused { background: var(--a-warn-wash); color: var(--a-warn); }
.a-chip-draft { background: #eef0f6; color: #5b6479; }
.a-chip-closed { background: #eef0f6; color: #7b8498; }
.a-chip-soon { background: var(--a-blue-wash); color: var(--a-blue); }
.a-pro { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; color: var(--a-blue); background: var(--a-blue-wash); border-radius: 100px; padding: 5px 10px; white-space: nowrap; }
.a-pro .icon { inline-size: 14px; block-size: 14px; }
.a-pro a { text-decoration: underline; text-underline-offset: 2px; }

.a-notice { display: flex; gap: 10px; align-items: flex-start; border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.5; border: 1px solid transparent; }
.a-notice .icon { inline-size: 19px; block-size: 19px; margin-block-start: 1px; }
.a-notice-body { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; min-inline-size: 0; flex: 1; }
.a-notice-body > span { overflow-wrap: anywhere; min-inline-size: 0; }
.a-notice-error { background: var(--a-bad-wash); border-color: #f6cfca; color: #8c2a1e; }
.a-notice-warn { background: var(--a-warn-wash); border-color: #f3dcae; color: #6b4309; }
.a-notice-ok { background: var(--a-good-wash); border-color: #c4e8d9; color: #0e5c44; }
.a-notice-info { background: var(--a-blue-wash); border-color: #dbe4ff; color: #2b3f86; }
.a-form-error:empty { display: none; }
.a-badge-icon, .a-dialog-icon { inline-size: 56px; block-size: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--a-blue-wash); color: var(--a-blue); }
.a-badge-icon.a-bad, .a-dialog-icon.a-bad { background: var(--a-bad-wash); color: var(--a-bad); }
.a-code-chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: #f1f3f9; border-radius: 8px; padding: 6px 10px; overflow-wrap: anywhere; }

/* ---- buttons ---- */
.a-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-block-size: 48px; padding: 12px 22px; border-radius: 100px; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; transition: transform .2s, box-shadow .2s, background .2s; position: relative; max-inline-size: 100%; }
.a-btn .icon { inline-size: 18px; block-size: 18px; }
[dir="rtl"] .a-btn .icon { transform: scaleX(-1); }
.a-btn:hover:not(:disabled) { transform: translateY(-2px); }
.a-btn-primary { background: var(--a-blue); color: #fff; box-shadow: 0 8px 20px #315cff26; }
.a-btn-primary:hover:not(:disabled) { background: var(--a-blue-dark); }
.a-btn-soft { background: var(--a-blue-wash); color: var(--a-blue); border: 1px solid #dfe6ff; }
.a-btn-ghost { background: #fff; color: var(--a-ink); border: 1px solid var(--a-line); }
.a-btn-danger { background: var(--a-bad); color: #fff; }
.a-btn-link { background: none; color: var(--a-soft); padding-inline: 8px; text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.a-btn-block { inline-size: 100%; }
.a-btn-small { min-block-size: 44px; padding: 8px 16px; font-size: 14px; }
.a-btn.is-busy .a-btn-label, .a-btn.is-busy .icon { opacity: .35; }
.a-btn.is-busy::after { content: ''; position: absolute; inline-size: 18px; block-size: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-block-start-color: transparent; animation: spin .8s linear infinite; }
.a-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---- forms ---- */
.a-field { display: grid; gap: 7px; min-inline-size: 0; }
.a-label { font-size: 14px; font-weight: 550; color: #4b556b; }
.a-label-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.a-hint { font-size: 13px; color: var(--a-faint); line-height: 1.5; }
.a-input { inline-size: 100%; min-block-size: 48px; border: 1px solid #d9dfed; border-radius: 12px; background: #fff; color: var(--a-ink); font-size: 16px; padding: 11px 14px; transition: border-color .15s, box-shadow .15s; }
.a-input:hover { border-color: #c3ccdf; }
.a-input:focus { border-color: var(--a-blue); box-shadow: 0 0 0 4px #315cff1f; outline: none; }
.a-input:disabled { background: #f4f6fb; color: var(--a-faint); }
.a-input-big { min-block-size: 64px; font-size: clamp(20px, 5vw, 26px); border-radius: 18px; padding-inline: 20px; font-family: 'Space Grotesk', sans-serif; letter-spacing: -.5px; }
.a-textarea { resize: vertical; line-height: 1.5; min-block-size: 84px; }
.a-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #7a859e 50%), linear-gradient(135deg, #7a859e 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-inline-end: 38px; }
[dir="rtl"] .a-select { background-position: 14px 50%, 20px 50%; }
.a-grid2 { display: grid; gap: 18px; }
.a-form { display: grid; gap: 18px; }

.a-switch { appearance: none; inline-size: 48px; block-size: 28px; border-radius: 100px; background: #d5dbe9; position: relative; cursor: pointer; flex: none; transition: background .2s; margin: 8px 0; }
.a-switch::before { content: ''; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 22px; block-size: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform .2s; }
.a-switch:checked { background: var(--a-blue); }
.a-switch:checked::before { transform: translateX(20px); }
[dir="rtl"] .a-switch:checked::before { transform: translateX(-20px); }
.a-switch:disabled { opacity: .55; cursor: not-allowed; }
.a-switch-row { display: flex; align-items: center; gap: 12px; min-block-size: 48px; }
.a-switch-row label { flex: 1; font-size: 15px; min-inline-size: 0; cursor: pointer; }
.a-switch-row label small { display: block; font-size: 13px; color: var(--a-faint); font-weight: 400; margin-block-start: 2px; }
.a-switch-row.is-locked label { color: var(--a-soft); }

.a-seg { display: flex; background: #eef1f8; border-radius: 14px; padding: 4px; gap: 4px; max-inline-size: 100%; }
.a-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-block-size: 44px; padding: 6px 10px; border-radius: 10px; background: none; color: var(--a-soft); font-size: 14px; font-weight: 550; min-inline-size: 0; }
.a-seg button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-seg button .icon { inline-size: 17px; block-size: 17px; }
.a-seg button.on { background: #fff; color: var(--a-ink); box-shadow: 0 2px 6px #1f2c5514; }

.a-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.a-swatch { inline-size: 44px; block-size: 44px; border-radius: 50%; background: none; display: grid; place-items: center; padding: 0; position: relative; color: #fff; cursor: pointer; }
.a-swatch::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px #0000001a; }
.a-swatch .icon { position: relative; inline-size: 16px; block-size: 16px; opacity: 0; stroke-width: 2.4; }
.a-swatch.on::after { content: ''; position: absolute; inset: 1px; border-radius: 50%; border: 2px solid var(--a-blue); }
.a-swatch.on .icon { opacity: 1; }
.a-swatch-custom { color: #8a94ab; }
.a-swatch-custom::before { border: 1.5px dashed #b8c1d4; box-shadow: none; }
.a-swatch-custom.on::before { border: 0; }
.a-swatch-custom .icon { opacity: 1; }
.a-swatch-custom.on .icon { opacity: 0; }
.a-swatch-custom input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
.a-color-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--a-faint); font-weight: 400; }

dialog.a-dialog { max-inline-size: 440px; display: none; gap: 14px; justify-items: start; }
dialog.a-dialog[open] { display: grid; }
.a-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 6px; justify-content: inherit; }
.a-center .a-dialog-actions { justify-content: center; }

/* ---- auth ---- */
.a-auth { display: grid; justify-items: center; padding-block: 8px 24px; }
.a-auth-card { inline-size: 100%; max-inline-size: 440px; display: grid; gap: 18px; background: #fff; border: 1px solid var(--a-line); border-radius: 24px; padding: 28px 22px; box-shadow: var(--a-shadow); }
.a-auth-alt { font-size: 15px; color: var(--a-soft); text-align: center; }
.a-auth-card .a-fine { text-align: center; }
.a-verify { display: grid; gap: 16px; justify-items: center; }
.a-verify .a-btn { margin-block-start: 6px; }

/* ---- dashboard ---- */
.a-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.a-dash { display: grid; gap: 20px; align-items: start; }
.a-pgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.a-pgrid > .a-empty, .a-pgrid > .a-loading, .a-pgrid > .a-notice { grid-column: 1 / -1; }
.a-pcard { display: grid; gap: 4px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.a-pcard:hover { transform: translateY(-3px); border-color: #cfd9fb; box-shadow: 0 18px 40px #2a50bc1a; }
.a-pcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-block-end: 10px; }
.a-pcard-name { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 500; letter-spacing: -.5px; overflow-wrap: anywhere; }
.a-pcard-host { font-size: 14px; color: var(--a-soft); overflow-wrap: anywhere; }
.a-pcard-stat { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--a-soft); margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid #eef0f6; }
.a-pcard-stat .icon { inline-size: 16px; block-size: 16px; color: #9aa8cc; }
.a-picon { inline-size: var(--picon, 48px); block-size: var(--picon, 48px); border-radius: 30%; background: var(--picon-bg, var(--a-blue)); color: #fff; display: grid; place-items: center; overflow: hidden; flex: none; font-family: 'Space Grotesk', sans-serif; font-size: calc(var(--picon, 48px) * .46); font-weight: 600; }
.a-picon img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.a-empty { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 36px 20px; }
.a-usage { display: grid; gap: 16px; }
.a-usage-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.a-usage-plan { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 500; letter-spacing: -.8px; }
.a-meter { display: grid; gap: 7px; }
.a-meter-top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--a-soft); }
.a-meter-top b { font-weight: 600; color: var(--a-ink); }
.a-meter-bar { block-size: 8px; border-radius: 100px; background: #e9edf7; overflow: hidden; }
.a-meter-bar i { display: block; block-size: 100%; inline-size: var(--fill, 0%); min-inline-size: 4px; border-radius: inherit; background: var(--a-blue); transition: inline-size .4s; }
.a-meter-bar.near i { background: #e0892b; }
.a-meter-bar.full i { background: var(--a-bad); }

/* ---- wizard ---- */
.a-wiz-head { display: flex; align-items: center; gap: 12px; }
.a-wiz-exit { inline-size: 44px; block-size: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--a-line); color: var(--a-soft); flex: none; }
.a-dots { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center; margin-inline-end: 44px; }
.a-dots li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--a-faint); }
.a-dots li i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: #d9dfee; transition: all .25s; }
.a-dots li.done i { background: #9db1ff; }
.a-dots li.on i { inline-size: 28px; border-radius: 100px; background: var(--a-blue); }
.a-dots li span { display: none; }
.a-dots li.on span { display: inline; color: var(--a-ink); font-weight: 600; }
.a-wiz-body { display: grid; gap: 20px; min-inline-size: 0; }
.a-wiz-body > * { min-inline-size: 0; }
.a-wiz-form { display: grid; gap: 18px; inline-size: 100%; max-inline-size: 560px; margin-inline: auto; padding-block-start: 4vh; }
.a-wiz-wide { max-inline-size: 720px; padding-block-start: 0; }
.a-wiz-intro { display: grid; gap: 8px; }
.a-wiz-win { display: flex; align-items: center; gap: 14px; }
.a-wiz-win .a-mascot { inline-size: 64px; block-size: 64px; flex: none; }
.a-wiz-win > div { display: grid; gap: 6px; min-inline-size: 0; }
.a-found { display: flex; gap: 10px; align-items: flex-start; background: var(--a-blue-wash); color: #2b3f86; border-radius: 14px; padding: 12px 14px; font-size: 14px; }
.a-found .icon { inline-size: 18px; block-size: 18px; margin-block-start: 2px; }
.a-found span { overflow-wrap: anywhere; min-inline-size: 0; }
.a-sticky { position: sticky; inset-block-end: 0; z-index: 6; margin-inline: calc(-1 * var(--a-gutter)); padding: 14px var(--a-gutter) calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(#fafbff00, var(--a-bg) 26%); }
.a-sticky.a-row > .a-btn-primary { flex: 1 1 100%; }

.a-reading { display: grid; justify-items: center; text-align: center; gap: 12px; padding-block: 4vh 24px; }
.a-reading-orb { inline-size: 120px; block-size: 120px; border-radius: 50%; background: #edf3ff; overflow: hidden; box-shadow: 0 0 60px #dbe7ff; }
.a-reading-orb .a-mascot { inline-size: 100%; block-size: 100%; }
.a-reading-host { font-weight: 600; color: var(--a-blue); }
.a-reading-list, .a-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; text-align: start; }
.a-reading-list li, .a-steps li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--a-faint); transition: color .25s; }
.a-step-dot { inline-size: 22px; block-size: 22px; border-radius: 50%; border: 2px solid #d5dcee; flex: none; display: grid; place-items: center; color: #fff; }
.a-step-dot .icon { inline-size: 13px; block-size: 13px; stroke-width: 2.6; }
li.running { color: var(--a-ink); font-weight: 550; }
li.running .a-step-dot { border-color: var(--a-blue); border-block-start-color: transparent; animation: spin .8s linear infinite; }
li.done { color: var(--a-ink); }
li.done .a-step-dot { background: var(--a-blue); border-color: var(--a-blue); }
li.failed { color: var(--a-bad); }
li.failed .a-step-dot { background: var(--a-bad); border-color: var(--a-bad); }
li.skipped { opacity: .55; }

.a-icon-choices { display: flex; gap: 10px; flex-wrap: wrap; }
.a-icon-choice { position: relative; display: grid; justify-items: center; gap: 8px; padding: 12px; min-inline-size: 104px; border: 1.5px solid var(--a-line); border-radius: 16px; font-size: 13px; color: var(--a-soft); cursor: pointer; background: #fff; }
.a-icon-choice input { position: absolute; opacity: 0; inset: 0; inline-size: 100%; block-size: 100%; cursor: pointer; margin: 0; }
.a-icon-choice img, .a-icon-blank { inline-size: 56px; block-size: 56px; border-radius: 30%; object-fit: cover; }
.a-icon-blank { display: grid; place-items: center; background: var(--picon-bg, var(--a-blue)); color: #fff; font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 600; }
.a-icon-choice:has(input:checked) { border-color: var(--a-blue); background: #f5f7ff; color: var(--a-ink); box-shadow: 0 0 0 3px #315cff1f; }
.a-icon-choice:has(input:focus-visible) { outline: 3px solid #315cff66; outline-offset: 2px; }

/* ---- telegram setup ---- */
.a-setup { display: grid; gap: 16px; grid-template-areas: "intro" "frame" "side"; }
.a-setup-intro { grid-area: intro; display: grid; gap: 10px; }
.a-setup-frame { grid-area: frame; min-inline-size: 0; }
.a-setup-side { grid-area: side; display: grid; gap: 18px; align-content: start; }
.a-setup-title { font-size: clamp(24px, 5vw, 34px); }
.a-tg-screen { aspect-ratio: 480 / 760; inline-size: 100%; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--a-line); box-shadow: var(--a-shadow); }
.a-tg-screen:empty { background: #eef2ff; }
.a-tg-screen iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }
.a-setup.is-configuring .a-tg-screen { opacity: .6; pointer-events: none; }
.a-facts { list-style: none; margin: 0; padding: 16px; display: grid; gap: 12px; background: #fff; border: 1px solid var(--a-line); border-radius: 16px; }
.a-facts li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--a-soft); line-height: 1.5; }
.a-facts .icon { inline-size: 18px; block-size: 18px; color: var(--a-blue); margin-block-start: 1px; }
.a-setup-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.a-setup-msg { display: grid; gap: 14px; justify-items: center; max-inline-size: 520px; margin-inline: auto; padding: 32px 22px; }
.a-setup-msg .a-mascot { inline-size: 132px; block-size: 132px; }

/* ---- studio ---- */
.a-studio { display: grid; gap: 16px; }
.a-studio-left { display: grid; gap: 14px; order: 2; min-inline-size: 0; }
.a-studio-right { order: 1; min-inline-size: 0; }
.a-studio-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; }
.a-studio-head strong { font-weight: 550; }
.a-studio-controls { display: grid; gap: 14px; }
.a-group { background: #fff; border: 1px solid var(--a-line); border-radius: var(--a-radius); padding: 18px; display: grid; gap: 16px; }
.a-group-title { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #7e88a3; font-family: 'DM Sans', sans-serif; }
.a-save { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--a-faint); min-block-size: 28px; }
.a-save .icon { inline-size: 15px; block-size: 15px; }
.a-save-saved { color: var(--a-good); }
.a-save-error { color: var(--a-bad); }
.a-save .a-btn { min-block-size: 44px; padding-block: 0; font-size: 13px; color: inherit; }

.a-pv { background: #f0f3ff; border: 1px solid #e0e6fa; border-radius: var(--a-radius); padding: 14px; display: grid; gap: 12px; position: relative; overflow: hidden; }
.a-pv-top { display: grid; gap: 10px; }
.a-pv-top .a-eyebrow { margin: 0; }
.a-pv-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.a-pv-toolbar .a-seg { background: #e3e9fb; flex: 1 1 150px; }
.a-pv-stage { display: grid; justify-items: center; }
.a-pv-note { font-size: 13px; color: #6f7c9d; text-align: center; }
.a-pv-device { --w-accent: #315cff; --w-ink: #fff; --w-radius: 20px; --w-bubble: 18px; --w-width: 304px; position: relative; inline-size: 100%; block-size: 560px; background: #fff; border: 1px solid #dce3f6; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 45px #314da714; }
.a-pv-device[data-device="phone"] { inline-size: min(100%, 300px); block-size: 580px; border: 8px solid #20232e; border-radius: 38px; }
.a-pv-site { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; }
.a-pv-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #f5f7fc; border-block-end: 1px solid #e6eaf4; }
.a-pv-bar i { inline-size: 9px; block-size: 9px; border-radius: 50%; background: #d5dbea; }
.a-pv-url { margin-inline-start: 8px; flex: 1; background: #fff; border: 1px solid #e6eaf4; border-radius: 100px; font-size: 11px; color: #8a94ab; padding: 4px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-pv-device[data-device="phone"] .a-pv-bar i { display: none; }
.a-pv-lines { padding: 22px 18px; display: grid; gap: 12px; align-content: start; }
.a-pv-lines b { display: block; block-size: 22px; inline-size: 60%; border-radius: 8px; background: #e6eaf5; }
.a-pv-lines i { display: block; block-size: 10px; border-radius: 6px; background: #eef1f8; }
.a-pv-lines i.short { inline-size: 45%; }
.a-pv-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-block-start: 10px; }
.a-pv-tiles span { aspect-ratio: 1; border-radius: 12px; background: #f1f3f9; }

.a-w { position: absolute; bottom: 78px; right: 14px; inline-size: min(var(--w-width), calc(100% - 28px)); max-block-size: calc(100% - 92px); display: flex; flex-direction: column; background: #fff; border: 1px solid #dee3f2; border-radius: var(--w-radius); overflow: hidden; box-shadow: 0 20px 45px #314da726; transition: inline-size .25s, border-radius .25s; text-align: start; }
.a-pv-device[data-position="left"] .a-w { right: auto; left: 14px; }
.a-pv-device[data-open="false"] .a-w { display: none; }
.a-pv-device[data-device="phone"] .a-w { inset: 0; inline-size: auto; max-block-size: none; border: 0; border-radius: 0; }
.a-w-head { background: var(--w-accent); color: var(--w-ink); display: flex; align-items: center; gap: 10px; padding: 16px; transition: background .25s; }
.a-w-head .icon { margin-inline-start: auto; opacity: .7; inline-size: 18px; block-size: 18px; }
.a-w-initial { inline-size: 36px; block-size: 36px; border-radius: min(var(--w-bubble), 12px); background: #ffffff33; display: grid; place-items: center; font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 600; flex: none; }
.a-w-head-text { min-inline-size: 0; }
.a-w-head-text strong { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.a-w-head-text span { display: block; font-size: 11px; opacity: .75; margin-block-start: 2px; }
.a-w-body { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; min-block-size: 190px; }
.a-pv-device[data-size="compact"] .a-w-body { min-block-size: 160px; }
.a-pv-device[data-size="large"] .a-w-body { min-block-size: 230px; }
.a-w-day { align-self: center; font-size: 10px; color: #a7afc0; }
.a-w-msg { font-size: 13px; line-height: 1.5; padding: 9px 12px; border-radius: min(var(--w-radius), 15px); max-inline-size: 86%; white-space: pre-wrap; overflow-wrap: anywhere; }
.a-w-in { background: #f3f5fb; color: #4d566b; align-self: flex-start; border-end-start-radius: 3px; }
.a-w-out { background: var(--w-accent); color: var(--w-ink); align-self: flex-end; border-end-end-radius: 3px; }
.a-w-email { margin-block-start: auto; display: grid; gap: 5px; font-size: 11px; color: #7d89a3; }
.a-w-fakeinput { border: 1px solid #e3e8f3; border-radius: min(var(--w-radius), 10px); padding: 8px 10px; font-size: 12px; color: #b0b8ca; }
.a-w-compose { margin: 0 12px; border: 1px solid #e5e9f2; border-radius: min(var(--w-radius), 12px); display: flex; align-items: center; gap: 8px; padding: 7px 7px 7px 10px; color: #a4adc1; font-size: 12px; }
.a-w-tools { display: flex; gap: 6px; color: #94a0bb; }
.a-w-tools .icon { inline-size: 17px; block-size: 17px; }
.a-w-tools:empty { display: none; }
.a-w-placeholder { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-w-send { inline-size: 30px; block-size: 30px; border-radius: min(var(--w-bubble), 10px); background: var(--w-accent); color: var(--w-ink); display: grid; place-items: center; flex: none; }
.a-w-send .icon { inline-size: 15px; block-size: 15px; }
.a-w-badge { text-align: center; font-size: 10px; color: #a9b1c4; padding: 8px 0 10px; }
.a-w-badge b { font-family: 'Space Grotesk', sans-serif; color: #8792ab; }
.a-w:has(.a-w-badge[hidden]) .a-w-compose { margin-block-end: 12px; }
.a-w-launcher { position: absolute; bottom: 16px; right: 14px; min-inline-size: 52px; block-size: 52px; border-radius: var(--w-bubble); background: var(--w-accent); color: var(--w-ink); display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 20px #1f2c5533; transition: background .25s, border-radius .25s; }
.a-pv-device[data-position="left"] .a-w-launcher { right: auto; left: 14px; }
.a-pv-device[data-size="compact"] .a-w-launcher { min-inline-size: 46px; block-size: 46px; }
.a-pv-device[data-size="large"] .a-w-launcher { min-inline-size: 58px; block-size: 58px; }
.a-w-launcher-icon { display: grid; place-items: center; }
.a-w-launcher-text { display: none; font-size: 14px; font-weight: 600; max-inline-size: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-pv-device[data-launcher="pill"][data-open="false"] .a-w-launcher { padding-inline: 18px; border-radius: min(var(--w-bubble), 100px); }
.a-pv-device[data-launcher="pill"][data-open="false"] .a-w-launcher-text { display: inline; }
.a-pv-device[data-device="phone"][data-open="true"] .a-w-launcher { display: none; }

/* ---- install ---- */
.a-install { display: grid; gap: 16px; }
.a-install-main { display: grid; gap: 12px; }
.a-code { margin: 4px 0 0; background: #1b2238; color: #dfe6ff; border-radius: 14px; padding: 16px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; direction: ltr; text-align: left; cursor: text; }
.a-install-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.a-accordion { display: grid; margin-block-start: 8px; }
.a-acc { border-block-start: 1px solid #edf0f6; }
.a-acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-block-size: 52px; cursor: pointer; font-size: 15px; font-weight: 550; }
.a-acc summary::-webkit-details-marker { display: none; }
.a-acc summary .icon { inline-size: 18px; block-size: 18px; color: var(--a-faint); transition: transform .2s; }
.a-acc[open] summary .icon { transform: rotate(180deg); }
.a-acc p { font-size: 14px; color: var(--a-soft); line-height: 1.6; padding-block-end: 16px; }
.a-tip { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(135deg, #f3f6ff, #fff); }
.a-tip > div:last-child { display: grid; gap: 8px; min-inline-size: 0; }
.a-tip-icon, .a-addon-icon { inline-size: 44px; block-size: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--a-blue-wash); color: var(--a-blue); flex: none; }
.a-tip-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 4px; }
.a-tip-actions:empty { display: none; }

/* ---- project ---- */
.a-backlink { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; font-size: 14px; color: var(--a-soft); justify-self: start; }
.a-backlink .icon { inline-size: 17px; block-size: 17px; }
[dir="rtl"] .a-backlink .icon { transform: scaleX(-1); }
.a-page > .a-backlink { margin-block-end: -14px; }
.a-proj-head { display: flex; align-items: center; gap: 14px; }
.a-proj-title { min-inline-size: 0; display: grid; gap: 6px; }
.a-proj-name { font-size: clamp(24px, 5vw, 34px); }
.a-proj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; color: var(--a-soft); }
.a-proj-meta > span:first-child { overflow-wrap: anywhere; }
.a-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--a-gutter)); padding-inline: var(--a-gutter); border-block-end: 1px solid var(--a-line); -webkit-overflow-scrolling: touch; }
.a-tabs::-webkit-scrollbar { display: none; }
.a-tabs a { flex: none; display: inline-flex; align-items: center; min-block-size: 48px; padding-inline: 14px; font-size: 15px; font-weight: 550; color: var(--a-soft); border-block-end: 2.5px solid transparent; margin-block-end: -1px; white-space: nowrap; }
.a-tabs a:hover { color: var(--a-ink); }
.a-tabs a.on { color: var(--a-blue); border-color: var(--a-blue); }
.a-tabpanel { display: grid; gap: 16px; min-inline-size: 0; }
.a-tabpanel > * { min-inline-size: 0; }
.a-set-grid { display: grid; gap: 16px; align-items: start; }
.a-set { display: grid; gap: 14px; justify-items: start; }
.a-set > .a-field, .a-set > .a-switch-row, .a-set > .a-meter, .a-set > .a-usage-head, .a-set > .a-limits, .a-set > .a-form-error { inline-size: 100%; }
.a-danger { border-color: #f3d2ce; }
.a-acc-email { display: flex; align-items: center; gap: 10px; font-size: 17px; overflow-wrap: anywhere; min-inline-size: 0; }
.a-acc-email span { min-inline-size: 0; overflow-wrap: anywhere; }
.a-limits { list-style: none; margin: 0; padding: 0; display: grid; }
.a-limits li { display: flex; justify-content: space-between; gap: 14px; padding-block: 10px; border-block-start: 1px solid #eef0f6; font-size: 14px; color: var(--a-soft); }
.a-limits b { color: var(--a-ink); font-weight: 600; text-align: end; overflow-wrap: anywhere; }

/* ---- addons ---- */
.a-addon { display: grid; gap: 16px; }
.a-addon-head { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.a-addon-title { flex: 1 1 200px; display: grid; gap: 4px; min-inline-size: 0; }
.a-addon-switch { display: inline-flex; align-items: center; min-block-size: 44px; }
.a-addon-body { display: grid; gap: 16px; transition: opacity .2s; }
.a-addon-body.is-off { opacity: .55; }
.a-addon.is-locked .a-addon-body { opacity: .5; pointer-events: none; user-select: none; }
.a-addon-foot { display: grid; gap: 12px; justify-items: start; }
.a-sub { display: grid; gap: 16px; padding: 16px; background: #f7f9ff; border: 1px solid #e6ebfa; border-radius: 16px; }
.a-hours { display: grid; gap: 4px; }
.a-hours-row { display: grid; grid-template-columns: 1fr; gap: 6px; padding-block: 8px; border-block-start: 1px solid #e6ebfa; align-items: center; }
.a-hours-row:first-child { border: 0; }
.a-hours-day { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 550; text-transform: capitalize; }
.a-hours-times { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--a-soft); }
.a-time { min-inline-size: 0; flex: 1; padding-inline: 10px; }
.a-hours-closed { font-size: 14px; color: var(--a-faint); }
.a-hours-row.bad .a-time { border-color: var(--a-bad); }
.a-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-block-start: 12px; }
.a-soon { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.a-soon-card { display: grid; gap: 8px; align-content: start; transition: transform .2s, border-color .2s; }
.a-soon-card:hover { transform: translateY(-3px); border-color: #cfd9fb; }
.a-soon-top { display: flex; justify-content: space-between; align-items: center; margin-block-end: 6px; }
.a-soon-card strong { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 500; letter-spacing: -.3px; }
.a-soon-card p { font-size: 14px; color: var(--a-soft); line-height: 1.55; }

/* ---- conversations ---- */
.a-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.a-tile { display: grid; gap: 6px; padding: 16px; align-content: start; }
.a-tile span { font-size: 13px; color: var(--a-soft); }
.a-tile strong { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 500; letter-spacing: -1px; }
.a-bars { display: flex; align-items: flex-end; gap: 5px; block-size: 40px; }
.a-bars i { flex: 1; block-size: var(--bar, 6%); background: #9db1ff; border-radius: 4px 4px 2px 2px; }
.a-bars i:last-child { background: var(--a-blue); }
.a-conv { list-style: none; margin: 0; padding: 4px 16px; }
.a-conv-row { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; padding-block: 14px; border-block-start: 1px solid #eef0f6; align-items: start; }
.a-conv-row:first-child { border: 0; }
.a-conv-avatar { inline-size: 40px; block-size: 40px; border-radius: 14px; background: var(--a-blue-wash); color: var(--a-blue); display: grid; place-items: center; font-family: 'Space Grotesk', sans-serif; font-weight: 600; grid-row: span 2; }
.a-conv-main { min-inline-size: 0; display: grid; gap: 3px; }
.a-conv-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.a-conv-top strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
.a-conv-top time { font-size: 12px; color: var(--a-faint); white-space: nowrap; }
.a-conv-preview { font-size: 14px; color: var(--a-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-conv-page { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--a-faint); min-inline-size: 0; }
.a-conv-page .icon { inline-size: 13px; block-size: 13px; }
.a-conv-page span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
.a-conv-row > .a-chip { grid-column: 2; justify-self: start; }

/* ---- wider screens ---- */
@media (min-width: 701px) {
  :root { --a-gutter: 28px; }
  .a-only-phone { display: none !important; }
  .a-top-in { block-size: 68px; }
  .a-logo.logo { font-size: 25px; }
  .a-view { padding-block-start: 36px; }
  .a-banner { grid-template-columns: auto 1fr auto; align-items: center; }
  .a-banner-actions { grid-column: auto; }
  .a-card { padding: 24px; }
  .a-auth { padding-block-start: 5vh; }
  .a-auth-card { padding: 38px 36px; }
  .a-grid2 { grid-template-columns: 1fr 1fr; }
  .a-sticky { position: static; margin: 0; padding: 6px 0 0; background: none; }
  .a-sticky.a-row > .a-btn-primary { flex: 0 1 auto; }
  .a-sticky .a-btn-block { inline-size: auto; min-inline-size: 240px; }
  .a-dots li span { display: inline; }
  .a-dots { gap: 18px; }
  .a-pv { padding: 20px; }
  .a-pv-top { grid-template-columns: 1fr auto; align-items: center; }
  .a-pv-toolbar .a-seg { flex: none; }
  .a-tiles { grid-template-columns: repeat(4, 1fr); }
  .a-hours-row { grid-template-columns: 190px 1fr; }
  .a-hours-times { max-inline-size: 300px; }
  .a-conv-row { grid-template-columns: auto 1fr auto; }
  .a-conv-avatar { grid-row: auto; }
  .a-conv-row > .a-chip { grid-column: auto; align-self: center; }
  .a-set-grid { grid-template-columns: 1fr 1fr; }
  .a-tip { padding: 24px; }
}

@media (min-width: 960px) {
  .a-dash { grid-template-columns: 1fr 320px; }
  .a-usage { position: sticky; inset-block-start: 92px; }
  .a-setup { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "intro frame" "side frame"; grid-template-rows: auto 1fr; column-gap: 40px; align-items: start; }
  .a-setup-frame { inline-size: min(440px, calc((100vh - 170px) * 480 / 760)); min-inline-size: 300px; position: sticky; inset-block-start: 88px; }
  .a-studio { grid-template-columns: minmax(320px, 400px) 1fr; gap: 24px; align-items: start; }
  .a-studio-left { order: 1; }
  .a-studio-right { order: 2; position: sticky; inset-block-start: 88px; }
  .a-pv-device { block-size: min(600px, calc(100vh - 240px)); min-block-size: 480px; }
  .a-pv-device[data-device="phone"] { block-size: min(600px, calc(100vh - 240px)); min-block-size: 480px; }
  .a-install { grid-template-columns: 1.2fr 1fr; align-items: start; }
  .a-install-main, .a-tip { grid-column: 1; }
  .a-install > .a-card:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
}

/* On phones the preview stays in reach while the controls scroll under it. */
@media (max-width: 959px) {
  .a-pv-device { block-size: 470px; }
  .a-pv-device[data-device="phone"] { block-size: 500px; }
}

@media (prefers-reduced-motion: reduce) {
  .a-spinner, li.running .a-step-dot, .a-btn.is-busy::after { animation: spin 1.6s linear infinite !important; }
}