*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --navy:#070f22;
  --gold:#c8a96e;
  --gold-light:#e8c97e;
  --cream:#f0ece4;
  --cream-dim:rgba(240,236,228,0.5);
  --gold-glass:rgba(200,169,110,0.1);
  --gold-border:rgba(200,169,110,0.28);
}
html,body{width:100%;height:100vh;height:100dvh;background:var(--navy);font-family:'Inter',sans-serif;color:var(--cream);overflow:hidden}
.screen{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.7s ease;overflow:hidden}
.screen.active{opacity:1;pointer-events:all}
.stars-bg{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;z-index:0;pointer-events:none}
.star{position:absolute;border-radius:50%;background:rgba(255,255,255,0.9);animation:twinkle linear infinite}
@keyframes twinkle{0%,100%{opacity:0.25}50%{opacity:1}}
/* ═══ INTRO ═══ */
#screen-intro{background:var(--navy);z-index:10;perspective:1200px}
.intro-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.intro-logo{
  width:160px;height:160px;object-fit:contain;
  animation:introLogoSpin 3s cubic-bezier(0.1,0.8,0.2,1) forwards;
  filter:drop-shadow(0 0 40px rgba(200,169,110,0.35)) drop-shadow(0 0 80px rgba(100,180,255,0.15));
}
@keyframes introLogoSpin{
  0%{opacity:0;transform:translateZ(-1200px) scale(0) rotate(720deg)}
  25%{opacity:1}
  45%{transform:translateZ(0) scale(1) rotate(0deg)}
  100%{opacity:1;transform:translateZ(0) scale(1) rotate(0deg)}
}
.intro-brand{
  height:clamp(140px,18vw,180px);width:auto;object-fit:contain;
  margin-top:-28px;
  opacity:0;
  animation:introBrandFadeIn 3s ease-in-out forwards;
}
@keyframes introBrandFadeIn{
  0%{opacity:0}
  30%{opacity:0}
  45%{opacity:1}
  100%{opacity:1}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.skip-btn{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:3px;color:rgba(255,255,255,0.85);cursor:pointer;background:none;border:none;text-transform:uppercase;transition:color 0.3s;animation:fadeUp 0.9s 1.8s ease both;z-index:20}
.skip-btn:hover{color:#fff}

.terms-full{display:none;max-height:240px;overflow-y:auto;margin-top:10px;padding-top:10px;border-top:0.5px solid rgba(255,255,255,0.08);font-size:11.5px;line-height:1.8;color:rgba(240,236,228,0.6);white-space:pre-line}
.terms-full.open{display:block}
.google-btn{width:100%;padding:14px 20px;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.14);border-radius:14px;color:var(--cream);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;font-family:'Inter',sans-serif;transition:background 0.2s}
.google-btn:hover{background:rgba(255,255,255,0.1)}

/* ═══ ONBOARDING chat v2 (gender → terms) — styles live in the Onboarding v2 block at the end */
#screen-onboarding{background:radial-gradient(ellipse at 40% 0%,#0f1e45 0%,var(--navy) 65%);z-index:9;padding:0;overflow:hidden}

/* ═══ MAIN — FINAL approved single-row header (pixel-checked, "שורת קלייקי - למעלה", copied
   verbatim — same design language as the approved bottom composer bar). ═══ */
:root{ --navy-chat:#0c1a38; }
#screen-main{background:#000206;justify-content:flex-start;padding:0;z-index:8;flex-direction:column}

/* ═══ Deep-space background ("שמיים עם כוכבים") - copied from the approved file, values below are
   NOT changed except: (1) all box-shadow/position/transform px coordinates converted to vw/vh so
   the exact same layout scales correctly to any screen size instead of only the 405×720 canvas it
   was hand-placed for (this is what avoids empty gaps on taller/wider real devices), (2) z-index
   renumbered from 1-5 up into the app's own existing stacking ladder (was colliding with
   chat-frame/header). Colors stay exactly as given for the lobby (Claiky); a theme override
   further down recolors space-abyss/nebula-orb per expert using the existing --th-frame/--th-hdr-b
   variables, so no new per-theme colors needed to be invented. ═══ */
.space-abyss{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,#01040a 0%,#030a17 40%,#051329 80%,#081d3d 100%);z-index:0}
.nebula-orb{position:absolute;border-radius:50%;filter:blur(27px);pointer-events:none;mix-blend-mode:screen;z-index:1}
.orb-primary{width:79.012vw;height:79.012vw;background:radial-gradient(circle,rgba(29,92,219,0.6) 0%,rgba(13,50,130,0.3) 50%,transparent 80%);bottom:-5.556vh;left:50%;transform:translateX(-50%);animation:orb-pulse-vertical 10s ease-in-out infinite alternate;will-change:transform,opacity}
.orb-secondary{width:64.198vw;height:64.198vw;background:radial-gradient(circle,rgba(14,165,233,0.45) 0%,rgba(2,80,160,0.15) 60%,transparent 80%);top:25%;right:-12.346vw;animation:orb-drift-right 12s ease-in-out infinite alternate;will-change:transform,opacity}
.orb-tertiary{width:69.136vw;height:69.136vw;background:radial-gradient(circle,rgba(37,99,235,0.4) 0%,rgba(10,30,80,0.2) 60%,transparent 80%);top:-5.556vh;left:-9.877vw;animation:orb-drift-left 14s ease-in-out infinite alternate;will-change:transform,opacity}
@keyframes orb-pulse-vertical{0%{transform:translate(-50%,0) scale(0.9);opacity:0.6}50%{transform:translate(-50%,-8.333vh) scale(1.15);opacity:1}100%{transform:translate(-45%,-3.472vh) scale(1);opacity:0.75}}
@keyframes orb-drift-right{0%{transform:translate(0,0) scale(1);opacity:0.5}50%{transform:translate(-9.877vw,6.944vh) scale(1.2);opacity:0.95}100%{transform:translate(-3.704vw,-4.167vh) scale(0.95);opacity:0.6}}
@keyframes orb-drift-left{0%{transform:translate(0,0) scale(1);opacity:0.6}50%{transform:translate(12.346vw,5.556vh) scale(1.25);opacity:1}100%{transform:translate(6.173vw,9.722vh) scale(0.9);opacity:0.55}}
.stars-layer{position:absolute;top:0;left:0;border-radius:50%;pointer-events:none;z-index:2;will-change:opacity}
.micro-stars-dense-1{width:1px;height:1px;background:transparent;box-shadow:3.704vw 3.472vh #ffffff,11.111vw 10.417vh #bae6fd,20.988vw 4.861vh #ffffff,30.864vw 13.194vh #93c5fd,40.741vw 5.556vh #ffffff,50.617vw 11.806vh #bae6fd,60.494vw 4.167vh #ffffff,70.37vw 9.722vh #93c5fd,80.247vw 2.778vh #ffffff,90.123vw 9.028vh #bae6fd,96.296vw 6.25vh #ffffff,6.173vw 20.139vh #93c5fd,16.049vw 25.694vh #ffffff,25.926vw 18.75vh #bae6fd,35.802vw 24.306vh #ffffff,45.679vw 17.361vh #93c5fd,55.556vw 22.917vh #ffffff,65.432vw 15.972vh #bae6fd,75.309vw 21.528vh #ffffff,85.185vw 14.583vh #93c5fd,95.062vw 20.139vh #ffffff,8.642vw 32.639vh #bae6fd,18.519vw 38.194vh #ffffff,28.395vw 31.25vh #93c5fd,38.272vw 36.806vh #ffffff,48.148vw 29.861vh #bae6fd,58.025vw 35.417vh #ffffff,67.901vw 28.472vh #93c5fd,77.778vw 34.028vh #ffffff,87.654vw 27.083vh #bae6fd,97.531vw 32.639vh #ffffff;opacity:0.5;animation:twinkle-ambient 13s ease-in-out infinite}
.micro-stars-dense-2{width:1px;height:1px;background:transparent;box-shadow:4.938vw 44.444vh #ffffff,14.815vw 50vh #bae6fd,24.691vw 43.056vh #ffffff,34.568vw 48.611vh #93c5fd,44.444vw 41.667vh #ffffff,54.321vw 47.222vh #bae6fd,64.198vw 40.278vh #ffffff,74.074vw 45.833vh #93c5fd,83.951vw 38.889vh #ffffff,93.827vw 44.444vh #bae6fd,7.407vw 56.944vh #ffffff,17.284vw 62.5vh #93c5fd,27.16vw 55.556vh #ffffff,37.037vw 61.111vh #bae6fd,46.914vw 54.167vh #ffffff,56.79vw 59.722vh #93c5fd,66.667vw 52.778vh #ffffff,76.543vw 58.333vh #bae6fd,86.42vw 51.389vh #ffffff,96.296vw 56.944vh #93c5fd,9.877vw 69.444vh #bae6fd,19.753vw 75vh #ffffff,29.63vw 68.056vh #93c5fd,39.506vw 73.611vh #ffffff,49.383vw 66.667vh #bae6fd,59.259vw 72.222vh #ffffff,69.136vw 65.278vh #93c5fd,79.012vw 70.833vh #ffffff,88.889vw 63.889vh #bae6fd,6.173vw 81.944vh #ffffff,16.049vw 87.5vh #93c5fd,25.926vw 80.556vh #ffffff,35.802vw 86.111vh #bae6fd,45.679vw 79.167vh #ffffff,55.556vw 84.722vh #93c5fd,65.432vw 77.778vh #ffffff,75.309vw 83.333vh #bae6fd,85.185vw 76.389vh #ffffff,95.062vw 81.944vh #93c5fd,12.346vw 94.444vh #ffffff,32.099vw 97.222vh #bae6fd,51.852vw 93.056vh #ffffff,71.605vw 95.833vh #93c5fd,91.358vw 93.75vh #ffffff;opacity:0.55;animation:twinkle-ambient 17s ease-in-out infinite 3s}
.small-stars-dense{width:1.5px;height:1.5px;background:transparent;box-shadow:12.346vw 6.944vh #ffffff,33.333vw 15.278vh #e0f2fe,53.086vw 7.639vh #ffffff,75.309vw 17.361vh #bae6fd,92.593vw 4.861vh #ffffff,22.222vw 26.389vh #93c5fd,43.21vw 31.944vh #ffffff,62.963vw 25vh #bae6fd,82.716vw 30.556vh #ffffff,11.111vw 46.528vh #e0f2fe,30.864vw 52.083vh #ffffff,50.617vw 45.139vh #93c5fd,70.37vw 50.694vh #ffffff,90.123vw 43.75vh #bae6fd,20.988vw 65.972vh #ffffff,40.741vw 71.528vh #e0f2fe,60.494vw 64.583vh #ffffff,80.247vw 70.139vh #93c5fd,18.519vw 85.417vh #ffffff,38.272vw 90.972vh #bae6fd,58.025vw 84.028vh #ffffff,77.778vw 89.583vh #93c5fd;opacity:0.65;animation:twinkle-ambient 11s ease-in-out infinite 1.5s}
@keyframes twinkle-ambient{0%,100%{opacity:0.35}50%{opacity:0.8}}
.star-cluster{position:absolute;top:0;left:0;border-radius:50%;pointer-events:none;z-index:3;will-change:opacity}
.cluster-alpha{width:2px;height:2px;box-shadow:69.136vw 13.194vh #ffffff,81.481vw 19.444vh #bae6fd,39.506vw 72.222vh #ffffff;animation:flash-sparkle 8s ease-in-out infinite 0.5s}
.cluster-beta{width:2.5px;height:2.5px;box-shadow:16.049vw 19.444vh #ffffff,27.16vw 29.167vh #7dd3fc,83.951vw 66.667vh #ffffff;animation:flash-sparkle 11s ease-in-out infinite 3s}
.cluster-gamma{width:3px;height:3px;box-shadow:48.148vw 38.889vh #ffffff,56.79vw 47.222vh #e0f2fe,19.753vw 90.278vh #ffffff;animation:flash-sparkle 13s ease-in-out infinite 6s}
.cluster-delta{width:2px;height:2px;box-shadow:35.802vw 6.25vh #ffffff,54.321vw 11.111vh #bae6fd,90.123vw 40.278vh #ffffff;animation:flash-sparkle 9s ease-in-out infinite 1.5s}
.cluster-epsilon{width:3.2px;height:3.2px;box-shadow:9.877vw 10.417vh #ffffff,23.457vw 45.833vh #e0f2fe,45.679vw 95.833vh #ffffff;animation:flash-sparkle 16s ease-in-out infinite 8s}
.cluster-zeta{width:2.8px;height:2.8px;box-shadow:39.506vw 26.389vh #ffffff,67.901vw 61.111vh #ffffff,30.864vw 81.944vh #e0f2fe;animation:flash-sparkle 14s ease-in-out infinite 4.5s}
@keyframes flash-sparkle{0%,100%{opacity:0.05}30%{opacity:0.2}50%{opacity:1}70%{opacity:0.3}}
.shooting-star{position:absolute;height:1.5px;background:linear-gradient(90deg,#ffffff,rgba(147,197,253,0.5),transparent);border-radius:999px;filter:drop-shadow(0 0 4px rgba(186,230,253,0.8));opacity:0;pointer-events:none;z-index:4;will-change:transform,opacity}
.meteor-1{top:14%;right:-10%;width:24.691vw;transform:rotate(-30deg);animation:meteor-slow-1 9s cubic-bezier(0.25,1,0.5,1) infinite 1s}
.meteor-2{top:38%;right:-12%;width:29.63vw;transform:rotate(-35deg);animation:meteor-slow-2 11s cubic-bezier(0.25,1,0.5,1) infinite 4s}
.meteor-3{top:60%;right:-15%;width:22.222vw;transform:rotate(-26deg);animation:meteor-slow-3 10s cubic-bezier(0.25,1,0.5,1) infinite 6.5s}
.meteor-4{top:25%;right:-10%;width:27.16vw;transform:rotate(-38deg);animation:meteor-slow-4 13s cubic-bezier(0.25,1,0.5,1) infinite 9.5s}
@keyframes meteor-slow-1{0%{opacity:0;transform:translate(0,0) rotate(-30deg)}3%{opacity:0.95}24%{opacity:0;transform:translate(-83.951vw,27.083vh) rotate(-30deg)}100%{opacity:0;transform:translate(-83.951vw,27.083vh) rotate(-30deg)}}
@keyframes meteor-slow-2{0%{opacity:0;transform:translate(0,0) rotate(-35deg)}3%{opacity:0.9}26%{opacity:0;transform:translate(-91.358vw,36.111vh) rotate(-35deg)}100%{opacity:0;transform:translate(-91.358vw,36.111vh) rotate(-35deg)}}
@keyframes meteor-slow-3{0%{opacity:0;transform:translate(0,0) rotate(-26deg)}3%{opacity:0.85}22%{opacity:0;transform:translate(-79.012vw,21.528vh) rotate(-26deg)}100%{opacity:0;transform:translate(-79.012vw,21.528vh) rotate(-26deg)}}
@keyframes meteor-slow-4{0%{opacity:0;transform:translate(0,0) rotate(-38deg)}3%{opacity:0.95}25%{opacity:0;transform:translate(-88.889vw,38.889vh) rotate(-38deg)}100%{opacity:0;transform:translate(-88.889vw,38.889vh) rotate(-38deg)}}
/* Per-expert recoloring, reusing existing theme variables (no new colors invented) — Claiky/lobby
   keeps the exact deep-blue palette above since no theme class is present there. */
#screen-main[class*="theme-"] .space-abyss{background:var(--th-frame)}
#screen-main[class*="theme-"] .nebula-orb{background:radial-gradient(circle,var(--th-hdr-b) 0%,transparent 70%)}

.top-tier-chassis {
  position: relative;
  width: 100%;
  height: 126px;
}

.top-tier-chassis .scoop-bar-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.top-content-grid {
  position: absolute;
  top: 7px;
  left: 0;
  width: 100%;
  height: 36px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}

.top-tier-chassis .left-wing-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  direction: ltr;
}

.top-tier-chassis .right-wing-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  direction: ltr;
}

.top-tier-chassis .action-btn {
  background: transparent;
  border: none;
  padding: 2px;
  color: #d1e2ff;
  opacity: 0.85;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.top-tier-chassis .action-btn svg {
  width: 17px;
  height: 17px;
}

.top-tier-chassis .action-btn:hover {
  opacity: 1;
  color: #ffffff;
  filter: drop-shadow(0 0 6px rgba(147, 197, 253, 0.8));
}

/* ═══ Coin badge — 3D spinning gold coin with glint, header wallet icon ═══
   Adapted from a standalone demo (140px, translateZ ±4px front/back, ±4..0px edge stack) down to
   the header's real 26px badge size — every 3D distance (perspective, translateZ) is scaled by
   the same ratio (26/140 ≈ 0.186) so the spin/thickness look proportionally identical at the
   smaller size, not flatter or more exaggerated. */
.coin-badge-container {
  perspective: 180px;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.coin-badge-spin {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: coinBadgeSpin 10s linear infinite;
}

.coin-badge-face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-image: url('assets/coin-gold.jpg');
  background-size: 122%;
  background-position: center;
  overflow: hidden;
}

.coin-badge-front { transform: translateZ(0.9px); }
.coin-badge-back { transform: translateZ(-0.9px) rotateY(180deg); }

.coin-badge-edge {
  background-image: none;
  background: linear-gradient(90deg, #b45309, #fcd34d, #b45309);
}

.coin-badge-glint {
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  animation: coinBadgeGlint 7s infinite ease-in-out;
}

@keyframes coinBadgeSpin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes coinBadgeGlint {
  0%, 15% { left: -150%; }
  40%, 100% { left: 200%; }
}

.gold-user-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.2px solid rgba(251, 191, 36, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.25);
  flex-shrink: 0;
}

.gold-user-circle svg {
  width: 15px;
  height: 15px;
}

.main-header .medallion-cradle {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.main-header .ice-blue-ring {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: #050b16;
  border: 1.5px solid rgba(147, 197, 253, 0.75);
  box-shadow:
    0 0 24px rgba(96, 165, 250, 0.6),
    inset 0 0 12px rgba(147, 197, 253, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-header .avatar-disc {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: radial-gradient(circle, #0e192d 0%, #050b16 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wolf-glyph {
  width: 41px;
  height: 41px;
}

/* .micro-divider and .medallion-center-spacer are shared verbatim with the composer bottom bar
   (identical values there — declared once already, not re-declared here to avoid a pure dup). */
.main-header .ice-blue-ring{cursor:pointer}
.avatar-viewer{position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;background:rgba(0,0,0,0.92);display:none;align-items:center;justify-content:center}
.avatar-viewer.open{display:flex}
.avatar-viewer-frame{position:relative;display:inline-block;max-width:88vw;max-height:70vh}
.avatar-viewer img{display:block;max-width:88vw;max-height:70vh;border-radius:18px;object-fit:contain;box-shadow:0 12px 40px rgba(0,0,0,0.6)}
.avatar-viewer-close{position:absolute;top:-14px;right:-14px;width:36px;height:36px;border-radius:50%;background:rgba(20,20,26,0.92);border:0.75px solid rgba(255,255,255,0.25);color:#fff;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,0.5)}
/* ═══ end of verbatim approved block ═══ */

/* ─── Adaptations needed to run inside the real (RTL) app, not the standalone LTR demo canvas ───
   1) .top-content-grid gets direction:ltr — same reasoning as everywhere else this pattern is
      used: without it the app's global RTL flips which physical side "left-wing-area" lands on.
   2) preserveAspectRatio="none" added to this SVG too (in index.html) — the composer bar shipped
      without it originally and that was the exact cause of the mic button "escaping" its notch on
      real devices; adding it here from the start avoids the same bug before it ships.
   3) .gold-user-circle needs position:relative so the online-status dot (.avatar-dot) can sit
      inside it — simply missing, nothing existing changed. */
.main-header{position:relative;width:100%;height:101px;flex-shrink:0;z-index:12}
.top-content-grid{direction:ltr}
.gold-user-circle{position:relative}
.avatar-dot{position:absolute;bottom:0;left:0;width:8px;height:8px;border-radius:50%;background:#ff4757;border:1.5px solid var(--navy-chat);z-index:1}
.avatar-dot.on{background:#2ed573}
.hdr-logo-icon{width:60%;height:60%;object-fit:contain}
#hdrAgentName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-agent-icon{width:100%;height:100%;object-fit:cover;border-radius:50%}

.chat-frame{position:relative;flex:1;min-height:0;width:100%;background:transparent;overflow:hidden;z-index:10;margin-top:0}
.diag-summary-bar{position:relative;z-index:11;flex-shrink:0;width:100%;box-sizing:border-box;padding:8px 14px 2px;margin:0;background:rgba(10,22,42,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:0.75px solid rgba(147,197,253,0.3);display:flex;flex-direction:column;gap:6px;animation:diag-bar-in 0.25s ease}
.capsule-header{display:flex;align-items:center;gap:6px}
.live-dot{width:6px;height:6px;border-radius:50%;background:#38bdf8;box-shadow:0 0 8px #38bdf8;animation:pulse-dot 2s infinite ease-in-out;flex-shrink:0}
@keyframes pulse-dot{0%,100%{opacity:0.4;transform:scale(0.9)}50%{opacity:1;transform:scale(1.3)}}
.header-label{font-size:11px;color:rgba(209,226,255,0.75);font-weight:500}
.chips-track{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-height:35vh;overflow-y:auto}
.chips-track::-webkit-scrollbar{display:none}
.insight-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(14,30,58,0.85);border:1px solid rgba(147,197,253,0.4);padding:4px 10px;border-radius:12px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,0.35);transition:all 0.25s ease;flex-shrink:0}
.chip-icon{font-size:12px;color:#38bdf8}
.chip-text{font-size:12px;color:#e0f2fe;font-weight:600}
.chip-remove-btn{background:transparent;border:none;color:rgba(209,226,255,0.5);font-size:14px;cursor:pointer;line-height:1;padding:0 2px;transition:color 0.2s}
.chip-remove-btn:hover{color:#f87171}
.chip-highlight{border-color:rgba(56,189,248,0.75);box-shadow:0 0 12px rgba(56,189,248,0.4)}
.chip-animating{animation:chip-enter 0.65s cubic-bezier(0.16,1,0.3,1) forwards}
@keyframes chip-enter{0%{opacity:0;transform:scale(0.6) translateY(8px);border-color:#ffffff;box-shadow:0 0 25px rgba(255,255,255,0.9),inset 0 0 10px #ffffff;background-color:#1e3a8a}40%{opacity:1;transform:scale(1.08) translateY(-2px);border-color:#93c5fd;box-shadow:0 0 18px rgba(147,197,253,0.85)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes diag-bar-in{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
.chat-messages{position:relative;z-index:1;height:100%;overflow-y:auto;padding:2px 16px 18px;display:flex;flex-direction:column;gap:10px}
.chat-empty{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:6px;z-index:2;padding:0 30px;overflow-y:auto}
.greeting-hello{font-size:20px;font-weight:600;color:var(--cream);margin-top:0}
.greeting-q{font-size:14px;color:var(--cream-dim);margin-top:2px}
.msg{max-width:78%;width:fit-content;padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.msg-user{margin-right:0;margin-left:auto;background:linear-gradient(135deg,rgba(200,169,110,0.28),rgba(232,201,126,0.2));border:0.5px solid rgba(200,169,110,0.4);border-bottom-left-radius:5px}
.msg-kali{margin-left:0;margin-right:auto;background:rgba(232,237,247,0.97);color:#16233f;border:0.5px solid rgba(255,255,255,0.6);border-bottom-right-radius:5px;box-shadow:0 3px 14px rgba(0,0,0,0.22)}

/* "🔊 סיכום קולי של קלייקי" — always rendered in the DOM (see chat.js), visibility controlled
   purely by this body class so toggling the setting mid-session instantly shows/hides every
   button already on screen, no re-render needed. Small and understated on purpose (product
   decision: not a prominent feature — someone who wants it will find it in Settings). */
.claiky-listen-btn{display:none;margin-top:6px;background:none;border:none;padding:2px 4px;font-size:13px;opacity:0.55;cursor:pointer;line-height:1}
.claiky-listen-btn:hover{opacity:0.9}
.claiky-listen-btn:disabled{cursor:default;opacity:0.4}
body.claiky-voice-on .claiky-listen-btn{display:inline-block}
.msg-live{opacity:0.6}
.msg-typing{display:flex;align-items:center;gap:5px;padding:12px 16px}
.msg-typing .dot{width:7px;height:7px;background:rgba(200,169,110,0.7);border-radius:50%;animation:dotBounce 1.2s ease-in-out infinite}
.msg-typing .dot:nth-child(2){animation-delay:0.15s}
.msg-typing .dot:nth-child(3){animation-delay:0.3s}
@keyframes dotBounce{0%,60%,100%{transform:translateY(0);opacity:0.4}30%{transform:translateY(-6px);opacity:1}}
.msg-file{display:flex;align-items:center;gap:8px;padding:8px}
.msg-file img{width:96px;height:96px;object-fit:cover;border-radius:10px;display:block}
.file-chip{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,0.06);border-radius:10px;font-size:13px}

/* ═══ Quick-reply buttons (offer_lobby_transfer) — was missing entirely ═══ */
.qr-wrap{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin:10px 0 4px;width:100%;box-sizing:border-box}
.qr-btn{width:auto;flex:0 0 auto;padding:11px 16px;border-radius:14px;border:0.5px solid rgba(200,169,110,0.45);background:rgba(255,255,255,0.1);color:var(--cream);font-size:14px;font-weight:600;cursor:pointer;text-align:center;white-space:normal;line-height:1.4;box-sizing:border-box;direction:rtl;box-shadow:0 2px 10px rgba(0,0,0,0.22)}
.qr-btn:active{transform:scale(0.98)}
.qr-btn-confirm_transfer{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#07100e;border:none}
.qr-answered .qr-btn{opacity:0.5;cursor:default;pointer-events:none}
#screen-main[class*="theme-"] .qr-btn{background:var(--th-acc-bg);border-color:var(--th-acc-b);color:var(--th-acc-t)}

/* ═══ Streaming Avatar Add-on (premium, planned) — infra only, no provider wired up yet ═══ */
.avatar-video-frame{position:relative;flex:1;min-height:0;width:100%;background:#000;overflow:hidden;display:none;align-items:center;justify-content:center;z-index:10}
.avatar-video-frame.active{display:flex}
.avatar-video{width:100%;height:100%;object-fit:cover}
.avatar-video-placeholder{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 30px;color:var(--cream-dim);font-size:13px}

/* ═══ FINAL approved composer/bottom-bar ("שורת קלייקי למטה") - copied verbatim, do not modify
   values below this line down to the mic-toggle :checked rules — pixel-checked design. ═══ */
.composer-bottom-chassis {
  position: relative;
  width: 100%;
  height: 101px;
}

.composer-bottom-chassis .scoop-bar-svg {
  position: absolute;
  top: -25px;
  left: 0;
  width: 100%;
  height: 126px;
  transform: rotate(180deg);
  filter: drop-shadow(0 -6px 18px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

.composer-content-grid {
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  box-sizing: border-box;
}

.composer-bottom-chassis .left-wing-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.actions-group-aligned {
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
  transform: translate(-9px, 2px);
}

.composer-bottom-chassis .action-btn {
  background: transparent;
  border: none;
  padding: 2px;
  color: #d1e2ff;
  opacity: 0.85;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.composer-bottom-chassis .action-btn svg {
  width: 18px;
  height: 18px;
}

.paperclip-icon {
  transform: rotate(12deg);
}

.composer-bottom-chassis .action-btn:hover {
  opacity: 1;
  color: #ffffff;
  filter: drop-shadow(0 0 6px rgba(147, 197, 253, 0.8));
}

.micro-divider {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 3px rgba(147, 197, 253, 0.3);
  border-radius: 1px;
}

.medallion-center-spacer {
  width: 78px;
  flex-shrink: 0;
}

.composer-bottom-chassis .right-wing-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.input-capsule-right {
  width: 100%;
  max-width: 144px;
  height: 31px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(195, 225, 255, 0.22);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 6px;
  box-sizing: border-box;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
  transform: translate(4px, 2px);
}

.placeholder-text {
  font-size: 12px;
  color: rgba(209, 226, 255, 0.65);
  font-weight: 400;
  direction: rtl;
  user-select: none;
  white-space: nowrap;
}

.embedded-send-btn {
  background: transparent;
  border: none;
  padding: 3px;
  color: #93c5fd;
  opacity: 0.9;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.embedded-send-btn svg {
  width: 14px;
  height: 14px;
  transform: rotate(-45deg);
}

.embedded-send-btn:hover {
  opacity: 1;
  color: #ffffff;
  filter: drop-shadow(0 0 6px rgba(147, 197, 253, 0.9));
}

.mic-toggle-checkbox {
  display: none;
}

.composer-bottom-chassis .medallion-cradle {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.composer-bottom-chassis .ice-blue-ring {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: #050b16;
  border: 1.5px solid rgba(147, 197, 253, 0.25);
  box-shadow:
    0 0 6px rgba(96, 165, 250, 0.15),
    inset 0 0 4px rgba(147, 197, 253, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.composer-bottom-chassis .avatar-disc {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: radial-gradient(circle, #0e192d 0%, #050b16 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.studio-mic-icon {
  width: 28px;
  height: 28px;
  color: rgba(147, 197, 253, 0.45);
  transition: all 0.3s ease;
}

.mic-capsule-body {
  fill: #0e1b2f;
  transition: fill 0.3s ease;
}

.composer-bottom-chassis .medallion-cradle:hover .ice-blue-ring {
  transform: scale(1.03);
  box-shadow:
    0 0 24px rgba(96, 165, 250, 0.7),
    inset 0 0 12px rgba(147, 197, 253, 0.4);
}

.mic-toggle-checkbox:checked + .medallion-cradle .ice-blue-ring {
  border: 2px solid #ffffff;
  background-color: #10243e;
  box-shadow:
    0px 0px 1px rgb(151, 243, 255) inset,
    0px 0px 3px rgb(151, 243, 255) inset,
    0px 0px 12px rgb(151, 243, 255) inset,
    0px 0px 15px rgb(151, 243, 255),
    0px 0px 35px rgb(151, 243, 255),
    0px 0px 65px rgba(151, 243, 255, 0.75);
}

.mic-toggle-checkbox:checked + .medallion-cradle .avatar-disc {
  background: radial-gradient(circle, #183556 0%, #0c1a2e 100%);
}

.mic-toggle-checkbox:checked + .medallion-cradle .studio-mic-icon {
  color: #ffffff;
  filter: drop-shadow(0px 0px 8px rgb(151, 243, 255)) drop-shadow(0px 0px 16px rgba(151, 243, 255, 0.8));
}

.mic-toggle-checkbox:checked + .medallion-cradle .mic-capsule-body {
  fill: rgba(151, 243, 255, 0.28);
}
/* ═══ end of verbatim approved block ═══ */

/* ─── Adaptations needed to run inside the real (RTL) app, not the standalone LTR demo canvas ───
   1) .composer-content-grid gets direction:ltr — same reasoning as the header's .hdr-row: without
      it, the app's global RTL flips "left-wing-area"/"right-wing-area" to the opposite physical
      side of the screen from what the naming (and the demo, rendered with no dir set → browser
      default LTR) intended.
   2) The demo's .placeholder-text was a static <span>, not a real input — replaced in index.html
      with an actual <textarea class="chat-ta">. This is that textarea's styling, scoped to this
      capsule only, so it blends in exactly like the span did but is actually typeable. Hebrew
      text still types/aligns RTL internally regardless of the LTR layout direction above.
   3) .composer-bottom-chassis needs an explicit z-index — the starfield background now spans the
      full screen behind everything (not just the chat area), so this bar needs to explicitly
      stack above it or stars could show through/over it. */
.composer-content-grid{direction:ltr}
.composer-bottom-chassis{z-index:11}
.input-capsule-right .chat-ta{flex:1;background:transparent;border:none;outline:none;resize:none;overflow:hidden;font-size:12px;font-family:inherit;color:rgba(209,226,255,0.9);line-height:1.3;padding:0;direction:rtl;max-height:60px}
.input-capsule-right .chat-ta::placeholder{color:rgba(209,226,255,0.65)}

.settings-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:50;display:none;align-items:center;justify-content:center;padding:20px}
.settings-overlay.open{display:flex}
.settings-modal{width:100%;max-width:340px;background:var(--navy);border:0.5px solid rgba(255,255,255,0.1);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:12px}
.purchase-gate-text{font-size:13px;color:rgba(240,236,228,0.65);line-height:1.7;text-align:center}
.settings-title{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:300;text-align:center;margin-bottom:6px}
.persona-card{width:100%;text-align:right;padding:14px 16px;background:rgba(255,255,255,0.035);border:0.5px solid rgba(255,255,255,0.08);border-radius:14px;cursor:pointer;font-family:'Inter',sans-serif;color:var(--cream);transition:background 0.2s,border-color 0.2s}
.persona-card:hover{background:rgba(255,255,255,0.06)}
.persona-card.active{background:rgba(200,169,110,0.15);border-color:var(--gold)}
.persona-name{font-size:14px;font-weight:500;margin-bottom:3px}
.persona-desc{font-size:12px;color:rgba(240,236,228,0.45)}
.settings-close{margin-top:6px;padding:11px;background:none;border:0.5px solid rgba(255,255,255,0.1);border-radius:12px;color:rgba(240,236,228,0.6);cursor:pointer;font-family:'Inter',sans-serif;font-size:13px}
.settings-divider{border-top:0.5px solid rgba(255,255,255,0.08);margin-top:8px;padding-top:12px}
.live-beta-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,0.035);border:0.5px solid rgba(255,255,255,0.08);border-radius:14px;cursor:pointer;font-size:12.5px;color:var(--cream-dim)}
.live-beta-row input{accent-color:var(--gold);width:16px;height:16px;flex-shrink:0}
.live-language-select{width:100%;padding:11px 14px;background:rgba(255,255,255,0.035);border:0.5px solid rgba(255,255,255,0.08);border-radius:14px;color:var(--cream);font-family:'Inter',sans-serif;font-size:13px}

/* ═══ Claiky agents — handoff notes, back-to-host, product card ═══ */
.msg-system{align-self:center;max-width:92%;padding:7px 16px;margin:4px 0;background:rgba(200,169,110,0.12);border:0.5px solid rgba(200,169,110,0.35);color:rgba(240,236,228,0.75);font-size:12.5px;text-align:center;border-radius:20px}
.kai-results-back-btn{align-self:center;margin:2px 0 8px;padding:7px 16px;background:rgba(200,169,110,0.2);border:1px solid rgba(200,169,110,0.5);color:var(--gold-light,#e8c98f);font-size:12.5px;font-weight:600;border-radius:20px;cursor:pointer;transition:background 0.2s}
.kai-results-back-btn:hover{background:rgba(200,169,110,0.32)}
.back-to-host{display:inline-flex;align-items:center;padding:6px 12px;border-radius:16px;background:rgba(7,15,34,0.92);border:0.5px solid rgba(200,169,110,0.5);color:var(--gold-light);font-size:12px;font-family:'Inter',sans-serif;cursor:pointer;white-space:nowrap;box-shadow:0 4px 18px rgba(0,0,0,0.4);transition:background 0.2s,border-color 0.2s}
.back-to-host:hover{background:rgba(200,169,110,0.18);border-color:var(--gold)}

/* ═══ Expert room themes — per-agent palettes derived from each logo (lobby stays navy) ═══
   Each theme only sets variables; the single [class*="theme-"] block below applies them. */
.theme-bao{
  --th-hdr:#2a0b14;--th-hdr-b:rgba(244,177,131,0.4);
  --th-frame:linear-gradient(165deg,#3a0e1b 0%,#5a1626 40%,#7a2233 62%,#4a1220 100%);
  --th-star:rgba(255,205,150,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(255,214,140,0.9),rgba(255,140,90,0.35) 42%,rgba(255,120,60,0) 70%);
  --th-kali:rgba(255,235,220,0.07);--th-kali-b:rgba(255,220,195,0.13);
  --th-user:linear-gradient(135deg,rgba(244,177,131,0.32),rgba(255,150,140,0.22));--th-user-b:rgba(244,177,131,0.45);
  --th-sys:rgba(244,177,131,0.14);--th-sys-b:rgba(244,177,131,0.4);--th-sys-t:rgba(255,235,220,0.8);
  --th-acc-bg:rgba(244,177,131,0.12);--th-acc-b:rgba(244,177,131,0.4);--th-acc-t:var(--gold-light);
  --th-btn:linear-gradient(135deg,#e8a87c,#f4b183);
  --th-back-bg:rgba(42,11,20,0.92);--th-back-b:rgba(244,177,131,0.5);--th-back-t:#ffd9b3;--th-back-hov:rgba(244,177,131,0.18);
}
.theme-joey{
  --th-hdr:#2b2112;--th-hdr-b:rgba(230,190,90,0.4);
  --th-frame:linear-gradient(165deg,#3a2c14 0%,#57401c 40%,#7a5a24 62%,#4a3618 100%);
  --th-star:rgba(255,220,150,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(255,232,160,0.9),rgba(230,170,60,0.35) 42%,rgba(220,150,40,0) 70%);
  --th-kali:rgba(255,240,210,0.07);--th-kali-b:rgba(240,215,170,0.13);
  --th-user:linear-gradient(135deg,rgba(230,190,90,0.32),rgba(200,160,70,0.22));--th-user-b:rgba(230,190,90,0.45);
  --th-sys:rgba(230,190,90,0.14);--th-sys-b:rgba(230,190,90,0.4);--th-sys-t:rgba(255,242,210,0.8);
  --th-acc-bg:rgba(230,190,90,0.12);--th-acc-b:rgba(230,190,90,0.4);--th-acc-t:var(--gold-light);
  --th-btn:linear-gradient(135deg,#e6be5a,#f0cf7e);
  --th-back-bg:rgba(43,33,18,0.92);--th-back-b:rgba(230,190,90,0.5);--th-back-t:#ffe9b8;--th-back-hov:rgba(230,190,90,0.18);
}
.theme-tiger{
  --th-hdr:#1a120b;--th-hdr-b:rgba(255,160,60,0.45);
  --th-frame:linear-gradient(165deg,#24160d 0%,#3a2412 40%,#5c3a1c 62%,#2e1d10 100%);
  --th-star:rgba(255,170,90,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(255,190,110,0.9),rgba(255,130,50,0.35) 42%,rgba(255,110,40,0) 70%);
  --th-kali:rgba(255,235,215,0.07);--th-kali-b:rgba(255,210,170,0.13);
  --th-user:linear-gradient(135deg,rgba(255,160,60,0.32),rgba(230,120,50,0.22));--th-user-b:rgba(255,160,60,0.45);
  --th-sys:rgba(255,160,60,0.14);--th-sys-b:rgba(255,160,60,0.4);--th-sys-t:rgba(255,235,215,0.8);
  --th-acc-bg:rgba(255,160,60,0.12);--th-acc-b:rgba(255,160,60,0.4);--th-acc-t:#ffd9a0;
  --th-btn:linear-gradient(135deg,#f58a2e,#ffb35c);
  --th-back-bg:rgba(26,18,11,0.92);--th-back-b:rgba(255,160,60,0.5);--th-back-t:#ffd9a0;--th-back-hov:rgba(255,160,60,0.18);
}
.theme-chip{
  --th-hdr:#0c1024;--th-hdr-b:rgba(150,170,255,0.4);
  --th-frame:linear-gradient(165deg,#101a3a 0%,#1c2a5c 40%,#3a3f7a 62%,#171f45 100%);
  --th-star:rgba(190,200,255,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(210,220,255,0.9),rgba(130,140,230,0.35) 42%,rgba(110,120,220,0) 70%);
  --th-kali:rgba(225,230,255,0.07);--th-kali-b:rgba(195,205,245,0.13);
  --th-user:linear-gradient(135deg,rgba(150,170,255,0.32),rgba(170,140,240,0.22));--th-user-b:rgba(160,170,255,0.45);
  --th-sys:rgba(160,170,255,0.14);--th-sys-b:rgba(160,170,255,0.4);--th-sys-t:rgba(225,230,255,0.8);
  --th-acc-bg:rgba(160,170,255,0.12);--th-acc-b:rgba(160,170,255,0.4);--th-acc-t:#c9d2ff;
  --th-btn:linear-gradient(135deg,#7c8ce0,#a5b0ff);
  --th-back-bg:rgba(12,16,36,0.92);--th-back-b:rgba(150,170,255,0.5);--th-back-t:#d6dcff;--th-back-hov:rgba(150,170,255,0.18);
}
.theme-archie{
  --th-hdr:#2a0e0e;--th-hdr-b:rgba(226,109,90,0.4);
  --th-frame:linear-gradient(165deg,#3a0e0e 0%,#5a1a14 40%,#7a2418 62%,#4a120e 100%);
  --th-star:rgba(255,190,170,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(255,180,150,0.9),rgba(226,109,90,0.35) 42%,rgba(220,90,70,0) 70%);
  --th-kali:rgba(255,235,225,0.07);--th-kali-b:rgba(255,210,195,0.13);
  --th-user:linear-gradient(135deg,rgba(226,109,90,0.32),rgba(200,90,75,0.22));--th-user-b:rgba(226,109,90,0.45);
  --th-sys:rgba(226,109,90,0.14);--th-sys-b:rgba(226,109,90,0.4);--th-sys-t:rgba(255,235,225,0.8);
  --th-acc-bg:rgba(226,109,90,0.12);--th-acc-b:rgba(226,109,90,0.4);--th-acc-t:#ffcfc0;
  --th-btn:linear-gradient(135deg,#e26d5a,#f59b84);
  --th-back-bg:rgba(42,14,14,0.92);--th-back-b:rgba(226,109,90,0.5);--th-back-t:#ffd8c8;--th-back-hov:rgba(226,109,90,0.18);
}
.theme-bella{
  --th-hdr:#2a0d1c;--th-hdr-b:rgba(212,93,154,0.4);
  --th-frame:linear-gradient(165deg,#3a1026 0%,#5a1a38 40%,#7a2248 62%,#4a102c 100%);
  --th-star:rgba(255,190,220,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(255,190,215,0.9),rgba(212,93,154,0.35) 42%,rgba(200,80,140,0) 70%);
  --th-kali:rgba(255,235,245,0.07);--th-kali-b:rgba(255,210,230,0.13);
  --th-user:linear-gradient(135deg,rgba(212,93,154,0.32),rgba(200,80,140,0.22));--th-user-b:rgba(212,93,154,0.45);
  --th-sys:rgba(212,93,154,0.14);--th-sys-b:rgba(212,93,154,0.4);--th-sys-t:rgba(255,235,245,0.8);
  --th-acc-bg:rgba(212,93,154,0.12);--th-acc-b:rgba(212,93,154,0.4);--th-acc-t:#ffd0e4;
  --th-btn:linear-gradient(135deg,#d45d9a,#f08fc0);
  --th-back-bg:rgba(42,13,28,0.92);--th-back-b:rgba(212,93,154,0.5);--th-back-t:#ffd8e6;--th-back-hov:rgba(212,93,154,0.18);
}
.theme-bobby{
  --th-hdr:#0e2417;--th-hdr-b:rgba(74,158,106,0.4);
  --th-frame:linear-gradient(165deg,#122a1a 0%,#1e3d28 40%,#2f5a3a 62%,#1a2f20 100%);
  --th-star:rgba(160,220,175,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(175,235,185,0.9),rgba(74,158,106,0.35) 42%,rgba(60,145,95,0) 70%);
  --th-kali:rgba(230,250,235,0.07);--th-kali-b:rgba(210,240,220,0.13);
  --th-user:linear-gradient(135deg,rgba(74,158,106,0.32),rgba(60,140,90,0.22));--th-user-b:rgba(74,158,106,0.45);
  --th-sys:rgba(74,158,106,0.14);--th-sys-b:rgba(74,158,106,0.4);--th-sys-t:rgba(230,250,235,0.8);
  --th-acc-bg:rgba(74,158,106,0.12);--th-acc-b:rgba(74,158,106,0.4);--th-acc-t:#cbeccc;
  --th-btn:linear-gradient(135deg,#4a9e6a,#8fd0a0);
  --th-back-bg:rgba(14,36,23,0.92);--th-back-b:rgba(74,158,106,0.5);--th-back-t:#d5f0d8;--th-back-hov:rgba(74,158,106,0.18);
}
.theme-bruno{
  --th-hdr:#0c1724;--th-hdr-b:rgba(95,168,211,0.4);
  --th-frame:linear-gradient(165deg,#101c2c 0%,#1c2f45 40%,#2f4564 62%,#1a2636 100%);
  --th-star:rgba(185,215,240,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(200,230,255,0.9),rgba(95,168,211,0.35) 42%,rgba(80,155,200,0) 70%);
  --th-kali:rgba(230,240,250,0.07);--th-kali-b:rgba(210,225,245,0.13);
  --th-user:linear-gradient(135deg,rgba(95,168,211,0.32),rgba(90,150,195,0.22));--th-user-b:rgba(95,168,211,0.45);
  --th-sys:rgba(95,168,211,0.14);--th-sys-b:rgba(95,168,211,0.4);--th-sys-t:rgba(230,240,250,0.8);
  --th-acc-bg:rgba(95,168,211,0.12);--th-acc-b:rgba(95,168,211,0.4);--th-acc-t:#cbe6f5;
  --th-btn:linear-gradient(135deg,#5fa8d3,#9cc8e6);
  --th-back-bg:rgba(12,23,36,0.92);--th-back-b:rgba(95,168,211,0.5);--th-back-t:#d6eaf5;--th-back-hov:rgba(95,168,211,0.18);
}
.theme-buddy{
  --th-hdr:#241a0e;--th-hdr-b:rgba(217,154,61,0.4);
  --th-frame:linear-gradient(165deg,#2e1f12 0%,#47311a 40%,#644a24 62%,#382718 100%);
  --th-star:rgba(255,220,160,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(255,225,165,0.9),rgba(217,154,61,0.35) 42%,rgba(200,140,50,0) 70%);
  --th-kali:rgba(255,245,230,0.07);--th-kali-b:rgba(250,225,190,0.13);
  --th-user:linear-gradient(135deg,rgba(217,154,61,0.32),rgba(190,135,55,0.22));--th-user-b:rgba(217,154,61,0.45);
  --th-sys:rgba(217,154,61,0.14);--th-sys-b:rgba(217,154,61,0.4);--th-sys-t:rgba(255,245,230,0.8);
  --th-acc-bg:rgba(217,154,61,0.12);--th-acc-b:rgba(217,154,61,0.4);--th-acc-t:#fbe3b8;
  --th-btn:linear-gradient(135deg,#d99a3d,#f0c37e);
  --th-back-bg:rgba(36,26,14,0.92);--th-back-b:rgba(217,154,61,0.5);--th-back-t:#ffecc8;--th-back-hov:rgba(217,154,61,0.18);
}
.theme-buster{
  --th-hdr:#12220c;--th-hdr-b:rgba(122,176,74,0.4);
  --th-frame:linear-gradient(165deg,#162812 0%,#24401c 40%,#3a5f2c 62%,#203318 100%);
  --th-star:rgba(190,230,140,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(205,240,155,0.9),rgba(122,176,74,0.35) 42%,rgba(110,165,65,0) 70%);
  --th-kali:rgba(240,250,230,0.07);--th-kali-b:rgba(225,245,210,0.13);
  --th-user:linear-gradient(135deg,rgba(122,176,74,0.32),rgba(110,160,65,0.22));--th-user-b:rgba(122,176,74,0.45);
  --th-sys:rgba(122,176,74,0.14);--th-sys-b:rgba(122,176,74,0.4);--th-sys-t:rgba(240,250,230,0.8);
  --th-acc-bg:rgba(122,176,74,0.12);--th-acc-b:rgba(122,176,74,0.4);--th-acc-t:#dceec0;
  --th-btn:linear-gradient(135deg,#7ab04a,#a8d188);
  --th-back-bg:rgba(18,34,12,0.92);--th-back-b:rgba(122,176,74,0.5);--th-back-t:#e5f2c8;--th-back-hov:rgba(122,176,74,0.18);
}
.theme-chantal{
  --th-hdr:#1c1226;--th-hdr-b:rgba(143,123,184,0.4);
  --th-frame:linear-gradient(165deg,#24162e 0%,#3a2244 40%,#5a336e 62%,#2c1a3a 100%);
  --th-star:rgba(215,195,240,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(225,200,250,0.9),rgba(143,123,184,0.35) 42%,rgba(130,110,175,0) 70%);
  --th-kali:rgba(245,240,255,0.07);--th-kali-b:rgba(230,220,250,0.13);
  --th-user:linear-gradient(135deg,rgba(143,123,184,0.32),rgba(130,110,170,0.22));--th-user-b:rgba(143,123,184,0.45);
  --th-sys:rgba(143,123,184,0.14);--th-sys-b:rgba(143,123,184,0.4);--th-sys-t:rgba(245,240,255,0.8);
  --th-acc-bg:rgba(143,123,184,0.12);--th-acc-b:rgba(143,123,184,0.4);--th-acc-t:#ddd0f5;
  --th-btn:linear-gradient(135deg,#8f7bb8,#c3b5e0);
  --th-back-bg:rgba(28,18,38,0.92);--th-back-b:rgba(143,123,184,0.5);--th-back-t:#e6dbf5;--th-back-hov:rgba(143,123,184,0.18);
}
.theme-coco{
  --th-hdr:#240d1a;--th-hdr-b:rgba(212,93,126,0.4);
  --th-frame:linear-gradient(165deg,#301022 0%,#4a1830 40%,#66223f 62%,#381426 100%);
  --th-star:rgba(255,195,215,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(255,200,220,0.9),rgba(212,93,126,0.35) 42%,rgba(200,80,115,0) 70%);
  --th-kali:rgba(255,238,242,0.07);--th-kali-b:rgba(255,214,226,0.13);
  --th-user:linear-gradient(135deg,rgba(212,93,126,0.32),rgba(200,82,118,0.22));--th-user-b:rgba(212,93,126,0.45);
  --th-sys:rgba(212,93,126,0.14);--th-sys-b:rgba(212,93,126,0.4);--th-sys-t:rgba(255,238,242,0.8);
  --th-acc-bg:rgba(212,93,126,0.12);--th-acc-b:rgba(212,93,126,0.4);--th-acc-t:#ffd5e0;
  --th-btn:linear-gradient(135deg,#d45d7e,#f09cba);
  --th-back-bg:rgba(36,13,26,0.92);--th-back-b:rgba(212,93,126,0.5);--th-back-t:#ffdce6;--th-back-hov:rgba(212,93,126,0.18);
}
.theme-dash{
  --th-hdr:#241408;--th-hdr-b:rgba(192,90,46,0.4);
  --th-frame:linear-gradient(165deg,#30180b 0%,#4a2312 40%,#66341c 62%,#382015 100%);
  --th-star:rgba(255,210,165,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(255,215,170,0.9),rgba(192,90,46,0.35) 42%,rgba(180,82,42,0) 70%);
  --th-kali:rgba(255,245,235,0.07);--th-kali-b:rgba(250,220,200,0.13);
  --th-user:linear-gradient(135deg,rgba(192,90,46,0.32),rgba(175,82,40,0.22));--th-user-b:rgba(192,90,46,0.45);
  --th-sys:rgba(192,90,46,0.14);--th-sys-b:rgba(192,90,46,0.4);--th-sys-t:rgba(255,245,235,0.8);
  --th-acc-bg:rgba(192,90,46,0.12);--th-acc-b:rgba(192,90,46,0.4);--th-acc-t:#ffd2b8;
  --th-btn:linear-gradient(135deg,#c05a2e,#f09a68);
  --th-back-bg:rgba(36,20,8,0.92);--th-back-b:rgba(192,90,46,0.5);--th-back-t:#ffdcbc;--th-back-hov:rgba(192,90,46,0.18);
}
.theme-flipper{
  --th-hdr:#0c1e1e;--th-hdr-b:rgba(63,181,176,0.4);
  --th-frame:linear-gradient(165deg,#122626 0%,#1c3a3a 40%,#2f5a58 62%,#1a3030 100%);
  --th-star:rgba(170,225,222,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(180,235,232,0.9),rgba(63,181,176,0.35) 42%,rgba(55,170,165,0) 70%);
  --th-kali:rgba(230,250,250,0.07);--th-kali-b:rgba(210,240,238,0.13);
  --th-user:linear-gradient(135deg,rgba(63,181,176,0.32),rgba(58,170,165,0.22));--th-user-b:rgba(63,181,176,0.45);
  --th-sys:rgba(63,181,176,0.14);--th-sys-b:rgba(63,181,176,0.4);--th-sys-t:rgba(230,250,250,0.8);
  --th-acc-bg:rgba(63,181,176,0.12);--th-acc-b:rgba(63,181,176,0.4);--th-acc-t:#c8ecea;
  --th-btn:linear-gradient(135deg,#3fb5b0,#8fd8d4);
  --th-back-bg:rgba(12,30,30,0.92);--th-back-b:rgba(63,181,176,0.5);--th-back-t:#d0f0ee;--th-back-hov:rgba(63,181,176,0.18);
}
.theme-flora{
  --th-hdr:#0e2212;--th-hdr-b:rgba(95,174,110,0.4);
  --th-frame:linear-gradient(165deg,#142a18 0%,#1e4024 40%,#2f5f38 62%,#1a3020 100%);
  --th-star:rgba(165,225,175,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(180,240,190,0.9),rgba(95,174,110,0.35) 42%,rgba(82,155,95,0) 70%);
  --th-kali:rgba(230,250,235,0.07);--th-kali-b:rgba(212,240,218,0.13);
  --th-user:linear-gradient(135deg,rgba(95,174,110,0.32),rgba(84,160,100,0.22));--th-user-b:rgba(95,174,110,0.45);
  --th-sys:rgba(95,174,110,0.14);--th-sys-b:rgba(95,174,110,0.4);--th-sys-t:rgba(230,250,235,0.8);
  --th-acc-bg:rgba(95,174,110,0.12);--th-acc-b:rgba(95,174,110,0.4);--th-acc-t:#c8ebce;
  --th-btn:linear-gradient(135deg,#5fae6e,#9ad4a4);
  --th-back-bg:rgba(14,34,18,0.92);--th-back-b:rgba(95,174,110,0.5);--th-back-t:#d2f0d6;--th-back-hov:rgba(95,174,110,0.18);
}
.theme-giselle{
  --th-hdr:#221709;--th-hdr-b:rgba(176,143,74,0.4);
  --th-frame:linear-gradient(165deg,#2c1d0d 0%,#452e12 40%,#64451c 62%,#37260f 100%);
  --th-star:rgba(240,220,160,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(250,225,165,0.9),rgba(176,143,74,0.35) 42%,rgba(160,130,65,0) 70%);
  --th-kali:rgba(255,248,230,0.07);--th-kali-b:rgba(245,230,190,0.13);
  --th-user:linear-gradient(135deg,rgba(176,143,74,0.32),rgba(160,130,68,0.22));--th-user-b:rgba(176,143,74,0.45);
  --th-sys:rgba(176,143,74,0.14);--th-sys-b:rgba(176,143,74,0.4);--th-sys-t:rgba(255,248,230,0.8);
  --th-acc-bg:rgba(176,143,74,0.12);--th-acc-b:rgba(176,143,74,0.4);--th-acc-t:#f2dfb8;
  --th-btn:linear-gradient(135deg,#b08f4a,#d8c487);
  --th-back-bg:rgba(34,23,9,0.92);--th-back-b:rgba(176,143,74,0.5);--th-back-t:#faecc4;--th-back-hov:rgba(176,143,74,0.18);
}
.theme-gloria{
  --th-hdr:#241019;--th-hdr-b:rgba(194,90,122,0.4);
  --th-frame:linear-gradient(165deg,#301424 0%,#4a1c30 40%,#662442 62%,#38182c 100%);
  --th-star:rgba(255,200,218,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(255,205,222,0.9),rgba(194,90,122,0.35) 42%,rgba(185,82,114,0) 70%);
  --th-kali:rgba(255,240,245,0.07);--th-kali-b:rgba(255,218,230,0.13);
  --th-user:linear-gradient(135deg,rgba(194,90,122,0.32),rgba(184,82,115,0.22));--th-user-b:rgba(194,90,122,0.45);
  --th-sys:rgba(194,90,122,0.14);--th-sys-b:rgba(194,90,122,0.4);--th-sys-t:rgba(255,240,245,0.8);
  --th-acc-bg:rgba(194,90,122,0.12);--th-acc-b:rgba(194,90,122,0.4);--th-acc-t:#ffd5e0;
  --th-btn:linear-gradient(135deg,#c25a7a,#f09cb6);
  --th-back-bg:rgba(36,16,25,0.92);--th-back-b:rgba(194,90,122,0.5);--th-back-t:#ffdee8;--th-back-hov:rgba(194,90,122,0.18);
}
.theme-hector{
  --th-hdr:#0e1526;--th-hdr-b:rgba(63,90,143,0.4);
  --th-frame:linear-gradient(165deg,#12203a 0%,#1c2f4a 40%,#2f4466 62%,#162438 100%);
  --th-star:rgba(190,205,235,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(205,220,250,0.9),rgba(63,90,143,0.35) 42%,rgba(58,82,135,0) 70%);
  --th-kali:rgba(235,240,250,0.07);--th-kali-b:rgba(215,225,245,0.13);
  --th-user:linear-gradient(135deg,rgba(63,90,143,0.32),rgba(58,82,132,0.22));--th-user-b:rgba(63,90,143,0.45);
  --th-sys:rgba(63,90,143,0.14);--th-sys-b:rgba(63,90,143,0.4);--th-sys-t:rgba(235,240,250,0.8);
  --th-acc-bg:rgba(63,90,143,0.12);--th-acc-b:rgba(63,90,143,0.4);--th-acc-t:#d4dcf0;
  --th-btn:linear-gradient(135deg,#3f5a8f,#9cb8e0);
  --th-back-bg:rgba(14,21,38,0.92);--th-back-b:rgba(63,90,143,0.5);--th-back-t:#dde4f5;--th-back-hov:rgba(63,90,143,0.18);
}
.theme-leo{
  --th-hdr:#240e0a;--th-hdr-b:rgba(194,74,58,0.4);
  --th-frame:linear-gradient(165deg,#30120a 0%,#4a1a10 40%,#662418 62%,#38160f 100%);
  --th-star:rgba(255,205,190,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(255,210,195,0.9),rgba(194,74,58,0.35) 42%,rgba(185,68,52,0) 70%);
  --th-kali:rgba(255,242,238,0.07);--th-kali-b:rgba(255,222,212,0.13);
  --th-user:linear-gradient(135deg,rgba(194,74,58,0.32),rgba(184,70,55,0.22));--th-user-b:rgba(194,74,58,0.45);
  --th-sys:rgba(194,74,58,0.14);--th-sys-b:rgba(194,74,58,0.4);--th-sys-t:rgba(255,242,238,0.8);
  --th-acc-bg:rgba(194,74,58,0.12);--th-acc-b:rgba(194,74,58,0.4);--th-acc-t:#ffd0c4;
  --th-btn:linear-gradient(135deg,#c24a3a,#f09c8a);
  --th-back-bg:rgba(36,14,10,0.92);--th-back-b:rgba(194,74,58,0.5);--th-back-t:#ffdccd;--th-back-hov:rgba(194,74,58,0.18);
}
.theme-lola{
  --th-hdr:#201026;--th-hdr-b:rgba(176,90,160,0.4);
  --th-frame:linear-gradient(165deg,#2a142e 0%,#401a44 40%,#5c2860 62%,#301a34 100%);
  --th-star:rgba(240,200,235,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(250,205,240,0.9),rgba(176,90,160,0.35) 42%,rgba(165,84,150,0) 70%);
  --th-kali:rgba(250,242,250,0.07);--th-kali-b:rgba(242,222,240,0.13);
  --th-user:linear-gradient(135deg,rgba(176,90,160,0.32),rgba(162,84,148,0.22));--th-user-b:rgba(176,90,160,0.45);
  --th-sys:rgba(176,90,160,0.14);--th-sys-b:rgba(176,90,160,0.4);--th-sys-t:rgba(250,242,250,0.8);
  --th-acc-bg:rgba(176,90,160,0.12);--th-acc-b:rgba(176,90,160,0.4);--th-acc-t:#ecd0e8;
  --th-btn:linear-gradient(135deg,#b05aa0,#e0a0d4);
  --th-back-bg:rgba(32,16,38,0.92);--th-back-b:rgba(176,90,160,0.5);--th-back-t:#f0dcEc;--th-back-hov:rgba(176,90,160,0.18);
}
.theme-maya{
  --th-hdr:#241b0a;--th-hdr-b:rgba(224,184,90,0.4);
  --th-frame:linear-gradient(165deg,#2e240e 0%,#45361a 40%,#644a24 62%,#383018 100%);
  --th-star:rgba(255,230,170,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(255,235,175,0.9),rgba(224,184,90,0.35) 42%,rgba(210,170,80,0) 70%);
  --th-kali:rgba(255,250,240,0.07);--th-kali-b:rgba(250,238,210,0.13);
  --th-user:linear-gradient(135deg,rgba(224,184,90,0.32),rgba(205,168,82,0.22));--th-user-b:rgba(224,184,90,0.45);
  --th-sys:rgba(224,184,90,0.14);--th-sys-b:rgba(224,184,90,0.4);--th-sys-t:rgba(255,250,240,0.8);
  --th-acc-bg:rgba(224,184,90,0.12);--th-acc-b:rgba(224,184,90,0.4);--th-acc-t:#f4e6c0;
  --th-btn:linear-gradient(135deg,#e0b85a,#f0d890);
  --th-back-bg:rgba(36,27,10,0.92);--th-back-b:rgba(224,184,90,0.5);--th-back-t:#faeecc;--th-back-hov:rgba(224,184,90,0.18);
}
.theme-mila{
  --th-hdr:#0e2214;--th-hdr-b:rgba(90,160,95,0.4);
  --th-frame:linear-gradient(165deg,#142a18 0%,#1d4020 40%,#2d5c30 62%,#183020 100%);
  --th-star:rgba(160,225,165,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(175,240,180,0.9),rgba(90,160,95,0.35) 42%,rgba(80,150,85,0) 70%);
  --th-kali:rgba(230,250,232,0.07);--th-kali-b:rgba(210,240,214,0.13);
  --th-user:linear-gradient(135deg,rgba(90,160,95,0.32),rgba(82,150,88,0.22));--th-user-b:rgba(90,160,95,0.45);
  --th-sys:rgba(90,160,95,0.14);--th-sys-b:rgba(90,160,95,0.4);--th-sys-t:rgba(230,250,232,0.8);
  --th-acc-bg:rgba(90,160,95,0.12);--th-acc-b:rgba(90,160,95,0.4);--th-acc-t:#ccecd0;
  --th-btn:linear-gradient(135deg,#5aa05f,#9ad39f);
  --th-back-bg:rgba(14,34,20,0.92);--th-back-b:rgba(90,160,95,0.5);--th-back-t:#d4f0d8;--th-back-hov:rgba(90,160,95,0.18);
}
.theme-oliver{
  --th-hdr:#101a26;--th-hdr-b:rgba(143,162,194,0.4);
  --th-frame:linear-gradient(165deg,#16222e 0%,#20324a 40%,#32476b 62%,#1a2636 100%);
  --th-star:rgba(195,210,235,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(210,225,250,0.9),rgba(143,162,194,0.35) 42%,rgba(130,150,185,0) 70%);
  --th-kali:rgba(238,243,250,0.07);--th-kali-b:rgba(218,228,245,0.13);
  --th-user:linear-gradient(135deg,rgba(143,162,194,0.32),rgba(132,150,182,0.22));--th-user-b:rgba(143,162,194,0.45);
  --th-sys:rgba(143,162,194,0.14);--th-sys-b:rgba(143,162,194,0.4);--th-sys-t:rgba(238,243,250,0.8);
  --th-acc-bg:rgba(143,162,194,0.12);--th-acc-b:rgba(143,162,194,0.4);--th-acc-t:#d8e0f0;
  --th-btn:linear-gradient(135deg,#8fa2c2,#c2d0e8);
  --th-back-bg:rgba(16,26,38,0.92);--th-back-b:rgba(143,162,194,0.5);--th-back-t:#e0e8f5;--th-back-hov:rgba(143,162,194,0.18);
}
.theme-pepe{
  --th-hdr:#0c1a24;--th-hdr-b:rgba(47,158,194,0.4);
  --th-frame:linear-gradient(165deg,#0e2230 0%,#143850 40%,#1f587a 62%,#122838 100%);
  --th-star:rgba(165,215,240,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(180,230,255,0.9),rgba(47,158,194,0.35) 42%,rgba(42,145,180,0) 70%);
  --th-kali:rgba(235,248,250,0.07);--th-kali-b:rgba(215,238,245,0.13);
  --th-user:linear-gradient(135deg,rgba(47,158,194,0.32),rgba(45,145,180,0.22));--th-user-b:rgba(47,158,194,0.45);
  --th-sys:rgba(47,158,194,0.14);--th-sys-b:rgba(47,158,194,0.4);--th-sys-t:rgba(235,248,250,0.8);
  --th-acc-bg:rgba(47,158,194,0.12);--th-acc-b:rgba(47,158,194,0.4);--th-acc-t:#c4e6f5;
  --th-btn:linear-gradient(135deg,#2f9ec2,#7ecede);
  --th-back-bg:rgba(12,26,36,0.92);--th-back-b:rgba(47,158,194,0.5);--th-back-t:#cdecF5;--th-back-hov:rgba(47,158,194,0.18);
}
.theme-pipo{
  --th-hdr:#26120e;--th-hdr-b:rgba(224,96,90,0.4);
  --th-frame:linear-gradient(165deg,#321610 0%,#4c1e18 40%,#6b2a24 62%,#3c1814 100%);
  --th-star:rgba(255,200,190,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(255,205,195,0.9),rgba(224,96,90,0.35) 42%,rgba(210,90,82,0) 70%);
  --th-kali:rgba(255,242,240,0.07);--th-kali-b:rgba(255,220,215,0.13);
  --th-user:linear-gradient(135deg,rgba(224,96,90,0.32),rgba(205,88,82,0.22));--th-user-b:rgba(224,96,90,0.45);
  --th-sys:rgba(224,96,90,0.14);--th-sys-b:rgba(224,96,90,0.4);--th-sys-t:rgba(255,242,240,0.8);
  --th-acc-bg:rgba(224,96,90,0.12);--th-acc-b:rgba(224,96,90,0.4);--th-acc-t:#ffd0cc;
  --th-btn:linear-gradient(135deg,#e0605a,#f09c96);
  --th-back-bg:rgba(38,18,14,0.92);--th-back-b:rgba(224,96,90,0.5);--th-back-t:#ffdcd8;--th-back-hov:rgba(224,96,90,0.18);
}
.theme-quill{
  --th-hdr:#221608;--th-hdr-b:rgba(181,106,58,0.4);
  --th-frame:linear-gradient(165deg,#2c1b0b 0%,#452b14 40%,#644024 62%,#382313 100%);
  --th-star:rgba(235,205,165,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(245,215,175,0.9),rgba(181,106,58,0.35) 42%,rgba(168,98,52,0) 70%);
  --th-kali:rgba(255,248,238,0.07);--th-kali-b:rgba(245,230,205,0.13);
  --th-user:linear-gradient(135deg,rgba(181,106,58,0.32),rgba(165,98,54,0.22));--th-user-b:rgba(181,106,58,0.45);
  --th-sys:rgba(181,106,58,0.14);--th-sys-b:rgba(181,106,58,0.4);--th-sys-t:rgba(255,248,238,0.8);
  --th-acc-bg:rgba(181,106,58,0.12);--th-acc-b:rgba(181,106,58,0.4);--th-acc-t:#f0dcc0;
  --th-btn:linear-gradient(135deg,#b56a3a,#e0aa78);
  --th-back-bg:rgba(34,22,8,0.92);--th-back-b:rgba(181,106,58,0.5);--th-back-t:#f4e8c8;--th-back-hov:rgba(181,106,58,0.18);
}
.theme-rider{
  --th-hdr:#0e2218;--th-hdr-b:rgba(63,158,122,0.4);
  --th-frame:linear-gradient(165deg,#122a1c 0%,#1c4030 40%,#2c5b44 62%,#183224 100%);
  --th-star:rgba(155,225,195,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(170,240,205,0.9),rgba(63,158,122,0.35) 42%,rgba(58,145,112,0) 70%);
  --th-kali:rgba(230,250,242,0.07);--th-kali-b:rgba(210,240,228,0.13);
  --th-user:linear-gradient(135deg,rgba(63,158,122,0.32),rgba(58,145,112,0.22));--th-user-b:rgba(63,158,122,0.45);
  --th-sys:rgba(63,158,122,0.14);--th-sys-b:rgba(63,158,122,0.4);--th-sys-t:rgba(230,250,242,0.8);
  --th-acc-bg:rgba(63,158,122,0.12);--th-acc-b:rgba(63,158,122,0.4);--th-acc-t:#c6ecda;
  --th-btn:linear-gradient(135deg,#3f9e7a,#90d8ba);
  --th-back-bg:rgba(14,34,24,0.92);--th-back-b:rgba(63,158,122,0.5);--th-back-t:#d0f0e0;--th-back-hov:rgba(63,158,122,0.18);
}
.theme-rocky{
  --th-hdr:#1e180c;--th-hdr-b:rgba(138,116,79,0.4);
  --th-frame:linear-gradient(165deg,#28200f 0%,#3f3319 40%,#5c4c2c 62%,#362c18 100%);
  --th-star:rgba(225,210,175,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(235,220,185,0.9),rgba(138,116,79,0.35) 42%,rgba(128,106,72,0) 70%);
  --th-kali:rgba(250,246,238,0.07);--th-kali-b:rgba(240,230,205,0.13);
  --th-user:linear-gradient(135deg,rgba(138,116,79,0.32),rgba(126,106,74,0.22));--th-user-b:rgba(138,116,79,0.45);
  --th-sys:rgba(138,116,79,0.14);--th-sys-b:rgba(138,116,79,0.4);--th-sys-t:rgba(250,246,238,0.8);
  --th-acc-bg:rgba(138,116,79,0.12);--th-acc-b:rgba(138,116,79,0.4);--th-acc-t:#e4d8b8;
  --th-btn:linear-gradient(135deg,#8a744f,#c4b58a);
  --th-back-bg:rgba(30,24,12,0.92);--th-back-b:rgba(138,116,79,0.5);--th-back-t:#ece0c0;--th-back-hov:rgba(138,116,79,0.18);
}
.theme-secret{
  --th-hdr:#221026;--th-hdr-b:rgba(122,74,158,0.4);
  --th-frame:linear-gradient(165deg,#2c142e 0%,#452044 40%,#63305e 62%,#38203a 100%);
  --th-star:rgba(215,185,235,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(225,195,245,0.9),rgba(122,74,158,0.35) 42%,rgba(115,68,150,0) 70%);
  --th-kali:rgba(247,240,250,0.07);--th-kali-b:rgba(232,218,242,0.13);
  --th-user:linear-gradient(135deg,rgba(122,74,158,0.32),rgba(114,70,148,0.22));--th-user-b:rgba(122,74,158,0.45);
  --th-sys:rgba(122,74,158,0.14);--th-sys-b:rgba(122,74,158,0.4);--th-sys-t:rgba(247,240,250,0.8);
  --th-acc-bg:rgba(122,74,158,0.12);--th-acc-b:rgba(122,74,158,0.4);--th-acc-t:#e6d0f0;
  --th-btn:linear-gradient(135deg,#7a4a9e,#c4a0d8);
  --th-back-bg:rgba(34,16,38,0.92);--th-back-b:rgba(122,74,158,0.5);--th-back-t:#eedcf2;--th-back-hov:rgba(122,74,158,0.18);
}
.theme-sky{
  --th-hdr:#0c1726;--th-hdr-b:rgba(74,143,194,0.4);
  --th-frame:linear-gradient(165deg,#101c30 0%,#16264a 40%,#254469 62%,#12243a 100%);
  --th-star:rgba(175,210,240,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(190,225,255,0.9),rgba(74,143,194,0.35) 42%,rgba(66,130,180,0) 70%);
  --th-kali:rgba(235,245,250,0.07);--th-kali-b:rgba(215,232,245,0.13);
  --th-user:linear-gradient(135deg,rgba(74,143,194,0.32),rgba(68,134,184,0.22));--th-user-b:rgba(74,143,194,0.45);
  --th-sys:rgba(74,143,194,0.14);--th-sys-b:rgba(74,143,194,0.4);--th-sys-t:rgba(235,245,250,0.8);
  --th-acc-bg:rgba(74,143,194,0.12);--th-acc-b:rgba(74,143,194,0.4);--th-acc-t:#cfe2f5;
  --th-btn:linear-gradient(135deg,#4a8fc2,#9cc4e6);
  --th-back-bg:rgba(12,23,38,0.92);--th-back-b:rgba(74,143,194,0.5);--th-back-t:#d6e8f5;--th-back-hov:rgba(74,143,194,0.18);
}
.theme-sophia{
  --th-hdr:#241709;--th-hdr-b:rgba(194,154,90,0.4);
  --th-frame:linear-gradient(165deg,#2e1d0d 0%,#452c14 40%,#64421f 62%,#382816 100%);
  --th-star:rgba(245,225,170,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(250,230,175,0.9),rgba(194,154,90,0.35) 42%,rgba(180,140,80,0) 70%);
  --th-kali:rgba(255,250,240,0.07);--th-kali-b:rgba(245,234,210,0.13);
  --th-user:linear-gradient(135deg,rgba(194,154,90,0.32),rgba(176,140,82,0.22));--th-user-b:rgba(194,154,90,0.45);
  --th-sys:rgba(194,154,90,0.14);--th-sys-b:rgba(194,154,90,0.4);--th-sys-t:rgba(255,250,240,0.8);
  --th-acc-bg:rgba(194,154,90,0.12);--th-acc-b:rgba(194,154,90,0.4);--th-acc-t:#f2e2c0;
  --th-btn:linear-gradient(135deg,#c29a5a,#e8ce94);
  --th-back-bg:rgba(36,23,9,0.92);--th-back-b:rgba(194,154,90,0.5);--th-back-t:#f8ecc8;--th-back-hov:rgba(194,154,90,0.18);
}
.theme-stella{
  --th-hdr:#24101c;--th-hdr-b:rgba(212,106,143,0.4);
  --th-frame:linear-gradient(165deg,#301424 0%,#4a1c30 40%,#66243f 62%,#381826 100%);
  --th-star:rgba(255,200,220,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(255,205,225,0.9),rgba(212,106,143,0.35) 42%,rgba(200,95,132,0) 70%);
  --th-kali:rgba(255,240,244,0.07);--th-kali-b:rgba(255,216,228,0.13);
  --th-user:linear-gradient(135deg,rgba(212,106,143,0.32),rgba(198,96,132,0.22));--th-user-b:rgba(212,106,143,0.45);
  --th-sys:rgba(212,106,143,0.14);--th-sys-b:rgba(212,106,143,0.4);--th-sys-t:rgba(255,240,244,0.8);
  --th-acc-bg:rgba(212,106,143,0.12);--th-acc-b:rgba(212,106,143,0.4);--th-acc-t:#ffd5e0;
  --th-btn:linear-gradient(135deg,#d46a8f,#f2a8c0);
  --th-back-bg:rgba(36,16,28,0.92);--th-back-b:rgba(212,106,143,0.5);--th-back-t:#ffdce6;--th-back-hov:rgba(212,106,143,0.18);
}
.theme-toro{
  --th-hdr:#10151e;--th-hdr-b:rgba(160,170,185,0.4);
  --th-frame:linear-gradient(165deg,#141a26 0%,#1c2436 40%,#2c3a54 62%,#182030 100%);
  --th-star:rgba(200,210,225,0.9);
  --th-orb:radial-gradient(circle at 50% 62%,rgba(210,222,240,0.9),rgba(150,160,180,0.35) 42%,rgba(140,150,168,0) 70%);
  --th-kali:rgba(238,242,248,0.07);--th-kali-b:rgba(218,228,240,0.13);
  --th-user:linear-gradient(135deg,rgba(148,158,176,0.32),rgba(138,146,164,0.22));--th-user-b:rgba(150,160,180,0.45);
  --th-sys:rgba(150,160,180,0.14);--th-sys-b:rgba(150,160,180,0.4);--th-sys-t:rgba(238,242,248,0.8);
  --th-acc-bg:rgba(150,160,180,0.12);--th-acc-b:rgba(150,160,180,0.4);--th-acc-t:#d8dfec;
  --th-btn:linear-gradient(135deg,#6e7f9c,#a8b6cf);
  --th-back-bg:rgba(16,21,30,0.92);--th-back-b:rgba(160,170,185,0.5);--th-back-t:#e0e6f0;--th-back-hov:rgba(150,160,180,0.18);
}

#screen-main[class*="theme-"] .main-footer{background:var(--th-hdr)}
#screen-main[class*="theme-"] .mic-btn{background:var(--th-hdr);box-shadow:0 0 0 6px var(--th-hdr);border-color:var(--th-hdr-b)}
#screen-main[class*="theme-"] .avatar-dot{border-color:var(--th-hdr)}
#screen-main[class*="theme-"] .msg-kali{background:var(--th-kali);border-color:var(--th-kali-b);color:#f5f0ff}
#screen-main[class*="theme-"] .msg-user{background:var(--th-user);border-color:var(--th-user-b)}
#screen-main[class*="theme-"] .msg-system{background:var(--th-sys);border-color:var(--th-sys-b);color:var(--th-sys-t)}
#screen-main[class*="theme-"] .back-to-host{background:var(--th-back-bg);border-color:var(--th-back-b);color:var(--th-back-t)}
#screen-main[class*="theme-"] .back-to-host:hover{background:var(--th-back-hov);border-color:var(--th-back-b)}
#screen-main[class*="theme-"] .tool-btn.active{background:var(--th-acc-bg);border-color:var(--th-acc-b);color:var(--th-acc-t)}
#screen-main[class*="theme-"] .pc-buy{background:var(--th-btn)}

/* ═══ 3D card-flip screen transition (lobby <-> expert room) ═══ */
.flip-card{position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;display:none;perspective:1400px;pointer-events:none}
.flip-card.on{display:block}
.flip-inner{position:absolute;top:0;left:0;right:0;bottom:0;transform-style:preserve-3d}
.flip-face{position:absolute;top:0;left:0;right:0;bottom:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-front{transform:rotateY(0deg)}
.flip-back{transform:rotateY(180deg)}
.flip-card.flipping .flip-inner{animation:cardFlip 0.9s cubic-bezier(0.35,0,0.15,1) forwards}
@keyframes cardFlip{from{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}
.product-card{position:relative;z-index:1;align-self:flex-end;margin-left:auto;width:min(88%,420px);background:linear-gradient(145deg,rgba(200,169,110,0.14),rgba(255,255,255,0.04));border:0.5px solid rgba(200,169,110,0.45);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;box-shadow:0 6px 24px rgba(0,0,0,0.25)}
.pc-name{font-size:15px;font-weight:600;color:var(--cream);line-height:1.4}
.pc-price{font-size:19px;font-weight:600;color:var(--gold-light)}
.pc-sentiment{font-size:12.5px;color:rgba(240,236,228,0.6);line-height:1.5}
.pc-buy{align-self:flex-start;margin-top:2px;padding:9px 16px;border-radius:12px;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#07100e;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer}
.pc-whisper{font-size:12.5px;color:#f3d48a;background:rgba(200,169,110,0.1);border:0.5px dashed rgba(200,169,110,0.5);border-radius:10px;padding:8px 10px;line-height:1.5}
.pc-substitute{font-size:12px;color:rgba(243,212,138,0.85);line-height:1.5}
.pc-disclaimer{font-size:10.5px;color:rgba(240,236,228,0.4);line-height:1.6;border-top:0.5px solid rgba(255,255,255,0.08);padding-top:8px}

/* ═══ Product Hub panel (separate screen, flipped in via #flipCard) ═══ */
.product-hub{display:none;position:relative;flex:1;min-height:0;width:100%;background:var(--navy-chat);overflow-y:auto;padding:18px 16px;flex-direction:column;gap:14px;z-index:10}
.product-hub.visible{display:flex}
#screen-main[class*="theme-"] .product-hub{background:var(--th-frame)}
.ph-back{align-self:flex-start;margin-bottom:4px}
.ph-body{display:flex;flex-direction:column;gap:10px}
.ph-name{font-size:20px;font-weight:700;color:var(--cream);line-height:1.4}
.ph-price{font-size:26px;font-weight:700;color:var(--gold-light)}
.ph-sentiment{font-size:13.5px;color:rgba(240,236,228,0.65);line-height:1.6}
.ph-whisper{font-size:13px;color:#f3d48a;background:rgba(200,169,110,0.1);border:0.5px dashed rgba(200,169,110,0.5);border-radius:10px;padding:10px 12px;line-height:1.6}
.ph-buy{align-self:flex-start;margin-top:6px;padding:12px 22px;border-radius:14px;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#07100e;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer}
.ph-disclaimer{font-size:11px;color:rgba(240,236,228,0.4);line-height:1.6;border-top:0.5px solid rgba(255,255,255,0.08);padding-top:10px;margin-top:8px}

/* ── Kai price-comparison groups (new — Phase 1 multi-model / multi-store view) ── */
.ph-model-group{display:flex;flex-direction:column;gap:8px;padding-bottom:14px;margin-bottom:4px;border-bottom:0.5px solid rgba(255,255,255,0.08)}
.ph-model-group:last-of-type{border-bottom:none}
.ph-model-title{font-size:17px;font-weight:700;color:var(--cream);line-height:1.4}
.ph-offer-list{display:flex;flex-direction:column;gap:8px}
.ph-offer-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,0.03);border:0.5px solid rgba(255,255,255,0.08);border-radius:12px;padding:10px 12px}
.ph-offer-store-col{display:flex;flex-direction:column;gap:3px;min-width:0}
.ph-offer-store{font-size:14px;font-weight:600;color:var(--cream)}
.ph-badge-trusted{font-size:11px;font-weight:600;color:#7fd99a;background:rgba(127,217,154,0.12);border-radius:8px;padding:2px 7px;align-self:flex-start}
.ph-offer-rating{font-size:11.5px;color:rgba(240,236,228,0.6)}
.ph-offer-price-col{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.ph-offer-price{font-size:16px;font-weight:700;color:var(--gold-light)}
.ph-offer-buy{font-size:12px;font-weight:600;color:var(--gold-light);text-decoration:none}
.ph-no-results{font-size:13px;color:rgba(240,236,228,0.5);padding:6px 0}
.ph-more-models-btn{align-self:center;margin-top:8px;padding:10px 20px;border-radius:14px;background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.15);color:var(--cream);font-size:13.5px;font-weight:600;cursor:pointer}
/* ═══ Candidate product picker (find_products, phase 1) — scrollable grid of real candidates ═══ */
.ph-candidates-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:6px}
.ph-candidate-card{display:flex;flex-direction:column;align-items:stretch;text-align:right;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.12);border-radius:14px;padding:8px;cursor:pointer;font-family:inherit}
.ph-candidate-card:active{background:rgba(255,255,255,0.1)}
.ph-candidate-img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:10px;background:rgba(255,255,255,0.06);margin-bottom:6px}
.ph-candidate-title{font-size:12.5px;color:var(--cream);line-height:1.4;max-height:4.2em;overflow:hidden;font-weight:500}
.ph-candidate-ref-price{font-size:13px;margin-top:6px;padding-top:6px;border-top:0.5px solid rgba(255,255,255,0.08)}
.ph-candidate-ref-price-label{color:rgba(240,236,228,0.5)}
.ph-candidate-ref-price-amount{color:#7fd99a;font-weight:700}
.ph-candidate-ref-price-missing{color:rgba(240,236,228,0.4);font-style:italic}

/* ── Kai per-model tabs (one model at a time, not a mixed scroll) ── */
.ph-model-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:2px}
.ph-model-tab{flex-shrink:0;padding:8px 14px;border-radius:12px;background:rgba(255,255,255,0.04);border:0.5px solid rgba(255,255,255,0.1);color:rgba(240,236,228,0.6);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.ph-model-tab-active{background:rgba(200,169,110,0.16);border-color:rgba(200,169,110,0.5);color:var(--gold-light)}
.ph-model-content{display:flex;flex-direction:column;gap:10px}
.ph-model-brand{font-size:12.5px;font-weight:600;color:rgba(240,236,228,0.5);margin-top:-4px}
.ph-model-prices-header{font-size:12px;font-weight:600;color:rgba(240,236,228,0.5);margin-top:6px;border-top:0.5px solid rgba(255,255,255,0.08);padding-top:10px}

/* ── Kai image gallery + spec sheet (shown before prices, per model) ── */
.ph-model-gallery{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.ph-model-image{width:120px;height:120px;object-fit:contain;border-radius:12px;background:rgba(255,255,255,0.04);border:0.5px solid rgba(255,255,255,0.08);flex-shrink:0}
.ph-model-specs{display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,0.03);border:0.5px solid rgba(255,255,255,0.08);border-radius:12px;padding:10px 12px}
.ph-spec-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px}
.ph-spec-key{color:rgba(240,236,228,0.5)}
.ph-spec-value{color:var(--cream);font-weight:600;text-align:left}
.ph-need-summary{display:flex;gap:8px;align-items:flex-start;background:rgba(127,217,154,0.08);border:0.5px solid rgba(127,217,154,0.3);border-radius:12px;padding:10px 12px;margin-bottom:4px}
.ph-need-summary i{font-size:16px;color:#7fd99a;flex-shrink:0;margin-top:1px}
.ph-need-summary div{font-size:12.5px;color:var(--cream);line-height:1.6}


/* ── Kai location-confirmation modal (asked fresh before every price search) ── */
.kloc-backdrop{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:950;background:rgba(7,15,34,0.72);align-items:center;justify-content:center;padding:20px}
.kloc-backdrop.open{display:flex}
.kloc-card{width:min(92vw,380px);background:var(--navy-chat);border:0.5px solid rgba(200,169,110,0.35);border-radius:20px;padding:22px 20px;box-shadow:0 12px 40px rgba(0,0,0,0.4)}
.kloc-state{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.kloc-spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(200,169,110,0.25);border-top-color:var(--gold-light);animation:klocSpin 0.9s linear infinite}
@keyframes klocSpin{to{transform:rotate(360deg)}}
.kloc-loading-text{font-size:14px;color:rgba(240,236,228,0.75)}
.kloc-title{font-size:16px;font-weight:700;color:var(--cream)}
.kloc-address{font-size:14px;color:var(--gold-light);background:rgba(200,169,110,0.1);border:0.5px dashed rgba(200,169,110,0.5);border-radius:10px;padding:10px 14px;line-height:1.5}
.kloc-row{display:flex;gap:10px;width:100%}
.kloc-btn{flex:1;padding:11px 14px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;border:none}
.kloc-btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#07100e}
.kloc-btn-secondary{background:rgba(255,255,255,0.07);border:0.5px solid rgba(255,255,255,0.18);color:var(--cream)}
.kloc-toggle{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(240,236,228,0.65);text-align:right}
.kloc-input{width:100%;padding:11px 14px;border-radius:12px;border:0.5px solid rgba(255,255,255,0.18);background:rgba(255,255,255,0.05);color:var(--cream);font-size:14px}
.kloc-error{font-size:13px;color:#f3a08a;text-align:center}

/* ═══ Kai hologram loading card (location/search waiting state) ═══ */
.kai-holo-card{width:100%;max-width:230px;margin:0 auto;background:rgba(10,20,40,0.4);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:12px;border:1px solid rgba(56,189,248,0.8);animation:kaiHoloPulseOuter 1.5s infinite ease-in-out}
.kai-holo-header{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:0.3px;color:#e0f2fe;text-align:center}
.kai-holo-dot{width:8px;height:8px;background-color:#f59e0b;border-radius:50%;box-shadow:0 0 10px #f59e0b;animation:kaiHoloDotPulse 1.5s infinite alternate}
@keyframes kaiHoloDotPulse{0%{opacity:0.3;transform:scale(0.8)}100%{opacity:1;transform:scale(1.2)}}
.kai-holo-video-wrap{position:relative;width:100%;aspect-ratio:9/16;border-radius:12px;overflow:hidden;border:1px solid rgba(245,158,11,0.8);animation:kaiHoloPulseInner 1.5s infinite ease-in-out}
.kai-holo-video-wrap video{width:100%;height:100%;object-fit:cover;display:block}
@keyframes kaiHoloPulseOuter{0%,100%{border-color:rgba(56,189,248,0.9);box-shadow:0 0 18px rgba(56,189,248,0.5),inset 0 0 10px rgba(56,189,248,0.2)}50%{border-color:rgba(56,189,248,0.2);box-shadow:0 0 5px rgba(56,189,248,0.1),inset 0 0 0px transparent}}
@keyframes kaiHoloPulseInner{0%,100%{border-color:rgba(245,158,11,0.2);box-shadow:0 0 5px rgba(245,158,11,0.1)}50%{border-color:rgba(245,158,11,1);box-shadow:0 0 18px rgba(245,158,11,0.6)}}

/* ═══ Kai product-detection card (kaiRoomLoading) — exactly as supplied ═══ */
.detection-card{width:220px;height:290px;background:rgba(10,20,40,0.4);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:12px;border:1px solid rgba(56,189,248,0.8);animation:pulseOuter 1.5s infinite ease-in-out}
.detection-title{display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;letter-spacing:0.3px;color:#e0f2fe;text-align:center;padding-top:4px}
.scanner-window{position:relative;width:100%;flex-grow:1;background:#01040a;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid rgba(245,158,11,0.8);animation:pulseInner 1.5s infinite ease-in-out}
.scanner-video{width:100%;height:100%;object-fit:cover;display:block}
@keyframes pulseOuter{0%,100%{border-color:rgba(56,189,248,0.9);box-shadow:0 0 18px rgba(56,189,248,0.5),inset 0 0 10px rgba(56,189,248,0.2)}50%{border-color:rgba(56,189,248,0.2);box-shadow:0 0 5px rgba(56,189,248,0.1),inset 0 0 0px transparent}}
@keyframes pulseInner{0%,100%{border-color:rgba(245,158,11,0.2);box-shadow:0 0 5px rgba(245,158,11,0.1)}50%{border-color:rgba(245,158,11,1);box-shadow:0 0 18px rgba(245,158,11,0.6)}}

/* ═══ Header icon buttons (Chats / Experts) ═══ */
.hdr-icon-btn{position:relative;width:33px;height:33px;border-radius:50%;background:rgba(200,169,110,0.12);border:0.5px solid var(--gold-border);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background 0.2s,transform 0.15s;flex-shrink:0}
.hdr-icon-btn:active{transform:scale(0.92)}
.hdr-icon-glyph{font-size:15px;line-height:1;color:var(--gold)}
#screen-main[class*="theme-"] .hdr-icon-btn{background:var(--th-acc-bg);border-color:var(--th-acc-b)}
#screen-main[class*="theme-"] .hdr-icon-glyph{color:var(--th-acc-t)}

/* ═══ Full-screen overlays (Experts Directory / Chat History) ═══ */
.fullscreen-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:900;background:var(--navy);display:none;flex-direction:column;height:100dvh}
.fullscreen-overlay.open{display:flex}
.fs-header{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:0.5px solid rgba(255,255,255,0.08);flex-shrink:0}
.fs-close{width:33px;height:33px;border-radius:50%;background:rgba(200,169,110,0.12);border:0.5px solid var(--gold-border);color:var(--gold);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0}
.fs-title{font-size:17px;font-weight:700;color:var(--cream)}

/* Experts Directory — v2: centered logo header, crash-proof card grid */
.fs-header-centered{display:flex;justify-content:center;padding:18px 0 8px;flex-shrink:0}
.fs-logo-btn{width:64px;height:64px;border-radius:50%;background:var(--navy);border:1.5px solid rgba(200,169,110,0.3);box-shadow:0 0 0 6px var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.fs-logo-icon{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(200,169,110,0.25))}

.fs-search-wrap{padding:10px 18px 14px;flex-shrink:0}
.fs-search{width:100%;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.1);color:var(--cream);font-size:14px;font-family:'Inter',sans-serif;direction:rtl;box-sizing:border-box}
.fs-search::placeholder{color:rgba(240,236,228,0.35)}
.fs-search:focus{outline:none;border-color:var(--gold-border)}

.experts-grid{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:min-content;
  gap:12px;
  padding:4px 18px 24px;
  box-sizing:border-box;
}
.expert-card{
  background:rgba(255,255,255,0.03);
  border:0.5px solid rgba(255,255,255,0.08);
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  display:flex;
  flex-direction:column;
}
.expert-card.filtered-out{display:none}

.expert-card-img-wrap{position:relative;width:100%;padding-top:133.33%;background:rgba(255,255,255,0.04);flex-shrink:0}
.expert-card-img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;display:block}

.expert-card-body{padding:10px 12px 12px;flex-shrink:0}
.expert-card-name{font-size:14.5px;font-weight:700;color:var(--cream);margin-bottom:3px}
.expert-card-domain{font-size:11.5px;color:rgba(240,236,228,0.5);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* Chat History */
.chats-list{flex:1;min-height:0;overflow-y:auto;padding:4px 0}
.chat-row{display:flex;align-items:center;gap:12px;padding:12px 18px;cursor:pointer;border-bottom:0.5px solid rgba(255,255,255,0.05);transition:background 0.15s}
.chat-row:active{background:rgba(255,255,255,0.04)}
.chat-row-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0;background:rgba(255,255,255,0.06)}
.chat-row-body{flex:1;min-width:0}
.chat-row-name{font-size:14.5px;font-weight:600;color:var(--cream);margin-bottom:2px}
.chat-row-preview{font-size:12.5px;color:rgba(240,236,228,0.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chats-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:rgba(240,236,228,0.35)}
.chats-empty-icon{font-size:40px;opacity:0.5}
.chats-empty-text{font-size:14px}

/* Experts Empty State */
.experts-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center}
.experts-empty-icon{font-size:38px;opacity:0.5}
.experts-empty-text{font-size:14px;color:rgba(240,236,228,0.55);max-width:260px}
.experts-empty-actions{display:flex;flex-direction:column;gap:8px;margin-top:6px;width:100%;max-width:240px}
.experts-empty-btn{padding:10px 16px;border-radius:14px;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.1);color:var(--cream);font-size:13px;cursor:pointer;font-family:'Inter',sans-serif}
.experts-empty-btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#07100e;font-weight:600;border:none}


/* ═══ Onboarding v3 — combined gender+terms, static screen, no logo/input-bar ═══ */

/* Onboarding: both gender buttons and terms are on one static screen (no hide/show,
   no logo, no input-bar). The confirm button only lights up once a gender is picked
   AND the terms were scrolled to the bottom. */
.combo-screen{position:relative;z-index:1;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;padding:22px 20px;gap:16px;overflow:visible}

.bubble-kali{text-align:center;background:#152847;border:0.5px solid rgba(255,255,255,0.12);border-radius:16px;padding:13px 15px;color:var(--cream);font-size:13px;line-height:1.6;
  box-shadow:0 0 18px rgba(200,169,110,0.35),0 0 42px rgba(200,169,110,0.2)}

/* Gender buttons — deliberately prefixed .onb-* to avoid clashing with the chat's
   quick-reply .qr-btn/.qr-wrap classes (see ui.js renderQuickReplies). */
.onb-qr-wrap{display:flex;flex-direction:column;gap:10px;margin-top:12px;width:100%}
.onb-qr-btn{padding:11px 16px;border-radius:14px;border:none;cursor:pointer;background:linear-gradient(180deg,var(--gold-light),var(--gold));color:var(--navy);
  font-size:13px;font-weight:600;text-align:center;font-family:'Inter',sans-serif;
  box-shadow:0 0 14px rgba(200,169,110,0.35),0 0 30px rgba(200,169,110,0.18);
  transition:box-shadow .2s;
}
.onb-qr-btn.selected{box-shadow:0 0 0 2px var(--gold-light) inset, 0 0 22px rgba(200,169,110,0.55), 0 0 44px rgba(200,169,110,0.3)}

.terms-card{position:relative;background:#122544;border:0.5px solid var(--gold-border);border-radius:14px;padding:13px 15px;margin-top:6px;width:100%;
  box-shadow:0 0 20px rgba(200,169,110,0.32),0 0 44px rgba(200,169,110,0.18)}
.terms-card-title{font-size:12.5px;font-weight:600;color:var(--gold-light);margin-bottom:7px}
.terms-scroll{font-size:10.5px;line-height:1.6;color:rgba(240,236,228,0.7);max-height:230px;overflow-y:auto;padding-left:2px;
  border-bottom:0.5px solid rgba(255,255,255,0.08);padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none}
.terms-scroll::-webkit-scrollbar{display:none}
.terms-intro{font-size:11px;line-height:1.7;color:var(--cream);margin-bottom:8px;font-weight:500}
.terms-scroll ul{margin:5px 0;padding-right:15px}
.terms-scroll li{margin-bottom:7px}
.terms-full-link{font-size:10.5px;color:var(--gold-light);text-decoration:underline;display:block;margin-top:6px;text-align:center}
.terms-full{max-height:none;overflow-y:visible;margin-top:8px;padding-top:8px}
.scroll-hint{font-size:9.5px;color:rgba(240,236,228,0.35);text-align:center;margin-top:6px;transition:opacity .3s}
.confirm-btn{margin-top:8px;padding:11px 16px;border-radius:14px;background:#1b2f52;color:rgba(240,236,228,0.35);
  font-size:12.5px;font-weight:600;text-align:center;font-family:'Inter',sans-serif;transition:background .3s,color .3s;pointer-events:none}
.confirm-btn.enabled{pointer-events:auto;cursor:pointer;background:linear-gradient(180deg,var(--gold-light),var(--gold));color:var(--navy);
  box-shadow:0 0 16px rgba(200,169,110,0.4),0 0 36px rgba(200,169,110,0.22)}
.confirm-hint{font-size:9.5px;color:rgba(255,150,150,0.55);text-align:center;margin-top:5px;transition:opacity .3s}

/* ═══ Lobby entry gate (2 cards) — copied from the approved mockup, every class renamed with an
   lg- prefix so nothing can ever collide with the rest of the app (learned the hard way earlier
   in this project). Positioned to fill .chat-frame exactly (not the full viewport like the
   original standalone mockup), sitting above chat-empty/chat-messages but below header/composer
   (they stay untouched and usable — the mic keeps working through this). Shown by default;
   JS only ever hides it, once, on first real interaction — never shown again without a reload. */
.lobby-gate{position:relative;width:100%;flex:1;min-height:0;z-index:1;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:0 14px;gap:0}
.lg-card{position:relative;width:100%;max-width:320px;flex:1;min-height:0;background:rgba(10,22,42,0.9);border-radius:clamp(16px,2.5vh,20px);padding:clamp(40px,6.2vh,46px) clamp(10px,2.5vw,14px) clamp(10px,1.5vh,12px);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center}
.lg-neon-blue{border:1.2px solid #38bdf8;box-shadow:0 0 12px rgba(56,189,248,0.38),0 0 24px rgba(56,189,248,0.18),inset 0 0 10px rgba(56,189,248,0.22),0 6px 20px rgba(0,0,0,0.7)}
.lg-neon-gold{border:1.2px solid #f59e0b;box-shadow:0 0 12px rgba(245,158,11,0.38),0 0 24px rgba(245,158,11,0.18),inset 0 0 10px rgba(245,158,11,0.22),0 6px 20px rgba(0,0,0,0.7)}
.lg-clicky-card{margin-top:clamp(34px,5vh,42px)}
.lg-kai-card{margin-top:clamp(36px,5.2vh,44px)}
.lg-avatar-unit{position:absolute;top:-41px;display:flex;justify-content:center;z-index:2}
.lg-avatar-badge{width:clamp(72px,11vh,82px);height:clamp(72px,11vh,82px);border-radius:16px;overflow:hidden;background:#08152e;box-shadow:0 6px 20px rgba(0,0,0,0.85);position:relative}
.lg-avatar-img{width:100%;height:100%;object-fit:cover}
.lg-avatar-ring{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:16px;pointer-events:none}
.lg-ring-blue{border:2px solid #38bdf8;box-shadow:0 0 10px #38bdf8}
.lg-ring-gold{border:2px solid #fbbf24;box-shadow:0 0 10px #fbbf24}
.lg-card-content{width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.2vh,10px)}
.lg-text-group{display:flex;flex-direction:column;align-items:center;gap:3px}
.lg-headline{font-size:clamp(11px,1.6vh,12.5px);font-weight:800;color:#ffffff;line-height:1.25}
.lg-body-text{font-size:clamp(9px,1.3vh,10px);line-height:1.35;color:#cbd5e1;display:flex;flex-direction:column;gap:1px}
.lg-body-text span{display:block}
.lg-action-cluster{width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.1vh,8px)}
.lg-action-btn{border:none;cursor:pointer;border-radius:10px;padding:clamp(4px,0.7vh,5px) clamp(12px,2.5vw,15px);font-size:clamp(10px,1.4vh,11px);font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,0.35);transition:transform 0.2s,filter 0.2s}
.lg-action-btn:hover{transform:scale(1.02);filter:brightness(1.15)}
.lg-btn-blue{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);color:#ffffff;border:1px solid rgba(255,255,255,0.3);box-shadow:0 0 8px rgba(37,99,235,0.4)}
.lg-btn-gold{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);color:#050b16;box-shadow:0 0 8px rgba(245,158,11,0.4)}
.lg-bottom-slot{width:100%;max-width:230px;height:clamp(25px,3.6vh,28px);border-radius:10px;padding:0 8px;display:flex;align-items:center;position:relative}
.lg-slot-blue{background:rgba(14,28,52,0.85);border:1px solid rgba(147,197,253,0.35)}
.lg-slot-gold{background:rgba(5,12,24,0.9);border:1px solid rgba(251,191,36,0.45)}
.lg-slot-input{width:100%;background:transparent;border:none;outline:none;color:#ffffff;font-size:clamp(9.5px,1.3vh,10.5px);text-align:center;direction:rtl;font-family:inherit;position:relative;z-index:1}
.lg-slot-input::placeholder{color:rgba(209,226,255,0.5)}
/* Confirmed live bug: Kai's field holds a pasted URL (always LTR content — digits/Latin, no
   spaces), but inherited direction:rtl from the shared rule above. Selecting text inside an
   RTL-directioned field whose content is actually LTR is what caused the whole screen to shift
   right on selection (a known mobile text-selection/caret-positioning conflict) — not a layout
   bug elsewhere. Only Kai's own input needs this; Claiky's field holds Hebrew text and stays RTL.*/
#lgKaiInput,#lgKaiInputCol1{direction:ltr}
.lg-or-separator{width:100%;max-width:320px;display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;margin:clamp(8px,1.8vh,14px) 0;z-index:3}
.lg-sep-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(147,197,253,0.4),transparent)}
.lg-or-badge{position:relative;width:clamp(44px,7vh,52px);height:clamp(44px,7vh,52px);border-radius:50%;background:rgba(8,20,42,0.96);display:flex;align-items:center;justify-content:center}
.lg-or-halo-layer{position:absolute;inset:-8px;border-radius:50%;pointer-events:none}
.lg-or-text{position:relative;z-index:1;font-size:clamp(13px,2vh,15px);font-weight:800;color:#ffffff}
.lg-mic-glow-sync{animation:lg-dual-neon 2.5s ease-in-out infinite}
@keyframes lg-dual-neon{
  0%{border:1.2px solid rgba(56,189,248,0.35);box-shadow:0 0 6px rgba(56,189,248,0.2),inset 0 0 5px rgba(56,189,248,0.15)}
  20%{border:2px solid #38bdf8;box-shadow:0 0 20px #38bdf8,0 0 38px rgba(56,189,248,0.85),inset 0 0 12px #38bdf8}
  40%{border:1.2px solid rgba(56,189,248,0.3);box-shadow:0 0 6px rgba(56,189,248,0.15)}
  50%{border:1.2px solid rgba(255,255,255,0.2);box-shadow:0 0 4px rgba(255,255,255,0.1)}
  70%{border:2px solid #f59e0b;box-shadow:0 0 20px #f59e0b,0 0 38px rgba(245,158,11,0.85),inset 0 0 12px #fbbf24}
  90%{border:1.2px solid rgba(245,158,11,0.3);box-shadow:0 0 6px rgba(245,158,11,0.15)}
  100%{border:1.2px solid rgba(56,189,248,0.35);box-shadow:0 0 6px rgba(56,189,248,0.2),inset 0 0 5px rgba(56,189,248,0.15)}
}

/* ═══ Kai link-confirm step (identify → confirm → THEN search, never search blind) ═══ */
.lg-kai-confirm{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.lg-kai-confirm-loading{font-size:clamp(9.5px,1.3vh,10.5px);color:rgba(253,230,138,0.85)}
.lg-kai-confirm-result{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px}
.lg-kai-confirm-img{width:56px;height:56px;object-fit:cover;border-radius:10px;background:#08152e;border:1px solid rgba(251,191,36,0.4)}
.lg-kai-confirm-title{font-size:clamp(9.5px,1.3vh,10.5px);color:#ffffff;font-weight:600;line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lg-kai-confirm-q{font-size:clamp(9px,1.2vh,10px);color:#cbd5e1}
.lg-kai-confirm-actions{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:2px}
.lg-kai-confirm-no{background:transparent;border:none;color:rgba(209,226,255,0.65);font-size:clamp(8.5px,1.2vh,9.5px);cursor:pointer;text-decoration:underline;padding:2px}
.lg-kai-confirm-error{font-size:clamp(9px,1.2vh,10px);color:#fca5a5;text-align:center}

/* ═══ Kai product-verify card (link-identify confirmation) — every class kv- prefixed so nothing
   collides with existing names (.dot in particular is already used by the typing-indicator
   animation — a real collision this avoids). Adapted from the approved mockup; the full-spec
   button and spec chips are left out for now (see index.html comment) — no real spec data exists
   yet to put in them. */
.kv-card{box-sizing:border-box;width:100%;max-width:clamp(285px,88vw,315px);margin:0 auto;padding:14px 12px;background:rgba(10,22,42,0.96);border-radius:22px;border:1.5px solid #f59e0b;box-shadow:0 0 16px rgba(245,158,11,0.35),inset 0 0 12px rgba(245,158,11,0.15),0 10px 30px rgba(0,0,0,0.75);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;flex-direction:column;gap:12px;direction:rtl;font-family:system-ui,-apple-system,sans-serif;color:#ffffff}
.kv-status-banner{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(5,14,30,0.7);border-radius:12px;padding:9px 12px;border:1px solid rgba(245,158,11,0.3);text-align:center}
.kv-status-badge{font-size:13px;font-weight:800;color:#fbbf24;letter-spacing:0.5px;text-shadow:0 0 8px rgba(251,191,36,0.4)}
.kv-status-subtitle{margin:0;font-size:12.5px;font-weight:500;color:#e2e8f0;line-height:1.35}
.kv-gallery-wrapper{box-sizing:border-box;position:relative;width:100%;border-radius:14px;background:#020712;border:1px solid rgba(255,255,255,0.14);overflow:visible;display:flex;flex-direction:column;align-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),0 10px 28px rgba(0,0,0,0.6)}
.kv-gallery-wrapper .kv-gallery-track{border-radius:13px;overflow:hidden}
.kv-gallery-wrapper::after{content:'';position:absolute;left:12%;right:12%;bottom:-16px;height:22px;background:radial-gradient(ellipse at center, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.1) 45%, transparent 75%);filter:blur(7px);pointer-events:none;z-index:-1}
.kv-gallery-track{display:flex;width:100%;height:clamp(160px,24vh,200px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.kv-gallery-track::-webkit-scrollbar{display:none}
.kv-gallery-slide{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center}
.kv-product-image{width:100%;height:100%;object-fit:contain;padding:6px;display:block}
.kv-product-info-block{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.kv-product-name{margin:0;font-size:14px;font-weight:800;color:#ffffff;line-height:1.25}
.kv-verify-prompt-group{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:8px}
.kv-prompt-text{margin:0;font-size:11.5px;font-weight:700;color:#fbbf24;text-align:center;text-shadow:0 0 6px rgba(251,191,36,0.35)}
.kv-action-buttons-row{box-sizing:border-box;display:flex;gap:8px;width:100%}
.kv-btn-verify-yes{box-sizing:border-box;flex:1.35;border:none;cursor:pointer;border-radius:11px;padding:8px 10px;font-size:11.5px;font-weight:800;background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);color:#050b16;box-shadow:0 0 12px rgba(245,158,11,0.45);transition:transform 0.15s,filter 0.15s}
.kv-btn-verify-yes:hover{transform:scale(1.02);filter:brightness(1.15)}
.kv-btn-verify-no{box-sizing:border-box;flex:1;cursor:pointer;border-radius:11px;padding:8px 10px;font-size:11.5px;font-weight:700;background:rgba(15,23,42,0.7);color:#94a3b8;border:1px solid rgba(148,163,184,0.3);transition:background 0.15s,color 0.15s}
.kv-btn-verify-no:hover{background:rgba(239,68,68,0.18);color:#f87171;border-color:rgba(239,68,68,0.5)}

.kv-gallery-dots{display:flex;justify-content:center;gap:5px;padding-bottom:7px}
.kv-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.25);transition:all 0.2s ease}
.kv-dot.kv-dot-active{width:14px;border-radius:4px;background:#fbbf24;box-shadow:0 0 8px #fbbf24}
.kv-specs-chips-wrap{box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:center;gap:5px;width:100%}
.kv-spec-chip{box-sizing:border-box;background:rgba(14,28,56,0.85);border:1px solid rgba(147,197,253,0.25);padding:4px 8px;border-radius:7px;font-size:10px;color:#e2e8f0;white-space:nowrap}
.kv-chip-key{color:#94a3b8;font-weight:600;margin-left:2px}
.kv-btn-full-specs{box-sizing:border-box;width:100%;border:none;cursor:pointer;border-radius:11px;padding:7px 10px;font-size:11px;font-weight:700;background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);color:#ffffff;border:1px solid rgba(147,197,253,0.4);box-shadow:0 0 10px rgba(37,99,235,0.4);transition:transform 0.15s ease,filter 0.15s ease;display:flex;align-items:center;justify-content:center}
.kv-btn-full-specs:hover{transform:scale(1.015);filter:brightness(1.15)}

.lg-empty-caret{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1px;height:clamp(11px,1.6vh,13px);background:#ffffff;border-radius:1px;z-index:0;pointer-events:none;opacity:0;animation:lg-caret-blink 1s steps(1) infinite}
.lg-slot-input:placeholder-shown ~ .lg-empty-caret{opacity:1}
.lg-slot-input:focus ~ .lg-empty-caret{opacity:0}
@keyframes lg-caret-blink{0%,100%{opacity:1}50%{opacity:0}}

/* ═══ Desktop 4-column layout (wide screens only — phones/APK completely unaffected below this
   breakpoint, everything works exactly as it always has). Each of the 4 existing full-screen
   panels becomes a fixed quarter-width column instead of a full-viewport screen/overlay — no DOM
   restructuring, just position/size overrides, so none of the existing JS logic needed to change
   for column 1-3 (they're the same elements, same IDs, same behavior, just repositioned).
   Column 1 = Claiky/whatever room is currently active (#screen-main, unchanged content).
   Column 2 = experts directory, always visible here (#expertsOverlay, forced open).
   Column 3 = Kai (#kaiRoom, forced visible, with a new idle state for "nothing happening yet").
   Column 4 = wallet/settings placeholder (#walletColumn, new, empty for now). */
@media (min-width: 1200px) {
  /* The mobile-style 3D flip transition (#flipCard, runScreenFlip()) is for switching ONE visible
     screen to another — meaningless once all 4 columns are always on screen at once, and actively
     breaks the layout (the white card seen blocking the view was exactly this element, sized/
     positioned for the old single-screen assumption). Force it off entirely here regardless of
     whatever classes the existing JS toggles on it — nothing needed to change in that JS itself. */
  #flipCard{display:none !important}
  /* RTL column order (right → left, matching how a Hebrew reader's eye actually moves):
     קלייקי (rightmost) → מומחים → קאי → ארנק/הגדרות (leftmost). CSS `left` is always physical
     left regardless of dir="rtl" — this had to be set explicitly, not inherited from the page's
     own RTL direction. */
  /* Direction-aware column order — uses CSS *logical* properties (inset-inline-start/end), not
     physical left/right. This automatically follows whatever dir="rtl"/dir="ltr" the page
     actually has: column 1 (קלייקי) always sits at the START of reading direction — right in
     Hebrew/Arabic, left in English and most other languages — with no separate code path needed
     per language. If/when an LTR version of the app exists, this same rule re-flows correctly on
     its own; nothing here needs to change again for that. */
  /* Column 1 = the NEW independent Claiky panel (#claikyColumn) — always Claiky, never swapped.
     Column 2 = shared slot for BOTH the experts grid (#expertsOverlay) and an expert's live chat
     (#screen-main, now dedicated to experts only in this layout, never Claiky here) — only one of
     the two is visible at a time, toggled by JS (see selectExpertFromDirectory/resetToHost),
     default is the grid. */
  #claikyColumn{display:flex !important;position:fixed !important;top:0;inset-inline-start:0;inset-inline-end:auto;width:25%;height:100vh}
  #screen-main{position:fixed !important;top:0;inset-inline-start:25%;inset-inline-end:auto;width:25%;height:100vh}
  #expertsOverlay{display:flex !important;position:fixed !important;top:0;inset-inline-start:25%;inset-inline-end:auto;width:25%;height:100vh;border-inline-start:1px solid rgba(255,255,255,0.08);border-inline-end:1px solid rgba(255,255,255,0.08)}
  #kaiRoom{display:flex !important;position:fixed !important;top:0 !important;inset-inline-start:50% !important;inset-inline-end:auto !important;bottom:auto !important;width:25% !important;height:100vh !important;padding:24px 16px}
  #walletColumn{display:flex !important;position:fixed !important;top:0;inset-inline-start:75%;inset-inline-end:auto;width:25%;height:100vh;border-inline-start:1px solid rgba(255,255,255,0.08)}
  /* Column-2 grid↔chat flip, SCOPED to this column's own 25%-wide slot only (not the old
     app-wide #flipCard, which stays off per the rule above) — a much smaller, contained
     transition that makes sense now that it's switching within one column, not the whole screen. */
  #screen-main, #expertsOverlay{transition:opacity 0.35s ease, transform 0.35s ease}
  #screen-main.col2-hidden, #expertsOverlay.col2-hidden{opacity:0;transform:scale(0.97);pointer-events:none;z-index:-1}
  /* The experts-overlay's own logo button normally closes it (mobile modal behavior) — on
     desktop it's a permanent column, so that button doesn't make sense here; hidden rather than
     rewired, since closing/reopening isn't a concept that applies to a persistent column. */
  #expertsOverlay .fs-header-centered{display:none}
}

/* ═══ Kai search-in-progress card (loading state inside kaiRoom) — from the approved files.
   No class-name collisions checked against the rest of style.css, used as-is (unlike kv-/lg-
   prefixed sections elsewhere, which needed renaming because of a real collision). */
.kai-search-card{box-sizing:border-box;width:100%;max-width:clamp(300px,90vw,360px);margin:0 auto;padding:12px;background:rgba(10,22,42,0.96);border-radius:22px;border:1.5px solid #f59e0b;box-shadow:0 0 18px rgba(245,158,11,0.35),inset 0 0 12px rgba(245,158,11,0.15),0 12px 36px rgba(0,0,0,0.85);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;flex-direction:column;gap:10px;direction:rtl;color:#ffffff}
.search-header-badge{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(5,14,30,0.75);border-radius:12px;padding:8px 12px;border:1px solid rgba(245,158,11,0.3)}
.pulse-indicator{width:8px;height:8px;border-radius:50%;background:#fbbf24;box-shadow:0 0 10px #fbbf24;animation:pulseBeacon 1.2s infinite ease-in-out}
@keyframes pulseBeacon{0%,100%{transform:scale(0.9);opacity:0.6}50%{transform:scale(1.3);opacity:1;filter:brightness(1.3)}}
.header-badge-text{font-size:13px;font-weight:800;color:#fbbf24;letter-spacing:0.4px;text-shadow:0 0 8px rgba(251,191,36,0.4)}
.search-stage-frame{box-sizing:border-box;position:relative;width:100%;height:clamp(220px,40vh,340px);border-radius:14px;overflow:hidden;background:#020712;border:1.5px solid #00d2ff;box-shadow:0 0 14px rgba(0,210,255,0.45),inset 0 0 18px rgba(0,210,255,0.3);animation:blueNeonPulse 2.8s infinite alternate ease-in-out}
@keyframes blueNeonPulse{0%{border-color:rgba(0,210,255,0.65);box-shadow:0 0 10px rgba(0,210,255,0.35),inset 0 0 12px rgba(0,210,255,0.2)}50%{border-color:rgba(56,189,248,1);box-shadow:0 0 20px rgba(56,189,248,0.75),inset 0 0 24px rgba(56,189,248,0.5)}100%{border-color:rgba(0,210,255,0.75);box-shadow:0 0 14px rgba(0,210,255,0.45),inset 0 0 15px rgba(0,210,255,0.25)}}
.kai-stage-video{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.neon-inner-pulse{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center, transparent 70%, rgba(0,210,255,0.08) 100%)}
.search-status-box{box-sizing:border-box;display:flex;flex-direction:column;gap:8px;background:rgba(5,14,30,0.8);border-radius:12px;padding:10px 14px;border:1px solid rgba(245,158,11,0.25);text-align:center}
.status-text-row{display:flex;align-items:center;justify-content:center;gap:8px;min-height:24px}
.status-icon{font-size:14px;flex-shrink:0}
.status-message{margin:0;font-size:12px;font-weight:600;color:#e2e8f0;line-height:1.35;transition:opacity 0.2s ease-in-out}
.search-progress-bar{box-sizing:border-box;width:100%;height:4px;background:rgba(15,23,42,0.85);border-radius:4px;overflow:hidden;position:relative;border:0.5px solid rgba(245,158,11,0.3)}
.progress-fill{position:absolute;top:0;bottom:0;width:45%;background:linear-gradient(90deg,#f59e0b,#fbbf24,#00d2ff);border-radius:4px;box-shadow:0 0 10px #fbbf24;animation:progressTravel 1.8s infinite ease-in-out}
@keyframes progressTravel{0%{left:-45%}100%{left:100%}}