/* ============ YourZon AI Sales Agent — הדגמת דשבורד ============
   פלטה וטיפוגרפיה נשאבו בפועל מ-yourzon.net (גופן, גרדיאנט הלוגו, צבעי כפתור ורקע) */

:root{
  --navy:#1A2340; --navy-deep:#0F1526; --navy-soft:#2A3355; --navy-line:#c9cddb;
  --red:#9E0E26; --red-light:#D11430; --gold:#D9A441; --gold-soft:#B9852B;
  --bg:#F6F4F2; --bg2:#FBFAF9; --card:#FFFFFF; --card2:#F3F1EE;
  --ink:#1A2340; --ink-soft:#4B5166; --muted:#7D8399; --line:rgba(26,35,64,.10);
  --ok:#1F8A4C; --warn:#B9852B; --danger:#C6273B;
  --shadow-sm:0 2px 12px rgba(26,35,64,.06);
  --shadow-md:0 14px 34px -14px rgba(26,35,64,.16);
  --shadow-lg:0 26px 60px -20px rgba(26,35,64,.22);
  --grad-red:linear-gradient(110deg,var(--red-light),var(--red) 55%,var(--navy));
  --grad-gold:linear-gradient(135deg,var(--gold-soft),var(--gold));
  --grad-word:linear-gradient(100deg,#D11430 0%,#C0112C 16%,#7A1E46 33%,#1A2340 50%,#7A1E46 67%,#C0112C 84%,#D11430 100%);
  --radius:16px; --radius-sm:10px;
  --sidebar-w:264px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Heebo',system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.hidden{display:none !important;}
img{max-width:100%;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--gold); color:#1A1200;}
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-thumb{background:var(--navy-line); border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}

.word-mark{
  font-family:'Heebo',sans-serif; font-weight:900; letter-spacing:-.75px; direction:ltr;
  display:inline-block; background:var(--grad-word); -webkit-background-clip:text;
  background-clip:text; color:transparent;
}
.word-mark-lg{font-size:clamp(46px,9vw,84px);}
.word-mark-sm{font-size:25px;}

/* ================= SPLASH ================= */
.splash{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(55% 45% at 50% 12%, rgba(209,20,48,.10), transparent 70%),
    radial-gradient(40% 40% at 85% 90%, rgba(217,164,65,.10), transparent 70%),
    var(--bg);
  overflow:hidden;
  transition:opacity .7s ease, visibility .7s ease;
}
.splash.leaving{opacity:0; visibility:hidden; pointer-events:none;}
.splash-grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(26,35,64,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,35,64,.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(65% 60% at 50% 35%, #000 40%, transparent 90%);
}
.splash-glow{
  position:absolute; width:900px; height:900px; border-radius:50%;
  top:-420px; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(209,20,48,.14), transparent 65%);
  filter:blur(10px);
  animation:pulse-glow 6s ease-in-out infinite;
}
@keyframes pulse-glow{0%,100%{opacity:.7; transform:translateX(-50%) scale(1);} 50%{opacity:1; transform:translateX(-50%) scale(1.06);}}
.splash-content{
  position:relative; z-index:2; text-align:center; max-width:640px; padding:32px;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.splash-logo{animation:logo-in 1s cubic-bezier(.2,.9,.25,1) both;}
@keyframes logo-in{from{opacity:0; transform:translateY(18px) scale(.92);} to{opacity:1; transform:translateY(0) scale(1);}}
.splash-rule{width:80px; height:2px; border-radius:2px; background:var(--grad-red); box-shadow:0 0 14px rgba(209,20,48,.35); animation:rule-in .9s .2s both;}
@keyframes rule-in{from{width:0; opacity:0;} to{width:80px; opacity:1;}}
.splash-title{font-size:clamp(22px,4vw,32px); font-weight:800; animation:fade-up .8s .25s both; color:var(--navy);}
.splash-sub{color:var(--ink-soft); font-size:15px; line-height:1.9; animation:fade-up .8s .35s both;}
@keyframes fade-up{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

.splash-orbit{position:relative; width:210px; height:70px; animation:fade-up .8s .4s both;}
.splash-orbit-track{position:absolute; inset:0; border-top:1.5px dashed rgba(26,35,64,.18); border-radius:100%;}
.orbit-dot{
  position:absolute; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 10px rgba(217,164,65,.7);
  animation:orbit-move 3.2s linear infinite;
}
.orbit-dot.d2{background:var(--red-light); box-shadow:0 0 10px rgba(209,20,48,.6); animation-delay:-1.1s;}
.orbit-dot.d3{background:var(--navy); box-shadow:0 0 8px rgba(26,35,64,.5); animation-delay:-2.2s;}
@keyframes orbit-move{
  0%{left:0%; opacity:0;}
  8%{opacity:1;}
  92%{opacity:1;}
  100%{left:100%; opacity:0;}
}

.btn-enter{
  margin-top:8px; display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border:none; border-radius:100px; color:#fff;
  background:var(--grad-red); font-size:15.5px; font-weight:700;
  box-shadow:0 14px 30px -10px rgba(158,14,38,.45);
  animation:fade-up .8s .5s both;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-enter:hover{transform:translateY(-2px); box-shadow:0 18px 38px -8px rgba(158,14,38,.55);}
.btn-enter svg{transform:scaleX(-1);}
.splash-foot{margin-top:6px; color:var(--muted); font-size:12.5px; letter-spacing:.3px; animation:fade-up .8s .6s both;}

/* ================= APP SHELL ================= */
.app{display:flex; min-height:100vh; opacity:0; animation:fade-up .6s ease both;}
.sidebar{
  width:var(--sidebar-w); flex:0 0 auto; min-height:100vh;
  background:var(--card);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column; padding:22px 18px;
  position:sticky; top:0; height:100vh; z-index:20;
}
.side-brand{padding:6px 6px 18px; border-bottom:1px solid var(--line); margin-bottom:16px;}
.brand-tag{margin-top:6px; font-size:11.5px; color:var(--gold-soft); letter-spacing:1.5px; font-weight:700;}

.side-status{
  display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:var(--radius-sm);
  background:rgba(31,138,76,.08); border:1px solid rgba(31,138,76,.25); margin-bottom:18px;
}
.side-status-text{display:flex; flex-direction:column; font-size:12px; line-height:1.5; color:var(--ink-soft);}
.side-status-text b{color:var(--navy); font-size:12.5px;}
.dot-live{width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(31,138,76,.5); flex:0 0 auto; animation:live-ping 1.8s ease-out infinite;}
.dot-live.small{width:7px; height:7px;}
@keyframes live-ping{0%{box-shadow:0 0 0 0 rgba(31,138,76,.45);} 70%{box-shadow:0 0 0 7px rgba(31,138,76,0);} 100%{box-shadow:0 0 0 0 rgba(31,138,76,0);}}

.side-nav{display:flex; flex-direction:column; gap:3px; flex:1; overflow-y:auto;}
.nav-item{
  display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:11px;
  color:var(--ink-soft); font-size:14.5px; font-weight:500; border:none; background:none;
  text-align:right; width:100%; transition:background .15s ease, color .15s ease;
  position:relative;
}
.nav-item .icon{flex:0 0 auto; opacity:.8;}
.nav-item:hover{background:rgba(26,35,64,.045); color:var(--navy);}
.nav-item.active{background:linear-gradient(90deg, rgba(209,20,48,.10), rgba(209,20,48,.02)); color:var(--navy); font-weight:700;}
.nav-item.active::before{content:""; position:absolute; right:0; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--grad-red);}
.nav-badge{margin-inline-start:auto; background:var(--grad-red); color:#fff; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:20px;}

.side-foot{display:flex; align-items:center; gap:10px; padding-top:16px; margin-top:10px; border-top:1px solid var(--line);}
.side-avatar{width:34px; height:34px; border-radius:50%; background:var(--grad-gold); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#3a2a06; flex:0 0 auto;}
.side-owner{display:flex; flex-direction:column; font-size:12px; line-height:1.5;}
.side-owner b{color:var(--navy); font-size:13px;}
.side-owner span{color:var(--muted);}

.side-backdrop{position:fixed; inset:0; background:rgba(15,18,32,.45); z-index:19; display:none;}

/* MAIN */
.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  position:sticky; top:0; z-index:15; display:flex; align-items:center; gap:14px;
  padding:16px 26px; background:rgba(246,244,242,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-title{font-size:19px; font-weight:800; color:var(--navy);}
.topbar-actions{margin-inline-start:auto; display:flex; align-items:center; gap:10px;}
.live-pill{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); background:rgba(26,35,64,.04); border:1px solid var(--line); padding:7px 13px; border-radius:100px;}
.hamburger{display:none; flex-direction:column; gap:4px; background:none; border:none; padding:6px;}
.hamburger span{width:20px; height:2px; background:var(--navy); border-radius:2px;}

.views{padding:24px 26px 60px; position:relative;}
.view{display:none; animation:view-in .35s ease both;}
.view.active{display:block;}
@keyframes view-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

/* ---- generic building blocks ---- */
.grid{display:grid; gap:16px;}
.grid-kpi{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:1.4fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.card{
  background:linear-gradient(175deg, var(--card), var(--card2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow-sm);
}
.card-title{font-size:15px; font-weight:700; display:flex; align-items:center; gap:9px; margin-bottom:14px; color:var(--navy);}
.card-title .icon{color:var(--gold-soft);}
.section-sub{color:var(--muted); font-size:13px; margin-top:-8px; margin-bottom:16px;}

.kpi{position:relative; overflow:hidden;}
.kpi::before{content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px; background:var(--grad-red);}
.kpi-label{color:var(--muted); font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:8px;}
.kpi-value{font-size:28px; font-weight:800; margin-top:8px; color:var(--navy);}
.kpi-value small{font-size:14px; color:var(--muted); font-weight:600;}
.kpi-delta{margin-top:6px; font-size:12px; font-weight:700; display:inline-flex; align-items:center; gap:4px;}
.kpi-delta.up{color:var(--ok);}
.kpi-delta.warn{color:var(--gold-soft);}

.badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:100px;}
.badge-new{background:rgba(75,81,102,.10); color:#4B5166;}
.badge-negotiating{background:rgba(185,133,43,.14); color:#8A6416;}
.badge-scheduled{background:rgba(47,120,220,.12); color:#2D6BC4;}
.badge-closed{background:rgba(31,138,76,.12); color:#1F8A4C;}

.btn{
  display:inline-flex; align-items:center; gap:8px; border:none; border-radius:11px;
  padding:10px 17px; font-size:13.5px; font-weight:700; color:#fff; background:var(--grad-red);
  box-shadow:0 8px 18px -8px rgba(158,14,38,.4); transition:transform .15s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.06); transform:translateY(-1px);}
.btn.ghost{background:rgba(26,35,64,.045); color:var(--ink); box-shadow:none; border:1px solid var(--line);}
.btn.gold{background:var(--grad-gold); color:#3a2a06; box-shadow:0 8px 18px -8px rgba(217,164,65,.4);}
.btn.sm{padding:7px 12px; font-size:12.5px;}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}

input[type=text], input[type=tel], input[type=email], input[type=number], textarea, select{
  width:100%; background:#FCFBFA; border:1px solid var(--line); color:var(--ink);
  border-radius:10px; padding:10px 13px; font-family:inherit; font-size:13.5px; outline:none;
  transition:border-color .15s ease;
}
input:focus, textarea:focus, select:focus{border-color:var(--gold);}
textarea{resize:vertical; line-height:1.7;}
label.field{display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--ink-soft); font-weight:600; margin-bottom:14px;}

/* ================= OVERVIEW ================= */
.pipeline-strip{display:flex; align-items:stretch; gap:0; margin-top:6px;}
.pipe-step{flex:1; display:flex; flex-direction:column; gap:6px; position:relative; padding:14px 16px;}
.pipe-step + .pipe-step::before{content:""; position:absolute; top:50%; right:100%; width:16px; height:2px; background:var(--line);}
.pipe-num{font-size:22px; font-weight:800; color:var(--navy);}
.pipe-label{font-size:12px; color:var(--muted); font-weight:600;}

.activity-feed{display:flex; flex-direction:column; gap:2px; max-height:360px; overflow-y:auto;}
.activity-item{display:flex; align-items:flex-start; gap:11px; padding:11px 4px; border-bottom:1px dashed var(--line); font-size:13px; animation:fade-up .4s ease both;}
.activity-item:last-child{border-bottom:none;}
.activity-dot{width:8px; height:8px; border-radius:50%; margin-top:5px; background:var(--gold); flex:0 0 auto;}
.activity-time{color:var(--muted); font-size:11.5px; margin-inline-start:auto; white-space:nowrap; padding-inline-start:8px;}

.sparkline{display:block; width:100%; height:130px;}

/* ================= CONVERSATIONS ================= */
.conv-layout{display:grid; grid-template-columns:340px 1fr; gap:16px; height:calc(100vh - 190px); min-height:560px;}
.conv-list{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);}
.conv-search{padding:14px; border-bottom:1px solid var(--line); position:relative;}
.conv-search .icon{position:absolute; inset-inline-start:24px; top:24px; color:var(--muted);}
.conv-search input{padding-inline-start:36px;}
.conv-items{overflow-y:auto; flex:1;}
.conv-item{display:flex; gap:11px; padding:13px 14px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .15s;}
.conv-item:hover{background:rgba(26,35,64,.03);}
.conv-item.active{background:rgba(209,20,48,.07);}
.avatar{width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; flex:0 0 auto;}
.conv-meta{flex:1; min-width:0;}
.conv-top-row{display:flex; align-items:center; gap:8px;}
.conv-name{font-weight:700; font-size:13.7px; color:var(--navy);}
.conv-time{margin-inline-start:auto; font-size:11px; color:var(--muted);}
.conv-preview{color:var(--muted); font-size:12.3px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.conv-bottom-row{display:flex; align-items:center; gap:6px; margin-top:6px;}
.unread-badge{background:var(--grad-red); color:#fff; font-size:10.5px; font-weight:700; min-width:18px; height:18px; border-radius:20px; display:flex; align-items:center; justify-content:center; padding:0 5px; margin-inline-start:auto;}

.chat-panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-sm);}
.chat-head{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.chat-back{display:none; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 auto; background:rgba(26,35,64,.05); border:none; border-radius:50%; color:var(--navy);}
.chat-head-meta{flex:1;}
.chat-head-meta b{font-size:14.5px; display:block; color:var(--navy);}
.chat-head-meta span{font-size:12px; color:var(--muted);}
.chat-body{flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:10px;
  background:
    radial-gradient(60% 40% at 15% 0%, rgba(217,164,65,.07), transparent 60%),
    var(--bg2);
}
.bubble{max-width:64%; padding:10px 14px; border-radius:16px; font-size:13.6px; line-height:1.65; position:relative; animation:bubble-in .28s ease both;}
@keyframes bubble-in{from{opacity:0; transform:translateY(6px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}
.bubble.client{align-self:flex-end; background:var(--card2); border:1px solid var(--line); border-bottom-left-radius:4px; color:var(--ink);}
.bubble.bot{align-self:flex-start; background:linear-gradient(135deg, var(--red-light), var(--red)); color:#fff; border-bottom-right-radius:4px;}
.bubble-time{display:block; font-size:10px; margin-top:5px; opacity:.65; text-align:left;}
.bubble.bot .bubble-time{display:flex; align-items:center; gap:3px; justify-content:flex-end; opacity:.85;}
.bubble.system{align-self:center; background:rgba(185,133,43,.12); border:1px solid rgba(185,133,43,.3); color:#8A6416; font-size:12px; padding:7px 14px; border-radius:100px; font-weight:600;}
.day-sep{align-self:center; font-size:11px; color:var(--muted); background:rgba(26,35,64,.045); padding:4px 12px; border-radius:100px; margin:8px 0;}

.typing-row{align-self:flex-start; display:flex; gap:4px; padding:11px 15px; border-radius:16px; background:var(--card2);}
.typing-row span{width:6px; height:6px; border-radius:50%; background:var(--muted); animation:typing-bounce 1.2s infinite ease-in-out;}
.typing-row span:nth-child(2){animation-delay:.15s;}
.typing-row span:nth-child(3){animation-delay:.3s;}
@keyframes typing-bounce{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;}}

.chat-foot{display:flex; align-items:center; gap:8px; padding:14px 18px; border-top:1px solid var(--line); flex-wrap:wrap;}
.chat-foot input{flex:1; min-width:80px;}
.chat-foot select{flex:0 1 120px; min-width:90px; font-size:12px; padding:9px 8px;}
.chat-foot .btn{border-radius:50%; width:42px; height:42px; padding:0; justify-content:center; flex:0 0 auto;}
.chat-empty{display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--muted); gap:12px; text-align:center; padding:30px;}

.ai-toggle{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-soft); margin-inline-start:12px; cursor:pointer;}
.ai-toggle .ai-note{display:block; font-size:10px; color:var(--muted); font-weight:400;}
.switch.sm{width:34px; height:19px;}
.switch.sm .slider-el::before{width:13px; height:13px; top:3px; right:3px;}
.switch.sm input:checked + .slider-el::before{transform:translateX(-15px);}

.voice-bubble{display:flex; flex-direction:column; gap:8px; min-width:190px;}
.voice-row{display:flex; align-items:center; gap:8px;}
.voice-wave{display:flex; align-items:flex-end; gap:2px; height:16px; flex:1;}
.voice-wave span{width:2.5px; background:currentColor; opacity:.55; border-radius:2px;}
.voice-wave.playing span{animation:wave-bounce 1s ease-in-out infinite;}
.voice-wave.playing span:nth-child(odd){animation-delay:.15s;}
@keyframes wave-bounce{0%,100%{transform:scaleY(.5);} 50%{transform:scaleY(1);}}
.voice-dur{font-size:11px; opacity:.85;}
.voice-toggle{align-self:flex-start; background:rgba(0,0,0,.08); border:none; color:inherit; font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:100px;}
.voice-toggle:disabled{opacity:.7;}
.voice-transcript{font-size:12px; line-height:1.6; background:rgba(26,35,64,.06); border-radius:8px; padding:8px 10px;}

/* ================= CALENDAR ================= */
.cal-toolbar{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.cal-toolbar b{font-size:16px; color:var(--navy);}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:8px;}
.cal-dow{text-align:center; font-size:11.5px; color:var(--muted); font-weight:700; padding-bottom:4px;}
.cal-cell{min-height:96px; background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:8px; display:flex; flex-direction:column; gap:5px; cursor:pointer; transition:border-color .15s;}
.cal-cell:hover{border-color:var(--gold);}
.cal-cell.out{opacity:.35;}
.cal-cell.today{border-color:var(--red-light); box-shadow:0 0 0 1px rgba(209,20,48,.35) inset;}
.cal-daynum{font-size:12.5px; font-weight:700; color:var(--ink-soft);}
.cal-chip{font-size:10.5px; background:rgba(209,20,48,.10); color:#9E0E26; border-radius:6px; padding:3px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600;}
.cal-chip.gold{background:rgba(185,133,43,.14); color:#8A6416;}
.cal-more{font-size:10px; color:var(--muted);}

.sync-row{display:flex; align-items:center; gap:10px; padding:12px 14px; background:rgba(31,138,76,.06); border:1px solid rgba(31,138,76,.25); border-radius:12px; margin-bottom:16px; font-size:13px; color:var(--ink-soft);}
.sync-row b{color:var(--navy);}

/* ================= KANBAN ================= */
.kanban{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:start;}
.kcol{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px; min-height:200px; box-shadow:var(--shadow-sm);}
.kcol-head{display:flex; align-items:center; gap:8px; margin-bottom:12px; font-weight:700; font-size:13.5px; color:var(--navy);}
.kcol-dot{width:9px; height:9px; border-radius:50%;}
.kcol-count{margin-inline-start:auto; color:var(--muted); font-weight:600; font-size:12px;}
.kcard{background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:10px; cursor:pointer; transition:transform .15s, border-color .15s;}
.kcard:hover{transform:translateY(-2px); border-color:var(--gold);}
.kcard-name{font-weight:700; font-size:13px; color:var(--navy);}
.kcard-meta{display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:12px; color:var(--muted);}
.kcard-value{color:#8A6416; font-weight:700;}
.kcard-advance{margin-top:10px; width:100%; font-size:11.5px; padding:6px; background:rgba(26,35,64,.035); border:1px dashed var(--line); border-radius:8px; color:var(--ink-soft);}
.kcard-advance:hover{border-color:var(--gold); color:#8A6416;}

/* ================= PERSONA ================= */
.persona-layout{display:grid; grid-template-columns:1fr 340px; gap:18px; align-items:start;}
.tone-row{display:flex; align-items:center; gap:14px;}
.tone-row input[type=range]{flex:1; accent-color:var(--red-light);}
.tone-labels{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-top:4px;}
.toggle-row{display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line);}
.toggle-row:last-child{border-bottom:none;}
.toggle-row b{font-size:13.5px; display:block; color:var(--navy);}
.toggle-row span{font-size:12px; color:var(--muted);}
.switch{position:relative; width:44px; height:25px; flex:0 0 auto;}
.switch input{opacity:0; width:0; height:0;}
.slider-el{position:absolute; inset:0; background:rgba(26,35,64,.16); border-radius:100px; transition:.2s; cursor:pointer;}
.slider-el::before{content:""; position:absolute; width:19px; height:19px; border-radius:50%; background:#fff; top:3px; right:3px; transition:.2s; box-shadow:0 1px 3px rgba(26,35,64,.3);}
.switch input:checked + .slider-el{background:var(--grad-red);}
.switch input:checked + .slider-el::before{transform:translateX(-19px);}

.hours-grid{display:flex; flex-direction:column; gap:8px;}
.hours-row{display:grid; grid-template-columns:70px 1fr 1fr 44px; gap:8px; align-items:center; font-size:12.5px;}
.hours-row input{padding:7px 9px;}

.know-list{display:flex; flex-direction:column; gap:8px; margin-top:6px;}
.know-item{display:flex; align-items:center; gap:10px; padding:9px 12px; background:rgba(26,35,64,.03); border:1px solid var(--line); border-radius:10px; font-size:12.8px;}
.know-item .icon{color:var(--gold-soft); flex:0 0 auto;}
.dropzone{border:1.5px dashed var(--line); border-radius:12px; padding:22px; text-align:center; color:var(--muted); font-size:12.5px; margin-top:10px; transition:border-color .15s;}
.dropzone:hover{border-color:var(--gold); color:#8A6416;}

.phone-preview{position:sticky; top:96px;}
.phone-shell{
  width:100%; max-width:300px; margin:0 auto; border-radius:34px; padding:12px;
  background:linear-gradient(160deg,#2A3355,#0F1526); border:1px solid rgba(26,35,64,.15); box-shadow:var(--shadow-lg);
}
.phone-notch{width:70px; height:6px; background:rgba(255,255,255,.15); border-radius:6px; margin:0 auto 8px;}
.phone-screen{background:var(--bg2); border-radius:22px; overflow:hidden; height:420px; display:flex; flex-direction:column;}
.phone-topbar{background:var(--navy); padding:12px 14px; display:flex; align-items:center; gap:9px;}
.phone-topbar b{font-size:12.5px; color:#fff;}
.phone-topbar span{font-size:10px; color:rgba(255,255,255,.65); display:block;}
.phone-chat{flex:1; padding:14px; display:flex; flex-direction:column; gap:9px; overflow-y:auto;}
.phone-chat .bubble{font-size:11.8px; max-width:80%; padding:8px 11px;}

/* ================= CONTRACTS ================= */
.tpl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.tpl-card{background:var(--card2); border:1px solid var(--line); border-radius:14px; padding:18px; cursor:pointer; transition:transform .15s, border-color .15s;}
.tpl-card:hover{transform:translateY(-3px); border-color:var(--gold);}
.tpl-card .icon-wrap{width:42px; height:42px; border-radius:11px; background:var(--grad-red); display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:12px;}
.tpl-card b{font-size:14px; display:block; margin-bottom:5px; color:var(--navy);}
.tpl-card p{font-size:12px; color:var(--muted); line-height:1.6;}

.doc-preview{background:#fff; color:#232323; border-radius:12px; padding:40px 44px; max-width:640px; margin:0 auto; box-shadow:var(--shadow-lg); font-size:13.5px; line-height:1.9; border:1px solid var(--line);}
.doc-preview h3{font-size:19px; margin-bottom:4px; color:#1A2340;}
.doc-preview .doc-sub{color:#77809c; font-size:12px; margin-bottom:22px;}
.doc-preview hr{border:none; border-top:1px solid #e7e7ee; margin:18px 0;}
.doc-row{display:flex; justify-content:space-between; padding:6px 0; font-size:13px;}
.doc-row b{color:#1A2340;}
.sig-box{margin-top:22px; border:1.5px dashed #cfd3e2; border-radius:10px; height:90px; display:flex; align-items:center; justify-content:center; color:#a2a8bd; font-size:12.5px; position:relative; overflow:hidden;}
.sig-box.signed{border-style:solid; border-color:#1F8A4C; color:#1a7f47; font-family:'Brush Script MT', cursive; font-size:26px;}

/* ================= ANALYTICS ================= */
.donut-wrap{display:flex; align-items:center; gap:22px;}
.legend{display:flex; flex-direction:column; gap:9px; font-size:12.5px; color:var(--ink-soft);}
.legend-item{display:flex; align-items:center; gap:8px;}
.legend-dot{width:9px; height:9px; border-radius:3px;}
.heatmap{display:grid; grid-template-columns:repeat(12,1fr); gap:4px;}
.heat-cell{aspect-ratio:1; border-radius:4px; background:rgba(209,20,48,.06);}

/* ================= LINKS ================= */
.link-list{display:flex; flex-direction:column; gap:12px; margin-top:6px;}
.link-row{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; position:relative; flex-wrap:wrap;}
.link-row.pinned{border-color:rgba(209,20,48,.3); background:rgba(209,20,48,.03);}
.link-pin{position:absolute; top:-10px; right:14px; background:var(--grad-red); color:#fff; font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:100px; display:flex; align-items:center; gap:4px;}
.link-main{flex:1; min-width:200px; display:flex; flex-direction:column; gap:2px;}
.link-main b{color:var(--navy); font-size:13.7px;}
.link-niche{color:var(--muted); font-size:12px;}
.link-url{color:#2D6BC4; font-size:12px; text-decoration:none; word-break:break-all;}
.link-url:hover{text-decoration:underline;}
.link-note{color:var(--muted); font-size:11.5px; font-style:italic; margin-top:3px; line-height:1.5;}
.link-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.link-actions select{width:auto; min-width:200px; font-size:12px; padding:7px 9px;}
.link-add{display:grid; grid-template-columns:1fr 1fr 1.4fr auto; gap:8px; margin-top:16px;}

/* ================= SETTINGS ================= */
.integration-row{display:flex; align-items:center; gap:14px; padding:15px; border:1px solid var(--line); border-radius:14px; margin-bottom:12px;}
.integration-icon{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:#fff;}
.integration-info{flex:1;}
.integration-info b{font-size:13.7px; display:block; color:var(--navy);}
.integration-info span{font-size:12px; color:var(--muted);}
.status-tag{font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:100px;}
.status-tag.on{background:rgba(31,138,76,.12); color:#1F8A4C;}
.status-tag.off{background:rgba(26,35,64,.06); color:var(--muted);}

/* ================= DRAWER ================= */
.drawer-backdrop{position:fixed; inset:0; background:rgba(15,18,32,.45); backdrop-filter:blur(2px); z-index:60; opacity:0; visibility:hidden; transition:.25s;}
.drawer-backdrop.show{opacity:1; visibility:visible;}
.drawer{
  position:fixed; top:0; bottom:0; left:0; width:min(420px,92vw); z-index:61;
  background:var(--card); border-inline-end:1px solid var(--line); box-shadow:var(--shadow-lg);
  transform:translateX(-100%); transition:transform .3s cubic-bezier(.2,.9,.25,1);
  overflow-y:auto; padding:22px;
}
.drawer.show{transform:translateX(0);}
.drawer h3{color:var(--navy);}

/* ================= RESPONSIVE ================= */
@media (max-width:1180px){
  .grid-kpi{grid-template-columns:repeat(2,1fr);}
  .grid-2{grid-template-columns:1fr;}
  .persona-layout{grid-template-columns:1fr;}
  .phone-preview{position:static;}
  .kanban{grid-template-columns:repeat(2,1fr);}
  .tpl-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .sidebar{position:fixed; inset-inline-start:0; top:0; transform:translateX(100%); transition:transform .25s ease; box-shadow:var(--shadow-lg);}
  .sidebar.open{transform:translateX(0);}
  .side-backdrop.show{display:block;}
  .hamburger{display:flex;}
  .grid-kpi{grid-template-columns:1fr 1fr;}
  .kanban{grid-template-columns:1fr;}
  .tpl-grid{grid-template-columns:1fr;}
  .bubble{max-width:82%;}

  /* שיחות במובייל מתנהגות כמו אפליקציית מסרים אמיתית — מסך אחד בכל פעם, לא שני פאנלים דחוסים */
  .conv-layout{display:block; grid-template-columns:none; height:calc(100vh - 128px); position:relative; overflow:hidden;}
  .conv-list, .chat-panel{position:absolute; inset:0; height:100%;}
  .conv-layout:not(.chat-open) .chat-panel{display:none;}
  .conv-layout.chat-open .conv-list{display:none;}
  .chat-back{display:flex;}
}
@media (max-width:560px){
  .grid-kpi{grid-template-columns:1fr;}
  .views{padding:14px;}
  .doc-preview{padding:22px;}
  .topbar{padding:12px 14px;}
  .topbar-title{font-size:16.5px;}
  .live-pill{padding:5px 10px; font-size:11px;}
  .card{padding:16px;}

  /* משפך המכירות — שתי עמודות במקום שורה דחוסה */
  .pipeline-strip{flex-wrap:wrap;}
  .pipe-step{flex:1 1 46%;}
  .pipe-step::before{display:none;}

  /* יומן — מצמצמים כל תא לנקודת-צבע בלבד, כל הפרטים עדיין נגישים בנגיעה על היום (המגירה) */
  .cal-grid{gap:5px;}
  .cal-cell{min-height:54px; padding:6px 4px; gap:3px; border-radius:9px;}
  .cal-daynum{font-size:11.5px;}
  .cal-chip{font-size:0; width:6px; height:6px; padding:0; border-radius:50%; line-height:0;}
  .cal-more{display:none;}

  /* דונאט מקורות פנייה — נערם אנכית כדי לא לגלוש */
  .donut-wrap{flex-wrap:wrap; justify-content:center; text-align:center;}
  .legend{align-items:center;}

  /* שעות פעילות — שורה צפופה יותר בלי לאבד עמודה */
  .hours-row{grid-template-columns:50px 1fr 1fr 38px; gap:5px; font-size:11.5px;}
  .hours-row input{padding:6px 5px; font-size:11.5px;}

  .persona-layout{gap:14px;}
  .tpl-card, .kcard, .integration-row{padding:13px;}

  .link-add{grid-template-columns:1fr;}
  .link-actions{width:100%;}
  .link-actions select{min-width:0; flex:1;}
}