/* Messages PWA — mobile-first dark theme (Sales Board palette, teal accent). */
:root {
    --bg:        #0f1419;
    --panel:     #1a222c;
    --panel-2:   #222d3a;
    --line:      #2c3a49;
    --text:      #e8edf2;
    --muted:     #8a9bad;
    --accent:    #00695c;   /* teal — matches Text Queues admin */
    --accent-2:  #00897b;
    --in-bub:    #222d3a;   /* inbound (customer) bubble */
    --out-bub:   #00695c;   /* outbound (us) bubble */
    --up:        #34c759;
    --down:      #ff5a4d;
    --shadow:    0 2px 10px rgba(0,0,0,.35);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* A hidden element must ALWAYS be hidden. Author display rules (display:flex on
   #thread-pane / .compose-bar / .compose-preview) otherwise override the UA
   [hidden] rule, so a closed thread + its compose box bleed through under the
   conversation list (and on short lists, sit beneath the queue groups). */
[hidden] { display: none !important; }

html, body {
    margin: 0; padding: 0; height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---- viewport-locked app frame ----
   Lock the page to the viewport and give the OPEN THREAD its own scroll region,
   so a chat opens pinned to the most recent message (and the compose bar + header
   stay put) instead of the whole document scrolling from the top (= oldest). */
body { display: flex; flex-direction: column; overflow: hidden; }
#app { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#list-pane { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }

/* ---- conversation search box ---- */
#conv-search-row { padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg); }
.conv-search {
    width: 100%; box-sizing: border-box; padding: 9px 12px;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--panel); color: var(--text); font-size: 15px;
    -webkit-appearance: none; appearance: none;
}
.conv-search::placeholder { color: var(--muted); }
.conv-search:focus { outline: none; border-color: var(--accent-2); }

/* ---- pull-to-refresh ---- */
/* Height-reveal (normal flow) — app.js sets .ptr height live during the drag, so the
   list below shifts down naturally; no transforms. .snap animates the release/settle. */
.ptr { height: 0; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.ptr.snap { transition: height .22s ease; }
.ptr-inner { display: flex; align-items: center; gap: 8px; height: 52px; color: var(--muted); font-size: 13px; }
.ptr-spin { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--accent-2); border-radius: 50%; box-sizing: border-box; }
.ptr.ready .ptr-spin { border-top-color: #fff; }
.ptr.spin .ptr-spin { animation: ptr-rot .7s linear infinite; }
@keyframes ptr-rot { to { transform: rotate(360deg); } }

/* ---- header ---- */
.hdr {
    flex: 0 0 auto;
    position: sticky; top: 0; z-index: 10;
    background: var(--bg);
    padding: calc(env(safe-area-inset-top) + 12px) 16px 10px;
    border-bottom: 1px solid var(--line);
}
.hdr-brand { display: flex; align-items: center; gap: 10px; }
.hdr-mark {
    font-weight: 800; letter-spacing: .5px; font-size: 16px;
    background: var(--accent); color: #fff;
    padding: 3px 8px; border-radius: 6px;
}
.hdr-title { font-size: 19px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-back {
    background: var(--panel); border: 1px solid var(--line); color: var(--text);
    font-size: 22px; line-height: 1; font-weight: 700; cursor: pointer;
    width: 32px; height: 32px; border-radius: 8px; padding: 0;
}
.btn-alerts {
    margin-left: auto; padding: 6px 12px; font-size: 13px; font-weight: 600;
    border-radius: 8px; cursor: pointer; border: 1px solid var(--line);
    background: var(--panel); color: var(--muted);
}
.btn-alerts.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- queue tabs ---- */
.queue-tabs {
    display: flex; gap: 6px; margin-top: 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.queue-tabs button {
    flex: 0 0 auto; padding: 8px 12px; font-size: 13px; font-weight: 600;
    color: var(--muted); background: var(--panel); border: 1px solid var(--line);
    border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.queue-tabs button.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.queue-tabs .q-badge {
    display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: 999px; background: var(--panel-2); color: var(--muted);
}
.queue-tabs button.active .q-badge { background: rgba(255,255,255,.22); color: #fff; }

/* ---- location toggle ---- */
.loc-row { margin-top: 10px; }
.loc-toggle { display: flex; gap: 6px; }
.loc-toggle button {
    flex: 1; padding: 8px 6px; font-size: 13px; font-weight: 600;
    color: var(--muted); background: var(--panel); border: 1px solid var(--line);
    border-radius: 8px; cursor: pointer;
}
.loc-toggle button.active { color: #fff; background: var(--accent); border-color: var(--accent); }

/* ---- mine toggle ---- */
.mine-row { margin-top: 8px; }
.mine-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.mine-toggle input { accent-color: var(--accent); width: 16px; height: 16px; }
.assignee-row { margin-top: 8px; }
.assignee-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.assignee-select {
    background: var(--panel); color: var(--text); border: 1px solid var(--line);
    border-radius: 8px; padding: 4px 8px; font-size: 13px; max-width: 220px;
}

/* ---- generic states ---- */
.state { padding: 48px 20px; text-align: center; color: var(--muted); font-size: 15px; }
.noaccess-card {
    max-width: 380px; margin: 24px auto; background: var(--panel);
    border: 1px solid var(--line); border-radius: 14px; padding: 28px 22px; box-shadow: var(--shadow);
}
.noaccess-card h2 { margin: 0 0 10px; color: var(--text); }
.noaccess-card p { margin: 6px 0; font-size: 14px; }
.muted { color: var(--muted); }
.empty { padding: 32px 24px; text-align: center; color: var(--muted); font-size: 14px; }

/* ---- conversation list ---- */
.conv-list { padding: 4px 0; }
.conv-row {
    display: flex; align-items: flex-start; gap: 12px;
    width: 100%; text-align: left; cursor: pointer;
    background: var(--panel); border: none; border-bottom: 1px solid var(--line);
    padding: 12px 16px; color: var(--text);
}
.conv-row:active { background: var(--panel-2); }
.conv-av {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; letter-spacing: .3px; margin-top: 2px;
}
.conv-main { flex: 1 1 auto; min-width: 0; }
.conv-top { display: flex; align-items: baseline; gap: 8px; }
.conv-name { font-size: 15px; font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-time { font-size: 11px; color: var(--muted); flex: 0 0 auto; }
.conv-sub { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.conv-phone { font-size: 12px; color: var(--muted); }
.conv-snip { font-size: 13px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-asg {
    font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
    background: rgba(0,105,92,.22); color: var(--accent-2);
}
.conv-asg.unassigned { background: var(--panel-2); color: var(--muted); }

/* source badge (shared list + thread) */
.src-badge {
    display: inline-block; font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: 8px; line-height: 1.5;
}
.src-line   { background: #dbeafe; color: #1e40af; }
.src-twilio { background: #dbeafe; color: #1e40af; }
.src-kenect { background: #f3e8ff; color: #6b21a8; }
.src-lc     { background: #e0e7ff; color: #3730a3; }
.src-lc_sales { background: #e0e7ff; color: #3730a3; }

/* SF department chip (Sales / Service) — shown on rows in the all-SF view */
.dept-badge {
    display: inline-block; font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: 8px; line-height: 1.5;
}
.dept-sales   { background: #dcfce7; color: #166534; }
.dept-service { background: #ffedd5; color: #9a3412; }

/* ---- thread ---- */
#thread-pane { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.thread {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 12px 14px 16px;
}
/* MMS photos inside a bubble */
.bub-media { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.bub-img {
    display: block; max-width: 100%; width: 240px; max-height: 320px;
    object-fit: cover; border-radius: 10px; background: var(--panel-2);
}
.bub-media a { line-height: 0; }
.thread-day { clear: both; text-align: center; color: var(--muted); font-size: 11px; margin: 10px 0; }
.bub {
    max-width: 78%; padding: 8px 11px; border-radius: 14px; margin: 8px 0; clear: both;
    word-wrap: break-word; overflow-wrap: anywhere; box-shadow: var(--shadow);
}
.bub.inbound  { background: var(--in-bub);  float: left;  border-bottom-left-radius: 4px; }
.bub.outbound { background: var(--out-bub); float: right; border-bottom-right-radius: 4px; color: #fff; }
.bub-body { font-size: 14px; line-height: 1.35; white-space: pre-wrap; }
.bub-meta { font-size: 11px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.bub.outbound .bub-meta { color: rgba(255,255,255,.7); }
.bub-line {
    clear: both; text-align: center; color: var(--muted); font-size: 11px;
    font-style: italic; margin: 8px 0;
}

/* ---- compose bar ---- */
.compose-bar {
    flex: 0 0 auto; z-index: 5;
    display: flex; align-items: flex-end; gap: 8px;
    background: var(--bg); border-top: 1px solid var(--line);
    padding: 8px 12px calc(env(safe-area-inset-bottom) + 8px);
}
.compose-bar textarea {
    flex: 1; resize: none; max-height: 120px; min-height: 38px;
    background: var(--panel); color: var(--text);
    border: 1px solid var(--line); border-radius: 18px;
    padding: 9px 14px; font-size: 14px; font-family: inherit; line-height: 1.3;
}
.compose-bar textarea:focus { outline: none; border-color: var(--accent); }
.compose-send {
    flex: 0 0 auto; background: var(--accent); color: #fff; border: none;
    border-radius: 18px; padding: 9px 16px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.compose-send:disabled { background: var(--panel-2); color: var(--muted); cursor: default; }
.compose-bar.disabled { flex-wrap: wrap; }
.compose-bar { flex-wrap: wrap; }
.compose-note {
    flex: 1 0 100%; color: #d9a441; font-size: 12px; padding: 2px 2px 0; order: 3;
}

/* attach (📎) button */
.compose-attach {
    flex: 0 0 auto; background: var(--panel); color: var(--muted);
    border: 1px solid var(--line); border-radius: 18px;
    width: 40px; height: 38px; font-size: 18px; line-height: 1; cursor: pointer; padding: 0;
}
.compose-attach:active { background: var(--panel-2); }

/* attachment preview strip (sits above the input row) */
.compose-preview[hidden] { display: none; }
.compose-preview {
    flex: 1 0 100%; order: -1; position: relative;
    display: inline-flex; margin-bottom: 6px;
}
.compose-preview img {
    max-width: 120px; max-height: 120px; border-radius: 10px;
    border: 1px solid var(--line); object-fit: cover;
}
.compose-preview-x {
    position: absolute; top: -8px; left: 108px;
    width: 24px; height: 24px; border-radius: 50%;
    background: #000; color: #fff; border: 1px solid var(--line);
    font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
}

.updated { text-align: center; color: var(--muted); font-size: 11px; padding: 12px 0 24px; }

/* ---- customer info: header button + slide-in sheet ---- */
.btn-info {
    background: var(--panel); border: 1px solid var(--line); color: var(--text);
    font-size: 18px; line-height: 1; cursor: pointer;
    width: 32px; height: 32px; border-radius: 8px; padding: 0;
}
.contact-backdrop {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(0,0,0,.5);
}
.contact-sheet {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 41;
    width: min(420px, 90vw);
    background: var(--bg); border-left: 1px solid var(--line);
    box-shadow: -4px 0 24px rgba(0,0,0,.45);
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .22s ease;
}
.contact-sheet.open { transform: translateX(0); }
.cs-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.cs-head strong { font-size: 17px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-close {
    background: var(--panel); border: 1px solid var(--line); color: var(--text);
    width: 30px; height: 30px; border-radius: 8px; font-size: 18px; line-height: 1; cursor: pointer; padding: 0;
}
.cs-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 32px; }
.cs-sec { padding: 10px 0; border-bottom: 1px solid var(--line); }
.cs-sec:last-child { border-bottom: 0; }
.cs-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.cs-row { display: flex; gap: 10px; padding: 3px 0; font-size: 14px; }
.cs-k { flex: 0 0 84px; color: var(--muted); }
.cs-v { flex: 1; word-break: break-word; }
.cs-v a { color: var(--accent-2); text-decoration: none; }
.cs-flag { color: var(--down); font-style: normal; font-size: 11px; }
.cs-note-shared { margin-top: 8px; font-size: 12px; color: var(--down); }
.cs-veh { padding: 7px 0; }
.cs-veh + .cs-veh { border-top: 1px solid var(--line); }
.cs-veh-t { font-size: 14px; font-weight: 600; }
.cs-veh-s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cs-pill {
    display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
    padding: 1px 6px; border-radius: 10px; vertical-align: middle; margin-left: 4px;
    background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
}
.cs-pill.cur { background: var(--accent); color: #fff; border-color: var(--accent); }
.cs-pill.new { background: var(--up); color: #04210f; border-color: var(--up); }
.cs-pill.lead { background: #b9770e; color: #fff; border-color: #b9770e; }
.cs-note { padding: 8px 0; }
.cs-note + .cs-note { border-top: 1px solid var(--line); }
.cs-note-meta { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.cs-note-body { font-size: 14px; white-space: normal; word-break: break-word; }
.cs-empty { color: var(--muted); padding: 18px 0; text-align: center; }
.cs-empty.cs-sm { padding: 8px 0; text-align: left; font-size: 13px; }
.cs-sub { font-size: 12px; margin-top: 6px; color: var(--muted); }

/* Admin "view as" picker + read-only banner (2026-08-12). */
.alias-row { display:flex; align-items:center; gap:8px; padding:6px 12px; font-size:12px;
             border-bottom:1px solid rgba(0,0,0,.08); flex-wrap:wrap; }
.alias-row label { color:#666; }
.alias-row select { font-size:12px; padding:3px 5px; max-width:60vw; }
#alias-banner { background:#fff3cd; color:#7a5b00; border:1px solid #f0d68a;
                border-radius:10px; padding:2px 8px; font-weight:600; }
#alias-banner b { font-weight:800; }
#alias-exit { margin-left:6px; font-size:11px; padding:1px 6px; cursor:pointer; }