/* Mobile workspace refinements. Loaded last so desktop rules stay untouched. */
.mobile-bottom-nav { display:none; }

@media (max-width: 768px) {
  :root { --mobile-nav-height: 68px; }

  body.is-signed-in { padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
  body.is-signed-in .page { padding-bottom: calc(32px + var(--mobile-nav-height) + env(safe-area-inset-bottom)); }

  .mobile-bottom-nav {
    position:fixed;
    z-index:45;
    right:0;
    bottom:0;
    left:0;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:2px;
    min-height:var(--mobile-nav-height);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    border-top:1px solid var(--color-rule);
    background:color-mix(in srgb,var(--color-surface) 96%,transparent);
    box-shadow:0 -4px 18px #00000012;
    backdrop-filter:blur(14px);
  }
  .mobile-bottom-nav a {
    display:flex;
    min-width:0;
    min-height:48px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:3px;
    border-radius:9px;
    color:var(--color-muted);
    font-size:10px;
    font-weight:650;
    line-height:1.1;
    text-decoration:none;
  }
  .mobile-bottom-nav a[aria-current='page'] { color:var(--color-accent); background:var(--color-accent-wash); }
  .mobile-bottom-nav .nav-icon { width:19px; height:19px; flex:0 0 19px; }

  .theme-toggle {
    right:12px;
    bottom:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 10px);
    min-height:40px;
    padding:8px 11px;
    font-size:11px;
  }

  /* Prevent iOS zoom and give controls a reliable touch target. */
  input:not([type='checkbox']):not([type='radio']), select, textarea,
  .field, .search-control input, .report-date-filter input { font-size:16px; }
  input:not([type='checkbox']):not([type='radio']), select, textarea { box-sizing:border-box; max-width:100%; min-height:44px; }
  button, a.button, .button, .text-button, .export-actions a,
  .date-presets a, .filter-chip, .stage-tab, .pagination a,
  .detail-jumps a, .search-control button { min-height:44px; }
  .text-button { display:inline-flex; align-items:center; }
  .search-control button { padding-inline:16px; }
  .detail-card dd, .message-body, .message-send-notice, .source-link, .fact-ad-title { overflow-wrap:anywhere; word-break:break-word; }
  .edit-card > .button, .crm-form > .button { width:100%; }

  .date-primary, .date-secondary { font-size:11px; line-height:1.45; white-space:normal; }
  .date-secondary { margin-top:3px; }

  /* Conversation rows already expose data-label values; keep every field readable. */
  .conversation-table tr {
    margin:10px 12px;
    padding:16px;
    border:1px solid var(--color-rule);
    border-radius:12px;
    background:var(--color-surface);
    box-shadow:0 1px 3px #0000000a;
  }
  .conversation-table td { line-height:1.45; }
  .conversation-table td::before { margin-top:10px; font-size:10px; font-weight:700; }
  .conversation-table td:first-child { padding-right:42px; }
  .conversation-table td.row-action { top:12px; right:12px; }
  .conversation-table td.row-action a { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }

  /* Contact rows become cards so phone, email, stage, and date remain visible. */
  .contact-table-scroll { overflow:visible; }
  .contact-table, .contact-table tbody, .contact-table tr, .contact-table td { display:block; width:100%; min-width:0; }
  .contact-table { font-size:12px; }
  .contact-table thead { display:none; }
  .contact-table tr {
    margin:10px 12px;
    padding:14px 16px;
    border:1px solid var(--color-rule);
    border-radius:12px;
    background:var(--color-surface);
  }
  .contact-table td { max-width:none; padding:5px 0; border:0; line-height:1.45; }
  .contact-table td::before {
    display:block;
    margin:5px 0 2px;
    color:var(--color-muted);
    font-size:10px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  .contact-table td[data-label]::before { content:attr(data-label); }

  /* Keep nested record actions inside the card and make destructive copy readable. */
  .record-actions {
    width:100%;
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid var(--color-rule);
  }
  .record-actions > summary, .record-actions details > summary {
    display:flex;
    min-height:44px;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    cursor:pointer;
    color:var(--color-accent);
    font-size:12px;
    font-weight:650;
  }
  .record-actions > p, .record-actions details > p { margin:8px 0; font-size:11px; line-height:1.55; }
  .record-actions form { margin:8px 0 12px; }
  .record-actions .button { width:100%; justify-content:center; }
  .record-actions details { margin-top:8px; padding-top:8px; border-top:1px solid var(--color-rule); }
}

@media (max-width:390px) {
  .mobile-bottom-nav { padding-inline:4px; }
  .mobile-bottom-nav a { font-size:9px; }
  .page { padding-inline:12px; }
  .conversation-table tr, .contact-table tr { margin-inline:4px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav { backdrop-filter:none; }
}

@media(max-width:768px) { .pipeline-card .field {font-size:16px;} }
/* Circular help glyph inside a square, comfortable touch target. */
button.help-button {position:relative;flex:0 0 36px;width:36px;height:36px;min-width:36px;min-height:36px;max-width:36px;max-height:36px;box-sizing:border-box;padding:0;border:0;background:transparent;line-height:1;align-self:center;}
button.help-button::before {content:'';position:absolute;width:25px;height:25px;border:1px solid var(--color-rule-strong);border-radius:50%;pointer-events:none;}
button.help-button:hover::before,button.help-button[aria-expanded='true']::before {border-color:var(--color-accent);}
.compact-panel>summary {display:none;}
@media(max-width:768px) {
 button.help-button {flex-basis:44px;width:44px;height:44px;min-width:44px;min-height:44px;max-width:44px;max-height:44px;}
 .workspace-utility {display:none;}
 .mobile-bar {min-height:56px;padding-top:8px;padding-bottom:8px;}
 .mobile-menu {padding-bottom:4px;}
 .mobile-menu>summary {min-height:40px;}
 .workspace-header {padding:18px 0 10px;margin:0;}
 .workspace-header h1 {margin:0;font-size:27px;}
 .compact-panel {margin:8px 0;border:1px solid var(--color-rule);border-radius:10px;background:var(--color-surface);}
 .compact-panel>summary {display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:10px 14px;font-size:12px;font-weight:600;cursor:pointer;list-style:none;}
 .compact-panel>summary::-webkit-details-marker {display:none;}
 .compact-panel>summary::after {content:'+';font-size:19px;margin-left:10px;}
 .compact-panel[open]>summary::after {content:'−';}
 .compact-panel>.lede {font-size:12px;margin:0;padding:4px 14px 12px;}
 .compact-panel>.export-actions {padding:0 10px 12px;display:flex;flex-wrap:wrap;}
 .compact-panel .date-toolbar {margin:0;padding:10px;border:0;}
 .compact-panel .period-caption {margin:0;padding:0 14px 12px;font-size:10px;}
 .inbox {margin-top:14px;}
 .inbox-top {padding:16px;gap:12px;}
 .theme-toggle {font-size:0;min-width:40px;width:40px;height:40px;padding:0;justify-content:center;}
 .theme-toggle>span:first-child {font-size:16px;}
}

/* One balanced mobile header; appearance lives inside the section menu. */
@media(max-width:1100px) {
 .mobile-bar {position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:4px;padding:6px 12px;min-height:56px;}
 .mobile-bar .mobile-brand {grid-column:2;grid-row:1;justify-self:center;font-size:12px;white-space:nowrap;letter-spacing:.08em;}
 .mobile-bar .mobile-brand span {display:none;}
 .mobile-bar>form {grid-column:3;grid-row:1;justify-self:end;margin:0;}
 .mobile-bar>form button {padding:0 8px;font-size:12px;}
 .mobile-bar .mobile-menu {grid-column:1;grid-row:1;padding:0;position:static;justify-self:start;}
 .mobile-menu>summary {width:44px;height:44px;min-height:44px;justify-content:center;padding:0;}
 .mobile-menu>summary>span,.mobile-menu>summary .menu-chevron {display:none;}
 .mobile-menu[open] .mobile-menu-panel {position:absolute;z-index:60;top:100%;left:0;right:0;max-height:calc(100dvh - 140px);overflow:auto;padding:12px 16px;background:var(--color-surface);border-bottom:1px solid var(--color-rule);box-shadow:0 10px 20px #0002;}
 .mobile-appearance {padding-top:8px;border-top:1px solid var(--color-rule);}
 .mobile-menu .mobile-work-nav {padding:0 0 8px;}
 .mobile-menu .theme-toggle {position:static;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;min-height:44px;padding:8px 12px;font-size:12px;transform:none;margin:0;}
 .mobile-menu .theme-toggle[hidden] {display:none;}
}

.conversation-table td.lead-expand-cell {display:none;}
@media(max-width:768px) {
 .inbox .inbox-top {padding:14px 14px 8px;gap:8px;}
 .inbox .inbox-top h2 {font-size:17px;}
 .inbox .search-form .help-label-row {display:none;}
 .inbox .search-label {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
 .inbox .filter-strip {padding:0 10px 8px;gap:2px;}
 .inbox .filter-chip {font-size:11px;padding:8px;}
 .conversation-table tr.is-compact-lead {margin:0;padding:14px 16px;border:0;border-top:1px solid var(--color-rule);border-radius:0;box-shadow:none;}
 .conversation-table .is-compact-lead .lead-avatar {width:32px;height:32px;flex-basis:32px;}
 .conversation-table .is-compact-lead .lead-name {font-size:13px;}
 .conversation-table .is-compact-lead .lead-summary {display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;}
 .conversation-table .is-compact-lead:not(.is-expanded) td:nth-child(n+4):nth-child(-n+5) {display:none;}
 .conversation-table .is-compact-lead td.row-action {position:static;display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding-top:8px;}
 .conversation-table .is-compact-lead td.row-action a {font-size:12px;gap:6px;justify-content:flex-start;}
 .conversation-table .is-compact-lead td.row-action .archive-form {margin:0;}
 .conversation-table .is-compact-lead td.row-action .text-button {min-height:44px;padding:8px 12px;}
 .conversation-table .is-compact-lead td:nth-child(6) {padding-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
 .conversation-table .is-compact-lead td:nth-child(6)::before {display:none;}
 .conversation-table .is-compact-lead td:nth-child(6) .date-secondary {margin:0;font-size:11px;}
 .conversation-table .is-compact-lead .status {font-size:10px;padding:4px 7px;}
 .conversation-table .is-compact-lead td.lead-expand-cell {display:block;padding:0;}
 .lead-expand {display:flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:transparent;color:var(--color-muted);font:inherit;font-size:11px;}
 .lead-expand::after {content:'+';font-size:16px;}
 .is-expanded .lead-expand::after {content:'−';}
}
.mobile-filter-bar,.mobile-detail-tabs {display:none;}
.mobile-filter-sheet {width:min(600px,100%);max-height:85dvh;box-sizing:border-box;margin:auto auto 0;padding:20px;border:1px solid var(--color-rule);border-radius:18px 18px 0 0;background:var(--color-surface);color:var(--color-ink);}
.mobile-filter-sheet::backdrop {background:#0008;}
.sheet-close {float:right;}
.mobile-filter-sheet h2 {font-size:20px;margin:8px 0 20px;}
.sheet-presets {display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.sheet-presets button,.sheet-close {background:var(--color-paper);color:var(--color-ink);border:1px solid var(--color-rule);border-radius:8px;padding:8px 12px;}
.sheet-date-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.sheet-date-fields label {min-width:0;}
.mobile-filter-sheet label {display:block;margin:10px 0;font-size:13px;}
.mobile-filter-sheet input,.mobile-filter-sheet select {display:block;box-sizing:border-box;width:100%;min-width:0;margin-top:6px;padding:10px;background:var(--color-paper);color:var(--color-ink);border:1px solid var(--color-rule);border-radius:8px;}
.sheet-actions {display:flex;align-items:center;justify-content:space-between;margin:18px 0;}
@media(max-width:768px){
 .has-mobile-filter .compact-dates,.has-mobile-filter .inbox>.filter-strip {display:none;}
 .mobile-filter-bar {display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0;}
 .active-filter {font-size:12px;padding:7px 10px;border-radius:20px;background:var(--color-accent-wash);color:var(--color-accent);text-decoration:none;}
 .mobile-detail-tabs {display:flex;gap:4px;margin:10px 0;}
 .mobile-detail-tabs button {flex:1;border:0;border-radius:8px;background:var(--color-surface);color:var(--color-muted);font-size:13px;}
 .mobile-detail-tabs button[aria-pressed=true] {background:var(--color-accent-wash);color:var(--color-accent);}
 .detail-jumps {display:none;}
 .mobile-tab-hidden {display:none!important;}
 .detail-layout {display:block;}
 form.has-unsaved > button[type='submit'] {outline:2px solid var(--color-accent);outline-offset:2px;}
 .mobile-keyboard .mobile-bottom-nav {display:none;}
 .conversation-table tbody tr {cursor:pointer;}
}

.mobile-profile-fold>summary {display:none;}
@media(max-width:768px){.mobile-profile-fold>summary {display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;font-size:13px;}.mobile-profile-fold>summary::after {content:'+';}.mobile-profile-fold[open]>summary::after {content:'−';}}

/* Keep the aside as a card stack on small screens.  The base layout uses
   display:contents at tablet widths, which removes the visual grouping of
   the customer tools when they are shown below the conversation. */
@media(max-width:768px) {
 .detail-aside { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
 .detail-aside > .detail-card { min-width:0; margin:0; }
 .detail-aside > .detail-card + .detail-card { margin-top:0; }
 .detail-card { border-radius:12px; }
 #customer-profile > h2 { display:none; }
 #customer-profile > .mobile-profile-fold { margin-top:0; }
 .mobile-profile-fold > summary { padding:0 0 8px; color:var(--color-ink); font-weight:650; }
 .ai-help { margin:0 0 14px; border:1px solid var(--color-rule); border-radius:9px; background:var(--color-paper); }
 .ai-help > summary { min-height:40px; padding:10px 12px; color:var(--color-muted); font-size:11px; font-weight:650; cursor:pointer; }
 .ai-help > p { margin:0; padding:0 12px 11px; font-size:11px; line-height:1.55; }
 .ai-notice { margin:12px 0; padding:10px 12px; border-left:3px solid var(--color-accent); background:var(--color-accent-wash); font-size:12px; line-height:1.5; }
 .ai-notice.is-error { border-left-color:var(--color-danger, #a33); background:color-mix(in srgb, var(--color-danger, #a33) 9%, var(--color-surface)); }
 .ai-draft .evidence { margin-top:14px; }
}

@media(min-width:769px) and (max-width:1100px) {
 .detail-aside { display:grid; gap:16px; }
}