/* ==========================================================================
   TACET web tokens — "Vula e qetë"
   Source of truth: the Android app, audit/opus-5-5 @ b7c008f
     colours   app/src/main/java/com/afri/app/ui/theme/Color.kt + Theme.kt
     type      ui/theme/Type.kt (Inter 4 variable, opsz 14–32; JetBrains Mono)
     shape     ui/theme/Shape.kt + SmoothCornerShape.kt, ui/theme/AfriSpace.kt
     motion    ui/theme/Motion.kt (AfriMotion v3) + ui/entry/EntryTimeline.kt
     surfaces  ui/theme/Glass.kt, ui/components (PressIndication, lightCatch)
   The app is NIGHT-ONLY by decision ("Tema e ditës u fshi me qëllim").
   :root = the app's night. The light set at the bottom is DERIVED for the web
   (same OKLCH hue 276) and does not exist in the app; opt-in only.
   ========================================================================== */

/* ---------- Fonts (self-hosted) ----------
   On tacet.chat these @font-face rules are replaced by tools/site/build.cjs with /assets/fonts/inter.woff2 and mono.woff2,
   built by tools/site/fonts.py from the app's Inter 4 and JetBrains Mono: opsz 14–32, wght 400–700 (mono 400–500),
   Latin + Latin Extended-A (ë ç ğ ı İ ş ä ö ü ß à è é …), punctuation and "€". No font is loaded from a third party. */
@font-face {
  font-family: "Inter";
  src: url("/assets/inter.a0c59792f2.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/jetbrains-mono.bbb8121c1d.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ---------- Ink scale (depth planes 0 → 5). Depth comes from these steps, never from shadows. ---------- */
  --ink0: #04050C;           /* scrim, call screen, bottom of the lock gradient          oklch(11.8% .019 275) */
  --ink: #080A15;            /* ground: page, window, splash (colors.xml `ink`)          oklch(14.9% .024 275) */
  --s1: #0E101D;             /* glass tint (bars, navigation)                            oklch(17.8% .027 277) */
  --s2: #141726;             /* grouped cards                                            oklch(20.9% .030 275) */
  --s3: #1C1F2F;             /* incoming bubbles, sheets, ALL dialogs, fields            oklch(24.4% .031 276) */
  --s4: #25283A;             /* tonal buttons, chips, icon tiles                         oklch(28.2% .033 277) */
  --s5: #303448;             /* switch track off, handle, pressed key                    oklch(33.0% .036 276) */

  /* ---------- Lines ---------- */
  --line: #34384B;           /* dividers, decoration only (1.54:1) */
  --line-strong: #696D83;    /* control and field borders (3.49:1 on s2) */

  /* ---------- Text (WCAG on ink: 17.80 / 10.20 / 6.32) ---------- */
  --text: #F2F3F8;
  --text-2: #B6BAC9;         /* secondary: previews, default icons */
  --text-3: #8D91A5;         /* meta, placeholder, inactive nav (5.70 on s2) */

  /* ---------- Accents: ONE meaning per colour ---------- */
  --iris: #998BFE;           /* "you / your action": links, focus, selection, read ticks (7.03 on ink) */
  --iris-fill: #6C52DF;      /* primary button fill, switch on, badge (white on it 5.37) */
  --iris-bubble: #2B2855;    /* outgoing bubble, flat, no gradient (text on it 12.33) */
  --live: #58E7C0;           /* "live now" OR "verified / safe". Never a plain button. (12.78 on ink) */
  --live-container: #1E343C;
  --rose: #F9667A;           /* SOS in action + irreversible actions. Never decoration. */
  --rose-fill: #D4273A;      /* SOS surface, destructive button (white on it 5.06) */
  --amber: #F9B64F;          /* warnings and failures. Never for delete. */
  --amber-container: #342D2C;

  /* Semantic aliases (Theme.kt AfriColors) */
  --action: var(--iris);
  --action-fill: var(--iris-fill);
  --on-action-fill: #FFFFFF;
  --on-accent: var(--ink);   /* content on bright live / iris / aurora fills: ink, not white */
  --focus-ring: var(--iris);

  /* ---------- Brand gradients ---------- */
  /* Aurora iris → live: ONLY for a live state that is YOURS, at most once per screen. */
  --aurora: linear-gradient(135deg, #998BFE, #58E7C0);
  /* Wax of the seal "Dylli" (ic_launcher_foreground), on the full 108 icon canvas: radial at 44/108, 41/108, r 42/108 */
  --wax: radial-gradient(38.9% 38.9% at 40.7% 38%, #8069F2 0%, #6C52DF 60%, #5A40CB 100%);
  /* Icon ground (ic_launcher_bg): soft ink lift behind the seal, no meaning colour */
  --ground-icon: radial-gradient(55.6% 55.6% at 50% 46.3%, #15173A 0%, #0C0E20 55%, #080A15 100%);
  /* Chat ground (Color.kt ChatGround) */
  --ground-chat: linear-gradient(180deg, #0C0E1B 0%, #080A15 45%, #07080F 100%);
  /* Lock ground (AppLockScreen): ink → ink0, iris light 9 % centred at 20 % height, r = 45 % of height */
  --ground-lock: radial-gradient(circle 45vh at 50% 20%, rgb(153 139 254 / .09), transparent),
                 linear-gradient(180deg, #080A15, #04050C);
  /* Guilloché (GuillocheCover): two families of concentric circles, iris 8 %, step 4.8, stroke .8 — "covered" material */
  --guilloche:
    repeating-radial-gradient(circle at -10px 135%, transparent 0 3.9px, rgb(153 139 254 / .08) 4px 4.7px, transparent 4.8px),
    repeating-radial-gradient(circle at calc(100% + 10px) 135%, transparent 0 3.9px, rgb(153 139 254 / .08) 4px 4.7px, transparent 4.8px);

  /* ---------- Surfaces ---------- */
  --light-catch: inset 0 1px 0 rgb(255 255 255 / .06);       /* 1 px light on the top edge of cards, sheets, tonal buttons */
  --light-catch-fill: inset 0 1px 0 rgb(255 255 255 / .14);  /* same on filled (iris) buttons */
  --press-overlay: rgb(255 255 255 / .05);                   /* pressed state; no ripples */
  --glass-bg: rgb(14 16 29 / .78);                           /* s1 78 % over a 24 px blur */
  --glass-bg-opaque: rgb(14 16 29 / .96);                    /* fallback / reduced transparency */
  --glass-blur: 24px;
  --glass-hairline: rgb(255 255 255 / .07);
  --glass-noise: .08;
  --watermark: .08;                                          /* seal as watermark: text colour at 8 % */

  /* ---------- Type ---------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --opsz-text: "opsz" 14;     /* Inter Text: everything under 20 px */
  --opsz-display: "opsz" 32;  /* Inter Display: 20 px and up only */

  /* App roles (sp → px 1:1). size / line / weight / tracking */
  --fs-display-l: 40px;  --lh-display-l: 46px;  --fw-display-l: 650;  --ls-display-l: -0.020em;  /* hero, SOS countdown (tnum) */
  --fs-display-m: 34px;  --lh-display-m: 40px;  --fw-display-m: 650;  --ls-display-m: -0.018em;  /* name on call screen */
  --fs-display-s: 32px;  --lh-display-s: 38px;  --fw-display-s: 680;  --ls-display-s: -0.016em;  /* large title, brand title */
  --fs-headline-l: 28px; --lh-headline-l: 34px; --fw-headline-l: 650; --ls-headline-l: -0.015em;
  --fs-headline-m: 24px; --lh-headline-m: 30px; --fw-headline-m: 650; --ls-headline-m: -0.014em;
  --fs-headline-s: 20px; --lh-headline-s: 26px; --fw-headline-s: 620; --ls-headline-s: -0.012em; /* every dialog/sheet title */
  --fs-title-l: 17px;    --lh-title-l: 22px;    --fw-title-l: 600;    --ls-title-l: -0.010em;
  --fs-title-m: 16px;    --lh-title-m: 21px;    --fw-title-m: 600;    --ls-title-m: -0.008em;
  --fs-title-s: 14px;    --lh-title-s: 19px;    --fw-title-s: 600;    --ls-title-s: -0.006em;
  --fs-body-l: 16px;     --lh-body-l: 22px;     --fw-body-l: 400;     --ls-body-l: -0.011em;     /* message text */
  --fs-body-m: 15px;     --lh-body-m: 20px;     --fw-body-m: 400;     --ls-body-m: -0.009em;
  --fs-body-s: 13px;     --lh-body-s: 18px;     --fw-body-s: 400;     --ls-body-s: -0.003em;
  --fs-label-l: 15px;    --lh-label-l: 20px;    --fw-label-l: 600;    --ls-label-l: -0.009em;    /* buttons, segments */
  --fs-label-m: 11px;    --lh-label-m: 13px;    --fw-label-m: 600;    --ls-label-m: 0.005em;
  --fs-label-s: 11.5px;  --lh-label-s: 14px;    --fw-label-s: 700;    --ls-label-s: 0;           /* badges (tnum) */
  --fs-meta: 12.5px;     --lh-meta: 16px;       --fw-meta: 500;                                  /* times, "137 m larg · tani" (tnum) */
  --fs-ledger: 13px;     --lh-ledger: 16px;     --fw-ledger: 600;                                /* section label + hairline, sentence case */
  --fs-code: 17px;       --lh-code: 24px;       --fw-code: 500;       --ls-code: 0.04em;         /* mono, "zero" */

  /* Web display scale (DERIVED: the app tops out at 40 px; same family, weight and tracking logic) */
  --fs-hero: clamp(44px, 5.6vw + 20px, 104px);  --lh-hero: 1.04;  --fw-hero: 680;  --ls-hero: -0.032em;
  --fs-h2: clamp(32px, 2.6vw + 22px, 56px);     --lh-h2: 1.08;    --fw-h2: 680;    --ls-h2: -0.024em;
  --fs-h3: clamp(22px, 0.8vw + 18px, 28px);     --lh-h3: 1.2;     --fw-h3: 650;    --ls-h3: -0.015em;
  --fs-lead: clamp(17px, 0.5vw + 15px, 21px);   --lh-lead: 1.5;   --fw-lead: 400;  --ls-lead: -0.011em;

  /* ---------- Space (4/8 grid) ---------- */
  --sp-2xs: 2px; --sp-xs: 4px; --sp-s: 8px; --sp-m: 12px; --sp-l: 16px; --sp-xl: 20px;
  --sp-2xl: 24px; --sp-3xl: 32px; --sp-4xl: 40px; --sp-5xl: 48px; --sp-6xl: 64px;
  --gutter-app: 20px;                         /* the app: 20 dp everywhere */
  --gutter: clamp(16px, 3.4vw + 4px, 44px);   /* web: 16 phone → 44 desktop (as guide.html) */
  --card-inset: 16px; --card-inset-compact: 12px;
  --between-cards: 12px; --section-top: 24px; --section-below: 8px;
  --touch: 48px; --icon: 24px; --row-icon: 20px; --icon-tile: 32px; --avatar: 48px;

  /* ---------- Radius ---------- */
  --r-xs: 6px;    /* bubble joins and tails */
  --r-sm: 10px;   /* tags, icon tiles */
  --r-md: 12px;   /* search, fields, reply quote */
  --r-lg: 20px;   /* cards, bubbles */
  --r-xl: 28px;   /* sheets, dialogs */
  --r-full: 999px;/* buttons, chips, avatars, SOS capsule */
  /* Continuous corners (SmoothCornerShape, smoothing .6 = curve over 1.6 r).
     Matching CSS: radius × 1.6 with superellipse(1.8) — use inside @supports (corner-shape: squircle). */
  --corner-smooth: superellipse(1.8);
  --r-lg-smooth: 32px;
  --r-xl-smooth: 45px;

  /* ---------- Motion (AfriMotion v3) ----------
     Springs move SPACE (position, size, scale). Durations exist ONLY for fades (opacity, colour).
     Stiffness only scales time: the 8 named springs are 4 curve shapes × their own settle time (to 0.1 %). */
  --spring-critical: linear(0, 0.004 1%, 0.019 2.2%, 0.042 3.5%, 0.079 5%, 0.162 7.8%, 0.363 13.8%, 0.466 17%, 0.558 20.2%, 0.639 23.5%, 0.707 26.8%, 0.768 30.2%, 0.818 33.8%, 0.861 37.5%, 0.9 42%, 0.929 46.8%, 0.953 52.2%, 0.971 58.5%, 0.983 65.5%, 0.991 73.8%, 1); /* damping 1 */
  --spring-soft: linear(0, 0.005 1.2%, 0.023 2.8%, 0.051 4.2%, 0.094 6%, 0.182 9%, 0.394 15.5%, 0.487 18.5%, 0.586 22%, 0.665 25.2%, 0.734 28.5%, 0.791 31.8%, 0.842 35.2%, 0.885 39%, 0.922 43.2%, 0.951 48%, 0.972 53.2%, 0.986 59%, 0.995 65.5%, 1 73.5%, 1); /* damping .9 (overshoot .15 %, invisible) */
  --spring-release: linear(0, 0.006 1.2%, 0.025 2.8%, 0.056 4.2%, 0.095 5.8%, 0.19 8.8%, 0.411 15%, 0.512 18%, 0.611 21.2%, 0.696 24.5%, 0.763 27.5%, 0.824 30.8%, 0.872 34%, 0.912 37.5%, 0.945 41.2%, 0.97 45.5%, 0.988 50.2%, 1 55.8%, 1.006 67.8%, 1); /* damping .85 */
  --spring-delight: linear(0, 0.008 1.2%, 0.029 2.5%, 0.07 4%, 0.123 5.5%, 0.176 6.8%, 0.245 8.2%, 0.532 14%, 0.65 16.5%, 0.757 19%, 0.849 21.5%, 0.918 23.8%, 0.98 26.2%, 1.027 28.7%, 1.062 31.5%, 1.077 33.2%, 1.088 35.2%, 1.094 37.2%, 1.094 39.5%, 1.081 44.8%, 1.019 58.8%, 0.998 67%, 0.991 78%, 1); /* damping .6, overshoot 9.5 %: THE ONLY BOUNCE */
  /* cubic-bezier fallbacks for browsers without linear() (no visible overshoot except delight) */
  --spring-critical-fb: cubic-bezier(.33, .69, .11, 1);
  --spring-soft-fb: cubic-bezier(.39, .82, .13, 1);
  --spring-release-fb: cubic-bezier(.41, .99, .13, 1);
  --spring-delight-fb: cubic-bezier(.45, 1.59, .05, .95);

  /* Named springs → curve + settle time */
  --dur-press-down: 150ms;  /* critical, k 3800: press to scale .97 (.94 icon buttons) */
  --dur-press-up: 310ms;    /* release, k 800 */
  --dur-micro: 224ms;       /* soft, k 1400: switches, segments, counters */
  --dur-layout: 317ms;      /* soft, k 700: open/close, new item, banners, PIN shake */
  --dur-push: 451ms;        /* critical, k 420: page/screen push, sheet */
  --dur-hero: 484ms;        /* soft, k 300: shared element (avatar → header, photo → full) */
  --dur-delight: 360ms;     /* delight, k 800: seal closing, "verified" seal. Three places, no more. */
  --dur-settle: 653ms;      /* critical, k 200: map markers gliding */
  --press-surface: .97;
  --press-icon: .94;

  /* Fades (opacity/colour only). Exits are always faster than entries. */
  --ease-enter: cubic-bezier(.2, 0, 0, 1);
  --ease-soft: cubic-bezier(0, 0, .58, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-gather: cubic-bezier(.45, 0, .75, .55);
  --dur-fade-in: 150ms;     /* ease-enter */
  --dur-fade-out: 100ms;    /* linear */
  --dur-crossfade: 200ms;   /* ease-enter: tabs, status steps, colour changes */
  --dur-veil: 260ms;        /* linear: every "moment" under reduced motion */
  --dur-reveal: 420ms;      /* sensitive content uncovering */
  --dur-recover: 320ms;     /* re-covering (privacy events cover instantly, no animation) */
  --dur-working: 1200ms;    /* pulse of temporary work only; never at rest */
  --dur-sweep: 1400ms;      /* skeleton light sweep, linear; only while waiting */
  --delay-skeleton: 300ms;  /* skeleton appears only after this… */
  --dur-skeleton-min: 500ms;/* …and then stays at least this long */
  --dur-breathe: 2400ms;    /* ONLY the live marker halo on the map */

  /* Entry choreography (EntryTimeline): seal flight + content rise */
  --ease-heavy: linear(0, 0.002 2.2%, 0.014 4.2%, 0.037 6.2%, 0.072 8.2%, 0.117 10.2%, 0.171 12.2%, 0.489 22.8%, 0.572 25.8%, 0.646 28.7%, 0.715 32%, 0.777 35.5%, 0.831 39.2%, 0.874 43%, 0.91 47.2%, 0.938 51.7%, 0.96 56.8%, 0.976 62.5%, 0.986 68.8%, 0.994 76.5%, 1); /* 1−e^−x(1+x+x²/2), ω 17: no start jerk, no overshoot */
  --ease-heavy-fb: cubic-bezier(.39, .43, .04, 1);
  --dur-seal-flight: 680ms;
  --ease-rise: linear(0, 0.005 1.5%, 0.02 3.2%, 0.049 5.2%, 0.085 7.2%, 0.168 11%, 0.362 19%, 0.449 22.8%, 0.535 26.8%, 0.606 30.5%, 0.665 34%, 0.721 37.8%, 0.768 41.5%, 0.809 45.2%, 0.852 50%, 0.889 55.2%, 0.92 60.8%, 0.945 67%, 0.965 73.8%, 0.981 81.2%, 1); /* ω 26 */
  --ease-rise-fb: cubic-bezier(.24, .2, .19, 1);
  --dur-rise: 255ms;
  --dur-rise-fade: 200ms;   /* with ease-soft */
  --rise-distance: 8px;
  --dur-entry: 700ms;
  --dur-entry-handoff: 120ms;
  --dur-entry-fade: 150ms;  /* linear: reduced-motion entry */
}

/* Browsers without linear(): swap to the fitted cubic-beziers */
@supports not (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-critical: var(--spring-critical-fb);
    --spring-soft: var(--spring-soft-fb);
    --spring-release: var(--spring-release-fb);
    --spring-delight: var(--spring-delight-fb);
    --ease-heavy: var(--ease-heavy-fb);
    --ease-rise: var(--ease-rise-fb);
  }
}

/* Reduce motion (app: system "Remove animations" → LocalReduceMotion):
   springs → snap, fades STAY, loops never start, moments become a 260 ms linear veil. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press-down: 0ms; --dur-press-up: 0ms; --dur-micro: 0ms; --dur-layout: 0ms;
    --dur-push: 0ms; --dur-hero: 0ms; --dur-delight: 0ms; --dur-settle: 0ms;
    --dur-seal-flight: 0ms; --dur-rise: 0ms; --rise-distance: 0px;
    --press-surface: 1; --press-icon: 1;
    --dur-reveal: var(--dur-veil); --dur-recover: var(--dur-veil);
    --dur-entry: var(--dur-entry-fade);
  }
  .loop, [data-loop] { animation: none !important; }   /* working / sweep / breathe: static */
}

/* "Më pak transparencë" (Glass.kt) → opaque glass */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bg: var(--glass-bg-opaque); --glass-blur: 0px; }
}

/* ---------- OPTIONAL light "Letër" — DERIVED for the web, NOT in the app (app is night-only).
   Same hue 276; contrasts checked (text 18.08, text-2 8.14, text-3 5.30, iris 6.27, live 5.43, rose 5.35, amber 5.42 on paper).
   Opt-in only via data-theme="light"; the brand default stays night. ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --ink0: #E6E7EF; --ink: #F9FAFD; --s1: #F4F5F9; --s2: #EEF0F6; --s3: #E7E9F0; --s4: #DFE1EA; --s5: #D4D7E2;
  --line: #D2D4DC; --line-strong: #7C7F8E;
  --text: #0E101F; --text-2: #484C5E; --text-3: #646879;
  --iris: #5E45CD; --iris-fill: #6C52DF; --iris-bubble: #E4E5FF;
  --live: #00755D; --live-container: #D8F7EC;
  --rose: #C52A38; --rose-fill: #D4273A;
  --amber: #955905; --amber-container: #FFEED3;
  --on-accent: #FFFFFF;
  --aurora: linear-gradient(135deg, #6C52DF, #00755D);
  --light-catch: inset 0 1px 0 rgb(255 255 255 / .7);
  --press-overlay: rgb(8 10 21 / .05);
  --glass-bg: rgb(244 245 249 / .78); --glass-bg-opaque: rgb(244 245 249 / .96); --glass-hairline: rgb(8 10 21 / .08);
  --ground-chat: linear-gradient(180deg, #F4F5F9 0%, #F9FAFD 45%, #EEF0F6 100%);
  --guilloche:
    repeating-radial-gradient(circle at -10px 135%, transparent 0 3.9px, rgb(94 69 205 / .08) 4px 4.7px, transparent 4.8px),
    repeating-radial-gradient(circle at calc(100% + 10px) 135%, transparent 0 3.9px, rgb(94 69 205 / .08) 4px 4.7px, transparent 4.8px);
}

/* ==========================================================================
   Role helpers (properties set one by one: the `font` shorthand would reset
   font-variation-settings / font-feature-settings)
   ========================================================================== */
.t-hero    { font-family: var(--font-sans); font-variation-settings: var(--opsz-display); font-size: var(--fs-hero); line-height: var(--lh-hero); font-weight: var(--fw-hero); letter-spacing: var(--ls-hero); text-wrap: balance; }
.t-h2      { font-family: var(--font-sans); font-variation-settings: var(--opsz-display); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); letter-spacing: var(--ls-h2); text-wrap: balance; }
.t-h3      { font-family: var(--font-sans); font-variation-settings: var(--opsz-display); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); letter-spacing: var(--ls-h3); }
.t-lead    { font-family: var(--font-sans); font-variation-settings: var(--opsz-text); font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: var(--fw-lead); letter-spacing: var(--ls-lead); color: var(--text-2); text-wrap: pretty; }
.t-body    { font-family: var(--font-sans); font-variation-settings: var(--opsz-text); font-size: var(--fs-body-l); line-height: var(--lh-body-l); letter-spacing: var(--ls-body-l); }
.t-ledger  { font-family: var(--font-sans); font-variation-settings: var(--opsz-text); font-size: var(--fs-ledger); line-height: var(--lh-ledger); font-weight: var(--fw-ledger); color: var(--text-3);
             display: flex; align-items: center; gap: var(--sp-m); }
.t-ledger::after { content: ""; flex: 1; height: 1px; background: var(--line); }   /* "Bisedat ——" — never ALL CAPS */
.t-meta    { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--fw-meta); color: var(--text-3); font-feature-settings: "tnum"; }
.t-num     { font-feature-settings: "tnum"; }                                   /* prices, times, counters */
.t-code    { font-family: var(--font-mono); font-size: var(--fs-code); line-height: var(--lh-code); font-weight: var(--fw-code); letter-spacing: var(--ls-code); font-feature-settings: "zero"; }

/* Surfaces */
.card  { background: var(--s2); border-radius: var(--r-lg); box-shadow: var(--light-catch); }
.sheet { background: var(--s3); border-radius: var(--r-xl); box-shadow: var(--light-catch); }
@supports (corner-shape: squircle) {
  .card  { border-radius: var(--r-lg-smooth); corner-shape: var(--corner-smooth); }
  .sheet { border-radius: var(--r-xl-smooth); corner-shape: var(--corner-smooth); }
}
.glass { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
         border-bottom: 1px solid var(--glass-hairline); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--glass-bg-opaque); } }

/* Press physics: down = critical spring 150 ms, up = release spring 310 ms; 5 % white overlay, no ripple */
.pressable { transition: transform var(--dur-press-up) var(--spring-release); }
.pressable:active { transform: scale(var(--press-surface)); transition-duration: var(--dur-press-down); transition-timing-function: var(--spring-critical);
                    background-image: linear-gradient(var(--press-overlay), var(--press-overlay)); }
.pressable.icon:active { transform: scale(var(--press-icon)); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* Content rise (entry / scroll-in): fade 200 ms soft + 8 px rise on the ω 26 spring */
.rise { animation: tc-rise-fade var(--dur-rise-fade) var(--ease-soft) both, tc-rise-move var(--dur-rise) var(--ease-rise) both; }
@keyframes tc-rise-fade { from { opacity: 0; } }
@keyframes tc-rise-move { from { translate: 0 var(--rise-distance); } }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  color-scheme: light;
  --ink0: #E6E7EF; --ink: #F9FAFD; --s1: #F4F5F9; --s2: #EEF0F6; --s3: #E7E9F0; --s4: #DFE1EA; --s5: #D4D7E2;
  --line: #D2D4DC; --line-strong: #7C7F8E;
  --text: #0E101F; --text-2: #484C5E; --text-3: #646879;
  --iris: #5E45CD; --iris-fill: #6C52DF; --iris-bubble: #E4E5FF;
  --live: #00755D; --live-container: #D8F7EC;
  --rose: #C52A38; --rose-fill: #D4273A;
  --amber: #955905; --amber-container: #FFEED3;
  --on-accent: #FFFFFF;
  --aurora: linear-gradient(135deg, #6C52DF, #00755D);
  --light-catch: inset 0 1px 0 rgb(255 255 255 / .7);
  --press-overlay: rgb(8 10 21 / .05);
  --glass-bg: rgb(244 245 249 / .78); --glass-bg-opaque: rgb(244 245 249 / .96); --glass-hairline: rgb(8 10 21 / .08);
  --ground-chat: linear-gradient(180deg, #F4F5F9 0%, #F9FAFD 45%, #EEF0F6 100%);
  --guilloche:
    repeating-radial-gradient(circle at -10px 135%, transparent 0 3.9px, rgb(94 69 205 / .08) 4px 4.7px, transparent 4.8px),
    repeating-radial-gradient(circle at calc(100% + 10px) 135%, transparent 0 3.9px, rgb(94 69 205 / .08) 4px 4.7px, transparent 4.8px);
  }
}

/* Kartvizita · F3a — pamja e kartës në shfletues: "Vula e qetë". Ngjyrat, shkronjat dhe lëvizja vijnë nga tokens.css (ndërtimi e
   bashkon para këtij skedari; nuk ka asnjë <style> ose style="" brenda faqes: CSP style-src 'self'). */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; background: var(--ink0); color: var(--text); }
body {
  min-height: 100vh; min-height: 100dvh;
  font-family: var(--font-sans); font-variation-settings: var(--opsz-text);
  font-size: var(--fs-body-m); line-height: var(--lh-body-m); letter-spacing: var(--ls-body-m);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.app {
  max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; background: var(--ground-chat);
  padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
  padding-top: env(safe-area-inset-top);
}
.attest-frame { position: absolute; width: 0; height: 0; border: 0; overflow: hidden; clip-path: inset(50%); }

/* Distinktivi i ruajtjes: i njëjti vend në çdo ekran. */
.badge {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 14px 0 0; padding: 6px 12px;
  border-radius: var(--r-full); border: 1px solid var(--glass-hairline);
  font-size: var(--fs-label-s); line-height: 14px; font-weight: 600;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.badge.ok { background: var(--live-container); color: var(--live); }
.badge.ok .dot { background: var(--live); }
.badge.warn { background: var(--amber-container); color: var(--amber); }
.badge.warn .dot { background: var(--amber); }

main#screen { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 12px 0 8px; outline: none; }
.screen { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.screen.center { text-align: center; }
.screen.warn .h-title { color: var(--amber); }
.screen.alarm .h-title { color: var(--rose); }
.spacer { flex: 1; min-height: 12px; }
.spacer-s { height: 8px; }
.muted { color: var(--text-3); }
.small { font-size: var(--fs-body-s); line-height: var(--lh-body-s); margin: 14px 0 0; }
.h-title { margin: 6px 0 0; font-family: var(--font-sans); font-variation-settings: var(--opsz-display); font-size: var(--fs-headline-m); line-height: var(--lh-headline-m);
  font-weight: var(--fw-headline-m); letter-spacing: var(--ls-headline-m); overflow-wrap: anywhere; }
.h2 { margin: 0 0 4px; font-size: var(--fs-title-l); line-height: var(--lh-title-l); font-weight: var(--fw-title-l); }
.h-sub { margin: 6px 0 0; color: var(--text-2); font-size: var(--fs-body-m); line-height: var(--lh-body-m); }
.handle { margin: 2px 0 0; font-size: var(--fs-body-s); line-height: var(--lh-body-s); color: var(--text-3); overflow-wrap: anywhere; }
.fine { margin: 8px 0 0; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 400; color: var(--text-3); }
.fine.ok { color: var(--live); }
.fine.bad { color: var(--rose); }
.fine.center { text-align: center; }

.seal-wrap { display: grid; place-items: center; margin: 14px 0 4px; }
.seal-cap { margin: 6px 12px 0; font-size: var(--fs-meta); line-height: 17px; color: var(--text-3); text-align: center; }
.seal { display: block; overflow: visible; max-width: 100%; height: auto; }
.seal-decor { stroke: var(--line-strong); opacity: .6; }
.seal-ring { stroke: var(--line); }
.seal-slots circle { fill: var(--line-strong); opacity: .55; }
.seal-rim { stroke: rgb(255 255 255 / .16); }
.seal-track { stroke: var(--s4); }
.planet-gap { fill: var(--ink); }
.seal-btn { appearance: none; border: 0; background: none; padding: 8px; border-radius: 50%; cursor: pointer; touch-action: none;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; color: inherit; }
.seal-btn:disabled { cursor: default; opacity: .8; }

.lines { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.lines li { display: flex; gap: 10px; font-size: var(--fs-body-s); line-height: 19px; color: var(--text-2); }
.lines li i { flex: 0 0 18px; height: 18px; border-radius: 50%; background: var(--s3); display: grid; place-items: center; font-style: normal;
  font-size: 11px; color: var(--iris); margin-top: 1px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.chip { font-size: var(--fs-label-s); line-height: 14px; font-weight: 600; padding: 5px 10px; border-radius: var(--r-full); background: var(--s3);
  color: var(--text-2); border: 1px solid var(--glass-hairline); }
.chip.live { color: var(--live); }
.chip.warn { color: var(--amber); }
.alarm-box.warn { border-color: var(--amber); }
.others { margin: 12px 0 0; }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 8px 0 0; padding: 0 16px;
  border: 0; border-radius: 14px; font-family: inherit; font-size: var(--fs-label-l); line-height: var(--lh-label-l); font-weight: var(--fw-label-l);
  letter-spacing: var(--ls-label-l); cursor: pointer; text-decoration: none; }
.btn.primary { background: var(--iris-fill); color: var(--on-action-fill); box-shadow: var(--light-catch-fill); }
.btn.quiet { background: var(--s3); color: var(--text); box-shadow: var(--light-catch); }
.btn.ghost { background: transparent; color: var(--text-2); }
.btn.danger { background: transparent; color: var(--rose); border: 1px solid var(--rose); }
.btn:disabled { opacity: .6; cursor: default; }
.btn:active:not(:disabled) { background-image: linear-gradient(var(--press-overlay), var(--press-overlay)); }

.cardface { position: relative; overflow: hidden; margin: 8px 0 0; padding: 16px; border-radius: 22px; border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--s2), var(--s1)); box-shadow: var(--light-catch); }
.row { display: flex; align-items: center; gap: 12px; }
.name { margin: 0; font-size: var(--fs-title-l); line-height: var(--lh-title-l); font-weight: var(--fw-title-l); letter-spacing: var(--ls-title-l); overflow-wrap: anywhere; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 0; }
.tile { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 76px; padding: 12px; border-radius: 16px;
  background: var(--s2); border: 1px solid var(--glass-hairline); }
.tile .k { font-size: var(--fs-title-s); line-height: var(--lh-title-s); font-weight: var(--fw-title-s); }
.tile .v { font-size: 12px; line-height: 16px; color: var(--text-3); }
.alarm-box { margin: 12px 0 0; padding: 12px; border-radius: 14px; border: 1px solid var(--rose); background: var(--s2); color: var(--text);
  font-size: var(--fs-body-s); line-height: 19px; }
.install { margin: 12px 0 0; }

.ios { margin: 8px 0 0; padding: 14px; border-radius: 18px; background: var(--s2); border: 1px solid var(--glass-hairline); }
.steps { margin: 8px 0 8px; padding-left: 20px; color: var(--text-2); font-size: var(--fs-body-s); line-height: 19px; }
.steps li + li { margin-top: 4px; }

.field-label { display: block; margin: 12px 0 6px; font-size: var(--fs-label-m); line-height: var(--lh-label-m); font-weight: 600; color: var(--text-2); }
.field { display: block; width: 100%; min-height: 48px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--line-strong);
  background: var(--s3); color: var(--text); font-family: inherit; font-size: var(--fs-body-l); }
.field[aria-invalid="true"] { border-color: var(--rose); }

/* Shiriti "Shkarko Tacet": pjesë e guaskës statike, i ngulur poshtë, zonë prekjeje ≥ 44 px. */
.dl { position: sticky; bottom: 0; margin: 8px -16px 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--glass-bg);
  border-top: 1px solid var(--glass-hairline); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); }
.dl-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 12px; background: var(--s3); color: var(--text);
  text-decoration: none; border: 1px solid var(--glass-hairline); cursor: pointer; }
.dl-ico { width: 24px; height: 24px; border-radius: 8px; background: var(--wax); display: grid; place-items: center; flex: none; box-shadow: var(--light-catch-fill); }
.dl-lbl { display: flex; flex-direction: column; min-width: 0; }
.dl-lbl b { font-size: 14.5px; line-height: 19px; font-weight: 600; }
.dl-lbl small { font-size: 11.5px; line-height: 14px; color: var(--text-3); }
.dl-note { display: block; margin: 8px 0 0; font-size: 11.5px; line-height: 16px; color: var(--text-3); }
.dl-line { display: block; }
.dl-note a { color: var(--iris); text-underline-offset: 2px; }
/* QR-ja e kompjuterit: e vogël, në të djathtë të rreshtave, që shiriti i ngulur të mos mbulojë përmbajtjen; e fshehur në dritare të ulëta. */
.dl-qr { float: right; width: 84px; margin: 2px 0 4px 12px; text-align: center; }
.dl-qr img { display: block; width: 84px; height: 84px; border-radius: 6px; }
.dl-qr span { display: block; margin-top: 3px; font-size: 10.5px; line-height: 13px; }
.dl-note::after { content: ""; display: block; clear: both; }
@media (max-height: 700px) { .dl-qr { display: none; } }
.soon-pill { display: inline-block; padding: 1px 8px; border-radius: var(--r-full); background: var(--s4); color: var(--text-2); font-weight: 600; }
.lang { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 8px 0 0; }
.lang-label { font-size: 11.5px; color: var(--text-3); }
.lang-select { min-height: 36px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--s3); color: var(--text); font-family: inherit; font-size: 13px; }
/* Gjatë mbajtjes së vulës shiriti zvogëlohet në ikonë dhe s'mbulon kurrë vulën. */
.holding .dl-note, .holding .lang, .holding .dl-lbl { display: none; }
.holding .dl { display: flex; justify-content: flex-end; background: transparent; border: 0; padding-top: 4px; }
.holding .dl-link { width: 48px; padding: 0; justify-content: center; }
.veiled #screen { visibility: hidden; }

/* ——— F3b: biseda, dokumentet, kutitë e njoftimit, dëftesa ——— */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.row.between { justify-content: space-between; }
.btn.small { min-height: 44px; width: auto; margin: 0; padding: 0 14px; font-size: var(--fs-label-m); line-height: var(--lh-label-m); }
.tile.act { appearance: none; text-align: left; font-family: inherit; color: inherit; cursor: pointer; width: 100%; }
.tile.act:active { background-image: linear-gradient(var(--press-overlay), var(--press-overlay)); }
.box-actions { display: grid; gap: 8px; margin-top: 10px; }
.box-actions .btn { margin: 0; min-height: 44px; }
.alarm-box.alarm { border-color: var(--rose); }
.alarm-box.info { border-color: var(--line-strong); }
.last { margin: 12px 0 0; padding: 12px; border-radius: 16px; background: var(--s2); border: 1px solid var(--glass-hairline); }
.last-who { font-size: var(--fs-label-m); line-height: var(--lh-label-m); font-weight: 600; }
.last-text { margin: 3px 0 0; color: var(--text-2); font-size: var(--fs-body-s); line-height: 20px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.more { margin: 14px 0 0; border-top: 1px solid var(--glass-hairline); padding-top: 8px; }
.more summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--text-2); font-size: var(--fs-label-m); font-weight: 600; }
.more[open] summary { color: var(--text); }
.receipt { margin: 14px 0 0; padding: 14px 16px; border-radius: 18px; background: var(--s2); border: 1px dashed var(--line-strong); text-align: left; }
.receipt .r { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 19px; color: var(--text-2); padding: 5px 0; }
.receipt .r b { color: var(--text); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.seal.broken .wax-piece { fill: #6C52DF; opacity: .85; }
.sheet-actions { display: grid; gap: 4px; margin-top: 12px; }
.sheet-actions .btn { margin: 0; }

/* Biseda: kolonë me fillin që rrëshqet (min-height:0), kokë, kompozitor. Gjatë bisedës shiriti "Shkarko Tacet" mbetet por pa shënimet. */
body.in-chat { overflow: hidden; }
body.in-chat .app { height: 100vh; height: 100dvh; min-height: 0; }
body.in-chat main#screen { padding-bottom: 0; }
body.in-chat .dl-note, body.in-chat .lang { display: none; }
body.in-chat .dl { margin-top: 4px; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.screen.chat { min-height: 0; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 6px 0 10px; border-bottom: 1px solid var(--glass-hairline); }
.chat-who { flex: 1; min-width: 0; }
.chat-name { margin: 0; font-size: var(--fs-title-s); line-height: var(--lh-title-s); font-weight: var(--fw-title-s); overflow-wrap: anywhere; }
.chat-seal { flex: none; display: block; width: 34px; height: 34px; }
.chat-seal .seal { width: 34px; height: 34px; }
.icon-btn { appearance: none; border: 0; background: transparent; color: var(--text); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; margin-left: -8px; }
.icon-btn:active { background: var(--press-overlay); }
.chat-banners .alarm-box { margin: 8px 0 0; }
.thread { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding: 12px 2px 6px; }
.thread:focus-visible { outline: 2px solid var(--iris); outline-offset: -2px; }
.day { align-self: center; font-size: 11.5px; line-height: 16px; color: var(--text-3); background: var(--s2); padding: 3px 10px; border-radius: var(--r-full); }
.sys, .gap { align-self: center; margin: 2px 0; font-size: 12px; line-height: 17px; color: var(--text-3); text-align: center; max-width: 300px; }
.gap { color: var(--amber); border: 1px dashed var(--amber); border-radius: var(--r-full); padding: 3px 12px; }
.b { max-width: 82%; padding: 9px 12px; border-radius: 18px; font-size: var(--fs-body-m); line-height: 21px; overflow-wrap: anywhere; }
.b.in { background: var(--s3); align-self: flex-start; border-bottom-left-radius: 6px; }
.b.out { background: var(--iris-bubble); align-self: flex-end; border-bottom-right-radius: 6px; }
.b-text { margin: 0; white-space: pre-wrap; }
.b-text.dim { color: var(--text-2); font-style: italic; }
.b .meta { display: block; margin-top: 3px; text-align: right; font-size: 11px; line-height: 14px; color: var(--text-3); font-feature-settings: "tnum"; }
.b.out .meta { color: var(--text-2); }
.tick { margin-left: 2px; }
.tick.wait { letter-spacing: 1px; }
.file { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.file .pdf { width: 34px; height: 40px; border-radius: 7px; background: var(--s5); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--text); flex: none; }
.file-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 120px; }
.file-name { font-weight: 600; font-size: var(--fs-body-s); line-height: 19px; overflow-wrap: anywhere; }
.file-slot { flex: 1 0 100%; }
.file-slot img { display: block; max-width: 100%; max-height: 320px; border-radius: 12px; margin-top: 8px; }
.file-slot .fine { margin: 6px 0 0; }
.chat-note { min-height: 0; margin: 0; padding: 6px 4px 0; font-size: 12px; line-height: 16px; color: var(--text-3); }
.chat-note:empty { display: none; }
.composer { display: flex; gap: 8px; align-items: flex-end; padding: 8px 0 6px; }
.chat-input { flex: 1; min-width: 0; min-height: 44px; max-height: 140px; resize: none; padding: 11px 14px; border-radius: 22px; background: var(--s2); border: 1px solid var(--line-strong); color: var(--text);
  font-family: inherit; font-size: var(--fs-body-l); line-height: 22px; }
.chat-input:disabled { opacity: .6; }
.round { appearance: none; border: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--s3); color: var(--text-2); flex: none; cursor: pointer; }
.round.send { background: var(--iris-fill); color: var(--on-action-fill); }
.round:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }

dialog.sheet { width: min(92vw, 440px); max-height: 90dvh; overflow: auto; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--s3); color: var(--text); box-shadow: var(--light-catch); }
dialog.sheet::backdrop { background: rgb(4 5 12 / .7); }
.sheet-h { margin: 0 0 6px; font-size: var(--fs-headline-s); line-height: var(--lh-headline-s); font-weight: var(--fw-headline-s); }

@media (prefers-reduced-motion: no-preference) {
  .planet.fall { animation: tc-fall 1.2s cubic-bezier(.2, .8, .2, 1) both; }
  .planet.d2 { animation-delay: .25s; } .planet.d3 { animation-delay: .5s; } .planet.d4 { animation-delay: .75s; }
  @keyframes tc-fall { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-transparency: reduce) { .dl { background: var(--glass-bg-opaque); -webkit-backdrop-filter: none; backdrop-filter: none; } }