*,*::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)}}

.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));
}

/* ═══ חץ "קדימה" בלובי (EFFI-lobby-forward-arrow.md) ═══
   אותו אייקון של חץ החזרה, מהופך ב-x בלבד — כך הכפתור עצמו נשאר בדיוק במשבצת ובגודל
   של חץ החזרה (אפס הבדל גיאומטרי בין הלובי לחדר). */
.top-tier-chassis #forwardToRoomBtn svg {
  transform: scaleX(-1);
}

/* אין לנו לאן לחזור: נשאר גלוי במשבצת (כדי שהמעבר למצב פעיל לא יזיז את שאר האגף),
   רק מעומעם ולא לחיץ. pointer-events:none מונע גם את :hover שמבהיר את הכפתור. */
.top-tier-chassis #forwardToRoomBtn[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

/* ═══ 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;text-align:justify}
.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}
/* Re-entry question ("המשך שיחה קודמת" / "שיחה חדשה"): a temporary DISPLAY element under the last
   message, never a stored bubble - so it carries no msg-user/msg-kali class and no border of its
   own, just the question text and the same two-button row the consultation intro uses. */
.resume-prompt{width:100%;box-sizing:border-box;margin:10px 0 4px}
.resume-question{color:var(--cream);opacity:0.92;font-size:15px;line-height:1.5;font-weight:600;margin-bottom:2px}
.qr-btn-select_resume{background:rgba(255,255,255,0.14)}
.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 ═══ */

/* ═══ LED glow for the two glass bars (top tier + bottom composer) ═══
   Purely additive: no geometry, no layout, and the approved rim path/gradients above are left
   byte-identical. Every knob is a variable so the whole effect can be retuned - or switched off
   with a single --bar-led-display: none - from one place. The two blur radii (12.8 / 4.8) are the
   only values that cannot live here: stdDeviation is an SVG attribute, not a CSS property, so it
   stays in the <filter> elements in index.html.

   Strength: LOCKED - Itamar saw these on the device on 2026-10-05 and said verbatim "ככה הלד מושלם!
   אל תשנה" (that's how the LED is perfect - don't change it). Do not retune these values without
   asking him first. History, so nobody re-derives it wrongly: v1 (4.08/.765/sigma 12.8) was never
   actually seen on a device - the APK had not been built yet - so its weakness was never measured,
   only assumed; measurement later showed v1 at a mean luminance lift of ~+24, essentially the same
   as these. v2 (9/4.5/2 at full opacity) was the first version actually installed and read as too
   heavy (~+56). These are exactly half of v2 on all three axes - width, opacity and blur radius -
   measuring ~+27, and they are the approved ones. Halving the blur mattered as much as the width:
   at sigma 12.8 the same strokes spread into a wide haze, at sigma 6.4/2.4 they read as a defined
   rim glow. */
:root {
  --bar-led-color: #d6e9ff;
  --bar-led-wide-opacity: .5;
  --bar-led-wide-width: 4.5;
  --bar-led-tight-opacity: .5;
  --bar-led-tight-width: 2.25;
  --bar-led-crisp-opacity: .5;
  --bar-led-crisp-width: 1;
  --bar-led-display: inline;
}

.bar-led {
  display: var(--bar-led-display);
  pointer-events: none;
}

.bar-led path {
  fill: none;
  stroke: var(--bar-led-color);
}

.bar-led-wide {
  stroke-width: var(--bar-led-wide-width);
  stroke-opacity: var(--bar-led-wide-opacity);
}

.bar-led-tight {
  stroke-width: var(--bar-led-tight-width);
  stroke-opacity: var(--bar-led-tight-opacity);
}

.bar-led-crisp {
  stroke-width: var(--bar-led-crisp-width);
  stroke-opacity: var(--bar-led-crisp-opacity);
}

/* Separate rules on purpose - the approved .scoop-bar-svg rules above stay byte-identical. An SVG
   element defaults to overflow:hidden, which would clip the glow to the 390x126 box; the chassis
   and #screen-main are overflow:visible, so nothing above clips it once the SVG lets it out. */
.top-tier-chassis .scoop-bar-svg {
  overflow: visible;
}

.composer-bottom-chassis .scoop-bar-svg {
  overflow: visible;
}

/* ─── 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-spec-label{color:rgba(240,236,228,0.5);font-weight:400}
.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-manny-card{margin-top:clamp(34px,5vh,42px)}
/* 3-card lobby regression fix (mobile only, scoped by the #lobbyGate id so the desktop
   #lobbyGateColumn1 keeps the shared class defaults untouched). Root cause: .lobby-gate is
   flex:1;min-height:0 inside the fixed-height #chatEmpty, and .lg-card is flex:1;min-height:0 —
   fine for 2 cards, but with 3 cards + 2 separators each card's allocated share drops below its
   intrinsic content height, min-height:0 lets the boxes compress, and the content overflows under
   the absolute-positioned avatar (top:-41px), colliding across cards and with the greeting above.
   Fix: the gate may never shrink below its content (so #chatEmpty's overflow-y:auto scrolls
   instead), and each card keeps its intrinsic height — no overlap on any screen height, same as
   the 2-card "before" screenshot. #chatEmpty is already the scroller. */
#lobbyGate{flex:1 1 auto;min-height:auto}
#lobbyGate .lg-card{flex:none;min-height:auto}
.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-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}}

/* ═══ כרטיסי הלובי במובייל: גודל גדול וקריא, לארבעת הכרטיסים יחד (החלטת איתמר) ═══
   הגודל הוא של כרטיס ארין המקורי. כל הכללים כאן מוגבלים ל-#lobbyGate (הלובי של המובייל), כדי
   שהלובי של הדסקטופ (#lobbyGateColumn1, שמשתמש באותם מחלקות) לא ישתנה כלל. קלייקי, קאי, מני וארין חולקים
   את אותם כללים, ולכן תמיד באותו גודל. בלי clamp(): הגדלים קבועים ומכוונים לקריאות.
   רוחב: 16px מכל קצה (100vw - 32px). גובה: הכרטיס נבנה מהתוכן שלו (תמונה, כותרת, עד שלוש שורות, שדה, כפתור),
   בלי שטח ריק: הטקסט יושב צמוד לשדה. כדי שכולם יהיו באותו גובה, lobby-focus.js מודד את הגבוה מביניהם
   ומציב אותו ב---lg-card-h לכולם; העודף (אם יש) נשאר מעל הכותרת, מתחת לתמונה. כשכרטיס אחד נבחר
   (מקלדת פתוחה) הוא חוזר לגובה הטבעי (.lobby-focus), ואם הוא עדיין לא נכנס, התמונה מוקטנת (.lg-tight). */
#lobbyGate .lg-avatar-unit{top:-56px}
#lobbyGate .lg-avatar-badge{width:108px;height:108px;border-radius:26px}
#lobbyGate .lg-avatar-ring{border-radius:26px}
#lobbyGate .lg-card{width:min(calc(100vw - 32px),460px);max-width:none;min-height:var(--lg-card-h,auto);padding:64px 16px 16px;border-radius:22px}
#lobbyGate .lg-clicky-card,#lobbyGate .lg-kai-card,#lobbyGate .lg-manny-card,#lobbyGate .lg-sports-card{margin-top:58px}
#lobbyGate .lg-card-content{gap:10px;flex:1;justify-content:flex-end}
#lobbyGate .lg-headline{font-size:24px;font-weight:700;line-height:1.2}
#lobbyGate .lg-body-text{font-size:14px;line-height:1.6;gap:2px}
#lobbyGate .lg-bottom-slot{height:44px;max-width:290px;border-radius:12px}
#lobbyGate .lg-slot-input{font-size:14px}
#lobbyGate .lg-empty-caret{height:18px}
#lobbyGate .lg-action-btn{min-height:46px;padding:0 18px;border-radius:14px;font-size:15px}
/* אישור המוצר בכרטיס קאי: אותה קריאות, כדי שלא יישאר טקסט של 10px בתוך כרטיס גדול */
#lobbyGate .lg-kai-confirm-loading,#lobbyGate .lg-kai-confirm-q,#lobbyGate .lg-kai-confirm-error{font-size:12px}
#lobbyGate .lg-kai-confirm-title{font-size:13px}
#lobbyGate .lg-kai-confirm-no{font-size:12px}
#lobbyGate .lg-kai-confirm-img{width:64px;height:64px}

/* כרטיס אחד נבחר (המקלדת פתוחה): גובה טבעי, בלי שטח ריק. */
#lobbyGate.lobby-focus .lg-card{min-height:auto}
/* אם גם כך הכרטיס לא נכנס מעל המקלדת (מסך נמוך), מקטינים את התמונה והריפוד כדי שהתמונה תראה שלמה. */
#lobbyGate.lg-tight .lg-avatar-unit{top:-44px}
#lobbyGate.lg-tight .lg-avatar-badge{width:88px;height:88px;border-radius:21px}
#lobbyGate.lg-tight .lg-avatar-ring{border-radius:21px}
#lobbyGate.lg-tight .lg-card{padding-top:52px}
#lobbyGate.lg-tight .lg-clicky-card,#lobbyGate.lg-tight .lg-kai-card,#lobbyGate.lg-tight .lg-manny-card,#lobbyGate.lg-tight .lg-sports-card{margin-top:46px}

/* כרטיס מני: מסגרת לבנה במקום כחולה (החלטת איתמר). המסגרת והטבעת של התמונה בלבד; השדה והכפתור נשארים. */
.lg-manny-card.lg-neon-blue{border:1.2px solid #ffffff;box-shadow:0 0 12px rgba(255,255,255,.38),0 0 24px rgba(255,255,255,.18),inset 0 0 10px rgba(255,255,255,.22),0 6px 20px rgba(0,0,0,.7)}
.lg-manny-card .lg-ring-blue{border-color:#ffffff;box-shadow:0 0 10px #ffffff}

/* ═══ כרטיס "ספורט מקצועי" (ארין): אותו כרטיס בדיוק כמו מני, קאי וקלייקי ═══
   הכלל: רק הצבע שונה (ירוק). אף גודל לא נקבע כאן. התג, הכותרת, השורות, השדה, הכפתור, הריווחים
   והפינות נקבעים בכללי הבסיס .lg-* (clamp() לפי גובה המסך), ולכן הכרטיס תמיד באותו גודל כמו מני.
   אסור להוסיף לכאן width, height, font-size, padding, margin, border-radius, top או gap. */
.lg-sports-card{margin-top:clamp(34px,5vh,42px)}
.lg-card--sports{--sports-green:#3ddc97;border:1.2px solid var(--sports-green);box-shadow:0 0 12px rgba(61,220,151,.38),0 0 24px rgba(61,220,151,.18),inset 0 0 10px rgba(61,220,151,.22),0 6px 20px rgba(0,0,0,.7)}
.lg-avatar-badge--sports{box-sizing:border-box;background:#ffffff;border:2px solid var(--sports-green);box-shadow:0 0 10px var(--sports-green),0 6px 20px rgba(0,0,0,.85)}
.lg-avatar-img--sports{object-position:50% 50%}
.lg-bottom-slot--sports{background:rgba(14,28,52,.85);border:1px solid rgba(147,197,253,.35)}
.lg-action-btn--sports{background:#3ddc97;color:#06281b;border:1px solid rgba(255,255,255,.3);box-shadow:0 0 8px rgba(61,220,151,.4)}
.lg-action-btn--sports:disabled{opacity:.45;cursor:default;filter:grayscale(.3)}

/* ═══ חדר ארין — מעטפת בלבד ═══
   אותו מבנה flex של .manny-room (הוא תופס את אותו משבצת בתוך #screen-main, ולכן
   הוא חייב להסתיר את .chat-frame — אחרת שני ה-flex:1 היו מתחלקים ביניהם;
   זה בדיוק הדפוס ש-setMannyRoomVisible מיישם באותה מטרה). החדר עצמו ריק:
   אין בו תוכן עד שיתוסף עם איתמר. */
.sports-room{position:relative;flex:1;min-height:0;width:100%;z-index:10;display:none;flex-direction:column;background:#0b1220;overflow:hidden;font-family:inherit}

/* הסרגל התחתון המשותף מוצג בחדר ארין אך מושבת. העמעום מגיע מכאן ולא
   inline, כדי שיהיה מקור יחיד לאמת "החדר הזה ריק" — ולא כמה inline styles
   שישכחו להיסר. */
#chatInputBar.sports-room-locked{opacity:.42}
#chatInputBar.sports-room-locked .chat-ta,
#chatInputBar.sports-room-locked .action-btn,
#chatInputBar.sports-room-locked .embedded-send-btn{pointer-events:none}

/* ═══ עולם הספורט — המסך שבתוך חדר ארין ═══
   כל הכללים כאן תחת הקידומת .sw- ולכן אף כלל אחר בגיליון לא משתנה. הערכים הם החלטות איתמר
   מכלי העריכה (חלונית ריבוע מעוגל 112, מסגרת לבנה 2.5, זוהר 50%, שם 12px, שלוש בשורה).
   החלונית מצטמצמת ב-min(112px, 100%) כדי שברוחב 360 לא תיכנס לחלונית השכנה. */
.sw-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px 28px;direction:rtl;display:flex;flex-direction:column;gap:12px;color:#e2e8f0}
.sw-scroll>*{flex-shrink:0}
.sw-title{margin:0;text-align:center;font-size:26px;font-weight:700;color:#f2f7ff;line-height:1.2}
.sw-audience{display:flex;justify-content:center;gap:10px}
.sw-aud-btn{flex:1 1 0;max-width:160px;min-height:44px;padding:0 12px;border-radius:999px;font-family:inherit;font-size:14px;cursor:pointer;background:rgba(14,30,58,.78);border:1px solid rgba(147,197,253,.28);color:#dbe8fb;-webkit-tap-highlight-color:transparent}
.sw-aud-btn[aria-pressed="true"]{background:#3ddc97;border-color:#3ddc97;color:#06281b;font-weight:700}
.sw-search{position:relative}
.sw-search .sw-ico{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#9fb4d3;display:flex;pointer-events:none}
.sw-search-input{width:100%;height:48px;box-sizing:border-box;border-radius:14px;border:1px solid rgba(147,197,253,.35);background:rgba(7,13,27,.8);color:#e2e8f0;font-family:inherit;font-size:15px;padding:0 44px 0 14px;outline:none}
.sw-search-input::placeholder{color:rgba(226,236,255,.55)}
.sw-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.sw-chips::-webkit-scrollbar{display:none}
.sw-chip{min-height:40px;padding:0 16px;border-radius:999px;font-family:inherit;font-size:14px;white-space:nowrap;cursor:pointer;flex-shrink:0;background:rgba(14,30,58,.78);border:1px solid rgba(147,197,253,.28);color:#dbe8fb;-webkit-tap-highlight-color:transparent}
.sw-chip[aria-pressed="true"]{background:#3ddc97;border-color:#3ddc97;color:#06281b;font-weight:700}
.sw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 6px;justify-items:center}
.sw-tile{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;background:none;border:0;padding:4px 0;font-family:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sw-tile-img{display:block;box-sizing:border-box;width:min(112px,100%);aspect-ratio:1/1;border-radius:25px;overflow:hidden;border:2.5px solid #ffffff;box-shadow:0 0 16px rgba(255,255,255,.35);background:#0e1c36}
.sw-tile-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.sw-tile-label{font-size:12px;font-weight:500;color:#eef4ff;line-height:1.25;text-align:center}
.sw-dot{display:inline-block;width:8px;height:8px;border-radius:50%;border:1.5px solid #9fb4d3;box-sizing:border-box;margin-inline-end:5px;vertical-align:middle}
.sw-dot--full{background:#3ddc97;border-color:#3ddc97}
.sw-seller-bar{flex-shrink:0;padding:8px 16px 10px;background:#0b1220;border-top:1px solid rgba(147,197,253,.14)}
.sw-seller{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;color:#eaf2ff;background:rgba(14,30,58,.85);border:1px solid rgba(147,197,253,.3)}
.sw-seller-ico{display:flex;width:36px;height:36px;flex-shrink:0;border-radius:10px;align-items:center;justify-content:center;background:rgba(61,220,151,.12);border:1px solid rgba(61,220,151,.45);color:#7ff0bd}
.sw-seller-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
/* שורה אחת תמיד: הגודל נגזר מרוחב המסך כך שהמשפט (כ-22 em) נכנס ליד האייקון גם ברוחב 360. */
.sw-seller-title{font-size:clamp(9.5px,calc((100vw - 102px) / 22.5),14px);font-weight:700;white-space:nowrap}
.sw-seller-sub{font-size:12.5px;color:#a9bdd9;line-height:1.4;text-wrap:balance}
.sw-sport-shell{flex:1;min-height:0}
/* ═══ ארין: שיחה בחדר ענף (EFFI-12b) ═══
   כל הכללים תחת הקידומת .ec- (ושני כללי סרגל), ולכן אף כלל קיים בגיליון לא משתנה. */
.sw-sport-shell{flex-direction:column}
#chatInputBar.sports-room-text .action-btn,
#chatInputBar.sports-room-text label.medallion-cradle{opacity:.42;pointer-events:none}
.ec-root{flex:1;min-height:0;display:flex;flex-direction:column;direction:rtl;position:relative;color:#e2e8f0}
.ec-notice{flex-shrink:0;margin:8px 14px 0;padding:6px 10px;border-radius:10px;text-align:center;font-size:12px;line-height:1.4;color:#a9bdd9;background:rgba(14,30,58,.6);border:1px solid rgba(147,197,253,.18)}
.ec-log{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:8px;padding:12px 14px}
.ec-log>*{flex-shrink:0}
.ec-bubble{max-width:86%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}
.ec-bubble--erin{align-self:flex-start;background:rgba(15,23,42,.85);border:1px solid rgba(61,220,151,.32);color:#e2e8f0;border-bottom-left-radius:4px}
.ec-bubble--user{align-self:flex-end;background:#3ddc97;color:#06281b;font-weight:600;border-bottom-right-radius:4px}
.ec-chips{align-self:stretch;display:flex;flex-direction:column;gap:8px}
.ec-chips-title{font-size:13px;color:#a9bdd9}
.ec-chips-row{display:flex;gap:8px;flex-wrap:wrap}
.ec-chip{flex:1 1 140px;min-height:44px;padding:0 14px;border-radius:999px;font-family:inherit;font-size:14px;cursor:pointer;color:#dbe8fb;background:rgba(14,30,58,.78);border:1px solid rgba(147,197,253,.28);-webkit-tap-highlight-color:transparent}
.ec-chip:active{background:#3ddc97;border-color:#3ddc97;color:#06281b}
.ec-card{align-self:stretch;display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:16px;background:rgba(14,30,58,.85);border:1px solid rgba(61,220,151,.4)}
.ec-card--old{opacity:.45}
.ec-card-title{font-size:14px;font-weight:700;color:#eaf2ff}
.ec-card-text{font-size:13px;line-height:1.4;color:#c9d8ee}
.ec-card-note{font-size:12px;line-height:1.4;color:#a9bdd9}
.ec-card-btn{align-self:flex-start;min-height:44px;padding:0 18px;border-radius:999px;border:0;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;background:#3ddc97;color:#06281b;-webkit-tap-highlight-color:transparent}
.ec-card-btn:disabled{cursor:default;opacity:.6}
.ec-typing{flex-shrink:0;padding:4px 16px 8px;font-size:12px;color:#a9bdd9}
.ec-modal{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(3,8,20,.72)}
.ec-modal-box{max-width:420px;width:100%;box-sizing:border-box;padding:18px;border-radius:18px;background:#0e1c36;border:1px solid rgba(255,196,0,.55);display:flex;flex-direction:column;gap:12px}
.ec-modal-title{font-size:16px;font-weight:700;color:#ffe08a}
.ec-modal-text{font-size:14px;line-height:1.5;color:#e2e8f0}
.ec-modal-row{display:flex;gap:10px;flex-wrap:wrap}
.ec-modal-ok,.ec-modal-cancel{min-height:44px;padding:0 18px;border-radius:999px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ec-modal-ok{border:0;background:#3ddc97;color:#06281b}
.ec-modal-cancel{background:transparent;border:1px solid rgba(147,197,253,.4);color:#dbe8fb}

/* ═══ 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}
  /* חץ "קדימה" בלובי הוא מובייל בלבד, בדיוק כמו חץ החזרה (EFFI-lobby-forward-arrow.md).
     בפריסת הארבע-עמודות עוד אין לו משבצת תאולה באגף הימני של עמודת הלובי, והוספתו
     הייתה מזיזה את כל שאר האייקונים באותו אגף. */
  #forwardToRoomBtn{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;overflow:hidden}
  /* The copied background layers (.space-abyss, .nebula-orb, .stars-layer, .star-cluster,
     .shooting-star) are positioned in vw/vh — VIEWPORT units, not column units — so the parts of
     the star field that fall outside this 25%-wide column have to be clipped here rather than
     bleeding over columns 2-4. overflow:hidden on the column does that; the column's own inner
     scrollers (#claikyColumnMessages etc.) keep scrolling normally inside it. */
  #claikyColumn > .space-abyss{pointer-events:none}
  #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%}}

/* ═══════════════════════════════════════════════════════════════════════════
   חדר מני — שלב 1 (1א–1ה)
   ה-CSS מנוע את המסכים דרך המאפיין data-mrk-state שמוגדר ב-manny-room.js
   (setState). כל מסך מוסתר ב-CSS ולא ב-JS — כך שמצב אחד של האמת מנהל
   גם את מה שנראה.
   ═══════════════════════════════════════════════════════════════════════════ */

/* חדר מני תופס את אותו משבצת flex של .chat-frame (ראו .avatar-video-frame שפועל כך
   בדיוק): כותרת משותפת למעלה, תחתית קלט משותפת למטה, והחדר ביניהם — בלי לכסות אותן
   ובלי pixel-fix. כשהחדר נפתח, chat.js מסתיר את .chat-frame (ראו setMannyRoomVisible) כדי
   ששני ה-flex:1 לא יתחלקו בין המסך. */
.manny-room{position:relative;flex:1;min-height:0;width:100%;z-index:10;display:none;flex-direction:column;background:#0b1220;overflow:hidden;font-family:inherit}
/* .mr-inner הוא עמוד התוכן היחיד: הכוכבים (position:absolute בתוך .manny-room) נשארים
   מאחור, וכל מה שנגלל נורה בתוך עמודה אחת עם padding קבוע. */
.mr-inner{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 14px 14px;box-sizing:border-box;gap:10px}

/* ── זהות מני: דמותו מוצגת במדליון המשותף של הכותרת (כמו כל מומחה פעיל), לא כאן ── */

/* ── 1ב — תצוגה מקדימה: שתי עמודות ── */
.mr-preview{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.mr-preview-cols{flex:1;min-height:0;display:flex;gap:10px}
.mr-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:12px;background:rgba(15,23,42,.72);border:1px solid rgba(0,210,255,.22);overflow-y:auto}
.mr-col-title{margin:0;font-size:13px;font-weight:800;color:#00d2ff}
.mr-col-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.mr-col-item{font-size:13px;line-height:1.4;color:#e2e8f0}
.mr-col-empty{font-size:12px;color:#64748b;font-style:italic}
.mr-preview-note{flex-shrink:0;margin:0;font-size:11px;color:#94a3b8;text-align:center}

/* ── 1ג — עריכה ישירה ── */
.mr-editor{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
.mr-editor-tabs{flex-shrink:0;display:flex;gap:8px}
.mr-tab{flex:1;padding:9px 10px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#cbd5e1;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.mr-tab.is-active{color:#0b1220;background:#00d2ff;border-color:#00d2ff;box-shadow:0 0 12px rgba(0,210,255,.45)}
.mr-cards{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.mr-card{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;background:rgba(15,23,42,.78);border:1px solid rgba(255,255,255,.1)}
.mr-card-qty{flex-shrink:0;min-width:26px;text-align:center;font-size:12px;font-weight:800;color:#0b1220;background:#00d2ff;border-radius:7px;padding:3px 5px}
.mr-card-text{flex:1;min-width:0;font-size:13px;color:#e2e8f0;line-height:1.35;overflow-wrap:anywhere}
.mr-card-edit-input{flex:1;min-width:0;background:rgba(255,255,255,.08);border:1px solid #00d2ff;border-radius:7px;padding:6px 8px;color:#fff;font-size:13px;font-family:inherit}
.mr-card-edit,.mr-card-del{flex-shrink:0;background:transparent;border:none;font-size:15px;cursor:pointer;padding:2px;line-height:1}
.mr-empty{margin:0;padding:14px 4px;font-size:12px;color:#64748b;text-align:center}
.mr-add{flex-shrink:0;display:flex;gap:8px}
.mr-add-input{flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid rgba(0,210,255,.3);border-radius:9px;padding:10px;color:#fff;font-size:13px;font-family:inherit}
.mr-add-btn{flex-shrink:0;padding:10px 16px;border-radius:9px;border:none;background:#00d2ff;color:#0b1220;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit}

/* ── 1ד/1ה — תחנות המומחים ── */
.mr-stations-wrap{flex:1;min-height:0;display:flex;flex-direction:column;gap:9px;overflow-y:auto}
.mr-stations-title{flex-shrink:0;margin:0;font-size:14px;font-weight:800;color:#e0f2fe}
.mr-stations-hint{flex-shrink:0;margin:0;font-size:11px;color:#94a3b8}
.mr-stations{display:flex;flex-direction:column;gap:8px}
.mr-station{display:flex;flex-direction:column;gap:3px;width:100%;text-align:right;padding:10px 11px;border-radius:11px;background:rgba(15,23,42,.78);border:1px solid rgba(255,255,255,.12);cursor:pointer;font-family:inherit}
.mr-station.is-picked{border-color:#00d2ff;background:rgba(0,210,255,.12);box-shadow:0 0 12px rgba(0,210,255,.3)}
.mr-station-head{font-size:14px;font-weight:800;color:#e0f2fe}
.mr-station-domain{font-size:11px;color:#7dd3fc}
.mr-station-items{font-size:12px;color:#cbd5e1;line-height:1.4;overflow-wrap:anywhere}
.mr-picked{display:flex;flex-wrap:wrap;gap:7px;padding:4px 0}
.mr-picked-placeholder{font-size:12px;color:#64748b;font-style:italic}
.mr-picked-chip{padding:6px 10px;border-radius:999px;border:1px solid rgba(0,210,255,.45);background:rgba(0,210,255,.14);color:#e0f2fe;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.mr-kai-note{flex-shrink:0;padding:10px 11px;border-radius:10px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.4);color:#fde68a;font-size:12px;line-height:1.45}
.mr-stations-actions{flex-shrink:0;display:flex;flex-direction:column;gap:8px;padding-top:4px}
.mr-preview-actions{flex-shrink:0;display:flex;flex-direction:column;gap:8px;padding-top:4px}
.mr-primary,.mr-secondary{padding:12px;border-radius:10px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit}
.mr-primary{border:none;background:#00d2ff;color:#0b1220;box-shadow:0 0 14px rgba(0,210,255,.4)}
.mr-primary:disabled{background:rgba(148,163,184,.4);color:#64748b;box-shadow:none;cursor:default}
.mr-secondary{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#cbd5e1}

/* ── 1א — צ'אט ── */
.mr-chat{flex:1;min-height:0;display:flex;flex-direction:column;gap:9px}
.mr-chat-log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:2px}
.mr-bubble{max-width:86%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.mr-bubble-manny{align-self:flex-start;background:rgba(15,23,42,.85);border:1px solid rgba(0,210,255,.28);color:#e2e8f0;border-bottom-left-radius:4px}
.mr-bubble-user{align-self:flex-end;background:rgba(0,210,255,.9);color:#0b1220;font-weight:600;border-bottom-right-radius:4px}
/* הכיתוב החי של ההקלדה (בועת .msg-live מ־rest-voice.js) מצויר גם כאן כשחדר מני פתוח, אבל
   הוא נושא את מחלקת .msg/.msg-user של צ'אט קלייקי - גוון זהוב, מרווחים ורוחב שונים, שנראו
   שבורים מעל צ'אט מני הסגול-תכלת. משכפלים כאן את מראה בועת המשתמש של מני, ושומרים את
   .msg-live{opacity:.6} מלמעלה כדי שהטקסט הזמני ייראה עדין ולא כמו הודעה סופית. */
#mrChatLog .msg-live{align-self:flex-end;max-width:86%;padding:9px 12px;font-size:14px;line-height:1.45;border-radius:14px;background:rgba(0,210,255,.9);color:#0b1220;font-weight:600;border:0.5px solid rgba(0,210,255,.9);border-bottom-right-radius:4px}
/* בחירת "להמשיך / לעבור" — מופיעה רק כשהשרת מחזיר offer_choice */
.mr-choice{flex-shrink:0;display:flex;flex-direction:column;gap:7px}
.mr-choice-btn{padding:11px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.mr-choice-more{border:1px solid #00d2ff;background:rgba(0,210,255,.12);color:#bae6fd}
.mr-choice-done{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#e2e8f0}

.mr-typing{position:absolute;bottom:8px;right:14px;display:flex;gap:4px;padding:7px 10px;border-radius:999px;background:rgba(15,23,42,.9);border:1px solid rgba(0,210,255,.25)}
.mr-dot{width:6px;height:6px;border-radius:50%;background:#00d2ff;animation:mrTyping 1.2s ease-in-out infinite}
.mr-dot:nth-child(2){animation-delay:.2s}
.mr-dot:nth-child(3){animation-delay:.4s}
@keyframes mrTyping{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ══ מפתח המצבים ══
   ברירת מחדל: צ'אט (1א). כל מסך אחר מוסתר כאן, והמסך הפעיל מוצג לפי
   data-mrk-state — בלי זה כל ה-sec4ים היו מוצגים זה על זה (הם בנויים כ-flex
   column אחד, לא position:absolute). */
.mr-chat,.mr-preview,.mr-editor,.mr-stations-wrap,.mr-done{display:none}
.manny-room[data-mrk-state="chat"] .mr-chat{display:flex}
.manny-room[data-mrk-state="preview"] .mr-preview{display:flex}
.manny-room[data-mrk-state="editor"] .mr-editor{display:flex}
.manny-room[data-mrk-state="stations"] .mr-stations-wrap{display:flex}
.manny-room[data-mrk-state="done"] .mr-done{display:flex}

/* ══ מסך הסיום (fix 1) ══
   בעבר לא היה מסך כזה: כשלא נבחרו פריטי קאי (המקרה הרגיל) הכפתור "כן, בואו
   נתחיל" פשוט לא עשה דבר, והמשתמש נשאר על מסך דומם בלי הסבר. כעת תמיד יש
   מסך שמסכם את הבחירה. */
.mr-done{align-items:center;justify-content:center;padding:24px 18px}
.mr-done-box{
  width:100%;max-width:460px;padding:22px 20px;border-radius:18px;
  background:rgba(15,23,42,.92);border:1px solid rgba(0,210,255,.28);
  display:flex;flex-direction:column;gap:10px;text-align:center;
}
.mr-done-line{margin:0;font-size:16px;line-height:1.55;color:#e2e8f0}
.mr-done-kai{
  font-size:14px;color:#7dd3fc;background:rgba(0,210,255,.07);
  border:1px solid rgba(0,210,255,.2);border-radius:12px;padding:10px 12px;
}

/* ══ בורר כמות (fix 2) ══
   הכפתורים קטנים ונגיעים לאצבע; המספר ביניהם מרכז וקבוע רוחב, כדי שהמספר לא
   יקפוץ ויזיז את הטקסט שלפניו בכל שינוי כמות. */
.mr-qty-btn{
  flex-shrink:0;width:30px;height:30px;border-radius:9px;
  border:1px solid rgba(0,210,255,.35);background:rgba(0,210,255,.1);
  color:#7dd3fc;font-size:17px;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.mr-qty-btn:active{background:rgba(0,210,255,.28)}
.mr-card-qty{min-width:26px;text-align:center;font-size:15px;font-weight:800;color:#e2e8f0}

/* ══ פריטים ללא ודאות (fix 3) ══
   אזור נפרד במסך 1ה: כל פריט עם שתי פעולות ברורות — לקאי או להסיר — כדי
   שהמשתמש יוכל להחליט, במקום שהפריט ייעלם מבלי זכר. */
.mr-unmatched{
  margin:14px 0 4px;padding:12px;border-radius:14px;
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.32);
  display:flex;flex-direction:column;gap:8px;
}
.mr-unmatched-title{font-size:14px;color:#fcd34d}
.mr-unmatched-hint{font-size:12.5px;color:#94a3b8}
.mr-unmatched-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;padding:8px 10px;border-radius:11px;background:rgba(15,23,42,.6);
}
.mr-unmatched-name{flex:1;min-width:120px;font-size:14.5px;color:#e2e8f0}
.mr-unmatched-actions{display:flex;gap:7px;flex-wrap:wrap}
.mr-mini-btn{
  padding:7px 11px;border-radius:9px;font-size:12.5px;font-weight:700;cursor:pointer;
  border:1px solid rgba(148,163,184,.4);background:rgba(148,163,184,.12);color:#cbd5e1;
}
.mr-mini-kai{border-color:rgba(0,210,255,.4);background:rgba(0,210,255,.12);color:#7dd3fc}
.mr-mini-drop{border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.1);color:#fca5a5}

@media (min-width:720px){
  .mr-inner{padding:18px 22px 20px}
  .mr-preview-cols{gap:16px}
  .mr-bubble{max-width:70%;font-size:15px}
  .mr-stations{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
}
/* מקלדת פתוחה במובייל דוחסת את המסך — הפסקה למשלוח והבחירה נשארים נגישים. */
@media (max-height:520px){
  .mr-bubble{font-size:13px}
}

/* ═══ שער הרכישה והאזהרה הקבועה (EFFI-12c) ═══ */
#aiFooterNotice{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 1px);z-index:2147483000;pointer-events:none;text-align:center;direction:rtl;padding:0 8px;font-size:10px;line-height:1.2;color:rgba(205,218,240,.66);text-shadow:0 0 3px #000,0 0 2px #000}
.pg-overlay{position:fixed;inset:0;z-index:2147482000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(2,6,16,.82);direction:rtl}
.pg-box{width:100%;max-width:440px;max-height:88vh;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:18px;background:#0e1c36;border:1px solid rgba(255,196,0,.55);color:#e8eef9}
.pg-title{font-size:15px;font-weight:700;color:#ffe08a}
.pg-text{font-size:14px;line-height:1.55}
.pg-safety-text{overflow-y:auto}
.pg-terms-scroll{overflow-y:auto;max-height:46vh;font-size:13px;line-height:1.5;padding-inline-end:4px}
.pg-terms-scroll ul{margin:6px 0 0;padding-inline-start:18px}
.pg-row{display:flex;gap:10px;flex-wrap:wrap}
.pg-ok,.pg-back{min-height:44px;padding:0 16px;border-radius:999px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pg-ok{border:0;background:#3ddc97;color:#06281b;flex:1 1 auto}
.pg-back{background:transparent;border:1px solid rgba(147,197,253,.4);color:#dbe8fb}

/* ═══ שמיים גלויים בחדר ארין ובחדר מני (EFFI-12d) ═══
   .sports-room ו-.manny-room הוגדרו בעבר עם רקע אטום (#0b1220) שכיסה את הכוכבים, הכוכבים הנופלים והערפיליות של המסך הראשי.
   שקוף כאן = אותו שמיים כמו בלובי ובחדרי המומחים. הכוכבים שחדר מני צייר בעצמו מוסתרים, כדי שלא יהיו שתי שכבות כוכבים. */
.sports-room{background:transparent}
.manny-room{background:transparent}
.manny-room>.stars-bg{display:none}
.sw-seller-bar{background:rgba(11,18,32,.55)}

/* ═══ כפתורי זכוכית קלים (EFFI-12i) ═══
   אותו מראה "זכוכית" כמו הסרגלים (כהה חצי שקוף, קצה תכלת בוהק, הדגשה עליונה), על אלמנט אחד בלי מבנה מקונן ובלי אפקטים כבדים:
   ארבעה צללים בלבד, בלי backdrop-filter, בלי filter, בלי mix-blend-mode, בלי will-change. הלחיצה היא :active (במגע אין hover).
   לא משנה גודל, ריווח או פריסה של שום כפתור: הקצה מצויר כצל פנימי (לא כגבול), ולכן אותם מידות בדיוק כמו היום.
   נוגע רק בכפתורים הראשיים (כפתור הלובי, כרטיסי ארין והצ'יפים שלהם, חלונות השער, וכפתורי הרכישה). לא נוגע ברשימות ארוכות (הצעות מחיר, תשובות מהירות). */
.lg-btn-blue,.lg-btn-gold,.lg-action-btn--sports,.ec-card-btn,.ec-chip,.pg-ok,.pg-back{
  --g-tint:rgba(37,99,235,.62);--g-edge:rgba(191,219,254,.78);--g-text:#f2f7ff;
  color:var(--g-text);
  background:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.07) 46%,rgba(255,255,255,0) 100%),var(--g-tint);
  border-color:transparent;
  box-shadow:inset 0 0 0 1px var(--g-edge),inset 0 1px 0 1px rgba(255,255,255,.28),inset 0 -9px 12px -8px rgba(4,10,24,.55),0 3px 10px rgba(0,0,0,.42);
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  letter-spacing:0;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease;
}
.lg-btn-gold{--g-tint:rgba(245,158,11,.66);--g-edge:rgba(253,230,170,.82);--g-text:#fffaf0}
.lg-action-btn--sports,.ec-card-btn,.pg-ok{--g-tint:rgba(34,197,130,.55);--g-edge:rgba(167,243,208,.8);--g-text:#eafff5}
.ec-chip,.pg-back{--g-tint:rgba(14,30,58,.58);--g-edge:rgba(147,197,253,.55);--g-text:#dbe8fb}
.lg-btn-blue:active,.lg-btn-gold:active,.lg-action-btn--sports:active,.ec-card-btn:active,.ec-chip:active,.pg-ok:active,.pg-back:active{
  transform:scale(.97);
  background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 60%),var(--g-tint);
  border-color:transparent;color:var(--g-text);
  box-shadow:inset 0 0 0 1px var(--g-edge),inset 0 2px 7px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4);
}
/* כפתורי הלובי היו עם hover (הגדלה וסינון בהירות): במגע הוא "נתקע" ו-filter יקר, לכן מבוטל */
.lg-btn-blue:hover,.lg-btn-gold:hover,.lg-action-btn--sports:hover{transform:none;filter:none}
.lg-btn-blue:active:hover,.lg-btn-gold:active:hover,.lg-action-btn--sports:active:hover{transform:scale(.97)}
.lg-action-btn--sports:disabled,.ec-card-btn:disabled{opacity:.45;box-shadow:none}
/* כפתורי הרכישה בכרטיסי מוצר: הצבע והטקסט של כל מומחה נשארים, מתווספים רק קצה, הדגשה וצל */
.pc-buy,.ph-buy{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 1px 0 1px rgba(255,255,255,.3),inset 0 -8px 10px -7px rgba(0,0,0,.35),0 3px 9px rgba(0,0,0,.4);-webkit-tap-highlight-color:transparent;transition:transform .12s ease}
.pc-buy:active,.ph-buy:active{transform:scale(.97);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 2px 6px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.4)}

/* ═══ שאלה אחת עם ממשק: כפתורים ושדה מספרי (EFFI-12j) ═══ */
.ec-ask{align-self:stretch;display:flex;flex-direction:column;gap:8px}
.ec-ask-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ec-ask-field{display:flex;flex-direction:column;gap:4px;flex:1 1 110px;min-width:0}
.ec-ask-label{font-size:12px;color:#a9bdd9}
.ec-ask-input-wrap{display:flex;align-items:center;gap:6px}
.ec-ask-input{flex:1;min-width:0;height:44px;box-sizing:border-box;border-radius:12px;border:1px solid rgba(147,197,253,.45);background:rgba(7,13,27,.82);color:#e8eef9;font-family:inherit;font-size:16px;text-align:center;direction:ltr;padding:0 8px}
.ec-ask-input:focus{outline:none;border-color:#3ddc97;box-shadow:0 0 0 2px rgba(61,220,151,.25)}
.ec-ask-unit{font-size:13px;color:#a9bdd9;min-width:30px}
.ec-ask-err{font-size:12px;color:#fca5a5;min-height:16px}

/* ═══ לד בלחיצה (EFFI-12k) ═══
   בזמן שהאצבע על הכפתור נדלק זוהר צבעוני סביבו (טבעת דקה ועוד הילה), ומתעמעם בשחרור. סטטי: בלי אנימציה, בלי filter, בלי blur, בלי will-change.
   כשהכפתור לא לחוץ אין שום עלות. הצבע לפי סוג הכפתור (כחול, זהב, ירוק, ניטרלי). נשען על בלוק הזכוכית (12ט) ומחליף רק את מצב :active. */
.lg-btn-blue,.lg-btn-gold,.lg-action-btn--sports,.ec-card-btn,.ec-chip,.pg-ok,.pg-back,.pc-buy,.ph-buy{--g-glow:rgba(125,185,255,.95);--g-halo:rgba(96,165,250,.5);transition:transform .12s ease,box-shadow .16s ease-out}
.lg-btn-gold,.pc-buy,.ph-buy{--g-glow:rgba(251,191,36,.95);--g-halo:rgba(245,158,11,.5)}
.lg-action-btn--sports,.ec-card-btn,.pg-ok{--g-glow:rgba(52,211,153,.95);--g-halo:rgba(34,197,130,.5)}
.lg-btn-blue:active,.lg-btn-gold:active,.lg-action-btn--sports:active,.ec-card-btn:active,.ec-chip:active,.pg-ok:active,.pg-back:active{
  box-shadow:inset 0 0 0 1px var(--g-edge),inset 0 2px 7px rgba(0,0,0,.55),0 0 0 2px var(--g-glow),0 0 12px 3px var(--g-glow),0 0 26px 7px var(--g-halo);
}
.pc-buy:active,.ph-buy:active{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 2px 6px rgba(0,0,0,.45),0 0 0 2px var(--g-glow),0 0 12px 3px var(--g-glow),0 0 26px 7px var(--g-halo);
}
.lg-action-btn--sports:disabled:active,.ec-card-btn:disabled:active{box-shadow:none;transform:none}

/* ═══ הסבר חיפוש בעולם הספורט (EFFI-12q) ═══
   כשנכתב בעולם הספורט טקסט שאינו שם של ענף (למשל "קסדה"), הוא נשמר ונשלח לארין עם בחירת ענף: שורת הסבר קצרה מתחת לחיפוש. */
.sw-pending-hint{margin:8px 14px 0;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.4;text-align:center;color:#d6e6ff;background:rgba(37,99,235,.2);border:1px solid rgba(147,197,253,.35)}

/* ═══ לובי חלק (EFFI-12p) ═══
   המדידה (לובי אמיתי, דפדפן, בלי ואחרי): שני אפקטי טשטוש יחד גורמים לקפיצות בלובי ובעולם הספורט (שקוף מעל אותו רקע), כי הרקע שמאחוריהם נע כל הזמן (כוכבים וכדורי ערפילית) והטשטוש מחושב מחדש בכל פריים:
   1. backdrop-filter על כרטיס הלובי: הכרטיס כבר אטום ב-90% (rgba .9), ולכן הטשטוש שמאחוריו כמעט לא נראה. הסרה לא משנה את המראה.
   2. filter:blur על כדורי הערפילית: הכדורים כבר צבועים בהדרגתיות רדיאלית שדועכת לשקיפות. הסרה משאירה אותם רכים, עם קצה מעט חד יותר.
   מבלי לגעת בשום דבר אחר: הצבעים, האנימציות והפריסה נשארים. */
.lg-card{-webkit-backdrop-filter:none;backdrop-filter:none}
.nebula-orb{filter:none}

/* ═══ לובי חלק 2 (EFFI-12p2) ═══
   מדידה נוספת בעולם הספורט: מיזוג הצבעים (mix-blend-mode:screen) של הכדורים הנעים מכריח חישוב מחדש של כל מה שמתחתיהם בכל פריים. הכדורים כחולים על רקע כמעט שחור (#000206),
   ושם screen ו-normal נראים כמעט אותו דבר, ולכן הסרה אינה משנה את המראה אבל מוסיפה שיפור משמעותי בחלקות. */
.nebula-orb{mix-blend-mode:normal}

/* ═══ ללא רקעים (EFFI-12t) ═══
   החלטת איתמר: אין שום רקע, בשום מסך ובשום חדר (לובי, כל החדרים, עולם הספורט, מרכז המוצרים, הכניסה וההרשמה): רק שחור. אנימציית הכניסה עצמה (הלוגו) לא נוגעים בה.
   זמני, עד שייבנה רקע אחד לכולם שרק הצבע שלו משתנה. כולל: השמיים (כוכבים, כדורי ערפילית, מטאורים, שכבת העומק), הרקעים הצבעוניים של המומחים, והצבע הכחול-כהה של המסכים.
   כרטיסים, סרגלים, בועות וכפתורים הם רכיבי ממשק ולא רקע, ולכן לא משתנים. כדי להחזיר: מוחקים את הבלוק הזה. */
html,body,#screen-intro,#screen-onboarding,#screen-main{background:#000!important}
.space-abyss,.nebula-orb,.stars-layer,.star-cluster,.star,.stars-bg,.micro-stars-dense-1,.micro-stars-dense-2,.small-stars-dense,.shooting-star{display:none!important}
.product-hub,#screen-main[class*="theme-"] .product-hub,.fullscreen-overlay,#kaiRoom,.kai-room{background:#000!important}

/* ═══ עמוד עולם הספורט: כפתורי הקהל והדגשת הענף (EFFI-12z) ═══
   1. מצב "לחוץ" של שחקנים מקצועיים / אוהדים שרופים: כחול וזהב של האפליקציה (במקום הירוק הקודם).
   2. כשנכנסים עם טקסט ("כפפת בייסבול") והמשתמש עוד לא בחר מי הוא: שני הכפתורים מהבהבים לסירוגין (זוהר כחול, אחר כך זוהר זהב), עד שנבחר אחד.
      ההבהוב הוא אטימות בלבד של שכבה נפרדת (זול לטלפון). עם "הפחתת תנועה" במכשיר: זוהר קבוע בלי הבהוב.
   3. הענף שהטקסט מזכיר מודגש במסגרת זהב (סטטית). */
.sw-audience{gap:12px;margin-top:2px}
.sw-aud-btn{position:relative;overflow:visible;font-weight:600}
.sw-aud-btn[aria-pressed="true"][data-aud="players"]{background:linear-gradient(180deg,#3b82f6 0%,#1d4ed8 100%);border-color:#93c5fd;color:#ffffff;font-weight:700;box-shadow:0 0 14px rgba(59,130,246,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.sw-aud-btn[aria-pressed="true"][data-aud="fans"]{background:linear-gradient(180deg,#fbbf24 0%,#d97706 100%);border-color:#fde68a;color:#1c1203;font-weight:700;box-shadow:0 0 14px rgba(251,191,36,.55),inset 0 1px 0 rgba(255,255,255,.45)}
.sw-aud-attn .sw-aud-btn::after{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:inherit;pointer-events:none;opacity:0;animation:sw-aud-blink 2.4s ease-in-out infinite}
.sw-aud-attn .sw-aud-btn[data-aud="players"]::after{box-shadow:0 0 0 2px rgba(147,197,253,.9),0 0 18px 4px rgba(59,130,246,.75)}
.sw-aud-attn .sw-aud-btn[data-aud="fans"]::after{box-shadow:0 0 0 2px rgba(253,230,138,.9),0 0 18px 4px rgba(251,191,36,.7);animation-delay:1.2s}
@keyframes sw-aud-blink{0%,100%{opacity:0}25%,45%{opacity:1}70%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sw-aud-attn .sw-aud-btn::after{animation:none;opacity:.9}}
.sw-tile--hint .sw-tile-img{border-color:#fbbf24;box-shadow:0 0 18px rgba(251,191,36,.6)}

/* ═══ עולם הספורט: מיקרופון פעיל והבהוב לסירוגין שלא תלוי בהגדרות המכשיר (EFFI-12aa) ═══
   1. המיקרופון בסרגל התחתון פעיל בעולם הספורט ובחדר ארין (היה עמום ונעול).
   2. ההבהוב לסירוגין של "שחקנים מקצועיים" ו"אוהדים שרופים" מנוהל עכשיו על ידי הקוד (מחליף את הכחול והזהב כל 1.2 שניות דרך data-blink),
      ולא על ידי אנימציית CSS: אנימציית CSS לא רצה במכשיר שבו הוגדר "הסרת אנימציות" / "הפחתת תנועה", ושם בדיוק שני הכפתורים נראו דלוקים כל הזמן. */
#chatInputBar.sports-room-text label.medallion-cradle{opacity:1;pointer-events:auto}
.sw-aud-attn .sw-aud-btn::after{animation:none;opacity:0;transition:opacity .35s ease}
.sw-aud-attn[data-blink="players"] .sw-aud-btn[data-aud="players"]::after,.sw-aud-attn[data-blink="fans"] .sw-aud-btn[data-aud="fans"]::after{opacity:1}

/* ═══ קלייקי הום — כרטיס הלובי (כחול-תכלת) ═══
   אותו כרטיס בדיוק כמו ארין/מני: רק הצבע שונה. אף גודל לא נקבע כאן, חוץ מ-margin-top שמשכפל את הכלל של שאר הכרטיסים
   כדי שהדמות לא תיחתך (בסיס clamp(), ובמובייל 58px/46px בדיוק כמו .lg-sports-card). */
.lg-home-card{margin-top:clamp(34px,5vh,42px)}
#lobbyGate .lg-home-card{margin-top:58px}
#lobbyGate.lg-tight .lg-home-card{margin-top:46px}
.lg-card--home{--home-blue:#38bdf8;border:1.2px solid var(--home-blue);box-shadow:0 0 12px rgba(56,189,248,.38),0 0 24px rgba(56,189,248,.18),inset 0 0 10px rgba(56,189,248,.22),0 6px 20px rgba(0,0,0,.7)}
.lg-avatar-badge--home{box-sizing:border-box;background:rgba(14,28,52,.85);border:2px solid var(--home-blue);box-shadow:0 0 10px var(--home-blue),0 6px 20px rgba(0,0,0,.85)}
.lg-bottom-slot--home{background:rgba(14,28,52,.85);border:1px solid rgba(147,197,253,.35)}
.lg-action-btn--home{
  --g-tint:rgba(14,116,194,.62);--g-edge:rgba(186,230,253,.8);--g-text:#f0f9ff;--g-glow:rgba(56,189,248,.95);--g-halo:rgba(14,165,233,.5);
  color:var(--g-text);
  background:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.07) 46%,rgba(255,255,255,0) 100%),var(--g-tint);
  border-color:transparent;
  box-shadow:inset 0 0 0 1px var(--g-edge),inset 0 1px 0 1px rgba(255,255,255,.28),inset 0 -9px 12px -8px rgba(4,10,24,.55),0 3px 10px rgba(0,0,0,.42);
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  letter-spacing:0;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,box-shadow .16s ease-out;
}
.lg-action-btn--home:hover{transform:none;filter:none}
.lg-action-btn--home:active,.lg-action-btn--home:active:hover{
  transform:scale(.97);
  background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 60%),var(--g-tint);
  border-color:transparent;color:var(--g-text);
  box-shadow:inset 0 0 0 1px var(--g-edge),inset 0 2px 7px rgba(0,0,0,.55),0 0 0 2px var(--g-glow),0 0 12px 3px var(--g-glow),0 0 26px 7px var(--g-halo);
}

/* ═══ קלייקי הום — החדר ═══
   אותו מבנה flex של .sports-room (תופס את משבצת .chat-frame). הכול תחת הקידומת .hm- ולכן אף כלל קיים לא משתנה. */
.home-room{position:relative;flex:1;min-height:0;width:100%;z-index:10;display:none;flex-direction:column;background:transparent;overflow:hidden;font-family:inherit;direction:rtl;color:#e6edf7}
#chatInputBar.home-room-locked{opacity:.42}
#chatInputBar.home-room-locked .chat-ta,
#chatInputBar.home-room-locked .action-btn,
#chatInputBar.home-room-locked .embedded-send-btn{pointer-events:none}
.hm-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 12px 12px;display:flex;flex-direction:column;gap:10px}
.hm-scroll>*{flex-shrink:0}
.hm-split{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hm-mini{background:linear-gradient(135deg,rgba(14,28,54,.95) 0%,rgba(10,20,40,.9) 100%);border:1px solid rgba(147,197,253,.35);border-radius:22px;padding:8px 12px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 4px 22px rgba(56,189,248,.2);min-height:72px;min-width:0}
.hm-mini--balance{border-color:rgba(245,158,11,.45);background:linear-gradient(135deg,rgba(245,158,11,.15) 0%,rgba(14,28,54,.92) 100%)}
.hm-mini-title{margin:0;font-size:11.5px;color:#94a3b8;font-weight:500}
.hm-mini-val{font-size:16px;font-weight:700;color:#fff;margin-top:2px;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;overflow-wrap:anywhere}
.hm-loc-head{display:flex;justify-content:space-between;align-items:center;gap:4px}
.hm-loc-link{background:none;border:0;padding:0;font:inherit;font-size:10px;color:#38bdf8;cursor:pointer;text-decoration:underline;font-weight:600;white-space:nowrap}
.hm-loc-edit{display:none;align-items:center;gap:4px;margin-top:3px}
.hm-loc-input{flex:1;min-width:0;height:28px;box-sizing:border-box;border-radius:6px;border:1px solid #38bdf8;background:#091224;color:#fff;font-family:inherit;font-size:16px;padding:2px 6px;text-align:right}
.hm-loc-send{width:28px;height:28px;border-radius:6px;background:#2563eb;border:0;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0}
.hm-radius{background:rgba(14,28,54,.9);border:1px solid rgba(147,197,253,.3);border-radius:16px;padding:8px 12px;display:flex;flex-direction:column;gap:4px}
.hm-radius-head{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:11.5px}
.hm-radius-title{color:#e2e8f0;font-weight:500}
.hm-radius-lbl{color:#fff}
.hm-radius-count{color:#38bdf8;font-weight:700;background:rgba(56,189,248,.15);padding:2px 8px;border-radius:10px;white-space:nowrap}
.hm-radius-input{width:100%;height:6px;accent-color:#38bdf8;cursor:pointer;margin:6px 0}
.hm-radius-marks{display:flex;justify-content:space-between;font-size:9.5px;color:#94a3b8}
.hm-chips{min-height:46px;display:flex;gap:6px;overflow-x:auto;white-space:nowrap;padding:4px 2px 6px;align-items:center}
.hm-chips::-webkit-scrollbar{height:3px}
.hm-chip{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border-radius:16px;font-family:inherit;font-size:12px;font-weight:500;background:rgba(14,28,54,.85);border:1px solid #38bdf8;color:#94a3b8;cursor:pointer;user-select:none;transition:background .2s ease,color .2s ease}
.hm-chip--active{background:#2563eb;color:#fff;border-color:#60a5fa;box-shadow:0 0 12px rgba(59,130,246,.5);font-weight:600}
.hm-list{display:flex;flex-direction:column;gap:10px}
.hm-list>*{flex-shrink:0}
.hm-empty{text-align:center;padding:30px 10px;color:#94a3b8;font-size:13px;line-height:1.5}
.hm-card{background:rgba(15,27,53,.92);border:1.5px solid #38bdf8;border-radius:24px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;box-shadow:0 4px 26px rgba(56,189,248,.18)}
.hm-card-head{display:flex;align-items:center;gap:12px}
.hm-logo{width:56px;height:56px;border-radius:14px;color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.hm-meta{flex:1;min-width:0}
.hm-meta h4{margin:0;font-size:17px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-meta p{margin:2px 0 0;font-size:11.5px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-dist{font-size:10px;color:#7dd3fc;background:rgba(56,189,248,.18);padding:2px 6px;border-radius:4px;display:inline-flex;align-items:center;gap:2px;margin-top:3px;max-width:100%;box-sizing:border-box}
.hm-tag{font-size:10.5px;padding:3px 7px;border-radius:6px;font-weight:600;white-space:nowrap;align-self:flex-start}
.hm-tag-loss-leader{background:rgba(16,185,129,.15);color:#6ee7b7;border:1px solid rgba(16,185,129,.3)}
.hm-tag-gift{background:rgba(245,158,11,.15);color:#fcd34d;border:1px solid rgba(245,158,11,.3)}
.hm-tag-discount{background:rgba(56,189,248,.15);color:#7dd3fc;border:1px solid rgba(56,189,248,.3)}
.hm-tag-global{background:rgba(168,85,247,.2);color:#d8b4fe;border:1px solid rgba(168,85,247,.4)}
.hm-voucher{background:rgba(8,15,30,.75);border:1px dashed rgba(147,197,253,.4);border-radius:12px;padding:8px 10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.hm-voucher-title{font-size:12.5px;color:#e2e8f0;font-weight:500;min-width:0}
.hm-voucher-price{font-size:13.5px;font-weight:700;color:#f59e0b;white-space:nowrap}
.hm-card-foot{display:flex;justify-content:space-between;align-items:center;gap:4px;flex-wrap:wrap}
.hm-foot-left{display:flex;align-items:center;gap:6px}
.hm-value{font-size:11px;color:#93c5fd;font-weight:600;background:rgba(37,99,235,.2);padding:2px 7px;border-radius:6px;white-space:nowrap}
.hm-stock{font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px;white-space:nowrap}
.hm-stock--low{color:#f87171;background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.4)}
.hm-stock--mid{color:#fde047;background:rgba(234,179,8,.18)}
.hm-stock--normal{color:#94a3b8;background:rgba(148,163,184,.15)}
.hm-foot-actions{display:flex;align-items:center;gap:6px}
.hm-link{display:flex;padding:5px 9px;border-radius:8px;font-size:11.5px;font-weight:600;text-decoration:none;align-items:center;gap:3px;cursor:pointer;white-space:nowrap}
.hm-link--waze{background:rgba(51,204,255,.18);border:1px solid #33ccff;color:#33ccff}
.hm-link--site{background:rgba(168,85,247,.18);border:1px solid #c084fc;color:#c084fc}
.hm-redeem{background:linear-gradient(135deg,#2563eb,#1d4ed8);border:0;color:#fff;padding:6px 13px;border-radius:8px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.hm-sticky{background:linear-gradient(180deg,rgba(14,28,54,.98) 0%,rgba(7,14,28,1) 100%);border-top:1.5px solid rgba(16,185,129,.45);display:flex;flex-direction:column;gap:6px;padding:8px 12px;box-shadow:0 -8px 24px rgba(0,0,0,.65);flex-shrink:0}
.hm-join{background:linear-gradient(135deg,rgba(37,99,235,.22) 0%,rgba(14,28,54,.92) 100%);border:1px solid rgba(59,130,246,.45);border-radius:12px;padding:6px 10px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.hm-join-text h5{margin:0;font-size:11.5px;color:#93c5fd;font-weight:700}
.hm-join-text p{margin:1px 0 0;font-size:10px;color:#cbd5e1}
.hm-join-btn{background:linear-gradient(135deg,#2563eb,#1d4ed8);border:1px solid #60a5fa;color:#fff;padding:5px 11px;border-radius:7px;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}
.hm-invite{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 0}
.hm-invite-text h6{margin:0;font-size:11.5px;color:#6ee7b7;font-weight:600}
.hm-invite-text p{margin:1px 0 0;font-size:9.5px;color:#94a3b8}
.hm-wa-btn{background:#059669;border:0;color:#fff;padding:5px 11px;border-radius:8px;font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap}
.hm-toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);max-width:86%;padding:8px 14px;border-radius:12px;background:rgba(14,28,54,.96);border:1px solid rgba(147,197,253,.5);color:#e6edf7;font-size:13px;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:30}
.hm-toast--on{opacity:1}

/* ═══ קלייקי הום — זיהוי מיקום (כרטיס קאי) ═══ */
.hm-mini-val--loc{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:center}
.hm-kai-panel{position:absolute;top:0;right:0;bottom:0;left:0;z-index:25;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px 22px;background:#000;text-align:center}
.hm-kai-img{width:84px;height:84px;border-radius:22px;object-fit:cover;border:2px solid #f59e0b;box-shadow:0 0 14px rgba(245,158,11,.55)}
.hm-kai-msg{font-size:15px;color:#fff;line-height:1.5;max-width:320px}
.hm-kai-addr{font-size:15px;font-weight:700;color:#fbbf24;line-height:1.4;max-width:320px;overflow-wrap:anywhere}
.hm-kai-btns{display:none;gap:10px;flex-wrap:wrap;justify-content:center}
.hm-kai-btn{padding:10px 18px;border-radius:8px;border:1px solid #555;background:transparent;color:#fff;font-family:inherit;font-size:14px;cursor:pointer}
.hm-kai-btn--yes{border:0;background:#f59e0b;color:#0b1220;font-weight:700}
.hm-kai-input{display:none;width:100%;max-width:320px;box-sizing:border-box;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-family:inherit;font-size:16px;padding:10px 12px;text-align:right}

/* ══ קלייקרים (Claikers Hub) — js/claikers-room.js. מסך מלא שנפתח מלחיצה על המטבע המסתובב ══ */
.kl-overlay{background:#000}
.kl-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 14px 28px;display:flex;flex-direction:column;gap:14px}
.kl-scroll::-webkit-scrollbar{width:4px}
.kl-scroll::-webkit-scrollbar-thumb{background:rgba(245,158,11,0.25);border-radius:4px}

.kl-hero{padding:8px 8px 4px;text-align:center}
.kl-stack{display:flex;justify-content:center;align-items:center;margin-bottom:2px;filter:drop-shadow(0 6px 14px rgba(245,158,11,0.4))}
.kl-coin{font-size:36px;margin:0 -8px;display:inline-block}
.kl-coin:nth-child(2){transform:translateY(-8px) scale(1.15);z-index:2}
.kl-balance{margin:0;font-size:48px;font-weight:800;letter-spacing:-1px;background:linear-gradient(135deg,#fef08a 0%,#f59e0b 50%,#b45309 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 4px 25px rgba(245,158,11,0.35)}
.kl-sub{font-size:13.5px;color:#cbd5e1;font-weight:500;margin-top:4px}
.kl-sub-val{color:#38bdf8;font-weight:700}

.kl-pending{background:rgba(56,189,248,0.08);border:1px dashed rgba(56,189,248,0.45);border-radius:14px;padding:9px 12px;display:flex;justify-content:space-between;align-items:center;font-size:12.5px}
.kl-pending-info{color:#7dd3fc;display:flex;align-items:center;gap:6px;font-weight:500}
.kl-pending-amt{color:#38bdf8;font-weight:700;background:rgba(56,189,248,0.15);padding:2px 8px;border-radius:8px;white-space:nowrap}

.kl-calc{position:relative;background:linear-gradient(145deg,rgba(17,28,54,0.95) 0%,rgba(9,15,30,0.98) 100%);border:1.5px solid rgba(56,189,248,0.4);border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:11px;box-shadow:0 6px 26px rgba(56,189,248,0.15)}
.kl-calc-badge{position:absolute;top:14px;left:14px;font-size:10px;font-weight:700;background:linear-gradient(135deg,#38bdf8,#2563eb);color:#fff;padding:2px 8px;border-radius:20px;box-shadow:0 0 10px rgba(56,189,248,0.4)}
.kl-calc-title h3{margin:0;font-size:15px;font-weight:700;color:#fff}
.kl-calc-title p{margin:3px 0 0;font-size:12px;color:#94a3b8}
.kl-field-wrap{position:relative;display:flex;flex-direction:column;gap:4px}
.kl-label{font-size:12px;color:#cbd5e1;font-weight:500}
.kl-field{width:100%;min-height:42px;border-radius:9px;border:1px solid rgba(147,197,253,0.25);background:#060b18;color:#fff;font-size:16px;padding:6px 11px;font-family:inherit;outline:none;box-sizing:border-box}
.kl-field:focus{border-color:#38bdf8;box-shadow:0 0 8px rgba(56,189,248,0.3)}
.kl-drop{display:none;position:absolute;top:100%;right:0;left:0;margin-top:2px;background:#0a1329;border:1px solid #38bdf8;border-radius:9px;max-height:150px;overflow-y:auto;z-index:50;box-shadow:0 8px 20px rgba(0,0,0,0.8)}
.kl-drop-item{padding:9px 12px;font-size:13.5px;color:#e2e8f0;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.05)}
.kl-drop-item:hover,.kl-drop-item:active{background:rgba(56,189,248,0.15);color:#38bdf8}
.kl-drop-item--none{color:#94a3b8;cursor:default}
.kl-drop-item--none:hover{background:transparent;color:#94a3b8}
.kl-calc-btn{min-height:44px;border-radius:10px;border:none;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 4px 12px rgba(37,99,235,0.3)}
.kl-calc-btn:active{background:#1e40af}

.kl-res{display:none;background:rgba(6,12,26,0.85);border:1px solid rgba(245,158,11,0.45);border-radius:12px;padding:11px 13px}
.kl-res--error{border-color:rgba(239,68,68,0.5);background:rgba(239,68,68,0.08)}
.kl-res-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:#fef08a}
.kl-res-points{font-size:20px;font-weight:800;color:#4ade80;margin:4px 0 2px}
.kl-res--error .kl-res-points{color:#f87171;font-size:14px}
.kl-res-desc{font-size:12px;color:#cbd5e1;margin:0;line-height:1.4}

.kl-guard{background:linear-gradient(135deg,rgba(28,20,24,0.95) 0%,rgba(15,12,20,0.98) 100%);border:1.5px solid rgba(239,68,68,0.45);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:9px}
.kl-guard-row{display:flex;justify-content:space-between;align-items:center}
.kl-guard-title{font-size:13.5px;font-weight:700;color:#fca5a5;display:flex;align-items:center;gap:6px}
.kl-guard-badge{font-size:10.5px;color:#ef4444;background:rgba(239,68,68,0.18);border:1px solid rgba(239,68,68,0.35);padding:2px 8px;border-radius:6px;font-weight:700}
.kl-guard-desc{font-size:12px;color:#cbd5e1;line-height:1.4;margin:0}
.kl-quota{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:rgba(0,0,0,0.3);padding:7px 11px;border-radius:10px;border:1px solid rgba(255,255,255,0.06)}
.kl-quota-item{display:flex;flex-direction:column;gap:1px}
.kl-quota-label{font-size:10.5px;color:#94a3b8}
.kl-quota-val{font-size:12.5px;font-weight:700;color:#f87171}
.kl-quota-val--ok{color:#4ade80}
.kl-guard-progress{display:flex;flex-direction:column;gap:4px}
.kl-guard-labels{display:flex;justify-content:space-between;font-size:11px;color:#cbd5e1}
.kl-guard-bar{height:5px;background:rgba(255,255,255,0.1);border-radius:10px;overflow:hidden}
.kl-guard-fill{width:0;height:100%;background:#ef4444;border-radius:10px;transition:width .3s}
.kl-guard-tip{background:rgba(245,158,11,0.1);border:1px dashed rgba(245,158,11,0.4);border-radius:8px;padding:7px 9px;font-size:11px;color:#fde68a;line-height:1.4}

.kl-ledger{background:rgba(13,22,44,0.94);border:1px solid rgba(147,197,253,0.2);border-radius:22px;padding:12px;display:flex;flex-direction:column;gap:8px}
.kl-tabs{display:flex;gap:4px;border-bottom:1px solid rgba(255,255,255,0.08);padding-bottom:7px}
.kl-tab{flex:1;text-align:center;padding:6px 0;font-size:12px;font-weight:600;font-family:inherit;color:#94a3b8;background:transparent;border:none;cursor:pointer;border-radius:8px}
.kl-tab--active{background:rgba(245,158,11,0.15);color:#fef08a}
.kl-tx{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid rgba(255,255,255,0.04)}
.kl-tx:last-child{border-bottom:none}
.kl-tx-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.kl-tx-info{flex:1;min-width:0}
.kl-tx-info h5{margin:0;font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kl-tx-info p{margin:1px 0 0;font-size:10.5px;color:#94a3b8}
.kl-tx-amt{font-size:13px;font-weight:700;white-space:nowrap}
.kl-tx-amt--green{color:#4ade80}
.kl-tx-amt--orange{color:#fbbf24}
.kl-tx-amt--red{color:#f87171}
.kl-ledger-empty{text-align:center;padding:22px 8px;font-size:13px;color:#94a3b8}

/* ═══ קלייקי עולם — כרטיס הלובי והחדר ═══
   כרטיס שישי בלובי, באותו מבנה של כרטיס הבית (צבע זהב-ענבר). החדר תופס את משבצת .chat-frame כמו .home-room. הכול תחת .wd- / .lg-*--world. */
.lg-world-card{margin-top:clamp(34px,5vh,42px)}
#lobbyGate .lg-world-card{margin-top:58px}
#lobbyGate.lg-tight .lg-world-card{margin-top:46px}
.lg-card--world{--world-gold:#fbbf24;border:1.2px solid var(--world-gold);box-shadow:0 0 12px rgba(251,191,36,.38),0 0 24px rgba(251,191,36,.18),inset 0 0 10px rgba(251,191,36,.2),0 6px 20px rgba(0,0,0,.7)}
.lg-avatar-badge--world{box-sizing:border-box;background:rgba(40,28,8,.85);border:2px solid var(--world-gold);box-shadow:0 0 10px var(--world-gold),0 6px 20px rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;font-size:46px;line-height:1}
.lg-bottom-slot--world{background:rgba(40,28,8,.85);border:1px solid rgba(251,191,36,.35)}
.lg-action-btn--world{
  --g-tint:rgba(180,110,10,.62);--g-edge:rgba(253,230,138,.8);--g-text:#fffbeb;--g-glow:rgba(251,191,36,.95);--g-halo:rgba(245,158,11,.5);
  color:var(--g-text);
  background:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.07) 46%,rgba(255,255,255,0) 100%),var(--g-tint);
  border-color:transparent;
  box-shadow:inset 0 0 0 1px var(--g-edge),inset 0 1px 0 1px rgba(255,255,255,.28),inset 0 -9px 12px -8px rgba(4,10,24,.55),0 3px 10px rgba(0,0,0,.42);
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  letter-spacing:0;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,box-shadow .16s ease-out;
}
.lg-action-btn--world:hover{transform:none;filter:none}
.lg-action-btn--world:active,.lg-action-btn--world:active:hover{
  transform:scale(.97);
  background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 60%),var(--g-tint);
  border-color:transparent;color:var(--g-text);
  box-shadow:inset 0 0 0 1px var(--g-edge),inset 0 2px 7px rgba(0,0,0,.55),0 0 0 2px var(--g-glow),0 0 12px 3px var(--g-glow),0 0 26px 7px var(--g-halo);
}

.world-room{position:relative;flex:1;min-height:0;width:100%;z-index:10;display:none;flex-direction:column;background:transparent;overflow:hidden;font-family:inherit;direction:rtl;color:#e6edf7}
#chatInputBar.world-room-locked{opacity:.42}
#chatInputBar.world-room-locked .chat-ta,
#chatInputBar.world-room-locked .action-btn,
#chatInputBar.world-room-locked .embedded-send-btn{pointer-events:none}
#chatInputBar.world-room-text .action-btn{opacity:.42;pointer-events:none}
#chatInputBar.world-room-text label.medallion-cradle{opacity:1;pointer-events:auto}
.wd-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 12px 14px;display:flex;flex-direction:column;gap:10px}
.wd-scroll>*{flex-shrink:0}
.wd-view{display:flex;flex-direction:column;gap:10px}
.wd-search{background:rgba(17,26,46,.8);border:1px solid rgba(147,197,253,.28);border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:8px;min-height:44px}
.wd-search-input{flex:1;min-width:0;height:42px;background:transparent;border:0;outline:0;color:#fff;font-family:inherit;font-size:16px;text-align:right}
.wd-search-input::placeholder{color:#94a3b8}
/* כפתור שליחה/חיפוש בצד שמאל של שורת החיפוש (EFFI-13c) — חץ תואם לסגנון האפליקציה */
.wd-search-send{flex-shrink:0;width:34px;height:34px;margin-right:2px;border-radius:10px;background:rgba(59,130,246,.16);border:1px solid rgba(147,197,253,.32);color:#93c5fd;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;-webkit-tap-highlight-color:transparent;transition:all .2s ease}
.wd-search-send svg{width:15px;height:15px;transform:rotate(-45deg)}
.wd-search-send:hover{opacity:1;color:#fff;background:rgba(59,130,246,.28);border-color:#93c5fd;filter:drop-shadow(0 0 6px rgba(147,197,253,.5))}
.wd-search-send:active{transform:scale(.92)}
.wd-chips{display:flex;gap:6px;overflow-x:auto;white-space:nowrap;padding:2px 2px 6px}
.wd-chips::-webkit-scrollbar{height:3px}
.wd-chip{flex-shrink:0;height:32px;padding:0 12px;border-radius:16px;font-family:inherit;font-size:12px;font-weight:500;background:rgba(17,26,46,.85);border:1px solid #26344f;color:#cbd5e1;cursor:pointer}
.wd-chip--active{background:#3b82f6;border-color:#3b82f6;color:#fff;font-weight:700}
.wd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;row-gap:12px}
.wd-card{background:rgba(17,26,46,.7);border:1px solid #3b82f6;box-shadow:0 0 12px rgba(59,130,246,.15);border-radius:14px;padding:0;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;text-align:center;cursor:pointer;font-family:inherit;color:inherit;min-width:0;-webkit-tap-highlight-color:transparent}
.wd-card:active{transform:scale(.97)}
.wd-card-cover{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center}
.wd-card-cover img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.wd-card-flag{font-size:34px;line-height:1}
.wd-card-label{font-size:13px;font-weight:700;color:#f1f5f9;overflow-wrap:anywhere;padding:8px 6px}
/* גריד הקטגוריות במסך היעד: 2 עמודות, תמונה גדולה מלאה, ללא מסגרות/רקעים, כותרת ככפתור */
.wd-cat-grid{gap:8px;row-gap:10px}
.wd-cat-card{display:flex;flex-direction:column;gap:5px;min-width:0}
.wd-cat-photo{width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:12px;cursor:pointer;background:rgba(255,255,255,.05);border:0;padding:0;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.wd-cat-photo img{width:100%;height:100%;object-fit:cover;display:block}
.wd-cat-icon{font-size:42px;line-height:1}
.wd-cat-title{width:100%;border:0;padding:0;background:transparent;font-family:inherit;font-size:13px;font-weight:700;color:#f1f5f9;cursor:pointer;text-align:center;overflow-wrap:anywhere}
.wd-cat-title:active{opacity:.75}
.wd-empty{display:none;text-align:center;padding:22px 8px;font-size:13px;color:#94a3b8}
.wd-dest-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wd-dest-title{margin:0;font-size:20px;font-weight:700;color:#fde68a}
.wd-dest-back{background:rgba(59,130,246,.2);border:1px solid rgba(59,130,246,.5);color:#bfdbfe;padding:5px 12px;border-radius:10px;font-family:inherit;font-size:12px;cursor:pointer}
.wd-wallet{background:linear-gradient(135deg,rgba(37,99,235,.2) 0%,rgba(245,158,11,.15) 100%);border:1px solid rgba(147,197,253,.3);border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer}
.wd-wallet-info{min-width:0}
.wd-wallet-info h4{margin:0 0 2px;font-size:13px;color:#fde047}
.wd-wallet-info p{margin:0;font-size:11px;color:#94a3b8}
.wd-wallet-badge{background:#f59e0b;color:#000;font-weight:700;font-size:11px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wd-disclosure{margin:2px 4px 0;font-size:10.5px;color:#94a3b8;text-align:center;line-height:1.4}
.wd-toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);max-width:86%;padding:8px 14px;border-radius:12px;background:rgba(14,28,54,.96);border:1px solid rgba(147,197,253,.5);color:#e6edf7;font-size:13px;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:30}
.wd-toast--on{opacity:1}

.wd-chat{flex:1;min-height:0;display:none;flex-direction:column;gap:8px;padding:8px 12px 10px}
.wd-chat-head{display:flex;align-items:center;gap:10px;flex-shrink:0}
.wd-chat-hero{width:64px;height:64px;border-radius:14px;overflow:hidden;flex-shrink:0;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;border:1px solid rgba(147,197,253,.35)}
.wd-chat-hero img{width:100%;height:100%;object-fit:cover;display:block}
.wd-chat-hero-fallback{font-size:30px;line-height:1}
.wd-chat-info{flex:1;min-width:0}
.wd-chat-guide{font-size:16px;font-weight:700;color:#fde68a}
.wd-chat-sub{font-size:12px;color:#94a3b8;overflow-wrap:anywhere}
.wd-chat-list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:8px;padding:4px 2px}
.wd-msg{max-width:88%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.5;overflow-wrap:anywhere;display:flex;flex-direction:column;gap:6px}
.wd-msg-p{margin:0}
.wd-msg--guide{align-self:flex-start;background:rgba(17,26,46,.85);border:1px solid #26344f;color:#e6edf7;border-top-right-radius:4px}
.wd-msg--user{align-self:flex-end;background:#2563eb;color:#fff;border-top-left-radius:4px}
.wd-msg--thinking{flex-direction:row;gap:5px;padding:12px 14px}
.wd-dot{width:7px;height:7px;border-radius:50%;background:#94a3b8;animation:wdDot 1s infinite ease-in-out}
.wd-dot:nth-child(2){animation-delay:.15s}
.wd-dot:nth-child(3){animation-delay:.3s}
@keyframes wdDot{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.wd-link-btn{display:block;text-align:center;text-decoration:none;background:#f59e0b;color:#111;font-weight:700;font-size:14px;padding:10px 14px;border-radius:12px}
.wd-link-btn:active{transform:scale(.98)}
.wd-chat-row{display:flex;gap:8px;align-items:flex-end;flex-shrink:0}
.wd-chat-input{flex:1;min-width:0;min-height:42px;max-height:96px;resize:none;background:rgba(17,26,46,.8);border:1px solid rgba(147,197,253,.28);border-radius:12px;padding:10px 12px;color:#fff;font-family:inherit;font-size:16px;text-align:right;outline:0}
.wd-chat-input::placeholder{color:#94a3b8}
.wd-chat-send{height:42px;padding:0 16px;border:0;border-radius:12px;background:#3b82f6;color:#fff;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.wd-chat-send:disabled{opacity:.45;cursor:default}
.wd-chat-disclosure{flex-shrink:0;margin:0 4px}



/* ג”€ג”€ ׳§׳œ׳™׳™׳§׳™ ׳¢׳•׳œ׳: ׳¢׳™׳’׳•׳œ ׳”׳ž׳“׳¨׳™׳š, ׳₪׳¡ ׳ž׳“׳¨׳™׳š ׳‘׳™׳¢׳“ ׳•׳‘׳׳ ׳¨ ׳§׳˜׳’׳•׳¨׳™׳” ׳‘׳©׳™׳—׳” ג”€ג”€ */
.wd-avatar{position:relative;border-radius:50%;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,#1e3a8a,#7c3aed);border:2px solid #fde68a;display:flex;align-items:center;justify-content:center;box-shadow:0 0 14px rgba(253,230,138,.28)}
.wd-avatar--md{width:52px;height:52px}
.wd-avatar--lg{width:72px;height:72px}
.wd-avatar img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.wd-avatar-fallback{font-size:26px;font-weight:700;color:#fff;line-height:1}
.wd-avatar--md .wd-avatar-fallback{font-size:22px}
.wd-avatar-host{flex-shrink:0;display:flex}
.wd-chat-banner{flex-shrink:0;height:104px;border-radius:14px;overflow:hidden;border:1px solid rgba(147,197,253,.3)}
.wd-chat-banner img{width:100%;height:100%;object-fit:cover;display:block}
/* באנר היעד: המסגרת צמודה לפרופורציות הטבעיות של התמונה (אין מתיחת 16:9 ואין פסים ריקים בצדדים),
   ממורכזת; הכיתוב "המדריך שלך ב..." בפינה ימנית-תחתונה של התמונה */
/* תמונת המדריך (מרקו): אגף שמאל, מחצית מהרוחב (50%) וממלאת את הקובייה ללא פסים/מסגרת.
   התמונה ריבועית (1200x1200) ולכן מחצית מהרוחב נותנת קובייה ריבועית — מילוי מושלם וללא חיתוך. */
.wd-guide-flag{position:relative;order:2;flex:1 1 0;min-width:0;max-height:200px;margin:0;border-radius:12px;overflow:hidden;background:transparent;display:flex;align-items:stretch;justify-content:center}
.wd-guide-flag img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:12px}
/* שם המדריך (בצד ימין) והתפקיד (בצד שמאל, אנכי): טקסט נקי בלבד — ללא רקע, מסגרת או צל.
   רגלי מרקו והנעליים נשארות גלויות ב-100%. הצבע כהה וקריא על הרקע הבהיר של התמונה. */
.wd-guide-flag-name{position:absolute;top:7px;right:9px;font-size:16px;font-weight:800;color:#111;line-height:1.1;pointer-events:none}
.wd-guide-flag-role{position:absolute;top:50%;left:5px;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;white-space:nowrap;font-size:11px;font-weight:700;color:#111;line-height:1;letter-spacing:.5px;pointer-events:none}
/* מרחב הפעולה של המדריך: חלוקת רוחב קשיחה 50/50 — קוביית מרקו (שמאל) ושתי קוביות הפעולה (ימין) צמודות.
   ב-RTL עם flex-direction:row ה-child בעל ה-order הנמוך ביותר מוצג מימין; לכן הכפתורים order:1 (ימין) ומרקו order:2 (שמאל).
   גובה אחיד: קוביית מרקו קובעת את גובה המתחם, כל כפתור תופס בדיוק חצי ממנו (בקיזוז הרווח הקטן), והשורות מיושרות לקווי התמונה. */
.wd-guide-area{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:8px;width:100%;padding:2px 0}
.wd-guide-actions{order:1;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.wd-guide-action{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px;width:100%;min-height:48px;padding:8px 8px;border-radius:12px;font-family:inherit;cursor:pointer;color:#fffbeb;background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 46%,rgba(255,255,255,0) 100%),rgba(180,110,10,.55);border:1px solid transparent;box-shadow:inset 0 0 0 1px rgba(253,230,138,.75),inset 0 1px 0 1px rgba(255,255,255,.25),0 3px 10px rgba(0,0,0,.42);text-shadow:0 1px 2px rgba(0,0,0,.55);-webkit-tap-highlight-color:transparent;transition:transform .12s ease,box-shadow .16s ease-out}
.wd-guide-action:active{transform:scale(.97);box-shadow:inset 0 0 0 1px rgba(253,230,138,.85),0 0 0 2px rgba(251,191,36,.9),0 0 14px 4px rgba(251,191,36,.5)}
.wd-guide-action-icon{font-size:27px;line-height:1;flex-shrink:0}
.wd-guide-action-txt{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0}
.wd-guide-action-title{font-size:12px;font-weight:800;color:#fde68a;line-height:1.2}
.wd-guide-action-sub{font-size:9px;color:#d9bd82;line-height:1.25;overflow-wrap:anywhere}
.wd-cam-input{display:none}
.wd-msg-img{max-width:100%;border-radius:10px;display:block;margin-top:2px}
/* Lightbox: תמונה מוגדלת 16:9 כמעט על כל רוחב המסך, עם שני כפתורי פעולה מתחתיה (סגירה / תצוגה על כל המסך). */
.wd-lightbox{position:fixed;inset:0;z-index:120;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(0,0,0,.96);padding:16px}
.wd-lightbox--open{display:flex}
/* סרגל ניווט תת-תמונה: קפסולת זכוכית/זהב אחת יוקרתית — שם הקטגוריה במרכז, חיצים מוארים משני הצדדים. */
.wd-lightbox-nav{direction:ltr;display:flex;align-items:center;justify-content:space-between;gap:8px;width:fit-content;max-width:80%;margin:0 auto;padding:5px 8px;border-radius:999px;background:rgba(8,15,30,0.45);border:1px solid rgba(251,191,36,0.3);box-shadow:0 4px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.wd-lightbox-title{direction:rtl;flex:1 1 auto;text-align:center;font-size:14px;font-weight:800;color:#fde68a;letter-spacing:.3px;text-shadow:0 1px 3px rgba(0,0,0,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-lightbox-arrow{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;line-height:1;color:#fde68a;background:transparent;border:none;cursor:pointer;text-shadow:0 0 6px rgba(251,191,36,.7);-webkit-tap-highlight-color:transparent;transition:transform .12s ease,box-shadow .16s ease-out,background .16s ease-out}
.wd-lightbox-arrow:disabled{opacity:.3;cursor:default;text-shadow:none}
.wd-lightbox-arrow:active:not(:disabled){transform:scale(.9);background:rgba(251,191,36,.18);box-shadow:0 0 12px 3px rgba(251,191,36,.45)}
.wd-lightbox-frame{position:relative;width:96vw;max-width:96vw;max-height:78vh;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid rgba(253,230,138,.25);background:#000}
.wd-lightbox-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:14px;cursor:zoom-in}
.wd-lightbox-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
.wd-lightbox-btn{padding:9px 18px;border-radius:12px;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;color:#fffbeb;background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 46%,rgba(255,255,255,0) 100%),rgba(180,110,10,.55);border:1px solid transparent;box-shadow:inset 0 0 0 1px rgba(253,230,138,.75),inset 0 1px 0 1px rgba(255,255,255,.25),0 3px 10px rgba(0,0,0,.42);text-shadow:0 1px 2px rgba(0,0,0,.55);-webkit-tap-highlight-color:transparent;transition:transform .12s ease,box-shadow .16s ease-out}
.wd-lightbox-btn:active{transform:scale(.97)}
.wd-lightbox-btn--enter{flex:0 0 100%;max-width:340px;padding:12px 18px;font-size:15px;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.06) 46%,rgba(255,255,255,0) 100%),rgba(37,99,235,.9);box-shadow:inset 0 0 0 1px rgba(147,197,253,.85),inset 0 1px 0 1px rgba(255,255,255,.28),0 3px 12px rgba(0,0,0,.45)}
/* תצוגת מסך מלא: האפליקציה נעולה למצב אנכי (Portrait), לכן מסובבים את התמונה 90° כך שתתפרס על כל המסך כמו בהחזקת הטלפון לרוחב (Landscape). */
.wd-lightbox.wd-lightbox-fullscreen{padding:0;gap:0;background:#000;overflow:hidden}
.wd-lightbox.wd-lightbox-fullscreen .wd-lightbox-frame{width:100vh;height:100vw;max-width:none;max-height:none;aspect-ratio:auto;border:none;border-radius:0;transform:rotate(90deg)}
.wd-lightbox.wd-lightbox-fullscreen .wd-lightbox-img{border-radius:0;object-fit:cover;cursor:zoom-out}
.wd-lightbox.wd-lightbox-fullscreen .wd-lightbox-actions{display:none}
/* במסך מלא התמונה מסובבת 90° כך שתחתיתה (הרגליים/המגפון/המצלמה) היא הצד השמאלי של המסך.
   לכן גם סרגל הניווט מסובב 90° באותה מידה ומוצמד לצד שמאל — כך שמי שמתבונן בתמונה לרוחב רואה אותו ישר בתחתית התמונה. */
.wd-lightbox.wd-lightbox-fullscreen .wd-lightbox-nav{position:absolute;left:28px;top:50%;max-width:80%;transform:translate(-50%,-50%) rotate(90deg);z-index:5}
/* הסתרת פקדי המערכת (סרגל התחתון עם המיקרופון והמצלמה) בזמן מסך מלא, כדי שלא יסתירו את הסרגל. */
body.wd-lb-fullscreen #chatInputBar{display:none}



/* ===== ???????????? ????????: ?????? ?????????? ?????????? ?????????? (Hub) ===== */
.wd-regions-hint {
  margin: 4px 0 12px;
  font-size: 0.9rem;
  opacity: 0.8;
  text-align: center;
}
.wd-region-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wd-region-card {
  align-items: stretch;
}
.wd-card-sub {
  margin-top: 4px;
  padding: 0 6px 8px;
  font-size: 0.72rem;
  line-height: 1.3;
  opacity: 0.75;
  text-align: center;
}



/* ===== ?????????? ??????"??: ???????? ???????? ???????????? ????????????/?? ?????????????? ?????? ???????? ?????????? ===== */
.wd-guide-flag-ph {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.wd-guide-flag-ph-initial {
  width: 56%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #d9a441, #8a5a12);
  color: #fff;
  font-size: 2.6rem;
  font-weight: 700;
}


/* ===== חבר מביא חבר: כפתור צף וחלון שיתוף ===== */
.invite-fab {
  position: fixed;
  left: 12px;
  top: calc(101px + 12px); /* ברירת מחדל; ה-JS מדייק לפי .main-header */
  z-index: 900;
  width: 52px;
  height: 52px;
}
.invite-fab[hidden], .invite-sheet[hidden], .invite-toast[hidden] { display: none !important; }
.invite-fab-main {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #1a1305; cursor: pointer; position: relative; padding: 0;
  background: linear-gradient(135deg, #e0c68c, var(--gold, #c8a96e) 55%, #a8884a);
  border: 1px solid rgba(255,235,190,.55);
  box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 0 0 0 rgba(200,169,110,.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: inviteBreath 3.2s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
  touch-action: none; /* מאפשר גרירה בלי גלילת הדף */
}
.invite-fab--right .invite-fab-x { right: auto; left: -6px; }
.invite-fab-badge {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  font: 700 10px/1 system-ui, sans-serif; letter-spacing: .2px;
  background: #111; color: var(--gold, #c8a96e); border: 1px solid rgba(200,169,110,.6);
  border-radius: 8px; padding: 2px 5px; white-space: nowrap;
}
.invite-fab-x {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  border-radius: 50%; padding: 0; line-height: 18px; font-size: 14px; text-align: center;
  color: #ddd; background: rgba(20,20,28,.88); border: 1px solid rgba(255,255,255,.25);
  cursor: pointer;
}
@keyframes inviteBreath {
  0%, 100% { transform: scale(1);    box-shadow: 0 4px 14px rgba(0,0,0,.45), 0 0 0 0 rgba(200,169,110,.35); }
  50%      { transform: scale(1.07); box-shadow: 0 6px 18px rgba(0,0,0,.5),  0 0 0 8px rgba(200,169,110,0); }
}
@media (prefers-reduced-motion: reduce) {
  .invite-fab-main { animation: none; }
}

.invite-sheet { position: fixed; inset: 0; z-index: 1000; }
.invite-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.invite-sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px 22px 0 0; text-align: center; color: #fff;
  background: rgba(22,22,30,.92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.16);
  animation: inviteSheetUp .22s ease-out;
}
@keyframes inviteSheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.invite-sheet-close {
  position: absolute; top: 10px; left: 12px; width: 32px; height: 32px;
  font-size: 22px; line-height: 30px; padding: 0; color: #ccc;
  background: transparent; border: 0; cursor: pointer;
}
.invite-sheet-gift { color: var(--gold, #c8a96e); margin-bottom: 6px; }
.invite-sheet-gift svg { width: 38px; height: 38px; }
.invite-sheet-title { margin: 0 0 8px; font-size: 19px; font-weight: 700; }
.invite-sheet-body { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: #cfcfd8; }
.invite-btn {
  display: block; width: 100%; margin: 0 0 10px; padding: 14px 16px;
  font-size: 16px; font-weight: 600; border-radius: 14px; cursor: pointer; color: #fff;
}
.invite-btn-primary { background: #25d366; border: 0; color: #08210f; }
.invite-btn-secondary { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); }
.invite-toast {
  margin-top: 4px; font-size: 13px; color: var(--gold, #c8a96e);
}

/* ── כפתורי בחירה מהירה בשיחה עם מדריך (קלייקי עולם) ── */
.wd-qk{display:flex;flex-direction:column;gap:8px;margin-top:6px;padding-top:8px;border-top:1px solid #26344f}
.wd-qk-title{font-size:12px;font-weight:700;color:#fde68a}
.wd-qk-chips{display:flex;flex-wrap:wrap;gap:8px}
.wd-qk-chip{min-width:44px;height:40px;padding:0 14px;border-radius:20px;border:1px solid rgba(147,197,253,.45);background:rgba(17,26,46,.9);color:#e6edf7;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.wd-qk-chip--alt{border-style:dashed}
.wd-qk-chip--on{background:#3b82f6;border-color:#3b82f6;color:#fff}
.wd-qk-sel-row{display:flex;gap:8px}
.wd-qk-sel{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.wd-qk-sel-l{font-size:11px;color:#94a3b8}
.wd-qk-select{width:100%;height:42px;border-radius:10px;border:1px solid rgba(147,197,253,.35);background:rgba(17,26,46,.95);color:#fff;font-family:inherit;font-size:16px;padding:0 8px}
.wd-qk-to{display:flex;flex-direction:column;gap:8px}
.wd-qk-sum{font-size:13px;color:#e6edf7;min-height:18px}
.wd-qk-go{height:44px;border:0;border-radius:12px;background:#f59e0b;color:#111;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}
.wd-qk-go:disabled{opacity:.4;cursor:default}
.wd-qk-alt{height:40px;border-radius:12px;border:1px solid rgba(147,197,253,.35);background:transparent;color:#cbd5e1;font-family:inherit;font-size:14px;cursor:pointer}
.wd-msg--live{opacity:.6}
/* ══ תמונת קטגוריה בראש שיחת המדריך (קלייקי עולם) ══ */
.wd-chat-hero-bg,.wd-chat-bgwrap{display:none}
.world-room.wd-room--hero{overflow:visible}
.world-room.wd-room--hero .wd-chat-hero-bg{display:block;position:absolute;left:0;right:0;top:0;height:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;pointer-events:none}
.world-room.wd-room--hero .wd-chat{position:relative;z-index:1}
.world-room.wd-room--hero .wd-chat-head,.world-room.wd-room--hero .wd-chat-banner{display:none!important}
/* GLASS-GLOBAL */
/* ══ זכוכית חלבית אחידה בשני הסרגלים (עליון ותחתון), בכל מסכי האפליקציה ══
   הערכים הסופיים נקבעו בעין על ידי איתמר: כהות 1.5 (מתוך 10), טשטוש 0.5 (מתוך 10).
   את כל הערכים משנים כאן בלבד. כשיתווספו רקעים לאפליקציה, מכוונים רק את שלושת המשתנים. כהות: a1 עליון ו-a2 תחתון (רוויה 0..1), טשטוש בפיקסלים. */
:root{--glass-a1:.128;--glass-a2:.288;--glass-blur:1.3px}
.top-tier-chassis::before,.composer-bottom-chassis::before{content:"";position:absolute;left:0;width:100%;height:126px;pointer-events:none;clip-path:url(#glassBarClip);-webkit-clip-path:url(#glassBarClip);background:linear-gradient(to bottom,rgba(18,28,50,var(--glass-a1)) 0%,rgba(10,17,33,var(--glass-a2)) 100%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.15);backdrop-filter:blur(var(--glass-blur)) saturate(1.15)}
.top-tier-chassis::before{top:0}
.composer-bottom-chassis::before{top:-25px;transform:rotate(180deg)}
/* HERO-BLUR */
/* ══ רקע מטושטש בצ'אט המדריך: אותה תמונת קטגוריה, ממלאת את המסך מתחת לתמונה העליונה ועד מתחת לסרגל התחתון ══
   כוונון: --wd-bg-blur (פיקסלים) ו---wd-bg-opacity (0..1). הכהות שמעל הרקע (--wd-bg-dim) מבטיחה שהטקסט נשאר קריא. */
:root{--wd-bg-blur:1.5px;--wd-bg-opacity:1;--wd-bg-dim:.1}
.world-room.wd-room--hero .wd-chat-bgwrap{display:block;position:absolute;left:0;right:0;top:0;height:0;z-index:0;overflow:hidden;pointer-events:none}
.wd-chat-hero-blur{position:absolute;inset:-40px;background-size:cover;background-position:center;background-repeat:no-repeat;filter:blur(var(--wd-bg-blur));-webkit-filter:blur(var(--wd-bg-blur));opacity:var(--wd-bg-opacity)}
.wd-chat-bgwrap::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--wd-bg-dim))}
/* התמונה העליונה נמסה בתחתיתה אל הרקע המטושטש */
.world-room.wd-room--hero .wd-chat-hero-bg{-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
/* BG-TUNE */
/* ══ כוונון הרקע המטושטש: אפשרות קבועה למשתמש ══ */
.wd-bgtune-btn,.wd-bgtune{display:none}
.world-room.wd-room--hero .wd-bgtune-btn{display:block;position:absolute;left:10px;top:30px;z-index:3;padding:4px 10px;border-radius:999px;font-family:inherit;font-size:11px;font-weight:700;color:#e2e8f0;background:rgba(8,15,30,.62);border:1px solid rgba(147,197,253,.4);cursor:pointer;-webkit-tap-highlight-color:transparent}
.world-room.wd-room--hero .wd-bgtune.wd-bgtune--open{display:flex;flex-direction:column;gap:8px;position:absolute;left:10px;right:10px;top:62px;z-index:4;padding:10px 12px;border-radius:14px;background:rgba(8,15,30,.9);border:1px solid rgba(147,197,253,.4);direction:rtl}
.wd-bgtune-row{display:flex;align-items:center;gap:10px;color:#e2e8f0;font-size:13px}
.wd-bgtune-lbl{flex:0 0 46px;font-weight:700}
.wd-bgtune-row input[type=range]{direction:ltr;flex:1;min-width:0;height:28px;accent-color:#60a5fa}
.wd-bgtune-val{flex:0 0 30px;text-align:center;font-weight:800;color:#fde68a}
.wd-bgtune-out{text-align:center;font-size:12px;font-weight:700;color:#fde68a}
.wd-bgtune-reset{padding:4px 12px;border-radius:10px;font-family:inherit;font-size:12px;color:#bfdbfe;background:rgba(59,130,246,.2);border:1px solid rgba(59,130,246,.5);cursor:pointer}
/* HERO-BLUR-2 */
/* חפיפה רכה: הרקע המטושטש נכנס בהדרגה מתחת לתחתית התמונה העליונה (60px), בלי קו חד */
.world-room.wd-room--hero .wd-chat-bgwrap{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 60px);mask-image:linear-gradient(to bottom,transparent 0,#000 60px)}
/* BG-OPTION */
/* ברירת מחדל: טשטוש 0.5, שקיפות 10, כהות 1 (ראו :root למעלה). איפוס מחזיר אליה. */
.wd-bgtune-actions{display:flex;justify-content:space-between;align-items:center;gap:8px}
.wd-bgtune-off{padding:4px 12px;border-radius:10px;font-family:inherit;font-size:12px;color:#fecaca;background:rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.5);cursor:pointer}
.wd-bgtune.wd-bgtune--off .wd-bgtune-row{opacity:.4}
/* העלמת רקע לגמרי: רקע שחור (התמונה העליונה נשארת) */
.world-room.wd-bg-off .wd-chat-hero-blur{display:none}
.world-room.wd-bg-off .wd-chat-bgwrap::after{background:#000}
/* BG-CLOSE */
.wd-bgtune-close{padding:4px 14px;border-radius:10px;font-family:inherit;font-size:12px;font-weight:700;color:#e2e8f0;background:rgba(148,163,184,.18);border:1px solid rgba(148,163,184,.5);cursor:pointer}