/* ===== HNC Design Tokens — brand palette (3BB8E3 / 59C7E2 / 79D3E1 / A5E6E9 / F2E19B) ===== */
:root{
  --brand-500:#3BB8E3; --brand-400:#59C7E2; --brand-300:#79D3E1;
  --brand-200:#A5E6E9; --brand-50:#EAF7FB;
  --brand-600:#1F9EC6; --brand-700:#16758F;
  --accent-gold:#F2E19B; --accent-gold-ink:#7A5A00;
  --bg:#FFFFFF; --bg-soft:#F7FBFC;
  --bg-wash: radial-gradient(1100px 520px at 8% -10%, #EAF7FB 0%, transparent 55%),
             radial-gradient(900px 480px at 110% 0%, #F4FBFD 0%, transparent 60%), #FFFFFF;
  --panel:#FFFFFF; --panel-muted:#F7FBFC; --panel-glass:rgba(255,255,255,.72);
  --border:#E3EEF2; --border-strong:#CFE3EA; --border-focus:#79D3E1;
  --text:#0F1C24; --text-muted:#5B7683; --text-subtle:#8AA3AE; --text-on-brand:#FFFFFF;
  --ok:#2FB88A; --ok-bg:#E7F7F1;
  --warn:#D9A520; --warn-bg:#FBF2D8;
  --danger:#E16B6B; --danger-bg:#FCE9E9;
  --info:#3BB8E3; --info-bg:#EAF7FB;
  --radius-sm:8px; --radius:12px; --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(15,42,53,.04), 0 1px 1px rgba(15,42,53,.03);
  --shadow:0 8px 24px -10px rgba(31,158,198,.18), 0 2px 6px rgba(15,42,53,.05);
  --shadow-lg:0 20px 40px -18px rgba(31,158,198,.25), 0 6px 14px rgba(15,42,53,.06);
  --glow:0 0 0 1px rgba(59,184,227,.35), 0 0 22px rgba(59,184,227,.25);
  --ring:0 0 0 3px rgba(121,211,225,.45);
  --blur:saturate(140%) blur(14px);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg-wash);color:var(--text);font-size:13.5px;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;}

/* iOS PWA safe-area handling — when running as installed app on iPhone, the
 * topbar must clear the status bar / Dynamic Island. The standalone media
 * query targets only installed PWAs so the regular browser experience is
 * unaffected. env(safe-area-inset-*) was set up via viewport-fit=cover. */
@media all and (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }
}
@supports (-webkit-touch-callout: none) {
  /* Older iOS Safari fallback */
  body.standalone-ios { padding-top: env(safe-area-inset-top); }
}

/* Mobile sidebar must respect safe areas too. Without this, on iPhone the
 * top of the sidebar (header + first nav items) is hidden under the notch,
 * the bottom items are hidden under the home indicator, and touch scrolling
 * inside the sidebar feels broken because users can't see the items they're
 * supposed to scroll to. position:fixed ignores body padding so we apply
 * inset padding directly. -webkit-overflow-scrolling:touch ensures smooth
 * momentum scrolling on iOS Safari. */
@media all and (display-mode: standalone) and (max-width:900px){
  .sidebar {
    padding-top: calc(env(safe-area-inset-top) + 8px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}
.crm{display:flex;height:100vh;overflow:hidden;}
.sidebar{width:220px;background:var(--panel-glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;}
.sidebar-logo{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.sidebar-logo-img{height:32px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(59,184,227,.22));flex-shrink:0;}
.sidebar-logo-text{min-width:0;}
.sidebar-logo .name{font-size:13px;font-weight:600;color:var(--text);letter-spacing:-.005em;line-height:1.2;}
.sidebar-logo .sub{font-size:10.5px;color:var(--text-muted);margin-top:1px;}
.quo-status{font-size:10px;color:var(--text-subtle);margin-top:4px;}
.nav-section{padding:14px 16px 4px;font-size:10px;font-weight:600;color:var(--text-subtle);text-transform:uppercase;letter-spacing:.12em;}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:2px 8px;border-radius:10px;font-size:13px;color:var(--text-muted);cursor:pointer;border-left:none;transition:background .15s ease,color .15s ease,box-shadow .2s ease;}
.nav-item:hover{background:var(--brand-50);color:var(--text);}
.nav-item.active{background:linear-gradient(135deg,rgba(59,184,227,.18),rgba(165,230,233,.25));color:var(--brand-700);font-weight:600;box-shadow:inset 0 0 0 1px rgba(59,184,227,.3),0 4px 14px -6px rgba(59,184,227,.35);}
.nav-icon{width:15px;height:15px;flex-shrink:0;opacity:.75;}
.nav-item.active .nav-icon{opacity:1;}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.topbar{padding:12px 22px;background:var(--panel-glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0;z-index:100;}
/* Notification panel: desktop anchors to the bell (top-right), mobile becomes
   a viewport-fixed sheet that can't be clipped off either edge. */
.hnc-notif-panel{position:absolute;top:38px;right:0;width:340px;max-height:440px;flex-direction:column;}
@media (max-width:600px){
  .hnc-notif-panel{position:fixed;top:60px;left:8px;right:8px;width:auto;max-height:calc(100vh - 80px);max-width:none;}
}
.topbar h1{font-size:15px;font-weight:650;color:var(--text);letter-spacing:-.01em;}
.topbar-actions{display:flex;gap:8px;}
.btn{font-size:12.5px;padding:7px 13px;border-radius:10px;border:1px solid var(--border-strong);background:var(--panel);color:var(--text);cursor:pointer;font-family:inherit;box-shadow:var(--shadow-sm);transition:transform .08s ease,box-shadow .2s ease,background .15s ease,border-color .15s ease;}
.btn:hover{background:var(--brand-50);border-color:var(--brand-300);}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:none;box-shadow:var(--ring);}
.btn-primary{background:linear-gradient(135deg,var(--brand-500),var(--brand-400));color:var(--text-on-brand);border:1px solid transparent;box-shadow:0 6px 18px -6px rgba(59,184,227,.55),inset 0 1px 0 rgba(255,255,255,.3);}
.btn-primary:hover{filter:brightness(1.04);box-shadow:0 8px 24px -4px rgba(59,184,227,.7),inset 0 1px 0 rgba(255,255,255,.3);animation:hnc-pulse-glow 1.6s ease-in-out infinite;}
/* Opt-in glow class for any non-.btn button. Add class="hnc-glow" to enable. */
.hnc-glow{transition:box-shadow .25s ease, transform .15s ease, filter .15s ease;}
.hnc-glow:hover{filter:brightness(1.06);box-shadow:0 0 0 4px rgba(59,184,227,.18), 0 6px 22px -6px rgba(59,184,227,.6);animation:hnc-pulse-glow 1.6s ease-in-out infinite;}
.hnc-glow:active{transform:translateY(1px) scale(.98);}
@keyframes hnc-pulse-glow{
  0%, 100% { box-shadow:0 6px 18px -6px rgba(59,184,227,.55), inset 0 1px 0 rgba(255,255,255,.3); }
  50%      { box-shadow:0 10px 30px -4px rgba(59,184,227,.85), inset 0 1px 0 rgba(255,255,255,.3); }
}
/* Universal button feedback — every <button> in the app gets a gentle lift
   and soft glow on hover. Scoped via :not() to opt out tabs (which have
   their own active/inactive states) and close-X buttons. The .btn-primary
   rule above wins over this for the heavier pulse on primary actions. */
button:not(.btn):not(.btn-primary):not(.template-tab):not(.stab):not(.chat-tab):not(.pay-tab):not(.auto-tab):not(.ctab-btn):not(.close-btn):not([disabled]) {
  transition: transform .12s ease, box-shadow .2s ease, filter .15s ease;
}
button:not(.btn):not(.btn-primary):not(.template-tab):not(.stab):not(.chat-tab):not(.pay-tab):not(.auto-tab):not(.ctab-btn):not(.close-btn):not([disabled]):hover {
  filter: brightness(1.05);
  box-shadow: 0 0 0 3px rgba(59,184,227,.12), 0 4px 14px -4px rgba(59,184,227,.4);
  transform: translateY(-1px);
}
button:not(.btn):not(.btn-primary):not(.template-tab):not(.stab):not(.chat-tab):not(.pay-tab):not(.auto-tab):not(.ctab-btn):not(.close-btn):not([disabled]):active {
  transform: translateY(0) scale(.98);
}
@media (prefers-reduced-motion: reduce){
  .btn-primary:hover, .hnc-glow:hover{animation:none;}
  button:hover { transform:none !important; box-shadow:none !important; }
}
/* Wave-splash ripple effect on every button click. JS injects a span at
   the click coordinates inside the button; CSS animates it expanding +
   fading. Pointer-events:none so the ripple doesn't swallow subsequent
   clicks. Buttons that wouldn't have position:relative get one assigned
   inline by the JS handler (we don't override it for buttons that already
   have positioning). */
@keyframes hnc-ripple {
  0%   { transform: scale(0); opacity: .9; }
  100% { transform: scale(3.5); opacity: 0; }
}
.hnc-ripple-ink {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(59,184,227,.85) 0%, rgba(59,184,227,.55) 40%, rgba(59,184,227,.15) 70%, rgba(59,184,227,0) 100%);
  transform: scale(0);
  animation: hnc-ripple .85s cubic-bezier(.4, 0, .2, 1) forwards;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce){
  .hnc-ripple-ink { display: none; }
}
/* Hot-lead pulse — applied to attention cards in the highest-urgency tier
   (lead replied recently). A soft red breathe to convey "this is alive".
   Subtle on purpose — no flashing, just a slow fade. */
@keyframes hnc-hot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.0), 0 1px 3px rgba(0,0,0,.06); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.10), 0 4px 14px rgba(220, 38, 38, .12); }
}
.hnc-hot-card {
  animation: hnc-hot-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hnc-hot-card{animation:none;}
}
/* Hot pipeline card — orange-tinted, flame badge top-right, gentle pulse.
   Applied in renderLeadsPipeline when _isLeadHot(lead) returns true.
   Visible on the actual deal-card on the pipeline board, distinct from
   the .hnc-hot-card used in the attention panel rows. */
@keyframes hnc-deal-flame-pulse {
  0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 0 0 0 rgba(251, 146, 60, 0); }
  50%      { box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 0 0 5px rgba(251, 146, 60, .18), 0 4px 14px rgba(251, 146, 60, .25); }
}
@keyframes hnc-flame-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); filter: drop-shadow(0 0 4px rgba(251, 146, 60, .5)); }
  50%      { transform: scale(1.08) rotate(3deg); filter: drop-shadow(0 0 8px rgba(251, 146, 60, .8)); }
}
.deal-card-hot {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
  border-color: #fb923c !important;
  border-left: 3px solid #f97316 !important;
  animation: hnc-deal-flame-pulse 2.2s ease-in-out infinite;
}
.deal-card-hot .deal-name {
  color: #9a3412;
  font-weight: 700;
}
.deal-flame {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 16px;
  pointer-events: none;
  animation: hnc-flame-flicker 1.4s ease-in-out infinite;
  z-index: 2;
}
/* Cold lead — frozen blue, no pulse (the opposite of hot: gone quiet). A lead
   with no response for a while. Hot always wins if both could apply. */
.deal-card-cold {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border-color: #7dd3fc !important;
  border-left: 3px solid #38bdf8 !important;
}
.deal-card-cold .deal-name {
  color: #075985;
}
.deal-frost {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 14px;
  pointer-events: none;
  opacity: .85;
  z-index: 2;
}
/* Last-updated indicator on each deal card. Sits at top-right at z-index:1
   so the flame (z-index:2) and bulk-check (z-index:3) take precedence when
   present. Title attribute carries the full ISO datetime for a precise
   tooltip; visible text is the short "Xm ago" form from _humanAgo. */
.deal-updated {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
}
/* Inline comment area on each deal card (2026-05-20). Sits below the
   price as a clickable strip. When the lead has a comment, shows a
   speech-bubble icon + truncated preview. When empty, shows a faded
   "+ Add comment" placeholder. Click opens the comment modal without
   descending into the lead profile. */
.deal-comment {
  margin-top: 6px;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-muted);
  background: #f8fafc;
  border: 1px dashed transparent;
  border-radius: 6px;
  cursor: text;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.deal-comment:hover { border-color: var(--brand-500); background: #eaf7fb; }
.deal-comment .dc-icon { font-size: 11px; flex-shrink: 0; }
.deal-comment .dc-text {
  font-style: italic;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.deal-comment-empty .dc-add { color: #cbd5e0; font-style: italic; }
.deal-comment-empty:hover .dc-add { color: var(--brand-500); }
@media (prefers-reduced-motion: reduce){
  .deal-card-hot{animation:none;}
  .deal-flame{animation:none;}
}
/* Magic-dust shimmer — applied to AI-drafted message previews on first render
   to signal "this was AI-generated". Plays once for ~1.4s then the element
   stays static. Implemented as a moving gradient highlight, no library. */
@keyframes hnc-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.hnc-shimmer {
  background-image: linear-gradient(110deg, transparent 35%, rgba(139, 92, 246, 0.15) 50%, transparent 65%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: hnc-shimmer 1.4s ease-out 1;
}
@media (prefers-reduced-motion: reduce){
  .hnc-shimmer{animation:none;background:none;}
}
@keyframes hnc-flash-fade {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}
.content{flex:1;overflow-y:auto;padding:20px;}
.vc{display:none;}.vc.active{display:block;}
/* view-settings and view-agent live OUTSIDE .content (direct children of
   .main, which is overflow:hidden). Without their own scroll container their
   content gets clipped once it exceeds the viewport and can't be scrolled.
   Give just these two the same scroll behavior .content provides. Scoped by id
   so the .content-wrapped views are unaffected. (2026-05-28) */
/* view-settings and view-agent live OUTSIDE .content (direct children of
   .main). .content is always flex:1 — even when empty (its child views all
   hidden while settings/agent show). So giving these two flex:1 made TWO
   flex:1 siblings split the height 50/50 — the empty .content ate half the
   screen. Correct fix: when .content holds no active view (i.e. settings/agent
   is showing), collapse it to zero so the active out-of-content view fills
   .main and scrolls. Verified live before deploy. (2026-05-28) */
.content:not(:has(> .vc.active)){flex:0 0 0;padding:0;overflow:hidden;}
#view-settings.vc.active{flex:1;min-height:0;overflow-y:auto;padding:20px;}
/* ── Floating AI chatbot (2026-05-28) ─────────────────────────────────────
   The agent is no longer a full-page view reached from the sidebar; it's a
   panel that floats in the bottom-right corner over ANY view (calendar, etc).
   #view-agent keeps all its inner IDs/content so the agent JS + booking plan
   card flow are untouched — only its positioning changes. It's hidden by
   default and shown when it has .chatbot-open. The panel owns its own scroll,
   so the old .content/.main scroll constraints don't apply to it. */
#view-agent{position:fixed;bottom:90px;right:24px;width:400px;max-width:calc(100vw - 32px);height:600px;max-height:calc(100vh - 120px);background:var(--panel,#fff);border:1px solid var(--border,#e0e7ee);border-radius:16px;box-shadow:0 12px 48px rgba(0,0,0,.22);z-index:1200;display:none;flex-direction:column;overflow:hidden;padding:0;}
#view-agent.chatbot-open{display:flex;}
#chatbot-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border,#e0e7ee);background:#faf7ff;border-radius:16px 16px 0 0;flex-shrink:0;}
#chatbot-head .cb-title{font-size:14px;font-weight:700;color:#553c9a;display:flex;align-items:center;gap:8px;}
#chatbot-head .cb-close{background:none;border:none;font-size:18px;cursor:pointer;color:var(--text-muted);line-height:1;padding:4px;border-radius:6px;}
#chatbot-head .cb-close:hover{background:rgba(0,0,0,.06);}
#view-agent .chatbot-body{flex:1;min-height:0;overflow-y:auto;padding:16px;}
/* Floating launcher button — visible on every view */
#chatbot-launcher{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#7c5cce,#553c9a);color:#fff;border:none;cursor:pointer;box-shadow:0 6px 20px rgba(85,60,154,.4);z-index:1201;display:flex;align-items:center;justify-content:center;font-size:24px;transition:transform .15s,box-shadow .15s;}
#chatbot-launcher:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(85,60,154,.5);}
#chatbot-launcher.hidden{display:none;}
@media (max-width:900px){ #view-agent{bottom:0;right:0;left:0;width:100%;max-width:100%;height:80vh;max-height:80vh;border-radius:16px 16px 0 0;} #chatbot-launcher{bottom:16px;right:16px;} }
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:18px;}
.metric{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px 14px;}
.metric-label{font-size:11px;color:var(--text-muted);margin-bottom:4px;}
.metric-value{font-size:22px;font-weight:600;color:var(--text);}
.metric-sub{font-size:11px;color:var(--text-muted);margin-top:2px;}
.up{color:var(--brand-500);}.down{color:#e53e3e;}
.section-title{font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em;}
.tw{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:16px;}
table{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed;}
th{font-size:11px;font-weight:600;color:var(--text-muted);padding:8px 12px;text-align:left;border-bottom:1px solid var(--border);background:var(--bg-soft);}
td{padding:9px 12px;color:var(--text);border-bottom:1px solid var(--border);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr.clickable:hover td{background:var(--brand-50);cursor:pointer;}
.badge{display:inline-block;font-size:10px;padding:2px 7px;border-radius:20px;font-weight:500;}
.bc{background:#ebf5ff;color:#2b6cb0;}.br{background:var(--brand-50);color:#276749;}.bg2{background:#fffbeb;color:#b7791f;}.bh{background:#fff5f5;color:#c53030;}
.bac{background:var(--brand-50);color:#276749;}.bin{background:var(--bg-soft);color:var(--text-muted);border:1px solid var(--border);}
.bpd{background:var(--brand-50);color:#276749;}.bpn{background:#fffbeb;color:#b7791f;}.bpt{background:#ebf5ff;color:#2b6cb0;}
.task-list{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.ti{display:flex;align-items:flex-start;gap:8px;padding:9px 12px;border-bottom:1px solid var(--border);}
.ti:last-child{border-bottom:none;}
.tch{width:14px;height:14px;border-radius:3px;border:1.5px solid #ddd;margin-top:1px;flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.tch.done{background:var(--brand-500);border-color:var(--brand-500);}
.tch.done::after{content:'';display:block;width:7px;height:4px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) translateY(-1px);}
.tb{flex:1;min-width:0;}
.tt{font-size:12px;color:var(--text);}
.tt.dt{text-decoration:line-through;color:var(--text-subtle);}
.tm{font-size:11px;color:var(--text-muted);margin-top:2px;}
.pd{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:3px;}
.ph2{background:#e53e3e;}.pmm{background:#dd6b20;}
.sd{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;}
.sa{background:var(--brand-500);}.si{background:#ccc;}.sn{background:#3182ce;}
.two-col{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;}
.pipeline{display:grid;grid-template-columns:repeat(9,minmax(140px,1fr));gap:8px;margin-bottom:18px;overflow-x:auto;}
.pipe-col{background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;padding:10px;}
.pipe-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.pipe-label{font-size:11px;font-weight:600;color:var(--text-muted);}
.pipe-count{font-size:11px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:1px 7px;color:var(--text-muted);}
.deal-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:9px 11px;margin-bottom:6px;cursor:pointer;}
.deal-card:hover{border-color:var(--brand-500);box-shadow:0 1px 4px rgba(59,184,227,.15);}
/* Drag-and-drop visuals (2026-05-20). .dragging dims the source card so
   the user knows what's in flight. .drag-over highlights the target column
   while the card is hovered over it — uses the brand color so it matches
   the rest of the pipeline accents. */
.deal-card[draggable="true"]{cursor:grab;}
.deal-card.dragging{opacity:0.45;cursor:grabbing;}
.pipe-col.drag-over{background:#eaf7fb;border-color:var(--brand-500);box-shadow:inset 0 0 0 2px var(--brand-500);}
.deal-name{font-size:12px;font-weight:500;color:var(--text);margin-bottom:3px;padding-right:52px;}
.deal-type{font-size:11px;margin-bottom:4px;}
.deal-val{font-size:12px;color:var(--brand-500);font-weight:600;}
/* CALENDAR */
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cal-nav{display:flex;align-items:center;gap:10px;}
.cal-month{font-size:15px;font-weight:600;color:var(--text);min-width:120px;}
.cal-arrow{background:#fff;border:1px solid var(--border);border-radius:8px;width:28px;height:28px;cursor:pointer;color:var(--text-muted);font-size:16px;display:flex;align-items:center;justify-content:center;line-height:1;}
.cal-arrow:hover{background:var(--bg-soft);}
.legend{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted);}
.ld{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.lu{background:#FDE2E4;border:1px solid #F3B7BE;}
.la{background:var(--brand-50);border:1px solid var(--brand-300);}
.lc{background:var(--accent-gold);border:1px solid #D9C266;}
.lp{background:#E7F7F1;border:1px solid #9ED9BF;}
.cal-grid{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.cal-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--bg-soft);border-bottom:1px solid var(--border);}
.cal-dow-cell{font-size:11px;font-weight:600;color:var(--text-muted);text-align:center;padding:7px 0;}
.cal-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));}
.cal-view-btn{padding:5px 12px;font-size:12px;border:none;background:#fff;color:var(--text-muted);cursor:pointer;font-family:inherit;}
.cal-view-btn.active{background:var(--brand-500);color:#fff;}
.cal-view-btn:hover:not(.active){background:var(--bg-soft);}
.time-grid{display:grid;grid-template-columns:50px 1fr;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff;}
.time-label{font-size:10px;color:var(--text-muted);padding:0 8px;text-align:right;height:60px;display:flex;align-items:flex-start;padding-top:4px;border-right:1px solid var(--border);}
.time-slot{height:60px;border-bottom:1px solid var(--bg-soft);position:relative;}
.time-slot:hover{background:var(--bg-soft);}
.day-appt-block{position:absolute;left:4px;right:4px;border-radius:6px;padding:3px 7px;font-size:11px;font-weight:500;cursor:pointer;overflow:hidden;z-index:1;}
.week-col-header{text-align:center;padding:8px 4px;font-size:12px;font-weight:600;color:var(--text);border-right:1px solid var(--border);}
.week-col-header.today-col{color:var(--brand-500);}
.week-day-col{border-right:1px solid var(--border);position:relative;}
.more-appts{font-size:10px;color:var(--brand-500);padding:1px 4px;cursor:pointer;font-weight:500;}
.more-appts:hover{text-decoration:underline;}
.cal-day{min-height:80px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:5px;}
.cal-day:nth-child(7n){border-right:none;}
.cal-day.om .dn2{opacity:.3;}
.cal-day.today{background:var(--brand-50);}
.dn2{font-size:11px;color:var(--text-muted);margin-bottom:3px;font-weight:500;}
.cal-day.today .dn2{color:var(--brand-500);font-weight:700;}
.appt{font-size:10px;border-radius:4px;padding:2px 5px;margin-bottom:2px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;display:block;width:100%;text-align:left;border:none;}
.appt:hover{opacity:.8;}
.au{background:#FDE2E4;color:#8A2C3A;} /* Unassigned — soft coral */
.aa{background:var(--brand-50);color:var(--brand-700);} /* Assigned — brand cyan */
.ac{background:var(--accent-gold);color:var(--accent-gold-ink);} /* Completed — gold */
.ap{background:#E7F7F1;color:#1F7A5A;} /* Paid — soft emerald */
.ax{background:#EEF2F4;color:#8AA3AE;text-decoration:line-through;opacity:.6;border:1px dashed #CFE3EA;} /* Cancelled — greyed out */
.more-appts{font-size:10px;color:var(--text-muted);}
/* CLEANERS */
.cleaner-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px;}
.cleaner-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:13px;cursor:pointer;}
.cleaner-card:hover{border-color:var(--brand-500);box-shadow:0 2px 8px rgba(59,184,227,.15);}
.cleaner-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0;}
.cleaner-name{font-size:13px;font-weight:600;color:var(--text);}
.cleaner-role{font-size:11px;color:var(--text-muted);margin-top:1px;}
.cleaner-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.cs{background:var(--bg-soft);border-radius:8px;padding:6px 8px;}
.cs-label{font-size:10px;color:var(--text-muted);}
.cs-val{font-size:13px;font-weight:600;color:var(--text);margin-top:1px;}
.cleaner-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:9px;}
.cl-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--bg-soft);color:var(--text-muted);border:1px solid var(--border);}
.cl-chip.island{background:#eef6ff;color:#1d4ed8;border-color:#dbe8ff;}
.cl-dot{width:6px;height:6px;border-radius:50%;display:inline-block;}
.cl-dot.on{background:#22c55e;}
.cl-dot.off{background:#9ca3af;}
.cl-rates{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px;}
.cl-rate{background:var(--bg-soft);border-radius:7px;padding:5px 6px;text-align:center;}
.cl-rate-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);}
.cl-rate-val{font-size:12px;font-weight:700;color:var(--text);margin-top:1px;}
.cl-svcs{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px;}
.cl-svc{font-size:9px;font-weight:600;padding:1px 6px;border-radius:5px;background:#f3eefe;color:#6d28d9;}
.cl-filter{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;background:#fff;color:var(--text-muted);border:1px solid var(--border);cursor:pointer;user-select:none;}
.cl-filter:hover{border-color:var(--brand-500);}
.cl-filter.on{background:var(--brand-500);color:#fff;border-color:var(--brand-500);}
.cl-divider{display:flex;align-items:center;gap:10px;margin:18px 0 12px;color:var(--text-muted);font-size:12px;font-weight:600;}
.cl-divider::before,.cl-divider::after{content:"";flex:1;height:1px;background:var(--border);}
.pb{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:8px;}
.pf{height:100%;border-radius:2px;background:var(--brand-500);}
/* PAYROLL */
.ppbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.ppbar-label{font-size:13px;font-weight:600;color:var(--text);}
.pbtn{font-size:11px;padding:4px 10px;border-radius:8px;border:1px solid var(--border-strong);background:#fff;color:var(--text-muted);cursor:pointer;font-family:inherit;}
.pbtn.active{background:var(--brand-50);color:var(--brand-500);border-color:var(--brand-500);font-weight:500;}
.pp-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;background:linear-gradient(135deg, var(--brand-50) 0%, #FFFFFF 100%);border:1px solid var(--brand-300);border-radius:12px;flex-wrap:wrap;}
.pp-hero-left{display:flex;flex-direction:column;gap:2px;}
.pp-hero-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--brand-700);}
.pp-hero-range{font-size:20px;font-weight:700;color:var(--text);line-height:1.2;}
.pp-hero-payday{font-size:12px;color:var(--text-muted);margin-top:2px;}
.pp-hero-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pp-past-wrap{position:relative;}
.pp-past-btn{font-size:12px;background:#fff;border:1px solid var(--brand-300);color:var(--brand-700);padding:6px 12px;border-radius:8px;cursor:pointer;font-weight:500;}
.pp-past-btn:hover{background:var(--brand-50);}
.pp-past-menu{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid var(--border-strong);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:8px;min-width:260px;max-height:360px;overflow-y:auto;z-index:20;}
.pp-past-menu.hidden{display:none;}
.pp-past-month{margin-bottom:10px;}
.pp-past-month:last-child{margin-bottom:0;}
.pp-past-month-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);padding:4px 8px;}
.pp-past-item{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:7px 10px;border:none;background:transparent;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text);text-align:left;font-family:inherit;}
.pp-past-item:hover{background:var(--brand-50);}
.pp-past-item.active{background:var(--brand-50);color:var(--brand-700);font-weight:600;}
.pp-past-range{flex:1;}
.pp-past-tag{font-size:10px;font-weight:600;background:var(--brand-500);color:#fff;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:0.3px;}
/* Compact payroll table */
#view-payroll .tw{overflow-x:auto;}
#view-payroll .tw table{font-size:13px;min-width:1040px;}
#view-payroll .tw th{padding:10px 8px;font-size:11px;text-transform:uppercase;letter-spacing:0.3px;white-space:nowrap;}
#view-payroll .tw td{padding:10px 8px;vertical-align:middle;}
.pay-mark-btn{font-size:11px;padding:6px 10px;border-radius:6px;background:var(--brand-500);color:#fff;border:none;cursor:pointer;white-space:nowrap;font-weight:500;}
.pay-mark-btn:hover{background:var(--brand-600);}
.pay-undo-btn{font-size:11px;padding:6px 10px;border-radius:6px;background:#fff;color:var(--text-muted);border:1px solid var(--border-strong);cursor:pointer;white-space:nowrap;}
.pay-undo-btn:hover{background:#F7F7F7;}
.bonus-input-wrap{display:inline-flex;gap:4px;align-items:center;}
.bonus-input-wrap input{width:64px;padding:5px 8px;font-size:12px;border:1px solid var(--border);border-radius:6px;font-family:inherit;background:#fff;}
.bonus-input-wrap input:disabled{background:#F7F7F7;color:var(--text-muted);}
.bonus-input-wrap button{font-size:11px;padding:5px 9px;background:var(--brand-50);color:var(--brand-700);border:1px solid var(--brand-300);border-radius:6px;cursor:pointer;font-weight:500;font-family:inherit;}
.bonus-input-wrap button:hover{background:var(--brand-300);color:#fff;}
/* OVERLAY */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:flex-start;justify-content:flex-end;z-index:1000;}
.overlay.hidden{display:none;}
.panel{width:380px;height:100%;background:#fff;overflow-y:auto;box-shadow:-4px 0 24px rgba(0,0,0,.1);}
.panel-wide{width:480px;}
.panel-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;z-index:1;}
.panel-title{font-size:14px;font-weight:600;color:var(--text);}
.close-btn{background:#fff;border:1px solid var(--border);border-radius:8px;width:28px;height:28px;cursor:pointer;color:var(--text-muted);font-size:16px;display:flex;align-items:center;justify-content:center;}
.close-btn:hover{background:var(--bg-soft);}
.panel-body{padding:16px;}
.info-block{background:var(--bg-soft);border-radius:10px;padding:11px 13px;margin-bottom:12px;}
.info-row{display:flex;justify-content:space-between;align-items:flex-start;padding:5px 0;border-bottom:1px solid var(--border);}
.info-row:last-child{border-bottom:none;}
.info-label{font-size:11px;color:var(--text-muted);flex-shrink:0;width:130px;}
.info-val{font-size:12px;color:var(--text);text-align:right;font-weight:500;}
.panel-section{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin:14px 0 8px;}
.booking-section{margin:10px 0;border:1px solid var(--border);border-radius:12px;background:#fff;transition:border-color .15s,box-shadow .15s;}
.booking-section:first-of-type{margin-top:0;}
.booking-section[open]{border-color:var(--brand-300);box-shadow:0 1px 3px rgba(0,0,0,.04);}
.booking-section>summary{font-size:13px;font-weight:600;color:var(--text);cursor:pointer;list-style:none;padding:13px 16px;display:flex;align-items:center;gap:10px;user-select:none;transition:background .12s;border-radius:11px;}
.booking-section[open]>summary{border-radius:11px 11px 0 0;}
.booking-section>summary:hover{background:var(--bg-soft);}
.booking-section>summary::-webkit-details-marker{display:none;}
.booking-section>summary::before{content:"";display:inline-block;width:0;height:0;border-left:5px solid var(--text-muted);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s;flex-shrink:0;}
.booking-section[open]>summary::before{transform:rotate(90deg);border-left-color:var(--brand-500);}
.booking-section[open]>summary{color:var(--brand-700);border-bottom:1px solid var(--border);}
.booking-section-body{padding:14px 16px 16px;}
.booking-section.booking-quote{border-color:var(--brand-300);background:var(--brand-50);}
.booking-section.booking-quote>summary{cursor:default;background:var(--brand-50);color:var(--brand-700);}
.booking-section.booking-quote>summary:hover{background:var(--brand-50);}
.booking-section.booking-quote>summary::before{transform:rotate(90deg);border-left-color:var(--brand-500);}
.booking-section.booking-quote .booking-section-body{background:#fff;}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:4px;}
.action-btn{font-size:12px;padding:9px 10px;border-radius:8px;border:1px solid var(--border-strong);background:#fff;color:var(--text);cursor:pointer;font-family:inherit;text-align:center;}
.action-btn:hover{background:var(--bg-soft);}
.action-btn.green{background:var(--brand-50);color:#276749;border-color:#9ae6b4;}
.action-btn.blue{background:#ebf5ff;color:#2b6cb0;border-color:#bee3f8;}
.action-btn.amber{background:#fffbeb;color:#b7791f;border-color:#f6e05e;}
.action-btn.red{background:var(--danger-bg);color:var(--danger);border-color:#F3B7BE;}
.action-btn.purple{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-300);}
.action-btn.full{grid-column:1/-1;}
.status-badge{display:inline-block;font-size:11px;padding:3px 10px;border-radius:20px;font-weight:500;margin-bottom:12px;}
.s-unassigned{background:#FDE2E4;color:#8A2C3A;}
.s-assigned{background:var(--brand-50);color:var(--brand-700);}
.s-completed{background:var(--accent-gold);color:var(--accent-gold-ink);}
.s-paid{background:#E7F7F1;color:#1F7A5A;}
.s-cancelled{background:#EEF2F4;color:#8AA3AE;}
.profile-top{display:flex;align-items:center;gap:13px;margin-bottom:16px;}
.profile-avatar{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;flex-shrink:0;}
.profile-name{font-size:16px;font-weight:600;color:var(--text);}
.profile-role{font-size:12px;color:var(--text-muted);margin-top:2px;}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px;}
.stat-box{background:var(--bg-soft);border-radius:8px;padding:9px 11px;}
.stat-box-label{font-size:10px;color:var(--text-muted);}
.stat-box-val{font-size:16px;font-weight:600;color:var(--text);margin-top:2px;}
.job-history-item{padding:8px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.job-history-item:last-child{border-bottom:none;}
.form-row{margin-bottom:10px;}
.form-row label{display:block;font-size:11px;color:var(--text-muted);margin-bottom:4px;font-weight:500;}
.form-row input:not([type="checkbox"]):not([type="radio"]),.form-row select,.form-row textarea{width:100%;padding:7px 10px;border:1px solid var(--border-strong);border-radius:8px;font-size:12px;font-family:inherit;color:var(--text);background:#fff;}
.form-row input[type="checkbox"],.form-row input[type="radio"]{width:auto;padding:0;border:0;background:transparent;flex-shrink:0;vertical-align:middle;}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--brand-500);}
.form-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.form-three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.save-bar{display:flex;gap:8px;margin-top:14px;}
.price-preview{background:var(--brand-50);border:1px solid #9ae6b4;border-radius:10px;padding:12px 14px;margin:12px 0;}
.price-preview-label{font-size:11px;color:#276749;margin-bottom:4px;}
.price-preview-val{font-size:22px;font-weight:700;color:var(--brand-500);}
.price-preview-breakdown{font-size:11px;color:var(--text-muted);margin-top:4px;}
/* PRICING BREAKDOWN — stacked 3-section panel used on lead profile + booking modal.
   Job spec → Client pricing → Your margin. Typography matches the rest of the
   CRM (Inter, 11px uppercase labels, system letter-spacing). No monospace —
   numbers right-align via flexbox + tabular-nums on the .v cells. */
.hnc-pricing-stack{display:flex;flex-direction:column;gap:10px;font-family:inherit;}
.hnc-pricing-card{border-radius:10px;padding:12px 14px;border:1px solid var(--border);background:#fff;}
.hnc-pricing-card .hnc-pc-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;}
.hnc-pricing-card .hnc-pc-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0;font-size:13px;line-height:1.55;color:var(--text);}
.hnc-pricing-card .hnc-pc-row .k{color:var(--text-muted);}
.hnc-pricing-card .hnc-pc-row .v{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text);text-align:right;white-space:nowrap;}
.hnc-pricing-card .hnc-pc-row.hnc-pc-discount .v{color:#059669;}
.hnc-pricing-card .hnc-pc-divider{height:1px;background:var(--border);margin:8px 0;}
.hnc-pricing-card .hnc-pc-divider-bold{background:var(--border-strong);}
.hnc-pricing-card .hnc-pc-row.hnc-pc-total{padding-top:4px;}
.hnc-pricing-card .hnc-pc-row.hnc-pc-total .k{color:var(--text);font-weight:600;}
.hnc-pricing-card .hnc-pc-row.hnc-pc-total .v{font-size:18px;font-weight:700;}
.hnc-pricing-card .hnc-pc-row.hnc-pc-tiny{font-size:11px;padding-top:2px;}
.hnc-pricing-card .hnc-pc-row.hnc-pc-tiny .v{font-size:11px;font-weight:500;color:var(--text-muted);}
.hnc-pricing-card .hnc-pc-row.hnc-pc-hours .v{font-size:18px;font-weight:700;color:var(--text);}
/* 2x2 spec grid — beds, baths, sqft, condition each get their own labeled cell.
   Replaces the long jumbled inline list that looked terrible on Sagar's profile. */
.hnc-pc-spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
.hnc-pc-spec-cell{background:var(--bg-soft);border-radius:8px;padding:8px 10px;}
.hnc-pc-spec-cell-label{font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;}
.hnc-pc-spec-cell-value{font-size:13px;font-weight:600;color:var(--text);margin-top:1px;}
/* Section accent borders — subtle, just a left edge so the cards still feel
   like info blocks but each section is identifiable at a glance */
.hnc-pc-spec{border-left:3px solid #94a3b8;}
.hnc-pc-client{border-left:3px solid var(--brand-500);}
.hnc-pc-margin{border-left:3px solid #22c55e;}
.hnc-pc-margin .hnc-pc-row.hnc-pc-total .v{color:#15803d;}
.hnc-pc-margin-empty{border-left-color:var(--border-strong);background:var(--bg-soft);}
.hnc-pc-margin-empty .hnc-pc-row{color:var(--text-muted);}
/* MESSAGING INBOX */
.inbox-layout{display:grid;grid-template-columns:260px 1fr;height:calc(100vh - 120px);background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.inbox-list{border-right:1px solid var(--border);overflow-y:auto;}
.inbox-search{padding:10px 12px;border-bottom:1px solid var(--border);}
.inbox-search input{width:100%;padding:6px 10px;border:1px solid var(--border-strong);border-radius:8px;font-size:12px;font-family:inherit;background:var(--bg-soft);}
.inbox-search input:focus{outline:none;border-color:var(--brand-500);}
.inbox-item{padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;display:flex;gap:9px;align-items:flex-start;}
.inbox-item:hover{background:var(--bg-soft);}
.inbox-item.active{background:var(--brand-50);border-left:2px solid var(--brand-500);}
.inbox-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;background:var(--brand-50);color:#276749;}
.inbox-info{flex:1;min-width:0;}
.inbox-name{font-size:12px;font-weight:600;color:var(--text);}
.inbox-preview{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.inbox-time{font-size:10px;color:var(--text-subtle);flex-shrink:0;}
.inbox-unread{width:7px;height:7px;border-radius:50%;background:var(--brand-500);margin-top:4px;flex-shrink:0;}
/* min-height:0 lets the grid item shrink below its content's natural
   height. Without this, .chat-area grows to fit chat-messages' content
   (~2,893px on a thread with 40 SMS+call entries), pushing the input
   area below the viewport — user couldn't scroll the thread OR reach
   the compose box. Bug diagnosed via in-page snapshot on 2026-05-21:
   chatInputArea was display:block + pointerEvents:auto but rendered
   off-screen because the parent grid cell wasn't height-constrained. */
.chat-area{display:flex;flex-direction:column;min-height:0;}
.chat-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.chat-header-name{font-size:13px;font-weight:600;color:var(--text);}
.chat-header-sub{font-size:11px;color:var(--text-muted);}
/* min-height:0 here so flex:1 can shrink below the content's natural
   height — without it, overflow-y:auto never engages because nothing
   reports as overflowing. */
.chat-messages{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;}
.msg-bubble{max-width:75%;padding:9px 12px;border-radius:12px;font-size:12px;line-height:1.5;}
.msg-in{background:var(--bg-soft);color:var(--text);align-self:flex-start;border-bottom-left-radius:4px;}
.msg-out{background:var(--brand-500);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;}
.msg-time{font-size:10px;color:var(--text-subtle);margin-top:3px;}
.msg-time.out{text-align:right;}
/* Call summary card — interleaved with SMS bubbles in the thread view */
.msg-call{align-self:center;max-width:80%;background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-size:11px;color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.04);}
.msg-call-hdr{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--text);margin-bottom:3px;font-size:11px;}
.msg-call-hdr .msg-call-dir{font-size:10px;font-weight:500;color:var(--text-muted);}
.msg-call-dur{font-size:10px;color:var(--text-muted);margin-left:auto;}
.msg-call-summary{font-size:11px;color:var(--text-muted);line-height:1.45;margin-top:3px;}
.msg-call-time{font-size:10px;color:var(--text-subtle);text-align:center;margin-top:2px;}
.inbox-loading,.chat-loading{padding:24px;text-align:center;color:var(--text-subtle);font-size:12px;}
.inbox-empty{padding:24px;text-align:center;color:var(--text-subtle);font-size:12px;}
.inbox-type-pill{font-size:9px;text-transform:uppercase;letter-spacing:.04em;padding:1px 5px;border-radius:6px;background:var(--bg-soft);color:var(--text-muted);margin-left:6px;font-weight:600;}
.inbox-type-pill.client{background:#dcfce7;color:#166534;}
.inbox-type-pill.lead{background:#dbeafe;color:#1e40af;}
.inbox-type-pill.cleaner{background:#fef3c7;color:#92400e;}
.inbox-type-pill.unknown{background:#f3f4f6;color:#6b7280;}
.chat-input-area{padding:12px 16px;border-top:1px solid var(--border);}
.chat-tabs{display:flex;gap:6px;margin-bottom:8px;}
.chat-tab{font-size:11px;padding:4px 10px;border-radius:20px;border:1px solid var(--border-strong);background:#fff;color:var(--text-muted);cursor:pointer;font-family:inherit;}
.chat-tab.active-sms{background:#ebf5ff;color:#2b6cb0;border-color:#bee3f8;font-weight:500;}
.chat-tab.active-email{background:#fffbeb;color:#b7791f;border-color:#f6e05e;font-weight:500;}
.chat-compose{display:flex;gap:8px;align-items:flex-end;}
.chat-compose textarea{flex:1;min-height:60px;max-height:120px;border:1px solid var(--border-strong);border-radius:8px;padding:8px 10px;font-size:12px;font-family:inherit;resize:none;background:var(--bg-soft);}
.chat-compose textarea:focus{outline:none;border-color:var(--brand-500);}
.chat-compose-btns{display:flex;flex-direction:column;gap:6px;}
.ai-draft-btn{font-size:11px;padding:6px 10px;border-radius:8px;background:#f5f0ff;color:#553c9a;border:1px solid #d6bcfa;cursor:pointer;font-family:inherit;white-space:nowrap;}
.ai-draft-btn:hover{background:#ede9fe;}
.send-btn{font-size:11px;padding:6px 10px;border-radius:8px;background:var(--brand-500);color:#fff;border:none;cursor:pointer;font-family:inherit;}
.send-btn:hover{background:var(--brand-600);}
.dot-pulse{display:flex;gap:3px;align-items:center;}
.dot-pulse span{width:5px;height:5px;border-radius:50%;background:#9ae6b4;animation:pulse 1.2s infinite;}
.dot-pulse span:nth-child(2){animation-delay:.2s;}
.dot-pulse span:nth-child(3){animation-delay:.4s;}
@keyframes pulse{0%,80%,100%{opacity:.3;transform:scale(.8);}40%{opacity:1;transform:scale(1);}}
.ai-thinking-bar{display:none;align-items:center;gap:6px;font-size:11px;color:var(--text-muted);padding:4px 0;}
.ai-thinking-bar.show{display:flex;}
.chan-toggle{display:flex;gap:6px;margin-bottom:10px;}
.chan-btn{font-size:12px;padding:5px 12px;border-radius:8px;border:1px solid var(--border-strong);background:#fff;color:var(--text-muted);cursor:pointer;font-family:inherit;}
.chan-btn.active-sms{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-300);font-weight:500;}
.chan-btn.active-email{background:#FBF2D8;color:var(--accent-gold-ink);border-color:var(--accent-gold);font-weight:500;}
.tone-row{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;align-items:center;}
.tone-label{font-size:11px;color:var(--text-muted);}
.tone-btn{font-size:11px;padding:3px 9px;border-radius:20px;border:1px solid var(--border-strong);background:#fff;color:var(--text-muted);cursor:pointer;font-family:inherit;}
.tone-btn.active{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-500);font-weight:500;}
.ctx-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.ctx-chip{font-size:11px;background:var(--bg-soft);border:1px solid var(--border);border-radius:20px;padding:3px 9px;color:var(--text-muted);}
.ctx-chip strong{color:var(--text);}
.cleaner-check-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.cleaner-check-list label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text);cursor:pointer;}
.report-two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;}
.success-bar{background:var(--brand-50);border:1px solid #9ae6b4;border-radius:8px;padding:8px 12px;font-size:12px;color:#276749;margin-bottom:12px;display:none;}
.success-bar.show{display:block;}
textarea{font-family:inherit;}
.agent-suggestion{font-size:11px;padding:4px 10px;border-radius:20px;border:1px solid var(--border-strong);background:#fff;color:var(--text-muted);cursor:pointer;font-family:inherit;}
.agent-suggestion:hover{background:#f5f0ff;color:#553c9a;border-color:#d6bcfa;}
.agent-bubble-user{background:#553c9a;color:#fff;padding:10px 14px;border-radius:12px;border-bottom-right-radius:4px;font-size:13px;line-height:1.6;align-self:flex-end;max-width:80%;}
.agent-bubble-ai{background:#fff;border:1px solid var(--border);padding:12px 14px;border-radius:12px;border-bottom-left-radius:4px;font-size:13px;line-height:1.7;color:var(--text);max-width:90%;}
.agent-bubble-ai strong{font-weight:600;}
.agent-thinking{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);padding:4px 0;}
.template-tab{font-size:12px;padding:5px 12px;border-radius:20px;border:1px solid var(--border-strong);background:#fff;color:var(--text-muted);cursor:pointer;font-family:inherit;}
.settings-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:22px;margin-bottom:14px;}
.settings-card-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px;}
.settings-card-desc{font-size:12px;color:var(--text-muted);line-height:1.55;}
.stab-bar{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:20px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:6px;}
.stab{font-size:12px;font-weight:500;padding:7px 14px;border-radius:8px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap;}
.stab:hover{background:var(--bg-soft);color:var(--text);}
.stab.active{background:var(--brand-50);color:var(--brand-700);font-weight:600;}
.stab-panel{animation:fadeIn .15s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.policy-row{display:flex;gap:10px;align-items:flex-start;background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;padding:12px;}
.policy-row-fields{flex:1;display:flex;flex-direction:column;gap:6px;}
.policy-row input,.policy-row textarea{font-size:12px;padding:6px 10px;border:1px solid var(--border);border-radius:7px;font-family:inherit;color:var(--text);background:#fff;width:100%;}
.policy-row textarea{min-height:56px;resize:vertical;line-height:1.5;}
.policy-remove-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:16px;padding:2px 4px;line-height:1;margin-top:2px;border-radius:4px;transition:color .15s;}
.policy-remove-btn:hover{color:#e16b6b;}
.auto-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer;gap:7px;font-size:12px;font-weight:500;color:var(--text-muted);}
.auto-toggle input{opacity:0;width:0;height:0;position:absolute;}
.auto-toggle-track{width:36px;height:20px;border-radius:20px;background:#d1d5db;transition:background .25s ease;flex-shrink:0;position:relative;}
.auto-toggle input:checked + .auto-toggle-track{background:var(--brand-500);}
.auto-toggle-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.auto-tabs{display:flex;gap:4px;background:var(--bg-soft,#f8f9fb);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:16px;width:fit-content;}
.auto-tab{display:flex;align-items:center;gap:8px;padding:8px 14px;border:0;background:transparent;border-radius:8px;font-size:13px;font-weight:500;color:var(--text-muted);cursor:pointer;transition:all .15s ease;}
.auto-tab:hover{color:var(--text);}
.auto-tab.active{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(15,23,42,.08);font-weight:600;}
.auto-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--border);color:var(--text-muted);font-size:11px;font-weight:600;}
.auto-tab.active .auto-tab-count{background:var(--brand-50,#ecfdf5);color:var(--brand-600,#059669);}
.auto-toggle input:checked + .auto-toggle-track .auto-toggle-thumb{transform:translateX(16px);}
.template-tab.active{background:var(--brand-500);color:#fff;border-color:var(--brand-500);}
.template-tab:hover:not(.active){background:var(--bg-soft);}
.auto-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:10px;display:flex;align-items:flex-start;gap:14px;}
.auto-card:hover{border-color:var(--border-strong);}
.auto-toggle{flex-shrink:0;margin-top:2px;}
.auto-toggle input{width:36px;height:20px;cursor:pointer;accent-color:var(--brand-500);}
.auto-body{flex:1;min-width:0;}
.auto-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px;}
.auto-desc{font-size:12px;color:var(--text-muted);margin-bottom:6px;}
.auto-meta{display:flex;gap:8px;flex-wrap:wrap;}
.auto-tag{font-size:10px;padding:2px 8px;border-radius:20px;font-weight:500;}
.auto-trigger-tag{background:#ebf5ff;color:#2b6cb0;}
.auto-action-tag{background:var(--brand-50);color:#276749;}
.auto-count{background:var(--bg-soft);color:var(--text-muted);}
.auto-actions{display:flex;gap:6px;align-items:center;flex-shrink:0;}
.pay-action-btn{font-size:11px;padding:4px 9px;border-radius:6px;border:1px solid var(--border-strong);background:#fff;color:var(--text);cursor:pointer;font-family:inherit;}
.pay-action-btn:hover{background:var(--bg-soft);}
.pay-action-btn.green{background:var(--brand-50);color:#276749;border-color:#9ae6b4;}
.pay-tab{font-size:13px;padding:8px 16px;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.pay-tab.active{color:var(--brand-500);border-bottom-color:var(--brand-500);font-weight:500;}
.pay-tab:hover{color:var(--text);}
#payroll-period-buttons{overflow:visible !important;max-width:100%;} #payroll-period-buttons::-webkit-scrollbar{height:4px;} #payroll-period-buttons::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:2px;} #payroll-period-buttons .pbtn{flex:0 0 auto;white-space:nowrap;} /* === MOBILE STYLES === */ @media (max-width:900px){ .crm{flex-direction:column;height:auto;min-height:100vh;} .sidebar{position:fixed;top:0;left:0;bottom:0;width:80vw;max-width:280px;z-index:1100;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 10px 30px rgba(0,0,0,.15);} .crm.nav-open .sidebar{transform:translateX(0);} .nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1050;display:none;} .crm.nav-open .nav-backdrop{display:block;} .main{width:100%;min-width:0;height:auto;overflow:visible;} .topbar{padding:10px 12px;flex-wrap:wrap;gap:8px;position:sticky;top:0;z-index:100;} .topbar h1{font-size:16px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .topbar-actions{flex-wrap:wrap;width:100%;gap:6px;} .topbar-actions input,.topbar-actions .search,.topbar-actions select{flex:1;min-width:120px;font-size:16px;} .mobile-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border-strong);background:#fff;border-radius:8px;cursor:pointer;font-size:20px;line-height:1;padding:0;margin-right:4px;} .content{padding:14px;} .metrics{grid-template-columns:1fr 1fr;gap:8px;} .metric-value{font-size:20px;} .pipeline{grid-template-columns:1fr;gap:8px;} .two-col{grid-template-columns:1fr;gap:12px;} .form-two,.form-three{grid-template-columns:1fr;gap:10px;} .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;} .tw table{table-layout:auto;min-width:560px;font-size:13px;} th,td{padding:10px 10px;} .btn{min-height:40px;font-size:14px;padding:8px 14px;} input,select,textarea{font-size:16px !important;} .overlay{align-items:stretch;justify-content:stretch;padding:0;} .overlay{overscroll-behavior:contain;} .overlay > *{width:100% !important;max-width:100% !important;height:100dvh;max-height:100dvh;border-radius:0 !important;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;} .cal-header{flex-wrap:wrap;gap:8px;} .cal-nav{flex:1;min-width:0;} .cal-month{font-size:14px;min-width:0;} .cal-view-btn{padding:8px 14px;font-size:14px;min-height:36px;} .legend{display:none !important;} .cal-day{min-height:58px;padding:3px;font-size:11px;} .cal-dow-cell{font-size:10px;padding:5px 0;} .section-title{font-size:11px;} body{font-size:14px;} .desktop-only{display:none !important;} } @media (min-width:901px){ .mobile-menu-btn,.nav-backdrop{display:none !important;} }  /* === REPORTS STYLES === */ .rep-pane.hidden{display:none !important;}  .rep-pbtn,.rep-tbtn{font-size:12px;padding:6px 12px;} .rep-pbtn.active,.rep-tbtn.active{background:#3BB8E3;color:#fff;border-color:#3BB8E3;} /* === END MOBILE STYLES === */ /* === AI SUMMARY === */ .ai-sum-h{font-weight:700;font-size:13px;color:#553c9a;margin:12px 0 6px;letter-spacing:.01em;} .ai-sum-h:first-child{margin-top:0;} .ai-sum-ul{list-style:disc;padding:0 0 0 22px;margin:0 0 8px 0;} .ai-sum-ul li{font-size:12px;color:#44337a;line-height:1.55;padding:2px 0;margin:0;} .ai-sum-ul li::marker{color:#9f7aea;} .ai-sum-ul li strong{color:#322659;font-weight:600;} .ai-sum-p{font-size:12px;color:#44337a;line-height:1.55;margin:6px 0;} .ai-sum-p strong{color:#322659;font-weight:600;} .ai-sum-meta{margin-top:12px;padding-top:8px;border-top:1px dashed #e9d8fd;font-size:10px;color:#9f7aea;font-style:italic;} .ai-sum-btn{font-size:11px;padding:5px 12px;border:1px solid #d6bcfa;border-radius:20px;background:#f5f0ff;color:#553c9a;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;transition:all .15s;} .ai-sum-btn:hover{background:#ede9fe;border-color:#9f7aea;} .ai-sum-btn:disabled{opacity:.6;cursor:wait;} .ai-sum-btn .dotspin{display:inline-block;width:10px;height:10px;border:1.5px solid #9f7aea;border-top-color:transparent;border-radius:50%;animation:aispin .8s linear infinite;} @keyframes aispin{to{transform:rotate(360deg);}} /* === END AI SUMMARY === */ /* === TOAST NOTIFICATIONS === */
@keyframes toastSlideIn{from{opacity:0;transform:translateX(420px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastSlideOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(420px)}}
.hnc-toast{animation:toastSlideIn 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;}
.hnc-toast.toast-exit{animation:toastSlideOut 0.3s cubic-bezier(0.4,0,1,1) forwards;}
/* === PANEL SLIDE-IN === */
@keyframes panelSlideIn{from{opacity:0;transform:translateX(48px) scale(.98)}to{opacity:1;transform:translateX(0) scale(1)}}
.panel-entering{animation:panelSlideIn .28s cubic-bezier(.34,1.06,.64,1) forwards!important;}
/* === SECTION FADE === */
@keyframes sectionFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.vc.active{animation:sectionFadeIn .1s cubic-bezier(.4,0,.2,1);}
/* === BUTTON PULSE GLOW === */
@keyframes hncPulseGlow{0%{box-shadow:0 0 0 0 rgba(59,184,227,.5)}70%{box-shadow:0 0 0 11px rgba(59,184,227,0)}100%{box-shadow:0 0 0 0 rgba(59,184,227,0)}}
@keyframes hncPulseGlowGreen{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 11px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
@keyframes hncPulseGlowRed{0%{box-shadow:0 0 0 0 rgba(239,68,68,.45)}70%{box-shadow:0 0 0 11px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.hnc-btn-pulse{animation:hncPulseGlow .55s cubic-bezier(.4,0,.2,1)!important;}
.hnc-btn-pulse-green{animation:hncPulseGlowGreen .55s cubic-bezier(.4,0,.2,1)!important;}
.hnc-btn-pulse-red{animation:hncPulseGlowRed .55s cubic-bezier(.4,0,.2,1)!important;}

/* === HNC AUTH === */
#hnc-login-overlay{position:fixed;inset:0;background:#fff;z-index:9999;display:flex;align-items:center;justify-content:center;}
.hnc-va-user #nav-reports-section,.hnc-va-user #nav-reporting{display:none!important;}
.hnc-va-user .admin-only-tip,.hnc-va-user .admin-only{display:none!important;}
/* Assistant role — sees only Daily list + Calendar (read-only). Everything
   else in the sidebar is hidden. The .assistant-only nav item is hidden for
   everyone EXCEPT assistant role. The non-assistant-only class is ONLY active
   when an assistant is logged in (gated by .hnc-assistant-user on body) so
   admin/VA users see all their normal nav items. */
.hnc-assistant-user .non-assistant-only{display:none!important;}
.hnc-assistant-user .admin-only-tip,.hnc-assistant-user .admin-only{display:none!important;}
body:not(.hnc-assistant-user) .assistant-only{display:none!important;}
/* Owner-only — visible ONLY to hardcoded OWNER_EMAILS (set in JS as
   .hnc-owner-user on body). DB-level role='admin' users do NOT pass this
   gate. Used for user-management UI (Settings → Users) since admins can
   do everything except modify the user list. Belt-and-suspenders: the
   actual user-management API endpoints are gated by requireOwner server-side. */
body:not(.hnc-owner-user) .owner-only{display:none!important;}
/* === END HNC AUTH === */