/* ═══════════════════════════════════════════════════════
   APP STORE DOWNLOAD PROGRESS (AgencyOS26.4 Style)
   Smoother animations, glass-morphism, Agency-quality feel
   ═══════════════════════════════════════════════════════ */

/* Store Button Download Progress */
.store-btn-progress {
    width: auto;
    min-width: 40px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 2px;
}

.store-btn-progress svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 3px rgba(0,122,255,0.3));
}

.store-progress-bg {
    fill: none;
    stroke: rgba(255,255,255,0.12);
    stroke-width: 2.5;
}

.store-progress-ring {
    fill: none;
    stroke: #007aff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 100.5;
    stroke-dashoffset: 100.5;
    transition: stroke-dashoffset 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.store-btn.installing {
    opacity: 1;
    pointer-events: none;
    background: rgba(0,122,255,0.08) !important;
    border-color: rgba(0,122,255,0.15) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.store-btn-progress-text {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.2px;
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(255,255,255,0.22);
}

/* Make More UI Elements Rounder (AgencyOS26.4 Style) */
.settings-item {
    border-radius: 16px;
}

.modal-btn-primary,
.modal-btn-cancel {
    border-radius: 14px;
}

.phone-notification {
    border-radius: 18px;
}

.passcode-key {
    border-radius: 50%;
}

.store-item {
    border-radius: 16px;
}

.store-icon {
    border-radius: 18px;
}

.dial-key {
    border-radius: 50%;
}

.setup-btn {
    border-radius: 16px;
}

.call-btn {
    border-radius: 50%;
}

#wallet-balance-card {
    border-radius: 24px;
}

#transfer-btn,
#wallet-transfer input {
    border-radius: 16px;
}

.search-input {
    border-radius: 14px;
}

.calc-btn {
    border-radius: 50%;
}

.calc-btn.zero {
    border-radius: 32px;
}

.stopwatch-btn {
    border-radius: 50%;
}

.clock-tab {
    border-radius: 12px;
}

.ai-suggest-btn {
    border-radius: 20px;
}

.store-detail-btn {
    border-radius: 18px;
}

.store-detail-icon {
    border-radius: 28px;
}

.generic-app-icon {
    border-radius: 22px;
}

#buzz-message-input {
    border-radius: 24px;
}

#buzz-send-btn {
    border-radius: 50%;
}

#ai-input {
    border-radius: 24px;
}

#ai-send-btn {
    border-radius: 50%;
}

.msg-bubble {
    border-radius: 20px;
}

.contact-avatar,
.chat-avatar {
    border-radius: 50%;
}


/* ===== AGENCY-FX-START :: AgencyAI V2 — Edge FX + clean Face Unlock + smart brain + ephemeral overlay (additive, Claude, 20260628i) ===== */
/* ============================================================================
   agency-fx.css  —  clean Face Unlock + AgencyAI edge-only ambience + a bold,
   fully-animated open choreography that settles into a calm resting state.
   ----------------------------------------------------------------------------
   Purely ADDITIVE. Loads after the base CSS, so the cascade + last-defined
   @keyframes win. We never edit the base files. Identical block on phone + pad
   (pad-only tweaks are scoped with body.agency-pad-ui).

   PERFORMANCE LAW — animated properties are transform/opacity ONLY (compositor;
   smooth at high refresh). blur / box-shadow / mask are one-time STATIC paints.
   No per-frame filter / box-shadow / width / height / top / left swaps anywhere.
   ===========================================================================*/

/* ============================================================================
   SURFACE 1 — FACE UNLOCK  (GREEN — the base look IS the desired Face-ID look)
   We do NOT recolor here anymore: the co-dev's base is green and that's what we
   want. This block only:
     (1) KILLS THE LAG — strips the per-frame drop-shadow FILTERS off every
         element that animates during the scan (brackets move, scanline sweeps,
         ring traces). In the NUI, `filter` re-rasterizes EVERY frame — that was
         the lag (same family as backdrop-filter, which is also banned here).
     (2) Brings back the notch trace RING + the in-box scan SWEEP that the base
         turned OFF "per request", so the scan isn't empty ("zu wenig").
     (3) A clean, no-bounce ending.
   Animate transform/opacity only. Deploys IDENTICALLY to phone + pad.
   ============================================================================ */

/* (1) ---- KILL THE LAG: no per-frame filters on moving elements (stay green) - */
#faceid-overlay.scanning .faceid-bracket { filter: none !important; }
.faceid-scanline { filter: none !important; will-change: transform, opacity; }
.di-faceid-path  { filter: none !important; }

/* (2a) NOTCH RING back (base hid it via display:none) — green, and it LOADS:
   the ring DRAWS itself around the notch during the scan via the base's
   stroke-dashoffset trace (@keyframes diFaceIdTrace, left to the base). We only
   re-enable it and STRIP its drop-shadow FILTER — the filter was the lag (a
   per-frame blur pass); the thin-stroke draw itself is cheap. `.di-faceid-path
   { filter:none !important }` in section (1) also neutralises the base success
   drop-shadow pulse, so no paint-filter runs at any point.                       */
#di-faceid-border { display: block !important; }

/* (2b) IN-BOX SCAN SWEEP back (base hid it via display:none) — green gradient
   from the base, driven by OUR OWN compositor keyframe (transform/opacity),
   NEVER the shared faceidScanMulti. Smooth + lag-free.                          */
#faceid-overlay.scanning .faceid-scanline {
  display: block !important;
  top: 0 !important;
  animation: afxFaceScanSweep 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}
@keyframes afxFaceScanSweep {
  0%   { transform: translateY(0);    opacity: 0; }
  18%  { opacity: 0.95; }
  82%  { opacity: 0.95; }
  100% { transform: translateY(30px); opacity: 0; }
}

/* (2c) SMOOTH "SEARCHING" FACE — the base animated the face with PAINT props
   (eyes = height, mouth = width, brackets = top/left) → that was the laggy face
   movement. Redefine those UNLOCK-ONLY keyframes (0 enrollment refs → safe) to
   GPU transform — same motion, smooth — and give the face a subtle "looking
   around / searching" drift so the scan reads as actively hunting for a face.
   The success → green checkmark stays the base's clean finish (1:1).            */
#faceid-overlay.scanning .faceid-bracket,
#faceid-overlay.scanning .faceid-eye,
#faceid-overlay.scanning .faceid-mouth,
#faceid-overlay.scanning .faceid-face { will-change: transform; }

/* brackets: the focus-frame contracts toward centre — translate, not top/left */
@keyframes faceidBracketTL { 0%, 100% { transform: translate(0, 0); }   50% { transform: translate(3px, 3px); } }
@keyframes faceidBracketTR { 0%, 100% { transform: translate(0, 0); }   50% { transform: translate(-3px, 3px); } }
@keyframes faceidBracketBL { 0%, 100% { transform: translate(0, 0); }   50% { transform: translate(3px, -3px); } }
@keyframes faceidBracketBR { 0%, 100% { transform: translate(0, 0); }   50% { transform: translate(-3px, -3px); } }
/* eyes: blink via scaleY (was height) */
@keyframes faceidEyeBlink { 0%, 40%, 50%, 100% { transform: scaleY(1); }   44%, 46% { transform: scaleY(0.18); } }
/* mouth: width pulse via scaleX, keep its translateX(-50%) centering */
@keyframes faceidMouthScan { 0%, 100% { transform: translateX(-50%) scaleX(1); }   50% { transform: translateX(-50%) scaleX(0.72); } }
/* face: gentle "searching" drift + breathe (all compositor) */
@keyframes faceidFacePulse {
  0%   { transform: translate(0, 0)        scale(1); }
  25%  { transform: translate(1.4px, -0.6px) scale(1.03); }
  50%  { transform: translate(0, 0.8px)    scale(0.99); }
  75%  { transform: translate(-1.4px, -0.5px) scale(1.03); }
  100% { transform: translate(0, 0)        scale(1); }
}

/* (3) CLEAN ENDING — the base retracts the box with an overshoot/bounce curve
   (cubic-bezier(.34,1.3,…)) so it bounced back into the notch ("ende nicht
   clean"). Smooth no-overshoot ease for a clean grow-in AND fade/shrink-out.
   Geometry (scale / transform-origin / size) is UNTOUCHED — only the curve.
   The `visibility 0s linear 0.34s` DELAY keeps the box visible during the fade-
   OUT — but on OPEN it must NOT delay, else the box stays hidden 0.34s then
   POPS in ("blinkt rein"). So we re-assert the base's `.visible{delay:0}` with
   !important so the open is immediate/smooth and only the close is delayed.      */
#faceid-overlay {
  transition: opacity 0.2s ease,
              transform 0.34s cubic-bezier(0.34, 0.78, 0.2, 1),
              box-shadow 0.4s ease,
              visibility 0s linear 0.34s !important;
}
#faceid-overlay.visible {
  transition-delay: 0s !important;     /* OPEN: no visibility delay → no blink/pop */
}
/* CLEAN EXIT (the "weißes gesicht am ende" fix): at cleanup the JS removes ALL
   classes at once. The instant `.success` is gone, the line-art face + brackets
   (which were display:none under .success) snap back to their IDLE WHITE state
   and linger for the 0.34s fade — a weird white face behind the retracting box.
   So whenever the box is NOT `.visible` (fade-out + idle), force the face +
   brackets + checkmark hidden → the box fades out EMPTY and clean. The OPEN keeps
   them (`.visible` is present then), so the start is unaffected.                 */
#faceid-overlay:not(.visible) .faceid-face,
#faceid-overlay:not(.visible) .faceid-bracket,
#faceid-overlay:not(.visible) .faceid-checkmark {
  display: none !important;
}

/* ===========================================================================
   SURFACE 2 — AGENCYAI  (edge-only rim + bold entrance + smooth dismiss + chat)
   ===========================================================================*/

#agencyai-overlay {
  --aai-ease:    cubic-bezier(.22, 1, .36, 1);
  --aai-ease-in: cubic-bezier(.4, 0, .7, .25);
  --aai-spring:  cubic-bezier(.16, 1.12, .3, 1.05);   /* gentle overshoot */
}

/* (0) Neutralise the base colourful frame-edge glow + the bottom pulse glow. */
#phone-frame.agencyai-active-border::after { animation: none !important; filter: none !important; opacity: 0 !important; }
#agencyai-overlay #agencyai-glow { display: none !important; }
@keyframes agencyAiEdgeHue { 0%, 100% { transform: none; } }
@keyframes agencyAiPulse   { 0%, 100% { transform: translateX(-50%) scale(1); opacity: .5; } }

/* (1) Keep the rest of the screen blurred (backdrop) but lighter than base. */
#agencyai-overlay {
  background: rgba(8, 10, 16, .42) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.06) !important;
          backdrop-filter: blur(20px) saturate(1.06) !important;
}

/* (2) BOLD OPEN CHOREOGRAPHY — replace the base 0.35s slide with a spring pop.
   One-shot, transform/opacity only. Settles to the calm resting state below.
   The base sets `animation: agencyAiSlideUp .35s ...` on .agencyai-visible; we
   override it (later rule + !important). On close, (3) takes over. */
#agencyai-overlay.agencyai-visible {
  animation: afxAiEnter .52s var(--aai-spring) both !important;
  will-change: transform, opacity;
}
/* slide + fade only (NO scale — scaling rasterises text off-grid = blurry). */
@keyframes afxAiEnter {
  0%   { transform: translateY(7%); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* (open sheen sweep removed per request) */

/* (3) SMOOTH DISMISS — the whole overlay slides down + fades (transform/opacity
   only). agency-fx.js wraps the base close so this plays before it hides. */
#agencyai-overlay.afx-closing {
  animation: afxAiExit .28s var(--aai-ease-in) forwards !important;
  will-change: transform, opacity;
}
@keyframes afxAiExit {
  from { transform: translateY(0);  opacity: 1; }
  to   { transform: translateY(7%); opacity: 0; }
}

/* (4) EDGE-ONLY RIM — a thin soft rainbow hugging the screen perimeter and
   NOTHING in the centre. 3 nested layers: outer blur softens the band the inner
   mask carves; the conic child is clipped to the band. On open it briefly
   IGNITES (a bright flare) then settles to the calm breathe. */
#agencyai-overlay .afx-ai-edge {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 48px;
  overflow: hidden;
  filter: blur(11px) saturate(.98);     /* STATIC one-time paint: band -> soft rim */
  opacity: 0;
  transition: opacity .5s var(--aai-ease);
}
#agencyai-overlay.agencyai-visible .afx-ai-edge {
  opacity: 1;
  animation: afxRimIgnite 1.6s var(--aai-ease) both, afxRimBreath 18s 1.6s ease-in-out infinite;
}
#agencyai-overlay.afx-closing .afx-ai-edge { animation: none !important; opacity: 0; transition: opacity .35s ease; }
/* gentle fade up on open, then a very slow, soft breathing glow. */
@keyframes afxRimIgnite { 0% { opacity: 0; transform: scale(1.04); } 45% { opacity: .6; } 100% { opacity: .4; transform: scale(1); } }
@keyframes afxRimBreath { 0%, 100% { opacity: .3; } 50% { opacity: .5; } }

#agencyai-overlay .afx-ai-edge-mask {
  position: absolute;
  inset: 0;
  border-radius: 48px;
  padding: 2.5px;                        /* rim thickness before the parent blur */
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
#agencyai-overlay .afx-ai-edge-ring {
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 210deg,
      #d9c3ff, #c3ddff, #bdeede, #ffe7c0, #ffd0e0, #d9c3ff);
  transform: none;
}
/* a very slow, elegant flow on the rim once the open fade has settled. */
#agencyai-overlay.agencyai-visible .afx-ai-edge-ring { animation: afxRimFlow 64s 1.6s linear infinite; }
@keyframes afxRimFlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* (5) CHAT — fill the whole phone height; clear the dynamic island without
   wasting space. Top-anchored (base JS scrolls to bottom on append). */
#agencyai-overlay #agencyai-messages {
  position: relative;
  z-index: 3;
  min-height: 0 !important;
  padding-top: 58px !important;      /* phone island bottom ~47px + clean gap */
  padding-bottom: 10px !important;
  scroll-behavior: smooth;
}
/* Pad: wider/taller island (bottom ~52px) + taller status bar -> a touch more. */
body.agency-pad-ui #agencyai-overlay #agencyai-messages { padding-top: 64px !important; }
/* Chat flows TOP -> DOWN: messages stack from the top, each new one appends
   below, and the view smooth-scrolls down to it (agency-fx.js scrolls). No
   bottom-anchor (that made older messages jump upward when writing). */
#agencyai-overlay #agencyai-messages > .ai-msg:first-child { margin-top: 0 !important; }

/* (5b) "AgencyAI V2" badge — a small frosted title shown on a fresh/empty chat
   (the ephemeral overlay always opens empty). Fades/drops in with the entrance;
   hidden once a conversation exists, so it never overlaps messages. */
#agencyai-overlay .afx-ai-badge {
  position: absolute;
  top: 60px;
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 13px;
  font: 600 11.5px/1 'Inter', sans-serif;
  letter-spacing: .2px;
  color: rgba(255, 255, 255, .96);
  background: rgba(255, 255, 255, .14);
  border: .5px solid rgba(255, 255, 255, .2);
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--aai-ease), visibility 0s linear .3s;
}
body.agency-pad-ui #agencyai-overlay .afx-ai-badge { top: 66px; }
#agencyai-overlay .afx-ai-badge-dot {
  width: 13px;
  height: 13px;
  background: linear-gradient(135deg, #c084fc, #7c3aed);   /* Agency purple */
  -webkit-mask: url('../img/Agencylogo.png') center / 100% 100% no-repeat;
          mask: url('../img/Agencylogo.png') center / 100% 100% no-repeat;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 0 3px rgba(168, 110, 247, .5));   /* STATIC */
}
#agencyai-overlay.agencyai-visible.afx-ai-empty .afx-ai-badge {
  visibility: visible;
  transition: opacity .3s var(--aai-ease);
  animation: afxBadgeIn .5s .14s var(--aai-ease) both;
}
@keyframes afxBadgeIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* (6) Input bar + leading orb (orb pops in on open, then spins slowly). */
#agencyai-overlay .afx-ai-bar { position: relative; z-index: 3; flex: 0 0 auto; }
#agencyai-overlay.agencyai-visible .afx-ai-bar { animation: afxRise .5s .1s var(--aai-ease) both; }
#agencyai-overlay #agencyai-input {
  position: relative;
  z-index: 3;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .26) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .22);   /* STATIC, soft */
}
#agencyai-overlay #agencyai-input::placeholder { color: rgba(255, 255, 255, .5) !important; }

/* the AgencyAI orb IS the Agency logo, tinted purple (mask = logo silhouette,
   filled with a purple gradient) and slowly rotating. */
#agencyai-overlay .afx-ai-inorb {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  z-index: 4;
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 45%, #7c3aed 100%);   /* Agency purple */
  -webkit-mask: url('../img/Agencylogo.png') center / 100% 100% no-repeat;
          mask: url('../img/Agencylogo.png') center / 100% 100% no-repeat;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 0 5px rgba(168, 85, 247, .55));   /* STATIC glow on the silhouette */
  will-change: transform;
}
/* gentle scale-in on open, then the logo stays STILL (no rotation). */
#agencyai-overlay.agencyai-visible .afx-ai-inorb {
  animation: afxOrbEnter .55s .08s var(--aai-spring) both;
}
@keyframes afxOrbEnter { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

@keyframes afxRise { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } }

/* (7) Localised suggestion chips (text from the phone's own _t() keys). Stagger
   in on open. Collapse fully when hidden so they never reserve vertical space. */
#agencyai-overlay .afx-ai-suggests {
  position: relative;
  z-index: 3;
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 0 18px 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s var(--aai-ease), transform .4s var(--aai-ease);
  pointer-events: none;
}
#agencyai-overlay.agencyai-visible .afx-ai-suggests.afx-show {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#agencyai-overlay.agencyai-visible .afx-ai-suggests.afx-show .afx-ai-chip {
  animation: afxRise .42s var(--aai-ease) both;
}
#agencyai-overlay.agencyai-visible .afx-ai-suggests.afx-show .afx-ai-chip:nth-child(1) { animation-delay: .20s; }
#agencyai-overlay.agencyai-visible .afx-ai-suggests.afx-show .afx-ai-chip:nth-child(2) { animation-delay: .28s; }
#agencyai-overlay.agencyai-visible .afx-ai-suggests.afx-show .afx-ai-chip:nth-child(3) { animation-delay: .36s; }
#agencyai-overlay .afx-ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 15px;
  font: 500 12.5px/1 'Inter', sans-serif;
  color: rgba(255, 255, 255, .95);
  background: rgba(255, 255, 255, .16);
  border: .5px solid rgba(255, 255, 255, .24);
  cursor: pointer;
  transition: transform .15s var(--aai-ease), background .2s ease;
  white-space: nowrap;
}
#agencyai-overlay .afx-ai-chip i { font-size: 12.5px; opacity: .85; }
#agencyai-overlay .afx-ai-chip:hover  { background: rgba(255, 255, 255, .16); }
#agencyai-overlay .afx-ai-chip:active { transform: scale(.95); }

/* (8) Send button — soft clean gradient; transform-only press. */
#agencyai-overlay #agencyai-send-btn {
  position: relative;
  z-index: 3;
  background: linear-gradient(135deg, #7aa8ff, #b06bff 60%, #ff7fb4) !important;
  box-shadow: 0 3px 12px rgba(120, 120, 200, .28) !important;
  transition: transform .14s var(--aai-ease);
}
#agencyai-overlay #agencyai-send-btn:active { transform: scale(.9); }

/* (9) Message bubbles — rounder, materialise gently (transform/opacity only). */
#agencyai-overlay .ai-msg        { border-radius: 21px !important; }
#agencyai-overlay .ai-msg.user   { border-bottom-right-radius: 8px !important; }
#agencyai-overlay .ai-msg.ai     { border-bottom-left-radius: 8px !important; }
#agencyai-overlay .ai-msg.afx-in      { animation: afxMsgIn .4s var(--aai-ease) both; will-change: transform, opacity; }
#agencyai-overlay .ai-msg.user.afx-in { animation-name: afxMsgInUser; }
@keyframes afxMsgIn     { 0% { opacity: 0; transform: translateY(9px) scale(.98); }                 100% { opacity: 1; transform: none; } }
@keyframes afxMsgInUser { 0% { opacity: 0; transform: translateY(9px) translateX(5px) scale(.98); } 100% { opacity: 1; transform: none; } }

/* (9b) THINKING INDICATOR — clean purple "wave" while AgencyAI V2 thinks
   (0.5–2s). Compositor-only (transform/opacity); the glow is a STATIC paint. */
#agencyai-overlay .ai-msg.ai.typing {
  display: inline-flex !important;
  align-items: center;
  align-self: flex-start;
  width: auto !important;
  padding: 13px 16px !important;
  background: rgba(255, 255, 255, .12) !important;
}
#agencyai-overlay .ai-typing-dots { display: inline-flex; gap: 5px; align-items: center; }
#agencyai-overlay .ai-typing-dots span {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50%;
  background: linear-gradient(135deg, #c084fc, #7c3aed) !important;   /* Agency purple */
  box-shadow: 0 0 6px rgba(168, 85, 247, .5);   /* STATIC soft glow */
  opacity: .4;
  animation: afxThinkDot 1.25s ease-in-out infinite !important;
}
#agencyai-overlay .ai-typing-dots span:nth-child(2) { animation-delay: .16s !important; }
#agencyai-overlay .ai-typing-dots span:nth-child(3) { animation-delay: .32s !important; }
@keyframes afxThinkDot {
  0%, 100% { transform: translateY(0) scale(.7); opacity: .35; }
  40%      { transform: translateY(-4px) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #agencyai-overlay .ai-typing-dots span { animation: none !important; opacity: .7; }
}

/* (10) Reduced-motion — calm static state, no loops. */
@media (prefers-reduced-motion: reduce) {
  #agencyai-overlay.agencyai-visible,
  #agencyai-overlay .afx-ai-edge,
  #agencyai-overlay .afx-ai-edge-ring,
  #agencyai-overlay.agencyai-visible .afx-ai-bar,
  #agencyai-overlay .afx-ai-inorb,
  #agencyai-overlay.agencyai-visible.afx-ai-empty .afx-ai-badge,
  #agencyai-overlay.agencyai-visible .afx-ai-suggests.afx-show .afx-ai-chip,
  #agencyai-overlay .ai-msg.afx-in {
    animation: none !important;
  }
  #agencyai-overlay.agencyai-visible .afx-ai-edge { opacity: .45; }
  #agencyai-overlay.afx-closing { animation: none !important; opacity: 0; }
  #agencyai-overlay .ai-msg.afx-in { opacity: 1; transform: none; }
}

/* ===========================================================================
   SURFACE 3 — HOMESCREEN APP GRID  (consistent pages + tight to the widgets)
   `space-evenly` (earlier) spread the rows to fill the page, but that made pages
   look DIFFERENT (spread varies with row count) and pushed a big gap BETWEEN the
   widgets and the apps. User wants every page identical + apps right under the
   widgets. So we top-pack (`align-content: start`): every page is aligned the same
   at the top and the apps sit tight under the widgets (no extra inter-row band).
   The leftover sits at the bottom (inherent — few apps, tall screen). id+class +
   !important so it wins on phone (after phone.css) and pad (over pad.css).
   ===========================================================================*/
#app-pages-track .app-page {
  align-content: start !important;
}
/* PHONE now has 5 rows/page (companion.js IIFE 7) — the base 22px row-gap made the
   5th row's LABELS clip at the bottom (#app-pages-container overflow:hidden). Tighten
   the vertical gap so 5 rows + labels fit. Pad keeps its own spacing (it stays 4 rows). */
#app-pages-track .app-page { row-gap: 13px !important; }
body.agency-pad-ui #app-pages-track .app-page { row-gap: 26px !important; }

/* ===========================================================================
   SURFACE 4 — AGENCYAI V2 CHAT HISTORY  (burger top-left + sessions drawer)
   Compositor-only motion (drawer slides via transform; backdrop fades via
   opacity — NO animated blur). Dark, matches the phone. Injected by IIFE 6.
   ===========================================================================*/
#app-agencyai .app-header { position: relative; }
/* While the chat drawer is open, hide the app header entirely so its title can
   never paint over / clip the drawer's own "Chats" head. visibility (not display)
   = no layout shift / flicker on close. The drawer carries its own ← close. */
#app-agencyai.aai-drawer-open .app-header { visibility: hidden !important; }
.aai-burger {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  z-index: 4; background: transparent !important; border: none !important;
  color: #fff; font-size: 17px; width: 34px; height: 34px; display: flex;
  align-items: center; justify-content: center; cursor: pointer;
  border-radius: 10px; opacity: .92; padding: 0;
}
.aai-burger:active { transform: translateY(-50%) scale(.9); }

#aai-drawer-backdrop {
  position: absolute; inset: 0; z-index: 30; background: rgba(0, 0, 0, .62);
  opacity: 0; visibility: hidden;
  transition: opacity .26s ease, visibility 0s linear .26s;
}
#aai-drawer-backdrop.open { opacity: 1; visibility: visible; transition: opacity .26s ease; }

#aai-drawer {
  /* FULL-SCREEN panel (covers the app header → no clipped title, no redundant
     "AgencyAI V2" header, no chat bleeding on the right). Its own header clears
     the status bar. Close via the ← button (top-left, where the burger sits). */
  position: absolute; inset: 0; z-index: 40;
  width: 100%; max-width: none;
  background: #13151d;               /* fully opaque */
  display: flex; flex-direction: column;
  transform: translateX(-104%); will-change: transform;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
#aai-drawer.open { transform: translateX(0); }

.aai-drawer-head { display: flex; align-items: center; padding: 60px 10px 10px; gap: 6px; }
.aai-drawer-close {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); border: none; color: #fff;
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.aai-drawer-close:active { transform: scale(.9); }
.aai-drawer-title { font-size: 19px; font-weight: 700; color: #fff; flex: 1; }
.aai-drawer-new {
  background: rgba(255, 255, 255, .08); border: none; color: #fff;
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.aai-drawer-new:active { transform: scale(.92); }

.aai-drawer-search {
  display: flex; align-items: center; gap: 8px; margin: 4px 12px 8px;
  padding: 8px 11px; background: rgba(255, 255, 255, .07); border-radius: 12px;
}
.aai-drawer-search i { color: rgba(255, 255, 255, .45); font-size: 13px; }
.aai-drawer-search-input { flex: 1; background: transparent; border: none; outline: none; color: #fff; font-size: 14px; min-width: 0; }
.aai-drawer-search-input::placeholder { color: rgba(255, 255, 255, .4); }

.aai-drawer-list { flex: 1; overflow-y: auto; padding: 4px 8px 14px; }
.aai-drawer-empty { color: rgba(255, 255, 255, .4); font-size: 13px; text-align: center; padding: 28px 10px; }

.aai-sess-row {
  display: flex; align-items: stretch; gap: 4px; width: 100%;
  background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 12px; margin-bottom: 6px; overflow: hidden;
}
.aai-sess-row.active { background: rgba(120, 150, 255, .2); border-color: rgba(120, 150, 255, .32); }
.aai-sess-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  text-align: left; background: transparent; border: none; cursor: pointer;
  padding: 10px 4px 10px 12px; color: inherit;
}
.aai-sess-main:active { transform: scale(.99); }
.aai-sess-name { color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aai-sess-meta { display: flex; align-items: center; gap: 8px; }
.aai-sess-preview { flex: 1; color: rgba(255, 255, 255, .55); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.aai-sess-time { color: rgba(255, 255, 255, .4); font-size: 11px; flex-shrink: 0; }
.aai-sess-del {
  flex-shrink: 0; width: 42px; background: transparent; border: none;
  color: rgba(255, 120, 120, .7); font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.aai-sess-del:active { transform: scale(.85); color: #ff6b6b; }

/* ===========================================================================
   SURFACE 6 — LOCKSCREEN  ("Code verwenden" / Use-Passcode button)
   The base places #lock-passcode-btn at the VERY bottom (below the swipe-up
   cluster). Move it OUT of the bottom and float it higher as a clean pill, so
   the bottom stays clear for the swipe-up → Face ID gesture. Pure CSS, !important
   (beats the pad's pad.css layer too). Phone + pad share the id → one rule both.
   ===========================================================================*/
#lock-passcode-btn {
  position: absolute !important;
  left: 50% !important;
  bottom: 78px !important;       /* lowered from 118px so incoming notifications fit above it */
  transform: translateX(-50%) !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.13) !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 9px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
#lock-passcode-btn:active { transform: translateX(-50%) scale(0.94) !important; }
/* the swipe-up indicator + "swipe up to unlock" hint stay at the bottom (Face ID). */

/* ===========================================================================
   SURFACE 7 — LOCKSCREEN SWIPE-UP affordance — a HOME-INDICATOR BAR you drag up
   (per request: "ein strich den man nach oben ziehen kann, wie auf dem
   homescreen" — replaces the upward-flowing chevrons). We hide the base chevrons
   and draw ONE rounded pill mirroring #home-bar (134×5, white, fully rounded),
   centered in the indicator. It GENTLY BOBS UPWARD (transform/opacity only —
   compositor-safe, lag-free) to hint the swipe-up, so it doesn't look rigid.
   The swipe-up gesture itself is unchanged. Phone + pad share the ids.
   ===========================================================================*/
#lock-swipe-indicator {
  animation: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#lock-swipe-indicator i { display: none !important; }   /* hide the base chevrons */
#lock-swipe-indicator::after {
  content: "";
  display: block;
  width: 134px;
  height: 5px;
  background: #fff;
  border-radius: 100px;
  opacity: 0.6;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
  will-change: transform, opacity;
  animation: afxLockBar 2.2s ease-in-out infinite;
}
/* gentle upward "drag me" hint: rises ~7px, brightens, eases back — never jerky */
@keyframes afxLockBar {
  0%   { transform: translateY(0);    opacity: 0.5; }
  45%  { transform: translateY(-7px); opacity: 0.95; }
  68%  { transform: translateY(-7px); opacity: 0.95; }
  100% { transform: translateY(0);    opacity: 0.5; }
}
/* "Swipe up to unlock" TEXT stays removed (per earlier request). */
#lock-hint { display: none !important; }

/* ===========================================================================
   SURFACE 8 — PASSCODE ENTRY SCREEN  (show the wallpaper + perfectly centered)
   Base #passcode-screen has a SOLID dark gradient covering the wallpaper, and a
   60px top padding that offsets the keypad downward. We:
     • replace the solid bg with a FROSTED translucent layer (backdrop-filter) so
       the wallpaper shows through softly — and the lock-screen content behind
       (clock / chevrons / passcode button) blurs to harmless ambient, no clutter;
     • centre the keypad (padding-top:0 → true vertical centre);
     • drop the keys' OWN backdrop-filter (the screen frost makes it redundant and
       avoids a costly nested blur).
   SAFE re lag: the passcode screen is STATIC while shown (lock clock updates per
   minute, not per frame), unlike the animated Face-ID box. Phone + pad share ids.
   ===========================================================================*/
#passcode-screen {
  background: rgba(10, 11, 15, 0.34) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
          backdrop-filter: blur(18px) saturate(1.2) !important;
  padding-top: 0 !important;
}
.passcode-key {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}


/* ===== drag-to-right-edge new-page placeholder (phone edit mode) ===== */
/* Empty trailing page rendered during edit mode so a dragged app has a physical drop target.
   .app-page already sets min-width:100% so it sizes correctly inside #app-pages-track. We add a
   subtle dashed frame as an affordance, transform/opacity-only (no filter) so paging stays smooth. */
.app-page.aai-newpage-ph {
  position: relative;
}
#home-screen.editing .app-page.aai-newpage-ph::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px dashed rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
}
/* Brighten the frame while a drag is in progress so it reads as "drop here for a new page". */
#home-screen.editing.home-grid-dragging .app-page.aai-newpage-ph::after,
body.home-grid-dragging #home-screen.editing .app-page.aai-newpage-ph::after {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(255, 255, 255, 0.32);
}

/* ===== AAI HOME AUTO-SORT BUTTON (edit-mode only) ===== */
#aai-sortbtn {
    display: none;
    position: absolute;
    right: 16px;
    bottom: 18px;
    z-index: 12;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: rgba(12, 18, 30, 0.42);
    color: rgba(255, 255, 255, 0.96);
    font-size: 17px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    opacity: 0;
    transform: scale(0.86);
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-user-select: none;
    user-select: none;
}
#home-screen.editing #aai-sortbtn {
    display: inline-flex;
    opacity: 1;
    transform: scale(1);
}
#aai-sortbtn:active { transform: scale(0.92); }
#aai-sortbtn.aai-sortbtn-busy i { animation: aaiSortSpin 0.6s linear infinite; }
@keyframes aaiSortSpin { to { transform: rotate(360deg); } }

/* ===========================================================================
   SURFACE 9 — AgencyAI APP welcome → matches the home-overlay menu look
   The home-activated AgencyAI overlay shows clean translucent-white pill chips
   (.afx-ai-chip); the APP welcome used purple-gradient blurred chips. Re-skin
   the app welcome chips + suggestion row to the SAME look so both surfaces feel
   identical. Scoped to #app-agencyai so the overlay is untouched. CSS only.
   ===========================================================================*/
#app-agencyai .ai-suggestions {
  gap: 8px !important;
  justify-content: center !important;
  padding: 0 18px 10px !important;
}
#app-agencyai .ai-suggest-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 14px !important;
  border-radius: 15px !important;
  font: 500 13px/1 "Inter", sans-serif !important;
  color: rgba(255, 255, 255, .95) !important;
  background: rgba(255, 255, 255, .16) !important;
  border: .5px solid rgba(255, 255, 255, .24) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  transition: transform .15s cubic-bezier(.22, 1, .36, 1), background .2s ease !important;
  white-space: nowrap !important;
}
#app-agencyai .ai-suggest-btn:hover  { background: rgba(255, 255, 255, .20) !important; }
#app-agencyai .ai-suggest-btn:active { background: rgba(255, 255, 255, .26) !important; transform: scale(.95) !important; }

/* ===========================================================================
   SURFACE 10 — Buzz shared-location INLINE ACTION BUTTONS (under each card)
   companion.js renders two buttons directly UNDER every shared-location card:
   "Mark on map" (GTA waypoint) + "Open Maps". Compositor-only press.
   ===========================================================================*/
.aai-loc-actions {
  display: flex; gap: 6px; margin: 7px 0 1px; flex-wrap: wrap;
}
.aai-loc-act {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px; border-radius: 12px;
  background: rgba(255, 255, 255, .12);
  border: .5px solid rgba(255, 255, 255, .18);
  color: #fff; font-size: 11.5px; font-weight: 500; cursor: pointer;
  white-space: nowrap; line-height: 1;
  transition: transform .14s cubic-bezier(.22, 1, .36, 1), background .2s ease;
}
.aai-loc-act span { overflow: hidden; text-overflow: ellipsis; }
.aai-loc-act i { font-size: 12px; opacity: .9; }
.aai-loc-act.mark { background: rgba(10, 132, 255, .24); border-color: rgba(10, 132, 255, .4); color: #d6e9ff; }
.aai-loc-act:hover { background: rgba(255, 255, 255, .16); }
.aai-loc-act.mark:hover { background: rgba(10, 132, 255, .32); }
.aai-loc-act:active { transform: scale(.96); }


/* ===== AGENCY-FX: COMPANION SETUP STEP ===== */
/* Injected "Connect Companion" wizard step. Mirrors the base .setup-* look so
   it inherits the wizard's slide transitions; only the pairing card + status
   pill + download row are new. Light + dark (.setup-dark) handled. */

.aai-setup-companion-step {
    gap: 10px;
}

.aai-setup-companion-step .aai-sc-icon {
    color: #007aff;
    margin-bottom: 6px;
    animation: none;
    opacity: 1;
}
.setup-dark .aai-setup-companion-step .aai-sc-icon {
    color: #4da3ff;
}

/* Pairing card — light, glassy, matches .setup-perf-card surface language. */
.aai-sc-card {
    width: 100%;
    max-width: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 14px;
    border-radius: 18px;
    border: 0.5px solid rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.02));
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.setup-dark .aai-sc-card {
    border-color: rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.aai-sc-qr {
    width: 132px;
    height: 132px;
    border-radius: 12px;
    background: #fff;
    padding: 7px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.aai-sc-qr svg {
    width: 100%;
    height: 100%;
    display: block;
}
.aai-sc-qr-fallback {
    font-size: 40px;
    color: rgba(0, 0, 0, 0.22);
}

.aai-sc-hint {
    font-size: 11.5px;
    line-height: 1.35;
    text-align: center;
    color: rgba(0, 0, 0, 0.45);
    max-width: 210px;
}
.setup-dark .aai-sc-hint {
    color: rgba(255, 255, 255, 0.45);
}

.aai-sc-code-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.aai-sc-code-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.4);
}
.setup-dark .aai-sc-code-label {
    color: rgba(255, 255, 255, 0.4);
}
.aai-sc-code {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 4px;
    color: #007aff;
    font-variant-numeric: tabular-nums;
}
.setup-dark .aai-sc-code {
    color: #4da3ff;
}

/* Status pill */
.aai-sc-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.05);
    font-size: 12px;
    color: rgba(0, 0, 0, 0.55);
}
.setup-dark .aai-sc-status {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}
.aai-sc-status .aai-sc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff9f0a;
    flex: 0 0 auto;
    animation: aaiScPulse 1.4s ease-in-out infinite;
}
.aai-sc-status[data-status="linked"] .aai-sc-dot {
    background: #34c759;
    animation: none;
}
.aai-sc-status[data-status="expired"] .aai-sc-dot,
.aai-sc-status[data-status="error"] .aai-sc-dot {
    background: #ff453a;
    animation: none;
}
.aai-sc-status[data-status="linked"] .aai-sc-status-text {
    color: #34c759;
}
.aai-sc-countdown {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}
.aai-sc-countdown:empty {
    display: none;
}

/* Download hint row */
.aai-sc-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(0, 0, 0, 0.4);
}
.setup-dark .aai-sc-download {
    color: rgba(255, 255, 255, 0.42);
}
.aai-sc-download i {
    font-size: 11px;
    opacity: 0.85;
}
.aai-sc-download-url {
    font-weight: 600;
    color: rgba(0, 0, 0, 0.55);
}
.setup-dark .aai-sc-download-url {
    color: rgba(255, 255, 255, 0.6);
}

/* Pad: slightly larger QR + tighter vertical rhythm (the pad viewport is wider
   and the wizard has more room). transform/opacity-only animations only. */
body.agency-pad-ui .aai-sc-qr {
    width: 150px;
    height: 150px;
}
body.agency-pad-ui .aai-setup-companion-step .aai-sc-card {
    max-width: 300px;
}
body.agency-pad-ui .aai-setup-companion-step .setup-btn {
    max-width: 300px;
}

@keyframes aaiScPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.6); opacity: 0.55; }
}

/* ===========================================================================
   SURFACE 11 — Setup-wizard: Companion step fit + clickable dots + Face Unlock light mode
   ===========================================================================*/
/* (a) Companion step content stays ABOVE the absolute step dots (bottom:36px) */
.aai-setup-companion-step { padding-bottom: 52px !important; gap: 7px !important; }
.aai-setup-companion-step .aai-sc-card { padding: 13px 14px 11px !important; gap: 8px !important; }
.aai-setup-companion-step .aai-sc-qr { width: 110px !important; height: 110px !important; }
.aai-setup-companion-step .aai-sc-download { display: none !important; }
/* (b) progress dots clickable (jump back) */
#setup-overlay .setup-step-indicator .step-dot { cursor: pointer !important; }
#setup-overlay:not(.setup-dark) .setup-step-indicator .step-dot:not(.active):hover { background: rgba(0, 0, 0, 0.3); }
#setup-overlay.setup-dark .setup-step-indicator .step-dot:not(.active):hover { background: rgba(255, 255, 255, 0.4); }
/* (c) Face Unlock setup — clearer on the LIGHT theme (dark face box on #f2f2f7) */
#setup-overlay:not(.setup-dark) .setup-faceid-container {
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3), 0 0 0 5px rgba(10, 132, 255, 0.08) !important;
}
#setup-overlay:not(.setup-dark) .setup-faceid-ring { border-color: rgba(0, 122, 255, 0.5) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55) !important; }
#setup-overlay:not(.setup-dark) .setup-faceid-aura { opacity: 1 !important; }
/* THE REAL FIX: the fancy setup face features are rgba(0,0,0,.88) (DARK) by default
   — only `.setup-dark` flips them to #fff. On the #000 face box the face is invisible
   (dark-on-black) in LIGHT mode. Force them WHITE in light mode; :not(.scanning) so
   the green (#34c759) scanning feedback is preserved. */
#setup-overlay:not(.setup-dark) .setup-faceid-container:not(.scanning) .faceid-eye,
#setup-overlay:not(.setup-dark) .setup-faceid-container:not(.scanning) .faceid-mouth,
#setup-overlay:not(.setup-dark) .setup-faceid-container:not(.scanning) .faceid-bracket { border-color: #ffffff !important; }
#setup-overlay:not(.setup-dark) .setup-faceid-container:not(.scanning) .faceid-nose,
#setup-overlay:not(.setup-dark) .setup-faceid-container:not(.scanning) .faceid-nose::after { background: #ffffff !important; }

/* ===== AGENCY-FX-END ===== */