:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#17201d;background:#f5f7f6;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.screen{min-height:100dvh}.brand{display:flex;align-items:center;gap:11px}.brand div{display:flex;flex-direction:column}.brand strong{font-size:17px}.brand span:not(.logo){color:#66716d;font-size:12px}.logo{color:white;background:#0c6b4f;border-radius:11px;font-size:22px;padding:8px 11px}.topbar{background:#fff;padding:16px 23px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #e2e7e4}.top-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.presence{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;margin-right:8px}.presence input{accent-color:#146c4b;width:17px;height:17px}.outline{padding:9px 11px;border-radius:9px;border:1px solid #c8d2cd;background:#fff;color:#17201d;font-size:13px}.outline:hover{background:#e9f3ee}.columns{display:grid;grid-template-columns:330px minmax(0,1fr);min-height:calc(100dvh - 79px);max-height:calc(100dvh - 79px)}.conversations{background:white;border-right:1px solid #e2e7e4;overflow-y:auto}.section-heading{display:flex;align-items:center;justify-content:space-between;padding:17px 18px 10px}.section-heading h1{font-size:21px;margin:0}.section-heading span{color:#66716d;font-size:12px}.thread-list{padding:0 9px 15px}.thread{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #e2e7e4;background:#fff;padding:15px 10px;border-radius:8px;color:#17201d}.thread.active,.thread:hover{background:#e9f3ee}.thread-name{font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:8px}.thread-preview{margin-top:6px;font-size:13px;color:#66716d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.thread-time{font-size:11px;color:#66716d;font-weight:400}.count{color:#fff;background:#0c6b4f;padding:2px 7px;border-radius:999px;font-size:11px}.conversation{min-width:0;display:flex;flex-direction:column;height:100%;background:#f5f7f6}.empty{color:#66716d;text-align:center;margin:auto;padding:30px}.chat-head{background:white;padding:15px 18px;border-bottom:1px solid #e2e7e4;display:flex;align-items:center;justify-content:space-between;gap:10px}.chat-head strong{font-size:15px}.chat-head small{display:block;color:#66716d;margin-top:5px}.chat-head a{color:#0c6b4f;text-decoration:none;overflow-wrap:anywhere}.chat-messages{flex:1;overflow-y:auto;min-height:0;padding:23px 20px;display:flex;flex-direction:column;gap:12px}.bubble{padding:10px 13px;border-radius:13px;max-width:min(76%,530px);white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.45}.bubble.customer{align-self:flex-start;background:white;border:1px solid #e2e7e4}.bubble.admin{align-self:flex-end;background:#0c6b4f;color:white}.bubble time{display:block;font-size:10px;opacity:.68;margin-top:6px}.reply{display:flex;gap:8px;padding:13px;background:white;border-top:1px solid #e2e7e4}.reply textarea{flex:1;resize:none;min-height:45px;max-height:130px;border:1px solid #c8d2cd;border-radius:10px;padding:10px 12px;outline-color:#0c6b4f}.reply button,.login button{background:#0c6b4f;color:white;border:0;border-radius:9px;padding:10px 20px;font-weight:600}.login{max-width:400px;margin:12vh auto;background:white;padding:28px;border-radius:15px;box-shadow:0 7px 40px #17201d15}.login h1{margin:26px 0 7px}.muted{color:#66716d;font-size:14px}.login form{display:flex;flex-direction:column;gap:9px;margin-top:25px}.login label{font-weight:600;font-size:13px}.login input{padding:12px;border:1px solid #c8d2cd;border-radius:9px;margin-bottom:7px}.error{font-size:13px;color:#b83131;min-height:20px}.mobile-back{display:none}.controls{display:flex;gap:6px}.danger{color:#a22e2e}.small{font-size:12px}.pill{font-size:11px;font-weight:600;color:#0c6b4f}
@media(max-width:700px){.topbar{padding:11px 13px;flex-wrap:wrap}.brand strong{font-size:15px}.brand span:not(.logo){font-size:11px}.top-actions{width:100%;justify-content:space-between}.top-actions .outline{padding:8px}.columns{display:block;min-height:calc(100dvh - 121px);max-height:calc(100dvh - 121px)}.conversations{height:100%;border-right:0}.conversation{height:100%;display:none}.columns.chat-open .conversations{display:none}.columns.chat-open .conversation{display:flex}.mobile-back{display:inline-flex}.chat-head{padding:11px}.chat-messages{padding:13px}.bubble{max-width:90%}.reply{padding:9px}.login{margin:12vh 15px}.topbar .logo{padding:5px 8px}}

/* Go Magpie brand-aligned accessibility polish */
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ef8f35;outline-offset:2px}
.reply button:hover,.login button:hover{background:#07503b}
.thread.active{box-shadow:inset 3px 0 0 #0c6b4f}