:root{
  --bg:#f7f7f5;--surface:#fff;--border:#e5e7eb;--border-light:#f0f0ee;--text:#111;--text-secondary:#374151;--text-muted:#6b7280;--text-light:#9ca3af;
  --sidebar-bg:#0f0f12;--sidebar-text:#d4d4d8;--sidebar-muted:#71717a;--sidebar-active:#fff;
  --accent:#4F46E5;--accent-light:#818CF8;--accent-dark:#3730A3;
  --green:#16a34a;--red:#dc2626;--orange:#d97706;--purple:#7c3aed;
  --radius:12px;--radius-sm:8px;--shadow-sm:0 1px 3px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.03);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Inter",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.app-layout{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:250px;background:var(--sidebar-bg);display:flex;flex-direction:column;z-index:50;overflow-y:auto}
.sidebar-brand{padding:24px 20px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.brand-name-link{display:block;text-decoration:none}
.brand-name-link:hover{text-decoration:none}
.brand-name{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.01em}
.brand-name span{color:var(--accent-light)}
.brand-sub{font-size:10px;color:var(--sidebar-muted);text-transform:uppercase;letter-spacing:1px;margin-top:4px}
.sidebar-nav{flex:1;padding:16px 0}
.nav-group-label{padding:10px 20px 6px;font-size:10px;color:var(--sidebar-muted);text-transform:uppercase;letter-spacing:1.5px;font-weight:700}
.nav-link{display:flex;align-items:center;gap:12px;padding:10px 20px;color:var(--sidebar-text);text-decoration:none;font-size:13px;font-weight:500;border-left:3px solid transparent;transition:all .15s}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.03);text-decoration:none}
.nav-link.active{color:#fff;background:rgba(79,70,229,.18);border-left-color:var(--accent)}
.sidebar-footer{padding:14px 20px;border-top:1px solid rgba(255,255,255,.06)}
.sidebar-user{display:flex;align-items:center;gap:10px}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.user-info{flex:1;min-width:0}
.user-name{font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:10px;color:var(--sidebar-muted);text-transform:uppercase}
.logout-btn{color:var(--sidebar-text);text-decoration:none;padding:6px 8px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;transition:all .15s}
.logout-btn:hover{color:var(--red);background:rgba(220,38,38,.1)}

/* Main */
.main-content{margin-left:250px;padding:28px 32px;min-height:100vh;flex:1}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px}
.page-header h1{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.page-header .subtitle{font-size:13px;color:var(--text-muted)}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)}
.card-title{font-size:14px;font-weight:700;margin-bottom:16px;color:var(--text)}
.card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--border);margin:-22px -22px 16px}
.card-header h3{font-size:15px;font-weight:600;margin:0}

/* Stat grid */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 18px;box-shadow:var(--shadow-sm)}
.stat-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.stat-value{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:4px;line-height:1.1}

/* Grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}

/* Forms */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:12px;font-weight:600;margin-bottom:6px;color:var(--text)}
.form-input,.form-select,.form-textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;background:#fff;transition:border-color .15s}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.form-textarea{resize:vertical;min-height:80px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .15s;font-family:inherit}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark);text-decoration:none;color:#fff}
.btn-sm{padding:6px 12px;font-size:12px}

/* Badge */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600}
.badge-green{background:rgba(22,163,74,.1);color:var(--green)}
.badge-red{background:rgba(220,38,38,.1);color:var(--red)}
.badge-orange{background:rgba(217,119,6,.1);color:var(--orange)}
.badge-blue{background:rgba(79,70,229,.1);color:var(--accent)}
.badge-gray{background:rgba(107,114,128,.1);color:var(--text-muted)}
.badge-purple{background:rgba(124,58,237,.1);color:var(--purple)}

/* Tables */
.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;padding:12px 14px;background:var(--bg);border-bottom:1px solid var(--border);font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}
.data-table td{padding:14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
.data-table tbody tr:hover td{background:var(--bg)}
.data-table tbody tr:last-child td{border-bottom:none}

/* Empty state */
.empty-state{padding:40px 20px;text-align:center}
.empty-state-icon{font-size:36px;margin-bottom:8px;color:var(--text-light)}
.empty-state-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px}
.empty-state-desc{font-size:12px;color:var(--text-muted)}

/* Guest layout */
.guest-layout{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px}
.guest-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:36px;max-width:420px;width:100%;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.guest-brand{text-align:center;margin-bottom:24px}
.guest-brand img{max-width:220px;height:auto}
.guest-brand-sub{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;margin-top:8px}

/* Flash */
.alert{padding:12px 16px;border-radius:8px;font-size:13px;margin-bottom:16px;border:1px solid}
.alert-success{background:rgba(22,163,74,.08);border-color:var(--green);color:var(--green)}
.alert-error{background:rgba(220,38,38,.08);border-color:var(--red);color:var(--red)}
.alert-info{background:rgba(79,70,229,.08);border-color:var(--accent);color:var(--accent-dark)}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-dialog{background:#fff;border-radius:12px;max-width:720px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.modal-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-header h3{font-size:16px;font-weight:700;margin:0}
.modal-body{padding:22px}
.modal-footer{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}
.modal-close{background:none;border:none;font-size:22px;color:var(--text-muted);cursor:pointer;line-height:1;padding:4px 8px}

/* Phase cards (SOP) */
.phase-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;overflow:hidden}
.phase-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;cursor:pointer;user-select:none;transition:background .15s}
.phase-header:hover{background:var(--bg)}
.phase-badge{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;padding:3px 8px;border-radius:4px;margin-right:12px}
.phase-a .phase-badge{background:rgba(79,70,229,.1);color:var(--accent)}
.phase-b .phase-badge{background:rgba(124,58,237,.1);color:var(--purple)}
.phase-c .phase-badge{background:rgba(217,119,6,.1);color:var(--orange)}
.phase-d .phase-badge{background:rgba(22,163,74,.1);color:var(--green)}
.phase-e .phase-badge{background:rgba(220,38,38,.1);color:var(--red)}
.phase-f .phase-badge{background:rgba(100,100,100,.1);color:var(--text-muted)}
.phase-title{font-size:14px;font-weight:700;flex:1}
.phase-meta{font-size:12px;color:var(--text-muted);margin-right:12px}
.phase-chevron{color:var(--text-muted);font-size:12px;transition:transform .2s}
.phase-card.open .phase-chevron{transform:rotate(180deg)}
.phase-body{display:none;padding:0 20px 20px;border-top:1px solid var(--border-light)}
.phase-card.open .phase-body{display:block}
.task-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:8px;margin-bottom:4px;transition:background .15s}
.task-item:hover{background:var(--bg)}
.task-check{width:18px;height:18px;border:2px solid var(--border);border-radius:4px;flex-shrink:0;margin-top:1px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;transition:all .15s}
.task-item.done .task-check{background:var(--green);border-color:var(--green);color:#fff}
.task-item.done .task-check:after{content:"\2713";color:#fff;font-weight:700}
.task-item.done .task-text{text-decoration:line-through;color:var(--text-muted)}
.task-text{font-size:13px;flex:1}
.task-tag{font-family:"JetBrains Mono",monospace;font-size:9px;padding:2px 6px;border-radius:3px;font-weight:600;flex-shrink:0}
.tag-sf{background:rgba(79,70,229,.1);color:var(--accent)}
.tag-ahrefs{background:rgba(124,58,237,.1);color:var(--purple)}
.tag-gmb{background:rgba(22,163,74,.1);color:var(--green)}
.tag-manual{background:rgba(217,119,6,.1);color:var(--orange)}
.tag-deliverable{background:rgba(220,38,38,.1);color:var(--red)}

/* Prompt cards */
.prompt-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:14px;transition:border-color .15s}
.prompt-card:hover{border-color:var(--accent)}
.prompt-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.prompt-name{font-size:15px;font-weight:700;margin-bottom:6px}
.prompt-desc{font-size:12px;color:var(--text-secondary);margin-bottom:14px;line-height:1.6}
.prompt-body{background:var(--sidebar-bg);color:#e0e0e0;border-radius:8px;padding:16px;font-family:"JetBrains Mono",monospace;font-size:12px;line-height:1.7;white-space:pre-wrap;max-height:320px;overflow-y:auto;position:relative}
.copy-btn{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.1);color:#fff;border:none;padding:5px 10px;border-radius:4px;font-size:11px;font-weight:600;cursor:pointer;transition:background .15s;font-family:inherit}
.copy-btn:hover{background:rgba(255,255,255,.2)}
.copy-btn.copied{background:var(--green)}

/* Scan stats strip collapses to below on narrow screens */
@media(max-width:1100px){
  .scan-stats-strip{display:none!important}
}

/* Rank check UX */
[x-cloak]{display:none!important}
.icon-spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Loading overlay + spinners (Wave N.1) */
.mga-spinner{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 0.7s linear infinite;vertical-align:middle;margin-right:6px}
.mga-spinner-lg{width:40px;height:40px;border:3px solid var(--surface-2,#eef2ff);border-top-color:var(--accent,#6366f1);border-right-color:var(--accent,#6366f1);border-radius:50%;animation:spin 0.8s linear infinite}
.mga-loading-overlay{position:fixed;inset:0;background:rgba(15,15,18,.55);z-index:300;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.mga-loading-card{background:#fff;border-radius:14px;padding:28px 36px;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 24px 64px rgba(0,0,0,.32);min-width:260px;max-width:360px;text-align:center}
.mga-loading-card .title{font-weight:700;font-size:15px;color:var(--text)}
.mga-loading-card .hint{font-size:12px;color:var(--text-muted);line-height:1.4}

@keyframes flash-success{0%{background:rgba(22,163,74,.2)}100%{background:transparent}}
.flash-success td{animation:flash-success 2s ease-out}
.rank-check-btn.just-done,.rank-check-btn.recent{background:rgba(22,163,74,.12)!important;color:var(--green)!important;border-color:rgba(22,163,74,.3)!important}

/* Mobile */
.mobile-topbar{display:none}
.menu-toggle{display:none}
.sidebar-backdrop{display:none}
@media(max-width:900px){
  .mobile-topbar{display:flex;position:fixed;top:0;left:0;right:0;height:56px;background:#0f0f12;z-index:100;align-items:center;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 1px 3px rgba(0,0,0,.12)}
  .menu-toggle{width:42px;height:42px;border-radius:10px;background:transparent;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .mobile-topbar-brand{flex:1;text-align:center;font-size:15px;font-weight:800;color:#fff}
  .mobile-topbar-brand span{color:var(--accent)}
  .mobile-topbar-logout{width:42px;height:42px;color:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;border-radius:10px;text-decoration:none}
  .sidebar{transform:translateX(-100%);transition:transform .25s ease;width:280px;z-index:150;box-shadow:4px 0 24px rgba(0,0,0,.2)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:149}
  .sidebar-backdrop.active{display:block}
  .main-content{margin-left:0;padding:72px 14px 32px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .grid-2,.grid-3,.grid-4,.grid-6{grid-template-columns:1fr}
  .page-header{flex-direction:column;gap:10px;align-items:flex-start}
  .page-header h1{font-size:22px}
  .data-table{display:block;overflow-x:auto;white-space:nowrap}
}

/* ============================================================ */
/* MOBILE SWEEP — Wave 1 foundation (2026-04-17)                */
/* ============================================================ */

/* Safe-area insets on body so nothing hugs the notch / home bar */
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}

/* Hard guarantee: nothing escapes the viewport horizontally on mobile */
@media(max-width:900px){
  html,body{max-width:100vw;overflow-x:hidden}
  .main-content{max-width:100vw;overflow-x:hidden;min-width:0}
  /* Page header: long subtitles/URLs were stretching the inner div past viewport */
  .page-header{align-items:stretch!important}
  .page-header > *{min-width:0;max-width:100%}
  .page-header > div:last-child{align-self:flex-start}
  .page-header h1,.page-header .subtitle{overflow-wrap:anywhere;word-break:break-word}
  /* Belt-and-suspenders for any flex/grid inside cards */
  .card{min-width:0;max-width:100%}
}

/* Visibility utilities (opt-in per element) */
@media(max-width:768px){.hide-phone{display:none!important}}
@media(min-width:769px){.hide-desktop{display:none!important}}

/* Horizontal scroll fallback when a wide layout can't be converted */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Table-to-card pattern (ported from old PHP build) */
.mobile-card-list{display:flex;flex-direction:column;gap:10px}
.mobile-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;box-shadow:var(--shadow-sm)}
.mobile-card-title{font-size:14px;font-weight:700;margin-bottom:10px;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:8px}
.mobile-detail-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;font-size:13px;border-bottom:1px solid var(--border-light)}
.mobile-detail-row:last-child{border-bottom:none}
.mobile-detail-row .mdr-label{font-weight:600;color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}
.mobile-detail-row .mdr-value{text-align:right;color:var(--text);font-size:13px;min-width:0;overflow-wrap:anywhere}
.mobile-card-actions{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border-light)}
.mobile-card-actions .btn{flex:1}
/* @mention pill — used in task comments + descriptions. Inserted server-side during render from stored @Name-Parts markers. */
.mention{background:#eef2ff;color:var(--accent);font-weight:600;padding:1px 6px;border-radius:4px;text-decoration:none;white-space:nowrap}
.mention:hover{background:#dbeafe}
/* Client-side sort bar (Alpine-driven, above each dashboard table — desktop + mobile) */
.sort-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border-light,#f0f0ee);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sort-bar::-webkit-scrollbar{display:none}
.sort-bar-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);font-weight:700;margin-right:4px;flex-shrink:0}
.sort-chip{display:inline-flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:5px 10px;cursor:pointer;font-size:11px;font-weight:600;color:var(--text);white-space:nowrap;flex-shrink:0;transition:all .12s}
.sort-chip:hover{background:var(--bg-soft,#f8fafc)}
.sort-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.sort-chip .sc-arrow{font-size:10px;opacity:.85}
@media(max-width:768px){.sort-chip{padding:7px 12px;font-size:12px;min-height:32px}}
/* Client-side pagination bar (Alpine-driven, used on GA4/GSC dashboard tables + movers) */
.paginate-bar{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border-top:1px solid var(--border-light,#f0f0ee);font-size:12px}
.paginate-bar button{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:6px 12px;cursor:pointer;font-size:12px;font-weight:600;color:var(--text);min-height:32px}
.paginate-bar button:disabled{opacity:.4;cursor:not-allowed}
.paginate-bar button:not(:disabled):hover{background:var(--bg-soft,#f8fafc)}
.paginate-pos{color:var(--text-muted);min-width:60px;text-align:center;font-weight:600}
@media(max-width:768px){.paginate-bar button{min-height:40px;padding:8px 14px}}
/* Bigger tap targets on the comment/description trix toolbar on mobile (28px default was hard to hit) */
@media(max-width:768px){.cmt-tool-btn{width:36px!important;height:36px!important}}
/* Horizontal stat grid inside mobile card — compact label-above-value cells (used on GA4/GSC dashboard cards) */
.mobile-stat-grid{display:grid;grid-template-columns:repeat(var(--msg-cols,5),1fr);gap:4px;margin-top:10px}
.mobile-stat-cell{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;padding:8px 2px;background:var(--bg-soft,#f8fafc);border-radius:6px;min-width:0;text-align:center}
.mobile-stat-cell .msc-label{font-size:9px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.mobile-stat-cell .msc-value{font-size:13px;font-weight:700;color:var(--text);line-height:1.2;word-break:break-word}
@media(max-width:360px){
  .mobile-stat-grid{grid-template-columns:repeat(var(--msg-cols-xs,2),1fr)}
}
@media(max-width:480px){
  .mobile-detail-row{flex-direction:column;align-items:flex-start;gap:3px;padding:8px 0}
  .mobile-detail-row .mdr-value{text-align:left;width:100%}
}

/* Tablet + phone — touch targets, 16px form fonts, floating actions */
@media(max-width:768px){
  .btn{min-height:44px;padding:12px 18px}
  .btn-sm{min-height:36px;padding:8px 14px;font-size:12px}
  .form-input,.form-select,.form-textarea{font-size:16px!important;min-height:44px;padding:11px 12px}
  .form-textarea{min-height:88px}
  .icon-btn{min-width:40px;min-height:40px}
  /* Kill iOS zoom-on-focus for every text-entry element (inline style="font-size:*"
     on trix-editor and form-input overrode the non-important rule — iOS only cares
     about the COMPUTED font-size on the element, so !important here is required). */
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]),
  textarea, select, trix-editor, .trix-content, [contenteditable=true], [contenteditable=""]{font-size:16px!important}

  /* Floating chat/bell respect home-indicator safe-area */
  .topbar-actions{bottom:max(16px,env(safe-area-inset-bottom))!important;right:max(14px,env(safe-area-inset-right))!important}

  /* Modals go full-screen on phones for usable forms */
  .modal-backdrop{padding:0;align-items:stretch}
  .modal-dialog{max-width:100%;width:100%;max-height:100vh;height:100vh;border-radius:0;display:flex;flex-direction:column}
  .modal-body{flex:1;overflow-y:auto}
  .modal-header,.modal-footer{flex-shrink:0}

  /* Tighter card padding */
  .card{padding:16px}
  .card-header{padding:14px 16px;margin:-16px -16px 12px}

  /* Stats */
  .stat-card{padding:14px 16px}
  .stat-value{font-size:22px}

  /* Don't let long titles blow up layout */
  h1,h2,h3,h4{overflow-wrap:anywhere}

  /* Guest pages */
  .guest-card{padding:24px 20px}
}

/* Phone (<480px) — final tightening */
@media(max-width:480px){
  .main-content{padding:64px 10px 24px}
  .card{padding:14px}
  .stat-grid{gap:10px}
  .stat-card{padding:12px 14px}
  .stat-value{font-size:20px}
  .page-header h1{font-size:20px}
  .guest-card{padding:20px 16px}

  /* Stack modal footer buttons */
  .modal-footer{flex-direction:column-reverse}
  .modal-footer .btn{width:100%}
}

/* iOS safe-area for fixed topbar + sidebar */
@media(max-width:900px){
  .mobile-topbar{padding-top:env(safe-area-inset-top);height:calc(56px + env(safe-area-inset-top))}
  .main-content{padding-top:calc(72px + env(safe-area-inset-top))}
  .sidebar{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
}

/* Messages: list-or-thread toggle on phone (<768px) */
@media(max-width:767px){
  .messages-wrap > aside{width:100%!important;border-right:none!important}
  .messages-wrap:not(.has-active) > aside{display:flex!important}
  .messages-wrap:not(.has-active) > main{display:none!important}
  .messages-wrap.has-active > aside{display:none!important}
  .messages-wrap.has-active > main{flex:1!important;display:flex!important}
  /* Hide floating close (×) on the list view — it overlaps the + new-conversation button.
     Keep it visible only when a conversation is open so user can exit the page. */
  .messages-wrap:not(.has-active) > .msg-close-btn{display:none!important}
}

/* Tasks kanban: stack columns vertically on phone */
@media(max-width:767px){
  .kanban-board{grid-template-columns:1fr!important;overflow-x:visible!important}
  .kanban-col{max-height:none!important}
  .kanban-cards{max-height:none!important}
}

/* Task detail modal: full-screen + stacked panes on phone */
@media(max-width:767px){
  /* 100dvh (not 100vh) so the dialog height follows the VISUAL viewport — when the iOS keyboard
     opens, dvh shrinks, the inner scroll container resizes, and the sticky-bottom composer stays
     above the keyboard instead of getting pushed behind it. */
  .task-detail-dialog{top:0!important;left:0!important;transform:none!important;width:100vw!important;height:100dvh!important;border-radius:0!important}
  /* The whole modal body becomes ONE scroll container on phone (instead of 2 internal scrolls) */
  .task-detail-body{flex-direction:column!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
  .task-detail-left{padding:14px!important;flex:none!important;min-height:auto!important;overflow:visible!important}
  .task-detail-right{min-width:0!important;max-width:none!important;border-left:none!important;border-top:6px solid var(--bg-soft,#f8fafc)!important;flex:none!important;overflow:visible!important}
  /* Right pane: kill its own internal scroll on the comments area + un-stick composer */
  .task-detail-right > div:nth-child(2){overflow-y:visible!important;flex:none!important;padding:12px 14px!important}
  /* Sticky the whole composer (textarea + toolbar + send) to the bottom of the scroll container on mobile
     so the user never has to scroll past their typed text to find the Send button. */
  .task-detail-composer{position:sticky!important;bottom:0!important;z-index:5;padding:10px 12px env(safe-area-inset-bottom)!important;background:#fff!important;box-shadow:0 -4px 12px rgba(0,0,0,0.04)}
  .task-detail-composer-bar{flex-wrap:wrap!important}
  /* Modal title shrinks on phone */
  .task-detail-title{font-size:20px!important;padding:4px 0 10px!important}
  /* Top breadcrumb bar wraps cleanly */
  .task-detail-dialog > div:first-child{padding:10px 14px!important;flex-wrap:wrap;gap:8px!important}
  /* Field rows stack label above value */
  .td-field-row{flex-direction:column!important;align-items:stretch!important;gap:6px!important;padding:10px 0!important}
  .td-field-row > div:first-child{width:auto!important}
  .td-field-row > select,.td-field-row > input{max-width:none!important}
  /* Emoji popover never overflows viewport */
  .task-detail-emoji-popover{width:min(288px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important;left:auto!important;right:0!important}
}

/* Tasks list page mobile (Wave 5 — 2026-04-17) */
@media(max-width:767px){
  /* Tighter task list rows */
  .task-row-v2{padding:12px 14px 12px 18px!important;gap:10px!important}
  .task-row-v2 .status-pill-select{font-size:10px!important;padding:5px 22px 5px 10px!important}
  /* Always show the delete button on touch devices (override hover-only) */
  .task-row-delete{opacity:.75!important}
  /* List section actions always visible (override hover reveal) */
  .list-section-actions{opacity:1!important}
  /* Section name input doesn't blow past phone */
  .list-section-input{min-width:0!important;flex:1 1 auto!important}
  .list-section-header{flex-wrap:wrap}
  /* Kanban card tighter on phone */
  .kanban-card{padding:10px!important}
  /* Constrain the kanban scroll wrapper */
  .kanban-board{width:100%!important;min-width:0!important;max-width:100%!important}
  /* Filters row: stack 1-col on phone */
  .task-filters{flex-direction:column!important}
  .task-filters > input,.task-filters > select{flex:1 1 100%!important;width:100%!important;max-width:100%!important;min-width:0!important}
}

/* Floating chat + bell buttons: smaller and out of the way on phone */
@media(max-width:767px){
  .topbar-actions{gap:6px!important;bottom:max(12px,env(safe-area-inset-bottom))!important;right:max(10px,env(safe-area-inset-right))!important;opacity:.88}
  .topbar-actions:hover,.topbar-actions:focus-within{opacity:1}
  .topbar-actions a,.topbar-actions button{padding:7px!important}
  .topbar-actions svg{width:16px!important;height:16px!important}
}

/* Client portal multi-business sidebar (Wave E — 2026-04-19) */
.portal-biz-group { margin: 6px 10px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; overflow: hidden; }
.portal-biz-group[open] { background: rgba(79,70,229,0.08); border-color: rgba(79,70,229,0.25); }
.portal-biz-header { list-style: none; cursor: pointer; padding: 10px 12px; display: flex; align-items: center; gap: 8px; color: var(--sidebar-text); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; user-select: none; }
.portal-biz-header::-webkit-details-marker { display: none; }
.portal-biz-header:hover { background: rgba(255,255,255,0.04); }
.portal-biz-chev { color: var(--sidebar-muted); transition: transform 180ms ease; flex-shrink: 0; }
.portal-biz-group[open] .portal-biz-chev { transform: rotate(90deg); }
.portal-biz-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.portal-biz-dot { width: 7px; height: 7px; background: #22c55e; border-radius: 99px; flex-shrink: 0; }
.portal-biz-links { padding-bottom: 4px; }
.portal-biz-form { margin: 0; padding: 0; }
.nav-link-indent { padding-left: 36px !important; font-size: 12px !important; }
.nav-link-btn { background: transparent; border: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit; }