*{box-sizing:border-box}body{margin:0;background:#f0f6f5;color:#123942;font:15px system-ui}header{background:#0b303a;color:white;display:flex;align-items:center;gap:20px;padding:20px 28px}header b{font-size:24px}header div{flex:1}small{display:block;font-size:12px;margin-top:6px;color:#7d9498}header small{color:#b1d0d3}a{color:#b1ebe0}button,select,textarea{font:inherit;border:1px solid #d0dddd;border-radius:8px;padding:11px}button{cursor:pointer;background:white;color:#123942}button:disabled{opacity:.5;cursor:wait}header button,#send{background:#12a88e;color:white;border:0}#sessions{display:flex;gap:12px;padding:18px 28px 0}.session{background:white;border:1px solid #d9e5e3;border-radius:10px;padding:12px 20px;flex:1}.session b{display:block}.session span{font-size:12px;color:#49777b}#notice{margin:12px 28px;color:#537377;font-size:13px}main{display:grid;grid-template-columns:320px 1fr;border:1px solid #d5e2df;margin:16px 28px;background:white;border-radius:12px;overflow:hidden;min-height:65vh}aside{border-right:1px solid #d5e2df;padding:18px}aside select{width:100%;margin-bottom:12px}.thread{display:block;text-align:left;width:100%;border:0;border-bottom:1px solid #e1e9e7;border-radius:0;padding:16px 8px}.thread.selected{background:#e5f5f0}.thread b{display:block}.thread small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}article{padding:22px;min-width:0}h2{font-size:20px;margin:0 0 8px}#coverage{font-size:12px;color:#6a8489}#timeline{min-height:150px;max-height:45vh;overflow:auto;display:flex;flex-direction:column;gap:12px;margin:18px 0}.message{max-width:80%;padding:12px 16px;border:1px solid #d9e6e2;border-radius:12px;white-space:pre-wrap;overflow-wrap:anywhere;background:#f5f8f7}.message.out{align-self:flex-end;background:#e0f5ec}label{display:block;font-size:13px;margin:12px 0}textarea{display:block;width:100%;margin-top:6px;resize:vertical}#state{margin-left:10px}#back{display:none}#send{padding:12px 24px}@media(max-width:700px){header{padding:18px;gap:12px}header b{font-size:20px}header button{font-size:12px;padding:8px}header a{font-size:12px}#sessions{padding:14px 16px 0;gap:8px}.session{padding:10px}#notice{margin:12px 16px}main{display:block;margin:12px 16px}aside{border:0}article{display:none;padding:18px}.opened aside{display:none}.opened article{display:block}#back{display:inline-block;margin-bottom:18px}.message{max-width:95%}}

#threads{max-height:65vh;overflow:auto}#review{border:1px solid #9acbbd;background:#effaf5;border-radius:10px;padding:16px;margin-top:16px}#review pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}#confirmSend{background:#12a88e;color:white}
.tabs{display:flex;gap:8px;margin-bottom:12px}#contactSearch{font:inherit;padding:10px;width:100%;border:1px solid #d0dddd;border-radius:8px}#contacts{max-height:55vh;overflow:auto}#contactSource{margin:10px 0}[hidden]{display:none!important}#opsNav{display:flex;flex-wrap:wrap;gap:8px;margin:18px 28px}#opsNav button{min-height:44px}#opsView{margin:16px 28px;padding:24px;background:white;border:1px solid #d5e2df;border-radius:12px}#opsCoverage{font-size:12px;color:#537377}.opCard{border-bottom:1px solid #e1e9e7;padding:16px 0;overflow-wrap:anywhere}.opCard p{line-height:1.5}.opCard button{min-height:44px}#opsForm{max-width:540px}#opsForm input,#opsForm select{display:block;font:inherit;width:100%;padding:11px;border:1px solid #d0dddd;border-radius:8px}#opsView details{margin:24px 0}#opsView summary{cursor:pointer;min-height:44px;padding-top:10px}.session.disconnected{border-color:#c0392b;background:#fff0ed}.session.disconnected span{color:#a6291d}@media(max-width:700px){#opsNav{margin:14px 16px}#opsNav button{flex:1 0 42%;font-size:13px}#opsView{margin:12px 16px;padding:18px}.opCard b{display:block}}

.companyInfo,.highlights{margin-top:10px;padding-top:8px;border-top:1px solid #dce9e4;overflow-wrap:anywhere}.companyInfo a{display:block;color:#087765;font-size:12px;margin-top:6px}.highlights b{font-size:12px;color:#087765}.highlights small{line-height:1.5;color:#49696e}#companyDetail{background:#f1faf6;border:1px solid #dce9e4;border-radius:8px;padding:12px}#companyDetail:empty{display:none}#companyDetail .companyInfo{margin:0;padding:0;border:0}@media(max-width:700px){header{flex-wrap:wrap}header div{flex-basis:100%}}

/* v1.3.1: brighter SaaS dashboard treatment, petrol remains the anchor */
:root{--ink:#123942;--petrol:#0b303a;--teal:#087c70;--mint:#12a88e;--sky:#e7f4fb;--violet:#f1edff;--amber:#fff4df;--rose:#fff0ee;--line:#d7e5e4;--paper:#fff;--wash:#eff6f5;--muted:#58767b;--shadow:0 8px 24px rgba(16,60,66,.08)}
body{background:radial-gradient(ellipse at 86% 2%,#e6f6f3 0,transparent 35%),var(--wash);color:var(--ink)}
header{background:linear-gradient(110deg,#092b35,#104c52 72%,#12675f);box-shadow:0 4px 18px rgba(7,42,49,.18)}
header b{letter-spacing:.01em}header button,#send,#confirmSend{background:linear-gradient(135deg,#1bb99b,#0c8c81);box-shadow:0 4px 12px rgba(18,168,142,.2);font-weight:650}header button:hover,#send:hover,#confirmSend:hover{filter:brightness(1.07);transform:translateY(-1px)}
#sessions .session{border:1px solid #cde7dc;background:linear-gradient(135deg,#fff,#effaf6);box-shadow:var(--shadow)}#sessions .session b{color:#176754}#sessions .session span{display:inline-block;background:#dbf4e8;color:#24734f;border-radius:999px;padding:3px 9px;font-weight:650}.session.disconnected{background:linear-gradient(135deg,#fff,#fff1ec);border-color:#ffd1c8}.session.disconnected span{background:#ffe1dc;color:#a6291d}
#notice{background:#e8f3fb;border-left:4px solid #6b9fdb;border-radius:6px;padding:10px 14px;color:#365f7b}
main,#opsView{border-color:var(--line);box-shadow:var(--shadow)}aside{background:linear-gradient(180deg,#f8fbfb,#f2f8f6)}article{background:#fff}.tabs button{border-color:#cde1df;color:#345d62;font-weight:650}.tabs button:hover,.tabs button:focus-visible{background:#ddf4eb;border-color:#83cdb7}
.thread{border-bottom:1px solid #e0ebe8;border-radius:9px;margin:3px 0;padding:13px 11px;transition:background .16s,border-color .16s}.thread:hover{background:#edf8f5;border-bottom-color:#b9e5d6}.thread.selected{background:linear-gradient(100deg,#e1f5eb,#e8f5fb);box-shadow:inset 3px 0 #14a989}.thread b{color:#153f47}.thread small{display:inline-block;margin-top:7px;border:1px solid #d8e9e7;background:#f1f8f8;border-radius:999px;padding:4px 9px;color:#426c70;font-weight:600;max-width:100%}
button,select,textarea,#contactSearch{transition:border-color .15s,box-shadow .15s,background .15s}button:hover{border-color:#91cfc1}button:focus-visible,select:focus-visible,textarea:focus-visible,#contactSearch:focus{outline:2px solid #53bca3;outline-offset:2px;border-color:#27a88c}
#opsNav button{background:linear-gradient(145deg,#fff,#f2f8fa);border-color:#d3e3e6;box-shadow:0 2px 6px rgba(18,57,66,.05);font-weight:620}#opsNav button:hover{background:#e5f6f0;color:#087765;border-color:#91d4bf}#opsView{background:linear-gradient(160deg,#fff,#f8fcfb)}
#companyDetail{background:linear-gradient(135deg,#effaf5,#eef7fc 70%,#f7f4ff);border-color:#cde7dc;box-shadow:inset 0 1px #fff}.companyInfo,.highlights{border-color:#d5e7e4}.companyInfo a{color:#087765;font-weight:650}.highlights b{color:#087765}.highlights small{color:#42676c}.message{box-shadow:0 2px 8px rgba(18,57,66,.04)}.message.out{border-color:#bde5d3;background:linear-gradient(145deg,#e4f7eb,#e8f6f5)}
#review{border-color:#83cdb7;background:linear-gradient(135deg,#effaf4,#f1f8ff)}#review h3{color:#087765}input,select,textarea{background:#fff;color:var(--ink)}#contactSearch::placeholder,textarea::placeholder{color:#88a0a2}
@media(max-width:700px){main{box-shadow:var(--shadow)}.opened article{background:#fff}header{background:linear-gradient(110deg,#092b35,#104c52 72%,#12675f)}}
/* v1.3.7: distinct inbound replies and WhatsApp-style delivery ticks. */
#replySummary{margin:12px 28px;padding:12px 16px;border:1px solid #bde5d3;border-radius:9px;background:#effaf5;color:#176754;font-weight:650;font-size:14px}
#threadStats{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 12px;font-size:12px;color:#58767b}#threadStats:empty{display:none}
.repliedBadge,.thread small.repliedBadge{display:inline-block;color:#087765;background:#d9f5e8;border:1px solid #9bdabf;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:650}
.messageMeta{display:flex!important;align-items:center;justify-content:flex-end;gap:7px;margin-top:6px;font-size:11px}.waTicks{color:#8696a0;display:inline-flex;align-items:center;flex-shrink:0}.waTicks svg{width:20px;height:14px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.waTicks.sent svg{width:16px}.waTicks.read{color:#53bdeb}.waTicks.unknown{font-size:15px}
@media(max-width:700px){#replySummary{margin:12px 16px}#threadStats{line-height:1.6}.messageMeta{flex-wrap:wrap}}

/* Scrollbar polish: thin rails, reveal the thumb only while interacting. */
*{scrollbar-width:thin;scrollbar-color:transparent transparent}
*:hover,*:focus-within{scrollbar-color:rgba(50,105,107,.32) transparent}
*::-webkit-scrollbar{width:6px;height:6px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:transparent;border-radius:999px}
*:hover::-webkit-scrollbar-thumb,*:focus-within::-webkit-scrollbar-thumb{background:rgba(50,105,107,.32)}
*::-webkit-scrollbar-thumb:hover{background:rgba(8,124,112,.58)}
*::-webkit-scrollbar-button{display:none;width:0;height:0}
@media (forced-colors:active){*{scrollbar-color:auto}}
/* Fixed app shell: keep navigation in view; scroll content panes only. */
html,body{height:100%;height:100dvh;overflow:hidden}
body{display:flex;flex-direction:column;min-height:0}
body>header,body>#sessions,body>#notice,body>#replySummary,body>#opsNav{flex-shrink:0}
header{padding:12px 28px}
#sessions{padding-top:10px}.session{padding:8px 16px}
#notice{margin:8px 28px;padding:7px 12px;max-height:64px;overflow:auto}
#replySummary{margin:0 28px 8px;padding:8px 12px}
#opsNav{margin:0 28px 8px;gap:6px;flex-wrap:nowrap;overflow-x:auto;min-height:46px}
#opsNav button{flex:0 0 auto;white-space:nowrap;padding:9px 12px}
main{flex:1 1 0;min-height:0;margin:0 28px 16px;grid-template-columns:320px minmax(0,1fr)}
main>aside,main>article{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain}
main>aside{padding:14px 18px}main>article{padding:18px 22px}
#threads,#contacts,#timeline{max-height:none;overflow:visible}
#opsView{flex:1 1 0;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0 28px 16px}
@media(max-width:700px){
 header{padding:10px 16px;gap:8px;flex-wrap:nowrap}header div{flex:1 1 auto;min-width:0}header b{font-size:18px}header small{font-size:10px;margin-top:2px}header button{flex:0 0 auto;font-size:10px;padding:7px;max-width:76px}
 #sessions{padding:8px 16px 0;gap:8px}.session{padding:6px 9px}.session b{font-size:12px}.session span{font-size:10px}
 #notice{margin:6px 16px;padding:6px 9px;font-size:11px;max-height:42px}
 #replySummary{margin:0 16px 6px;padding:6px 9px;font-size:11px}
 #opsNav{margin:0 16px 6px;min-height:42px;gap:6px}#opsNav button{flex:0 0 auto;min-height:38px;font-size:12px;padding:8px 10px}
 main{display:block;margin:0 16px 12px;min-height:0}main>aside,main>article{padding:14px;height:100%;overflow:auto}
 main>article{display:none}.opened main>aside{display:none}.opened main>article{display:block}
 #back{margin-bottom:12px}#opsView{margin:0 16px 12px;padding:16px}
}