:root{--blue:#153a79;--deep:#0b2148;--accent:#2e69b7;--pale:#edf4fc;--border:#dbe5f2;--text:#14233c;--muted:#71809c;--paper:#fff;font:15px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:#dbe6f6}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #91b9ff;outline-offset:1px}.hidden,[hidden]{display:none!important}.login-screen{min-height:100dvh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 90% 0%,#2c62ab 0%,transparent 45%),linear-gradient(160deg,#091a38,#123e81)}.login-card{width:min(420px,100%);padding:34px 28px;background:#fff;border-radius:25px;box-shadow:0 20px 65px #020b2633}.brand-symbol{width:56px;height:56px;display:grid;place-content:center;color:#fff;font-size:35px;border-radius:16px;background:linear-gradient(135deg,#123065,#4384d5);margin-bottom:13px}.login-card h1{font-size:30px;color:#102a5c;margin:0}.login-card h1 span{color:#3b79c6}.login-card p{color:#667893;margin:8px 0 27px}.login-card label{display:block;font-weight:650;margin-top:14px}.login-card input{width:100%;padding:13px 14px;border-radius:11px;border:1px solid #cdd9e9;margin-top:6px;background:#f9fbff}.primary,.secondary{border:0;border-radius:12px;padding:12px 16px;font-weight:750}.primary{width:100%;background:var(--blue);color:white;margin:18px 0 12px}.secondary{background:#edf3fc;color:#234677}.login-card small{font-size:12px;color:#8b99ad}.error{color:#bf2536;font-size:13px;min-height:19px;margin-top:8px}.app{height:100dvh;max-width:740px;margin:auto;background:#f6f9fe;display:flex;flex-direction:column;box-shadow:0 0 50px #0a23502b}.topbar{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(125deg,#102b5b,#20569a);padding:20px 17px 15px;color:#fff}.topbar small{letter-spacing:.15em;font-size:10px;font-weight:800;color:#9bc4ef}.topbar h1{font-size:25px;margin:4px 0 0;line-height:1.1}.top-actions{display:flex;align-items:center;gap:10px}.round,.user-circle{background:#ffffff24;color:#fff;border:0;width:38px;height:38px;border-radius:50%;font-weight:750;font-size:20px}.user-circle{background:#fff;color:#2559a0;font-size:13px}.screen{min-height:0;flex:1;overflow-y:auto}.search-row{display:flex;gap:8px;padding:13px 13px 8px;background:#fff}.search-row input{min-width:0;flex:1;padding:11px 13px;border:1px solid var(--border);border-radius:12px;background:#f2f6fc}.search-row select{max-width:117px;padding:7px;border:1px solid var(--border);border-radius:10px;color:#325b90;background:#fff}.filter-strip{padding:0 13px 11px;display:flex;gap:7px;background:#fff;overflow-x:auto}.chip{padding:7px 12px;border:1px solid #d9e5f4;border-radius:99px;background:#f4f8fe;color:#436285;font-weight:650;font-size:12px;white-space:nowrap}.chip.selected{background:#d8eafd;border-color:#a9cdf6;color:#16477f}.account-wrap{padding:12px 15px;background:white}.account-wrap select{border:1px solid var(--border);border-radius:8px;padding:8px}.list-items{background:#fff;min-height:40px}.conversation-card{width:100%;border:0;border-bottom:1px solid #eff3f8;padding:12px 14px;background:#fff;text-align:left;display:flex;gap:12px;align-items:center}.conversation-card:hover{background:#f3f8ff}.avatar{position:relative;flex-shrink:0;width:54px;height:54px;border-radius:15px;background:#dae6f6;color:#2456a0;display:grid;place-items:center;font-weight:800;font-size:20px;overflow:visible}.avatar>img{width:100%;height:100%;object-fit:cover;border-radius:15px}.avatar .channel-fallback{font-size:23px}.contact-photo{position:absolute;right:-4px;bottom:-4px;width:25px;height:25px;border:2px solid #fff;border-radius:50%;object-fit:cover;background:#d6e7ff}.card-main{min-width:0;flex:1}.card-top,.card-bottom{display:flex;align-items:baseline;gap:8px;justify-content:space-between}.card-top strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-top time{color:#8b9ab1;white-space:nowrap;font-size:11px}.card-channel{font-size:11px;font-weight:750;color:#2c66aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:2px 0}.card-bottom small{color:#7c8ba0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%}.bubble-count{background:#316cba;color:white;border-radius:99px;min-width:20px;padding:2px 6px;text-align:center;font-size:11px}.bottom-nav{display:flex;flex-shrink:0;justify-content:space-around;border-top:1px solid #dce7f6;background:#fff;padding:8px 0 max(8px,env(safe-area-inset-bottom))}.bottom-nav button{border:0;background:none;color:#7b8da5;font-size:11px;font-weight:750;display:grid;gap:1px;justify-items:center;min-width:95px}.bottom-nav button span{font-size:24px;line-height:1.1}.bottom-nav button.selected{color:#1c559c}.chat-heading{display:flex;align-items:center;gap:10px;background:#fff;padding:9px 12px;border-bottom:1px solid var(--border)}.chat-heading .avatar{width:42px;height:42px;border-radius:50%;font-size:14px}.chat-heading .avatar img{border-radius:50%}.back{border:0;background:none;color:#20569a;font-size:36px;line-height:1;width:28px}.chat-names{min-width:0;flex:1;display:grid}.chat-names strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-names small{color:#4a6d9f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-pill{font-size:10px;background:#e5eefb;color:#285795;border-radius:9px;padding:4px 6px}.messages{padding:15px 12px;flex:1;min-height:0;overflow-y:auto;background:linear-gradient(160deg,#e9f2fe,#f7faff);display:flex;flex-direction:column;gap:9px}.bubble{max-width:88%;padding:9px 12px 6px;border-radius:14px;box-shadow:0 2px 5px #0c2c5912;background:#fff;align-self:flex-start;overflow-wrap:anywhere;white-space:pre-wrap}.bubble.out{align-self:flex-end;background:#d6e7ff}.bubble time{display:block;text-align:right;font-size:10px;color:#7186a0;margin-top:5px}.bubble .attachment-link{display:block;color:#0f579c;text-decoration:underline;margin:4px 0}.composer{background:white;border-top:1px solid var(--border);padding:9px 10px max(12px,env(safe-area-inset-bottom))}.compose-row{display:flex;align-items:end;gap:8px}.compose-row textarea{flex:1;max-height:115px;resize:none;min-height:42px;border:1px solid #d5e3f4;border-radius:17px;background:#f6f9ff;padding:10px 12px}.attach,.send{border:0;background:#eaf3ff;color:#1f5ba2;display:grid;place-items:center;border-radius:50%;width:42px;height:42px;flex-shrink:0;font-size:25px}.send{background:#245a9e;color:white;font-size:20px}.compose-row .round{color:#245a9e;background:#edf4fe;flex-shrink:0}.compose-row .round.recording{background:#f9dadf;color:#b51a40}.files-preview{font-size:12px;padding:6px 10px;color:#315e92}.composer>small{display:block;color:#6c7d94;font-size:11px;margin:4px 9px}.content-heading{padding:22px 18px 8px}.content-heading h2{margin:0;font-size:22px;color:#193b70}.content-heading p{color:#7487a4;margin:5px 0}.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px}.metric{background:white;padding:19px;border:1px solid var(--border);border-radius:15px}.metric b{display:block;font-size:32px;color:#1b569c}.metric span{font-size:12px;color:#697e9c}.report-note{margin:15px;padding:14px;border-radius:12px;background:#eaf2fe;color:#566f92;font-size:12px}.settings-card{background:white;border-radius:15px;margin:14px;padding:20px;border:1px solid var(--border)}.settings-card>label{display:block;margin-bottom:18px}.settings-card select{display:block;width:100%;padding:12px;border-radius:9px;border:1px solid var(--border);margin-top:8px}.settings-card .check{display:flex;align-items:center;gap:10px}.settings-card p{color:#6d80a0}.settings-card .secondary{width:100%}.empty-state{text-align:center;padding:38px 18px;color:#71839f}.list-items.compact .conversation-card{padding:7px 13px}.list-items.compact .avatar{height:42px;width:42px}@media(min-width:741px){.app{border-left:1px solid #cedbf0;border-right:1px solid #cedbf0}}
#conversationDetail{display:flex;flex-direction:column;overflow:hidden}#conversationDetail .messages{flex:1;min-height:0}#conversationDetail .composer{flex-shrink:0}#conversationDetail .chat-heading{flex-shrink:0}.avatar.small{width:42px;height:42px}