/* ============================================ */
/* Lead Detail Modal — v10                       */
/* ============================================ */

/* === MODAL OVERLAY === */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: #fff;
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 900px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* === MODAL HEADER === */
.modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--slate-100);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
}
.modal-client-info {
  flex: 1;
  min-width: 0;
}
.modal-client-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--slate-900);
  letter-spacing: -.3px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-client-meta {
  color: var(--slate-500);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.modal-client-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.modal-close {
  width: 36px; height: 36px;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--slate-600);
  flex-shrink: 0;
}
.modal-close:hover { background: var(--slate-100); color: var(--slate-900); }

/* === ACTION BAR === */
.modal-actions {
  padding: 12px 24px;
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-100);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  transition: all .15s;
}
.action-btn.wa { background: #25D366; color: #fff; }
.action-btn.wa:hover { background: #1FAA52; }
.action-btn.ai { background: var(--ai); color: #fff; }
.action-btn.ai:hover { background: #5B21B6; }
.action-btn.est { background: #0E7490; color: #fff; }
.action-btn.est:hover { background: #155E75; }
.action-btn.est:disabled { opacity: .7; cursor: default; }
.action-btn.save { background: #047857; color: #fff; }
.action-btn.save:hover { background: #065F46; }
.action-btn.save:disabled { opacity: .6; cursor: default; }
.action-btn.del { background: #fff; color: #B91C1C; border-color: #FCA5A5; }
.action-btn.del:hover { background: #FEF2F2; }
.ma-spacer { flex: 1; min-width: 0; }

/* AI photo-estimate overlay */
.aie-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.aie-card { background: #fff; width: 460px; max-width: 100%; max-height: 88vh; overflow-y: auto; border-radius: var(--r-lg); box-shadow: 0 24px 64px rgba(15,23,42,.4); }
.aie-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--slate-200); position: sticky; top: 0; background: #fff; }
.aie-title { font-size: 16px; font-weight: 800; color: var(--slate-900); }
.aie-close { width: 30px; height: 30px; border: 1px solid var(--slate-200); background: #fff; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--slate-600); }
.aie-close:hover { background: var(--slate-50); }
.aie-body { padding: 18px 20px; }
.aie-task { font-size: 17px; font-weight: 800; color: var(--slate-900); }
.aie-summary { font-size: 13px; color: var(--slate-600); margin: 6px 0 10px; line-height: 1.45; }
.aie-conf { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; margin-right: 6px; }
.aie-conf.hi { background: #DCFCE7; color: #166534; }
.aie-conf.mid { background: #FEF9C3; color: #854D0E; }
.aie-conf.lo { background: #FEE2E2; color: #991B1B; }
.aie-imgs { font-size: 11px; font-weight: 700; color: var(--slate-500); }
.aie-muted { color: var(--slate-400); font-weight: 500; }
.aie-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-top: 14px; padding-bottom: 8px; border-bottom: 1px dashed var(--slate-200); }
.aie-row > span:first-child { font-weight: 700; color: var(--slate-700); }
.aie-row > span:last-child { color: var(--slate-900); text-align: right; }
.aie-mats { margin-top: 8px; }
.aie-mat { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; color: var(--slate-800); }
.aie-mat-total { border-top: 1px solid var(--slate-200); margin-top: 4px; padding-top: 6px; font-weight: 800; }
.aie-price { margin-top: 14px; border: 1px solid var(--slate-200); border-radius: var(--r); overflow: hidden; }
.aie-price-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; font-size: 14px; }
.aie-price-row.cash { background: #ECFDF5; color: #065F46; }
.aie-price-row.card { background: #EFF6FF; color: #1E40AF; border-top: 1px solid var(--slate-200); }
.aie-price-row b { font-size: 16px; font-weight: 800; }
.aie-rat { margin-top: 12px; font-size: 12px; color: var(--slate-500); font-style: italic; line-height: 1.45; }
.aie-q { margin-top: 12px; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: var(--r); padding: 10px 12px; }
.aie-q-t { font-size: 12px; font-weight: 800; color: #92400E; margin-bottom: 4px; }
.aie-q ul { margin: 0; padding-left: 18px; }
.aie-q li { font-size: 12px; color: #78350F; margin: 2px 0; }
.aie-foot { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--slate-200); position: sticky; bottom: 0; background: #fff; }
.aie-apply { flex: 1; background: var(--brand); color: #fff; border: none; font-size: 14px; font-weight: 800; padding: 12px; border-radius: var(--r); cursor: pointer; }
.aie-apply:hover { filter: brightness(1.06); }
.aie-cancel { background: #fff; color: var(--slate-600); border: 1px solid var(--slate-300); font-size: 14px; font-weight: 700; padding: 12px 18px; border-radius: var(--r); cursor: pointer; }
.aie-cancel:hover { background: var(--slate-50); }
.action-btn.ghost {
  background: #fff;
  color: var(--slate-700);
  border-color: var(--slate-200);
}
.action-btn.ghost:hover { background: var(--slate-50); border-color: var(--slate-300); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r);
  font-size: 12px;
  font-weight: 700;
  background: var(--slate-100);
  color: var(--slate-700);
  cursor: pointer;
  border: 1px solid var(--slate-200);
}
.status-pill.new { background: var(--danger-light); color: var(--danger); border-color: var(--danger-border); }
.status-pill.estimate { background: var(--warning-light); color: var(--warning); border-color: var(--warning-border); }
.status-pill.sent { background: var(--info-light); color: var(--info); border-color: var(--info-border); }
.status-pill.followup { background: var(--ai-light); color: var(--ai); border-color: var(--ai-border); }
.status-pill.approved { background: var(--success-light); color: var(--success); border-color: var(--success-border); }

/* === TABS === */
.modal-tabs {
  display: flex;
  gap: 8px;
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
  padding: 10px 16px;
}
.modal-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-600);
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.modal-tab:hover { background: var(--slate-100); color: var(--slate-900); }
.modal-tab.active { background: var(--brand-light); border-color: var(--brand-border); color: var(--brand); }

/* === MODAL BODY === */
.modal-body {
  flex: 1;
  overflow-y: auto;
  background: #D0D4DB;
  position: relative;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* === CHAT TAB === */
.chat-area {
  padding: 16px 20px 10px;
  min-height: 52vh;
  background: #E2E8F0;
}
/* client + conversation context card at top of chat */
.chat-ctx {
  background: #fff;
  border: 1px solid var(--slate-300);
  border-radius: var(--r-md);
  padding: 11px 13px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 7px;
}
.chat-ctx-row { display: flex; gap: 10px; font-size: 13px; align-items: baseline; }
.chat-ctx-k { color: var(--slate-600); font-weight: 700; flex: 0 0 auto; min-width: 84px; }
.chat-ctx-v { color: var(--slate-900); font-weight: 600; }
.chat-photos:empty { display: none; }
/* AI conversation summary card */
.chat-sum { margin-bottom: 12px; }
.chat-sum:empty { display: none; }
.chat-sum-head { font-size: 11px; font-weight: 800; color: #6D28D9; text-transform: none; letter-spacing: .04em; margin-bottom: 5px; display: flex; align-items: center; gap: 8px; }
.chat-sum-refresh { cursor: pointer; font-size: 14px; font-weight: 700; opacity: .65; }
.chat-sum-refresh:hover { opacity: 1; }
.chat-sum-body { background: var(--ai-light, #F5F3FF); border: 1px solid var(--ai-border, #DDD6FE); border-radius: var(--r-md); padding: 10px 12px; font-size: 13px; line-height: 1.5; color: #4C1D95; white-space: pre-wrap; word-break: break-word; }
.chat-sum-load { font-style: italic; opacity: .8; }
.chat-sum-err { color: var(--danger); font-style: italic; }
.chat-sum-head { cursor: pointer; user-select: none; }
.chat-sum-chev { display: inline-block; font-size: 11px; transition: transform .15s; opacity: .7; }
.chat-sum:not(.collapsed) .chat-sum-chev { transform: rotate(90deg); }
.chat-sum.collapsed .chat-sum-head { margin-bottom: 0; }
.chat-sum.collapsed .chat-sum-body { display: none; }
.chat-photos { margin-bottom: 14px; background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r-md); padding: 12px; }
.chat-photos-t { font-size: 12px; font-weight: 800; color: var(--slate-700); margin-bottom: 8px; text-transform: none; letter-spacing: .4px; }
.chat-photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.chat-photo { aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--slate-100); border: 1px solid var(--slate-200); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.chat-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s; }
.chat-photo:hover img { transform: scale(1.05); }
.chat-photo-load { font-size: 16px; opacity: .5; }
.chat-photo-err { color: var(--danger); font-weight: 800; }
.chat-day {
  text-align: center;
  margin: 14px 0;
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .5px;
}
.msg {
  margin-bottom: 9px;
  display: flex;
}
.msg.in { justify-content: flex-start; }
.msg.out { justify-content: flex-end; }
.msg-col {
  display: flex;
  flex-direction: column;
  max-width: 72%;
  min-width: 0;
}
.msg.out .msg-col { align-items: flex-end; }
.msg-sender {
  font-size: 11px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: .4px;
  margin: 0 4px 2px;
}
.msg.in .msg-sender { color: #1D4ED8; }
.msg.out .msg-sender { color: #047857; }
.msg-bubble {
  width: fit-content;
  max-width: 100%;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .1);
}
/* client = white card, dark text, blue accent, left */
.msg.in .msg-bubble {
  background: #fff;
  color: var(--slate-900);
  border: 1px solid var(--slate-300);
  border-left: 3px solid #2563EB;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .14);
}
/* me = brand purple, white text, right */
.msg.out .msg-bubble {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand-hover);
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 5px rgba(var(--brand-rgb), .28);
}
.msg-media { display: block; max-width: 240px; max-height: 280px; border-radius: 8px; margin: 2px 0; border: 1px solid rgba(15,23,42,.12); }
/* clickable links inside chat bubbles */
.msg-link { color: #1D4ED8; text-decoration: underline; text-underline-offset: 1px; word-break: break-word; overflow-wrap: anywhere; }
.msg-link:hover { text-decoration: underline; filter: brightness(.9); }
.msg.out .msg-link { color: #fff; }
.msg-cap .msg-link { color: #1D4ED8; }
.msg-media-ph { font-style: italic; opacity: .9; font-weight: 600; }
.msg-media-cell { min-width: 130px; min-height: 96px; display: flex; align-items: center; justify-content: center; }
.msg-media-load { font-size: 18px; opacity: .5; }
.msg-cap { font-size: 13px; color: var(--slate-700); margin-top: 5px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.msg-time {
  font-size: 11px;
  color: var(--slate-600);
  margin-top: 3px;
  padding: 0 4px;
}
.msg.out .msg-time { text-align: right; color: var(--slate-600); }

/* AI suggestion in chat */
.ai-suggest-bar {
  background: var(--ai-light);
  border: 1px solid var(--ai-border);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin: 14px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ai-suggest-icon {
  width: 32px; height: 32px;
  background: var(--ai);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}
.ai-suggest-text {
  flex: 1;
  font-size: 13px;
  color: #5B21B6;
  line-height: 1.5;
}
.ai-suggest-text b { color: #4C1D95; }

/* Chat input bar (sticky bottom) */
.chat-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #fff;
  border-top: 1px solid var(--slate-200);
}
.chat-templates {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 18px 0;
}
.chat-tpl {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-light);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  padding: 5px 11px;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.chat-tpl:hover { background: var(--brand); color: #fff; }
.chat-input-bar {
  padding: 12px 18px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.chat-input {
  flex: 1;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all .15s;
}
.chat-input:focus { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12); }
.chat-send-btn {
  width: 40px; height: 40px;
  background: var(--brand);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  border: none;
  box-shadow: var(--shadow-sm);
}
.chat-send-btn:hover { background: var(--brand-hover); }
.chat-send-btn:disabled { background: var(--slate-300); cursor: not-allowed; }

/* === DETAILS TAB === */
.details-grid {
  padding: 24px;
  display: grid;
  gap: 16px;
  max-width: 600px;
}
.detail-field { display: flex; flex-direction: column; gap: 6px; }
.detail-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-500);
  text-transform: none;
  letter-spacing: .5px;
}
.detail-value {
  font-size: 14px;
  color: var(--slate-900);
  font-weight: 500;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--slate-300);
  border-radius: var(--r);
}
.detail-value.empty { color: var(--slate-400); font-style: italic; }

/* editable details form */
.detail-edit-grid { padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; max-width: 680px; }
.detail-edit-grid .full { grid-column: 1 / -1; }
.detail-input, .detail-select, .detail-textarea {
  font-size: 14px; color: var(--slate-900); font-weight: 500; font-family: inherit;
  padding: 9px 12px; background: #fff; border: 1px solid var(--slate-300);
  border-radius: var(--r); width: 100%; box-sizing: border-box;
}
.detail-input:focus, .detail-select:focus, .detail-textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12);
}
.detail-textarea { resize: vertical; min-height: 64px; line-height: 1.45; }
.detail-ro { font-size: 13px; color: var(--slate-500); padding: 9px 12px; background: var(--slate-50); border: 1px dashed var(--slate-300); border-radius: var(--r); }
.detail-save-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.detail-save-btn { background: var(--brand); color: #fff; border: none; font-size: 14px; font-weight: 700; padding: 10px 22px; border-radius: var(--r); cursor: pointer; }
.detail-save-btn:hover { filter: brightness(1.06); }
.detail-save-btn:disabled { opacity: .6; cursor: default; }
.detail-del-btn { background: #fff; color: var(--danger); border: 1px solid var(--danger); font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: var(--r); cursor: pointer; }
.detail-del-btn:hover { background: var(--danger); color: #fff; }
.detail-del-btn:disabled { opacity: .6; cursor: default; }
.detail-save-msg { font-size: 13px; font-weight: 700; }
.detail-save-msg.ok { color: #059669; }
.detail-save-msg.err { color: var(--danger); }
.detail-save-note { font-size: 12px; color: var(--slate-400); margin-left: auto; }

/* === TIMELINE TAB === */
.timeline {
  padding: 20px 24px;
}
.timeline-item {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--slate-100);
}
.timeline-item:last-child { border-bottom: 0; }
.timeline-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--slate-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.timeline-content { flex: 1; min-width: 0; }
.timeline-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-900);
  margin-bottom: 2px;
}
.timeline-desc {
  font-size: 12px;
  color: var(--slate-500);
  line-height: 1.4;
}
.timeline-time {
  font-size: 11px;
  color: var(--slate-400);
  margin-top: 4px;
}

/* === LOADING === */
.modal-loading {
  padding: 60px 20px;
  text-align: center;
  color: var(--slate-500);
}

/* === MOBILE === */
@media (max-width: 768px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal { max-width: 100%; max-height: 100vh; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .modal-header { padding: 9px 14px; }
  .modal-client-meta { font-size: 11px; gap: 3px 10px; margin-top: 1px; }
  .modal-actions { padding: 6px 14px; gap: 6px; align-items: center; flex-wrap: nowrap; }
  .ma-spacer { display: block; flex: 1 1 0; }
  .detail-save-msg { display: none; }
  .ab-label { display: none; }
  /* status on the left, the 5 actions become square icon-only buttons grouped on the right, one row */
  .status-pill { flex: 0 0 auto; justify-content: center; height: 44px; padding: 0 12px; font-size: 12px; box-sizing: border-box; white-space: nowrap; }
  .action-btn { flex: 0 0 auto; width: 44px; height: 44px; min-height: 0; padding: 0; gap: 0; font-size: 17px; justify-content: center; box-sizing: border-box; }
  .modal-tabs { padding: 10px 12px; gap: 6px; }
  .modal-tab { padding: 0 8px; font-size: 12.5px; }
  /* messages: leave room so the last one isn't hidden behind the input bar (+ iPhone home bar) */
  .chat-area { padding: 12px 16px; padding-bottom: calc(124px + env(safe-area-inset-bottom)); }
  /* quick-reply chips: one horizontal scrollable row instead of wrapping */
  .chat-templates { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 12px 0; }
  .chat-templates::-webkit-scrollbar { display: none; }
  .chat-tpl { flex: 0 0 auto; }
  /* input bar: respect the iPhone home indicator */
  .chat-input-bar { padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  /* 16px font prevents iOS auto-zoom on focus; bigger tap targets */
  .chat-input { font-size: 16px; padding: 11px 16px; }
  .chat-send-btn { width: 44px; height: 44px; flex: 0 0 auto; }
  /* --- Chat redesign (Session 2): bigger + one-handed on 390px --- */
  .msg-bubble { font-size: 16px; line-height: 1.5; }
  .msg-col { max-width: 82%; }
  .msg-sender { font-size: 12px; }
  .msg-time { font-size: 11.5px; }
  .msg-media { max-width: min(240px, 66vw); }
}

/* ===== Forward to technician: message + photo buttons, tech picker, toast ===== */
.msg-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.msg.out .msg-meta { justify-content: flex-end; }
.msg-fwd { background: none; border: none; cursor: pointer; font-size: 13px; line-height: 1; opacity: .45; padding: 0 2px; color: var(--slate-600); }
.msg-fwd:hover { opacity: 1; color: var(--brand); }

.chat-photo { position: relative; }
.chat-photo-fwd { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: none; border-radius: 6px; background: rgba(15,23,42,.55); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: .85; }
.chat-photo-fwd:hover { background: var(--brand); opacity: 1; }

.fwd-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 9999; display: flex; align-items: flex-end; justify-content: center; }
.fwd-sheet { background: #fff; width: 100%; max-width: 420px; border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 32px rgba(15,23,42,.3); }
.fwd-title { font-size: 13px; font-weight: 800; color: var(--slate-500); text-transform: none; letter-spacing: .04em; margin-bottom: 10px; }
.fwd-tech { display: block; width: 100%; text-align: left; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 10px; padding: 12px 14px; font-size: 15px; font-weight: 700; color: var(--slate-900); cursor: pointer; margin-bottom: 8px; font-family: inherit; }
.fwd-tech:hover { background: var(--brand-light); border-color: var(--brand-border); color: var(--brand); }
.fwd-cancel { display: block; width: 100%; background: none; border: none; padding: 10px; font-size: 14px; font-weight: 700; color: var(--slate-500); cursor: pointer; margin-top: 2px; font-family: inherit; }

.fwd-toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(20px); background: var(--slate-900); color: #fff; font-size: 14px; font-weight: 600; padding: 11px 18px; border-radius: 999px; z-index: 10001; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; box-shadow: 0 8px 24px rgba(15,23,42,.3); max-width: 90%; text-align: center; }
.fwd-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- AI reply assistant (in-card) ---- */
.chat-ai-row{display:flex;gap:6px;flex-wrap:wrap;padding:6px 0 0}
.chat-tpl.ai{background:var(--ai-light,#ede9fe);color:var(--ai,#6d28d9);border-color:var(--ai,#a78bfa)}
.ai-panel{display:none;margin:8px 0;background:#fff;border:1px solid var(--slate-200,#e2e8f0);border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(15,23,42,.10)}
.ai-panel.ai-show{display:block}
.ai-sheet-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--ai-light,#ede9fe);border-bottom:1px solid var(--slate-200,#e2e8f0)}
.ai-sheet-title{font-size:14px;font-weight:700;color:var(--ai,#6d28d9)}
.ai-sheet-x{width:40px;height:40px;min-width:40px;border:0;border-radius:8px;background:#fff;color:var(--slate-600,#475569);font-size:17px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.ai-sheet-x:active{transform:scale(.96)}
.ai-sheet-body{padding:10px 12px;max-height:52vh;overflow:auto}
.ai-head{font-size:12px;font-weight:600;color:var(--slate-600,#475569);margin-bottom:8px}
.ai-opt{background:#fff;border:1px solid var(--slate-200,#e2e8f0);border-radius:8px;padding:8px;margin-bottom:8px}
.ai-opt-en{font-size:14px;line-height:1.5;white-space:pre-wrap;color:var(--slate-900,#0f172a)}
.ai-opt-ru{margin-top:6px;padding-top:6px;border-top:1px dashed var(--slate-200,#e2e8f0);font-size:13px;line-height:1.45;color:var(--slate-500,#64748b);white-space:pre-wrap}
.ai-ru-lbl{color:var(--slate-400,#94a3b8)}
.ai-insert{margin-top:8px;min-height:38px;padding:8px 14px;border:0;border-radius:8px;background:var(--brand,#4f46e5);color:#fff;font-weight:600;font-size:13px;cursor:pointer}
.ai-insert:active{transform:scale(.99)}
.ai-refine{display:flex;gap:6px;margin-top:6px}
.ai-instr{flex:1;min-width:0;min-height:40px;padding:8px 10px;border:1px solid var(--slate-300,#cbd5e1);border-radius:8px;font-size:14px}
.ai-go{min-height:40px;padding:8px 14px;border:0;border-radius:8px;background:var(--ai,#6d28d9);color:#fff;font-weight:600;font-size:13px;white-space:nowrap;cursor:pointer}
.ai-go:active{transform:scale(.99)}
.ai-answer{background:#fff;border:1px solid var(--slate-200,#e2e8f0);border-radius:8px;padding:8px;margin-top:6px;font-size:14px;line-height:1.5;white-space:pre-wrap;color:var(--slate-900,#0f172a)}
.ai-busy{font-size:13px;color:var(--slate-500,#64748b);padding:6px}
.ai-err{font-size:13px;color:#dc2626;padding:6px}

/* ---- AI sheet: full-screen window on mobile ---- */
@media (max-width: 768px) {
  body.ai-modal-open { overflow: hidden; }
  .ai-panel { margin: 0; }
  .ai-panel.ai-show { position: fixed; inset: 0; z-index: 6000; display: flex; flex-direction: column; border: 0; border-radius: 0; box-shadow: none; }
  .ai-sheet-bar { position: sticky; top: 0; padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); }
  .ai-sheet-title { font-size: 16px; }
  .ai-sheet-x { width: 44px; height: 44px; min-width: 44px; font-size: 19px; }
  .ai-sheet-body { flex: 1; max-height: none; padding: 14px 16px calc(40px + env(safe-area-inset-bottom)); }
  .ai-opt { padding: 12px; }
  .ai-opt-en { font-size: 15px; }
  .ai-opt-ru { font-size: 14px; }
  .ai-insert { width: 100%; min-height: 46px; font-size: 15px; }
  .ai-instr { min-height: 44px; font-size: 15px; }
  .ai-go { min-height: 44px; font-size: 14px; }
}

/* ════════════════════ LEAD DETAIL — redesign (mockup, scoped .ld-modal) ════════════════════ */
.ld-modal { background:#F4F6FA; }
.ld-modal .modal-body { background:#F4F6FA; }
.ld-modal .chat-area { background:transparent; padding:6px 14px 0; min-height:40vh; }
.ld-header,.ld-actions,.ld-summary,.ld-tabs{ flex:none; }

/* header */
.ld-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:16px 18px 10px; }
.ld-h-main{ min-width:0; }
.ld-name{ font-size:22px; font-weight:800; letter-spacing:-.4px; line-height:1.1; color:var(--slate-900); }
.ld-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:7px; font-size:13.5px; color:var(--slate-500); }
.ld-phone{ color:var(--brand); font-weight:600; }
.ld-wa{ color:#25D366; }
.ld-dot{ color:var(--slate-300); }
.ld-leadid{ display:inline-flex; align-items:center; gap:5px; }
.ld-idb{ background:var(--ai); color:#fff; font-size:10px; font-weight:800; padding:2px 5px; border-radius:5px; letter-spacing:.3px; }
.ld-close{ font-size:20px; color:var(--slate-400); cursor:pointer; line-height:1; padding:4px; }
.ld-close:hover{ color:var(--slate-700); }

/* action bar (white card) */
.ld-actions{ display:flex; align-items:center; gap:10px; padding:10px 12px; margin:0 14px 12px; background:#fff; border:1px solid var(--slate-200); border-radius:15px; box-shadow:var(--card-shadow); overflow-x:auto; scrollbar-width:none; }
.ld-actions::-webkit-scrollbar{ display:none; }
.ld-status{ display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--slate-300); color:var(--slate-700); background:#fff; border-radius:11px; padding:8px 11px; font-weight:700; font-size:13.5px; white-space:nowrap; cursor:pointer; flex:none; }
.ld-st-dot{ font-size:9px; } .ld-st-cv{ font-size:10px; opacity:.6; }
.ld-act-btns{ display:flex; align-items:center; gap:2px; flex:1; justify-content:space-around; }
.ld-ab{ display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:0; cursor:pointer; font-size:10.5px; font-weight:600; color:var(--slate-600); padding:2px 3px; min-width:48px; white-space:nowrap; }
.ld-ab-ic{ display:grid; place-items:center; height:21px; font-size:17px; }
.ld-ab.msg,.ld-ab.est{ color:var(--brand); } .ld-ab.ai{ color:var(--ai); } .ld-ab.save{ color:var(--success); } .ld-ab.del{ color:var(--danger); }
.ld-status.new{ color:var(--danger); border-color:var(--danger-border); background:var(--danger-light); }
.ld-status.estimate{ color:var(--warning); border-color:#FED7AA; background:var(--warning-light); }
.ld-status.followup{ color:var(--info); border-color:#BAE6FD; background:var(--info-light); }
.ld-status.approved{ color:var(--success); border-color:#A7F3D0; background:var(--success-light); }
.ld-status.progress{ color:var(--ai); border-color:#DDD6FE; background:var(--ai-light); }
.ld-status.lost{ color:var(--slate-500); }

/* summary + status grid (white card) */
.ld-summary{ padding:14px; margin:0 14px 12px; background:#fff; border:1px solid var(--slate-200); border-radius:16px; box-shadow:var(--card-shadow); }
.ld-sum-top{ display:flex; gap:12px; }
.ld-sum-ic{ width:42px; height:42px; border-radius:11px; background:var(--brand-light); color:var(--brand); display:grid; place-items:center; flex:none; font-size:18px; }
.ld-sum-tt{ min-width:0; flex:1; }
.ld-sum-title{ font-size:15.5px; font-weight:800; letter-spacing:-.2px; line-height:1.25; color:var(--slate-900); }
.ld-sum-desc{ font-size:13px; color:var(--slate-500); line-height:1.4; margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ld-sum-stats{ display:grid; grid-template-columns:1fr 1fr; margin-top:13px; border:1px solid var(--slate-200); border-radius:12px; overflow:hidden; }
.ld-stat{ padding:11px 13px; }
.ld-sum-stats .ld-stat:nth-child(1){ border-right:1px solid var(--slate-200); border-bottom:1px solid var(--slate-200); }
.ld-sum-stats .ld-stat:nth-child(2){ border-bottom:1px solid var(--slate-200); }
.ld-sum-stats .ld-stat:nth-child(3){ border-right:1px solid var(--slate-200); }
.ld-stat-k{ font-size:12px; color:var(--slate-500); font-weight:600; display:flex; align-items:center; gap:5px; }
.ld-stat-v{ font-size:16px; font-weight:800; color:var(--slate-900); margin-top:4px; letter-spacing:-.2px; }
.ld-stat-v.sm{ font-size:13.5px; font-weight:700; color:var(--slate-700); }
.ld-badge{ display:inline-block; border:1px solid var(--slate-200); background:var(--slate-50); color:var(--slate-700); border-radius:7px; padding:2px 9px; font-size:12px; font-weight:700; }
.ld-badge.new{ border-color:var(--danger-border); background:var(--danger-light); color:var(--danger); }
.ld-badge.estimate{ border-color:#FED7AA; background:var(--warning-light); color:var(--warning); }
.ld-badge.sent{ border-color:var(--slate-200); background:var(--slate-100); color:var(--slate-600); }
.ld-badge.followup{ border-color:#BAE6FD; background:var(--info-light); color:var(--info); }
.ld-badge.approved{ border-color:#A7F3D0; background:var(--success-light); color:var(--success); }
.ld-badge.progress{ border-color:#DDD6FE; background:var(--ai-light); color:var(--ai); }
.ld-badge.lost{ border-color:var(--slate-200); background:var(--slate-100); color:var(--slate-500); }

/* tabs (segmented) */
.ld-tabs{ display:flex; gap:6px; background:var(--slate-100); border-radius:13px; padding:4px; margin:0 14px 12px; }
.ld-tab{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 6px; border-radius:10px; font-size:14px; font-weight:700; color:var(--slate-500); cursor:pointer; }
.ld-tab.active{ background:var(--brand); color:#fff; box-shadow:0 1px 4px rgba(var(--brand-rgb),.4); }
.ld-tab-ic{ display:grid; place-items:center; }

/* chat scoped */
.ld-modal .chat-empty{ text-align:center; color:var(--slate-400); padding:40px 0; }
.ld-modal .chat-day{ text-align:center; color:var(--slate-400); font-size:12.5px; margin:8px 0 14px; }
.ld-modal .msg{ display:flex; gap:9px; margin-bottom:15px; align-items:flex-start; }
.ld-modal .msg.out{ flex-direction:row-reverse; }
.ld-modal .msg-av{ width:38px; height:38px; border-radius:50%; background:var(--brand-light); color:var(--brand); display:grid; place-items:center; font-weight:800; font-size:12px; flex:none; }
.ld-modal .msg-col{ max-width:76%; display:flex; flex-direction:column; }
.ld-modal .msg.out .msg-col{ align-items:flex-end; }
.ld-modal .msg-sender{ font-size:12.5px; font-weight:700; color:var(--brand); margin-bottom:4px; }
.ld-modal .msg-bubble{ background:#fff; color:var(--slate-900); padding:11px 14px; border-radius:15px; border-top-left-radius:5px; font-size:14.5px; line-height:1.4; word-break:break-word; border:1px solid var(--slate-200); }
.ld-modal .msg.out .msg-bubble{ background:var(--brand); color:#fff; border:0; border-top-left-radius:15px; border-top-right-radius:5px; }
.ld-modal .msg-meta{ display:flex; align-items:center; gap:8px; margin-top:5px; }
.ld-modal .msg.out .msg-meta{ flex-direction:row-reverse; }
.ld-modal .msg-time{ font-size:11.5px; color:var(--slate-400); }
.ld-modal .msg-rd{ color:var(--brand); letter-spacing:-1px; }
.ld-modal .msg-fwd{ background:none; border:0; color:var(--slate-400); cursor:pointer; font-size:14px; padding:0 2px; }
.ld-modal .msg-media{ max-width:200px; border-radius:10px; display:block; }
.ld-modal .msg-media-cell{ width:160px; height:120px; border-radius:10px; background:var(--slate-100); display:grid; place-items:center; overflow:hidden; }
.ld-modal .msg-media-cell img,.ld-modal .msg-media-cell video{ width:100%; height:100%; object-fit:cover; }
.ld-modal .msg-cap{ font-size:13px; color:var(--slate-600); margin-top:5px; }

/* customer photos card */
.ld-modal .chat-photos:empty{ display:none; }
.ld-modal .chat-photos{ background:#fff; border:1px solid var(--slate-200); border-radius:14px; margin:8px 0 4px; box-shadow:var(--card-shadow); }
.ld-modal .chat-photos-t{ font-size:14.5px; font-weight:800; padding:12px 14px 0; color:var(--slate-900); }
.ld-modal .chat-photos-grid{ display:flex; gap:10px; padding:11px 14px 14px; flex-wrap:wrap; }
.ld-modal .chat-photo{ width:140px; height:118px; border-radius:11px; overflow:hidden; background:var(--slate-100); position:relative; cursor:pointer; }
.ld-modal .chat-photo img{ width:100%; height:100%; object-fit:cover; }
.ld-modal .chat-photo-fwd{ position:absolute; right:6px; bottom:6px; background:rgba(255,255,255,.92); border:0; border-radius:7px; padding:3px 7px; font-size:12px; cursor:pointer; }
.ld-modal .chat-photo-load,.ld-modal .chat-photo-err{ display:grid; place-items:center; height:100%; color:var(--slate-400); }

/* AI conversation summary */
.ld-modal .chat-sum:empty{ display:none; }
.ld-modal .chat-sum{ background:var(--ai-light); border:1px solid #DDD6FE; border-radius:12px; margin:8px 0 4px; overflow:hidden; }
.ld-modal .chat-sum-head{ display:flex; align-items:center; gap:7px; padding:10px 13px; font-size:13.5px; font-weight:700; color:var(--ai); cursor:pointer; }
.ld-modal .chat-sum-chev{ font-size:10px; transition:transform .15s; }
.ld-modal .chat-sum:not(.collapsed) .chat-sum-chev{ transform:rotate(90deg); }
.ld-modal .chat-sum-refresh{ margin-left:auto; color:var(--ai); }
.ld-modal .chat-sum-body{ padding:0 13px 12px; font-size:13px; line-height:1.45; color:var(--slate-700); }
.ld-modal .chat-sum.collapsed .chat-sum-body{ display:none; }

/* footer: quick replies + input */
.ld-modal .chat-footer{ padding:10px 12px calc(10px + env(safe-area-inset-bottom)); }
.ld-modal .chat-qr{ display:flex; gap:9px; overflow-x:auto; padding-bottom:10px; scrollbar-width:none; }
.ld-modal .chat-qr::-webkit-scrollbar{ display:none; }
.ld-modal .qr-chip{ flex:none; display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--slate-200); background:#fff; border-radius:20px; padding:9px 14px; font-size:13.5px; font-weight:700; color:var(--slate-600); cursor:pointer; white-space:nowrap; }
.ld-modal .qr-chip.b{ border-color:var(--brand-border); color:var(--brand); }
.ld-modal .qr-chip.g{ border-color:#A7F3D0; color:var(--success); }
.ld-modal .qr-chip.p{ border-color:#DDD6FE; color:var(--ai); }
.ld-modal .chat-input-bar{ display:flex; align-items:center; gap:9px; }
.ld-modal .chat-attach{ width:46px; height:46px; border:1.5px solid var(--slate-200); border-radius:13px; background:#fff; display:grid; place-items:center; font-size:18px; color:var(--slate-500); cursor:pointer; flex:none; }
.ld-modal .chat-input{ flex:1; border:1.5px solid var(--slate-200); border-radius:24px; padding:13px 18px; font-size:16px; color:var(--slate-900); outline:none; }
.ld-modal .chat-input:focus{ border-color:var(--brand); }
.ld-modal .chat-send-btn{ width:46px; height:46px; border-radius:50%; background:var(--brand); color:#fff; border:0; display:grid; place-items:center; font-size:18px; cursor:pointer; flex:none; }
.ld-modal .ai-panel:empty{ display:none; }

@media (max-width:768px){
  .ld-name{ font-size:21px; }
  .ld-summary{ padding:12px; }
  .ld-modal .chat-photo{ width:calc(50% - 5px); }
}

/* ─── v-n: compact info pills + tighten top so chat is visible (scoped for specificity) ─── */
.ld-modal .ld-name{ font-size:19px; }
.ld-modal .ld-header{ padding:13px 16px 8px; }
.ld-modal .ld-actions{ margin:0 14px 9px; padding:8px 10px; }
.ld-modal .ld-summary{ padding:12px; margin:0 14px 9px; }
.ld-modal .ld-sum-ic{ width:38px; height:38px; font-size:17px; }
.ld-modal .ld-sum-title{ font-size:15px; }
.ld-modal .ld-sum-desc{ font-size:12.5px; -webkit-line-clamp:2; }
.ld-modal .ld-tabs{ margin:0 14px 10px; padding:3px; }
.ld-modal .ld-tab{ padding:9px 6px; }
.ld-modal .ld-ab-ic{ font-size:16px; height:20px; }
.ld-modal .ld-ab{ font-size:10px; min-width:46px; }
.ld-modal .chat-area{ min-height:44vh; }

.ld-modal .ld-pills{ display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.ld-modal .ld-pill{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; padding:6px 11px; border-radius:20px; border:1px solid var(--slate-200); background:var(--slate-50); color:var(--slate-700); white-space:nowrap; }
.ld-modal .ld-pill.money{ border-color:#A7F3D0; background:var(--success-light); color:var(--success); }
.ld-modal .ld-pill.src{ background:#fff; color:var(--slate-600); }
.ld-modal .ld-pill.next{ background:#fff; color:var(--slate-600); }
.ld-modal .ld-pill.new{ border-color:var(--danger-border); background:var(--danger-light); color:var(--danger); }
.ld-modal .ld-pill.estimate{ border-color:#FED7AA; background:var(--warning-light); color:var(--warning); }
.ld-modal .ld-pill.sent{ border-color:var(--slate-200); background:var(--slate-100); color:var(--slate-600); }
.ld-modal .ld-pill.followup{ border-color:#BAE6FD; background:var(--info-light); color:var(--info); }
.ld-modal .ld-pill.approved{ border-color:#A7F3D0; background:var(--success-light); color:var(--success); }
.ld-modal .ld-pill.progress{ border-color:#DDD6FE; background:var(--ai-light); color:var(--ai); }
.ld-modal .ld-pill.lost{ border-color:var(--slate-200); background:var(--slate-100); color:var(--slate-500); }

/* ─── v-o: refined — spark input, underline tabs, softer status (pills already styled) ─── */
.ld-modal .chat-spark{ width:46px; height:46px; border-radius:50%; border:1.5px solid var(--brand-border); background:var(--brand-light); color:var(--brand); display:grid; place-items:center; font-size:19px; cursor:pointer; flex:none; }
.ld-modal .ld-status{ font-weight:600; border-width:1px; }
.ld-modal .ld-tabs{ background:transparent; border-radius:0; padding:0 14px; border-bottom:1px solid var(--slate-200); gap:0; margin:0 0 12px; }
.ld-modal .ld-tab{ flex:1; text-align:center; padding:12px 0; font-size:15px; font-weight:600; color:var(--slate-500); position:relative; border-radius:0; }
.ld-modal .ld-tab.active{ background:transparent; color:var(--brand); font-weight:800; box-shadow:none; }
.ld-modal .ld-tab.active::after{ content:""; position:absolute; left:18%; right:18%; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--brand); }

/* ─── v-o: clickable status dropdown in Lead Detail ─── */
.ld-modal .ld-actions{ overflow:visible; }
.ld-modal .ld-st-wrap{ position:relative; flex:none; }
.ld-modal .ld-pill[onclick]{ cursor:pointer; }
.ld-modal .ld-st-menu{ display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:40; background:#fff; border:1px solid var(--slate-200); border-radius:12px; box-shadow:0 12px 36px rgba(15,23,42,.18); padding:5px; min-width:200px; }
.ld-modal .ld-st-menu div{ padding:10px 12px; border-radius:8px; font-size:14.5px; font-weight:600; color:var(--slate-700); cursor:pointer; white-space:nowrap; }
.ld-modal .ld-st-menu div:active{ background:var(--slate-50); }
.ld-modal .ld-st-menu div.sel{ background:var(--brand-light); color:var(--brand); }

/* ===== AI Assistant bottom sheet (kнопка ✨) — добавлено 26.06.2026 ===== */
.ai-sheet-overlay{position:fixed;inset:0;z-index:1000;background:rgba(15,23,42,.45);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s ease}
.ai-sheet-overlay.open{opacity:1;pointer-events:auto}
.ai-sheet-overlay .ai-sheet{width:100%;max-width:520px;background:#fff;border-radius:20px 20px 0 0;padding:8px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(15,23,42,.18);transform:translateY(100%);transition:transform .26s cubic-bezier(.22,.61,.36,1);max-height:88vh;overflow:auto}
.ai-sheet-overlay.open .ai-sheet{transform:translateY(0)}
.ai-sheet-grab{width:40px;height:5px;border-radius:3px;background:var(--slate-200);margin:6px auto 12px}
.ai-sheet .ai-sheet-title{font-size:18px;font-weight:800;color:var(--slate-900);text-align:center;margin:0}
.ai-sheet-sub{font-size:13px;color:var(--slate-500);text-align:center;margin:3px 0 14px}
.ai-sheet-list{display:flex;flex-direction:column;gap:6px}
.ai-sheet-item{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:13px;background:var(--slate-50);cursor:pointer;min-height:56px;transition:background .12s ease,transform .08s ease}
.ai-sheet-item:active{background:var(--slate-100);transform:scale(.985)}
.ai-sheet-ic{width:42px;height:42px;min-width:42px;border-radius:11px;display:grid;place-items:center;font-size:20px;line-height:1}
.ai-sheet-ic.b{background:var(--info-light);color:var(--info)}
.ai-sheet-ic.y{background:var(--warning-light);color:var(--warning)}
.ai-sheet-ic.g{background:var(--success-light);color:var(--success)}
.ai-sheet-ic.p{background:var(--ai-light);color:var(--ai)}
.ai-sheet-tt-wrap{flex:1;min-width:0}
.ai-sheet-tt{font-size:15px;font-weight:700;color:var(--slate-900)}
.ai-sheet-ds{font-size:12.5px;color:var(--slate-500);margin-top:1px}

/* ============ Phase 1 — new Lead Detail Chat screen (26.06.2026) ============ */
.ld-modal .lh2{ display:flex; align-items:center; gap:11px; padding:11px 13px 7px; }
.lh2-bk{ width:40px; height:40px; min-width:40px; border:1px solid var(--slate-200); background:#fff; border-radius:11px; display:grid; place-items:center; font-size:23px; line-height:1; color:var(--slate-700); cursor:pointer; box-shadow:var(--card-shadow); padding:0 2px 3px; font-family:inherit; }
.lh2-bk:active{ background:var(--slate-100); transform:scale(.96); }
.lh2-m{ flex:1; min-width:0; }
.lh2-nm{ font-size:18px; font-weight:800; letter-spacing:-.3px; color:var(--slate-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lh2-cn{ display:flex; align-items:center; gap:6px; margin-top:2px; font-size:12.5px; color:var(--slate-500); font-weight:500; }
.lh2-cn .lh2-ph{ color:var(--brand); font-weight:700; }
.lh2-cn .lh2-wa{ color:var(--success); font-weight:700; }
.lh2-dot{ color:var(--slate-300); }
.lh2-act{ display:flex; gap:6px; }
.lh2-bg{ height:36px; min-width:40px; padding:0 9px; border-radius:10px; display:grid; place-items:center; font-size:11px; font-weight:800; letter-spacing:.5px; border:1px solid var(--slate-200); background:#fff; color:var(--slate-600); text-decoration:none; }
.lh2-bg.wa{ color:var(--success); border-color:var(--success-border); background:var(--success-light); }
.ld-modal .lh2-meta{ display:flex; align-items:center; gap:8px; padding:0 14px 9px; flex-wrap:wrap; }
.lh2-id{ font-size:12.5px; font-weight:700; color:var(--slate-600); }
.lh2-stw{ position:relative; }
.lh2-pill{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; padding:3px 11px; border-radius:20px; border:1px solid var(--slate-200); background:#fff; color:var(--slate-600); white-space:nowrap; }
.lh2-pill.st{ cursor:pointer; }
.lh2-cv{ font-size:9px; opacity:.6; }
.lh2-pill.pr{ color:var(--success); background:var(--success-light); border-color:var(--success-border); font-weight:800; }
.lh2-pill.st.new{ color:var(--danger); background:var(--danger-light); border-color:var(--danger-border); }
.lh2-pill.st.estimate,.lh2-pill.st.sent{ color:var(--warning); background:var(--warning-light); border-color:var(--warning-border); }
.lh2-pill.st.followup{ color:var(--info); background:var(--info-light); border-color:#BAE6FD; }
.lh2-pill.st.approved{ color:var(--success); background:var(--success-light); border-color:var(--success-border); }
.ld-hero{ background:#fff; border:1px solid var(--ai-border); border-radius:16px; box-shadow:var(--card-shadow); overflow:hidden; margin:0 0 11px; }
.ld-hero-top{ display:flex; align-items:center; gap:11px; padding:13px 14px 11px; background:linear-gradient(180deg,var(--ai-light),#fff); }
.ld-hero-ic{ width:44px; height:44px; min-width:44px; border-radius:12px; background:var(--ai); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:800; letter-spacing:.5px; }
.ld-hero-tt{ font-size:15.5px; font-weight:800; color:var(--slate-900); }
.ld-hero-sb{ font-size:12.5px; color:var(--slate-500); margin-top:2px; font-weight:500; }
.ld-hero-sb b{ color:var(--success); font-weight:700; }
.ld-hero-next{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border-top:1px dashed var(--slate-200); }
.ld-hero-nl{ font-size:10px; font-weight:800; letter-spacing:.7px; color:var(--ai); text-transform:uppercase; }
.ld-hero-rng{ font-size:12px; color:var(--slate-500); font-weight:500; }
.ld-hero-rng b{ font-size:18px; font-weight:800; color:var(--success); display:block; margin-top:1px; }
.ld-hero-btn{ background:var(--brand); color:#fff; border:0; border-radius:11px; padding:11px 16px; font-size:14px; font-weight:800; white-space:nowrap; box-shadow:var(--card-shadow); cursor:pointer; font-family:inherit; }
.ld-hero-btn:active{ background:var(--brand-hover); transform:scale(.97); }
.ld-qbar{ display:flex; gap:6px; margin:0 0 13px; }
.ld-qa{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 2px; background:#fff; border:1px solid var(--slate-200); border-radius:12px; box-shadow:var(--card-shadow); cursor:pointer; }
.ld-qa-ic{ width:30px; height:26px; display:grid; place-items:center; background:var(--slate-100); color:var(--slate-600); font-size:11px; font-weight:800; letter-spacing:.5px; border-radius:8px; }
.ld-qa-lb{ font-size:10.5px; font-weight:700; color:var(--slate-600); }
.ld-qa.on{ border-color:var(--brand-border); background:var(--brand-light); }
.ld-qa.on .ld-qa-ic{ background:#fff; color:var(--brand); } .ld-qa.on .ld-qa-lb{ color:var(--brand); }
.ld-modal .chat-spark{ font-size:12px; font-weight:800; letter-spacing:.5px; }
.ld-modal .chat-send-btn{ font-size:13px; font-weight:800; width:auto; min-width:48px; padding:0 16px; }
.ai-sheet-ic.r{ background:var(--danger-light); color:var(--danger); }
.ai-sheet-ic.g{ background:var(--success-light); color:var(--success); }

/* ════════════════════════════════════════════════════════════
   iOS v2 — Step C: Lead Detail structural restyle (additive).
   New nodes: Missing pill, «…» button, AI-sheet primary + pills.
   ════════════════════════════════════════════════════════════ */

/* ── Composer ✨ button (was "AI" text) ── */
.ld-modal .chat-spark{ font-size:20px; font-weight:800; letter-spacing:0; }

/* ── Compact header pills: Missing + «…» ── */
.lh2-pill.miss{
  color:var(--warning); background:var(--warning-light); border-color:var(--warning-border);
  font-weight:700; max-width:46%; overflow:hidden; text-overflow:ellipsis;
}
.lh2-more{
  margin-left:auto; width:34px; height:30px; min-width:34px; padding:0;
  border:1px solid var(--slate-200); background:#fff; color:var(--slate-600);
  border-radius:20px; font-size:18px; line-height:1; cursor:pointer; font-family:inherit;
  display:inline-grid; place-items:center;
}
.lh2-more:active{ background:var(--slate-100); transform:scale(.95); }

/* ── Hero "Estimate from photos" → brand (#5856D6) accent ── */
.ld-hero{ border-color:var(--brand-border); }
.ld-hero-top{ background:linear-gradient(180deg,var(--brand-light),#fff); }
.ld-hero-ic{ background:var(--brand); }
.ld-hero-nl{ color:var(--brand); }
.ld-hero-rng b{ color:var(--brand); font-size:20px; }
.ld-hero-btn{ border-radius:var(--r-md); }

/* ── Quick-action tiles (4-up) ── */
.ld-qbar-4 .ld-qa{ flex:1 1 0; }
.ld-qa{ border-radius:var(--r-md); transition:transform .12s ease, background .15s ease, border-color .15s ease; }
.ld-qa:active{ transform:scale(.96); }

/* ── AI bottom-sheet: primary "Estimate from photos" row ── */
.ai-sheet-primary{
  display:flex; align-items:center; gap:13px; padding:13px 14px; margin-bottom:12px;
  border-radius:var(--r-lg); cursor:pointer; color:#fff;
  background:linear-gradient(135deg,#6E6CE0,#5856D6);
  box-shadow:0 6px 16px -6px rgba(var(--brand-rgb),.6);
  transition:transform .12s ease, box-shadow .15s ease;
}
.ai-sheet-primary:active{ transform:scale(.985); }
.ai-sheet-pic{
  width:46px; height:46px; min-width:46px; border-radius:13px;
  display:grid; place-items:center; font-size:22px; line-height:1;
  background:rgba(255,255,255,.18);
}
.ai-sheet-pt{ flex:1; min-width:0; }
.ai-sheet-ptt{ font-size:16px; font-weight:800; letter-spacing:-.2px; }
.ai-sheet-pds{ font-size:12.5px; opacity:.9; margin-top:1px; }
.ai-sheet-pgo{ font-size:22px; font-weight:700; opacity:.8; }

/* ── AI bottom-sheet: pills row (Parse / Name price / Translate / Ask AI) ── */
.ai-sheet-pills{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--slate-200);
}
.ai-pill{
  flex:1 1 calc(50% - 8px); min-width:0;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:0 12px;
  border:1px solid var(--slate-200); background:var(--slate-50); color:var(--slate-700);
  border-radius:var(--r-md); font-size:13.5px; font-weight:700; font-family:inherit;
  white-space:nowrap; cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.ai-pill:active{ transform:scale(.96); background:var(--slate-100); }

/* ============================================================
   Prototype 1:1 — Stage 1: ov-head + client-head + command block
   Colors are the prototype's exact literals, scoped to .ld-modal
   so other screens are untouched. (source: prototype-ultra-compact.html)
   ============================================================ */
.ld-modal .ov-head{flex-shrink:0;background:#F5F6FA;padding:2px 8px 4px;min-height:40px;display:flex;align-items:center;gap:4px}
.ld-modal .iconbtn{width:36px;height:36px;border-radius:50%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ld-modal .iconbtn:active{background:#EAEBF0}

.ld-modal .client-head{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.ld-modal .client-head .avatar{flex-shrink:0;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:#fff;letter-spacing:.02em}
.ld-modal .ch-info{flex:1;min-width:0}
.ld-modal .ch-name{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.05;color:#0B1220}
.ld-modal .ch-phone{font-size:12.5px;color:#6B7280;line-height:1.25;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld-modal .ch-acts{display:flex;gap:6px}
.ld-modal .circbtn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;text-decoration:none;cursor:pointer}
.ld-modal .circbtn.call{background:#E6F1FF;color:#007AFF}
.ld-modal .circbtn.wa{background:#E4F4EC;color:#178A54}
.ld-modal .circbtn:active{transform:scale(.93)}

.ld-modal .lead-command{background:#FFFFFF;border:1px solid #E6E8EE;border-radius:18px;padding:12px;box-shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04)}
.ld-modal .lead-command.ultra{padding:10px 10px 9px;border-radius:16px;margin-bottom:8px}
.ld-modal .cmd-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.ld-modal .lead-command.ultra .cmd-top{align-items:center;margin-bottom:7px;gap:8px}
.ld-modal .cmd-main{min-width:0}
.ld-modal .cmd-title{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.15;color:#0B1220}
.ld-modal .lead-command.ultra .cmd-title{font-size:15px;line-height:1.1}
.ld-modal .cmd-sub{font-size:12.5px;color:#6B7280;line-height:1.25;margin-top:3px}
.ld-modal .lead-command.ultra .cmd-sub{font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.ld-modal .cmd-range{flex-shrink:0;background:#E4F4EC;color:#178A54;border:1px solid #C9EAD8;border-radius:999px;padding:7px 10px;font-size:14px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.ld-modal .lead-command.ultra .cmd-range{font-size:13px;padding:6px 8px}
.ld-modal .cmd-actions{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}
.ld-modal .lead-command.ultra .cmd-actions{gap:6px}
.ld-modal .cmd-actions::-webkit-scrollbar{display:none}
.ld-modal .cmd-btn{flex-shrink:0;border:1px solid #E6E8EE;background:#F5F6FA;color:#0B1220;border-radius:999px;height:34px;padding:0 12px;font-size:13px;font-weight:700;font-family:inherit;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.ld-modal .lead-command.ultra .cmd-btn{height:31px;padding:0 10px;font-size:12.5px;box-shadow:none}
.ld-modal .cmd-btn.primary{background:#5856D6;border-color:#5856D6;color:#fff;padding:0 12px}
.ld-modal .cmd-btn.green{background:#E4F4EC;border-color:#C9EAD8;color:#178A54}
.ld-modal .cmd-btn.amber{background:#FBF1E0;border-color:#F2D7AD;color:#B7791F}
.ld-modal .cmd-btn:active{transform:scale(.97)}

/* ============================================================
   Prototype 1:1 — Stage 2: smartcard + persistent composer
   (prototype literals, scoped to .ld-modal)
   ============================================================ */
.ld-modal .smartcard{background:#F3F3FE;border:1px solid #DEDDF8;border-radius:14px;padding:10px;margin:5px 0 8px}
.ld-modal .sc-lbl{font-size:11px;font-weight:700;color:#5856D6;text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px}
.ld-modal .sc-txt{font-size:13px;line-height:1.35;color:#0B1220}
.ld-modal .sc-acts{display:flex;gap:8px;margin-top:8px}
.ld-modal .btn-pri{flex:1;background:#5856D6;color:#fff;border:none;border-radius:14px;padding:8px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer}
.ld-modal .btn-pri:active{transform:scale(.98)}
.ld-modal .btn-sec{flex:1;background:#F5F6FA;color:#0B1220;border:1px solid #E6E8EE;border-radius:14px;padding:8px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer}
.ld-modal .btn-sec:active{transform:scale(.98)}

.ld-modal .ld-foot{flex-shrink:0}
.ld-modal .composer{background:rgba(245,246,250,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid #E6E8EE;padding:8px 12px;display:flex;gap:9px;align-items:center}
.ld-modal .ai-spark{width:44px;height:44px;border-radius:50%;background:#ECECFB;color:#5856D6;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
.ld-modal .ai-spark:active{transform:scale(.92)}
.ld-modal .ai-spark.loading{opacity:.5;pointer-events:none}
.ld-modal .composer input{flex:1;height:44px;border:1px solid #E6E8EE;border-radius:999px;padding:0 18px;font-size:16px;font-family:inherit;background:#fff;color:#0B1220}
.ld-modal .composer input:focus{outline:none;border-color:#5856D6}
.ld-modal .send-btn{width:44px;height:44px;border-radius:50%;background:#5856D6;color:#fff;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}
.ld-modal .send-btn:active{transform:scale(.93)}
.ld-modal .send-btn:disabled{background:#C7C7CC}
/* composer is now a flex footer — chat doesn't need the big bottom gap */
.ld-modal .chat-area{padding-bottom:14px}

/* ============================================================
   Prototype 1:1 — Stage 3: tabs (segmented) + timeline + details pills
   (prototype literals, scoped to .ld-modal)
   ============================================================ */
/* Tabs → segmented control (markup .ld-tabs/.ld-tab.active kept; switchTab untouched) */
.ld-modal .ld-tabs{display:flex;gap:4px;background:#EAEBF0;border:none;border-radius:11px;padding:3px;margin:0 0 10px}
.ld-modal .ld-tab{flex:1;text-align:center;padding:8px;font-size:14px;font-weight:600;color:#6B7280;background:transparent;border:none;border-radius:9px;cursor:pointer;white-space:nowrap}
.ld-modal .ld-tab.active{background:#FFFFFF;color:#0B1220;box-shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04)}

/* Timeline → prototype dot+line (markup .timeline-* kept) */
.ld-modal .timeline{position:relative;padding-left:24px;margin-top:2px}
.ld-modal .timeline-item{position:relative;padding:0 0 18px;display:block}
.ld-modal .timeline-icon{display:none}
.ld-modal .timeline-item::before{content:"";position:absolute;left:-17px;top:4px;width:10px;height:10px;border-radius:50%;background:#5856D6}
.ld-modal .timeline-item::after{content:"";position:absolute;left:-13px;top:14px;bottom:-2px;width:2px;background:#E6E8EE}
.ld-modal .timeline-item:last-child::after{display:none}
.ld-modal .timeline-content{min-width:0}
.ld-modal .timeline-title{font-size:14.5px;font-weight:600;color:#0B1220}
.ld-modal .timeline-desc{font-size:12.5px;color:#6B7280;margin-top:1px;line-height:1.35}
.ld-modal .timeline-time{font-size:12px;color:#9AA1AC;margin-top:1px}

/* Details → prototype "parsed" missing-pills card (form below kept intact) */
.ld-modal .parsed{background:#FFFFFF;border:1px solid #E6E8EE;border-radius:16px;padding:14px;box-shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);margin-bottom:12px}
.ld-modal .parsed .pl{font-size:12px;font-weight:700;color:#5856D6;text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.ld-modal .parsed .pl.miss{color:#D92D20}
.ld-modal .miss-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.ld-modal .pill{display:inline-flex;align-items:center;border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:600;white-space:nowrap}
.ld-modal .pill.p-miss{background:#FBE9E7;color:#D92D20}

/* ============================================================
   Prototype 1:1 — Stage 4: AI Assistant compact bottom sheet
   Sheet mounts on <body> with id="ai-sheet"; scope by #ai-sheet.
   Inner keeps class .ai-sheet (slide animation) + .compact-sheet.
   moreSheet() is untouched (uses .ai-sheet-* classes).
   ============================================================ */
#ai-sheet .compact-sheet{padding:6px 14px calc(12px + env(safe-area-inset-bottom));max-height:62vh;border-radius:20px 20px 0 0}
#ai-sheet .grab{width:34px;height:4px;border-radius:3px;background:#D6D9E0;margin:5px auto 10px}
#ai-sheet .sheet-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
#ai-sheet .compact-sheet h3{font-size:20px;font-weight:700;line-height:1;margin:0 0 3px;letter-spacing:-.01em;color:#0B1220}
#ai-sheet .sh-sub{font-size:12.5px;color:#6B7280;margin:0}
#ai-sheet .sheet-close{border:1px solid #E6E8EE;background:#F5F6FA;border-radius:999px;height:30px;padding:0 12px;font-family:inherit;font-size:12px;font-weight:700;color:#6B7280;cursor:pointer;flex-shrink:0}
#ai-sheet .ai-primary{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#5856D6,#7A78E6);color:#fff;border-radius:16px;padding:10px;margin-bottom:8px;box-shadow:0 4px 14px rgba(88,86,214,.22);cursor:pointer}
#ai-sheet .ai-primary .apic{width:36px;height:36px;min-width:36px;border-radius:11px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
#ai-sheet .ai-primary .apt{font-size:15px;font-weight:700;line-height:1.15}
#ai-sheet .ai-primary .aps{font-size:12px;opacity:.9;line-height:1.2;margin-top:1px}
#ai-sheet .compact-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:8px}
#ai-sheet .compact-actions .as{background:#F5F6FA;border:1px solid #E6E8EE;border-radius:13px;padding:9px 11px;min-height:38px;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer}
#ai-sheet .compact-actions .as:active{background:#EEF0F4}
#ai-sheet .compact-actions .ast{font-size:12.5px;font-weight:600;line-height:1.15;color:#0B1220}
#ai-sheet .ai-pills{display:flex;gap:6px;flex-wrap:wrap}
#ai-sheet .ai-pills .ap{background:#F5F6FA;border:1px solid #E6E8EE;border-radius:999px;padding:7px 11px;font-size:12.5px;font-weight:600;color:#0B1220;cursor:pointer}
#ai-sheet .ai-pills .ap:active{background:#EEF0F4}

/* ============================================================
   Prototype 1:1 — Stage 5: Estimate-from-photos overlay
   Keeps .aie-overlay (applyEstimate depends on it); inner .aie-sheet
   styled as the prototype #estimate-flow. Real AI data is mapped in.
   ============================================================ */
.aie-overlay{position:fixed;inset:0;z-index:1100;background:rgba(11,18,32,.4);display:flex;align-items:stretch;justify-content:center;padding:0}
.aie-sheet{width:100%;max-width:520px;background:#F5F6FA;display:flex;flex-direction:column;overflow:hidden;animation:aieIn .26s cubic-bezier(.32,.72,.3,1)}
@keyframes aieIn{from{transform:translateY(14px);opacity:.5}to{transform:none;opacity:1}}
.aie-sheet .ov-head{flex-shrink:0;background:#F5F6FA;padding:6px 10px 8px;display:flex;align-items:center;gap:8px}
.aie-sheet .ov-title{font-size:17px;font-weight:700;letter-spacing:-.01em;color:#0B1220}
.aie-sheet .iconbtn{width:38px;height:38px;border-radius:50%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}
.aie-sheet .ov-scroll{flex:1;overflow-y:auto;padding:0 16px 28px}
.aie-sheet .ec-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:13px;color:#6B7280}
.aie-sheet .confbadge{background:#FBF1E0;color:#B7791F;border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:600;flex-shrink:0;white-space:nowrap}
.aie-sheet .confbadge.hi{background:#E4F4EC;color:#178A54}
.aie-sheet .confbadge.lo{background:#FBE9E7;color:#D92D20}
.aie-sheet .photogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}
.aie-sheet .photogrid .ph{aspect-ratio:1;border-radius:12px;background:linear-gradient(135deg,#dfe3ea,#eef0f4);display:flex;align-items:center;justify-content:center;color:#9AA1AC;font-size:11px;border:1px solid #E6E8EE}
.aie-sheet .estimate-card{background:#fff;border:1px solid #E6E8EE;border-radius:18px;padding:16px;box-shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);margin-bottom:14px}
.aie-sheet .ec-sub{font-size:12.5px;color:#6B7280}
.aie-sheet .ec-range{font-size:30px;font-weight:700;letter-spacing:-.02em;margin:4px 0 10px;color:#0B1220}
.aie-sheet .scope-row{display:flex;gap:9px;align-items:flex-start;padding:8px 0;font-size:14px;color:#0B1220}
.aie-sheet .scope-row .ok{color:#178A54;font-weight:700;flex-shrink:0}
.aie-sheet .scope-row .warn{color:#D92D20;font-weight:700;flex-shrink:0}
.aie-sheet .ec-cardline{margin-top:10px;padding-top:10px;border-top:1px solid #EEF0F4;font-size:13px;color:#6B7280}
.aie-sheet .smartcard{background:#F3F3FE;border:1px solid #DEDDF8;border-radius:16px;padding:13px;margin-bottom:14px}
.aie-sheet .sc-lbl{font-size:12px;font-weight:700;color:#5856D6;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.aie-sheet .sc-txt{font-size:14px;line-height:1.45;color:#0B1220}
.aie-sheet .sc-acts{display:flex;gap:8px;margin-top:11px}
.aie-sheet .btn-pri{flex:1;background:#5856D6;color:#fff;border:none;border-radius:14px;padding:11px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer}
.aie-sheet .btn-sec{flex:1;background:#F5F6FA;color:#0B1220;border:1px solid #E6E8EE;border-radius:14px;padding:11px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer}
.aie-sheet .est-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.aie-sheet .est-actions .as{background:#fff;border:1px solid #E6E8EE;border-radius:14px;padding:13px;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer}
.aie-sheet .est-actions .as:active{background:#EEF0F4}
.aie-sheet .est-actions .ast{font-size:13.5px;font-weight:600;line-height:1.2;color:#0B1220}
.aie-sheet .aie-muted{color:#9AA1AC}

/* ============================================================
   Lead card v2: short summary in header + single Use reply.
   #chat-sum lives in .ch-info now; _loadSummary overwrites the
   element's className, so scope via the PARENT (.ch-info .chat-sum).
   ============================================================ */
.ld-modal .client-head{align-items:flex-start}
.ld-modal .ch-info .chat-sum{margin-top:4px;background:none;border:none;padding:0;box-shadow:none}
.ld-modal .ch-info .chat-sum .chat-sum-head{display:none}              /* hide "📋 Сводка переписки" label in header */
.ld-modal .ch-info .chat-sum .chat-sum-body{font-size:12.5px;line-height:1.3;color:#6B7280;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ld-modal .ch-info .chat-sum.collapsed .chat-sum-body{display:none}
.ld-modal .ch-info .chat-sum .chat-sum-load,.ld-modal .ch-info .chat-sum .chat-sum-err{font-size:12px;color:#9AA1AC}
/* estimate block footer: status pill + single Use reply */
.ld-modal .cmd-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.ld-modal .cmd-foot .cmd-btn.primary{flex-shrink:0;height:31px;padding:0 14px;font-size:12.5px}

/* ============================================================
   Lead card v3: ✨ header toggle for AI summary; tabs+Use reply
   row lifted above the Estimate card.
   ============================================================ */
.ld-modal .ch-info .chat-sum{display:none}                       /* hidden until ✨ tapped (toggle sets inline display) */
.ld-modal .ch-info .chat-sum .chat-sum-head{display:none}
.ld-modal .ch-info .chat-sum .chat-sum-body{background:#F5F3FF;border:1px solid #DDD6FE;border-radius:12px;padding:8px 11px;font-size:14px;line-height:1.45;color:#4C1D95;margin:0}
.ld-modal .ch-info .chat-sum:not(.expanded) .chat-sum-body{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ld-modal .ch-info .chat-sum.expanded .chat-sum-body{-webkit-line-clamp:unset;display:block;overflow:visible}
.ld-modal .ch-info .chat-sum-toggle{color:#5856D6;cursor:pointer;font-size:12px;font-weight:700;margin-top:4px;user-select:none}
/* ✨ AI button (purple), same circle size as Call/WA */
.ld-modal .circbtn.ai{background:#ECECFB;color:#5856D6}
.ld-modal .circbtn.ai.on{background:#5856D6}
.ld-modal .circbtn.ai.on svg path,.ld-modal .circbtn.ai.on svg circle{fill:#fff}
/* nav row: tabs + Use reply, horizontal scroll */
.ld-modal .ld-navrow{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;margin:0 0 8px}
.ld-modal .ld-navrow::-webkit-scrollbar{display:none}
.ld-modal .ld-navrow .ld-tabs{margin:0;flex-shrink:0}
.ld-modal .ld-usereply{flex-shrink:0;background:#5856D6;color:#fff;border:none;border-radius:999px;height:34px;padding:0 16px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap}
.ld-modal .ld-usereply:active{transform:scale(.97)}

/* ============================================================
   STANDARD MONITOR — Э1: Lead Detail 3-column workspace (PDF p3).
   Desktop-only blocks hidden by default (new classes → zero mobile impact).
   3-col grid STRICTLY inside @media (min-width:1366px). Mobile (<1366) untouched.
   ============================================================ */
.ld-desk-actions, .ld-desk-ai { display:none; }   /* new elements: invisible below 1366 */

@media (min-width:1366px){
  .ld-modal{
    width:1200px; max-width:1200px; max-height:88vh;
    display:grid;
    grid-template-columns:320px minmax(0,1fr) 340px;
    grid-template-rows:auto auto auto 1fr auto;
    grid-template-areas:
      "head    head   head"
      "client  navrow ai"
      "command body   ai"
      "actions body   ai"
      "actions foot   ai";
    column-gap:18px; row-gap:12px; padding:10px 20px 18px;
  }
  .ld-modal .ov-head{grid-area:head}
  .ld-modal .client-head{grid-area:client; margin:0}
  .ld-modal .ld-navrow{grid-area:navrow; margin:0}
  .ld-modal .lead-command{grid-area:command; margin:0}
  .ld-modal .ld-desk-actions{grid-area:actions; display:block; align-self:start}
  .ld-modal .modal-body{grid-area:body; min-height:0; display:flex; flex-direction:column; overflow:hidden}
  .ld-modal .tab-content.active{flex:1; min-height:0; overflow:auto}
  .ld-modal .ld-foot{grid-area:foot}
  .ld-modal .ld-desk-ai{grid-area:ai; display:flex; flex-direction:column; gap:10px; align-self:start; background:#fff; border:1px solid #E6E8EE; border-radius:18px; padding:16px}

  /* left action row */
  .ld-modal .ld-da-label{font-size:13px; font-weight:700; color:#6B7280; margin-bottom:8px}
  .ld-modal .ld-da-pills{display:flex; flex-wrap:wrap; gap:7px}
  .ld-modal .ld-da-pills .cmd-btn{flex:0 0 auto}

  /* right AI panel */
  .ld-modal .ld-ai-h{font-size:18px; font-weight:800; letter-spacing:-.01em; color:#0B1220}
  .ld-modal .ld-ai-sub{font-size:12.5px; color:#6B7280; line-height:1.35}
  .ld-modal .ld-ai-primary{background:linear-gradient(135deg,#5856D6,#7A78E6); color:#fff; border-radius:14px; padding:14px; cursor:pointer}
  .ld-modal .ld-ai-pt{font-size:17px; font-weight:800; letter-spacing:-.01em}
  .ld-modal .ld-ai-ps{font-size:12.5px; opacity:.9; margin-top:2px}
  .ld-modal .ld-ai-pills{display:flex; flex-wrap:wrap; gap:7px; margin-top:2px}
  .ld-modal .ld-ai-pills .cmd-btn{flex:0 0 auto}
}
@media (min-width:1536px){ .ld-modal{width:1320px; max-width:1320px; grid-template-columns:340px minmax(0,1fr) 360px} }
@media (min-width:1920px){ .ld-modal{width:1440px; max-width:1440px} }

/* ============================================================
   STANDARD MONITOR — Э2: AI Assistant becomes a RIGHT SIDE PANEL on
   monitors (PDF p11) — not a full-screen bottom sheet; lead stays visible.
   CSS-only, STRICTLY @media (min-width:1366px). Mobile bottom-sheet untouched.
   ============================================================ */
@media (min-width:1366px){
  /* lighter backdrop so the workspace behind stays readable */
  .ai-sheet-overlay{align-items:stretch; justify-content:flex-end; background:rgba(15,23,42,.12)}
  /* dock the sheet to the right as a compact panel, slide in from the right */
  .ai-sheet-overlay .ai-sheet{
    width:380px; max-width:380px; height:100vh; max-height:100vh;
    margin:0; align-self:stretch;
    border-radius:18px 0 0 18px;
    box-shadow:-10px 0 30px rgba(15,23,42,.18);
    transform:translateX(100%);
    transition:transform .26s cubic-bezier(.22,.61,.36,1);
    overflow:auto;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  }
  .ai-sheet-overlay.open .ai-sheet{transform:translateX(0)}
  /* grab handle is a bottom-sheet affordance — hide on the side panel */
  .ai-sheet .grab, .ai-sheet .ai-sheet-grab{display:none}
}

.detail-save-bar{ margin-top:18px; padding-top:16px; border-top:1px solid #E5E8F0; }
.detail-save-row{ display:flex; gap:10px; }
.ed-save-btn{ flex:1; height:48px; border:0; border-radius:13px; background:#178A54; color:#fff; font-size:15px; font-weight:800; }
.ed-save-btn:active{ background:#147147; }
.ed-del-btn{ height:48px; padding:0 18px; border:1px solid #F0C9C6; border-radius:13px; background:#FBE9E8; color:#D92D20; font-size:14px; font-weight:700; }
.detail-save-msg{ font-size:13px; font-weight:600; margin-bottom:10px; }
.detail-save-msg.ok{ color:#178A54; }
.detail-save-msg.err{ color:#D92D20; }
.detail-save-hint{ font-size:12px; color:#8A93A3; margin-top:9px; text-align:center; }
.ai-more-hidden{ display:none; }
.ai-more-toggle{ width:100%; height:42px; margin:6px 0; border:1px dashed #C9C8F2; border-radius:12px; background:#F2F2FD; color:#5856D6; font-size:14px; font-weight:700; }
.ai-more-toggle.open{ background:#fff; color:#8A93A3; border-style:solid; border-color:#E5E8F0; }

/* ===== Lost-reason quick-pick (mandatory when marking Lost) ===== */
.lostreason-overlay{position:fixed;inset:0;z-index:1000;background:rgba(15,23,42,.5);display:flex;align-items:flex-end;justify-content:center}
.lostreason-card{background:#fff;width:100%;max-width:460px;border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(15,23,42,.25)}
.lostreason-h{font-size:15px;font-weight:800;color:var(--slate-900);margin-bottom:12px}
.lostreason-list{display:flex;flex-direction:column;gap:8px}
.lostreason-b{display:block;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--slate-200);border-radius:12px;background:#F8FAFC;color:var(--slate-900);font-size:15px;font-weight:600;font-family:inherit;cursor:pointer}
.lostreason-b:active{transform:scale(.98)}
.lostreason-b:hover{border-color:var(--brand);background:#fff}
.lostreason-other{color:var(--brand);font-weight:700}
.lostreason-cancel{margin-top:12px;width:100%;padding:13px;border:none;border-radius:12px;background:#F1F5F9;color:var(--slate-700);font-size:15px;font-weight:700;font-family:inherit;cursor:pointer}
@media (min-width:640px){.lostreason-overlay{align-items:center}.lostreason-card{border-radius:16px}}

/* ── AI loading state (improved) ────────────────────────── */
.ai-busy-full{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px 20px;min-height:160px}
.ai-busy-spin{width:44px;height:44px;border:3px solid var(--slate-100,#f1f5f9);border-top-color:var(--brand,#5856D6);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
.ai-busy-lbl{font-size:14px;font-weight:600;color:var(--slate-700,#334155);text-align:center}
.ai-busy-secs{font-size:12px;color:var(--slate-400,#94a3b8);min-height:18px}
.ai-busy-cancel{margin-top:4px;background:none;border:1px solid var(--slate-200,#e2e8f0);color:var(--slate-500,#64748b);font-size:13px;padding:6px 18px;border-radius:20px;cursor:pointer;transition:background .12s}
.ai-busy-cancel:active{background:var(--slate-50,#f8fafc)}
.ai-spark.loading svg{animation:spin .7s linear infinite;opacity:.7}

/* ── AI Sheet unified (2026-07) ─────────────────────────────── */
.ai-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.ai-sheet-close{border:1px solid var(--slate-200,#e2e8f0);background:var(--slate-50,#f8fafc);border-radius:999px;width:32px;height:32px;display:grid;place-items:center;font-size:16px;color:var(--slate-500);cursor:pointer;flex-shrink:0;line-height:1;padding:0}
.ai-sheet-close:active{background:var(--slate-100);transform:scale(.92)}
.ai-sheet-item.danger .ai-sheet-tt{color:var(--danger,#dc2626)}
/* Draft preview */
#ai-draft-wrap{padding:4px 0}
.ai-draft-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-400);margin-bottom:6px}
.ai-draft-text{font-size:14px;line-height:1.55;color:var(--slate-800);background:var(--slate-50);border:1px solid var(--slate-200);border-radius:12px;padding:12px;min-height:80px;max-height:200px;overflow-y:auto;outline:none;white-space:pre-wrap}
.ai-draft-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ai-draft-btn{border:1px solid var(--slate-200);background:#fff;border-radius:20px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--slate-700);cursor:pointer;transition:background .12s}
.ai-draft-btn:active{transform:scale(.96)}
.ai-draft-btn.primary{background:var(--primary,#5856D6);border-color:var(--primary,#5856D6);color:#fff}
.ai-draft-btn.ghost{color:var(--slate-400)}
/* Desktop popover override (>= 640px) */
@media(min-width:640px){
  .ai-sheet-overlay{align-items:flex-end;justify-content:flex-start;background:rgba(15,23,42,.05)}
  .ai-sheet-overlay .ai-sheet{border-radius:16px;margin:0 0 80px 16px;max-width:360px;max-height:80vh}
}

/* ── AI sheet safety additions (2026-07) ─────────────────────────────────── */
/* Mobile: content-height, not full screen */
.ai-sheet-overlay .ai-sheet { max-height: 70vh; }
/* Internal-only draft state */
.ai-draft-internal #ai-draft-label { color: var(--warning, #d97706); font-weight: 700; }
.ai-draft-internal .ai-draft-text { background: #fffbeb; border-color: #fcd34d; color: var(--slate-700); }
/* Error message after failed insert */
.ai-draft-err { font-size: 12.5px; color: var(--danger, #dc2626); margin-top: 8px; padding: 8px 12px; background: #fef2f2; border-radius: 8px; }
/* Desktop popover: anchored compact, not full panel */
@media(min-width:640px){
  .ai-sheet-overlay { align-items: flex-end; justify-content: flex-start; background: rgba(15,23,42,.08); }
  .ai-sheet-overlay .ai-sheet { border-radius: 16px; margin: 0 0 72px 12px; max-width: 400px; max-height: 72vh; }
}