:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#20312f;background:#f7f9f8;font-size:14px;--accent:#087f79;--line:#e5ebe8;--muted:#71817c}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,a:focus-visible{outline:3px solid #6ac6b7;outline-offset:3px}button{border:0}a{color:var(--accent)}[hidden]{display:none!important}h1,h2,h3,p{margin-top:0}input,select,textarea{width:100%;border:1px solid #dce4df;border-radius:9px;background:#fff;color:inherit;padding:12px;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #087f7915}label{display:block;font-size:13px;font-weight:600}label input{margin-top:7px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--muted)}.brand-mark{height:40px;width:40px;border-radius:12px;background:var(--accent);color:white;font-size:24px;font-weight:750;display:grid;place-content:center;letter-spacing:-3px;text-decoration:none;position:relative}.brand-mark span{color:#a8e6d6;position:absolute;left:23px;top:10px;font-size:19px}.primary{background:var(--accent);color:#fff;border-radius:9px;padding:11px 19px;font-weight:650;min-height:44px}.primary:hover{background:#066760}.secondary{background:white;border:1px solid #dbe4df;padding:9px 13px;border-radius:8px;min-height:40px;font-weight:600}.text-button{background:transparent;color:var(--accent);font-size:12px;padding:8px}.icon-button{background:transparent;color:#65766f;font-size:22px;border-radius:8px;width:40px;height:40px;flex-shrink:0}.icon-button:hover{background:#eff5f1}.login-screen{min-height:100dvh;padding:40px 6%;display:flex;flex-direction:column;align-items:center;gap:46px;background:radial-gradient(ellipse at 20% 10%,#dbeee6,transparent 55%),#f7faf8}.login-brand{display:flex;gap:12px;align-items:center;align-self:flex-start;font-size:19px}.login-card{padding:45px;background:white;border:1px solid #e0e9e3;border-radius:20px;box-shadow:0 24px 80px #16362b0c;max-width:440px;width:100%}.login-card h1{font-size:32px;line-height:1.25;letter-spacing:-1.2px;margin:15px 0}.login-card p{color:var(--muted);line-height:1.6}.login-card form{display:grid;gap:18px;margin-top:30px}.login-card .primary{margin-top:8px}.login-screen>small{color:var(--muted)}#login-error{color:#a04442}.workspace{display:flex;height:100dvh;overflow:hidden;background:white}.rail{width:76px;background:#f4f8f5;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:25px 0 20px;gap:28px;flex-shrink:0}.rail-button{width:43px;height:43px;border-radius:11px;background:transparent;font-size:24px;color:#7a8a82}.rail-button.selected{color:var(--accent);background:#e0eee6}.rail-spacer{flex:1}.avatar,.visitor-avatar{display:grid;place-content:center;width:38px;height:38px;background:#e8ede8;color:#587360;border-radius:50%;font-size:12px;font-weight:750;flex-shrink:0}.inbox{width:350px;flex-shrink:0;border-right:1px solid var(--line);display:flex;flex-direction:column;background:#fcfdfc}.inbox-heading{padding:29px 25px 17px;display:flex;align-items:center;justify-content:space-between}.inbox h1{font-size:25px;margin:8px 0 0;letter-spacing:-.7px}.count{display:inline-flex;vertical-align:middle;background:#e4f0e9;color:var(--accent);padding:4px 7px;border-radius:7px;font-size:12px;margin-left:5px}.filter-wrap{padding:0 24px}.filter-wrap select{padding:9px 11px;font-size:12px;background:#fff}.search{display:flex;align-items:center;gap:7px;margin-top:12px;background:#f0f4f1;border-radius:9px;padding:0 12px}.search span{font-size:23px}.search input{background:transparent;border:0;box-shadow:none;padding:11px 0;margin:0;font-weight:400;font-size:12px}.tabs{display:flex;border-bottom:1px solid var(--line);padding:18px 23px 0;gap:18px}.tabs button{padding:0 1px 12px;background:none;font-size:12px;color:var(--muted);border-bottom:2px solid transparent}.tabs .active{color:var(--accent);font-weight:700;border-color:var(--accent)}.conversation-list{overflow:auto;flex:1;padding:8px 11px}.conversation-item{display:flex;text-align:left;width:100%;gap:12px;padding:17px 12px;border-radius:10px;background:transparent;color:inherit;margin:3px 0}.conversation-item:hover{background:#f0f5f1}.conversation-item.selected{background:#eaf4ee}.conversation-item .item-body{min-width:0;flex:1}.item-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.item-top b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-top time{font-size:10px;color:#8c9a93;white-space:nowrap}.item-site{font-size:10px;margin:5px 0 6px;color:#698478}.item-preview{font-size:12px;color:#86908b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unread-dot{width:7px;height:7px;background:var(--accent);border-radius:50%;display:inline-block;margin-right:5px}.conversation-item.unread .item-preview{color:#3b5148;font-weight:600}.inbox-footer{padding:17px 24px;display:flex;align-items:center;gap:7px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.inbox-footer button{margin-left:auto}.status-dot{height:6px;width:6px;border-radius:50%;background:#459a7e}.conversation-pane{flex:1;min-width:0;display:flex;flex-direction:column;background:#fff}.empty-state{margin:auto;text-align:center;padding:25px;max-width:450px}.empty-icon{width:80px;height:80px;border-radius:26px;background:#ecf4ee;color:var(--accent);display:grid;place-content:center;font-size:40px;margin:0 auto 24px}.empty-state h2{font-size:23px;letter-spacing:-.5px}.empty-state p{line-height:1.7;color:var(--muted)}.conversation{height:100%;display:flex;flex-direction:column;min-height:0}.conversation-header{padding:22px 30px;display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--line)}.conversation-title{flex:1;min-width:0}.conversation-title h2{font-size:16px;margin:0 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-title div{font-size:11px;color:var(--muted)}.conversation-toolbar{padding:9px 30px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);font-size:11px}.badge{padding:4px 8px;border-radius:5px;background:#e9f1eb;color:#507261;font-size:10px;text-transform:capitalize}.message-scroll{flex:1;min-height:0;overflow:auto;padding:32px 38px;background:#fbfcfa}.day-divider{text-align:center;font-size:10px;color:#90a096;margin-bottom:28px}.message{max-width:77%;margin-bottom:23px}.message.agent{margin-left:auto}.message-label{font-size:10px;color:var(--muted);margin-bottom:7px;display:flex;align-items:center;gap:8px}.message.agent .message-label{justify-content:flex-end}.message-bubble{padding:14px 17px;background:white;border:1px solid #e0e7e1;border-radius:0 13px 13px 13px;line-height:1.65;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}.message.agent .message-bubble{background:#e3f0e8;border-color:#d8eadd;border-radius:13px 0 13px 13px}.composer{padding:21px 30px 26px;border-top:1px solid var(--line);margin:0}.composer-heading{font-size:11px;font-weight:600;margin-bottom:12px;display:flex;justify-content:space-between}.composer textarea{resize:none;border:0;background:#f8faf7;box-shadow:none;padding:12px 13px;line-height:1.6}.composer-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}.composer-footer small{font-size:10px;color:#90a095}.primary span{margin-left:14px}.details{width:280px;flex-shrink:0;border-left:1px solid var(--line);padding:30px 24px;overflow:auto;position:relative}.details>.icon-button{position:absolute;right:9px;top:13px}.details .eyebrow{margin:23px 0 29px}.details h3{font-size:19px}.details dl{margin:25px 0}.details dt{font-size:10px;color:var(--muted);margin-top:23px;margin-bottom:7px}.details dd{margin:0;font-size:12px;overflow-wrap:anywhere;line-height:1.6}.preview-banner{padding:8px 24px;font-size:10px;background:#fff3dc;color:#8f6b2e;margin-bottom:12px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:13px 22px;background:#203e31;color:white;border-radius:10px;box-shadow:0 9px 40px #0002;z-index:100;max-width:90vw;font-size:13px}dialog{border:1px solid #dce7de;border-radius:16px;padding:32px;max-width:440px;width:calc(100vw - 32px);color:inherit}dialog::backdrop{background:#142e2550;backdrop-filter:blur(3px)}.dialog-close{position:absolute;right:10px;top:10px}dialog h2{font-size:22px;margin-right:20px}dialog p{line-height:1.7;color:var(--muted)}dialog label{margin:20px 0}dialog .actions{display:flex;gap:10px;flex-wrap:wrap}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.mobile-back{display:none}.list-empty{padding:35px 12px;color:var(--muted);font-size:13px;text-align:center;line-height:1.7}@media(max-width:1200px){.details{position:absolute;right:0;top:0;bottom:0;background:white;box-shadow:-15px 0 60px #18382620;z-index:5}.inbox{width:310px}.message-scroll{padding:27px}.conversation-header{padding:20px}.composer{padding:20px}}@media(max-width:700px){.rail{width:57px;padding:20px 0;gap:23px}.rail .brand-mark{width:34px;height:34px;font-size:21px;border-radius:10px}.brand-mark span{font-size:16px;left:20px;top:9px}.inbox{width:calc(100% - 57px)}.inbox-heading{padding:25px 21px 20px}.filter-wrap{padding:0 20px}.tabs{padding-left:20px;gap:22px}.conversation-pane{display:none}.workspace.show-conversation .inbox,.workspace.show-conversation .rail{display:none}.workspace.show-conversation .conversation-pane{display:flex;width:100%}.mobile-back{display:block}.conversation-header{padding:14px 10px;gap:8px}.conversation-title h2{font-size:14px}.conversation-header .secondary{font-size:12px;padding:7px 10px}.conversation-header>.visitor-avatar{display:none}.conversation-toolbar{padding:8px 19px;gap:7px}.message-scroll{padding:24px 18px}.message{max-width:89%}.composer{padding:14px 17px max(17px,env(safe-area-inset-bottom))}.composer-footer small{display:none}.composer-footer{justify-content:flex-end}.composer textarea{font-size:16px}.login-screen{padding:25px 22px;gap:35px}.login-card{padding:30px 25px}.login-card h1{font-size:29px}.details{width:min(330px,100vw)}.inbox-footer{padding-bottom:max(17px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:no-preference){.conversation-item,.primary{transition:background .15s}dialog[open]{animation:appear .15s ease-out}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}

#details-toggle{font-size:15px;font-weight:700;width:30px;height:30px;border:1px solid #dbe5dd;border-radius:50%}