/* SMS-v2 surface styles — extracted from index.html (INF-116) * CSS custom properties (--c-*) are defined in index.html :root. * Loaded via in . * Only .smsv2-* prefixed rules live here; shared/global CSS stays in index.html. */ /* ── SMS v2 (INF-101) — native-feel responsive Messages UX ───────────────── Additive scaffold. All classes prefixed `smsv2-`. Toggled by SMSV2_ENABLED feature flag (defaults false). Spec: docs/superpowers/specs/2026-05-28-qt-sms-native-design.md ───────────────────────────────────────────────────────────────────── */ /* INF-317: grid-template-rows:minmax(0,1fr) bounds the implicit row to the fixed root height. Without it the row auto-sizes to the thread's full content, so .smsv2-thread{height:100%}/.smsv2-stream{flex:1} resolve against content height instead of the root — the stream never becomes a bounded scroll region, scroll-to-bottom no-ops (view stuck on oldest msg) and the composer is pushed below the fold. minmax(0,…) min is required; bare 1fr keeps a min-content floor that still overflows. Mobile is unaffected (thread-open switches to display:flex). */ .smsv2-root{--smsv2-left-width:380px;display:grid;grid-template-columns:minmax(300px,var(--smsv2-left-width)) 8px minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:calc(100vh - 180px);height:calc(100dvh - 180px);min-height:480px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:10px;overflow:hidden;font-size:13px;color:var(--c-text)} .smsv2-root[hidden]{display:none} /* Left pane — toolbar + conversation list */ .smsv2-left{display:flex;flex-direction:column;min-width:0;background:var(--c-bg-soft)} .smsv2-resizer{position:relative;background:var(--c-border);cursor:col-resize;touch-action:none} .smsv2-resizer::before{content:"";position:absolute;inset:0 -5px} .smsv2-resizer::after{content:"";position:absolute;top:50%;left:50%;width:2px;height:36px;border-radius:999px;background:var(--c-border-2);transform:translate(-50%,-50%);opacity:.6} .smsv2-resizer:hover,.smsv2-resizer:focus-visible,.smsv2-root.resizing .smsv2-resizer{background:var(--c-accent)} .smsv2-resizer:hover::after,.smsv2-resizer:focus-visible::after,.smsv2-root.resizing .smsv2-resizer::after{background:#fff;opacity:.9} .smsv2-resizer:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px} .smsv2-root.resizing{user-select:none} .smsv2-root.resizing .smsv2-thread,.smsv2-root.resizing .smsv2-left{pointer-events:none} .smsv2-toolbar{position:sticky;top:0;z-index:5;display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:var(--c-surface);border-bottom:1px solid var(--c-border)} .smsv2-search{display:flex;gap:6px;align-items:center} .smsv2-search input{flex:1;padding:7px 10px;border:1px solid var(--c-border);border-radius:8px;font-size:13px;background:var(--c-bg-soft)} .smsv2-search input:focus{outline:none;border-color:var(--c-accent);background:var(--c-surface);box-shadow:0 0 0 2px rgba(59,130,246,.12)} .smsv2-new-btn{background:#C84B1B;color:#fff;border:none;border-radius:8px;width:32px;height:32px;font-size:18px;line-height:1;cursor:pointer;flex-shrink:0} .smsv2-new-btn:hover{background:#a83a14} /* INF-583 (F15): wrap the filter chips instead of horizontal-scrolling them. In the 320px sidebar the 7 chips overflowed a scrollbar-hidden strip, clipping the 4th chip mid-word ("Waiti…") with no visible scroll affordance. Wrapping keeps every label intact (chips stay nowrap) across as many rows as needed. */ .smsv2-filter-strip{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .smsv2-filter-strip::-webkit-scrollbar{display:none} .smsv2-filter-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:4px 10px;border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text-2);border-radius:12px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .12s} .smsv2-filter-chip:hover{border-color:var(--c-text-dim);background:var(--c-subtle)} .smsv2-filter-chip.active{background:var(--c-accent);color:#fff;border-color:var(--c-accent)} .smsv2-filter-chip[data-chip="hot"].active{background:#dc2626;border-color:#dc2626} .smsv2-filter-chip[data-chip="customer"].active{background:#16a34a;border-color:#16a34a} .smsv2-filter-chip[data-chip="vendor"].active{background:#7c3aed;border-color:#7c3aed} .smsv2-filter-chip[data-chip="noise"].active{background:#64748b;border-color:var(--c-text-muted)} .smsv2-filter-chip[data-chip="lowconf"].active{background:#d97706;border-color:#d97706} .smsv2-lowconf-count{margin-left:5px;font-size:9px;font-weight:800;background:#d97706;color:#fff;padding:1px 6px;border-radius:8px;line-height:1.4} .smsv2-filter-chip[data-chip="lowconf"].active .smsv2-lowconf-count{background:var(--c-surface);color:#d97706} .smsv2-filter-chip[data-chip="unanswered"].active{background:#ef4444;border-color:#ef4444} /* INF-208 — low-confidence review block, shown inline in conv rows under the "Needs Review" chip */ .smsv2-lowconf-review{margin-top:6px;padding:7px 9px;background:#fffbeb;border:1px solid #fde68a;border-radius:8px} .smsv2-lowconf-label{font-size:11px;font-weight:700;color:#92400e;display:flex;align-items:center;gap:6px} .smsv2-lowconf-pct{font-size:10px;font-weight:800;color:#b45309;background:#fef3c7;padding:1px 6px;border-radius:8px} .smsv2-lowconf-reason{margin-top:4px;font-size:11px;line-height:1.4;color:var(--c-text-2);font-style:italic} .smsv2-lowconf-actions{margin-top:7px;display:flex;gap:6px} .smsv2-lowconf-btn{font-size:11px;font-weight:600;padding:4px 10px;border-radius:8px;border:1px solid var(--c-border);background:var(--c-surface);cursor:pointer;transition:all .12s} .smsv2-lowconf-btn:hover{filter:brightness(.97)} .smsv2-lowconf-btn.accept{border-color:#86efac;color:#166534;background:#f0fdf4} .smsv2-lowconf-btn.accept:hover{background:#dcfce7} .smsv2-lowconf-btn.correct{border-color:#fdba74;color:#9a3412;background:#fff7ed} .smsv2-lowconf-btn.correct:hover{background:#ffedd5} .smsv2-lowconf-btn:disabled{opacity:.5;cursor:default} .smsv2-accuracy{font-size:10px;color:var(--c-text-muted);background:var(--c-subtle);padding:3px 8px;border-radius:8px;white-space:nowrap;margin-left:auto;flex-shrink:0} .smsv2-list{flex:1;overflow-y:auto;padding:4px 0} .smsv2-conv-row{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--c-subtle);background:transparent;transition:background .1s} .smsv2-conv-row:hover{background:var(--c-subtle)} .smsv2-conv-row.active{background:#e7f1ff} .smsv2-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;background:linear-gradient(135deg,#94a3b8,#64748b);flex-shrink:0;position:relative;cursor:pointer} .smsv2-avatar[role="button"]:hover,.smsv2-thread-id[role="button"]:hover .smsv2-thread-name{filter:brightness(1.08);text-decoration:underline} .smsv2-avatar.cat-lead{background:linear-gradient(135deg,#f87171,#f97316)} .smsv2-avatar.cat-customer{background:linear-gradient(135deg,#34d399,#14b8a6)} .smsv2-avatar.cat-vendor{background:linear-gradient(135deg,#a78bfa,#60a5fa)} .smsv2-avatar.cat-noise{background:linear-gradient(135deg,var(--c-border-2),#94a3b8)} .smsv2-conv-body{min-width:0;display:flex;flex-direction:column;gap:2px} .smsv2-conv-name{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13px;color:var(--c-text);min-width:0} .smsv2-conv-name .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} /* INF-430 — received-message indicator. "New since you last opened" pill + row accent; orthogonal to the INF-380 status chip, clears on thread open. */ .smsv2-new-pill{display:inline-block;flex-shrink:0;padding:1px 6px;border-radius:999px;background:#C84B1B;color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.05em;line-height:1.65;text-transform:uppercase} .smsv2-conv-row.has-new{background:#fff7f2} .smsv2-conv-row.has-new:hover{background:#ffefe6} .smsv2-conv-row.has-new.active{background:#e7f1ff} /* A new inbound always reads bold — even on a row that would otherwise be calm. */ .smsv2-conv-row.has-new .smsv2-conv-name,.smsv2-conv-row.has-new.calm .smsv2-conv-name{font-weight:800;color:var(--c-text)} .smsv2-conv-row.has-new .smsv2-conv-preview,.smsv2-conv-row.has-new.calm .smsv2-conv-preview{color:var(--c-text-2);font-weight:600} .smsv2-conv-row.has-new.calm .smsv2-avatar{opacity:1} .smsv2-pdot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block} .smsv2-pdot.unanswered{background:#ef4444} .smsv2-pdot.unread{background:#f59e0b} .smsv2-pdot.read{background:var(--c-border)} /* Accessibility: glyph-paired priority indicator for screen readers and dot-blind contexts. */ .smsv2-pglyph{font-size:10px;color:var(--c-text-muted);flex-shrink:0} .smsv2-conv-preview{font-size:12px;color:var(--c-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:5px;min-width:0} .smsv2-conv-preview > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* INF-380 — derived status chip + owner badge + calm-by-default hierarchy. */ .smsv2-conv-meta{display:flex;align-items:center;gap:5px;margin-top:3px;min-width:0;flex-wrap:wrap} .smsv2-status{font-family:inherit;font-size:9.5px;font-weight:750;padding:1.5px 7px;border-radius:6px;letter-spacing:.02em;text-transform:uppercase;flex-shrink:0;cursor:pointer;border:0} .smsv2-status.needs_reply{background:#fee2e2;color:#dc2626} .smsv2-status.needs_action{background:#fff1e6;color:#C84B1B} .smsv2-status.waiting{background:#eef2f7;color:#475569} .smsv2-status.done{background:#f0fdf4;color:#15803d} .smsv2-status.muted{background:var(--c-subtle);color:var(--c-text-muted)} .smsv2-owner{font-size:9.5px;font-weight:600;padding:1.5px 7px;border-radius:6px;background:var(--c-subtle);color:var(--c-text-2);flex-shrink:0} .smsv2-owner.me{background:#1c1917;color:#fff} .smsv2-owner.manual{box-shadow:inset 0 0 0 1px currentColor} .smsv2-sla,.smsv2-snooze,.smsv2-action-owner,.smsv2-awaiting,.smsv2-activity-chip{font-size:9.5px;font-weight:700;padding:1.5px 7px;border-radius:6px;flex-shrink:0;white-space:nowrap} .smsv2-sla.ok{background:#eef2f7;color:#475569} .smsv2-sla.warn{background:#fffbeb;color:#92400e} .smsv2-sla.breach{background:#fee2e2;color:#b91c1c} .smsv2-snooze{background:#ede9fe;color:#5b21b6} .smsv2-action-owner{background:#ecfeff;color:#155e75} .smsv2-awaiting{background:#f1f5f9;color:#475569} .smsv2-activity-chip{background:#f5f3ff;color:#5b21b6} .smsv2-activity-chip.needs_match,.smsv2-activity-chip.match,.smsv2-activity-chip.restricted{background:#fffbeb;color:#92400e} .smsv2-activity-chip.work_candidate{background:#fff1e6;color:#C84B1B} .smsv2-activity-chip.needs_owner,.smsv2-activity-chip.ownerless{background:#fee2e2;color:#b91c1c} .smsv2-activity-chip.source_stale{background:#eef2f7;color:#475569} .smsv2-activity-contract{display:flex;flex-direction:column;align-items:flex-start;flex-wrap:wrap;gap:5px;margin-top:5px;padding:5px 6px;border:1px solid #e9d5ff;border-radius:8px;background:#faf5ff;overflow:visible} .smsv2-activity-contract .row-prov-inline{display:flex;flex-wrap:wrap;gap:4px;min-width:0;max-width:100%} .smsv2-activity-contract-chip{display:inline-flex;align-items:center;gap:3px;max-width:100%;font-size:9.5px;line-height:1.3;color:#4c1d95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .smsv2-activity-contract-chip b{font-size:8.5px;text-transform:uppercase;letter-spacing:.04em;color:#6d28d9} .smsv2-provenance-toggle{border-color:#e9d5ff;color:#4c1d95;background:#fff;min-height:40px;min-width:40px} .smsv2-activity-contract .row-prov-region{border-color:#e9d5ff;background:#fff;max-width:100%} .smsv2-activity-contract .row-prov-grid{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))} .smsv2-activity-contract .row-prov-field{display:block;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere} .smsv2-activity-contract-chip.send{color:#92400e} .smsv2-activity-contract-chip.send b{color:#b45309} .smsv2-activity-contract-chip.handoff{flex-basis:100%;color:#155e75} .smsv2-activity-contract-chip.handoff b{color:#0e7490} /* calm rows recede; only .loud (needs-me) rows keep full weight */ .smsv2-conv-row.calm .smsv2-conv-name{font-weight:500;color:var(--c-text-2)} .smsv2-conv-row.calm .smsv2-conv-preview{color:var(--c-text-muted)} .smsv2-conv-row.calm .smsv2-status{background:transparent;border:1px solid var(--c-border);color:var(--c-text-muted);font-weight:600} .smsv2-conv-row.calm .smsv2-owner{background:transparent;color:var(--c-text-muted)} .smsv2-conv-row.calm .smsv2-sla,.smsv2-conv-row.calm .smsv2-snooze,.smsv2-conv-row.calm .smsv2-action-owner,.smsv2-conv-row.calm .smsv2-awaiting,.smsv2-conv-row.calm .smsv2-activity-chip{background:transparent;border:1px solid var(--c-border);color:var(--c-text-muted)} .smsv2-conv-row.calm .smsv2-activity-contract{background:transparent;border-color:var(--c-border)} .smsv2-conv-row.calm .smsv2-activity-contract-chip,.smsv2-conv-row.calm .smsv2-activity-contract-chip b{color:var(--c-text-muted)} .smsv2-conv-row.calm .smsv2-avatar{opacity:.55} .smsv2-conv-row.done{opacity:.5} .smsv2-band{padding:6px 13px;font-size:9.5px;font-weight:700;color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.05em;background:var(--c-subtle)} /* thread-header status pill */ .smsv2-thread-status{font-family:inherit;font-size:11px;font-weight:750;padding:4px 11px;border-radius:8px;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;display:inline-flex;align-items:center;gap:6px;border:0} .smsv2-thread-status.needs_reply{background:#fee2e2;color:#dc2626} .smsv2-thread-status.needs_action{background:#fff1e6;color:#C84B1B} .smsv2-thread-status.waiting{background:#eef2f7;color:#475569} .smsv2-thread-status.done{background:#f0fdf4;color:#15803d} .smsv2-thread-status.muted{background:var(--c-subtle);color:var(--c-text-muted)} /* status override menu */ .smsv2-status-menu{position:fixed;z-index:60;background:#fff;border:1px solid var(--c-border);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.18);padding:5px;min-width:182px} .smsv2-status-menu .mi{font-size:12.5px;padding:7px 10px;border-radius:7px;cursor:pointer;display:flex;align-items:center;gap:8px} .smsv2-status-menu .mi:hover{background:var(--c-subtle)} .smsv2-status-menu .mi.danger{color:#b91c1c} .smsv2-status-menu .mi.danger:hover{background:#fef2f2} .smsv2-status-menu .sep{height:1px;background:var(--c-border);margin:4px 2px} /* INF-697 — per-card overflow (⋯) opens the row actions menu (archive / spam). */ .smsv2-kebab{background:none;border:none;color:var(--c-text-muted);font-size:15px;line-height:1;font-weight:700;padding:0 4px;margin-left:2px;border-radius:6px;cursor:pointer;flex-shrink:0;min-width:40px;min-height:40px} .smsv2-kebab:hover{background:var(--c-subtle);color:var(--c-text)} .smsv2-new-btn,.smsv2-thread-call{min-width:40px;min-height:40px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center} .smsv2-conv-row:focus-visible, .smsv2-status:focus-visible, .smsv2-kebab:focus-visible, .smsv2-link-contact-btn:focus-visible, .smsv2-thread-status:focus-visible, .smsv2-thread-call:focus-visible{ outline:2px solid var(--c-accent); outline-offset:2px; box-shadow:0 0 0 3px rgba(59,130,246,.18); } .smsv2-conv-time{font-size:11px;color:var(--c-text-muted);white-space:nowrap;align-self:flex-start;padding-top:2px} /* Right pane — thread */ .smsv2-thread{display:flex;flex-direction:column;min-width:0;background:var(--c-surface);height:100%} .smsv2-thread-empty{display:flex;flex:1;align-items:center;justify-content:center;color:var(--c-text-muted);font-size:13px;padding:40px} .smsv2-thread-header{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--c-border);background:var(--c-surface);flex-shrink:0} /* INF-727 — action pills (call/classification/create-contact/status) are a group. display:contents = no box on desktop (they stay direct flex children of the header, layout unchanged); mobile flips it to a real flex item that wraps to its own row. */ .smsv2-thread-actions{display:contents} .smsv2-back-btn{display:none;background:none;border:none;color:var(--c-accent);font-size:14px;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:6px} .smsv2-back-btn:hover{background:var(--c-active)} .smsv2-thread-id{display:flex;flex-direction:column;min-width:0;flex:1} .smsv2-thread-name{font-weight:700;font-size:14px;color:var(--c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .smsv2-thread-phone{font-size:11px;color:var(--c-text-muted)} /* INF-339 #2 — thread freshness indicator: tells the rep the thread is showing the LIVE conversation (a live RC pull fires on open), so they never wonder if a just-arrived text is missing. */ .smsv2-thread-fresh{font-size:10px;font-weight:600;color:var(--c-text-muted);display:inline-flex;align-items:center;gap:4px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .smsv2-thread-fresh::before{content:"";width:5px;height:5px;border-radius:50%;background:#9ca3af;flex-shrink:0} .smsv2-thread-fresh.syncing{color:var(--c-accent)} .smsv2-thread-fresh.syncing::before{background:var(--c-accent);animation:smsv2-fresh-pulse 1s ease-in-out infinite} .smsv2-thread-fresh.fresh{color:#166534} .smsv2-thread-fresh.fresh::before{background:#22c55e} .smsv2-thread-fresh.warn{color:#9a3412} .smsv2-thread-fresh.warn::before{background:#f97316} .smsv2-thread-classification{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:10px;background:var(--c-subtle);color:var(--c-text-2);flex-shrink:0} .smsv2-thread-classification.cat-lead{background:#fee2e2;color:#991b1b} .smsv2-thread-classification.cat-customer{background:#dcfce7;color:#166534} .smsv2-thread-classification.cat-vendor{background:#ede9fe;color:#5b21b6} .smsv2-thread-classification.cat-noise{background:var(--c-subtle);color:var(--c-text-muted)} /* Context strip (collapsible) */ .smsv2-context{border-bottom:1px solid var(--c-subtle);background:var(--c-bg-soft);flex-shrink:0} .smsv2-context-collapsed{display:flex;align-items:center;gap:8px;padding:6px 14px;font-size:12px;color:var(--c-text-2);flex-wrap:wrap} .smsv2-context-chip{display:inline-flex;align-items:center;gap:4px;background:var(--c-surface);border:1px solid var(--c-border);padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;color:var(--c-text-2)} .smsv2-context-chip.muted{color:var(--c-text-muted);font-style:italic} .smsv2-deal-select{font-size:11px;padding:3px 6px;border:1px solid var(--c-border);border-radius:10px;background:var(--c-surface);color:var(--c-text);font-weight:600;cursor:pointer;font-family:inherit} .smsv2-deal-select:focus{outline:none;border-color:var(--c-accent)} .smsv2-context-toggle{margin-left:auto;background:none;border:none;color:var(--c-text-muted);font-size:11px;cursor:pointer;padding:2px 6px;border-radius:4px} .smsv2-context-toggle:hover{color:var(--c-text);background:var(--c-subtle)} .smsv2-context-expanded{display:none;padding:10px 14px;border-top:1px solid var(--c-subtle);background:var(--c-surface);font-size:12px;color:var(--c-text-2);flex-direction:column;gap:8px} .smsv2-context.expanded .smsv2-context-expanded{display:flex} .smsv2-context.expanded .smsv2-context-toggle::after{content:"▴"} .smsv2-context-toggle::after{content:"▾";margin-left:2px} /* Message stream */ .smsv2-stream{flex:1;overflow-y:auto;overflow-x:hidden;padding:14px 14px 8px;display:flex;flex-direction:column;gap:3px;background:var(--c-surface);min-height:0} .smsv2-day-sep{align-self:center;font-size:10px;color:var(--c-text-muted);background:var(--c-subtle);padding:2px 10px;border-radius:8px;margin:8px 0 4px;text-transform:uppercase;letter-spacing:.04em;font-weight:700} .smsv2-msg{display:flex;flex-direction:column;max-width:78%;min-width:0;gap:2px} .smsv2-msg.in{align-self:flex-start;align-items:flex-start} .smsv2-msg.out{align-self:flex-end;align-items:flex-end} /* INF-431: overflow-wrap:anywhere (not break-word) so a long unbreakable token — e.g. an Odoo quote URL with access_token — reduces the bubble's intrinsic min-content width. With break-word the URL forced the bubble (a flex item with default min-width:auto) wider than the viewport, blowing out the .smsv2-stream column and shifting every outbound bubble left so its text clipped off-screen in mobile Chrome. Paired with .smsv2-msg{min-width:0} + .smsv2-stream{overflow-x:hidden}. */ .smsv2-bubble{padding:7px 12px;border-radius:16px;line-height:1.4;font-size:13px;overflow-wrap:anywhere;white-space:pre-wrap} .smsv2-bubble a{color:inherit;text-decoration:underline;opacity:.9} .smsv2-msg.in .smsv2-bubble{background:var(--c-subtle);color:var(--c-text);border-bottom-left-radius:4px} .smsv2-msg.out .smsv2-bubble{background:var(--c-accent);color:#fff;border-bottom-right-radius:4px} .smsv2-msg.out.pending .smsv2-bubble{opacity:.55} .smsv2-msg.out.failed .smsv2-bubble{background:#dc2626} .smsv2-msg-meta{font-size:10px;color:var(--c-text-muted);padding:0 4px;display:flex;align-items:center;gap:6px} .smsv2-sender-pill{font-size:9px;font-weight:700;background:#dbeafe;color:#1e40af;padding:1px 6px;border-radius:8px;letter-spacing:.02em} /* INF-622 — outbound SMS delivery receipt (Delivered / Sent / Sending… / Not delivered) */ .smsv2-receipt{font-size:10px;font-weight:600;color:var(--c-text-muted)} .smsv2-receipt.ok{color:#059669} .smsv2-receipt.fail{color:#dc2626;font-weight:700} .smsv2-retry-btn{font-size:10px;color:#dc2626;background:none;border:none;cursor:pointer;font-weight:700;padding:0} /* Action strip — three zones, only render if populated */ .smsv2-actions{border-top:1px solid var(--c-subtle);background:#fafbfc;flex-shrink:0;display:flex;flex-direction:column;gap:8px;padding:8px 14px} .smsv2-actions:empty{display:none} .smsv2-zone{display:flex;flex-direction:column;gap:4px} .smsv2-zone-label{font-size:9px;font-weight:700;color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.06em} .smsv2-zone-a-rows{display:flex;flex-direction:column;gap:4px} /* INF-870 — explicit-review billing address proposal. The visual language is suggestion, not automation: a bounded card with separate Confirm/Dismiss. */ .smsv2-billing-address-suggestion{gap:6px} .smsv2-address-card{padding:9px 11px;border:1px solid #fed7aa;border-left:3px solid var(--c-accent);border-radius:8px;background:#fff7ed} .smsv2-address-value{font-size:13px;font-weight:750;color:var(--c-text);line-height:1.35} .smsv2-address-meta,.smsv2-address-current{margin-top:3px;font-size:10.5px;color:var(--c-text-muted);line-height:1.35} .smsv2-address-current{color:#9a3412} .smsv2-address-error{margin-top:6px;padding:5px 7px;border-radius:6px;background:#fef2f2;color:#b91c1c;font-size:11px;line-height:1.35} .smsv2-address-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px} .smsv2-address-confirm,.smsv2-address-dismiss{min-height:40px;padding:7px 12px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer} .smsv2-address-confirm{border:1px solid var(--c-accent);background:var(--c-accent);color:#fff} .smsv2-address-dismiss{border:1px solid var(--c-border);background:#fff;color:var(--c-text-2)} .smsv2-address-confirm:disabled,.smsv2-address-dismiss:disabled{opacity:.55;cursor:default} .smsv2-open-row{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:8px;font-size:12px} .smsv2-open-row.done{opacity:.5} .smsv2-open-check{width:16px;height:16px;flex-shrink:0;cursor:pointer;accent-color:#16a34a} .smsv2-open-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-text);font-weight:600} .smsv2-open-due{font-size:11px;color:var(--c-text-muted);flex-shrink:0} .smsv2-open-due.overdue{color:#dc2626;font-weight:700} .smsv2-open-overflow{background:none;border:none;color:var(--c-text-muted);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;border-radius:4px} .smsv2-open-overflow:hover{color:var(--c-text);background:var(--c-subtle)} .smsv2-other-deals-link{font-size:11px;color:var(--c-accent);background:none;border:none;cursor:pointer;padding:2px 0;text-align:left;font-weight:600} .smsv2-other-deals-link:hover{text-decoration:underline} .smsv2-intent-chips{display:flex;gap:6px;flex-wrap:wrap} .smsv2-intent-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:4px 10px;border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text-2);border-radius:12px;cursor:pointer;transition:all .12s} .smsv2-intent-chip:hover{border-color:var(--c-text-dim)} .smsv2-intent-chip.passive{background:#dcfce7;border-color:#86efac;color:#166534} .smsv2-intent-chip.passive.off{background:var(--c-surface);color:var(--c-text-muted);text-decoration:line-through;border-color:var(--c-text-dim)} .smsv2-intent-chip.proposed.on{background:#dbeafe;border-color:#93c5fd;color:var(--c-accent)} .smsv2-intent-chip .ai-glyph{font-size:9px;font-weight:800;background:rgba(0,0,0,.08);padding:1px 4px;border-radius:4px;letter-spacing:.04em} /* INF-593 — proposed intent chips read as off-by-default *addable toggles* */ .smsv2-intent-chip.proposed{align-items:flex-start;text-align:left} .smsv2-intent-chip .chip-state{font-weight:800;font-size:11px;line-height:1.4;width:10px;text-align:center;flex-shrink:0} .smsv2-intent-chip.proposed .chip-state::before{content:"+"} .smsv2-intent-chip.proposed.on .chip-state::before{content:"✓"} /* OFF = clearly tappable: visible taupe dash, not a faint hairline */ .smsv2-intent-chip.proposed:not(.on){border-style:dashed;border-color:var(--c-text-dim)} .smsv2-intent-chip.proposed:not(.on):hover{border-color:var(--c-accent);color:var(--c-accent)} .smsv2-intent-chip .chip-type{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 5px;border-radius:4px;flex-shrink:0;line-height:1.15} .smsv2-intent-chip.is-task .chip-type{background:rgba(59,130,246,.12);color:#1d4ed8} .smsv2-intent-chip.is-promise .chip-type{background:rgba(180,83,9,.14);color:#9a3d05} /* full body text — wrap to 2 lines rather than truncate a customer-facing action */ .smsv2-intent-chip .chip-text{min-width:0;flex:1;white-space:normal;overflow-wrap:anywhere;line-height:1.35;text-align:left} /* ON body stays near-black for contrast on the peach armed fill; orange is reserved for border/✓/tag */ .smsv2-intent-chip.proposed.on .chip-text,.smsv2-thread .smsv2-intent-chip.proposed.on .chip-text{color:var(--c-text)} .smsv2-zone-label .zone-hint{text-transform:none;letter-spacing:0;font-weight:600;color:var(--c-text-dim)} /* Composer */ .smsv2-composer-wrap{border-top:1px solid var(--c-border);background:var(--c-surface);flex-shrink:0;padding:8px 12px max(10px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px} /* INF-322: .smsv2-quicktype (single-option auto-chip) removed — single + multi now share the always-visible .ai-opt-cards selector + preview line. */ .smsv2-composer{display:flex;align-items:flex-end;gap:8px} .smsv2-composer-meta{display:flex;justify-content:flex-end;min-height:15px;font-size:11px;line-height:1.3;color:var(--c-text-muted)} .smsv2-char-count{font-variant-numeric:tabular-nums} .smsv2-composer-meta.over-limit,.smsv2-char-count.over-limit{color:#b91c1c;font-weight:700} .smsv2-composer-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap} /* INF-379/INF-1288: outbound attachment preview strip + sent-bubble media. */ .smsv2-attach-strip{padding:2px 2px 4px} .smsv2-attach-loading{font-size:11px;color:var(--c-text-muted);padding:6px 4px} .smsv2-attach-chip{display:inline-flex;align-items:center;gap:8px;background:var(--c-bg-soft);border:1px solid var(--c-border);border-radius:10px;padding:5px 8px;max-width:100%} .smsv2-attach-chip.over{border-color:#f59e0b;background:#fffbeb} .smsv2-attach-chip img{width:38px;height:38px;object-fit:cover;border-radius:6px;flex-shrink:0} .smsv2-attach-file-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:6px;background:#fee2e2;color:#991b1b;font-size:11px;font-weight:800;letter-spacing:.03em;flex-shrink:0} .smsv2-attach-meta{font-size:11px;color:var(--c-text-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .smsv2-attach-chip.over .smsv2-attach-meta{color:#b45309;font-weight:600} .smsv2-attach-x{margin-left:auto;background:none;border:none;color:var(--c-text-muted);font-size:18px;line-height:1;cursor:pointer;padding:0 2px;flex-shrink:0} .smsv2-attach-x:hover{color:var(--c-text)} .smsv2-bubble-img,.smsv2-bubble-video{display:block;max-width:200px;max-height:240px;width:auto;height:auto;border-radius:10px;margin-bottom:4px;background:#000} .smsv2-ai-draft-btn{background:var(--c-active);border:1px solid #93c5fd;color:var(--c-accent);padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer} .smsv2-ai-draft-btn:disabled{opacity:.6;cursor:default} .smsv2-ai-flags{background:#fef3c7;border:1px solid #fde68a;color:#92400e;padding:5px 10px;border-radius:6px;font-size:11px;line-height:1.4;margin-top:6px} /* ── INF-305 — brand-light skin for the SMS thread surface (SCOPED to .smsv2-thread; pilot for the ODB brand redesign — overlanddesignbuild.com: white/Geist/burnt-orange. Re-themes only this surface by overriding the dark --c-* tokens within it; the conversation list + every other tab keep the existing dark theme until the P2 rollout). */ .smsv2-thread{ --c-surface:#ffffff; --c-bg-soft:#FAF8F4; --c-subtle:#F4F1EB; --c-active:#FBEDE6; --c-border:#E6E1D7; --c-border-2:#D9D2C5; --c-text:#1A1814; --c-text-2:#2E2A24; --c-text-muted:#9A9182; --c-text-dim:#BCB5A6; --c-accent:#D24E1C; font-family:'Geist',-apple-system,BlinkMacSystemFont,sans-serif; background:#ffffff; } .smsv2-thread .smsv2-thread-header{background:#fff;border-bottom:1px solid var(--c-border);padding:13px 16px} .smsv2-thread .smsv2-thread-name{font-weight:300;font-size:22px;letter-spacing:-.022em;color:var(--c-text)} .smsv2-thread .smsv2-thread-phone{color:var(--c-text-muted);font-size:11.5px;font-variant-numeric:tabular-nums} .smsv2-thread .smsv2-back-btn{color:var(--c-text-muted)} .smsv2-thread .smsv2-back-btn:hover{background:var(--c-active);color:var(--c-accent)} .smsv2-thread .smsv2-thread-classification, .smsv2-thread .smsv2-avatar{background:var(--c-active)!important;color:var(--c-accent);box-shadow:inset 0 0 0 1px #F2CBB8} .smsv2-thread .smsv2-stream{background:#fff} .smsv2-thread .smsv2-bubble{font-size:14px;line-height:1.46;padding:9px 13px;border-radius:16px} .smsv2-thread .smsv2-msg.in .smsv2-bubble{background:var(--c-bg-soft);color:var(--c-text-2);box-shadow:inset 0 0 0 1px #EFEBE3;border-bottom-left-radius:5px} .smsv2-thread .smsv2-msg.out .smsv2-bubble{background:var(--c-accent);color:#fff;border-bottom-right-radius:5px} .smsv2-thread .smsv2-msg-meta{color:var(--c-text-muted)} .smsv2-thread .smsv2-context{background:#fff;border-bottom:1px solid var(--c-subtle)} .smsv2-thread .smsv2-actions{background:#FAF8F4;border-top:1px solid var(--c-subtle)} .smsv2-thread .smsv2-zone-label{color:var(--c-text-muted);letter-spacing:.14em} .smsv2-thread .smsv2-intent-chip{background:#fff;border:1px solid var(--c-border);color:var(--c-text-2)} .smsv2-thread .smsv2-intent-chip.proposed.on{background:var(--c-active);border-color:#F2CBB8;color:var(--c-accent)} .smsv2-thread .smsv2-intent-chip .ai-glyph{background:rgba(210,78,28,.10);color:var(--c-accent)} /* INF-599 — armed passive (Zone B) shares the proposed-on "armed" language: peach fill + accent border + accent ✓, near-black body. Zone identity stays in the eyebrow, not the color. OFF (.passive.off strikethrough) is unaffected. */ .smsv2-thread .smsv2-intent-chip.passive:not(.off){background:var(--c-active);border-color:#F2CBB8;color:var(--c-text)} .smsv2-thread .smsv2-intent-chip.passive:not(.off) .chip-state{color:var(--c-accent)} .smsv2-thread .smsv2-composer-wrap{background:#fff;border-top:1px solid var(--c-border)} .smsv2-thread .smsv2-input{background:#fff;border:1px solid var(--c-border);color:var(--c-text);font-family:'Geist',sans-serif;border-radius:12px} .smsv2-thread .smsv2-input:focus{border-color:var(--c-accent);background:#fff;box-shadow:0 0 0 2px rgba(210,78,28,.12)} .smsv2-thread .smsv2-input.over-limit{border-color:#dc2626;background:#fff7f7;box-shadow:0 0 0 2px rgba(220,38,38,.12)} .smsv2-thread .smsv2-send-btn{background:var(--c-accent);color:#fff;border-radius:10px;font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase} /* INF-554 — create-contact affordance (phone-only threads) */ .smsv2-create-contact-btn{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--c-accent);background:var(--c-active);border:1px solid #F2CBB8;border-radius:7px;padding:3px 9px;cursor:pointer;flex-shrink:0;white-space:nowrap;transition:background .12s} /* INF-569 — click-to-call from the thread header → device dialer (RingCentral stays the phone). */ .smsv2-thread-call{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:8px;background:var(--c-active);border:1px solid #F2CBB8;color:var(--c-accent);font-size:15px;line-height:1;text-decoration:none;cursor:pointer;transition:background .12s} .smsv2-thread-call:hover{background:#F9E0D3} .smsv2-create-contact-btn:hover{background:#F9E0D3} .smsv2-create-contact-form{display:flex;flex-direction:column;gap:8px;padding:10px 16px 12px;border-bottom:1px solid var(--c-border);background:#FBF8F5;font-size:12.5px} .smsv2-create-contact-form .cc-row{display:flex;gap:8px;flex-wrap:wrap} .smsv2-create-contact-form input{flex:1;min-width:90px;padding:5px 9px;border:1px solid var(--c-border);border-radius:7px;font-size:12.5px;font-family:'Geist',sans-serif;color:var(--c-text);background:#fff;outline:none} .smsv2-create-contact-form input:focus{border-color:var(--c-accent);box-shadow:0 0 0 2px rgba(210,78,28,.10)} .smsv2-create-contact-form input[readonly]{background:var(--c-subtle);color:var(--c-text-muted);cursor:default} .smsv2-create-contact-form .cc-actions{display:flex;align-items:center;gap:8px} .smsv2-create-contact-form .cc-save{padding:5px 14px;background:var(--c-accent);color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer} .smsv2-create-contact-form .cc-save:disabled{opacity:.55;cursor:default} .smsv2-create-contact-form .cc-cancel{padding:5px 10px;background:none;border:1px solid var(--c-border);border-radius:7px;font-size:12px;color:var(--c-text-muted);cursor:pointer} .smsv2-create-contact-form .cc-cancel:hover{background:var(--c-subtle)} .smsv2-create-contact-form .cc-msg{font-size:11.5px;margin-left:4px} /* INF-608 — link unresolved number to existing contact */ .smsv2-link-contact-btn{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#1d4ed8;background:#dbeafe;border:1px solid #bfdbfe;border-radius:7px;padding:3px 9px;cursor:pointer;flex-shrink:0;white-space:nowrap;transition:background .12s} .smsv2-link-contact-btn:hover{background:#bfdbfe} .smsv2-thread .smsv2-send-btn:hover{background:#B5400F} .smsv2-thread .smsv2-ai-draft-btn{background:var(--c-active);border:1px solid #F2CBB8;color:var(--c-accent)} .smsv2-thread .smsv2-ai-flags{background:#FBF3E4;border:1px solid #ECDBB8;color:#9A6A28} .smsv2-input{flex:1;min-height:36px;max-height:min(240px,35vh);padding:8px 12px;border:1px solid var(--c-border);border-radius:18px;font-size:14px;font-family:inherit;resize:vertical;line-height:1.4;background:var(--c-bg-soft);overflow-y:auto} .smsv2-input:focus{outline:none;border-color:var(--c-accent);background:var(--c-surface);box-shadow:0 0 0 2px rgba(59,130,246,.12)} .smsv2-input.over-limit{border-color:#dc2626;background:#fef2f2} .smsv2-send-btn{background:#C84B1B;color:#fff;border:none;border-radius:18px;padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;min-height:36px} .smsv2-send-btn:hover:not(:disabled){background:#a83a14} .smsv2-send-btn:disabled{opacity:.5;cursor:not-allowed} .smsv2-send-badge{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.25);color:#fff;font-size:11px;font-weight:800;padding:1px 6px;border-radius:8px;min-width:18px} .smsv2-opt-out{padding:10px 14px;background:#fef3c7;border-top:1px solid #fde68a;color:#92400e;font-size:12px;font-weight:600;text-align:center} /* Loading / empty / error states */ .smsv2-loading,.smsv2-empty,.smsv2-error{text-align:center;padding:40px 16px;color:var(--c-text-muted);font-size:13px} .smsv2-error{color:#dc2626} /* Responsive — single pane under 768px. Regression fix: the INF-116 CSS extraction (53141a0) lifted these mobile-only rules out of index.html but DROPPED the enclosing @media (max-width:768px) wrapper, so the full-viewport thread takeover (.smsv2-root.thread-open{position:fixed;inset:0;width:100vw}) leaked onto desktop — where it ignored the 212px fixed #qt-sidebar and clipped inbound bubbles behind the nav. Re-wrapped to match the rest of the app's 768/769 breakpoint (sidebar @min-width:769; bottombar @max-width:768) and the pre-extraction original. */ @media (max-width: 768px){ .smsv2-root{grid-template-columns:1fr;height:calc(100vh - 250px);height:calc(100dvh - 250px);min-height:420px;border-radius:0;border-left:none;border-right:none} .smsv2-resizer{display:none} /* INF-199 — open thread takes over the full viewport (native texting feel). Flex column (NOT grid): a grid auto-row sizes to content and overflows a tall fixed container, pushing the composer off-screen. Flex + thread{flex:1;min-height:0} binds the thread to 100dvh so the stream becomes the scroll region. */ .smsv2-root.thread-open{position:fixed;inset:0;z-index:500;height:100vh;height:100dvh;width:100vw;min-height:0;border:none;border-radius:0;display:flex;flex-direction:column} .smsv2-root .smsv2-thread{display:none} .smsv2-root.thread-open .smsv2-left{display:none} .smsv2-root.thread-open .smsv2-thread{display:flex;flex:1;min-height:0} .smsv2-back-btn{display:inline-flex;align-items:center} /* INF-727 — at phone width the header was one non-wrapping row (Back+avatar+name +call+classification+create-contact+status pill) → the name/phone got crushed (phone wrapped mid-digit) and pills overflowed. Let it wrap: row 1 = Back+avatar+ name (name truncates), row 2 = the action pills, right-aligned. */ .smsv2-thread-header{flex-wrap:wrap;row-gap:8px} .smsv2-thread-actions{display:flex;flex-basis:100%;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end} .smsv2-msg{max-width:88%} } .smsv2-filter-chip.active{background:var(--c-accent);border-color:var(--c-accent)} /* INF-742: cross-channel follow-up badge */ .smsv2-followup-badge{display:inline-block;flex-shrink:0;padding:1px 6px;border-radius:999px;background:#dbeafe;color:#1e3a5f;font-size:8.5px;font-weight:700;letter-spacing:.04em;line-height:1.65;text-transform:uppercase;vertical-align:middle}