/* ============================================================
   tap-motion.css  ·  v2
   ------------------------------------------------------------
   Changes from v1:
   - .tap-btn hover replaced with bloomed conic halo (z-index:-1,
     blur 18px). The button itself stays crisp; the world glows.
     The mask-composite ring is now reserved for .gen-aura-inline
     (active "generating" state).
   - New --tint layer routes card/input/counter/pill colors.
     Defaults to --accent-*; overridden inside [data-provider]
     subtrees by per-provider tokens.
   - Ten provider palettes added; gemini + openrouter cycle.
   - Adds .tap-provider-chip + .tap-provider-header components.

   IMPORTANT — stacking context note:
   .tap-btn does NOT use `isolation: isolate`. Its halo ::before
   has z-index:-1 and must escape into the nearest ancestor
   stacking context. CONSUMERS must put `isolation: isolate` on
   any solid-background container (panels, cards, page wrappers)
   so the halo stays within that container instead of escaping
   to the root and being clipped behind page backgrounds.
   ============================================================ */

:root {
  /* Motion tokens */
  --motion-instant: 80ms;
  --motion-fast:    140ms;
  --motion-base:    200ms;
  --motion-slow:    360ms;
  --motion-slower:  600ms;
  --motion-ambient: 6s;

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-spring:   cubic-bezier(0.5, 1.4, 0.5, 1);

  /* Semantic colours — never theme-tinted */
  --sem-success: #22c55e; --sem-success-r:34;  --sem-success-g:197; --sem-success-b:94;
  --sem-error:   #ef4444; --sem-error-r:239;   --sem-error-g:68;    --sem-error-b:68;
  --sem-warning: #f59e0b; --sem-warning-r:245; --sem-warning-g:158; --sem-warning-b:11;
  --sem-info:    #38bdf8; --sem-info-r:56;     --sem-info-g:189;    --sem-info-b:248;

  /* TINT LAYER — falls back to user theme accent. Provider
     subtrees override these locally without touching --accent. */
  --tint:        var(--accent);
  --tint-2:      var(--accent-2);
  --tint-light:  var(--accent-light);
  --tint-r:      var(--accent-r);
  --tint-g:      var(--accent-g);
  --tint-b:      var(--accent-b);
  --tint2-r:     var(--accent2-r);
  --tint2-g:     var(--accent2-g);
  --tint2-b:     var(--accent2-b);
}

/* ============================================================
   PROVIDER TOKENS
   Each block sets its provider palette AND re-routes --tint
   to that provider. Drop `data-provider="X"` on any subtree
   (typically a .tap-card or .tap-provider-header) and every
   tinted component inside automatically picks it up.
   ============================================================ */

[data-provider="anthropic"] {
  --provider-1:#d97757; --provider-2:#e8a87c;
  --provider-r:217; --provider-g:119; --provider-b:87;
  --provider-2-r:232; --provider-2-g:168; --provider-2-b:124;
  --provider-dim:  rgba(217,119,87,0.14);
  --provider-glow: rgba(217,119,87,0.30);
  --tint:var(--provider-1); --tint-2:var(--provider-2); --tint-light:#f0b08b;
  --tint-r:var(--provider-r); --tint-g:var(--provider-g); --tint-b:var(--provider-b);
  --tint2-r:var(--provider-2-r); --tint2-g:var(--provider-2-g); --tint2-b:var(--provider-2-b);
}
[data-provider="openai"] {
  --provider-1:#10a37f; --provider-2:#4a5568;
  --provider-r:16; --provider-g:163; --provider-b:127;
  --provider-2-r:74; --provider-2-g:85; --provider-2-b:104;
  --provider-dim:  rgba(16,163,127,0.14);
  --provider-glow: rgba(16,163,127,0.30);
  --tint:var(--provider-1); --tint-2:var(--provider-2); --tint-light:#34d4ad;
  --tint-r:var(--provider-r); --tint-g:var(--provider-g); --tint-b:var(--provider-b);
  --tint2-r:var(--provider-2-r); --tint2-g:var(--provider-2-g); --tint2-b:var(--provider-2-b);
}
[data-provider="gemini"] {
  /* representative 2-stop for non-rim components */
  --provider-1:#9b72cb; --provider-2:#4285f4;
  --provider-r:155; --provider-g:114; --provider-b:203;
  --provider-2-r:66; --provider-2-g:133; --provider-2-b:244;
  --provider-dim:  rgba(155,114,203,0.14);
  --provider-glow: rgba(155,114,203,0.30);
  --tint:var(--provider-1); --tint-2:var(--provider-2); --tint-light:#c4a0e8;
  --tint-r:var(--provider-r); --tint-g:var(--provider-g); --tint-b:var(--provider-b);
  --tint2-r:var(--provider-2-r); --tint2-g:var(--provider-2-g); --tint2-b:var(--provider-2-b);
}
[data-provider="groq"] {
  --provider-1:#ef4444; --provider-2:#1a1a1a;
  --provider-r:239; --provider-g:68; --provider-b:68;
  --provider-2-r:60; --provider-2-g:60; --provider-2-b:60;
  --provider-dim:  rgba(239,68,68,0.12);
  --provider-glow: rgba(239,68,68,0.25);
  --tint:var(--provider-1); --tint-2:var(--provider-2); --tint-light:#fca5a5;
  --tint-r:var(--provider-r); --tint-g:var(--provider-g); --tint-b:var(--provider-b);
  --tint2-r:var(--provider-2-r); --tint2-g:var(--provider-2-g); --tint2-b:var(--provider-2-b);
}
[data-provider="deepseek"] {
  --provider-1:#1e3a8a; --provider-2:#475569;
  --provider-r:30; --provider-g:58; --provider-b:138;
  --provider-2-r:71; --provider-2-g:85; --provider-2-b:105;
  --provider-dim:  rgba(30,58,138,0.18);
  --provider-glow: rgba(30,58,138,0.35);
  --tint:var(--provider-1); --tint-2:var(--provider-2); --tint-light:#6b8ef0;
  --tint-r:var(--provider-r); --tint-g:var(--provider-g); --tint-b:var(--provider-b);
  --tint2-r:var(--provider-2-r); --tint2-g:var(--provider-2-g); --tint2-b:var(--provider-2-b);
}
[data-provider="openrouter"] {
  /* representative 2-stop for non-rim components */
  --provider-1:#6366f1; --provider-2:#22d3ee;
  --provider-r:99; --provider-g:102; --provider-b:241;
  --provider-2-r:34; --provider-2-g:211; --provider-2-b:238;
  --provider-dim:  rgba(99,102,241,0.14);
  --provider-glow: rgba(99,102,241,0.30);
  --tint:var(--provider-1); --tint-2:var(--provider-2); --tint-light:#a5b4fc;
  --tint-r:var(--provider-r); --tint-g:var(--provider-g); --tint-b:var(--provider-b);
  --tint2-r:var(--provider-2-r); --tint2-g:var(--provider-2-g); --tint2-b:var(--provider-2-b);
}
[data-provider="together"] {
  --provider-1:#6366f1; --provider-2:#a78bfa;
  --provider-r:99; --provider-g:102; --provider-b:241;
  --provider-2-r:167; --provider-2-g:139; --provider-2-b:250;
  --provider-dim:  rgba(99,102,241,0.14);
  --provider-glow: rgba(99,102,241,0.30);
  --tint:var(--provider-1); --tint-2:var(--provider-2); --tint-light:#a5b4fc;
  --tint-r:var(--provider-r); --tint-g:var(--provider-g); --tint-b:var(--provider-b);
  --tint2-r:var(--provider-2-r); --tint2-g:var(--provider-2-g); --tint2-b:var(--provider-2-b);
}
[data-provider="xai"] {
  --provider-1:#e2e8f0; --provider-2:#0a0a0a;
  --provider-r:226; --provider-g:232; --provider-b:240;
  --provider-2-r:60; --provider-2-g:60; --provider-2-b:60;
  --provider-dim:  rgba(226,232,240,0.10);
  --provider-glow: rgba(226,232,240,0.22);
  --tint:var(--provider-1); --tint-2:var(--provider-2); --tint-light:#f8fafc;
  --tint-r:var(--provider-r); --tint-g:var(--provider-g); --tint-b:var(--provider-b);
  --tint2-r:var(--provider-2-r); --tint2-g:var(--provider-2-g); --tint2-b:var(--provider-2-b);
}
[data-provider="mistral"] {
  --provider-1:#ea580c; --provider-2:#fed7aa;
  --provider-r:234; --provider-g:88; --provider-b:12;
  --provider-2-r:254; --provider-2-g:215; --provider-2-b:170;
  --provider-dim:  rgba(234,88,12,0.14);
  --provider-glow: rgba(234,88,12,0.30);
  --tint:var(--provider-1); --tint-2:var(--provider-2); --tint-light:#fb923c;
  --tint-r:var(--provider-r); --tint-g:var(--provider-g); --tint-b:var(--provider-b);
  --tint2-r:var(--provider-2-r); --tint2-g:var(--provider-2-g); --tint2-b:var(--provider-2-b);
}
[data-provider="cohere"] {
  --provider-1:#16a34a; --provider-2:#86efac;
  --provider-r:22; --provider-g:163; --provider-b:74;
  --provider-2-r:134; --provider-2-g:239; --provider-2-b:172;
  --provider-dim:  rgba(22,163,74,0.14);
  --provider-glow: rgba(22,163,74,0.30);
  --tint:var(--provider-1); --tint-2:var(--provider-2); --tint-light:#4ade80;
  --tint-r:var(--provider-r); --tint-g:var(--provider-g); --tint-b:var(--provider-b);
  --tint2-r:var(--provider-2-r); --tint2-g:var(--provider-2-g); --tint2-b:var(--provider-2-b);
}

/* ============================================================
   1) PAGE TRANSITIONS
   ============================================================ */
.tap-page-enter {
  animation: tap-page-enter var(--motion-base) var(--ease-out) both;
  position: relative;
}
.tap-page-enter::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06) 30%,
    rgba(var(--accent2-r), var(--accent2-g), var(--accent2-b), 0.08) 50%,
    rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.06) 70%,
    transparent 100%
  );
  transform: translate3d(-100%, 0, 0);
  animation: tap-page-wash 480ms var(--ease-out) both;
}
@keyframes tap-page-enter {
  from { opacity: 0; transform: translate3d(0, 4px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0,   0); }
}
@keyframes tap-page-wash {
  from { transform: translate3d(-100%, 0, 0); }
  to   { transform: translate3d(100%,  0, 0); }
}

/* ============================================================
   2) MODAL
   ============================================================ */
.tap-modal-backdrop {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  display: grid; place-items: center;
  animation: tap-backdrop-in var(--motion-base) var(--ease-out) both;
}
.tap-modal-backdrop.is-exiting { animation: tap-backdrop-out var(--motion-fast) var(--ease-in-out) both; }
.tap-modal {
  position: relative;
  width: min(520px, calc(100% - 40px));
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  animation: tap-modal-enter var(--motion-base) var(--ease-out-back) both;
}
.tap-modal::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    60% 60% at 50% 40%,
    rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.12),
    transparent 70%
  );
  opacity: 0;
  animation: tap-modal-bloom var(--motion-slow) var(--ease-out) 60ms both;
}
.tap-modal.is-exiting { animation: tap-modal-exit var(--motion-fast) var(--ease-in-out) both; }
@keyframes tap-backdrop-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes tap-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes tap-modal-enter {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}
@keyframes tap-modal-exit {
  from { opacity: 1; transform: scale(1);    }
  to   { opacity: 0; transform: scale(0.98); }
}
@keyframes tap-modal-bloom { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   3) TOASTS
   ============================================================ */
.tap-toast-stack {
  position: fixed; top: 20px; right: 20px; z-index: 7000;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.tap-toast-stack > * { pointer-events: auto; }

.tap-toast {
  --toast-r: var(--sem-info-r);
  --toast-g: var(--sem-info-g);
  --toast-b: var(--sem-info-b);
  --toast-duration: 4000ms;
  position: relative;
  min-width: 280px; max-width: 380px;
  padding: 14px 18px 14px 16px;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 13px;
  display: flex; align-items: flex-start; gap: 12px;
  overflow: hidden;
  box-shadow:
    0 20px 50px -15px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(var(--toast-r), var(--toast-g), var(--toast-b), 0.15),
    0 0 24px rgba(var(--toast-r), var(--toast-g), var(--toast-b), 0.12);
  animation:
    tap-toast-in var(--motion-base) var(--ease-out-back) both,
    tap-toast-out var(--motion-base) var(--ease-in-out) var(--toast-duration) both;
}
.tap-toast.is-exiting { animation: tap-toast-out var(--motion-base) var(--ease-in-out) both; }
.tap-toast__dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 5px;
  background: rgb(var(--toast-r), var(--toast-g), var(--toast-b));
  box-shadow: 0 0 12px rgba(var(--toast-r), var(--toast-g), var(--toast-b), 0.6);
}
.tap-toast__title { font-weight: 600; margin-bottom: 2px; color: var(--text-primary); }
.tap-toast__body  { color: var(--text-secondary); font-size: 12.5px; }
.tap-toast__bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(in oklab 90deg,
    rgba(var(--toast-r), var(--toast-g), var(--toast-b), 0.6),
    rgba(var(--toast-r), var(--toast-g), var(--toast-b), 1));
  transform-origin: left center;
  animation: tap-toast-bar var(--toast-duration) linear both;
}
.tap-toast--success { --toast-r: var(--sem-success-r); --toast-g: var(--sem-success-g); --toast-b: var(--sem-success-b); }
.tap-toast--error   { --toast-r: var(--sem-error-r);   --toast-g: var(--sem-error-g);   --toast-b: var(--sem-error-b);   }
.tap-toast--warning { --toast-r: var(--sem-warning-r); --toast-g: var(--sem-warning-g); --toast-b: var(--sem-warning-b); }
.tap-toast--info    { --toast-r: var(--sem-info-r);    --toast-g: var(--sem-info-g);    --toast-b: var(--sem-info-b);    }
@keyframes tap-toast-in  { from { opacity: 0; transform: translate3d(20px, -8px, 0) scale(0.96); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes tap-toast-out { from { opacity: 1; transform: translate3d(0,0,0) scale(1); } to { opacity: 0; transform: translate3d(20px,0,0) scale(0.98); } }
@keyframes tap-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ============================================================
   4) BUTTONS  ·  v2 — bloomed conic halo on hover
   ------------------------------------------------------------
   Hover halo: ::before with z-index:-1, blurred conic, extends
   ~18px past edges. The button face stays crisp.

   NOTE: .tap-btn does NOT use isolation:isolate — the halo
   escapes upward into the nearest stacking context. Put
   `isolation: isolate` on any solid-background container.

   Buttons always use --accent-* (user theme). They never
   pick up provider tints.
   ============================================================ */
.tap-btn {
  position: relative;
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: 500 13px/1.2 inherit;
  cursor: pointer;
  user-select: none;
  transition:
    transform var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out);
}
.tap-btn:active { transform: scale(0.97); }

/* The bloom — present on every variant, sized identically */
.tap-btn::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 18px;
  background: conic-gradient(
    from 0deg,
    rgb(var(--accent-r),  var(--accent-g),  var(--accent-b)),
    rgb(var(--accent2-r), var(--accent2-g), var(--accent2-b)),
    rgb(var(--accent-r),  var(--accent-g),  var(--accent-b)),
    rgb(var(--accent2-r), var(--accent2-g), var(--accent2-b)),
    rgb(var(--accent-r),  var(--accent-g),  var(--accent-b))
  );
  filter: blur(18px);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  animation: tap-btn-halo-spin 6s linear infinite;
  transition: opacity var(--motion-base) var(--ease-out);
}

/* ----- primary ----- */
.tap-btn--primary {
  background: linear-gradient(in oklab 180deg,
    rgb(var(--accent-r), var(--accent-g), var(--accent-b)),
    rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.88));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 0 rgba(0, 0, 0, 0.2),
    0 8px 24px -8px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.5);
}
.tap-btn--primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 0 rgba(0, 0, 0, 0.2),
    0 12px 32px -8px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.55);
}
.tap-btn--primary:hover::before { opacity: 0.65; }

/* ----- ghost ----- */
.tap-btn--ghost {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border);
}
.tap-btn--ghost:hover {
  background: var(--bg-secondary);
  border-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.4);
  color: var(--text-primary);
}
.tap-btn--ghost:hover::before { opacity: 0.5; }

/* ----- danger — semantic red, ignores theme accent ----- */
.tap-btn--danger {
  background: linear-gradient(in oklab 180deg, var(--sem-error), #c53030);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 8px 24px -8px rgba(var(--sem-error-r), var(--sem-error-g), var(--sem-error-b), 0.5);
}
.tap-btn--danger::before {
  background: conic-gradient(
    from 0deg,
    var(--sem-error), #f87171, #c53030, var(--sem-error)
  );
}
.tap-btn--danger:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 12px 32px -8px rgba(var(--sem-error-r), var(--sem-error-g), var(--sem-error-b), 0.6);
}
.tap-btn--danger:hover::before { opacity: 0.6; }

/* ----- demo-only: auto-cycling bloom (for the showroom) ----- */
.tap-btn.is-demo-bloom::before {
  animation:
    tap-btn-halo-spin 6s linear infinite,
    tap-btn-demo-bloom 3.6s var(--ease-in-out) infinite;
}
@keyframes tap-btn-demo-bloom {
  0%, 22%, 100% { opacity: 0; }
  46%, 70%      { opacity: 0.65; }
}

/* ----- click ripple — separate effect, layered on top ----- */
.tap-btn__ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: tap-btn-ripple 420ms var(--ease-out) both;
  z-index: 2;
  /* Cap ripple so it doesn't engulf the page from a small click target */
  max-width: 180px;
  max-height: 180px;
}
@keyframes tap-btn-ripple {
  to { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}
@keyframes tap-btn-halo-spin { to { transform: rotate(360deg); } }

/* ============================================================
   5) INPUTS  ·  uses --tint (provider-aware)
   ============================================================ */
.tap-input { position: relative; display: inline-block; width: 100%; }
.tap-input__field {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font: 400 13px/1.4 inherit;
  outline: none;
  transition:
    border-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out),
    background var(--motion-fast) var(--ease-out);
}
.tap-input__field::placeholder { color: var(--text-muted); }
.tap-input__field:hover { border-color: rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.35); }
.tap-input__field:focus {
  border-color: transparent;
  box-shadow: 0 0 24px -4px rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.35);
}
.tap-input::before {
  content: "";
  position: absolute; inset: -1.5px;
  border-radius: 11.5px;
  padding: 1.5px;
  background: linear-gradient(in oklab 90deg, var(--tint), var(--tint-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-out);
}
.tap-input:focus-within::before { opacity: 1; }
.tap-input::after {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 16px;
  background: rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.18);
  filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--motion-base) var(--ease-out);
}
.tap-input:focus-within::after { opacity: 1; }

/* ============================================================
   6) CARD  ·  hover lift + rim light (uses --tint)
   ------------------------------------------------------------
   .tap-card[data-provider] always shows the rim faintly;
   non-provider cards show it only on hover.
   ============================================================ */
.tap-card {
  position: relative;
  padding: 18px;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  /* isolation removed — caused extra scrollbars in Studio panel layouts */
  transition:
    transform var(--motion-base) var(--ease-out),
    border-color var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}
.tap-card::before {
  content: "";
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 1px;
  background: linear-gradient(in oklab 90deg,
    transparent,
    rgba(var(--tint-r),  var(--tint-g),  var(--tint-b),  0.7),
    rgba(var(--tint2-r), var(--tint2-g), var(--tint2-b), 0.55),
    transparent);
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-out);
  pointer-events: none;
}
.tap-card[data-provider]::before { opacity: 0.45; }
.tap-card:hover {
  transform: translate3d(0, -1px, 0) scale(1.005);
  border-color: rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.28);
  box-shadow:
    0 8px 24px -8px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.12),
    0 16px 40px -10px rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.22);
}
.tap-card:hover::before { opacity: 1; }

/* Iridescent providers — animated rim only, NOT whole card */
[data-provider="gemini"].tap-card::before,
.tap-card[data-provider="gemini"]::before {
  background: linear-gradient(in oklab 90deg,
    transparent 0%,
    #4285f4 20%, #9b72cb 40%, #d96570 60%, #fbbc04 80%,
    transparent 100%);
  background-size: 250% 100%;
  animation: tap-prism-shift 9s linear infinite;
}
[data-provider="openrouter"].tap-card::before,
.tap-card[data-provider="openrouter"]::before {
  background: linear-gradient(in oklab 90deg,
    transparent 0%,
    #6366f1 18%, #22d3ee 42%, #a78bfa 62%, #f472b6 80%,
    transparent 100%);
  background-size: 250% 100%;
  animation: tap-prism-shift 12s linear infinite;
}
@keyframes tap-prism-shift {
  0%   { background-position: 100% 50%; }
  100% { background-position: -150% 50%; }
}

/* ============================================================
   PROVIDER HEADER  ·  detail page hero strip
   ============================================================ */
.tap-provider-header {
  position: relative;
  padding-top: 6px;
  isolation: isolate;
}
.tap-provider-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 96px;
  background: linear-gradient(in oklab 180deg,
    rgba(var(--tint-r),  var(--tint-g),  var(--tint-b),  0.20) 0%,
    rgba(var(--tint2-r), var(--tint2-g), var(--tint2-b), 0.10) 40%,
    transparent 100%);
  pointer-events: none;
  z-index: -1;
}
[data-provider="gemini"].tap-provider-header::before,
.tap-provider-header[data-provider="gemini"]::before {
  background:
    linear-gradient(in oklab 180deg, transparent 60%, var(--bg-primary)),
    linear-gradient(in oklab 90deg, #4285f4, #9b72cb, #d96570, #fbbc04, #4285f4);
  background-size: 100% 100%, 300% 100%;
  animation: tap-prism-shift 14s linear infinite;
  opacity: 0.35;
}
[data-provider="openrouter"].tap-provider-header::before,
.tap-provider-header[data-provider="openrouter"]::before {
  background:
    linear-gradient(in oklab 180deg, transparent 60%, var(--bg-primary)),
    linear-gradient(in oklab 90deg, #6366f1, #22d3ee, #a78bfa, #f472b6, #6366f1);
  background-size: 100% 100%, 300% 100%;
  animation: tap-prism-shift 16s linear infinite;
  opacity: 0.32;
}

/* ============================================================
   PROVIDER CHIP  ·  small badge with provider tint
   ============================================================ */
.tap-provider-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--provider-dim, rgba(255,255,255,0.04));
  border: 1px solid rgba(var(--provider-r, 148), var(--provider-g, 163), var(--provider-b, 184), 0.25);
  color: var(--provider-1, var(--text-secondary));
  font: 500 11px/1 inherit;
  letter-spacing: 0.01em;
}
.tap-provider-chip__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--provider-1, var(--text-muted));
  box-shadow: 0 0 6px var(--provider-glow, transparent);
}

/* ============================================================
   7) COUNTER  ·  uses --tint
   ============================================================ */
.tap-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: color var(--motion-fast) var(--ease-out);
}
.tap-counter.is-updating { animation: tap-counter-flash var(--motion-slow) var(--ease-out) both; }
@keyframes tap-counter-flash {
  0%   { transform: translateY(0);    color: var(--text-primary); }
  35%  { transform: translateY(-3px); color: var(--tint-light);
         text-shadow: 0 0 16px rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.65); }
  100% { transform: translateY(0);    color: var(--text-primary); }
}

/* ============================================================
   8) STATUS PILLS  ·  --tint for running
   ============================================================ */
.tap-pill {
  --pill-r: 148; --pill-g: 163; --pill-b: 184;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: rgba(var(--pill-r), var(--pill-g), var(--pill-b), 0.1);
  border: 1px solid rgba(var(--pill-r), var(--pill-g), var(--pill-b), 0.25);
  color: rgb(var(--pill-r), var(--pill-g), var(--pill-b));
  font: 500 11px/1 inherit;
  letter-spacing: 0.01em;
}
.tap-pill__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgb(var(--pill-r), var(--pill-g), var(--pill-b));
}
.tap-pill--running {
  --pill-r: var(--tint-r); --pill-g: var(--tint-g); --pill-b: var(--tint-b);
  color: var(--tint-light);
  animation: tap-pill-breath 2.4s ease-in-out infinite;
}
.tap-pill--running .tap-pill__dot {
  animation: tap-pill-dot-pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.7);
}
.tap-pill--error   { --pill-r: var(--sem-error-r);   --pill-g: var(--sem-error-g);   --pill-b: var(--sem-error-b);   color: #fca5a5; }
.tap-pill--idle    { /* default gray */ }
.tap-pill--paused  { --pill-r: var(--sem-warning-r); --pill-g: var(--sem-warning-g); --pill-b: var(--sem-warning-b); color: #fcd34d; }
@keyframes tap-pill-breath {
  0%, 100% { background: rgba(var(--pill-r), var(--pill-g), var(--pill-b), 0.10); border-color: rgba(var(--pill-r), var(--pill-g), var(--pill-b), 0.25); }
  50%      { background: rgba(var(--pill-r), var(--pill-g), var(--pill-b), 0.18); border-color: rgba(var(--pill-r), var(--pill-g), var(--pill-b), 0.45); }
}
@keyframes tap-pill-dot-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.25); opacity: 0.7; }
}

/* ============================================================
   9) PROGRESS  ·  uses --accent (page-level)
   ============================================================ */
.tap-progress {
  position: relative; height: 6px; width: 100%;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.tap-progress__fill {
  position: relative; height: 100%;
  width: var(--tap-progress, 50%);
  background: linear-gradient(in oklab 90deg, var(--accent), var(--accent-2));
  border-radius: inherit;
  transition: width var(--motion-slow) var(--ease-out);
  overflow: hidden;
}
.tap-progress__fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(in oklab 90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: translate3d(-100%, 0, 0);
  animation: tap-progress-shimmer 1.8s ease-in-out infinite;
}
.tap-progress--indeterminate { overflow: hidden; }
.tap-progress--indeterminate .tap-progress__fill {
  width: 40%;
  animation: tap-progress-indet 1.4s var(--ease-in-out) infinite;
}
.tap-progress--indeterminate .tap-progress__fill::after { display: none; }
@keyframes tap-progress-shimmer {
  0%   { transform: translate3d(-100%, 0, 0); }
  100% { transform: translate3d(250%,  0, 0); }
}
@keyframes tap-progress-indet {
  0%   { transform: translate3d(-110%, 0, 0); }
  100% { transform: translate3d(360%,  0, 0); }
}

/* ============================================================
   10) DRAG / SORT  ·  uses --tint
   ============================================================ */
.tap-draggable {
  position: relative;
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out);
  cursor: grab;
}
.tap-draggable.is-dragging {
  transform: scale(1.02);
  cursor: grabbing;
  z-index: 10;
  border-color: rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.6) !important;
  box-shadow:
    0 20px 50px -10px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.4),
    0 0 32px rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.25);
}
.tap-drop-target.is-active {
  animation: tap-drop-pulse 800ms var(--ease-in-out) infinite;
}
@keyframes tap-drop-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0); }
}

/* ============================================================
   11) EMPTY STATE  ·  --accent (page-level)
   ============================================================ */
.tap-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 32px; text-align: center;
  color: var(--text-secondary);
}
.tap-empty__orb {
  position: relative;
  width: 64px; height: 64px; border-radius: 50%;
  margin-bottom: 24px;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.35), transparent 50%),
    linear-gradient(in oklab 135deg, var(--accent), var(--accent-2));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 40px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.35),
    0 0 80px rgba(var(--accent2-r), var(--accent2-g), var(--accent2-b), 0.2);
  animation: tap-empty-drift 6s var(--ease-in-out) infinite alternate;
  opacity: 0.85;
}
.tap-empty__orb::after {
  content: "";
  position: absolute; inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.3), transparent 70%);
  filter: blur(8px);
  z-index: -1;
  animation: tap-empty-halo 4s var(--ease-in-out) infinite alternate;
}
.tap-empty__title { font: 600 15px/1.4 inherit; color: var(--text-primary); margin: 0 0 4px; }
.tap-empty__body  { font: 400 13px/1.5 inherit; max-width: 320px; }
@keyframes tap-empty-drift {
  0%   { transform: translate3d(-6px, -4px, 0) scale(0.96); }
  100% { transform: translate3d(6px,  4px,  0) scale(1.04); }
}
@keyframes tap-empty-halo {
  0%   { opacity: 0.7; transform: scale(0.95); }
  100% { opacity: 1;   transform: scale(1.1);  }
}

/* ============================================================
   12) DIFF HIGHLIGHTS  ·  semantic, never tinted
   ============================================================ */
.tap-diff-add,
.tap-diff-del {
  position: relative;
  padding: 1px 4px;
  margin: 0 1px;
  border-radius: 2px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.tap-diff-add {
  color: #bbf7d0;
  background-image: linear-gradient(in oklab 98deg,
    transparent 1%,
    rgba(34, 197, 94, 0.18) 4%,
    rgba(34, 197, 94, 0.32) 50%,
    rgba(34, 197, 94, 0.22) 96%,
    transparent 99%);
  box-shadow:
    inset 0 -2px 0 -1px rgba(34, 197, 94, 0.5),
    inset 0  1px 0 -0.5px rgba(34, 197, 94, 0.25);
}
.tap-diff-del {
  color: #fecaca;
  background-image: linear-gradient(in oklab 102deg,
    transparent 1%,
    rgba(239, 68, 68, 0.18) 4%,
    rgba(239, 68, 68, 0.32) 50%,
    rgba(239, 68, 68, 0.22) 96%,
    transparent 99%);
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.7);
  text-decoration-thickness: 1px;
  box-shadow:
    inset 0 -2px 0 -1px rgba(239, 68, 68, 0.45),
    inset 0  1px 0 -0.5px rgba(239, 68, 68, 0.2);
}

/* ============================================================
   13) NAV ITEM  ·  uses --accent (sidebar belongs to user)
   ============================================================ */
.tap-nav { display: flex; flex-direction: column; gap: 2px; position: relative; }
.tap-nav-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-secondary);
  font: 500 13px/1 inherit;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.tap-nav-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-primary); }
.tap-nav-item::before {
  content: "";
  position: absolute;
  left: -10px; top: 50%;
  transform: translate(-2px, -50%) scaleY(0.4);
  width: 3px; height: 18px;
  border-radius: 2px;
  background: linear-gradient(in oklab 180deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.6);
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out-back);
}
.tap-nav-item.is-active {
  background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.15);
}
.tap-nav-item.is-active::before {
  opacity: 1;
  transform: translate(0, -50%) scaleY(1);
}

/* ============================================================
   14) COMMAND PALETTE  ·  --aura-* only
   ============================================================ */
.tap-cmdk-overlay {
  position: fixed; inset: 0; z-index: 8500;
  display: grid; place-items: start center;
  padding-top: 16vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  animation: tap-backdrop-in var(--motion-base) var(--ease-out) both;
}
.tap-cmdk {
  position: relative;
  width: min(560px, calc(100% - 40px));
  background: var(--bg-secondary);
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
  isolation: isolate;
  animation: tap-modal-enter var(--motion-base) var(--ease-out-back) both;
}
.tap-cmdk::before {
  content: "";
  position: absolute; inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from 0deg,
    var(--aura-1, #a855f7),
    var(--aura-2, #0098ea),
    var(--aura-3, #22d3ee),
    var(--aura-4, #f472b6),
    var(--aura-1, #a855f7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: tap-btn-halo-spin 8s linear infinite;
  z-index: 1;
  pointer-events: none;
  opacity: 0.6;
}
.tap-cmdk::after {
  content: "";
  position: absolute; inset: -20px;
  border-radius: 20px;
  background: radial-gradient(60% 60% at 50% 40%,
    rgba(168, 85, 247, 0.18),
    rgba(34, 211, 238, 0.12) 60%,
    transparent 80%);
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}
.tap-cmdk__input {
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font: 400 14px/1.4 inherit;
  outline: none;
}
.tap-cmdk__input::placeholder { color: var(--text-muted); }
.tap-cmdk__list {
  max-height: 320px; overflow-y: auto; padding: 6px;
}
.tap-cmdk__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--text-secondary);
  font: 500 13px/1.2 inherit;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.tap-cmdk__item:hover,
.tap-cmdk__item.is-selected {
  background: rgba(168, 85, 247, 0.1);
  color: var(--text-primary);
}
.tap-cmdk__kbd {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  font: 400 10.5px/1 ui-monospace, monospace;
  color: var(--text-muted);
}

/* ============================================================
   15) CHIPS  ·  uses --accent (generic, not provider)
   ============================================================ */
.tap-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font: 500 11.5px/1.4 inherit;
  cursor: pointer;
  transition:
    transform var(--motion-fast) var(--ease-out),
    background var(--motion-fast) var(--ease-out),
    border-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out);
}
.tap-chip:hover {
  transform: translate3d(0, -1px, 0);
  background: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.1);
  border-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.35);
  color: var(--text-primary);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .tap-page-enter,
  .tap-page-enter::before,
  .tap-modal-backdrop,
  .tap-modal,
  .tap-modal::before,
  .tap-modal.is-exiting,
  .tap-toast,
  .tap-toast.is-exiting,
  .tap-toast__bar,
  .tap-btn::before,
  .tap-btn.is-demo-bloom::before,
  .tap-btn__ripple,
  .tap-counter.is-updating,
  .tap-pill--running,
  .tap-pill--running .tap-pill__dot,
  .tap-progress__fill::after,
  .tap-progress--indeterminate .tap-progress__fill,
  .tap-drop-target.is-active,
  .tap-empty__orb,
  .tap-empty__orb::after,
  .tap-cmdk-overlay,
  .tap-cmdk,
  .tap-cmdk::before,
  .tap-card[data-provider="gemini"]::before,
  .tap-card[data-provider="openrouter"]::before,
  .tap-provider-header[data-provider="gemini"]::before,
  .tap-provider-header[data-provider="openrouter"]::before {
    animation-duration: 8s !important;
    animation-iteration-count: 1 !important;
  }
  /* loops that must keep looping just go slower */
  .tap-pill--running,
  .tap-pill--running .tap-pill__dot,
  .tap-progress__fill::after,
  .tap-progress--indeterminate .tap-progress__fill,
  .tap-drop-target.is-active,
  .tap-empty__orb,
  .tap-empty__orb::after,
  .tap-btn::before,
  .tap-btn.is-demo-bloom::before,
  .tap-cmdk::before,
  .tap-card[data-provider="gemini"]::before,
  .tap-card[data-provider="openrouter"]::before,
  .tap-provider-header[data-provider="gemini"]::before,
  .tap-provider-header[data-provider="openrouter"]::before {
    animation-iteration-count: infinite !important;
  }
}

/* ============================================================
   FORCED OVERRIDES — studio.css has 318 !important rules which
   beat our normal-specificity tap-motion classes. Add the same
   weapon where it really matters (buttons + sidebar + cards).
   Targets the canonical .btn.tap-btn pairing the bootstrap creates.
   ============================================================ */

/* (Old .btn.tap-btn conic halo overrides removed — they stacked with the
   Claude Design .rt-save-btn radial halo. The Claude Design rt-save-btn
   block below is now the single source of truth for premium buttons.) */

/* Sidebar nav-item active bar */
.nav-item.tap-nav-item.is-active::before {
  content: "" !important;
  position: absolute !important;
  left: -2px !important;
  top: 50% !important;
  transform: translate(0, -50%) scaleY(1) !important;
  width: 3px !important;
  height: 18px !important;
  border-radius: 2px !important;
  background: linear-gradient(in oklab 180deg, var(--accent), var(--accent-2)) !important;
  box-shadow: 0 0 12px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.6) !important;
  opacity: 1 !important;
}
.nav-item.tap-nav-item { position: relative !important; }

/* Agent cards — provider rim must show even when studio.css disables ::before */
.agent-card-enhanced.tap-card[data-provider]::before,
.agent-card.tap-card[data-provider]::before,
.ap-card.tap-card[data-provider]::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 12px !important;
  right: 12px !important;
  height: 1px !important;
  background: linear-gradient(in oklab 90deg,
    transparent,
    rgba(var(--tint-r),  var(--tint-g),  var(--tint-b),  0.7),
    rgba(var(--tint2-r), var(--tint2-g), var(--tint2-b), 0.55),
    transparent) !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
.agent-card-enhanced.tap-card[data-provider],
.agent-card.tap-card[data-provider],
.ap-card.tap-card[data-provider] {
  position: relative !important;
  isolation: isolate !important;
}
.agent-card-enhanced.tap-card[data-provider]:hover,
.agent-card.tap-card[data-provider]:hover,
.ap-card.tap-card[data-provider]:hover {
  box-shadow:
    0 8px 24px -8px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.15),
    0 16px 40px -10px rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.22) !important;
}

/* (Old box-shadow halo bridge removed — it doubled up with the Claude
   Design .rt-save-btn radial halo. Buttons get their look from
   .rt-save-btn block now. Bootstrap aliases all primary buttons to that
   selector via a multi-target rule at the bottom of this file.) */

/* ============================================================
   BRIDGES — apply tap-* visuals to Studio's existing components
   without rewriting their HTML structure.
   ============================================================ */

/* Bridge: any input flagged by bootstrap gets the gradient focus ring
   via box-shadow (which doesn't need a wrapper). */
.tap-input__field-bridge:focus,
.tap-input__field-bridge:focus-visible {
  outline: none !important;
  border-color: transparent !important;
  box-shadow:
    0 0 0 1.5px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.55),
    0 0 0 3px rgba(var(--accent2-r), var(--accent2-g), var(--accent2-b), 0.18),
    0 0 24px -4px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.35) !important;
}
.tap-input__field-bridge {
  transition:
    border-color 140ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow  220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.tap-input__field-bridge:hover:not(:focus) {
  border-color: rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.35) !important;
}

/* Bridge: Studio's toasts (.toast.toast-success etc) wear the tap-toast
   look. Our existing CSS still controls layout/text — we only add the
   coloured glow + side accent bar that makes tap-toast feel premium. */
.toast.tap-toast {
  position: relative !important;
  border-left: 3px solid currentColor !important;
  box-shadow:
    0 20px 50px -15px rgba(0, 0, 0, 0.6),
    0 0 24px -4px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.20) !important;
}
.toast.tap-toast--success { color: #22c55e !important; }
.toast.tap-toast--error   { color: #ef4444 !important; }
.toast.tap-toast--warning { color: #f59e0b !important; }
.toast.tap-toast--info    { color: #38bdf8 !important; }
.toast.tap-toast .toast-title,
.toast.tap-toast .toast-msg { color: var(--text-primary) !important; }

/* Bridge: Studio's dialogs (.studio-dialog) get tap-modal's aurora bloom
   without changing markup. */
.studio-dialog.tap-modal {
  position: relative !important;
  border-radius: 16px !important;
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 60px -10px rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.25) !important;
  animation: tap-modal-enter 220ms cubic-bezier(0.34, 1.4, 0.64, 1) both !important;
}
.studio-dialog-backdrop {
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
}

/* (Rotating conic halo on .tap-btn::after removed — stacked with the
   Claude Design rt-save-btn::after. The radial halo of .rt-save-btn is
   now the single button glow we use.) */

/* ============================================================
   .rt-save-btn  ·  premium gradient button (provider-aware)
   ------------------------------------------------------------
   Used in Soul/AI save flows. We override Studio's old flat style
   with a real tap-btn primary: gradient fill, glow shadow, ring,
   rotating halo on hover. When inside a [data-provider] subtree
   (agent settings modal), --tint is the provider colour — so the
   button automatically wears Claude orange / OpenAI emerald / etc.
   ============================================================ */
/* ============================================================
   .rt-save-btn  ·  levitating glass button (from Claude Design)
   ------------------------------------------------------------
   Floats off the page with a blurred coloured halo behind it.
   Surface is barely there; text + icon carry the tint.
   Wears the agent's provider colour automatically when placed
   inside a [data-provider="…"] subtree (via --tint fallback).
   No solid fill. No Bootstrap pill. Vision Pro energy.
   ============================================================ */

.rt-save-btn,
button.btn.btn-primary,
button.btn.btn-success,
button.btn-action,
button.rt-btn,
.btn.tap-btn--primary {
  --rt-lift-idle: -3px;
  --rt-lift-hover: -7px;

  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  padding: 10px 18px !important;
  border-radius: 12px !important;

  background:
    linear-gradient(in oklab 135deg,
      rgba(var(--tint-r),  var(--tint-g),  var(--tint-b),  0.28) 0%,
      rgba(var(--tint-r),  var(--tint-g),  var(--tint-b),  0.12) 45%,
      rgba(var(--tint2-r), var(--tint2-g), var(--tint2-b), 0.20) 100%) !important;
  border: 1px solid rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.32) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.05),
    0 6px 14px -6px rgba(0, 0, 0, 0.45) !important;

  color: var(--tint, var(--accent)) !important;
  font: 500 13px/1.2 "Inter", system-ui, sans-serif !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  user-select: none !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;

  isolation: isolate !important;
  overflow: visible !important;
  transform: translate3d(0, var(--rt-lift-idle), 0) !important;
  animation: rt-save-btn-float 4s ease-in-out infinite !important;
  transition:
    transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-shadow: none !important;
}

.rt-save-btn::after,
button.btn.btn-primary::after,
button.btn.btn-success::after,
button.btn-action::after,
button.rt-btn::after,
.btn.tap-btn--primary::after {
  content: "" !important;
  position: absolute !important;
  inset: -12px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: 18px !important;
  background:
    radial-gradient(60% 60% at 50% 60%,
      rgba(var(--tint-r),  var(--tint-g),  var(--tint-b),  0.30),
      transparent 70%),
    radial-gradient(80% 80% at 50% 50%,
      rgba(var(--tint2-r), var(--tint2-g), var(--tint2-b), 0.15),
      transparent 75%) !important;
  filter: blur(10px) !important;
  opacity: 0.45 !important;
  transition:
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1),
    inset 280ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 280ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation: none !important;
}

.rt-save-btn::before,
button.btn.btn-primary::before,
button.btn.btn-success::before,
button.btn-action::before,
button.rt-btn::before,
.btn.tap-btn--primary::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px 1px auto 1px !important;
  height: 40% !important;
  border-radius: 11px 11px 4px 4px !important;
  background: linear-gradient(in oklab 180deg,
    rgba(255, 255, 255, 0.08),
    transparent) !important;
  pointer-events: none !important;
  opacity: 0.7 !important;
  transition: opacity 180ms ease !important;
}

.rt-save-btn:hover,
.rt-save-btn.is-hover,
button.btn.btn-primary:hover,
button.btn.btn-success:hover,
button.btn-action:hover,
button.rt-btn:hover,
.btn.tap-btn--primary:hover {
  color: #ffffff !important;
  border-color: rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.55) !important;
  background:
    linear-gradient(in oklab 135deg,
      rgba(var(--tint-r),  var(--tint-g),  var(--tint-b),  0.45) 0%,
      rgba(var(--tint-r),  var(--tint-g),  var(--tint-b),  0.22) 45%,
      rgba(var(--tint2-r), var(--tint2-g), var(--tint2-b), 0.38) 100%) !important;
  transform: translate3d(0, var(--rt-lift-hover), 0) scale(1.015) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.08),
    0 14px 30px -8px rgba(0, 0, 0, 0.55) !important;
  animation-play-state: paused !important;
}
.rt-save-btn:hover::after,
.rt-save-btn.is-hover::after,
button.btn.btn-primary:hover::after,
button.btn.btn-success:hover::after,
button.btn-action:hover::after,
button.rt-btn:hover::after,
.btn.tap-btn--primary:hover::after {
  inset: -20px !important;
  opacity: 0.7 !important;
  filter: blur(14px) !important;
}
.rt-save-btn:hover::before,
.rt-save-btn.is-hover::before,
button.btn.btn-primary:hover::before,
button.btn.btn-success:hover::before,
button.btn-action:hover::before,
button.rt-btn:hover::before,
.btn.tap-btn--primary:hover::before { opacity: 1 !important; }

.rt-save-btn:active,
.rt-save-btn.is-active,
button.btn.btn-primary:active,
button.btn.btn-success:active,
button.btn-action:active,
button.rt-btn:active,
.btn.tap-btn--primary:active {
  transform: translate3d(0, calc(var(--rt-lift-hover) + 3px), 0) scale(0.995) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 1px 4px rgba(0, 0, 0, 0.25),
    0 4px 12px -6px rgba(0, 0, 0, 0.5) !important;
  animation-play-state: paused !important;
}
.rt-save-btn:active::after,
.rt-save-btn.is-active::after {
  inset: -10px !important;
  opacity: 0.4 !important;
  filter: blur(8px) !important;
}

.rt-save-btn:focus-visible {
  outline: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 2px var(--bg-primary, #080b14),
    0 0 0 4px rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.6),
    0 14px 30px -8px rgba(0, 0, 0, 0.55) !important;
}

.rt-save-btn svg {
  width: 14px !important;
  height: 14px !important;
  flex: none !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

@keyframes rt-save-btn-float {
  0%, 100% { transform: translate3d(0, var(--rt-lift-idle), 0); }
  50%      { transform: translate3d(0, -5px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .rt-save-btn { animation-duration: 32s !important; }
}

/* Kill inline `style="background:..."` overrides (e.g. purple Edit-with-AI) */
.rt-save-btn[style*="background"],
.rt-save-btn[style*="linear-gradient"] {
  background:
    linear-gradient(in oklab 135deg,
      rgba(var(--tint-r),  var(--tint-g),  var(--tint-b),  0.28) 0%,
      rgba(var(--tint-r),  var(--tint-g),  var(--tint-b),  0.12) 45%,
      rgba(var(--tint2-r), var(--tint2-g), var(--tint2-b), 0.20) 100%) !important;
}

/* SCRAP — old override removed */
/*
.rt-save-btn,
.rt-save-btn.tap-btn {
  /* — geometry — */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px 24px !important;
  border-radius: 999px !important;       /* full pill */
  border: 1px solid rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.30) !important;

  /* — typography (tinted, not white-on-color) — */
  font: 600 13.5px/1 "Inter", system-ui, sans-serif !important;
  letter-spacing: 0.005em !important;
  color: rgb(var(--tint-r), var(--tint-g), var(--tint-b)) !important;
  text-shadow: 0 0 12px rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.55) !important;

  /* — NO fill: just barely-there glass + backdrop blur if available — */
  background: rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.06) !important;
  backdrop-filter: blur(8px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%) !important;

  /* — levitating: idle Y-lift + close shadow + WIDE soft glow — */
  cursor: pointer !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  transform: translate3d(0, -2px, 0) !important;
  box-shadow:
    /* tiny crisp inner edge */
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    /* close shadow giving "lifted off surface" feel */
    0 6px 16px -4px rgba(0, 0, 0, 0.45),
    /* wide soft halo in tint (the "blur вокруг") */
    0 0 32px rgba(var(--tint-r),  var(--tint-g),  var(--tint-b),  0.45),
    0 12px 48px rgba(var(--tint-r),  var(--tint-g),  var(--tint-b),  0.30),
    0 0 80px rgba(var(--tint2-r), var(--tint2-g), var(--tint2-b), 0.25) !important;

  transition:
    transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
    background 200ms cubic-bezier(0.16, 1, 0.3, 1),
    color 200ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  animation: tap-rt-float 4s ease-in-out infinite !important;
}

@keyframes tap-rt-float {
  0%, 100% { transform: translate3d(0, -2px, 0); }
  50%      { transform: translate3d(0, -5px, 0); }
}

/* hover — lift higher, glow goes wider + text whitens */
.rt-save-btn:hover {
  animation: none !important;
  transform: translate3d(0, -7px, 0) !important;
  color: #fff !important;
  background: rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.12) !important;
  border-color: rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.55) !important;
  text-shadow:
    0 0 16px rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.85),
    0 0 4px rgba(255, 255, 255, 0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 28px -6px rgba(0, 0, 0, 0.55),
    0 0 48px rgba(var(--tint-r),  var(--tint-g),  var(--tint-b),  0.70),
    0 18px 64px rgba(var(--tint-r),  var(--tint-g),  var(--tint-b),  0.55),
    0 0 120px rgba(var(--tint2-r), var(--tint2-g), var(--tint2-b), 0.45) !important;
}
.rt-save-btn:active {
  transform: translate3d(0, -1px, 0) scale(0.97) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.50) !important;
}

/* Icon — tinted to match text, glows slightly */
.rt-save-btn svg {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 2.2 !important;
  filter: drop-shadow(0 0 6px rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.6)) !important;
}
.rt-save-btn:hover svg {
  filter: drop-shadow(0 0 10px rgba(var(--tint-r), var(--tint-g), var(--tint-b), 0.9)) !important;
}

/* Conic halo "крутилка" — behind, much wider, always slowly cycling */
.rt-save-btn::after {
  content: "" !important;
  position: absolute !important;
  inset: -20px !important;
  border-radius: 999px !important;
  background: conic-gradient(
    from 0deg,
    rgb(var(--tint-r),  var(--tint-g),  var(--tint-b)),
    rgb(var(--tint2-r), var(--tint2-g), var(--tint2-b)),
    rgb(var(--tint-r),  var(--tint-g),  var(--tint-b)),
    rgb(var(--tint2-r), var(--tint2-g), var(--tint2-b)),
    rgb(var(--tint-r),  var(--tint-g),  var(--tint-b))
  ) !important;
  filter: blur(22px) !important;
  opacity: 0.35 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  animation: tap-btn-halo-spin 6s linear infinite !important;
  transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.rt-save-btn:hover::after {
  opacity: 0.95 !important;
  filter: blur(26px) !important;
}

*/
/* SCRAP-END */

/* ============================================================
   TAP BRAND LOGO  ·  SVG image, no background, levitates, glows
   New class name (tap-brand-logo) so it inherits NOTHING from
   the old .brand-logo (which had a gradient pill background).
   ============================================================ */
.tap-brand-logo {
  display: inline-block !important;
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  flex: 0 0 44px !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  vertical-align: middle !important;
  line-height: 0 !important;
  animation: tap-brand-float 4s ease-in-out infinite !important;
}
.tap-brand-logo img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  display: block !important;
  object-fit: contain !important;
  background: transparent !important;
  /* The SVG paths are white; tint them in accent colour via CSS filter so
     the logo changes with the theme. Cyan for cyber, orange for plasma, etc. */
  filter:
    drop-shadow(0 0 10px rgba(var(--accent-r),  var(--accent-g),  var(--accent-b),  0.65))
    drop-shadow(0 0 24px rgba(var(--accent2-r), var(--accent2-g), var(--accent2-b), 0.40)) !important;
  transition: filter 280ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.brand:hover .tap-brand-logo img {
  filter:
    drop-shadow(0 0 14px rgba(var(--accent-r),  var(--accent-g),  var(--accent-b),  0.9))
    drop-shadow(0 0 36px rgba(var(--accent2-r), var(--accent2-g), var(--accent2-b), 0.65)) !important;
}
.tap-brand-logo::after {
  content: "" !important;
  position: absolute !important;
  inset: -12px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle,
    rgba(var(--accent-r),  var(--accent-g),  var(--accent-b),  0.30) 0%,
    rgba(var(--accent2-r), var(--accent2-g), var(--accent2-b), 0.18) 40%,
    transparent 70%) !important;
  filter: blur(10px) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  animation: tap-brand-halo 4s ease-in-out infinite alternate !important;
}

/* ============================================================
   BRAND LETTER  ·  big "A" in accent color, no box, glowing,
   levitating. Brand-new class name so nothing inherits.
   ============================================================ */
.tap-brand-letter {
  display: inline-block !important;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: 800 36px/1 "Inter", system-ui, sans-serif !important;
  letter-spacing: -0.04em !important;
  color: rgb(var(--accent-r), var(--accent-g), var(--accent-b)) !important;
  text-shadow:
    0 0 14px rgba(var(--accent-r),  var(--accent-g),  var(--accent-b),  0.85),
    0 0 28px rgba(var(--accent-r),  var(--accent-g),  var(--accent-b),  0.55),
    0 0 56px rgba(var(--accent2-r), var(--accent2-g), var(--accent2-b), 0.45) !important;
  animation: tap-brand-float 4s ease-in-out infinite !important;
  transition: color 280ms cubic-bezier(0.16, 1, 0.3, 1), text-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: inherit !important;
  vertical-align: middle !important;
}
.tap-brand-letter::after {
  content: "" !important;
  position: absolute !important;
  inset: -8px -10px -8px -10px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle,
    rgba(var(--accent-r),  var(--accent-g),  var(--accent-b),  0.30) 0%,
    rgba(var(--accent2-r), var(--accent2-g), var(--accent2-b), 0.18) 40%,
    transparent 70%) !important;
  filter: blur(10px) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  animation: tap-brand-halo 4s ease-in-out infinite alternate !important;
}
.brand:hover .tap-brand-letter {
  text-shadow:
    0 0 18px rgba(var(--accent-r),  var(--accent-g),  var(--accent-b),  1),
    0 0 36px rgba(var(--accent-r),  var(--accent-g),  var(--accent-b),  0.75),
    0 0 72px rgba(var(--accent2-r), var(--accent2-g), var(--accent2-b), 0.60) !important;
}

/* ============================================================
   BRAND LOGO  ·  Inline TAP SVG, levitating glow in accent color
   ============================================================ */
.brand .brand-logo.brand-logo--inline,
.sidebar .brand .brand-logo.brand-logo--inline,
.brand-logo.brand-logo--inline {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  font-size: 0 !important;
  /* The accent colour fills the SVG paths via currentColor — auto-changes with theme */
  color: rgb(var(--accent-r), var(--accent-g), var(--accent-b)) !important;
  animation: tap-brand-float 4s ease-in-out infinite !important;
  transition: color 320ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.brand-logo.brand-logo--inline svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  filter:
    drop-shadow(0 0 10px rgba(var(--accent-r),  var(--accent-g),  var(--accent-b),  0.65))
    drop-shadow(0 0 24px rgba(var(--accent2-r), var(--accent2-g), var(--accent2-b), 0.40)) !important;
  transition: filter 320ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.brand-logo.brand-logo--inline:hover svg {
  filter:
    drop-shadow(0 0 14px rgba(var(--accent-r),  var(--accent-g),  var(--accent-b),  0.9))
    drop-shadow(0 0 36px rgba(var(--accent2-r), var(--accent2-g), var(--accent2-b), 0.65)) !important;
}
/* Wide soft accent halo behind the logo */
.brand-logo.brand-logo--inline::after {
  content: "" !important;
  position: absolute !important;
  inset: -14px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle,
    rgba(var(--accent-r),  var(--accent-g),  var(--accent-b),  0.35) 0%,
    rgba(var(--accent2-r), var(--accent2-g), var(--accent2-b), 0.18) 40%,
    transparent 70%) !important;
  filter: blur(12px) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  animation: tap-brand-halo 4s ease-in-out infinite alternate !important;
}
.brand-logo.brand-logo--svg img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  /* Glow the white shapes themselves in accent colour */
  filter:
    drop-shadow(0 0 8px rgba(var(--accent-r),  var(--accent-g),  var(--accent-b),  0.65))
    drop-shadow(0 0 18px rgba(var(--accent2-r), var(--accent2-g), var(--accent2-b), 0.45)) !important;
  transition: filter 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.brand-logo.brand-logo--svg:hover img {
  filter:
    drop-shadow(0 0 12px rgba(var(--accent-r),  var(--accent-g),  var(--accent-b),  0.85))
    drop-shadow(0 0 28px rgba(var(--accent2-r), var(--accent2-g), var(--accent2-b), 0.65)) !important;
}
/* Wide soft halo behind the SVG */
.brand-logo.brand-logo--svg::after {
  content: "" !important;
  position: absolute !important;
  inset: -14px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle,
    rgba(var(--accent-r),  var(--accent-g),  var(--accent-b),  0.40) 0%,
    rgba(var(--accent2-r), var(--accent2-g), var(--accent2-b), 0.22) 35%,
    transparent 70%) !important;
  filter: blur(14px) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  animation: tap-brand-halo 4s ease-in-out infinite alternate !important;
}
@keyframes tap-brand-float {
  0%, 100% { transform: translate3d(0, -1px, 0); }
  50%      { transform: translate3d(0, -5px, 0); }
}
@keyframes tap-brand-halo {
  0%   { opacity: 0.7; transform: scale(0.95); }
  100% { opacity: 1;   transform: scale(1.15); }
}

/* ============================================================
   DANGER ZONE — destructive actions should NOT glow/lure clicks
   ============================================================ */
.btn-danger,
.btn-danger.tap-btn,
button.btn-danger,
button.btn.btn-danger,
.rt-save-btn[data-action="delete"],
.danger-zone .btn,
.danger-zone .tap-btn,
.danger-zone .rt-save-btn,
[class*="delete"] .tap-btn--danger,
.tap-btn--danger {
  /* kill the levitation + halo */
  animation: none !important;
  transform: none !important;
  position: relative !important;
  isolation: auto !important;

  /* muted, flat surface — semantic red but quiet */
  background: rgba(239, 68, 68, 0.08) !important;
  background-image: none !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  color: #fca5a5 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease !important;
}
.btn-danger:hover,
.btn-danger.tap-btn:hover,
button.btn-danger:hover,
button.btn.btn-danger:hover,
.danger-zone .btn:hover,
.danger-zone .tap-btn:hover,
.danger-zone .rt-save-btn:hover,
.tap-btn--danger:hover {
  background: rgba(239, 68, 68, 0.14) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #fecaca !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Cancel ::after halo / ::before sheen on danger buttons */
.btn-danger::after,
.btn-danger.tap-btn::after,
button.btn-danger::after,
.danger-zone .btn::after,
.danger-zone .tap-btn::after,
.danger-zone .rt-save-btn::after,
.tap-btn--danger::after,
.btn-danger::before,
.btn-danger.tap-btn::before,
button.btn-danger::before,
.danger-zone .btn::before,
.danger-zone .tap-btn::before,
.danger-zone .rt-save-btn::before,
.tap-btn--danger::before {
  display: none !important;
  content: none !important;
}

/* ============================================================
   FIX — kill duplicate scrollbars
   ------------------------------------------------------------
   Only reset isolation:isolate that we added; do NOT force
   overflow on page wrappers — Studio's own CSS owns that, and
   forcing visible there leaked content into parent + created
   extra scrollbars.
   ============================================================ */
.tap-card,
.agent-card-enhanced.tap-card,
.agent-card.tap-card,
.ap-card.tap-card,
#agent-settings-modal,
#agent-settings-modal .modal-body,
.agent-settings-modal,
.agent-settings-modal .modal-body {
  isolation: auto !important;
}

/* ============================================================
   EMERGENCY — kill page-enter wrapper that may create extra scroll
   ============================================================ */
.tap-page-enter {
  animation: none !important;
  position: static !important;
}
.tap-page-enter::before {
  display: none !important;
  content: none !important;
}

/* ============================================================
   DOUBLE-SCROLL FINAL FIX — body height:100vh, only MAIN scrolls
   ============================================================ */
html, body {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}
body > #app,
body > .app,
body {
  height: 100vh !important;
}
/* Only MAIN (page content area) scrolls. nav-scroll keeps its own scroll. */
main {
  max-height: 100vh !important;
}

/* On pages with their own inner scrollable panels (Builder's flow-palette,
   Studio's Settings tabs that have st-nav scroll), main MUST NOT scroll —
   otherwise its scrollbar stacks on top of the inner one. Modern :has() */
/* Builder page is hidden via display:none but still in DOM — :has() matches
   regardless of visibility. Use a body[data-page] attribute set by the JS
   bootstrap on every navigateTo() instead. */
body[data-page="builder"] main {
  overflow: hidden !important;
}

/* Builder page — kill the 32/80px padding so flow-palette + canvas + settings
   touch their container edges. Other pages keep their padding. */
#builder-page {
  padding: 0 !important;
}
/* Padding override — was main:has(#flow-palette), but #flow-palette is
   in DOM even on hidden builder page so the rule always fired. Use the
   page attribute instead. */
body[data-page="builder"] main {
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

/* Reinstate scrolling on <main> for normal pages. Body/html stay locked to
   viewport; main itself owns the page scroll. */
main {
  max-height: 100vh !important;
  overflow-y: auto !important;
}

/* ════════════════════════════════════════════════════════════════════════
   TELEGRAM MINI APP MODE
   ------------------------------------------------------------
   Activated when html[data-tg-app="1"] (set in studio.html bootstrap).
   We sit on top of Telegram WebView — viewport may be 320-450px wide,
   theme is controlled by Telegram client, and there are native Back/Main
   buttons. UX adapts: sidebar collapses to bottom-nav, gestures only,
   bigger touch targets.
   ════════════════════════════════════════════════════════════════════════ */

html[data-tg-app="1"] {
  /* When TG provides a viewport, use it instead of 100vh (handles
     keyboard appearing without layout jump) */
  height: var(--tg-vh, 100vh) !important;
}
html[data-tg-app="1"] body {
  height: var(--tg-vh, 100vh) !important;
  max-height: var(--tg-vh, 100vh) !important;
  /* Don't override --bg-primary etc — they're driven by accent themes.
     But fall back to TG bg if our token is missing somewhere. */
  background: var(--bg-primary, var(--tg-bg, #080b14)) !important;
}

/* Sidebar in Mini App: ALWAYS off-canvas drawer when in TG WebView,
   regardless of viewport (Telegram desktop also uses WebView with funky
   viewport reporting). High z-index + distinct background so it doesn't
   blend with backdrop. */
/* Desktop Mini App (TG Desktop window resized wide): KEEP the standard
   sticky-sidebar desktop layout — no drawer, no overlay. Only the smaller
   set of Mini App tweaks (theme sync, BackButton, Haptic) still applies. */
@media (min-width: 901px) {
  html[data-tg-app="1"] body aside.sidebar,
  html[data-tg-app="1"] body .sidebar {
    /* fall back to whatever studio.css sets — un-override */
    position: fixed !important;
    transform: none !important;
    width: var(--sidebar-width, 272px) !important;
    max-width: none !important;
    height: 100vh !important;
    max-height: none !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
    background: #090E18 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-top: 0 !important;
    z-index: 100 !important;
  }
  html[data-tg-app="1"] .app {
    display: grid !important;
    grid-template-columns: var(--sidebar-width, 272px) 1fr !important;
  }
  html[data-tg-app="1"] main {
    grid-column: auto !important;
  }
  /* No backdrop on desktop window */
  html[data-tg-app="1"] body.sidebar-open::after,
  html[data-tg-app="1"] body.sidebar-mobile-open::after {
    display: none !important;
  }
}

@media (max-width: 900px) {
html[data-tg-app="1"] body aside.sidebar,
html[data-tg-app="1"] body .sidebar {
  position: fixed !important;
  left: 0 !important;
  /* Compact floating drawer — doesn't take full height, sits in upper-mid */
  top: calc(56px + env(safe-area-inset-top)) !important;
  bottom: auto !important;
  width: 84vw !important;
  max-width: 320px !important;
  height: auto !important;
  max-height: min(640px, calc(100vh - 120px - env(safe-area-inset-bottom))) !important;
  border-radius: 0 16px 16px 0 !important;
  /* Frosted glass: semi-transparent dark + blur of content behind */
  background:
    linear-gradient(in oklab 180deg, rgba(19, 24, 38, 0.78) 0%, rgba(10, 14, 28, 0.85) 100%) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border-right: 1px solid rgba(168, 85, 247, 0.22) !important;
  box-shadow:
    8px 0 32px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(168, 85, 247, 0.12) inset !important;
  transform: translateX(-100%) !important;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  z-index: 10000 !important;
  overflow-y: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  /* Distribute: logo top, nav middle (grows), profile/etc bottom */
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Logo / brand row — flush top, no margin */
html[data-tg-app="1"] body .sidebar > .brand,
html[data-tg-app="1"] body .sidebar > .sidebar-header,
html[data-tg-app="1"] body .sidebar > .logo {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Nav block — takes remaining space, scrolls if too many tabs */
html[data-tg-app="1"] body .sidebar > .sidebar-nav,
html[data-tg-app="1"] body .sidebar > .nav-list,
html[data-tg-app="1"] body .sidebar > nav,
html[data-tg-app="1"] body .sidebar > .nav-scroll {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}
/* Profile / language / footer — pinned bottom, flush */
html[data-tg-app="1"] body .sidebar > .sidebar-footer,
html[data-tg-app="1"] body .sidebar > .sidebar-bottom,
html[data-tg-app="1"] body .sidebar > .user-section,
html[data-tg-app="1"] body .sidebar > :last-child {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
html[data-tg-app="1"] body.sidebar-open aside.sidebar,
html[data-tg-app="1"] body.sidebar-open .sidebar,
html[data-tg-app="1"] body.sidebar-mobile-open aside.sidebar,
html[data-tg-app="1"] body.sidebar-mobile-open .sidebar {
  transform: translateX(0) !important;
}

/* Kill pointer-events on the LEGACY backdrop from studio.css (z-index 95).
   It used to swallow taps even though sidebar was on top visually. Now taps
   pass through to whatever's beneath, and the JS outside-click handler
   makes the close decision based on event.target. */
html[data-tg-app="1"] body.sidebar-open::after,
html[data-tg-app="1"] body.sidebar-mobile-open::after {
  pointer-events: none !important;
}

/* Sidebar children — ensure clicks reach them, never get swallowed by backdrop.
   Explicit pointer-events + relative positioning gives them their own
   stacking context above the global backdrop. */
html[data-tg-app="1"] body .sidebar > *,
html[data-tg-app="1"] body .sidebar .nav-item,
html[data-tg-app="1"] body .sidebar .sidebar-header,
html[data-tg-app="1"] body .sidebar .sidebar-nav,
html[data-tg-app="1"] body .sidebar a,
html[data-tg-app="1"] body .sidebar button,
html[data-tg-app="1"] body .sidebar [onclick] {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

/* Sidebar inner spacing — push nav down so it's not glued to the very top,
   give nav-items real touch height, breathing room at bottom for FAB / safe-area */
html[data-tg-app="1"] body .sidebar .sidebar-header {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  margin-bottom: 8px !important;
}
html[data-tg-app="1"] body .sidebar .sidebar-nav,
html[data-tg-app="1"] body .sidebar .nav-list,
html[data-tg-app="1"] body .sidebar nav {
  padding: 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
html[data-tg-app="1"] body .sidebar .nav-item {
  min-height: 46px !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  font-size: 14.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}
html[data-tg-app="1"] body .sidebar .nav-item.active,
html[data-tg-app="1"] body .sidebar .nav-item.is-active {
  background: rgba(168, 85, 247, 0.15) !important;
  border-left: 3px solid var(--aura-1, #a855f7) !important;
}
/* Bottom padding inside sidebar so last nav-item isn't flush with phone bottom */
html[data-tg-app="1"] body .sidebar {
  padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
}
html[data-tg-app="1"] main {
  margin-left: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
html[data-tg-app="1"] .topbar {
  padding: 8px 12px !important;
}

/* Bigger touch targets in Mini App — Apple's HIG says 44pt minimum */
html[data-tg-app="1"] .btn,
html[data-tg-app="1"] .tap-btn,
html[data-tg-app="1"] .rt-save-btn,
html[data-tg-app="1"] .nav-item,
html[data-tg-app="1"] .tap-nav-item {
  min-height: 44px !important;
}

/* In Mini App, hide things that don't make sense:
   - Top-right notification bell + balance pill take valuable screen estate
     on a 360px-wide phone — surface them via swipe instead later.
   - Theme switcher (currentUser controls light/dark via TG, not us)
*/
@media (max-width: 600px) {
  html[data-tg-app="1"] .topbar .balance-pill,
  html[data-tg-app="1"] .topbar .notification-btn { display: none !important; }
}

/* Disable our own background-app aurora gradients on Mini App so TG's
   own bg color shows through (cleaner native feel). */
html[data-tg-app="1"] body {
  background-image: none !important;
}

/* Phase 4 — Mobile Mini App refinements */
html[data-tg-app="1"] body {
  /* iOS rubber-band scrolling — disable so the WebView doesn't bounce
     when reaching the edge (feels janky vs native apps) */
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: touch;
}
/* Smaller hero spacing inside Mini App — phones are tight */
@media (max-width: 600px) {
  html[data-tg-app="1"] .page-header { padding: 16px 14px 12px !important; }
  html[data-tg-app="1"] .page-title { font-size: 20px !important; }
  html[data-tg-app="1"] .page-subtitle { font-size: 12.5px !important; line-height: 1.4 !important; }
  /* Modals to bottom sheet */
  html[data-tg-app="1"] .modal,
  html[data-tg-app="1"] .studio-dialog-backdrop,
  html[data-tg-app="1"] .tap-modal-backdrop {
    align-items: flex-end !important;
  }
  html[data-tg-app="1"] .modal-content,
  html[data-tg-app="1"] .studio-dialog,
  html[data-tg-app="1"] .tap-modal {
    border-radius: 20px 20px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    margin: 0 !important;
    animation: tap-sheet-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }
  @keyframes tap-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  /* Agent settings modal already covers full screen; keep it edge-to-edge */
  html[data-tg-app="1"] #agent-settings-modal {
    border-radius: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE MINI APP — Phase 4.5 PROPER MOBILE PASS
   ------------------------------------------------------------
   Activated on small viewport regardless of TG context (also helps desktop
   resize-tested view). On TG WebView (html[data-tg-app="1"]) some rules get
   stricter via the !important to win over inline styles & legacy CSS.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── iOS SAFE AREAS ────────────────────────────────────────────────────
     Phones with notches / dynamic island clip top, gesture-handle clips bottom.
     env(safe-area-inset-*) is the proper iOS way to get those distances. */
  html[data-tg-app="1"] body { padding-top: env(safe-area-inset-top); }
  html[data-tg-app="1"] .topbar {
    padding-top: max(8px, env(safe-area-inset-top)) !important;
  }
  html[data-tg-app="1"] .modal-content,
  html[data-tg-app="1"] .studio-dialog,
  html[data-tg-app="1"] .tap-modal {
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  /* ── CHECKBOXES — proper square, centered, big enough for fingers ──────
     The fix: explicit width/height/border-radius, flex centering for the ::before
     checkmark (clip-path on a flexed pseudo can drift on mobile WebKit). */
  input[type="checkbox"]:not(.toggle-switch input):not(.switch input):not(.tg-cb-skip) {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;       /* avoid flex shrink in cramped rows */
    border-radius: 6px !important;
    border-width: 2px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: var(--bg-tertiary, rgba(255,255,255,0.04)) !important;
    border-color: var(--border, rgba(255,255,255,0.18)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 120ms, border-color 120ms, transform 80ms !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
    position: relative !important;
  }
  input[type="checkbox"]:not(.toggle-switch input):not(.switch input)::before {
    content: "" !important;
    width: 12px !important;
    height: 12px !important;
    transform: scale(0) !important;
    transition: transform 120ms cubic-bezier(0.22, 1.5, 0.36, 1) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
  }
  input[type="checkbox"]:not(.toggle-switch input):not(.switch input):checked {
    background: var(--accent, #0098ea) !important;
    border-color: var(--accent, #0098ea) !important;
  }
  input[type="checkbox"]:not(.toggle-switch input):not(.switch input):checked::before {
    transform: scale(1) !important;
  }
  input[type="checkbox"]:not(.toggle-switch input):not(.switch input):active {
    transform: scale(0.92) !important;
  }

  /* ── RADIO BUTTONS — same finger-friendly sizing ───────────────────────  */
  input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-width: 2px !important;
    flex-shrink: 0 !important;
  }
  input[type="radio"]:checked::before {
    width: 10px !important;
    height: 10px !important;
  }

  /* ── IOS-STYLE TOGGLES — proper sizing, no double-circle bug ───────────
     The "two overlapping circles" optical bug happens when the slider track
     has a glow shadow that bleeds past the knob. Fix: drop the shadow on
     checked state, give the knob a single clean shadow. */
  .toggle-switch,
  .switch {
    width: 48px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
  }
  .toggle-slider,
  .switch .slider {
    border-radius: 14px !important;
    box-shadow: none !important;
    transition: background 180ms !important;
  }
  .toggle-slider::before,
  .switch .slider::before {
    width: 22px !important;
    height: 22px !important;
    bottom: 3px !important;
    left: 3px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 0 1px rgba(0,0,0,0.1) !important;
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .toggle-switch input:checked + .toggle-slider,
  .switch input:checked + .slider {
    background: var(--accent, #0098ea) !important;
    box-shadow: none !important;
  }
  .toggle-switch input:checked + .toggle-slider::before,
  .switch input:checked + .slider::before {
    transform: translateX(20px) !important;
  }

  /* ── FORM ROWS — proper label-on-left / control-on-right alignment ─────
     Common pattern: <div class="row"><label>X</label><toggle/></div> ends up
     vertically misaligned because labels grow taller than 28px toggles. */
  .settings-row,
  .form-row,
  .toggle-row,
  .st-row,
  [class*="-setting-row"] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: 48px !important;
    padding: 8px 0 !important;
  }
  /* Labels: allow wrap, keep control fixed-width */
  .settings-row > label:first-child,
  .form-row > label:first-child,
  .toggle-row > label:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }
  .settings-row > .toggle-switch,
  .form-row > .toggle-switch,
  .toggle-row > .toggle-switch {
    flex: 0 0 auto !important;
  }

  /* ── BUTTONS — proper minimum sizing, no awkward thin buttons ──────────  */
  .btn, .tap-btn, .rt-save-btn, .btn-action, .rt-btn,
  button.btn, button.tap-btn {
    min-height: 44px !important;
    padding: 10px 18px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
  }
  .btn-sm, .btn.btn-sm {
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
  }

  /* ── INPUT FIELDS — bigger font to disable iOS zoom-on-focus ──────────
     iOS Safari zooms in when input font-size < 16px. Lock it at 16px.
     Exclusions: inputs that live inside their own pill-style wrapper
     (.network-search-float, .topbar .search) — they already handle
     padding/radius on the wrapper, our rule would create nested boxes. */
  input[type="text"]:not(.network-search-float input):not(.topbar .search input):not(.tg-input-skip),
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"]:not(.network-search-float input):not(.topbar .search input):not(.tg-input-skip),
  input[type="url"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
  }
  /* Inputs nested in pill wrappers: keep them flat — only fix font-size
     so iOS doesn't zoom on focus. */
  .network-search-float input,
  .topbar .search input {
    font-size: 16px !important;
    min-height: 0 !important;
    padding: 9px 4px !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
  }
  /* Tighten the network search wrapper itself on mobile — was 180px input,
     now sized to fit one-handed. */
  .network-search-float {
    padding: 0 10px !important;
    border-radius: 12px !important;
  }
  .network-search-float input {
    width: 100% !important;
  }
  textarea {
    min-height: 80px !important;
    line-height: 1.4 !important;
  }

  /* ── TOPBAR — compact, no overflow ─────────────────────────────────────  */
  .topbar {
    gap: 8px !important;
    padding: 8px 12px !important;
    min-height: 56px !important;
  }
  .topbar .user-avatar,
  .topbar .avatar-btn,
  #topbar-avatar-badge {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    font-size: 14px !important;
  }

  /* ── CARDS / TILES — proper mobile padding ─────────────────────────────  */
  .agent-card,
  .agent-card-enhanced,
  .ap-card,
  .stat-card,
  .feature-card,
  .skill-card {
    padding: 14px !important;
    border-radius: 14px !important;
  }
  .agent-card-enhanced .agent-name,
  .agent-card .agent-name {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  /* ── TABS — scrollable horizontal nav on small screens ─────────────────  */
  .st-nav,
  .tab-nav,
  .tabs-nav,
  [class*="-tab-nav"] {
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
  }
  .st-nav::-webkit-scrollbar,
  .tab-nav::-webkit-scrollbar,
  .tabs-nav::-webkit-scrollbar { display: none !important; }
  .st-nav > *,
  .tab-nav > *,
  .tabs-nav > * {
    scroll-snap-align: start !important;
    flex: 0 0 auto !important;
  }

  /* ── MODALS — bottom sheet with drag-handle for affordance ──────────────  */
  html[data-tg-app="1"] .modal-content::before,
  html[data-tg-app="1"] .studio-dialog::before,
  html[data-tg-app="1"] .tap-modal::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.25);
    pointer-events: none;
  }
  html[data-tg-app="1"] .modal-content,
  html[data-tg-app="1"] .studio-dialog,
  html[data-tg-app="1"] .tap-modal {
    position: relative !important;
    padding-top: 24px !important;
  }
  /* Tighten modal close X — was floating awkwardly on small modals */
  .modal-close,
  .modal-close-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── BALANCE / STAT PILLS — wrap, no horizontal overflow ────────────────  */
  .balance-pill,
  .stat-pill,
  .tap-pill {
    font-size: 13px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ── PAGE HEADERS — tighter ─────────────────────────────────────────────  */
  .page-header h1,
  .page-title {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
  }
  .page-subtitle,
  .page-header .subtitle {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* ── NO BACKDROP overlay — content behind sidebar stays clear.
     Blur lives ON THE SIDEBAR ITSELF (frosted glass) so only what's
     behind the sidebar gets the blur effect, not the entire screen. */
  html[data-tg-app="1"] body.sidebar-open::after,
  html[data-tg-app="1"] body.sidebar-mobile-open::after {
    display: none !important;
  }
  @keyframes tap-fade-in { from { opacity: 0; } to { opacity: 1; } }

  /* ── HORIZONTAL OVERFLOW guard — fixes "крив" alignment on phones ──────
     Many pages have content blocks > viewport width that cause horizontal
     scroll which jitters all alignment. Force body container max-width. */
  html[data-tg-app="1"] body,
  html[data-tg-app="1"] main {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  html[data-tg-app="1"] .page,
  html[data-tg-app="1"] .page-content,
  html[data-tg-app="1"] .content-wrap {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  /* Tables and code blocks that overflow get their OWN scroll, not body-wide */
  html[data-tg-app="1"] table,
  html[data-tg-app="1"] pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
  }

  /* ── GLOBAL ALIGNMENT NUKE ─────────────────────────────────────────────
     "Всё съезжано" usually = mixed box-sizing + width:100% with padding +
     stale inline margins. We force border-box everywhere + reset margins
     on top-level containers + neutralize negative-margin "bleed" hacks. */
  html[data-tg-app="1"] *,
  html[data-tg-app="1"] *::before,
  html[data-tg-app="1"] *::after {
    box-sizing: border-box !important;
  }
  html[data-tg-app="1"] main > *,
  html[data-tg-app="1"] .page > *,
  html[data-tg-app="1"] .page-content > *,
  html[data-tg-app="1"] .content-wrap > * {
    max-width: 100% !important;
  }
  /* Defeat negative-margin layouts (-12px, -16px, -20px gutters) that work
     on desktop but pop content past the screen edge on phones. */
  html[data-tg-app="1"] [class*="-gutter"],
  html[data-tg-app="1"] [style*="margin-left:-"],
  html[data-tg-app="1"] [style*="margin-right:-"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Common offending grid patterns: percentage-width children with gap */
  html[data-tg-app="1"] .row,
  html[data-tg-app="1"] .grid,
  html[data-tg-app="1"] [class*="-grid"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* ── TABS ALIGNMENT — extra strict ────────────────────────────────────
     Tabs panels often inherit padding from a desktop-only parent that
     was assumed to have inline display. Force them to a clean column. */
  html[data-tg-app="1"] .tab-content,
  html[data-tg-app="1"] .tab-panel,
  html[data-tg-app="1"] .st-tab-content,
  html[data-tg-app="1"] [role="tabpanel"] {
    width: 100% !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  html[data-tg-app="1"] .tab-content > *,
  html[data-tg-app="1"] .tab-panel > *,
  html[data-tg-app="1"] .st-tab-content > * {
    max-width: 100% !important;
  }
  /* Active tab indicator under each tab — make it cleanly aligned */
  html[data-tg-app="1"] .st-nav .nav-item.active,
  html[data-tg-app="1"] .tab-nav .nav-item.active,
  html[data-tg-app="1"] .tabs-nav .nav-item.active {
    position: relative !important;
  }
  html[data-tg-app="1"] .st-nav .nav-item,
  html[data-tg-app="1"] .tab-nav .nav-item,
  html[data-tg-app="1"] .tabs-nav .nav-item {
    padding: 10px 14px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  /* ── INFO / DETAIL ROWS — key/value pairs ─────────────────────────────
     Pattern: <div class="info-row"><span class="label">X</span><span class="value">Y</span></div>
     Often breaks on mobile because .value contains long addresses. */
  html[data-tg-app="1"] .info-row,
  html[data-tg-app="1"] .detail-row,
  html[data-tg-app="1"] .kv-row,
  html[data-tg-app="1"] [class*="-info-row"] {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    min-height: 36px !important;
    width: 100% !important;
  }
  html[data-tg-app="1"] .info-row > .label,
  html[data-tg-app="1"] .info-row > .key,
  html[data-tg-app="1"] .detail-row > .label,
  html[data-tg-app="1"] .kv-row > .key {
    flex: 0 0 auto !important;
    font-size: 13px !important;
    color: var(--text-secondary, rgba(255,255,255,0.6)) !important;
  }
  html[data-tg-app="1"] .info-row > .value,
  html[data-tg-app="1"] .info-row > .val,
  html[data-tg-app="1"] .detail-row > .value,
  html[data-tg-app="1"] .kv-row > .value {
    flex: 1 1 auto !important;
    text-align: right !important;
    font-size: 13px !important;
    word-break: break-all !important;
    min-width: 0 !important;
  }
  /* Wallet addresses + tx hashes — ellipsize with monospace */
  html[data-tg-app="1"] .address,
  html[data-tg-app="1"] code.addr,
  html[data-tg-app="1"] [data-address] {
    font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 140px !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  /* ── DROPDOWNS / SELECTS — proper picker on mobile ────────────────────  */
  html[data-tg-app="1"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a8b4c7' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 36px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  /* ── ROW WITH BUTTON ON RIGHT — common pattern that misaligns ─────────  */
  html[data-tg-app="1"] .row-with-action,
  html[data-tg-app="1"] [class*="-action-row"] {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }
  html[data-tg-app="1"] .row-with-action > :first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* ── KBD shortcut hints (⌘K, Ctrl+K etc) — useless on phone ─────────── */
  html[data-tg-app="1"] .kbd,
  html[data-tg-app="1"] kbd,
  html[data-tg-app="1"] .shortcut-hint,
  html[data-tg-app="1"] .search .kbd { display: none !important; }

  /* ── TOPBAR row layout — single line, search center, actions right ─── */
  html[data-tg-app="1"] .topbar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  html[data-tg-app="1"] .topbar .search {
    flex: 1 1 0 !important;       /* share space — don't grab 100% */
    min-width: 0 !important;
    max-width: none !important;
  }
  html[data-tg-app="1"] .topbar .search input {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Actions row (bell + balance + avatar) — pinned right, never wrapped */
  html[data-tg-app="1"] .topbar .row,
  html[data-tg-app="1"] .topbar > div:last-child {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  /* Hamburger first, search second, actions last — order via flex order */
  html[data-tg-app="1"] #tap-drawer-toggle { order: 0 !important; }
  html[data-tg-app="1"] .topbar .search   { order: 1 !important; }
  html[data-tg-app="1"] .topbar .row,
  html[data-tg-app="1"] .topbar > div:last-child { order: 2 !important; }

  /* ── METRICS GRID — 2-col on desktop becomes 1-col on phone ───────── */
  html[data-tg-app="1"] .metrics-grid,
  html[data-tg-app="1"] .stats-grid,
  html[data-tg-app="1"] [class*="-stats-grid"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* ── METRIC CARD — horizontal layout: icon on left, text wraps right ── */
  html[data-tg-app="1"] .metric-card,
  html[data-tg-app="1"] .stat-card {
    padding: 14px 16px !important;
    border-radius: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: 44px 1fr auto !important;
    grid-template-areas:
      "icon title value"
      "icon label value" !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    align-items: center !important;
  }
  html[data-tg-app="1"] .metric-card > .metric-icon,
  html[data-tg-app="1"] .metric-card > .stat-icon,
  html[data-tg-app="1"] .stat-card > .stat-icon {
    grid-area: icon !important;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html[data-tg-app="1"] .metric-card > .metric-icon svg,
  html[data-tg-app="1"] .metric-card > .stat-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  html[data-tg-app="1"] .metric-card .metric-label,
  html[data-tg-app="1"] .metric-card .metric-title,
  html[data-tg-app="1"] .stat-card .stat-label {
    grid-area: title !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--text-secondary, rgba(255,255,255,0.6)) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html[data-tg-app="1"] .metric-card .metric-sub,
  html[data-tg-app="1"] .metric-card .metric-hint,
  html[data-tg-app="1"] .stat-card .stat-sub {
    grid-area: label !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    color: var(--text-muted, rgba(255,255,255,0.45)) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  html[data-tg-app="1"] .metric-card .metric-value,
  html[data-tg-app="1"] .stat-card .stat-value {
    grid-area: value !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: right !important;
  }
  /* Kill the decorative "glow" + colored top-border bar on mobile — pure noise */
  html[data-tg-app="1"] .metric-card::before,
  html[data-tg-app="1"] .metric-card .metric-glow {
    display: none !important;
  }

  /* ── PAGE HEADER — actions wrap below title, not get cut off ──────── */
  html[data-tg-app="1"] .page-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  html[data-tg-app="1"] .page-header > div:first-child {
    width: 100% !important;
  }
  html[data-tg-app="1"] .header-actions {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  html[data-tg-app="1"] .header-actions > .btn,
  html[data-tg-app="1"] .header-actions > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  html[data-tg-app="1"] .header-actions .btn {
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /* ── HIDE useless theme-palette FAB (.fab) in TG mode ──────────────
     Telegram already controls theme; this button just opens settings
     and visually clashes with the bug-report FAB underneath it. */
  html[data-tg-app="1"] .fab,
  html[data-tg-app="1"] button.fab {
    display: none !important;
  }

  /* ── PAGE-HEADER cut-off content (subtitle "Статус системы...") ────── */
  html[data-tg-app="1"] .page-subtitle {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100% !important;
  }

  /* ── ROOT CAUSE: studio-skin.css forces `.app` to a 268px-sidebar +
     1fr-main grid. When the sidebar is taken out of flow (position:fixed
     for the Mini App drawer), <main> falls into the 268px column and the
     1fr column sits empty — that's the "пол экрана пусто" bug.
     Collapse the grid to a single column so <main> takes full width. */
  html[data-tg-app="1"] #app,
  html[data-tg-app="1"] .app {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  /* Force <main> to span full width regardless of grid placement */
  html[data-tg-app="1"] main,
  html[data-tg-app="1"] .main-wrapper,
  html[data-tg-app="1"] .main-content {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  /* All inner wrappers: full width */
  html[data-tg-app="1"] .page,
  html[data-tg-app="1"] .page.active,
  html[data-tg-app="1"] .page-content,
  html[data-tg-app="1"] .page-header,
  html[data-tg-app="1"] .topbar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  /* Inner header cards (welcome card "Добрый вечер ...") also full width */
  html[data-tg-app="1"] .page-header > *,
  html[data-tg-app="1"] .page-content > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Specifically: the overview greeting / welcome panel */
  html[data-tg-app="1"] .overview-greeting,
  html[data-tg-app="1"] .welcome-card,
  html[data-tg-app="1"] .dashboard-card,
  html[data-tg-app="1"] [class*="welcome"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── DUPLICATE HAMBURGER guard — at most one menu trigger visible ─── */
  html[data-tg-app="1"] .topbar .mobile-hamburger ~ #tap-drawer-toggle,
  html[data-tg-app="1"] #tap-drawer-toggle ~ .mobile-hamburger {
    display: none !important;
  }
  /* When BOTH happen to be in DOM (race condition), prefer the native one */
  html[data-tg-app="1"] .topbar:has(.mobile-hamburger) #tap-drawer-toggle {
    display: none !important;
  }
}