/* ==========================================================================
   Relay — stylesheet
   Organized top to bottom as: tokens → base → components → page sections →
   app shell (sidebar/topbar/content/mobile tab bar) → responsive breakpoints.
   There is ONE media query per breakpoint (1100 / 1050 / 900 / 640 / 520px).
   Keep it that way — do not bolt a new "@media(max-width:900px){...}" onto
   the end of the file for a future patch; add rules to the existing 900px
   block instead. Repeated, scattered, !important-laden breakpoints for the
   same width is exactly what made this file hard to reason about before.
   ========================================================================== */

/* Relay fix: mobile-only redesign (see the 900px block) — Cormorant Garamond for
   headings, Lora for body, matching the approved mobile mockup. Desktop keeps
   Inter/system-ui untouched; @import is safe here since only the mobile
   breakpoint's font-family rules ever reference these families. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Lora:wght@400;600&display=swap');

:root{
  --navy:#0B2140;--navy2:#050F1F;--blue:#2554EB;--blue2:#38BDF8;--green:#16A34A;--orange:#F59E0B;--red:#DC2626;
  --bg:#FAFBFC;--card:#FFFFFF;--border:#E4E7EC;--text:#0B1220;--muted:#5B6472;--soft:#EFF4FF;
  --shadow:0 1px 2px rgba(15,23,42,.06);--radius:12px;--radius-sm:8px;

  /* App shell sizing — change once here instead of hunting through breakpoints. */
  --sidebar-w:270px;
  --topbar-h-desktop:74px;
  --topbar-h-mobile:56px;
  --tabbar-h:64px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

/* ---------- Base / reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{width:100%;max-width:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}
h1,h2,h3,p{overflow-wrap:anywhere}
h1{font-size:clamp(32px,4vw,62px);line-height:1.05;margin:0 0 14px;font-weight:900;letter-spacing:-.04em}
h2{font-size:clamp(24px,2.4vw,38px);line-height:1.15;margin:0 0 12px;letter-spacing:-.03em}
h3{font-size:20px;margin:0 0 8px}
p{line-height:1.65}
.muted{color:var(--muted);font-size:12px}
small{font-size:12px}
.small-note{font-size:13px;line-height:1.55}
.help-text{font-size:13px;color:var(--muted);margin:8px 0 0}

/* ---------- Buttons / forms / tags ---------- */
.btn{border:0;border-radius:8px;padding:11px 16px;background:var(--blue);color:#fff;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;white-space:nowrap;font-size:14px;transition:background-color .12s ease,border-color .12s ease}
.btn:hover{background:#1e46d1}
.btn.secondary{background:#fff;color:var(--text);border:1px solid var(--border)}
.btn.secondary:hover{border-color:#c7ccd4;background:#fafbfc}
.btn.danger,.btn.logout-danger,.logout-danger{background:var(--red)!important;color:#fff!important}
.btn.green{background:var(--green)}
.btn.dark{background:var(--navy)}
.btn.small{padding:6px 11px;font-size:13px;border-radius:6px;min-height:auto}

input,select,textarea{width:100%;border:1px solid var(--border);border-radius:8px;padding:11px 13px;font-size:14px;background:#fff;outline:none;font-family:inherit;color:var(--text)}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,84,235,.12)}
input[type="radio"],input[type="checkbox"]{width:18px;height:18px;min-width:18px;flex:0 0 auto;padding:0;margin:0 10px 0 0;box-shadow:none}
textarea{resize:vertical;min-height:96px}
label{font-weight:700;font-size:13px;margin-bottom:7px;display:block}
.field{margin:14px 0}

.tag{font-size:12px;border-radius:100px;padding:4px 10px;font-weight:600;display:inline-flex;align-items:center;width:auto;max-width:max-content;white-space:nowrap}
.tag.hot{background:#fdeeec;color:#b5311e}
.tag.warm{background:#fdf3e2;color:#8a5c09}
.tag.cold{background:#eef0f2;color:#4a5568}
.tag.green{background:#e9f7ee;color:#157a3d}
.tag.red{background:#fdeeec;color:#a3241a}
.tag.blue{background:#eaf0fe;color:#2554eb}

.flash{padding:11px 16px;border-radius:8px;background:#e9f7ee;color:#157a3d;margin-bottom:18px;font-weight:600;border:1px solid rgba(21,122,61,.16)}
.flash.error{background:#fdeeec;color:#a3241a;border-color:rgba(163,36,26,.16)}

.status-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:100px;padding:6px 11px;font-weight:600;font-size:12px;white-space:nowrap}
.status-badge.success{background:#e9f7ee;color:#157a3d}
.ok-text{color:var(--green)}
.warn-text{color:var(--orange)}

/* ---------- Cards / grids ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(16px,2vw,24px);box-shadow:var(--shadow)}
.metric{font-size:clamp(26px,3.4vw,36px);font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.metric-card{background:var(--card)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.command-grid{margin-bottom:18px}
.onboarding-steps{margin-top:14px}
.onboarding-step{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;padding:16px;opacity:0;animation:relayOnboardStepIn .4s ease forwards}
.onboarding-step:hover{border-color:var(--blue2)}
.onboarding-step-check{width:26px;height:26px;border-radius:100px;background:var(--soft);color:var(--blue);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.onboarding-step.done{background:#f0fdf4;border-color:#bbf7d0}
.onboarding-step.done .onboarding-step-check{background:var(--green);color:#fff}
@keyframes relayOnboardStepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.onboarding-step{animation:none;opacity:1}}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* Relay fix: an .actions row with a plain <a class="btn"> next to a <form><button
   class="btn"></form> (e.g. integrations.php's Reconnect/Disconnect pair) mixed a sized
   flex item with an unstyled block-level form — the form couldn't shrink below its
   button's natural width, so on narrow phones the row overflowed the viewport instead of
   wrapping. Make the form itself a proper flex sibling. */
.actions form{display:flex;flex:1;min-width:0}
.actions form .btn{width:100%}
.v13-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:20px}
.v13-form{display:grid;gap:14px}
.v13-toggle{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1px solid var(--border);border-radius:14px;background:#fff}
.v13-toggle input{width:auto;margin-top:3px}
.v13-toggle span{display:flex;flex-direction:column;gap:3px;line-height:1.35}
.v13-toggle small{color:var(--muted);font-weight:700}
.v13-option{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;padding:16px;border:1px solid var(--border);border-radius:16px;margin-bottom:12px;background:#fff}
.v13-option input{width:auto;grid-row:1/3;margin-top:4px}
.v13-option span{color:var(--muted);font-size:14px}
.v13-panel{margin-top:18px}
.compact-card{padding:14px}
.compact-toggle{padding:12px}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
/* Relay fix: app screens were reusing marketing-hero-scale type (clamp 30-48px, weight 900)
   for every page title. That reads as a landing page, not an app. Scoped here — deliberately
   NOT touching the base h1 rule, which the public homepage's actual hero still needs. */
.page-head h1{font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:0 0 4px}
.page-head p{margin:0;color:var(--muted);font-size:13px}
.page-head.compact{margin-bottom:10px}
.page-head.compact h2,.section-title-row h2{font-size:16px;font-weight:600;margin:0}
.section-title-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:18px}
.empty-state{text-align:center;padding:28px}
.empty-state .actions{justify-content:center;margin-top:14px}
.health-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.health-grid div{background:#f8fafc;border:1px solid var(--border);border-radius:14px;padding:12px;min-width:0}
.health-grid small{display:block;color:var(--muted);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.health-grid strong{font-size:13px;overflow-wrap:anywhere}
.readiness-row{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:14px;padding:13px 14px;margin:10px 0;background:#f8fafc}
.attention-card{border-color:rgba(220,38,38,.18);background:linear-gradient(180deg,#fff,#fffafa)}

.settings-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.settings-links{display:grid;gap:10px}
.settings-links a{display:flex;flex-direction:column;gap:4px;padding:14px 15px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff}
.settings-links a:hover{border-color:var(--blue);background:var(--soft)}
.settings-links span{font-size:13px;color:var(--muted)}
.settings-links a[href*="logout"]{border-color:rgba(220,38,38,.28)}
.settings-links a[href*="logout"] strong{color:#dc2626}
.settings-group-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:18px 0 8px}
.settings-group-label:first-child{margin-top:0}

.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-sm);border:1px solid var(--border);background:#fff}
.table-wrap table{border:0;border-radius:0}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border)}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
th{background:#fff;color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;border-bottom:1px solid var(--border)}
td{min-width:110px}
.codebox{background:#071B33;color:#dbeafe;border-radius:16px;padding:16px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;white-space:pre-wrap;word-break:break-word}
.card details{margin-top:12px}
.card summary{cursor:pointer;font-weight:700;color:var(--navy)}


.message-list,.activity-timeline{
      max-height: 300px;
    overflow-y: auto;
}

/* Legacy kanban board primitives — kept lightweight in case an older view still renders them. */
.kanban{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px}
.kanban .col{background:#f1f5f9;border-radius:16px;padding:12px;min-height:350px;min-width:280px}
.kanban .lead-card{background:#fff;border-radius:14px;padding:14px;margin-bottom:12px;border:1px solid var(--border)}

/* ---------- Integrations ---------- */
.integration-list{display:grid;gap:16px}
.integration-simple{display:flex;gap:18px;align-items:center;justify-content:space-between}
.integration-card{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
.integration-copy{flex:1;min-width:0}
.integration-copy h2,.integration-copy p{overflow-wrap:anywhere}
.integration-logo{width:44px;height:44px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;color:#fff;background:var(--navy);flex:0 0 auto}
.integration-logo.meta{background:#1877F2}
.integration-logo.web{background:var(--navy)}
.integration-logo.google{background:#fff;color:var(--blue);border:1px solid var(--border)}
.integration-logo.whatsapp{background:#16A34A}
.list-cards{display:grid;gap:12px}

/* ---------- Automation page ---------- */
.automation-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);gap:18px;align-items:start}
.automation-side-card{position:sticky;top:100px}
.automation-status-grid{margin-bottom:22px}
.save-sticky{grid-column:1/-1;position:sticky;bottom:10px;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:var(--radius);padding:12px;box-shadow:0 4px 16px rgba(15,23,42,.08)}
.save-sticky .btn{width:100%;height:50px;font-size:16px}

/* ---------- Leads (list + filters + bulk actions) ---------- */
.lead-tools-card{margin-bottom:14px}
.filter-toggle-mobile{display:none;border:1px solid var(--border);background:#fff;color:var(--navy);border-radius:14px;min-height:44px;font-weight:900;width:100%}
.lead-filter-grid{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:10px;align-items:end}
.lead-filter-more{display:none;margin-top:10px}
.lead-filter-more.open{display:grid}
.lead-form-more{display:none}
.lead-form-more.open{display:grid}
.bulk-actions-card{display:none;margin:14px 0;padding:14px;position:sticky;top:94px;z-index:25;border-color:rgba(37,99,235,.22)}
.lead-selection-mode .bulk-actions-card{display:block}
.bulk-actions-card:before{content:attr(data-selected-count);display:inline-flex;margin:0 0 10px;padding:6px 10px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:12px;font-weight:900}
.bulk-actions-row{display:grid;grid-template-columns:auto repeat(6,minmax(120px,1fr)) auto;gap:10px;align-items:center}
.select-all-label{display:flex;align-items:center;margin:0;white-space:nowrap;font-size:13px}
.selection-close{width:auto}
.lead-select{display:none}
.lead-selection-mode .lead-select{display:block}

.lead-list{display:grid;gap:10px}
.lead-row-card{border-radius:var(--radius-sm);display:grid;grid-template-columns:1.35fr auto auto auto;gap:14px;align-items:center;padding:15px;border:1px solid var(--border);background:#fff}
.lead-row-card.urgent-row{border-color:rgba(220,38,38,.3);background:#fffafa}
.lead-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.lead-main strong{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.lead-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.lead-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.lead-owner-line{font-size:13px;display:flex;gap:6px;flex-wrap:wrap}
.dashboard-lead-clickable,.lead-card-premium{cursor:pointer;transition:border-color .12s ease,background-color .12s ease}
.dashboard-lead-clickable:hover,.lead-card-premium:hover{border-color:var(--blue);background:var(--soft)}
.selectable-lead-card{cursor:pointer}
.selectable-lead-card:has(.lead-select:checked){border-color:#2563eb;background:#eff6ff}

.lead-card-shell{position:relative;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;border-radius:var(--radius-sm);overflow:visible}
.lead-card-shell .lead-select{width:18px;height:18px;margin-top:6px}
.lead-card-clickable-area{display:grid;gap:8px;color:inherit;min-width:0;padding-right:92px}
.lead-tags-row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:7px;max-width:100%}
.lead-tags-row .tag{max-width:100%}
.lead-score-badge{position:absolute;top:12px;right:12px;min-width:64px;height:28px;padding:0 10px;border-radius:100px;background:var(--soft);color:var(--blue);border:1px solid #d7e2fc;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;line-height:1}
.score-total{font-size:13px;color:var(--muted);margin-left:2px;font-weight:600}
.response-tag{min-width:0}
/* Relay fix: min-width beats max-width when they conflict, so min-width:max-content
   was silently cancelling the max-width:30% cap above it — a long/custom pipeline
   stage name (VARCHAR(120)) couldn't shrink and would overflow the lead card on a
   phone. .response-tag right above already got this fix; this one was missed. */
.stage-tag{max-width:100%;min-width:0}

/* Swipe-to-advance (mobile only — see the 900px block below for the actual gesture
   styling). Structural-only here so desktop layout/behavior is untouched: .swipe-drag-
   surface stays out of the box tree entirely via display:contents, and the reveal panel
   stays hidden, until the 900px breakpoint turns the gesture on. */
.swipe-drag-surface{display:contents}
.swipe-reveal-action{display:none}
.lead-quick-actions-btn{display:none}

/* ---------- Contact / activity timeline ---------- */
.activity-item{padding:12px 0;border-bottom:1px solid var(--border)}
.activity-item:last-child{border-bottom:0}
.activity-details{display:grid;gap:6px;margin-top:8px;padding:12px;background:#f8fafc;border:1px solid var(--border);border-radius:14px}
.activity-detail-row{display:grid;grid-template-columns:150px 1fr;gap:10px;font-size:14px;line-height:1.45}
.activity-detail-row strong{color:var(--navy)}

/* ---------- Notifications ---------- */
.notification-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--border)}
.notification-row:last-child{border-bottom:0}
.notification-row.unread{background:#f8fbff;margin:0 -20px;padding:14px 20px;border-radius:14px}
.notification-row-clickable{cursor:pointer;transition:background-color .12s ease}
.notification-row-clickable:hover{background:var(--soft)}

/* ---------- Profile ---------- */
.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.profile-card{text-align:center}
.profile-avatar-wrap{position:relative;display:inline-block}
.profile-logo{width:92px;height:92px;border-radius:28px;object-fit:cover;margin-bottom:14px}
.profile-edit-toggle{position:absolute;right:-8px;bottom:6px;width:34px;height:34px;border-radius:100px;border:3px solid #fff;background:var(--blue);color:#fff;font-weight:600;cursor:pointer}
.profile-edit-card{grid-column:span 2}
.profile-edit-card .section-title-row{align-items:center}
.profile-edit-card .section-title-row h2{margin:0}

/* ---------- App footer / toast ---------- */
.app-footer{padding:18px 0 4px;text-align:center;color:var(--muted)}
.app-footer small{font-size:12px}
.relay-toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 16px);transform:translateX(-50%);z-index:10000;background:var(--navy);color:#fff;padding:10px 14px;border-radius:100px;font-size:13px;font-weight:600;box-shadow:0 4px 16px rgba(15,23,42,.2)}

/* ==========================================================================
   Public marketing page (index.php)
   ========================================================================== */
.public-body{background:#fff;color:var(--text)}
.landing-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(226,232,240,.75)}
.landing-inner{width:min(1180px,calc(100% - 32px));margin:auto;display:flex;align-items:center;justify-content:space-between;height:78px;gap:16px}
.logo-img{width:48px;height:48px;border-radius:14px;object-fit:cover;box-shadow:0 10px 28px rgba(16,42,67,.22);flex:none}
.brand-word{display:flex;align-items:center;gap:12px;font-weight:900}
.brand-word small{display:block;font-weight:700;color:var(--muted);font-size:12px;margin-top:2px}
.landing-links{display:flex;align-items:center;gap:24px;color:#334155;font-weight:700}
.landing-actions{display:flex;gap:10px;align-items:center}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 25% 0%,rgba(56,189,248,.22),transparent 36%),linear-gradient(180deg,#fff 0%,#f8fbff 100%)}
.hero-wrap{width:min(1180px,calc(100% - 32px));margin:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:92px 0 80px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;padding:8px 12px;border-radius:100px;font-weight:900;font-size:13px;margin-bottom:18px}
.hero p{font-size:clamp(17px,1.5vw,21px);color:#475569;margin:0 0 28px;max-width:680px}
.hero-card{background:linear-gradient(145deg,#071B33,#102A43);border-radius:30px;padding:22px;box-shadow:0 30px 90px rgba(16,42,67,.28);color:#fff;position:relative;overflow:hidden}
.hero-card:after{content:"";position:absolute;inset:auto -70px -70px auto;width:210px;height:210px;background:rgba(56,189,248,.28);filter:blur(30px);border-radius:50%}
.app-preview{background:#fff;color:var(--text);border-radius:22px;overflow:hidden;position:relative;z-index:2}
.preview-head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border)}
.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}
.preview-metric{background:#f8fafc;border:1px solid var(--border);border-radius:16px;padding:14px}
.preview-metric strong{font-size:26px}
.preview-list{padding:0 16px 16px}
.preview-row{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:14px;padding:12px;margin-top:10px;background:#fff}
.section{padding:80px 0}
.container{width:min(1180px,calc(100% - 32px));margin:auto}
.section-head{text-align:center;max-width:760px;margin:0 auto 36px}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.feature-card{background:#fff;border:1px solid var(--border);border-radius:22px;padding:24px;box-shadow:0 12px 30px rgba(15,23,42,.04)}
.feature-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#dbeafe,#e0f2fe);color:var(--blue);font-size:22px;margin-bottom:14px}
.dark-section{background:linear-gradient(135deg,#071B33,#102A43);color:#fff}
.dark-section .muted{color:#b6c8dc}
.dark-section .feature-card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
.pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.price-card{border:1px solid var(--border);border-radius:24px;padding:26px;background:#fff;box-shadow:var(--shadow)}
.price{font-size:38px;font-weight:900;letter-spacing:-.04em}
.footer-public{padding:32px 0;border-top:1px solid var(--border);background:#fff}

/* ==========================================================================
   Login / Register
   ========================================================================== */
body.login,.login{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:radial-gradient(circle at top left,rgba(56,189,248,.26),transparent 35%),linear-gradient(135deg,#071B33,#2563EB);overflow-x:hidden}
.login-card{width:min(100%,460px);background:#fff;border-radius:24px;padding:34px;box-shadow:0 30px 90px rgba(0,0,0,.28);margin:0 auto}
.login-card .btn,.login-card input,.login-card select,.login-card textarea{width:100%}
.auth-brand{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.auth-brand h1{font-size:24px;margin:0;letter-spacing:-.03em}
.auth-brand small{color:var(--muted)}

/* ==========================================================================
   App shell — sidebar (desktop) + topbar + content + bottom tab bar (mobile)
   Desktop (>900px): fixed left sidebar, no bottom tab bar.
   Mobile/tablet (<=900px): sidebar and hamburger are gone; navigation moves
   to the fixed bottom tab bar rendered by footer.php.
   ========================================================================== */
.layout{display:flex;min-height:100vh}
.sidebar {
    width: var(--sidebar-w);
    background: linear-gradient(
        180deg,
        var(--navy) 0%,
        var(--navy2) 100%
    );
    color: #fff;

    padding: 24px 18px;

    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 40;

    overflow-y: auto;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;
}


/* =========================
   BRAND
========================= */

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 34px;
    padding: 0 8px;
}

.sidebar-brand h1 {
    font-size: 22px;
    font-weight: 700;

    margin: 0;
    color: #fff;

    letter-spacing: -0.02em;
}

.sidebar-brand small {
    display: block;

    margin-top: 3px;

    color: #9aa9bf;

    font-size: 14px;
    font-weight: 400;
}


/* =========================
   NAVIGATION
========================= */

.nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nav a {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 14px 16px;

    border-radius: 10px;

    color: #aebbd0;

    margin: 0;

    font-weight: 600;
    font-size: 16px;

    letter-spacing: 0;

    text-decoration: none;

    border-left: 3px solid transparent;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


/* NAV ICON */

.nav a .nav-icon {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    opacity: 0.85;

    transition: opacity 0.2s ease;
}


/* HOVER */

.nav a:hover {
    background: rgba(255, 255, 255, 0.05);

    color: #fff;
}


/* ACTIVE */

.nav a.active {
    background: rgba(255, 255, 255, 0.09);

    color: #fff;

    border-left-color: #38bdf8;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.nav a.active .nav-icon,
.nav a:hover .nav-icon {
    opacity: 1;
}

.logout-link {
    margin-top: auto;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 14px 16px;

    border-radius: 10px;

    color: #f3a9a3;

    font-weight: 600;
    font-size: 16px;

    letter-spacing: 0;
    text-decoration: none;

    margin-bottom: 8px;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


/* Logout icon */

.logout-link .nav-icon {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    opacity: 0.9;
}


/* Hover */

.logout-link:hover {
    background: rgba(220, 38, 38, 0.16);
    color: #fecaca;

    transform: translateX(2px);
}
.main{margin-left:var(--sidebar-w);width:calc(100% - var(--sidebar-w));min-width:0}
.topbar{height:var(--topbar-h-desktop);background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:30;gap:14px}
.topbar-left{display:flex;align-items:center;gap:14px;min-width:0}
.topbar-logo{display:block;width:32px;height:32px;border-radius:var(--radius-sm);object-fit:contain;background:#fff;border:1px solid var(--border);padding:3px}
.topbar-workspace{min-width:0;display:flex;flex-direction:column;line-height:1.1}
.topbar-workspace strong{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.topbar-workspace small{font-size:12px;color:var(--muted);font-weight:500;margin-top:3px}
.topbar-actions-clean{display:flex;align-items:center;gap:10px;flex:none}
.topbar .actions{flex-wrap:nowrap;min-width:0}
.mobile-menu{display:none} /* legacy hamburger toggle — the current layout never shows it; keep hidden if any old markup still refs it */
.notif-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff}
.notif-pill span{position:absolute;right:-6px;top:-6px;background:var(--red);color:#fff;font-size:10px;font-weight:600;min-width:18px;height:18px;border-radius:100px;align-items:center;justify-content:center;display:inline-flex;border:2px solid #fff}

.content{padding:clamp(20px,2.6vw,32px);max-width:1560px;margin:0 auto;width:100%;overflow-x:hidden}

/* Fixed bottom tab bar — only rendered visually on mobile/tablet (see 900px breakpoint) */
/* Relay fix: matches the approved mobile mockup's tab bar — a 2px top-border "mark" as
   the active indicator instead of a filled pill, small uppercase letter-spaced labels,
   the bar itself flush with the page background rather than a distinct white/blurred
   surface. The "Add" FAB used to be embedded as a raised 3rd tab; it's now a separate
   floating button (.mobile-fab-add, below) per the mockup's actual layout, so the tab bar
   holds 5 real destinations instead of 4 plus a non-navigational action. */
.mobile-tabbar{display:none}
.mobile-tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-top:2px solid transparent;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:10px}
.mobile-tabbar a svg{flex:0 0 auto}
.mobile-tabbar a.active{color:var(--blue);border-top-color:var(--blue)}
.mobile-fab-add{display:none}
body.keyboard-open .mobile-tabbar,body.keyboard-open .mobile-fab-add{display:none}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

/* Automation page: collapse the two-column layout before the sidebar itself goes mobile. */
@media(max-width:1100px){
  .automation-layout{grid-template-columns:1fr}
  .automation-side-card{position:static}
}

/* Marketing hero: stack before the app shell breakpoint. */
@media(max-width:1050px){
  .hero-wrap{grid-template-columns:1fr;gap:28px;padding:64px 0}
  .feature-grid,.pricing{grid-template-columns:1fr 1fr}
  .landing-links{display:none}
}

/* ---- App shell → mobile/tablet. This is THE mobile breakpoint; put new
   mobile overrides here rather than adding another @media block. ---- */
@media(max-width:900px){
  /* ============================================================================
     Mobile visual redesign — approved mockup ("Mobile app relay design.zip"):
     warm greige/gold palette, Cormorant Garamond headings + Lora body, hairline
     borders, small radii, outlined (not filled) buttons. Desktop is untouched —
     everything here lives inside this same 900px block and only takes effect at
     this width, redefining the exact custom properties every component already
     reads (var(--blue), var(--radius), var(--card)...) so the cascade restyles
     every page automatically instead of needing each page's markup rewritten.
     The --cv-* tokens are contact_view.php's own separate namespace (see its
     ':root' blocks above) and need their own redefinition here for the same
     reason. Semantic colors (green/red success/danger, --cv-green/--cv-red) are
     deliberately left alone — that meaning shouldn't shift with the reskin.
     ============================================================================ */
  :root{
    /* Relay fix: accent is the logo's own navy/blue — not the mockup's gold. The mockup's
       structural language (serif type, small radii, hairline borders, outlined buttons,
       warm neutral ground) stays; only the color role changes. These are Relay's original,
       pre-reskin --navy/--blue/--blue2 values, not new colors — they already matched the
       logo (deep navy badge, cyan-to-blue "R" gradient) before any of this reskin started. */
    --navy:#0B2140;--navy2:#050F1F;--blue:#2554EB;--blue2:#38BDF8;
    /* Relay fix: backgrounds back to white/near-white, as they were before this reskin —
       only the mockup's structural language (type, radii, borders, outlined buttons) and
       the logo-matched accent stay changed. */
    --bg:#FAFBFC;--card:#FFFFFF;--border:#ded9d3;--text:#201f1d;--muted:#7d7979;--soft:#EFF4FF;
    --shadow:0 1px 2px rgba(45,43,43,.14);--radius:7px;--radius-sm:4px;

    --cv-primary:#2554EB;--cv-primary-dark:#2646a8;--cv-primary-2:#2447af;--cv-primary-soft:#EFF4FF;
    --cv-text:#201f1d;--cv-ink:#201f1d;--cv-muted:#7d7979;--cv-subtle:#7d7979;
    --cv-border:#ded9d3;--cv-line:#ded9d3;--cv-card:#FFFFFF;--cv-surface:#FFFFFF;--cv-surface-soft:#f7f9fc;--cv-soft:#EFF4FF;
    --cv-shadow:0 8px 24px rgba(45,43,43,.12);--cv-shadow-sm:0 1px 2px rgba(45,43,43,.08);--cv-shadow-lg:0 14px 38px rgba(45,43,43,.16);
  }
  body{font-family:'Lora',Georgia,serif}
  h1,h2,h3,h4,h5,h6{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;letter-spacing:-0.015em}

  .btn{background:transparent;color:var(--blue);border:1px solid var(--blue);font-family:'Cormorant Garamond',Georgia,serif;font-weight:600}
  .btn:hover{background:rgba(37,84,235,.12)}
  .btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border)}
  .btn.secondary:hover{background:rgba(32,31,29,.06);border-color:var(--border)}
  /* Relay fix: same "-.content .card .btn" leak as the Logout button below — .btn.dark
     isn't used inside a card anywhere today, but .btn.green is (complete_followup.php's
     "Complete Follow-Up" button), so both get the explicit high-specificity pairing too. */
  .btn.dark,.content .card .btn.dark{background:var(--navy)!important;color:#fff!important;border-color:var(--navy)!important}
  .btn.green,.content .card .btn.green{background:transparent!important;color:var(--green)!important;border:1px solid var(--green)!important}
  /* Relay fix (caught in local browser testing): profile.php's red Logout button sits
     inside .content .card, and that section (further down this file, unconditional) has
     TWO separate rules targeting ".content .card .btn" at 3-class specificity — one plain
     (background/border-color/color, no !important) and one with a gradient background
     (!important). Between them they were winning background AND border-color back to blue
     regardless of the !important/transparent/red rule directly above — 2-class .btn.danger
     can't out-specify a 3-class selector no matter how many properties are !important.
     Naming ".content .card .btn.danger"/".content .card .logout-danger" explicitly (4
     classes) is what actually wins, rather than another specificity-doubling guess. */
  .btn.danger,.btn.logout-danger,.logout-danger,
  .content .card .btn.danger,.content .card .btn.logout-danger,.content .card .logout-danger{background:transparent!important;color:var(--red)!important;border:1px solid var(--red)!important}

  input,select,textarea{background:transparent;border-color:var(--border);border-radius:var(--radius-sm);font-family:'Lora',Georgia,serif}
  input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:none}

  /* Relay fix (user-reported overflow on settings_assignment.php): a grid/flex item's
     default min-width is "auto", not 0 — it won't shrink below its content's intrinsic
     minimum. ".table-wrap table" has an unscoped "min-width:560px" elsewhere in this file
     (meant for contact_view.php's wider tables), and any .card containing a table inherits
     that as its own minimum width. In a single-column mobile grid, ALL cards in that grid
     share the same column track, so one wide card stretches every card next to it — here,
     "Active Team"'s table dragged "Assignment Mode" (no table at all) to the same overflow
     width. min-width:0 is the standard fix: it lets the card shrink to the actual viewport
     and pushes the overflow back down to .table-wrap's own horizontal scroll, where it
     belongs, instead of blowing out the whole card.  */
  .card{background:var(--card);min-width:0}
  .tag{border-radius:3px}

  .topbar{background:var(--card)}
  /* Relay fix: mockup's tab bar has no filled active background — just the top-border
     mark (base rule, unconditional) plus this color change. Floating FAB: outlined, not
     filled, matching every other button in this reskin — background:var(--bg) so it
     reads as a hole punched in the page, bordered in the accent, not a solid accent disc. */
  .mobile-fab-add{display:flex;align-items:center;justify-content:center;position:fixed;right:16px;z-index:9999;width:50px;height:50px;border-radius:50%;border:1px solid var(--blue);background:var(--bg);color:var(--blue);box-shadow:var(--shadow)}

  /* Relay fix (caught in local browser testing): contact_view.php's own "UI-only layer"
     (further down this file, unconditional — not scoped to a breakpoint) styles buttons
     and inputs via ".content .card .btn" / ".content input,..." with !important. ".content"
     and ".card" are generic, app-wide wrapper classes, not unique to that page, so those
     rules were quietly winning on every OTHER page too (e.g. contacts.php's "Create Group"
     button was rendering that page's old blue gradient, not this reskin). Matching
     selectors with !important alone wasn't enough to fix it — with equal specificity and
     both sides using !important, CSS falls back to source order, and line 1038's rule
     sits textually later in the file than this 900px block, so it kept winning. The
     doubled ".content.content" below is a standard, harmless specificity bump (matches
     identically, just counts as an extra class) so this one wins regardless of position. */
  /* Relay fix (caught in local browser testing): without :not(.danger), this was also
     clobbering profile.php's red "Logout" button (.btn.danger.logout-danger) with blue —
     4 classes here beats .btn.danger's 2 regardless of !important or source order, so it
     doesn't matter that the correct red rule (line 596) comes later in the file. */
  /* Relay fix: excludes every semantic .btn variant (not just .danger) — this rule's own
     6-class-equivalent specificity was beating the dedicated .green/.dark rules below it,
     the same way the original unscoped selector once beat .btn.danger. Whack-a-mole-proofed
     by listing every variant that exists today rather than fixing this one at a time. */
  .content.content .card .btn:not(.danger):not(.logout-danger):not(.green):not(.dark){background:transparent!important;background-image:none!important;color:var(--blue)!important;border:1px solid var(--blue)!important;box-shadow:none!important}
  .content.content input,.content.content select,.content.content textarea{background:transparent!important;border-color:var(--border)!important;color:var(--text)!important}
  .content.content input:focus,.content.content select:focus,.content.content textarea:focus{border-color:var(--blue)!important;box-shadow:none!important}
  .primary-action.primary-action{background:transparent!important;color:var(--blue)!important;border-color:var(--blue)!important;box-shadow:none!important}

  .layout{display:block;min-height:100vh}
  .sidebar{display:none}
  .main{margin-left:0;width:100%}
  .overlay,.mobile-menu{display:none}

  .topbar{
    position:sticky;top:0;z-index:900;
    height:calc(var(--topbar-h-mobile) + var(--safe-top));
    min-height:calc(var(--topbar-h-mobile) + var(--safe-top));
    padding:calc(var(--safe-top) + 8px) 16px 8px;
    align-items:center;
  }
  /* Relay fix: the strip the OS draws its own status bar over (time, battery,
     network, notification icons) — MainActivity.java sets the native status bar
     transparent and forces those icons to their light/white variant, so this needs
     to actually be a dark surface for them to read against, or they're invisible. */
  .topbar::before{
    content:"";
    position:absolute;top:0;left:0;right:0;
    height:var(--safe-top);
    background:rgba(8,9,14,.88);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    z-index:1;
  }
  .topbar-workspace strong{font-size:16px;max-width:62vw}
  .topbar-workspace small{display:none}
  .topbar .muted{font-size:13px}
  .topbar-logo{width:32px;height:32px}
  .notif-pill{width:44px;height:44px;border-radius:16px}

  .content{
    width:100%;max-width:100%;
    padding:16px 14px calc(var(--tabbar-h) + var(--safe-bottom) + 28px);
  }

  /* .page-head{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:14px}
  .page-head .actions,.actions{width:100%}
  .page-head .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .actions .btn{flex:1}
  .btn{white-space:normal} */

/* Contact_view.php */
.lead-view-header{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;padding:26px 28px;margin:4px 0 20px;background:linear-gradient(135deg,#fff 0%,#f8faff 100%);border:1px solid var(--cv-border);border-radius:20px;box-shadow:var(--cv-shadow)}
.lead-eyebrow{display:flex;align-items:center;gap:10px;color:var(--cv-primary);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.lead-avatar{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;background:var(--cv-primary);color:#fff;font-size:15px;letter-spacing:0}.lead-view-header h1{margin:12px 0 8px;font-size:34px;line-height:1.1;letter-spacing:-.035em;color:var(--cv-text)}.lead-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;color:var(--cv-muted);font-size:14px}.lead-meta span{display:inline-flex;align-items:center;gap:7px}.lead-meta i{color:var(--cv-primary)}.lead-status-row{margin-top:14px}.lead-status-row .tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 11px;font-weight:750}
.lead-view-header .lead-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.action-btn{min-height:44px;min-width:44px;padding:0 16px;border-radius:12px;border:1px solid var(--cv-border);background:#fff;color:#344054;text-decoration:none;font-weight:750;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:.18s}.action-btn:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(31,45,75,.12)}.primary-action{background:var(--cv-primary);border-color:var(--cv-primary);color:#fff}.primary-action:hover{background:var(--cv-primary-dark)}.icon-only{width:44px;padding:0;font-size:18px}.whatsapp{background:#25D366!important;border-color:#25D366!important;color:#fff!important}.whatsapp:hover{background:#1ebe5d!important}.call-action{background:#eff6ff;border-color:#bfdbfe;color:#2563eb}.outline{color:var(--cv-primary);border-color:#cbd7f7}.danger{background:#fff0f0;color:var(--cv-danger);border-color:#fecaca}.archive-form{display:inline;margin:0}.mobile-call{display:none}
.lead-stats.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px!important;margin-bottom:20px!important}.lead-stats .card{position:relative;overflow:hidden;min-height:155px;padding:21px 22px;border:1px solid var(--cv-border);border-radius:18px;background:var(--cv-card);box-shadow:var(--cv-shadow)}.lead-stats .card:before{content:"";position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:13px;background:var(--cv-soft)}.lead-stats .card:nth-child(1):after{content:"⚑"}.lead-stats .card:nth-child(2):after{content:"↗"}.lead-stats .card:nth-child(3):after{content:"◉"}.lead-stats .card:nth-child(4):after{content:"₹"}.lead-stats .card:after{position:absolute;right:29px;top:25px;color:var(--cv-primary);font-size:19px;font-weight:800}.lead-stats .muted{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.lead-stats strong{display:block;margin-top:15px;font-size:26px;color:var(--cv-text)}.metric{margin-top:12px;font-size:36px!important;line-height:1;font-weight:850;color:var(--cv-text)}.score-total{font-size:15px;font-weight:700;color:var(--cv-muted)}.help-text{max-width:220px;margin:12px 0 0!important;font-size:13px;line-height:1.5;color:var(--cv-muted)}
.form-grid{gap:20px!important}.management-grid,.details-grid,.activity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card{border:1px solid var(--cv-border)!important;border-radius:18px!important;background:var(--cv-card)!important;box-shadow:var(--cv-shadow)}.management-grid>.card,.details-grid>.card,.activity-grid>.card{padding:24px}.card h2{margin:0 0 20px;color:var(--cv-text);font-size:25px;letter-spacing:-.025em}.card h2:after{content:"";display:block;width:34px;height:3px;margin-top:10px;border-radius:10px;background:var(--cv-primary)}.card h3{margin:24px 0 10px;color:var(--cv-text)}
input,select,textarea{border:1px solid #dbe2ea!important;border-radius:12px!important;background:#fff!important;color:#263449!important}input,select{min-height:48px}textarea{padding:13px!important}input:focus,select:focus,textarea:focus{border-color:var(--cv-primary)!important;box-shadow:0 0 0 4px rgba(49,88,201,.10)!important;outline:none!important}.field{margin-top:15px!important}label{font-size:13px!important;font-weight:800!important;color:#344054!important}.card .btn{min-height:44px;padding:0 17px;border-radius:11px;font-weight:750;background:var(--cv-primary);border-color:var(--cv-primary);color:#fff}.card .btn:hover{background:var(--cv-primary-dark)}.management-grid .form-grid{margin-top:0!important;gap:14px!important}#followup{scroll-margin-top:90px}
.table-wrap{border:1px solid var(--cv-border);border-radius:13px;overflow:auto}table{width:100%;border-collapse:collapse}th{padding:13px 15px!important;background:#f8fafc!important;color:#758195!important;font-size:11px!important;font-weight:850!important;text-transform:uppercase;letter-spacing:.07em}td{padding:15px!important;border-top:1px solid #edf0f4!important;color:#344054}tr:hover td{background:#fbfcff}.details-grid .card p{line-height:1.6}.details-grid .card p:not(.muted){padding:11px 0;margin:0;border-bottom:1px solid #edf0f4}
.card[style*="margin-top:20px"]{margin-top:20px!important;padding:24px!important}.card[style*="margin-top:20px"]>.muted{line-height:1.6}.card[style*="margin-top:20px"] .actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.card[style*="margin-top:20px"] .actions select{flex:1;min-width:240px}.card[style*="margin-top:20px"] input[type=file]{flex:1;min-height:48px;padding:10px}.card[style*="margin-top:20px"] input[readonly]{background:#f8fafc!important;font-size:12px!important}
.activity-item{position:relative;padding:16px 0 16px 20px!important;border-bottom:1px solid #edf0f4!important}.activity-item:last-child{border-bottom:0!important}.activity-item:before{content:"";position:absolute;left:0;top:22px;width:9px;height:9px;border-radius:50%;background:var(--cv-primary);box-shadow:0 0 0 4px var(--cv-soft)}.activity-item:after{content:"";position:absolute;left:4px;top:31px;bottom:-1px;width:1px;background:#dfe6f0}.activity-item:last-child:after{display:none}.activity-item strong{color:var(--cv-text)}.activity-item>div{margin-top:8px;line-height:1.55;color:#475467}
@media(max-width:1050px){.lead-stats.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lead-view-header{flex-direction:column}.lead-actions{width:100%}}
@media(max-width:768px){.lead-view-header{padding:20px 18px;border-radius:16px}.lead-view-header h1{font-size:28px}.lead-meta{font-size:13px;gap:8px 12px}.lead-actions{gap:8px}.primary-action{flex:1}.mobile-call{display:inline-flex!important}.management-grid,.details-grid,.activity-grid{grid-template-columns:1fr!important}.lead-stats.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important}.lead-stats .card{min-height:135px;padding:17px}.lead-stats .card:before,.lead-stats .card:after{display:none}.metric{font-size:31px!important}.lead-stats strong{font-size:22px}.management-grid>.card,.details-grid>.card,.activity-grid>.card,.card[style*="margin-top:20px"]{padding:19px!important}.card h2{font-size:22px}.card[style*="margin-top:20px"] .actions{align-items:stretch}.card[style*="margin-top:20px"] .actions select,.card[style*="margin-top:20px"] input[type=file]{width:100%;min-width:0}}
@media(max-width:480px){.lead-stats.grid{grid-template-columns:1fr}.action-btn{min-height:42px;min-width:42px}.icon-only{width:42px}.lead-status-row .tag{font-size:12px}}

/* Restored lower-page components */
.section-heading{display:flex;justify-content:space-between;gap:20px;margin-bottom:20px}.section-heading .muted{margin:0}.section-icon,.note-icon,.file-icon,.message-channel{display:flex;align-items:center;justify-content:center;background:var(--cv-soft);color:var(--cv-primary);flex:0 0 auto}.section-icon{width:46px;height:46px;border-radius:14px;font-size:20px}.status-pill{display:inline-flex;padding:5px 10px;border-radius:999px;background:#f2f4f7;font-size:12px;font-weight:750}.notes-card textarea{width:100%;resize:vertical}.notes-list,.shared-files-list,.message-list{display:flex;flex-direction:column;gap:12px;margin-top:14px}.note-item,.shared-file-item{display:flex;gap:12px;padding:14px;border:1px solid #edf0f4;border-radius:14px;background:#fbfcfe}.note-icon,.message-channel{width:38px;height:38px;border-radius:11px}.note-content,.file-info,.message-content,.activity-body{flex:1;min-width:0}.note-content p{margin:0 0 4px!important;padding:0!important;border:0!important}.sequence-active{display:flex;gap:12px;padding:16px;border-radius:14px;background:#f0fdf4;border:1px solid #bbf7d0}.sequence-actions,.file-upload-form{display:flex;align-items:center;gap:12px}.sequence-actions select,.file-input-wrap{flex:1}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:150px;padding:20px;border:1px dashed #d8dee9;border-radius:14px;background:#fbfcfe}.empty-state i{font-size:28px;color:#98a2b3}.compact-empty{min-height:90px;flex-direction:row;justify-content:flex-start;gap:12px;text-align:left}.compact-empty a{color:var(--cv-primary);font-weight:700}.file-input-wrap{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 13px;border:1px dashed #cbd5e1;border-radius:12px}.file-input-wrap input[type=file]{width:100%;border:0!important;min-height:auto!important}.file-icon{width:42px;height:42px;border-radius:12px;font-size:20px}.share-link-wrap{display:flex;gap:8px;margin-top:7px}.share-link-wrap input{flex:1;min-width:0;min-height:42px!important;font-size:12px!important}.copy-share-link{width:42px;border:1px solid #dbe2ea;border-radius:11px;background:#fff;color:var(--cv-primary)}.message-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #edf0f4}.message-header,.activity-header{display:flex;justify-content:space-between;gap:12px}.message-text{margin-top:8px;line-height:1.65}.activity-grid .activity-item{display:flex;gap:13px;padding:0 0 20px!important;border:0!important}.activity-grid .activity-item:before,.activity-grid .activity-item:after{display:none!important}.activity-dot{position:relative;width:14px;height:14px;margin-top:4px;border-radius:50%;background:var(--cv-primary);box-shadow:0 0 0 5px var(--cv-soft);flex:0 0 auto}.activity-grid .activity-item:not(:last-child) .activity-dot:after{content:"";position:absolute;left:6px;top:15px;width:2px;height:calc(100% + 20px);background:#e1e7f0}
@media(max-width:768px){.section-heading{gap:12px}.sequence-actions,.file-upload-form{flex-direction:column;align-items:stretch}.sequence-actions select,.file-input-wrap{width:100%;box-sizing:border-box}.sequence-actions .btn,.file-upload-form .btn{width:100%}.message-header,.activity-header{flex-direction:column;gap:3px}.shared-file-item{padding:12px}}@media(max-width:480px){.table-wrap table{min-width:560px}.share-link-wrap{align-items:stretch}.copy-share-link{width:40px;flex:0 0 40px}}


  .card{border-radius:var(--radius-sm);padding:16px}
  .grid,.v13-grid-3,.feature-grid,.pricing,.form-grid,.settings-grid,.automation-status-grid,.automation-layout{grid-template-columns:1fr}
  .command-grid{grid-template-columns:1fr 1fr}
  .health-grid{grid-template-columns:1fr}
  .profile-grid{grid-template-columns:1fr}
  .profile-edit-card{grid-column:auto}
  /* Relay fix: align-items:flex-start meant .integration-copy and the CTA button never
     stretched to the card's width in this column layout — with no width to constrain it,
     the description paragraph rendered as one unbroken line (its own "preferred" width),
     wider than the phone screen, and the width:100% button just matched that oversized
     parent. align-items:stretch fixes both; .integration-logo keeps its own fixed 44px
     size regardless (an explicit width always wins over stretch's auto-sizing). */
  .integration-simple,.integration-card{grid-template-columns:1fr;flex-direction:column;align-items:stretch}
  .integration-simple .btn,.integration-simple form{width:100%}

  .table-wrap{overflow-x:auto}
  table{min-width:560px}
  th,td{font-size:13px;padding:12px}
  /* Relay fix: reports.php's simple 2-3 column stat tables (Lead Source, Team
     Performance, Lost Lead Analytics) forced horizontal scrolling on mobile for data
     that's really just a list of label:value pairs — most of it hidden off-screen with
     no visual cue to scroll. .stat-table restacks each row into a small label/value
     card instead, reusing the existing data-label attributes on each <td>. */
  /* These tables have no <thead> — the header is just the table's first <tr> of <th>
     cells — so it's hidden by position rather than by a thead selector. */
  .stat-table tr:first-child{display:none}
  .stat-table table{min-width:0}
  .stat-table tr{display:block;padding:10px 0;border-bottom:1px solid var(--border)}
  .stat-table tr:last-child{border-bottom:0}
  .stat-table td{display:flex;justify-content:space-between;gap:12px;padding:3px 14px;border:0;font-size:13px}
  .stat-table td::before{content:attr(data-label);color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.03em}

  .lead-filter-grid,.bulk-actions-row{grid-template-columns:1fr}
  .filter-toggle-mobile{display:flex;align-items:center;justify-content:center;gap:8px}
  .lead-filter-body{display:none;margin-top:12px}
  .lead-filter-body.open{display:block}
  .bulk-actions-card{top:80px}
  .select-all-label,.selection-close{grid-column:1/-1}
  .lead-row-card{grid-template-columns:1fr;padding:14px}
  .lead-actions{display:grid;grid-template-columns:1fr 1fr}
  .lead-actions .btn{width:100%}
  .lead-card-clickable-area{padding-right:0}
  .lead-score-badge{position:static;justify-self:start;order:-1;margin-bottom:2px}
  .lead-tags-row .tag{max-width:100%}

  /* Swipe-to-advance gesture — mobile only. .swipe-stage-card only ever appears on a
     lead that has a real next stage (contacts.php decides that server-side), so this
     never shows a dead-end affordance. */
  .swipe-stage-card{overflow:hidden}
  .swipe-reveal-action{display:flex;position:absolute;inset:0;left:auto;width:132px;align-items:center;justify-content:center;flex-direction:column;gap:2px;background:var(--blue);color:#fff;text-align:center;padding:0 10px}
  .swipe-reveal-icon{font-size:18px;line-height:1}
  .swipe-reveal-label{font-size:11px;font-weight:600;line-height:1.25}
  /* Relay fix (caught in local browser testing): as a normal-flow grid item,
     .swipe-drag-surface used to respect .lead-row-card's 14px padding and stop 14px
     short of the card's true right/bottom edge — while .swipe-reveal-action, being
     absolutely positioned, already sat flush with that true edge. Net effect: a
     permanent 14px sliver of the reveal panel showing on every swipeable card even at
     rest. Never caught earlier because this gesture had never rendered in a real
     browser until today. Fix: expand the surface to the card's full box with a negative
     margin equal to that padding, then add the same padding back on the surface itself
     so its visible content sits at the same inset as before — only the surface's own
     edges move, not what it looks like. */
  .swipe-drag-surface{display:block;position:relative;z-index:1;margin:-14px;padding:14px;background:var(--card);border-radius:var(--radius-sm);touch-action:pan-y;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
  .swipe-drag-surface.dragging{transition:none}
  .swipe-committed .swipe-reveal-action{background:var(--green)}

  /* Quick-actions bottom sheet — mobile only, opened from the kebab button on each
     lead card. One shared sheet instance for the page; see contacts.php's inline script
     for how it's rewired per card. */
  .lead-quick-actions-btn{display:flex;align-items:center;justify-content:center;position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:#fff;color:var(--muted);font-size:18px;line-height:1}
  .lead-quick-actions-btn:active{background:var(--soft);color:var(--blue)}
  .lead-selection-mode .lead-quick-actions-btn{display:none}

  /* Relay fix (user-reported screenshot): the sheet and its backdrop shared z-index:9999
     with .mobile-tabbar and the new .mobile-fab-add — with equal z-index, later DOM order
     wins, and both nav elements render after the sheet's own markup (they live in
     footer.php, included after every page's body content). The FAB was painting on top of
     the sheet's Save button, making it unreachable. A modal sheet must outrank persistent
     chrome underneath it, not tie with it. */
  .quick-sheet-backdrop{position:fixed;inset:0;background:rgba(11,18,32,.45);z-index:10001;opacity:0;transition:opacity .2s ease}
  .quick-sheet-backdrop.open{opacity:1}
  .quick-sheet{position:fixed;left:0;right:0;bottom:0;z-index:10002;background:var(--card);border-radius:16px 16px 0 0;box-shadow:0 -8px 24px rgba(15,23,42,.18);padding:6px 16px calc(16px + var(--safe-bottom));transform:translateY(100%);transition:transform .25s cubic-bezier(.2,.8,.2,1);max-height:80vh;overflow-y:auto}
  .quick-sheet.open{transform:translateY(0)}
  .quick-sheet-handle{width:36px;height:4px;border-radius:100px;background:var(--border);margin:8px auto 4px}
  .quick-sheet-header{display:flex;align-items:center;gap:10px;padding:8px 0 12px;border-bottom:1px solid var(--border);margin-bottom:12px}
  .quick-sheet-title{flex:1;font-size:15px}
  .quick-sheet-back,.quick-sheet-close{width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1}
  .quick-sheet-back:active,.quick-sheet-close:active{background:var(--soft);color:var(--blue)}
  .quick-sheet-view{display:flex;flex-direction:column;gap:8px;padding-bottom:12px}
  .quick-sheet-action{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;background:#fff;color:inherit;font:inherit}
  .quick-sheet-action:active{background:var(--soft);border-color:var(--blue)}
  .quick-sheet-action-icon{width:34px;height:34px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
  .quick-sheet-action strong{display:block;font-size:14px}
  .quick-sheet-action small{display:block;font-size:12px;margin-top:1px}
  .quick-sheet-list{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow-y:auto}
  .quick-sheet-user{width:100%;text-align:left;border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;background:#fff;font:inherit;font-size:14px}
  .quick-sheet-user:active{background:var(--soft);border-color:var(--blue)}
  .quick-sheet-form{display:flex;flex-direction:column;gap:12px}

  .activity-detail-row{grid-template-columns:1fr;gap:2px}

  .save-sticky{bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 10px)}

  /* Bottom tab bar becomes visible only here. Relay fix: flush with the page background
     (mockup's own tab bar is just var(--color-bg) + a hairline top border, no elevated
     white/blurred surface) — the top-border "mark" on the active tab is the only
     separation device, so the bar shouldn't visually float above the page itself. */
  .mobile-tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
    position:fixed;left:0;right:0;bottom:0;z-index:9999;
    height:calc(var(--tabbar-h) + var(--safe-bottom));
    padding:8px 10px calc(8px + var(--safe-bottom));
    background:var(--bg);
    border-top:1px solid var(--border);
  }
  .mobile-tabbar a{height:48px}
  /* Beats the shared "small,label,.tag,..." typography-scale rule below (12px) — the
     mockup's tab labels are a deliberately tiny uppercase caption, not body-text size. */
  .mobile-tabbar a small{font-size:9px!important;line-height:1.2}
  .mobile-fab-add{bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 14px)}

  /* Mobile typography scale: 20 / 18 / 16 / 14 / 12 only. */
  h1,.page-head h1{font-size:20px;line-height:1.18;letter-spacing:-.02em}
  h2,.page-head h2,.section-title-row h2{font-size:18px;line-height:1.22}
  h3,.lead-main strong,.integration-copy h2,.auth-brand h1{font-size:16px;line-height:1.25}
  p,.page-head p,.muted,.lead-meta,.small-note,.help-text,.settings-links span,.v13-toggle small,.v13-option span{font-size:14px;line-height:1.45}
  small,label,.tag,.status-badge,th,td,.btn.small,.health-grid small,.health-grid strong,.mobile-tabbar small{font-size:12px;line-height:1.25}
  .metric,.price,.preview-metric strong{font-size:20px;line-height:1.05}
  input,select,textarea,.btn{font-size:14px;min-height:46px;padding:12px 13px}
  .btn{min-height:44px;border-radius:14px;justify-content:center}
}

/* Small phones — tighten spacing further. */
@media(max-width:640px){
  .landing-inner{height:68px}
  .landing-actions .btn.secondary{display:none}
  .hero-wrap{padding:46px 0}
  .hero .actions{flex-direction:column;align-items:stretch}
  .hero .btn{width:100%}
  .preview-grid{grid-template-columns:1fr}
  .feature-grid,.pricing,.grid{grid-template-columns:1fr}
  .section{padding:54px 0}
  .login-card{padding:26px 22px;border-radius:20px}
  .auth-brand h1{font-size:20px}
  .integration-card{grid-template-columns:1fr;align-items:start}
}

@media(max-width:520px){
  .content{padding:14px 12px calc(var(--tabbar-h) + var(--safe-bottom) + 24px)}
  .card{padding:15px}
  .page-head h1{font-size:24px}
  .page-head .actions{grid-template-columns:1fr}
  .topbar-workspace strong{max-width:58vw}
  .command-grid{grid-template-columns:1fr 1fr}
  .command-grid .card{min-height:82px;padding:13px}
  .metric{font-size:26px}
  .notif-pill{width:42px;height:42px}
  .login-card{max-width:calc(100% - 28px)}
  .mobile-fab-add{width:46px;height:46px;right:14px}
}


/* ==========================================================================
   CONTACT VIEW — DESKTOP + MOBILE FIX
   Kept outside the app-shell mobile media query so these styles work on
   desktop, tablet, and mobile.
   ========================================================================== */

:root{
  --cv-primary:#3158c9;
  --cv-primary-dark:#2646a8;
  --cv-text:#172033;
  --cv-muted:#667085;
  --cv-border:#dbe2ea;
  --cv-card:#ffffff;
  --cv-soft:#eef3ff;
  --cv-danger:#dc2626;
  --cv-shadow:0 8px 24px rgba(15,23,42,.06);
}

.lead-view-header{
  display:flex;justify-content:space-between;align-items:flex-start;gap:28px;
  padding:26px 28px;margin:4px 0 20px;
  background:linear-gradient(135deg,#fff 0%,#f8faff 100%);
  border:1px solid var(--cv-border);border-radius:20px;box-shadow:var(--cv-shadow)
}
.lead-eyebrow{display:flex;align-items:center;gap:10px;color:var(--cv-primary);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.lead-avatar{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;background:var(--cv-primary);color:#fff;font-size:15px}
.lead-view-header h1{margin:12px 0 8px;font-size:34px;line-height:1.1;letter-spacing:-.035em;color:var(--cv-text)}
.lead-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;color:var(--cv-muted);font-size:14px}
.lead-meta span{display:inline-flex;align-items:center;gap:7px}
.lead-meta i{color:var(--cv-primary)}
.lead-status-row{margin-top:14px}
.lead-status-row .tag{gap:6px;border-radius:999px;padding:7px 11px;font-weight:750}

/* Relay fix: unscoped ".lead-actions" here (unconditional, appears after the mobile
   900px block further up) was winning the "display" cascade for dashboard.php's
   Call/WhatsApp button row too — display:flex + flex-wrap:wrap + each .btn's own
   width:100% (from the leads-list mobile rule) meant the two buttons wrapped onto
   separate rows instead of sharing one, since flex doesn't know these two unrelated
   ".lead-actions" usages have different intents. Scoping to its real container fixes
   this the same way the grid-template-columns leak was fixed just above. */
.lead-view-header .lead-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.action-btn{
  min-height:44px;min-width:44px;padding:0 16px;border-radius:12px;
  border:1px solid var(--cv-border);background:#fff;color:#344054;
  font-weight:750;font-size:14px;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;cursor:pointer;transition:.18s
}
.action-btn:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(31,45,75,.12)}
.primary-action{background:var(--cv-primary);border-color:var(--cv-primary);color:#fff}
.primary-action:hover{background:var(--cv-primary-dark)}
.icon-only{width:44px;padding:0;font-size:18px}
.whatsapp{background:#25D366!important;border-color:#25D366!important;color:#fff!important}
.whatsapp:hover{background:#1ebe5d!important}
.call-action{background:#eff6ff;border-color:#bfdbfe;color:#2563eb}
.outline{color:var(--cv-primary);border-color:#cbd7f7}
.lead-actions .danger{background:#fff0f0!important;color:var(--cv-danger)!important;border-color:#fecaca!important}
.archive-form{display:inline;margin:0}
.mobile-call{display:none}

.lead-stats.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}
.lead-stats .card{
  position:relative;overflow:hidden;min-height:155px;padding:21px 22px;
  border:1px solid var(--cv-border);border-radius:18px;background:var(--cv-card);box-shadow:var(--cv-shadow)
}
.lead-stats .muted{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.lead-stats strong{display:block;margin-top:15px;font-size:26px;color:var(--cv-text)}
.lead-stats .metric{margin-top:12px;font-size:36px!important;line-height:1;font-weight:850;color:var(--cv-text)}
.score-total{font-size:15px;font-weight:700;color:var(--cv-muted)}
.lead-stats .help-text{max-width:220px;margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--cv-muted)}

.management-grid,.details-grid,.activity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.management-grid>.card,.details-grid>.card,.activity-grid>.card{padding:24px}
.content .card{border-color:var(--cv-border);background:var(--cv-card)}
.content .card h2{color:var(--cv-text)}
.content .card h2:after{content:"";display:block;width:34px;height:3px;margin-top:10px;border-radius:10px;background:var(--cv-primary)}

.content input,.content select,.content textarea{border-color:#dbe2ea;background:#fff;color:#263449}
.content input:focus,.content select:focus,.content textarea:focus{
  border-color:var(--cv-primary);box-shadow:0 0 0 4px rgba(49,88,201,.10);outline:none
}
.content .card .btn{background:var(--cv-primary);border-color:var(--cv-primary);color:#fff}
.content .card .btn:hover{background:var(--cv-primary-dark)}

#followup{scroll-margin-top:90px}
.section-heading{display:flex;justify-content:space-between;gap:20px;margin-bottom:20px}
.section-heading .muted{margin:0}
.section-icon,.note-icon,.file-icon,.message-channel{
  display:flex;align-items:center;justify-content:center;background:var(--cv-soft);color:var(--cv-primary);flex:0 0 auto
}
.section-icon{width:46px;height:46px;border-radius:14px;font-size:20px}
.status-pill{display:inline-flex;padding:5px 10px;border-radius:999px;background:#f2f4f7;font-size:12px;font-weight:750}
.notes-list,.shared-files-list,.message-list{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.note-item,.shared-file-item{display:flex;gap:12px;padding:14px;border:1px solid #edf0f4;border-radius:14px;background:#fbfcfe}
.note-icon,.message-channel{width:38px;height:38px;border-radius:11px}
.note-content,.file-info,.message-content,.activity-body{flex:1;min-width:0}
.note-content p{margin:0 0 4px!important;padding:0!important;border:0!important}
.sequence-active{display:flex;gap:12px;padding:16px;border-radius:14px;background:#f0fdf4;border:1px solid #bbf7d0}
.sequence-actions,.file-upload-form{display:flex;align-items:center;gap:12px}
.sequence-actions select,.file-input-wrap{flex:1}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:150px;padding:20px;border:1px dashed #d8dee9;border-radius:14px;background:#fbfcfe}
.compact-empty{min-height:90px;flex-direction:row;justify-content:flex-start;gap:12px;text-align:left}
.file-input-wrap{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 13px;border:1px dashed #cbd5e1;border-radius:12px}
.file-input-wrap input[type=file]{width:100%;border:0!important;min-height:auto!important}
.file-icon{width:42px;height:42px;border-radius:12px;font-size:20px}
.share-link-wrap{display:flex;gap:8px;margin-top:7px}
.share-link-wrap input{flex:1;min-width:0;min-height:42px!important;font-size:12px!important}
.copy-share-link{width:42px;border:1px solid #dbe2ea;border-radius:11px;background:#fff;color:var(--cv-primary)}
.message-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #edf0f4}
.message-header,.activity-header{display:flex;justify-content:space-between;gap:12px}
.message-text{margin-top:8px;line-height:1.65}
.activity-grid .activity-item{display:flex;gap:13px;padding:0 0 20px!important;border:0!important}
.activity-grid .activity-item:before,.activity-grid .activity-item:after{display:none!important}
.activity-dot{position:relative;width:14px;height:14px;margin-top:4px;border-radius:50%;background:var(--cv-primary);box-shadow:0 0 0 5px var(--cv-soft);flex:0 0 auto}
.activity-grid .activity-item:not(:last-child) .activity-dot:after{content:"";position:absolute;left:6px;top:15px;width:2px;height:calc(100% + 20px);background:#e1e7f0}

@media(max-width:1050px){
  .lead-view-header{flex-direction:column}
  .lead-view-header .lead-actions{width:100%}
  .lead-stats.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
  .lead-view-header{padding:20px 18px;border-radius:16px}
  .lead-view-header h1{font-size:28px}
  .lead-meta{font-size:13px;gap:8px 12px}
  .primary-action{flex:1}
  .mobile-call{display:inline-flex!important}
  .management-grid,.details-grid,.activity-grid{grid-template-columns:1fr}
  .lead-stats.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .lead-stats .card{min-height:135px;padding:17px}
  .management-grid>.card,.details-grid>.card,.activity-grid>.card{padding:19px}
  .section-heading{gap:12px}
  .sequence-actions,.file-upload-form{flex-direction:column;align-items:stretch}
  .sequence-actions select,.file-input-wrap{width:100%;box-sizing:border-box}
  .sequence-actions .btn,.file-upload-form .btn{width:100%}
  .message-header,.activity-header{flex-direction:column;gap:3px}
}
@media(max-width:480px){
  .lead-stats.grid{grid-template-columns:1fr}
  .action-btn,.icon-only{min-height:42px;min-width:42px;width:42px}
  .primary-action{width:auto;flex:1}
  .table-wrap table{min-width:560px}
  .copy-share-link{width:40px;flex:0 0 40px}
}


/* =====================================================================
   CONTACT VIEW — FINAL CRM POLISH
   UI-only layer. Keeps existing PHP, IDs, forms and components intact.
   ===================================================================== */
:root{
  --cv-ink:#18243a;
  --cv-subtle:#64748b;
  --cv-line:#d9e1ec;
  --cv-surface:#ffffff;
  --cv-surface-soft:#f7f9fc;
  --cv-primary:#3158c9;
  --cv-primary-2:#2447af;
  --cv-primary-soft:#edf2ff;
  --cv-green:#16a66a;
  --cv-green-soft:#eafaf2;
  --cv-red:#e23b3b;
  --cv-red-soft:#fff0f0;
  --cv-shadow-sm:0 1px 2px rgba(15,23,42,.03),0 4px 14px rgba(15,23,42,.035);
  --cv-shadow-lg:0 14px 38px rgba(15,23,42,.07);
}

/* Relay fix (caught in local browser testing): a deliberate, narrow exception to the "one
   @media(max-width:900px) block" rule at the top of this file. The mobile redesign's :root
   redefinition of --cv-* (near the top of the 900px block above) was being silently beaten
   by the unconditional :root block directly above this comment — :root always has the same
   specificity no matter how it's qualified, so with two :root blocks both "active" at any
   width, the one that appears LATER in the file always wins, regardless of which one is
   inside a media query. There's no specificity trick available for :root the way there was
   for ".content .card .btn" earlier in this file — the only fix is redefining these same
   tokens again, after this block, so this one is what's textually last. Keep this small and
   only for tokens this exact block above redefines; every other mobile override still lives
   in the one main 900px block as normal. */
@media(max-width:900px){
  :root{
    --cv-ink:#201f1d;--cv-subtle:#7d7979;--cv-line:#ded9d3;--cv-surface:#FFFFFF;--cv-surface-soft:#f7f9fc;
    --cv-primary:#2554EB;--cv-primary-2:#2447af;--cv-primary-soft:#EFF4FF;
    --cv-shadow-sm:0 1px 2px rgba(45,43,43,.08);--cv-shadow-lg:0 14px 38px rgba(45,43,43,.16);
    /* This app also has a second, older unconditional ":root{--cv-primary:...}" block
       further up (the file's own "CONTACT VIEW — DESKTOP + MOBILE FIX" section) defining
       a slightly different set of the same-prefixed tokens — same source-order problem,
       same fix: redefine them here too so this block (last in the file) wins. */
    --cv-primary-dark:#2646a8;--cv-text:#201f1d;--cv-muted:#7d7979;--cv-border:#ded9d3;--cv-card:#FFFFFF;--cv-soft:#EFF4FF;
    --cv-shadow:0 8px 24px rgba(45,43,43,.12);
  }
}

/* Main lead identity card */
.lead-view-header{
  position:relative; overflow:hidden; isolation:isolate;
  padding:34px 40px 32px;
  border:1px solid var(--cv-line)!important;
  border-radius:24px!important;
  background:linear-gradient(135deg,#fff 0%,#f8faff 65%,#f1f5ff 100%)!important;
  box-shadow:var(--cv-shadow-lg)!important;
}
.lead-view-header:before{
  content:""; position:absolute; z-index:-1; width:360px; height:360px;
  border-radius:50%; right:-170px; top:-230px; background:rgba(49,88,201,.07);
}
.lead-eyebrow{font-size:12px!important;letter-spacing:.13em!important;color:var(--cv-primary)!important}
.lead-avatar{width:48px!important;height:48px!important;border-radius:15px!important;box-shadow:0 8px 20px rgba(49,88,201,.22)}
.lead-view-header h1{font-size:clamp(34px,3.2vw,48px)!important;color:var(--cv-ink)!important;margin:16px 0 18px!important}
.lead-meta{gap:10px 20px!important;color:var(--cv-subtle)!important}
.lead-meta span{padding:4px 0}
.lead-status-row{margin-top:18px!important}
.lead-status-row .tag{padding:9px 14px!important;border:1px solid rgba(194,65,12,.12);box-shadow:0 3px 10px rgba(15,23,42,.04)}

/* Action system */
.lead-view-header .lead-actions{gap:10px!important;align-self:flex-start}
.action-btn{
  height:52px!important; min-height:52px!important; border-radius:15px!important;
  border-color:var(--cv-line)!important; box-shadow:var(--cv-shadow-sm);
  font-size:15px!important; font-weight:750!important;
}
.primary-action{padding:0 25px!important;background:linear-gradient(135deg,var(--cv-primary),var(--cv-primary-2))!important;border-color:var(--cv-primary)!important;box-shadow:0 10px 24px rgba(49,88,201,.23)!important}
.icon-only{width:52px!important;min-width:52px!important;padding:0!important}
.whatsapp{background:linear-gradient(135deg,#2ad875,#16a967)!important;border-color:#25c76c!important;box-shadow:0 9px 20px rgba(22,166,106,.18)!important}
.call-action{background:#f0f7ff!important;color:#2563eb!important;border-color:#bfdbfe!important}
.outline{background:#fff!important;color:var(--cv-primary)!important;border-color:#cbd7f7!important}
.lead-actions .danger{background:#fff!important;color:var(--cv-red)!important;border-color:#ffd0d0!important;box-shadow:none!important}
.action-btn:hover{transform:translateY(-2px)!important;filter:none}

/* KPI cards */
.lead-stats.grid{gap:18px!important;margin:0 0 22px!important}
.lead-stats .card{
  min-height:172px!important;padding:24px 26px!important;border-radius:20px!important;
  border:1px solid var(--cv-line)!important;box-shadow:var(--cv-shadow-sm)!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.lead-stats .card:hover{transform:translateY(-3px);box-shadow:var(--cv-shadow-lg)!important;border-color:#c8d3e4!important}
.lead-stats .muted{font-size:12px!important;color:#65748a!important;letter-spacing:.09em!important}
.lead-stats strong{font-size:28px!important;margin-top:18px!important;color:var(--cv-ink)!important}
.lead-stats .metric{font-size:52px!important;letter-spacing:-.055em}
.lead-stats .help-text{font-size:14px!important;line-height:1.55!important}
.score-total{font-size:16px!important}

/* Universal content cards */
.management-grid,.details-grid,.activity-grid{gap:20px!important}
.management-grid>.card,.details-grid>.card,.activity-grid>.card,
.sequence-card,.shared-files-card{
  border:1px solid var(--cv-line)!important;border-radius:20px!important;
  background:var(--cv-surface)!important;box-shadow:var(--cv-shadow-sm)!important;
}
.management-grid>.card,.details-grid>.card,.activity-grid>.card{padding:28px!important}
.content .card h2{font-size:clamp(24px,2vw,32px)!important;margin-bottom:22px!important;color:var(--cv-ink)!important}
.content .card h2:after{width:38px!important;height:4px!important;margin-top:11px!important;border-radius:8px!important;background:linear-gradient(90deg,var(--cv-primary),#7d9cff)!important}

/* Inputs */
.content input,.content select,.content textarea{
  border-color:var(--cv-line)!important;border-radius:13px!important;background:#fff!important;
  min-height:50px!important;transition:border-color .16s ease,box-shadow .16s ease!important;
}
.content textarea{padding-top:14px!important}
.content input:hover,.content select:hover,.content textarea:hover{border-color:#c3cfdf!important}
.content input:focus,.content select:focus,.content textarea:focus{border-color:var(--cv-primary)!important;box-shadow:0 0 0 4px rgba(49,88,201,.10)!important}
.content .card .btn{min-height:46px!important;padding:10px 18px!important;border-radius:12px!important;background:linear-gradient(135deg,var(--cv-primary),var(--cv-primary-2))!important;box-shadow:0 8px 18px rgba(49,88,201,.16)}

/* Tables */
.table-wrap{border:1px solid #e5eaf1!important;border-radius:15px!important;overflow:auto!important;background:#fff}
.table-wrap table{margin:0!important}
.table-wrap th{background:#f7f9fc!important;color:#607087!important;font-size:11px!important;letter-spacing:.08em;text-transform:uppercase;padding:15px 18px!important}
.table-wrap td{padding:16px 18px!important;border-color:#edf1f5!important;color:#334155}
.table-wrap tr:last-child td{border-bottom:0!important}
.status-pill{padding:6px 11px!important;background:var(--cv-primary-soft)!important;color:var(--cv-primary)!important;border:1px solid #dbe5ff}

/* Notes */
.notes-card h3{margin:28px 0 12px!important;font-size:15px!important;color:#536174!important;text-transform:uppercase;letter-spacing:.08em}
.notes-list{max-height:480px;overflow:auto;padding-right:4px}
.note-item{padding:16px!important;border-color:#e8edf4!important;background:var(--cv-surface-soft)!important;border-radius:15px!important}
.note-icon,.message-channel{background:var(--cv-primary-soft)!important;color:var(--cv-primary)!important}
.note-content strong{color:var(--cv-ink)}
.note-content small{display:block;margin-top:8px}

/* Sequence */
.sequence-card,.shared-files-card{padding:28px!important}
.section-heading{align-items:flex-start!important;margin-bottom:24px!important}
.section-heading h2{margin-bottom:7px!important}
.section-heading h2:after{display:none!important}
.section-heading .muted{font-size:14px!important;line-height:1.5!important}
.section-icon{width:52px!important;height:52px!important;border-radius:16px!important;background:var(--cv-primary-soft)!important;color:var(--cv-primary)!important}
.sequence-active{align-items:flex-start!important;padding:18px!important;background:linear-gradient(135deg,#effcf5,#f7fffb)!important;border-color:#bdebd2!important;border-radius:15px!important}
.sequence-active i{color:var(--cv-green);font-size:20px;margin-top:2px}
.sequence-active p{margin:0!important;line-height:1.65}
.sequence-actions{padding:8px!important;background:#f7f9fc!important;border:1px solid #e8edf4!important;border-radius:15px!important}
.sequence-actions select{border:0!important;background:transparent!important;box-shadow:none!important}

/* Empty states */
.empty-state{background:linear-gradient(135deg,#fafcff,#f6f8fc)!important;border-color:#dce3ed!important;border-radius:16px!important}
.empty-state i{color:var(--cv-primary)!important;background:var(--cv-primary-soft);width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:22px!important}
.compact-empty{padding:20px!important}

/* Shared files */
.file-upload-form{padding:10px!important;border:1px solid #e6ebf2!important;background:#f8fafc!important;border-radius:16px!important}
.file-input-wrap{background:#fff!important;border-color:#ccd7e5!important;border-radius:12px!important}
.shared-file-item{padding:17px!important;border-color:#e5ebf2!important;background:#fff!important;border-radius:16px!important;transition:box-shadow .18s ease,transform .18s ease}
.shared-file-item:hover{transform:translateY(-2px);box-shadow:var(--cv-shadow-lg)}
.file-icon{background:#fff4e8!important;color:#d97706!important}
.file-info strong{color:var(--cv-ink);font-size:15px}
.file-info>.muted{display:block;margin:4px 0 0}
.share-link-wrap input{background:#f7f9fc!important;border-color:#e1e7ef!important;border-radius:10px!important}
.copy-share-link{border-color:#d8e0ea!important;border-radius:10px!important;background:#fff!important}
.copy-share-link:hover{background:var(--cv-primary-soft)!important}

/* Message logs and activity timeline */
.message-item{padding:18px 0!important}
.message-channel{width:42px!important;height:42px!important;border-radius:13px!important}
.message-header strong,.activity-header strong{color:var(--cv-ink)!important}
.message-header .muted,.activity-header .muted{font-size:12px!important;white-space:nowrap}
.message-text{color:#445267!important}
.activity-timeline{padding:4px 0 0}
.activity-grid .activity-item{padding-bottom:25px!important}
.activity-dot{width:12px!important;height:12px!important;margin-top:5px!important;background:var(--cv-primary)!important;box-shadow:0 0 0 6px var(--cv-primary-soft)!important}
.activity-grid .activity-item:not(:last-child) .activity-dot:after{left:5px!important;top:16px!important;background:#dbe4f0!important}

/* Responsive finishing */
@media(max-width:1050px){
  .lead-view-header{padding:28px!important}
  .lead-view-header .lead-actions{width:auto!important}
}
@media(max-width:768px){
  .lead-view-header{padding:24px 20px!important;border-radius:20px!important}
  .lead-view-header h1{font-size:34px!important;margin-top:14px!important}
  .lead-meta{display:grid!important;grid-template-columns:1fr!important;gap:4px!important}
  /* Relay fix (caught from a user-reported screenshot): these four .lead-actions rules in
     this "contact view responsive finishing" section were unscoped, so they also matched
     dashboard.php's identically-named-but-unrelated .lead-actions (the Call/WhatsApp text
     buttons on each lead-row-card) — squeezing "WhatsApp" into a 46px column sized for
     contact_view.php's icon-only buttons, not a text label. Scoping to ".lead-view-header
     .lead-actions" (its real container, only present on contact_view.php) fixes the leak
     without changing contact_view.php's own layout at all. */
  .lead-view-header .lead-actions{width:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) repeat(3,52px)!important}
  .lead-actions .action-btn{width:100%!important}
  .primary-action{padding:0 14px!important}
  .lead-stats.grid{gap:12px!important}
  .lead-stats .card{min-height:148px!important;padding:19px!important;border-radius:17px!important}
  .lead-stats .metric{font-size:42px!important}
  .management-grid>.card,.details-grid>.card,.activity-grid>.card,.sequence-card,.shared-files-card{padding:21px!important;border-radius:17px!important}
  .sequence-actions,.file-upload-form{padding:8px!important}
}
@media(max-width:520px){
  .lead-view-header .lead-actions{grid-template-columns:minmax(0,1fr) 46px 46px 46px!important;gap:7px!important}
  .action-btn,.icon-only{height:46px!important;min-height:46px!important;width:46px!important;min-width:46px!important;border-radius:13px!important}
  .primary-action{width:auto!important;font-size:14px!important}
  .lead-stats.grid{grid-template-columns:1fr!important}
  .lead-stats .card{min-height:128px!important}
  .section-heading{gap:14px!important}
  .section-icon{width:46px!important;height:46px!important;border-radius:14px!important}
  .file-upload-form,.sequence-actions{gap:8px!important}
}




/* =====================================================
   DESKTOP SCALE FIX
   100% browser zoom should feel close to old 80% view
===================================================== */

@media (min-width: 1024px) {

    /* ===== MAIN SCALE ===== */

    :root {
        --sidebar-w: 250px;
    }


    /* ===== SIDEBAR ===== */

    .sidebar {
        padding: 16px 12px;
    }

    .sidebar-brand {
        gap: 10px;
        margin-bottom: 22px;
    }

    .sidebar-brand h1 {
        font-size: 16px;
    }

    .sidebar-brand small {
        font-size: 11px;
    }

    .nav a,
    .logout-link {
        padding: 7px 9px;
        font-size: 13px;
    }


    /* ===== TOP HEADER ===== */

    .topbar,
    header {
        min-height: 70px;
    }


    /* ===== PAGE CONTENT ===== */

    .main,
    main,
    .content,
    .page-content {
        padding: 18px 22px;
    }


    /* ===== MAIN LEAD HEADER ===== */

    .lead-view-header {
        padding: 18px 22px;
        gap: 18px;
        margin-bottom: 14px;
    }

    .lead-view-header h1 {
        font-size: 36px !important;
        margin: 10px 0 6px;
    }

    .lead-eyebrow {
        font-size: 11px;
    }

    .lead-avatar {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        font-size: 14px;
    }

    .lead-meta {
        font-size: 13px;
        gap: 6px 14px;
    }

    .lead-status-row {
        margin-top: 10px;
    }


    /* ===== ACTION BUTTONS ===== */

    .action-btn {
        min-height: 40px;
        min-width: 40px;
        padding: 0 13px;
        font-size: 13px;
        border-radius: 10px;
    }

    .icon-only {
        width: 40px;
    }


    /* ===== STAT CARDS ===== */

    .lead-stats.grid {
        gap: 12px !important;
        margin-bottom: 14px !important;
    }

    .lead-stats .card {
        min-height: 125px;
        padding: 16px 18px;
        border-radius: 16px;
    }

    .lead-stats .muted {
        font-size: 11px;
    }

    .lead-stats strong {
        margin-top: 10px;
        font-size: 22px;
    }

    .metric {
        margin-top: 8px;
        font-size: 30px !important;
    }

    .help-text {
        margin-top: 8px !important;
        font-size: 12px;
    }


    /* ===== ALL OTHER CARDS ===== */

    .management-grid,
    .details-grid,
    .activity-grid,
    .form-grid {
        gap: 14px !important;
    }

    .management-grid > .card,
    .details-grid > .card,
    .activity-grid > .card,
    .card[style*="margin-top:20px"] {
        padding: 18px !important;
    }

    .card h2 {
        font-size: 21px;
        margin-bottom: 15px;
    }

    .card h3 {
        font-size: 17px;
    }


    /* ===== FORMS ===== */

    input,
    select {
        min-height: 40px !important;
    }

    textarea {
        padding: 10px !important;
    }

    .card .btn {
        min-height: 40px;
        padding: 0 14px;
        font-size: 13px;
    }


    /* ===== TABLES ===== */

    th {
        padding: 10px 12px !important;
        font-size: 10px !important;
    }

    td {
        padding: 11px 12px !important;
        font-size: 12px;
    }

    .followup-table-scroll{
    max-height: 270px;
    overflow-y: auto;
}
}

/* ---------- Inbox (WhatsApp conversations, v1.12) ---------- */
.inbox-shell{display:grid;grid-template-columns:340px 1fr;gap:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;height:calc(100vh - 230px);min-height:480px}
.inbox-list-pane{border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.inbox-list-controls{padding:14px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.inbox-list-controls input[type="search"]{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-size:14px;box-sizing:border-box}
.inbox-filter-tabs{display:flex;gap:6px}
.inbox-filter-btn{flex:1;padding:6px 10px;border:1px solid var(--border);background:#fff;border-radius:100px;font-size:12px;font-weight:700;cursor:pointer;color:var(--muted)}
.inbox-filter-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.inbox-conversations{flex:1;overflow-y:auto;min-height:0}
.inbox-empty-hint{padding:24px;text-align:center;font-size:13px}
.inbox-conv-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;position:relative}
.inbox-conv-row:hover{background:#f8fafc}
.inbox-conv-row.active{background:var(--soft)}
.inbox-conv-row.unread .inbox-conv-top strong{font-weight:800}
.inbox-avatar{width:38px;height:38px;border-radius:100px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto}
.inbox-conv-main{flex:1;min-width:0}
.inbox-conv-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.inbox-conv-top strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.inbox-conv-top small{color:var(--muted);font-size:11px;flex:0 0 auto}
.inbox-conv-snippet{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-unread-dot{background:var(--blue);color:#fff;border-radius:100px;min-width:20px;height:20px;padding:0 6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:0 0 auto}

.inbox-thread-pane{display:flex;flex-direction:column;min-height:0}
.inbox-empty-state{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center}
.inbox-start-prompt{flex-direction:column;gap:6px}
.inbox-start-prompt .btn{margin-top:10px}
.inbox-thread-header{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.inbox-back-btn{display:none}
.inbox-thread-who{flex:1;min-width:0;display:flex;flex-direction:column}
.inbox-thread-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inbox-messages{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:#f8fafc}
.inbox-bubble-row{display:flex}
.inbox-bubble-row.inbox-bubble-in{justify-content:flex-start}
.inbox-bubble-row.inbox-bubble-out{justify-content:flex-end}
.inbox-bubble{max-width:70%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.45}
.inbox-bubble-in .inbox-bubble{background:#fff;border:1px solid var(--border);border-bottom-left-radius:4px}
.inbox-bubble-out .inbox-bubble{background:var(--soft);border-bottom-right-radius:4px}
.inbox-bubble.inbox-bubble-failed{background:#fef2f2;border:1px solid #fecaca}
.inbox-bubble-body{white-space:pre-wrap;overflow-wrap:anywhere}
.inbox-bubble-meta{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
.inbox-bubble-meta small{color:var(--muted);font-size:11px}
.inbox-tag-sm{font-size:10px;padding:2px 8px;display:inline-block}

.inbox-composer{display:flex;gap:10px;align-items:flex-end;padding:14px 18px;border-top:1px solid var(--border);background:#fff}
.inbox-composer textarea{flex:1;resize:none;border:1px solid var(--border);border-radius:12px;padding:10px 12px;font-size:14px;font-family:inherit;min-height:44px;max-height:120px;box-sizing:border-box}
.inbox-composer-closed{display:flex;flex-direction:column;gap:8px;width:100%}
.inbox-composer-closed select{padding:10px 12px;border:1px solid var(--border);border-radius:10px}

@media(max-width:900px){
  .inbox-shell{grid-template-columns:1fr;height:calc(100dvh - var(--topbar-h-mobile) - var(--safe-top) - var(--tabbar-h) - var(--safe-bottom) - 150px);border-radius:var(--radius-sm)}
  .inbox-list-pane{border-right:0}
  /* Relay fix: mobile opens a conversation as a full-screen overlay (position:fixed;
     inset:0), same as every real messaging app — .inbox-shell's own height calc above
     only matters for the LIST state; inset:0 makes the open thread genuinely full-
     viewport regardless of it. padding-top:var(--safe-top) keeps its own header clear
     of the status bar the way header.php's real topbar already does; the composer's
     padding-bottom:var(--safe-bottom) is the brief's explicit requirement — the
     composer must sit above the Android system nav bar. */
  .inbox-thread-pane{display:none}
  .inbox-shell.thread-open .inbox-list-pane{display:none}
  /* Relay fix: this overlay only padded for the device notch (--safe-top), not the
     app's own persistent 56px topbar — the topbar sits above it in actual stacking
     order regardless of this pane's z-index:500, so the header's top content (the
     back button especially) was rendering hidden underneath it. Only visible before
     because the header's own wrapping bug (see .inbox-thread-who below) happened to
     push enough content down to clear the topbar by accident. */
  .inbox-shell.thread-open .inbox-thread-pane{display:flex;position:fixed;inset:0;z-index:500;background:#fff;padding-top:calc(var(--topbar-h-mobile) + var(--safe-top))}
  .inbox-back-btn{display:inline-flex}
  .inbox-composer{padding-bottom:calc(14px + var(--safe-bottom))}
  .inbox-bubble{max-width:85%}
  /* Relay fix: .inbox-thread-actions (session-status tag + Take Over button) has no
     flex-shrink guard, so on a narrow viewport it kept its full natural width and
     squeezed .inbox-thread-who's flex:1 down to ~90px — just wide enough for the
     contact's name to survive but not the phone/source/stage subtitle line under it,
     which wrapped across 3+ lines and ballooned the header to 150px tall. Give the name
     row its own full-width line and push the status/action pills to a second line below
     it, instead of fighting them for horizontal space. */
  .inbox-thread-who{flex-basis:100%;order:2}
  .inbox-thread-actions{flex-basis:100%;order:3;justify-content:flex-start;margin-top:2px}
}

/* ============================================================================
   Mobile text-size ceiling — deliberate, last-in-file exception to the "one 900px
   block" rule (same kind of exception as the --cv-* token block earlier, and for the
   same reason: :root/plain-class selectors can't be out-specificity'd, so the only way
   to reliably beat a scattered set of oversized !important declarations spread across
   several of this file's non-mobile-scoped "CONTACT VIEW" sections — .lead-view-header
   h1 at 34px!important, .lead-stats .metric at 52px!important, .content .card h2 via a
   clamp(24px,2vw,32px)!important, .page-head h1 leaking to 24px from a stray 768px
   block, etc. — is to be textually last, every time, in one place, rather than chase
   each one individually. User-requested: cap "big" text to a 14-18px mobile range.
   Icon glyph sizes (.section-icon, .file-icon and similar) are deliberately left alone
   — this is about readable text, not icon/symbol sizing. */
@media(max-width:900px){
  h1,.page-head h1,.lead-view-header h1,.auth-brand h1{font-size:18px!important;line-height:1.25!important}
  h2,.card h2,.content .card h2{font-size:17px!important;line-height:1.3!important}
  h3,.lead-main strong{font-size:16px!important;line-height:1.3!important}
  .metric,.lead-stats .metric,.price,.preview-metric strong{font-size:18px!important;line-height:1.15!important}
  .lead-stats strong{font-size:15px!important;margin-top:8px!important}
}