:root{--navy:#102131;--panel:#192a3b;--panel2:#21364b;--blue:#1763a8;--line:#2b4054;--muted:#91a9c0;--text:#e8f0fa;--green:#19b785}*{box-sizing:border-box}body{margin:0;background:var(--navy);color:var(--text);font:14px system-ui,-apple-system,"Segoe UI",sans-serif}.app-shell{min-height:100vh;display:flex}.rail{width:64px;flex:0 0 64px;background:#164879;display:flex;align-items:center;flex-direction:column;padding:10px 0;gap:9px}.brand-mark,.contact-avatar{border-radius:50%;background:#f3f8ff;color:#1864a7;font-weight:800;display:grid;place-items:center}.brand-mark{width:40px;height:40px;margin-bottom:13px;text-decoration:none;font-size:23px}.rail-item{color:#e5f2ff;width:48px;height:47px;border-radius:13px;display:grid;place-items:center;text-decoration:none;font-size:22px}.rail-item.active{background:#2586df}.rail-bottom{margin-top:auto}.main-area{min-width:0;flex:1}.topbar{height:76px;background:#194a7c;display:flex;align-items:center;justify-content:space-between;padding:0 22px}.topbar strong{display:block;font-size:17px}.topbar small{color:#c7d9ec;font-size:11px}.top-actions{display:flex;align-items:center;gap:12px;font-size:12px}.connection-dot{width:9px;height:9px;background:#35d6a4;border-radius:50%}.avatar{width:38px;height:38px;border-radius:50%;background:#318de0;display:grid;place-items:center;font-weight:700}.workspace{height:calc(100vh - 76px);min-height:520px;display:flex}.inbox{width:314px;flex:0 0 314px;background:#182838;border-right:1px solid var(--line);display:flex;flex-direction:column}.inbox-title{padding:18px 15px 9px;display:flex;justify-content:space-between}.inbox-title h1{font-size:19px;margin:0 0 3px}.inbox-title small,.contact-title small{color:var(--muted);font-size:11px}.icon-button{background:none;border:0;color:var(--muted);font-size:22px}.filters{display:flex;gap:6px;padding:2px 11px 12px}.filter{border:0;background:#20364a;color:#b9cde0;padding:6px 11px;border-radius:18px;font-size:12px}.filter.active{background:#1d5c94;color:#fff}.filter b{color:#40dfaa;margin-left:3px}.search{background:#101e2c;border:0;color:#fff;border-radius:9px;margin:0 11px 8px;width:calc(100% - 22px);font-size:12px;padding:10px}.search::placeholder,textarea::placeholder{color:#91a9c0}.chat-list{overflow:auto}.chat-item{width:100%;border:0;border-bottom:1px solid #2b3e51;background:transparent;color:var(--text);display:flex;text-align:left;gap:11px;padding:14px 12px;align-items:center}.chat-item:hover,.chat-item.selected{background:#243a50}.chat-item .contact-avatar{width:42px;height:42px;flex:none}.chat-summary{min-width:0;flex:1}.chat-line{display:flex;justify-content:space-between;gap:5px}.chat-line strong{font-size:13px}.chat-line small{font-size:10px;color:var(--muted)}.chat-preview{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#a9bfd3;margin-top:4px}.conversation{min-width:0;flex:1;display:flex;flex-direction:column;background:#0f1d2b}.chat-header{height:67px;background:#182838;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 18px;gap:10px}.contact-avatar{width:40px;height:40px}.contact-title strong{font-size:14px;display:block}.messages{flex:1;overflow:auto;padding:25px 5%;background-color:#101e2d;background-image:radial-gradient(#26374a 1px,transparent 1px);background-size:23px 23px}.empty-state{text-align:center;position:absolute;left:calc(50% + 157px);top:45%;transform:translate(-50%,-50%);color:#9fb3c6;max-width:300px}.empty-icon{margin:auto auto 15px;width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:#1a3045;font-size:24px;color:#63aaf1}.empty-state h2{font-size:18px;color:#e2edf8}.empty-state p{font-size:13px}.bubble-row{display:flex;margin:9px 0}.bubble-row.out{justify-content:flex-end}.bubble{max-width:min(72%,540px);background:#1b3347;border-radius:12px 12px 12px 3px;padding:10px 13px;box-shadow:0 2px 8px #0002;white-space:pre-wrap;overflow-wrap:anywhere}.out .bubble{background:#075f50;border-radius:12px 12px 3px 12px}.bubble img{max-width:100%;max-height:300px;display:block;border-radius:8px}.bubble a{color:#c8e4ff}.bubble time{display:block;text-align:right;color:#a8c0d1;font-size:10px;margin-top:5px}.composer{background:#172738;padding:9px 16px 12px}.composer-row{display:flex;align-items:center;gap:10px}.attach,.send-button{border:0;background:none;color:#e1ecf7;font-size:22px;width:34px;height:40px;cursor:pointer}.attach{display:grid;place-items:center}.composer textarea{resize:none;max-height:120px;flex:1;border:1px solid #25394c;background:#101e2c;color:#fff;border-radius:10px;padding:11px 13px;outline:none}.send-button{color:#67b2fa}.file-preview{display:none;color:#a7c8e7;padding:0 0 8px 52px;font-size:12px}.file-preview.show{display:block}.settings-wrap{max-width:880px;margin:42px auto;padding:0 24px}.settings-heading{display:flex;gap:15px;align-items:center;margin-bottom:22px}.settings-icon{width:47px;height:47px;border-radius:14px;background:#1d5a8f;display:grid;place-items:center;font-size:22px}.settings-heading h1{font-size:23px;margin:0 0 4px}.settings-heading p,.settings-card p{color:var(--muted);margin:0}.settings-card{background:#192a3b;border:1px solid #2a4055;border-radius:14px;padding:22px;margin-bottom:16px}.settings-card h2{font-size:16px;margin:0 0 6px}.settings-card hr{border-color:#33495d;margin:18px 0}.settings-card .form-control{background:#101e2c;border-color:#30475b;color:#e7f0f8}.form-label{font-size:12px;color:#b6cadc}.form-text{color:#91a9c0!important}.status-pill{font-size:11px;padding:6px 10px;border-radius:18px}.status-pill.ok{background:#123f39;color:#57dbb0}.status-pill.off{background:#533c20;color:#ffd18a}.secret-field{display:flex;align-items:center;gap:12px}.secret-field span{font-size:12px;color:#95aec4;white-space:nowrap}.webhook-url{display:block;background:#101e2c;border-radius:8px;padding:11px;color:#83c1ff;overflow-wrap:anywhere}.setup-list{color:#c5d5e4;padding-left:20px}.setup-list li{margin:9px 0}.alert{font-size:13px}@media(max-width:740px){.rail{width:52px;flex-basis:52px}.rail-item{width:42px}.inbox{width:100%;flex-basis:100%}.conversation{display:none}.workspace.show-chat .inbox{display:none}.workspace.show-chat .conversation{display:flex}.top-actions #conn-label{display:none}.settings-wrap{margin:25px auto;padding:0 14px}.settings-card{padding:17px}.empty-state{left:50%}}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{width:min(390px,100%);background:#192a3b;border:1px solid #2a4055;border-radius:16px;padding:30px}.login-card h1{font-size:21px;margin:13px 0 5px}.login-card p{color:#91a9c0;margin-bottom:22px}.login-card .form-control{background:#101e2c;border-color:#30475b;color:#fff}.login-mark{width:48px;height:48px}
