@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
:root{font-family:'Cairo',Tahoma,sans-serif;color:#163b36;background:#f3f7f5;font-synthesis:none;--green:#08745f;--mint:#e6f4ee;--line:#dbe7e1;--muted:#74857f;--red:#a33c38;--shadow:0 12px 36px #123d3010}*{box-sizing:border-box}body{margin:0;min-height:100vh}a{color:var(--green);text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}.brand-mark{width:44px;height:44px;border-radius:15px;background:#0b735f;color:#fff;display:grid;place-items:center;font-weight:800;font-size:22px;box-shadow:0 6px 15px #08745f28}.primary,.secondary,.icon-button{border:0;border-radius:12px;padding:10px 16px;font-weight:700}.primary{background:var(--green);color:white}.primary:hover{background:#075d4e}.primary:disabled{opacity:.55;cursor:wait}.secondary,.icon-button{background:#eff5f1;color:var(--green);border:1px solid var(--line)}.auth-page{display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top left,#d8efe5,transparent 34%),#f4f7f5}.auth-card{width:min(100%,500px);padding:34px;background:white;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.auth-card>.brand-mark{margin:auto}.auth-card h1,.auth-card>p{text-align:center}.auth-card h1{font-size:23px;margin:14px 0 6px}.auth-card p{color:var(--muted);font-size:14px}.auth-card form,.settings-card form{display:grid;gap:14px;margin-top:22px}.auth-card label,.settings-card label{display:grid;gap:6px;font-size:13px;font-weight:700}.auth-card input,.settings-card input,.search-field,.composer textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;color:#193d36;outline:none}.auth-card input:focus,.settings-card input:focus,.composer textarea:focus,.search-field:focus{border-color:#69b59d;box-shadow:0 0 0 3px #08745f15}.notice{padding:12px 14px;border-radius:12px;font-size:13px;margin:14px 0}.success{background:#e7f6ec;color:#256342}.error{background:#fff0ed;color:var(--red)}.warning{background:#fff6de;color:#775b1c}.muted{color:var(--muted);font-size:12px}.staff-header,.customer-header{height:74px;padding:12px 26px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}.staff-brand,.customer-header>div:nth-child(2){display:grid}.staff-brand small,.customer-header small{color:var(--muted);font-size:12px}.staff-header nav{margin-inline-start:auto;display:flex;align-items:center;gap:20px;font-size:13px}.inbox-layout{display:grid;grid-template-columns:320px minmax(380px,1fr) 245px;gap:16px;padding:18px;height:calc(100vh - 74px);min-height:600px}.conversation-panel,.thread-panel,.api-side,.settings-card,.chat-card{background:white;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.conversation-panel{display:flex;flex-direction:column;overflow:hidden}.panel-title{display:flex;justify-content:space-between;align-items:center;padding:18px 16px 10px}.panel-title h1{font-size:19px;margin:0}.panel-title p{font-size:11px;color:var(--muted);margin:2px 0}.search-field{margin:8px 12px;width:calc(100% - 24px);font-size:13px}.conversation-list{overflow:auto;padding:4px 8px 12px}.conversation-item{width:100%;display:grid;text-align:right;gap:3px;border:0;border-bottom:1px solid #eff3f0;background:white;padding:13px 12px;color:#203f38}.conversation-item:hover,.conversation-item.selected{background:#edf6f1}.conversation-item strong{font-size:14px}.conversation-item small,.conversation-item span{font-size:11px;color:var(--muted)}.conversation-item span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.thread-panel{display:flex;flex-direction:column;overflow:hidden}.empty-state{margin:auto;text-align:center;color:var(--muted)}.empty-icon{font-size:42px}.thread-view{height:100%;display:flex;flex-direction:column}.thread-view[hidden]{display:none}.thread-heading{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.thread-heading h2{font-size:18px;margin:0}.thread-heading small{color:var(--muted)}.thread-actions{display:flex;gap:8px}.thread-actions .secondary{font-size:12px}.message-list{flex:1;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:20px;background:linear-gradient(180deg,#f7faf8,#f2f7f4)}.message{max-width:min(78%,620px);padding:10px 13px;border-radius:15px;box-shadow:0 3px 10px #0d39230b;display:flex;flex-direction:column;gap:6px}.message-body{white-space:pre-wrap;overflow-wrap:anywhere}.message small{font-size:10px;color:var(--muted)}.message.incoming{align-self:flex-start;background:white;border:1px solid var(--line);border-bottom-right-radius:4px}.message.outgoing{align-self:flex-end;background:#e0f2e7;border:1px solid #cce7d6;border-bottom-left-radius:4px}.attachment-link{font-size:12px;overflow-wrap:anywhere}.message-image{max-width:min(280px,100%);max-height:240px;border-radius:10px;object-fit:contain}.message audio{max-width:100%}.composer{padding:12px 14px;border-top:1px solid var(--line);background:white}.composer textarea{resize:vertical;min-height:50px;max-height:180px}.composer-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}.file-button{border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:12px;color:var(--green);cursor:pointer}.file-button input{display:none}.composer-tools .icon-button{padding:7px 10px;font-size:12px}.send-button{margin-inline-start:auto}.form-footnote{font-size:10px;color:var(--muted);padding-top:7px}.api-side{padding:18px}.api-side h2{font-size:16px;margin:0 0 10px}.api-side p{font-size:13px}.side-note{background:#f1f7f3;padding:12px;border-radius:12px;color:#516b61;font-size:12px;margin-top:18px}.settings-shell{max-width:920px;margin:28px auto;padding:0 18px}.settings-card{padding:24px;margin-bottom:18px}.settings-card h1,.settings-card h2{margin-top:0;font-size:20px}.settings-card p{font-size:13px;color:var(--muted)}.settings-card form{grid-template-columns:1fr 1fr}.settings-card form h2,.settings-card form button{grid-column:1/-1}.settings-card form label{font-size:12px}.webhook-box{background:#f5f8f6;border:1px solid var(--line);border-radius:14px;padding:16px;margin:18px 0}.webhook-box h2{font-size:15px}.webhook-box code{display:block;direction:ltr;text-align:left;overflow-wrap:anywhere;background:white;padding:10px;border-radius:8px}.users-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:16px}.user-table>div{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:12px}.user-table span{color:var(--muted)}.customer-page{background:linear-gradient(145deg,#eaf5ef,#f7faf8 45%,#f5f8f5)}.customer-header{height:70px;padding-inline:7vw}.customer-shell{width:min(920px,calc(100% - 28px));margin:32px auto}.customer-intro{margin:0 0 20px}.eyebrow{color:var(--green);font-size:12px;font-weight:700}.customer-intro h1{font-size:24px;margin:5px 0}.customer-intro p{color:var(--muted);margin:0;font-size:14px}.chat-card{min-height:60vh;display:flex;flex-direction:column;overflow:hidden}.chat-heading{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}.chat-heading div{display:grid}.chat-heading small{font-size:11px;color:var(--muted)}.live-dot{color:var(--green);font-size:12px}.live-dot:before{content:' ';display:inline-block;background:#24a56b;border-radius:50%;width:7px;height:7px;margin-inline-end:7px}.customer-shell .message-list{min-height:330px}.customer-shell .composer{margin-top:auto}.privacy-note{text-align:center;color:var(--muted);font-size:11px;margin:14px 0}.recording{color:#ac403a}.notice a{text-decoration:underline}
@media(max-width:960px){.inbox-layout{grid-template-columns:290px minmax(340px,1fr);}.api-side{display:none}}
@media(max-width:680px){.staff-header,.customer-header{padding:10px 14px}.staff-header nav{gap:10px;font-size:11px}.staff-brand small{display:none}.inbox-layout{display:flex;flex-direction:column;height:auto;min-height:calc(100vh - 74px);padding:10px}.conversation-panel{max-height:34vh;min-height:220px}.thread-panel{min-height:60vh}.thread-heading{padding:12px}.thread-heading h2{font-size:15px}.thread-actions .secondary{padding:7px;font-size:10px}.message-list{padding:12px}.settings-card form,.users-layout{grid-template-columns:1fr}.settings-card form h2,.settings-card form button{grid-column:1}.user-table>div{grid-template-columns:1fr;gap:2px}.customer-shell{margin:20px auto}.customer-intro h1{font-size:20px}.customer-intro p{font-size:12px}.chat-card{min-height:65vh}.composer-tools{gap:6px}.composer-tools .icon-button,.file-button{font-size:10px;padding:7px}.send-button{padding:8px 12px}.auth-card{padding:24px}}