/* ============================================
   CSS BLOCK 15: VIEW MODAL (card detail)
   ============================================ */
.mov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:500;backdrop-filter:blur(4px);overflow-y:auto;padding:20px}
.mov.a{display:flex;align-items:flex-start;justify-content:center}
.vcard{background:var(--sf);border:1px solid var(--bd);border-radius:16px;width:880px;max-width:95vw;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);margin:auto}
.vc-head{padding:16px 20px;border-bottom:1px solid var(--bd);display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.vc-uid{font-size:12px;color:var(--a2);font-weight:700}
.vc-name{font-size:18px;font-weight:700;line-height:1.3;margin-top:2px}
.vc-sub{font-size:11px;color:var(--t2);margin-top:3px}
.vc-x{background:none;border:none;color:var(--t2);font-size:20px;cursor:pointer;padding:4px 8px;flex-shrink:0}
.vc-x:hover{color:#fff}
.vc-head-btns{display:flex;gap:6px;align-items:center;flex-shrink:0}
.vc-hb{background:none;border:none;font-size:18px;cursor:pointer;padding:4px;opacity:.6;transition:opacity .2s}
.vc-hb:hover{opacity:1}

/* ============================================
   CSS BLOCK 16: PIPELINE (stage steps)
   ============================================ */
.pipeline{padding:10px 14px;border-bottom:1px solid var(--bd);display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;align-items:center}
.pipeline::-webkit-scrollbar{height:0}
.pip-step{flex-shrink:0;padding:8px 14px;text-align:center;font-size:12px;font-weight:600;border-radius:10px;cursor:pointer;background:rgba(34,35,46,.6);color:var(--t2);transition:all .2s;white-space:nowrap;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.04);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.pip-step.current{background:rgba(108,92,231,.6);color:#fff;box-shadow:0 2px 10px rgba(108,92,231,.35),inset 0 1px 0 rgba(255,255,255,.12);border-color:rgba(108,92,231,.3)}
.pip-step.passed{background:rgba(108,92,231,.2);color:var(--a2);border-color:rgba(162,155,254,.15)}
.pip-step:hover:not(.current){background:rgba(108,92,231,.25);color:var(--a2);box-shadow:0 2px 8px rgba(108,92,231,.2);transform:translateY(-1px)}
.pip-complete{background:rgba(0,184,148,.15)!important;color:var(--gn)!important;border-color:rgba(0,184,148,.2)!important}
.pip-complete:hover{background:rgba(0,184,148,.35)!important;color:#fff!important}
.pip-transfer{background:rgba(116,185,255,.15)!important;color:var(--bl)!important;border-color:rgba(116,185,255,.2)!important}
.pip-transfer:hover{background:rgba(116,185,255,.35)!important;color:#fff!important}

/* ============================================
   CSS BLOCK 17: VIEW CARD — 2-column body
   ============================================ */
.vc-body-wrap{display:flex;min-height:280px}
.vc-left{flex:1;border-right:1px solid var(--bd);overflow-y:auto;max-height:55vh}
.vc-right{width:320px;overflow-y:auto;max-height:55vh;flex-shrink:0}
.vc-right::-webkit-scrollbar,.vc-left::-webkit-scrollbar{width:3px}
.vc-right::-webkit-scrollbar-thumb,.vc-left::-webkit-scrollbar-thumb{background:#333;border-radius:4px}

/* ============================================
   CSS BLOCK 18: VIEW CARD — mobile tabs
   ============================================ */
.vc-mob-tabs{display:none;border-bottom:1px solid var(--bd)}
.vc-mob-tabs-row{display:flex}
.vc-mob-tab{flex:1;padding:10px;text-align:center;font-size:12px;font-weight:600;color:var(--t2);border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
.vc-mob-tab.a{color:var(--ac);border-bottom-color:var(--ac)}

/* ============================================
   CSS BLOCK 19: VIEW CARD — info fields
   ============================================ */
.vc-info{padding:16px}
.vc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.vc-field{display:flex;flex-direction:column;gap:2px}
.vc-label{font-size:9px;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.vc-val{font-size:13px;color:var(--tx)}
.vc-val a{color:var(--bl);text-decoration:none}
.vc-val.big{font-size:16px;font-weight:700;color:var(--gn)}
.vc-section{margin-bottom:12px}
.vc-section-title{font-size:10px;font-weight:600;color:var(--t2);text-transform:uppercase;margin-bottom:5px;letter-spacing:.5px}
.vc-notes{background:var(--cd);border-radius:10px;padding:10px;font-size:12px;color:var(--t2);line-height:1.6;cursor:pointer;border:1px solid transparent;transition:border .2s;position:relative}
.vc-notes:hover{border-color:var(--bd)}
.vc-notes-trunc{max-height:55px;overflow:hidden;position:relative}
.vc-notes-trunc::after{content:"";position:absolute;bottom:0;left:0;right:0;height:20px;background:linear-gradient(transparent,var(--cd))}
.vc-expand{font-size:11px;color:var(--a2);cursor:pointer;padding:3px 0;display:inline-block}
.vc-expand:hover{color:#fff}

/* ============================================
   CSS BLOCK 20: VIEW CARD — history
   ============================================ */
.vc-history{padding:14px}
.vc-hist-hdr{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.vc-hist-title{font-size:10px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.5px}
.vc-hist-btn{padding:4px 10px;border-radius:6px;font-size:10px;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.08);background:rgba(34,35,46,.5);color:var(--t2);transition:all .15s;margin-left:auto}
.vc-hist-btn:hover{border-color:var(--ac);color:var(--ac);background:rgba(108,92,231,.1)}
.hist-item{display:flex;gap:8px;padding:8px 0;border-bottom:1px solid var(--bd)}
.hist-item:last-child{border-bottom:none}
.hist-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.hist-info{flex:1;min-width:0}
.hist-text{font-size:12px;color:var(--tx)}
.hist-date{font-size:10px;color:var(--t2);margin-top:1px}
.hist-empty{color:#444;font-size:12px;text-align:center;padding:16px 0}

/* ============================================
   CSS BLOCK 21: VIEW CARD — action buttons
   ============================================ */
.vc-actions{padding:10px 14px;border-top:1px solid var(--bd);display:flex;gap:8px;flex-wrap:wrap}
.q-btn{flex:1;min-width:0;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.08);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 8px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.1)}
.q-btn:active{transform:scale(.96)}
.q-btn:hover{box-shadow:0 4px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.15);transform:translateY(-1px)}
.q-btn.act-call{background:rgba(39,174,96,.55);border-color:rgba(39,174,96,.2)}
.q-btn.act-msg{background:rgba(108,92,231,.55);border-color:rgba(108,92,231,.2)}
.q-btn.act-complete{background:rgba(0,184,148,.45);border-color:rgba(0,184,148,.2)}

/* ============================================
   CSS BLOCK 22: QUICK ACTIONS SHEET (mobile card)
   ============================================ */

/* ========== LEAD PEEK PANEL ========== */

.lead-peek-panel {
  position: fixed; top: 0; right: 0;
  width: 100%; height: 100%;
  z-index: 1100;
  pointer-events: none;
}
.lead-peek-panel.open { pointer-events: auto; }

.lpp-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.25);
  opacity: 0; transition: opacity 0.2s ease;
}
.lead-peek-panel.open .lpp-overlay { opacity: 1; }

.lpp-sheet {
  position: absolute; top: 0; right: 0;
  width: 360px; max-width: 100vw; height: 100%;
  background: #fff; border-left: 1px solid #e4e6ea;
  box-shadow: -4px 0 24px rgba(0,0,0,0.10);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
  overflow: hidden;
}
.lead-peek-panel.open .lpp-sheet { transform: translateX(0); }

/* Шапка */
.lpp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #f0f1f3;
  flex-shrink: 0;
}
.lpp-header-left { display: flex; align-items: center; gap: 10px; }
.lpp-header-right { display: flex; gap: 4px; }
.lpp-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #ede9fe; color: #6366f1;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.lpp-name { font-size: 14px; font-weight: 700; color: #1a1d23; }
.lpp-meta { font-size: 11px; color: #9ca3af; margin-top: 1px; }

.lpp-open-btn, .lpp-close-btn {
  background: none; border: none; cursor: pointer;
  color: #9ca3af; font-size: 16px; padding: 4px 6px;
  border-radius: 6px; line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.lpp-open-btn:hover, .lpp-close-btn:hover {
  color: #1a1d23; background: #f0f1f3;
}

/* Быстрые действия */
.lpp-actions {
  display: flex; gap: 6px; padding: 10px 16px;
  border-bottom: 1px solid #f0f1f3; flex-shrink: 0;
}
.lpp-action-btn {
  flex: 1; padding: 7px 4px; border: 1.5px solid #e4e6ea;
  border-radius: 8px; background: #f8f9fb;
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; color: #1a1d23;
  transition: background 0.15s, border-color 0.15s;
}
.lpp-action-btn:hover { background: #f0f1ff; border-color: #c7c8f8; }
.lpp-call:hover { background: #f0fdf4; border-color: #86efac; }
.lpp-action-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Контент */
#lpp-content { flex: 1; overflow-y: auto; padding-bottom: 16px; }

.lpp-section {
  padding: 10px 16px 4px;
  border-bottom: 1px solid #f0f1f3;
}
.lpp-section:last-child { border-bottom: none; }
.lpp-section-title {
  font-size: 10px; font-weight: 700; color: #9ca3af;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.lpp-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #1a1d23; margin-bottom: 4px;
}
.lpp-row-icon { font-size: 13px; flex-shrink: 0; }
.lpp-row-val  { flex: 1; }
.lpp-copy-btn {
  background: none; border: none; cursor: pointer;
  font-size: 13px; color: #c4c6cc; padding: 2px;
  opacity: 0; transition: opacity 0.15s;
}
.lpp-row:hover .lpp-copy-btn { opacity: 1; }

.lpp-kv-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 8px; font-size: 12px;
}
.lpp-kv-key  { color: #9ca3af; }
.lpp-kv-val  { color: #1a1d23; font-weight: 500; }

.lpp-call-block {
  background: #f8f9fb; border-radius: 8px;
  padding: 8px 10px; font-size: 12px; color: #5c6070;
}

.lpp-task-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; background: #f8f9fb;
  border-radius: 6px; font-size: 12px; color: #1a1d23;
}
.lpp-task-item .lpp-task-time { color: #9ca3af; font-size: 11px; margin-left: auto; }

.lpp-notes-text {
  font-size: 12px; color: #5c6070; line-height: 1.5;
  white-space: pre-wrap;
}

/* Скелетон */
@keyframes lpp-shimmer {
  0%   { background-position: -200% 0 }
  100% { background-position:  200% 0 }
}
.lpp-sheet .skeleton {
  background: linear-gradient(90deg,#f0f1f3 25%,#e8e9eb 50%,#f0f1f3 75%);
  background-size: 200% 100%;
  animation: lpp-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}

/* Мобильный: панель снизу */
@media (max-width: 600px) {
  .lpp-sheet {
    top: auto; bottom: 0; right: 0; left: 0;
    width: 100%; height: 85vh;
    border-left: none; border-top: 1px solid #e4e6ea;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .lead-peek-panel.open .lpp-sheet { transform: translateY(0); }
}