/* ============================================================================
 * mobile.css — Mobile-only redesign layer for Deal Flow Pro.
 * Everything here is gated behind @media (max-width:720px), so the desktop
 * experience is completely unchanged. Loaded AFTER styles.css so it wins.
 * ========================================================================== */

/* Bottom nav + More sheet are hidden by default (desktop) */
.mnav, .msheet-bg, .dialer-bg, .mselbar, .dfab { display: none; }

@media (max-width: 720px) {

  /* No double-tap zoom. In the iOS shell a double-tap zoomed the whole app in
     with no way back out short of relaunching. manipulation keeps taps and
     scrolling but drops the double-tap gesture (the viewport meta blocks pinch). */
  html, body { touch-action: manipulation; }

  /* The app never slides sideways or bounces as a whole (Marisa, 2026-09-29).
     Something a few pixels too wide (a text bubble's tail, a long link) used
     to let the whole screen be dragged left and right. clip rather than
     hidden, so it does not turn the page into its own scroll box. */
  html, body { overflow-x: clip; overscroll-behavior: none; }
  .modal .mbody { overflow-x: hidden; }

  /* ---------------------- Light palette (variable flip) ---------------------- */
  :root {
    --bg:#eef1f7;
    --text:#131722; --muted:#5b6472;
    --accent:#dc2626; --accent2:#dc2626;
    --line:#e8ebf2; --line-soft:#eef1f6;
    --panel:#ffffff; --panel2:#f7f8fb;
    --surface:#ffffff; --surface-lite:#f4f6fa;
    --radius:18px; --radius-sm:14px;
    --sheen:0 0 #0000;
    --shadow:0 6px 20px rgba(19,23,34,.08);
  }
  body { background: var(--bg); color: var(--text); }
  body::before { display: none !important; }              /* kill dark ambient blobs */
  a { color: var(--accent2); }

  /* Neutralize the dark liquid-glass override block on mobile */
  .card, .col, .tablewrap, .modal, .panelbox, .taskform, .gcard, .kpi {
    background: #fff !important;
    border-color: var(--line) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: var(--shadow) !important;
  }

  /* ---------------------- Slim top bar (brand only) ---------------------- */
  header.topbar {
    position: sticky; top: 0; z-index: 30;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 12px rgba(19,23,34,.05); -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; gap: 10px; flex-wrap: nowrap;
  }
  header.topbar nav.tabs,
  header.topbar .mode-badge,
  header.topbar #logoutBtn,
  header.topbar .who,
  header.topbar .spacer { display: none !important; }
  header.topbar .logo { color: var(--text); font-size: 18px; }
  header.topbar .logo span { color: var(--accent); }

  #app > main { margin-left: 0; padding: 14px 16px calc(var(--mnav-h, 74px) + 24px); }

  /* ---------------------- Bottom tab bar ---------------------- */
  .mnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: flex-start;
    height: calc(74px + env(safe-area-inset-bottom));
    padding: 8px 6px env(safe-area-inset-bottom);
    background: rgba(255,255,255,.9);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid var(--line);
  }
  body:not(.app-live) .mnav { display: none; }
  .mtab {
    flex: 1; background: none; border: none; padding: 5px 0;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: #97a0b0; position: relative;
  }
  .mtab .mti { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
  .mtab .mti svg { width: 24px; height: 24px; }
  .mtab .mtl { font-size: 10px; font-weight: 700; }
  .mtab.on { color: var(--accent); }
  /* Contacts is a normal tab now — only the ACTIVE tab is highlighted red */
  .mtab.center .mti { width: 26px; height: 26px; margin-top: 0; border-radius: 0;
    background: none; box-shadow: none; color: inherit; }
  .mtab.center .mtl { color: inherit; }
  .mtab .mnb {
    position: absolute; top: 0; right: calc(50% - 22px);
    background: #dc2626; color: #fff; font-size: 9px; font-weight: 800;
    min-width: 16px; height: 16px; border-radius: 999px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
  }

  /* ---------------------- More sheet ---------------------- */
  .msheet-bg { position: fixed; inset: 0; z-index: 80; background: rgba(19,23,34,.42);
    display: none; align-items: flex-end; }
  .msheet-bg.open { display: flex; animation: mfade .2s ease; }
  @keyframes mfade { from { opacity: 0 } to { opacity: 1 } }
  .msheet {
    width: 100%; background: var(--bg); border-radius: 26px 26px 0 0;
    padding: 10px 16px calc(22px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 40px rgba(19,23,34,.25); animation: mup .28s ease;
  }
  @keyframes mup { from { transform: translateY(100%) } to { transform: none } }
  /* The More sheet never scrolls, so hand every touch on it to the swipe down
     handler. Without this iOS starts a native pan before the drag passes the
     8px threshold, the touchmoves stop being cancelable, and the sheet will
     not follow the finger. */
  .mmore-bg, .mmore-bg .msheet { touch-action: none; overscroll-behavior: contain; }
  .msheet .mgrip { width: 42px; height: 5px; border-radius: 3px; background: #cfd5e0; margin: 6px auto 14px; }
  .msheet h3 { margin: 0 0 12px; font-size: 17px; font-weight: 800; color: var(--text); }
  .mitem {
    width: 100%; text-align: left; display: flex; align-items: center; gap: 14px;
    padding: 13px 14px; background: #fff; border: none; border-radius: 14px; margin-bottom: 9px;
    box-shadow: var(--shadow);
  }
  .mitem .mmi { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; color: #fff;
    display: flex; align-items: center; justify-content: center; }
  .mitem .mmi svg { width: 20px; height: 20px; }
  .mitem .mmt { display: block; font-size: 15px; font-weight: 700; color: var(--text); }
  .mitem .mms { display: block; font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 1px; }
  .mitem .marw { margin-left: auto; color: #b6bdc9; font-size: 22px; }
  .mitem.mlogout .mmt { color: #dc2626; }

  /* ---------------------- Compact dashboard (injected #mDash) ---------------------- */
  #view-dashboard > .dash { display: none; }        /* hide the heavy desktop analytics */
  #mDash { display: block; }
  .mownerbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
  .mownerbar > span { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
  .mownerbar select.mowner { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 12px;
    border: 1px solid #e3e6ec; background: #fff; font: 600 15px system-ui; color: var(--text); box-shadow: var(--shadow); }
  .mhero {
    background: linear-gradient(135deg,#ff4b3a 0%,#d10000 100%);
    border-radius: 20px; padding: 18px 20px; color: #fff; position: relative; overflow: hidden;
    box-shadow: 0 12px 30px rgba(214,40,40,.3); margin-bottom: 14px;
  }
  .mhero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 150px; height: 150px;
    border-radius: 50%; background: rgba(255,255,255,.13); }
  .mhero .mh-l { font-size: 12.5px; opacity: .92; font-weight: 600; }
  .mhero .mh-big { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 3px 0 2px; }
  .mhero .mh-sub { font-size: 12.5px; opacity: .95; position: relative; z-index: 2; }
  .mhero .mh-sub b { background: rgba(255,255,255,.22); padding: 1px 7px; border-radius: 6px; }

  .mkpis { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 14px; }
  .mkpi { background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); }
  .mkt { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted);
    font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
  .mkdot { width: 24px; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .mkdot svg { width: 14px; height: 14px; }
  .mkdot.blu { background: #e9f1fe; color: #3b82f6; } .mkdot.amb { background: #fef4e3; color: #f59e0b; }
  .mkdot.pur { background: #f0ebfe; color: #8b5cf6; } .mkdot.grn { background: #e7f8f1; color: #10b981; }
  .mkv { font-size: 25px; font-weight: 800; letter-spacing: -.02em; margin-top: 7px; line-height: 1; color: var(--text); }
  .mkd { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 4px; }

  .mpanel { background: #fff; border-radius: 14px; box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 14px; }
  .mph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .mph h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--text); }
  .mph a { font-size: 12px; color: var(--accent); font-weight: 700; }
  .mfunnel { display: flex; flex-direction: column; gap: 9px; }
  .mfrow { display: flex; align-items: center; gap: 10px; }
  .mflbl { width: 74px; flex: 0 0 74px; font-size: 12px; color: var(--muted); font-weight: 600; }
  .mftrack { flex: 1; height: 10px; background: #f1f3f8; border-radius: 6px; overflow: hidden; }
  .mffill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(135deg,#ff4b3a,#d10000); }
  .mfval { width: 26px; text-align: right; font-size: 12.5px; font-weight: 800; color: var(--text); }
  .mtoday .mtrow { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid #f1f3f8; }
  .mtoday .mtrow:last-child { border-bottom: none; }
  .mtck { width: 22px; height: 22px; border-radius: 7px; border: 2px solid #cfd5e1; flex: 0 0 auto; background: #fff;
    padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; position: relative; }
  .mtck::before { content: ''; position: absolute; inset: -10px; }          /* bigger tap target */
  .mtck.on { background: var(--accent); border-color: var(--accent); }
  .mtck svg { width: 14px; height: 14px; }
  /* Time in milestone panel on the home screen. */
  .mstt .stt-table { min-width: 0; width: 100%; font-size: 13.5px; }
  .mstt .stt-table th { padding: 0 6px 6px; font-size: 11px; }
  .mstt .stt-table td { padding: 7px 6px; border-top-color: #f1f3f8; }
  .mstt .stt-out { border-color: #e8ebf2; }
  .mstt .stt-outs { grid-template-columns: repeat(2, 1fr); }
  /* New leads folds to its header on the home screen (Marisa, 2026-09-26). */
  .mnewleads .mph { cursor: pointer; }
  .mnewleads .mph h3 .mcar { display: inline-block; font-size: 11px; opacity: .6; margin-right: 6px; transition: transform .15s; }
  .mnewleads.open .mph h3 .mcar { transform: rotate(90deg); }
  .mnewleads:not(.open) .mnlbody { display: none; }
  .mnewleads:not(.open) .mph { margin-bottom: 0; }
  /* Flag icons get a finger sized target on phones. */
  .flagbtn { padding: 4px; }
  .flagbtn svg { width: 18px; height: 18px; }
  .flagbtn.fl-call_back.on { color: #16a34a; }
  .flagbtn.fl-no_pictures.on { color: #0284c7; }
  .mtnm { font-size: 13.5px; font-weight: 700; color: var(--text); }
  .mtsub { font-size: 11.5px; color: #8a93a3; }
  /* New leads panel: the desktop card's table, sized for a phone. */
  .mnlpill { font-size: 11.5px; font-weight: 800; color: var(--accent); background: #fee2e2; padding: 3px 9px; border-radius: 8px; }
  .mnewleads .nl-table { font-size: 13.5px; min-width: 0; }   /* beats the global table{min-width:640px} */
  .mnewleads .nl-table th { padding: 0 6px 6px; font-size: 11px; }
  .mnewleads .nl-table td { padding: 7px 6px; border-top-color: #f1f3f8; }
  .mnewleads .nl-table tr.nl-total td { border-top-color: #e8ebf2; }
  .mnewleads .nl-link { min-width: 48px; padding: 6px 10px; text-align: center; background: #fee2e2; color: var(--accent); }
  .mnewleads .nl-day.nl-today, .mnewleads .nl-day.nl-today b { color: var(--accent); }
  .mnewleads .ghint { font-size: 11.5px; color: #8a93a3; }
  .mempty { color: #8a93a3; text-align: center; padding: 16px; font-weight: 600; font-size: 13px; }

  /* ---------------------- Contacts as cards (injected #mContacts) ---------------------- */
  #view-contacts > *:not(#mContacts) { display: none !important; }   /* hide native table + filter wall */
  #mContacts { display: block; }
  .mchead { display: flex; align-items: center; gap: 10px; margin: 2px 2px 12px; }
  .mchead h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.03em; flex: 1; color: var(--text); }
  .mcnt { font-size: 12px; font-weight: 800; color: var(--accent); background: #fee2e2; padding: 4px 10px; border-radius: 9px; }
  .mcsearch { display: flex; align-items: center; gap: 9px; background: #fff; border-radius: 13px;
    padding: 11px 14px; box-shadow: var(--shadow); margin-bottom: 11px; }
  .mcsearch svg { width: 18px; height: 18px; color: #8a93a3; flex: 0 0 auto; }
  .mcsearch input { border: none; outline: none; flex: 1; font: inherit; font-size: 14px; color: var(--text); background: transparent; }
  .maddbtn { width: 100%; border: none; border-radius: 13px; padding: 12px; margin-bottom: 14px;
    background: linear-gradient(135deg,#ff4b3a,#d10000); color: #fff; font: inherit; font-weight: 800; font-size: 14px;
    box-shadow: 0 8px 18px rgba(214,40,40,.28); }
  .mclist { display: flex; flex-direction: column; gap: 11px; }
  .mccard { background: #fff; border-radius: 14px; padding: 12px; box-shadow: var(--shadow);
    display: flex; gap: 12px; align-items: flex-start; }
  .mcav { width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto; color: #fff; font-weight: 800; font-size: 15px;
    display: flex; align-items: center; justify-content: center; }
  .mcmid { flex: 1; min-width: 0; }
  .mcn { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
  .mcaddr { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mctags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
  .mstag { font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 7px; letter-spacing: .02em; text-transform: uppercase; }
  .mstag.new { background: #fef4e3; color: #b45309; }
  .mstag.offer { background: #e9f1fe; color: #1d4ed8; }
  .mstag.acc { background: #e7f8f1; color: #047857; }
  .mstag.contract { background: #f0ebfe; color: #6d28d9; }
  .mstag.dead { background: #eef1f6; color: #8a93a3; }
  .mstag.zillow { background: #e7f8f1; color: #0e8a5f; }
  .mcact { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
  .mqbtn { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; }
  .mqbtn svg { width: 17px; height: 17px; }
  .mqbtn.call { background: #10b981; }
  .mqbtn.text { background: linear-gradient(135deg,#ff4b3a,#d10000); }
  /* Quick actions are <button> now (they route through the CRM number rather
     than handing off to the phone's dialer/Messages), so reset button chrome. */
  .mqbtn { border: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
  .mqbtn:active { transform: scale(.94); }

  /* Text composer sheet — near-full-height.

     A short box meant you couldn't read back a message before sending it, so
     this fills most of the screen: pinned header, a write area that takes all
     remaining space, and actions anchored at the bottom. dvh (with a vh
     fallback) keeps it correct when the phone keyboard opens. */
  .mtext-bg { align-items: flex-end; }
  .mtextsheet {
    display: flex; flex-direction: column;
    height: 88vh; height: 88dvh; max-height: 88dvh;
    padding: 0 16px calc(14px + env(safe-area-inset-bottom));
  }
  .mtexthead {
    display: flex; align-items: flex-start; gap: 12px;
    padding-bottom: 12px; border-bottom: 1px solid #e6e9f0; margin-bottom: 12px;
  }
  .mtextwho { flex: 1; min-width: 0; }
  .mtextname {
    font-size: 19px; font-weight: 800; color: var(--text, #131722);
    letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mtextnum { font-size: 13px; color: var(--muted, #6b7280); margin-top: 2px; }
  .mtextx {
    flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 10px;
    background: #eef1f6; color: #3a4254; font-size: 22px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  .mtextsheet textarea {
    flex: 1 1 auto; width: 100%; box-sizing: border-box; min-height: 140px;
    border: 1px solid #d9dee8; border-radius: 12px; padding: 14px;
    font: inherit; font-size: 16px; /* 16px stops iOS zoom-on-focus */
    line-height: 1.5; resize: none; background: #fff; color: var(--text, #131722);
  }
  .mtextsheet textarea:focus { outline: 2px solid #ff4b3a; outline-offset: 1px; border-color: transparent; }
  .mtextmeta {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    font-size: 12px; color: var(--muted, #6b7280); padding: 8px 2px 0;
  }
  .mtextmeta .warn { color: #b45309; font-weight: 600; }
  .mtextfrom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mtextfoot { display: flex; gap: 10px; margin-top: 12px; }
  .mtbtn {
    flex: 1; border: 0; border-radius: 12px; padding: 15px 16px;
    font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  }
  .mtbtn.ghost { background: #eef1f6; color: #3a4254; flex: 0 0 38%; }
  .mtbtn.send { background: linear-gradient(135deg,#ff4b3a,#d10000); color: #fff; }
  .mtbtn[disabled] { opacity: .6; }

  /* Short screens: give the write area proportionally more of the sheet. */
  @media (max-height: 700px) {
    .mtextsheet { height: 92vh; height: 92dvh; max-height: 92dvh; }
    .mtextname { font-size: 17px; }
  }

  /* ---------------------- Light theme touch-ups for remaining native views ---------------------- */
  main { max-width: 100%; }
  .viewhead h2 { color: var(--text); }
  .field label, .subhead, .hint, th, .kv b { color: var(--muted); }
  .field input, .field select, .field textarea, .search, .filterbar select, .filterbar input, .bulkbar select {
    background: #fff !important; border: 1px solid var(--line) !important; color: var(--text) !important;
  }
  .field input::placeholder, .search::placeholder, input::placeholder { color: #9aa3b2; }
  table th { background: #f7f8fb; color: var(--muted); }
  table td { color: var(--text); border-bottom-color: var(--line); }
  tr:hover td { background: #f7f8fb; }
  .btn.ghost { background: #fff; color: var(--text); border: 1px solid var(--line); }

  /* Pipeline board columns → light, comfy width */
  .board .col { background: #fff; border-color: var(--line); flex: 0 0 84%; }
  .col h3 { color: var(--text); }
  .pcard { background: #fff; border-color: var(--line); box-shadow: 0 2px 8px rgba(19,23,34,.06); }
  .pcard .nm { color: var(--text); }

  /* Tasks list light */
  .taskitem { background: #fff; border-color: var(--line); box-shadow: var(--shadow); }
  .taskitem .tt { color: var(--text); }

  /* Modal stays full-screen (native rule) but on light surface */
  .modal .mhead { background: #fff !important; }
  .modal .mhead h3, .modal .sec, .modal label { color: var(--text); }
  .overlay { background: rgba(19,23,34,.4); }

  /* Conversations already light in the base — just ensure comfortable list width */
  .conv-list { flex-basis: 200px; width: 200px; }

  /* ---------------------- Bold buttons on light theme ---------------------- */
  /* MOBILE BUTTON POLISH */
  .btn { background: linear-gradient(135deg,#ff4b3a,#d10000) !important; color:#fff !important;
    border: 1px solid transparent !important; box-shadow: 0 6px 16px rgba(214,40,40,.24) !important; }
  .btn.ghost { background:#fff !important; color:var(--text) !important; border:1px solid var(--line) !important; box-shadow:var(--shadow) !important; }
  .btn.danger { background:#dc2626 !important; }
  .btn.blue { background: linear-gradient(135deg,#3b82f6,#1d4ed8) !important; border-color:transparent !important; color:#fff !important; }


  /* ---------------------- Info banners readable on light (Lead Engine etc.) ---------------------- */
  .banner { background:#eef4ff !important; border:1px solid #cddcff !important; color:#22344f !important; line-height:1.55; }
  .banner b, .banner code { color:#0f2440; background:transparent; }
  .status-badge.ls-new { background:#fef3c7 !important; color:#92400e !important; border-color:#fcd34d !important; }
  .status-badge.ls-queue { background:#e0edff !important; color:#1d4ed8 !important; border-color:#bcd4ff !important; }
  .status-badge.ls-working { background:#eef1f6 !important; color:#475467 !important; border-color:#e0e4ec !important; }

  /* ---------------------- Settings: full-width, no horizontal overflow ---------------------- */
  #view-settings .panelbox, #view-settings .sec, #view-settings .adminbar,
  #view-settings .banner, #view-settings > * { max-width:100% !important; width:100% !important; }
  #view-settings .panelbox { padding:16px; }
  #view-settings .grid2, #view-settings .grid3 { grid-template-columns:1fr !important; }
  #view-settings input, #view-settings select, #view-settings textarea { max-width:100% !important; width:100% !important; }
  /* Turn wide settings tables into stacked rows (kills sideways scrolling) */
  #view-settings table { min-width:0 !important; width:100% !important; }
  #view-settings table thead { display:none; }
  #view-settings table tr { display:block; border:1px solid var(--line); border-radius:12px;
    margin-bottom:8px; padding:4px 2px; background:#fff; }
  #view-settings table td { display:flex; justify-content:space-between; gap:12px; text-align:right;
    border:none !important; padding:7px 12px; color:var(--text); }
  #view-settings table td .btn { white-space:nowrap; }

  /* ---------------------- Inbox: single-column, app-like ---------------------- */
  #view-conversations .conv { height: calc(100vh - 168px); min-height:0; }
  #view-conversations .conv-body { flex-direction: column; }
  #view-conversations .conv-list { flex:0 0 auto; width:100% !important; max-height:42vh;
    border-right:none; border-bottom:1px solid var(--line); }
  /* min-height:0 lets the thread scroll inside the card instead of growing past it,
     which hid every message after the first and the reply box */
  #view-conversations .conv-detail { width:100%; min-height:0; }
  /* the dark theme's bubble and unread colors vanish on this light layout */
  #view-conversations .cmsg.in .cbub { background:#eef0f4; color:var(--text); }
  /* Messenger: full-width Text/Messenger switch that is easy to hit with a thumb */
  #view-conversations .conv-chanbar { padding:10px 12px 0; }
  #view-conversations .conv-chansel { width:100%; }
  #view-conversations .conv-chansel button { flex:1; padding:10px 8px; font-size:14px; }
  #view-conversations .conv-thead { flex-wrap:wrap; }
  #view-conversations .conv-item.unread .conv-name { color:var(--text); }
  #view-conversations .conv-h { flex-wrap:wrap; gap:8px; }
  /* Texts / Calls / Emails: three big colored boxes, easy to hit with a thumb.
     Each keeps its color when not selected (tinted) and fills solid when it is. */
  #view-conversations .conv-tabs { width:100%; display:flex; gap:8px; }
  #view-conversations .conv-tabs button {
    flex:1; min-height:52px; padding:12px 6px; border-radius:14px;
    font-size:16px; font-weight:800; letter-spacing:.2px;
    border:2px solid var(--ct); color:var(--ct); background:var(--ctbg);
    transition:background .15s ease, color .15s ease;
  }
  #view-conversations .conv-tabs button.active {
    background:var(--ct); color:#fff; box-shadow:0 6px 16px rgba(19,23,34,.18);
  }
  /* Brand red with white lettering (Marisa, 2026-09-25). The selected one is
     a deeper red with a white ring so it still stands out. */
  #view-conversations .conv-tabs button { --ct:#c0122e; --ctbg:#c0122e; color:#fff; }
  #view-conversations .conv-tabs button.active { background:#8f0d22; border-color:#8f0d22; box-shadow:inset 0 0 0 2px #fff, 0 6px 16px rgba(19,23,34,.18); }
  #view-conversations .conv-actions { width:100%; display:flex; gap:8px; }
  #view-conversations .conv-actions .gpill { flex:1; text-align:center; padding:11px 8px; font-size:13px; font-weight:700; }
  #view-conversations .conv-item { padding:14px; }
  #view-conversations .conv-av { width:42px; height:42px; flex-basis:42px; }

  /* ---------------- New card: Call | Text | Email | RVM | Message ----------------
     Opened by the round keypad button bottom right (Marisa, 2026-10-02). */
  .dfab { position:fixed; right:16px; z-index:65; width:62px; height:62px; border-radius:50%;
    bottom:calc(var(--mnav-h, 74px) + env(safe-area-inset-bottom) + 14px);
    border:none; background:#131722; color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 26px rgba(19,23,34,.35); }
  .dfab:active { transform:scale(.94); }
  .dfab svg { width:26px; height:26px; }
  body:not(.app-live) .dfab, body.dnew-open .dfab, body.th-open .dfab,
  body:has(.mselbar.open) .dfab, body:has(#callWidget:not(.hidden)) .dfab { display:none; }

  .dialer-bg { position:fixed; inset:0; z-index:120; background:rgba(19,23,34,.45); display:none;
    align-items:flex-start; justify-content:center; padding:calc(4vh + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom)); }
  .dialer-bg.open { display:flex; animation:mfade .2s ease; }
  .dnew { width:100%; max-width:440px; max-height:100%; overflow-y:auto; background:#fff; color:var(--text);
    border-radius:var(--radius); padding:18px 18px 16px; box-shadow:0 20px 50px rgba(19,23,34,.3); animation:mup .24s ease; }
  .dhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .dhead h3 { margin:0; font-size:24px; font-weight:800; color:var(--text); }
  .dclose { border:1px solid var(--line); background:#fff; color:var(--text); border-radius:12px;
    padding:9px 16px; font-size:15px; font-weight:700; }

  .dtabs { display:flex; border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:12px; }
  .dtabs button { flex:1 1 auto; min-width:0; border:none; border-left:1px solid var(--line); background:#fff;
    color:var(--text); padding:12px 4px; font-size:14px; font-weight:700; white-space:nowrap; letter-spacing:-.01em; }
  .dtabs button:first-child { border-left:none; }
  .dtabs button.on { background:var(--accent); color:#fff; border-color:var(--accent); }

  .dnumbox { border:1px solid var(--line); border-radius:12px; padding:12px 10px 6px; margin-bottom:14px; text-align:center; }
  .dnum { font-size:30px; font-weight:700; letter-spacing:.02em; color:var(--text); min-height:38px; line-height:38px;
    word-break:break-all; }
  .dnum.empty { color:#a3abb8; font-weight:500; }
  .dmatch { font-size:13px; font-weight:800; color:var(--accent); min-height:18px; }

  .dkeys { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
  .dkey { background:var(--surface-lite); border:1px solid var(--line); border-radius:12px; padding:11px 0 8px;
    font-size:27px; font-weight:700; color:var(--text); line-height:1.05; }
  .dkey:active { background:#e3e7ef; }
  .dkey small { display:block; font-size:10.5px; font-weight:700; color:var(--muted); letter-spacing:.18em; margin-top:3px; }

  .dgo { display:grid; grid-template-columns:76px 1fr; gap:12px; }
  .dback { border:1px solid var(--line); background:#fff; color:var(--text); border-radius:12px; height:54px;
    display:flex; align-items:center; justify-content:center; }
  .dback svg { width:24px; height:24px; }
  .dcall { border:none; border-radius:12px; height:54px; background:#16a34a; color:#fff; font-size:18px; font-weight:800;
    box-shadow:0 8px 18px rgba(22,163,74,.28); }
  .dcall:disabled { opacity:.6; }
  .dhint { margin:12px 2px 0; font-size:14px; line-height:1.45; color:var(--muted); }

  .dsearch { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:12px; padding:13px 14px;
    font-size:16px; background:#fff; color:var(--text); margin-bottom:10px; }
  .dlist { max-height:46vh; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
  .drow { text-align:left; border:1px solid var(--line); background:var(--surface-lite); border-radius:12px; padding:11px 13px; }
  .drow b { display:block; font-size:15px; color:var(--text); }
  .drow span { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
  .drow .dtag { display:inline-block; margin-left:8px; font-size:10.5px; font-weight:800; color:#991b1b; background:#fee2e2;
    border-radius:6px; padding:2px 6px; vertical-align:middle; }
  .dnote { color:var(--muted); font-size:14px; margin:6px 2px; }


  /* ============ Archive folder, multi-select & "no longer listed" review ====
     Mobile counterparts of the desktop bulk bar / Archive view. Everything
     here is inside the phone breakpoint, so desktop is untouched. ========= */

  /* Chip row under the Contacts title: Archive folder + Select mode */
  .mcbar { display:flex; gap:8px; flex-wrap:wrap; margin:0 2px 12px; }
  .mchip { border:1px solid var(--line); background:#fff; color:var(--muted);
    border-radius:11px; padding:8px 13px; font-size:12.5px; font-weight:800;
    box-shadow:var(--shadow); line-height:1; }
  .mchip.on { background:var(--accent); border-color:var(--accent); color:#fff; }

  /* "N properties are no longer listed" banner */
  .mreview { width:100%; border:1px solid #fcd34d; background:#fffbeb; color:#92400e;
    border-radius:13px; padding:12px 14px; margin-bottom:12px; font-size:13px;
    font-weight:700; text-align:left; line-height:1.4; box-shadow:var(--shadow); }
  .mreview b { font-weight:900; }

  /* Tick box shown on each card while in Select mode */
  .mcheck { width:26px; height:26px; border-radius:9px; border:2px solid #cfd5e0;
    display:flex; align-items:center; justify-content:center; color:#fff; flex:0 0 auto; }
  .mcheck.on { background:var(--accent); border-color:var(--accent); }
  .mcheck svg { width:15px; height:15px; }
  .mccard.picked { outline:2px solid var(--accent); outline-offset:-1px; background:#fff5f5; }
  .mccard.lastseen { outline:2px solid #60a5fa; outline-offset:-1px; }

  .mstag.review { background:#fef3c7; color:#92400e; }
  .mstag.relisted { background:#f0ebfe; color:#6d28d9; }
  .mstag.dead { background:#eef1f6; color:#5b6472; }

  /* Fixed action bar that rides above the bottom nav while rows are picked */
  .mselbar { position:fixed; left:10px; right:10px; z-index:70; display:none;
    bottom:calc(var(--mnav-h, 74px) + env(safe-area-inset-bottom) + 8px);
    align-items:center; gap:8px; flex-wrap:wrap;
    background:#131722; color:#fff; border-radius:16px; padding:11px 13px;
    box-shadow:0 10px 30px rgba(19,23,34,.35); }
  .mselbar.open { display:flex; animation:mup .2s ease; }
  .mselbar { flex-wrap:wrap; row-gap:8px; } /* admins get 4 buttons, which overflow one row on a phone */
  .mselcnt { font-size:12.5px; font-weight:800; flex:1 1 auto; white-space:nowrap; }
  .mselbtn { border:none; border-radius:11px; padding:9px 11px; font-size:12px;
    font-weight:800; background:#fff; color:#131722; line-height:1; white-space:nowrap; }
  .mselbtn.danger { background:#dc2626; color:#fff; }
  .mselbtn.ghost { background:rgba(255,255,255,.16); color:#fff; }

  /* A full-screen modal must sit ABOVE the bottom tab bar (z-index 60) and the
     More sheet / dialer (120) — otherwise the nav covers the modal's footer
     buttons and Cancel / Confirm cannot be tapped at all. */
  .overlay { z-index: 200; }
  .modal .mfoot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

  /* Review walkthrough + bulk confirm modals on a phone */
  .reviewcard { background:#fff !important; border-color:var(--line) !important; }
  .reviewcard .raddr { font-size:16px; }
  .reviewcard .rwhy { background:#fffbeb; border-left-color:#fcd34d; color:#92400e; }
  .warnbox { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
  .bulklist { background:#f7f8fb; border-color:var(--line); }
  /* Five buttons stacked would run off the bottom of a phone, so the three
     primary choices stack full-width and the two "all remaining" shortcuts
     share one compact row underneath. */
  .revfoot { flex-direction:column; align-items:stretch; gap:7px;
    max-height:56vh; overflow-y:auto; }
  .revfoot .btn { width:100%; padding:12px 14px; }
  .revfoot .revall { flex-direction:row; gap:7px; margin-top:2px;
    flex:0 0 auto; flex-basis:auto; }   /* desktop sets flex-basis:100% for its own row layout */
  .revfoot .revall .btn { flex:1 1 0; width:auto; padding:10px 8px; font-size:11.5px; }

  /* The call panel spans the phone, with big buttons you can hit without
     looking, and sits above the tab bar. */
  .call-widget { left:10px; right:10px; width:auto; bottom:calc(10px + env(safe-area-inset-bottom)); }
  .call-widget .cw-num { font-size:18px; }
  .call-widget .cw-actions { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
  .call-widget .cw-actions .btn { padding:13px 8px; font-size:15px; min-height:48px; }
  .call-widget .cw-actions #cwHang { grid-column:1 / -1; }
  .call-widget .cw-key { padding:14px 0; font-size:22px; }

}

/* ===========================================================================
   Dispo tab + contact-modal extras on phones (public/dispo.js).
   Everything stays inside the mobile breakpoint so desktop is untouched.
   ========================================================================= */
@media (max-width: 720px) {
  /* Pane switcher scrolls sideways instead of wrapping onto three lines. */
  #dispoTabs{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;
  }
  #dispoTabs::-webkit-scrollbar{display:none}
  #dispoTabs .btn{flex:0 0 auto;white-space:nowrap}
  #dispoTabs span[style*="flex:1"]{display:none}

  /* Stack list rows so the action never squeezes the text to one word a line. */
  .rowitem{
    flex-direction:column;align-items:stretch;gap:8px;
    padding:12px 0;
  }
  .rowitem .actions-row{justify-content:flex-start}
  .rowitem > div:first-child{min-width:0}
  .rowitem .btn,
  .rowitem a.btn{width:100%;text-align:center}
  .rowitem select{width:100%}

  .kvgrid{grid-template-columns:1fr;gap:4px}

  /* Walkthrough photos: three across on a phone. */
  .bogGrid{grid-template-columns:repeat(3,1fr);gap:6px}
  .bogDel{width:26px;height:26px;line-height:24px}

  /* Modal fields go full width rather than sitting in a cramped two-up. */
  #propExtras .grid2{grid-template-columns:1fr}
}

/* ---- Seller-finance overlay badges + tappable Zillow link (cards) ---- */
@media (max-width: 720px) {
  .mstag.fsbo { background: #fde8e8; color: #c81e1e; }
  .mstag.kw { background: #f0ebfe; color: #6d28d9; }
  a.mstag { text-decoration: none; }
}

/* ---- Pipeline rows (mobile only) ---- */
@media (max-width: 720px) {
  /* -------------------------------------------------------------------------
     Pipeline rows: stop the whole tab rendering zoomed out.

     Each row is a nowrap flex line holding info + phone + text + Zillow + a
     stage <select> with a hard min-width:152px. Together that exceeds a phone's
     width, and because the row cannot break, the browser shrink-to-fits the
     PAGE — the layout viewport went 390 -> 431, so everything on Pipeline
     (including modals and sheets opened from it) rendered ~10% small.

     Letting the row wrap and dropping the select's min-width keeps the layout
     viewport at the device width. Desktop is untouched.
     ---------------------------------------------------------------------- */
  .pl-row { flex-wrap: wrap; row-gap: 8px; }
  .pl-row .info { flex: 1 1 100%; min-width: 0; }
  .pl-row select.search {
    min-width: 0; flex: 1 1 auto; max-width: 100%;
    font-size: 16px; /* stops iOS zooming in when the picker opens */
  }
  .pl-row .pl-phone { flex: 0 0 auto; }
  .pl-row .zlink.row { flex: 0 0 auto; }
}

/* ============================================================================
 * Full screen text conversation (mobile.js openThread), styled after the
 * iPhone Messages app in the RenewEQ colors. Only ever built on a phone.
 * ========================================================================== */
.mthread { position: fixed; inset: 0; z-index: 90; background: #fff; display: none;
  flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
.mthread.open { display: flex; animation: thIn .25s ease; }
@keyframes thIn { from { transform: translateX(100%); } to { transform: none; } }
body.th-open .mnav, body.th-open .mselbar { display: none !important; }

.thhead { flex: 0 0 auto; display: grid; grid-template-columns: 84px 1fr 84px; align-items: center;
  padding: calc(env(safe-area-inset-top) + 6px) 8px 8px; background: rgba(247,247,248,.94);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: .5px solid #d8d8dc; }
.thback { display: flex; align-items: center; gap: 0; background: none; border: 0; color: #c8102e;
  font-size: 17px; padding: 6px 0; justify-self: start; }
.thback svg { width: 26px; height: 26px; }
.thwho { background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0; color: #111; min-width: 0; }
.thav { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 600;
  font-size: 17px; color: #fff; background: linear-gradient(180deg, #a1a1a8, #86868d); }
.thname { font-size: 12px; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thname i { font-style: normal; color: #8e8e93; }
.thsub { font-size: 11px; color: #8e8e93; }
.thcall { justify-self: end; width: 38px; height: 38px; border-radius: 50%; border: 0; background: none;
  color: #c8102e; display: grid; place-items: center; }
.thcall svg { width: 22px; height: 22px; }
.thacts { justify-self: end; display: flex; align-items: center; gap: 2px; }
/* Anything opened from the thread (voicemail drop, etc.) sits on top of it. */
body.th-open #modalMount .overlay { z-index: 96; }

/* Up and down only: the bubble tails reach past the list's padding, which let
   the whole conversation be dragged sideways. */
.thlist { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; -webkit-overflow-scrolling: touch;
  padding: 8px 14px 12px; overscroll-behavior: contain; background: #fff; }
.thmore { text-align: center; color: #8e8e93; font-size: 12px; min-height: 18px; padding: 6px 0; }
.thempty { text-align: center; color: #8e8e93; font-size: 14px; padding: 40px 0; }
.thday { text-align: center; color: #8e8e93; font-size: 11px; margin: 14px 0 6px; }
.thday b { font-weight: 600; }

.thmsg { display: flex; flex-direction: column; max-width: 76%; margin-top: 2px; width: fit-content; }
.thmsg.in { align-items: flex-start; margin-right: auto; }
.thmsg.out { align-items: flex-end; margin-left: auto; }
.thmsg.tail { margin-bottom: 8px; }
.thbub { position: relative; padding: 8px 13px; border-radius: 19px; font-size: 16.5px; line-height: 1.3;
  word-wrap: break-word; overflow-wrap: anywhere; }
.thmsg.in .thbub { background: #e9e9eb; color: #000; }
.thmsg.out .thbub { background: #c8102e; color: #fff; }
.thmsg.out.msgr .thbub { background: #0a7cff; }
.thmsg.pending .thbub { opacity: .6; }
.thmsg.failed .thbub { background: #8e8e93; }
.thbub a { color: inherit; text-decoration: underline; }
/* The little tail on the last bubble of a run. */
.thmsg.tail .thbub::before, .thmsg.tail .thbub::after { content: ""; position: absolute; bottom: 0; height: 20px; }
.thmsg.in.tail .thbub::before { left: -7px; width: 20px; background: #e9e9eb; border-bottom-right-radius: 16px 14px; }
.thmsg.in.tail .thbub::after { left: -26px; width: 26px; background: #fff; border-bottom-right-radius: 10px; }
.thmsg.out.tail .thbub::before { right: -7px; width: 20px; background: #c8102e; border-bottom-left-radius: 16px 14px; }
.thmsg.out.msgr.tail .thbub::before { background: #0a7cff; }
.thmsg.out.failed.tail .thbub::before { background: #8e8e93; }
.thmsg.out.tail .thbub::after { right: -26px; width: 26px; background: #fff; border-bottom-left-radius: 10px; }
.thmsg.pending .thbub::before { opacity: .6; }
.thtime { display: none; }
.thstat { text-align: right; font-size: 11px; color: #8e8e93; margin: -4px 4px 8px; }
.thstat.bad { color: #c8102e; font-weight: 600; }

.thmedia { display: flex; flex-direction: column; gap: 3px; margin-bottom: 3px; }
.thmsg.out .thmedia { align-items: flex-end; }
.thimg { border: 0; padding: 0; background: #e9e9eb; border-radius: 18px; overflow: hidden; display: block;
  min-width: 120px; min-height: 90px; max-width: 240px; }
.thimg img { display: block; max-width: 240px; max-height: 320px; width: auto; height: auto; }
.thimg.broken { display: grid; place-items: center; color: #8e8e93; font-size: 12px; }
.thimg.broken::after { content: "Photo unavailable"; }
.thfile { display: flex; align-items: center; gap: 10px; border: 0; background: #f2f2f7; border-radius: 16px;
  padding: 10px 14px 10px 10px; max-width: 250px; text-align: left; color: #000; }
.thfico { position: relative; width: 36px; height: 44px; color: #c8102e; flex: 0 0 auto; }
.thfico svg { width: 36px; height: 44px; }
.thfico b { position: absolute; left: 0; right: 0; bottom: 2px; font-size: 8px; text-align: center; color: #c8102e; }
.thfname { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.thblocked { flex: 0 0 auto; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); text-align: center;
  font-size: 13px; color: #6b6b70; background: #f7f7f8; border-top: .5px solid #d8d8dc; }
.thtray { display: none; gap: 10px; padding: 10px 12px 0; overflow-x: auto; background: #fff; border-top: .5px solid #e5e5ea; }
.thtray.on { display: flex; }
.thchip { position: relative; flex: 0 0 auto; }
.thchip img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; display: block; }
.thchipdoc { display: flex; align-items: center; gap: 6px; height: 64px; max-width: 170px; padding: 0 10px;
  border-radius: 12px; background: #f2f2f7; font-size: 12px; color: #000; }
.thchipdoc svg { width: 24px; height: 24px; color: #c8102e; flex: 0 0 auto; }
.thchipdoc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thchip button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #fff; background: #3a3a3c; color: #fff; font-size: 15px; line-height: 1; padding: 0; }
.thcompose { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #fff; }
.thplus { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 0; background: #e9e9eb;
  color: #6b6b70; display: grid; place-items: center; margin-bottom: 1px; padding: 0; }
.thplus svg { width: 20px; height: 20px; }
.thfield { flex: 1 1 auto; display: flex; align-items: flex-end; border: 1px solid #c7c7cc; border-radius: 19px;
  padding: 3px 3px 3px 12px; min-height: 36px; background: #fff; }
.thfield textarea { flex: 1 1 auto; border: 0; outline: 0; resize: none; background: transparent; font: inherit;
  font-size: 16.5px; line-height: 1.3; padding: 5px 0; max-height: 140px; min-height: 22px; color: #000;
  box-shadow: none; width: auto; margin: 0; }
.thsend { flex: 0 0 auto; width: 29px; height: 29px; border-radius: 50%; border: 0; background: #c8102e; color: #fff;
  display: grid; place-items: center; padding: 0; margin-left: 6px; }
.thsend svg { width: 17px; height: 17px; }
.thsend:disabled { background: #c7c7cc; }

.thmenu-bg { position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.3); display: none; align-items: flex-end; }
.thmenu-bg.open { display: flex; }
.thmenu { width: 100%; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 1px; }
.thmenu button { display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; height: 56px;
  background: rgba(250,250,250,.97); color: #c8102e; font-size: 19px; }
.thmenu button svg { width: 22px; height: 22px; }
.thmenu button:first-child { border-radius: 14px 14px 0 0; }
.thmenu button:nth-child(4) { border-radius: 0 0 14px 14px; }
.thmenu button.cancel { margin-top: 8px; border-radius: 14px; font-weight: 600; }

.mviewer { position: fixed; inset: 0; z-index: 2100; background: #000; display: flex; flex-direction: column; }
.mvhead { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 8px) 14px 10px; color: #fff; }
.mvhead span { flex: 1 1 auto; text-align: center; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mvhead button { background: none; border: 0; color: #fff; font-size: 17px; font-weight: 600; padding: 4px 2px; }
.mvbody { flex: 1 1 auto; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  touch-action: none; padding-bottom: env(safe-area-inset-bottom); }
.mvimg { max-width: 100%; max-height: 100%; transform-origin: center center; user-select: none; -webkit-user-drag: none; }
.mvbody iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.mvnav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.18); color: #fff; font-size: 28px; line-height: 1; display: grid; place-items: center; z-index: 1; }
.mvnav.prev { left: 8px; }
.mvnav.next { right: 8px; }
.mvimg.in-r { animation: mvInR .18s ease-out; }
.mvimg.in-l { animation: mvInL .18s ease-out; }
@keyframes mvInR { from { transform: translateX(40%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mvInL { from { transform: translateX(-40%); opacity: 0; } to { transform: none; opacity: 1; } }

/* Desktop Inbox: attachments above the bubble. */
.cmedia { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }

/* Inbox search boxes stack on a phone so each placeholder reads in full. */
@media (max-width: 720px) {
  #view-conversations .conv-search { flex-direction:column; padding:8px 12px; }
  #view-conversations .conv-search .search { font-size:16px; } /* 16px stops iOS zooming in on focus */
}

/* Inbox rows on a phone: stack Archive over Delete so the name keeps its room. */
@media (max-width: 720px) {
  #view-conversations .conv-btns { flex-direction:column; gap:4px; }
  #view-conversations .conv-btns .conv-hide { padding:5px 10px; }
}

/* Inbox: the header's top right magnifier opens the name and property search,
   which stays tucked away otherwise so the messages get the room. */
@media (max-width: 720px) {
  body.on-inbox header.topbar .hdr-search {
    display:flex; align-items:center; justify-content:center; margin-left:auto;
    width:40px; height:40px; border-radius:12px; cursor:pointer;
    background:transparent; border:1px solid var(--line); color:var(--text);
  }
  body.on-inbox header.topbar .hdr-search.on { background:#c0122e; border-color:#c0122e; color:#fff; }
  #view-conversations .conv-search { display:none; }
  #view-conversations .conv-search.open { display:flex; }
}

/* Daily overview on the phone's Home screen. */
@media (max-width: 720px) {
  .mrecap .mph { flex-wrap: wrap; gap: 8px; }
  .mrecap .rcp-day { min-width: 0; font-size: 12px; }
  .mrecap .rcp-arrow { width: 28px; height: 28px; background: #f4f6fa; border-color: #e8ebf2; }
  .mrecap .rcp-tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .mrecap .rcp-tile { padding: 10px; background: #f7f8fb; border-color: #eef1f6; }
  .mrecap .rcp-tile.on { background: #fee2e2; border-color: var(--accent); }
  .mrecap .rcp-n { font-size: 20px; }
  .mrecap .rcp-l { font-size: 11px; line-height: 1.2; }
  .mrecap .rcp-who { background: #f1f3f8; }
  .mrecap .rcp-t { flex-basis: 56px; }
  .mrecap .rcp-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mrecap .rcp-stat { background: #f7f8fb; border-color: #eef1f6; }
  .mrecap .rcp-time { font-size: 10.5px; margin-top: 2px; }
  .mrecap .rcp-active { background: #f7f8fb; border-color: #eef1f6; padding: 10px 12px; }
  .mrecap .rcp-active-h b { font-size: 17px; }
}
.thmenu.two button:nth-child(2) { border-radius: 0; }
.thmenu.two button:nth-last-child(2) { border-radius: 0 0 14px 14px; }