@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root { font-family: 'DM Sans', sans-serif; color: #18273a; background: #eef4f8; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #eef4f8; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #75c9e8; outline-offset: 2px; }
.login-shell { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 12% 5%, #c9effa 0, transparent 27rem), radial-gradient(circle at 88% 90%, #d4e8fa 0, transparent 30rem), #f5f8fb; }
.login-card { width: min(454px, 100%); padding: clamp(26px, 6vw, 42px); border: 1px solid #dce7ef; border-radius: 28px; background: #fff; box-shadow: 0 26px 70px #34546b22; }
.login-brand { display:flex; align-items:center; gap:14px; }
.brand-mark { flex:0 0 auto; width:48px; height:48px; display:grid; place-items:center; border-radius:16px; background:linear-gradient(145deg,#39b9e7,#1588ba); color:#fff; font-family:Manrope,sans-serif; font-weight:800; letter-spacing:-1px; box-shadow:0 8px 20px #168cba42; }
.eyebrow { margin:0 0 4px; text-transform:uppercase; letter-spacing:.12em; font-size:.69rem; font-weight:800; color:#2989b4; }
h1,h2,p { margin-top:0; } h1,h2 { font-family:Manrope,sans-serif; color:#18273a; } h1 { margin-bottom:0; font-size:1.38rem; line-height:1.2; } h2 { font-size:1.05rem; } .muted,.empty { color:#62758a; line-height:1.55; }.login-card>.muted{margin:26px 0 22px;}
label { display:block; margin:17px 0 7px; color:#34485d; font-size:.9rem; font-weight:700; } input,textarea { width:100%; border:1px solid #cfdde7; border-radius:12px; background:#fff; color:#1b2a3a; padding:13px 14px; transition:border .15s,box-shadow .15s; } input:focus,textarea:focus{border-color:#4fb9e1;box-shadow:0 0 0 3px #92dbf433;outline:0;}
.primary { border:0; border-radius:12px; padding:12px 17px; color:#fff; background:linear-gradient(135deg,#238fbd,#1676ac); box-shadow:0 6px 15px #187bab36; font-weight:800; transition:transform .15s,filter .15s; } .primary:hover{filter:brightness(1.05);transform:translateY(-1px);}.login-button { width:100%; margin-top:24px; min-height:48px; } button:disabled { opacity:.48; cursor:not-allowed; transform:none!important; }.notice { color:#a04b34; margin:16px 0 0; font-size:.9rem; }
.support-shell { min-height:100dvh; display:grid; grid-template-columns:340px minmax(0,1fr); background:#f5f8fb; }.conversation-panel { border-right:1px solid #dce6ed; background:#fff; display:flex;flex-direction:column; min-height:0; }.panel-header,.chat-header { display:flex; justify-content:space-between; gap:14px; padding:22px 22px 18px; border-bottom:1px solid #e4edf2; }.panel-header h1 { margin:0; font-size:1.22rem; }.panel-header .eyebrow { margin:0 0 5px; }.icon-button,.operator button,.actions button { border:1px solid #d1dfe8; border-radius:10px; background:#fff; color:#395168; padding:8px 11px; font-weight:700; }.icon-button{font-size:1.22rem;line-height:1;}.operator { padding:13px 22px; color:#607489; font-size:.82rem; display:flex;align-items:center;justify-content:space-between;gap:8px; border-bottom:1px solid #e4edf2; }.operator span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.conversation-list{overflow:auto;}.operator-actions{display:flex;gap:7px;align-items:center;}.operator-actions button{font-size:.78rem;padding:7px 9px;}.search-box{display:flex;align-items:center;gap:7px;margin:13px 14px 8px;padding:0 8px;border:1px solid #d6e3ea;border-radius:11px;background:#f9fcfd;}.search-box span{color:#5d93aa;font-size:1.25rem;}.search-box input{border:0;background:transparent;padding:10px 0;min-width:0;box-shadow:none!important;}.search-box button{border:0;border-radius:8px;background:#e4f5fa;color:#287193;font-size:.76rem;font-weight:800;padding:7px 8px;}.pin-mark{color:#20a4d3;font-size:.66rem;vertical-align:middle;margin-right:4px;}.conversation { width:100%; display:flex; gap:12px; align-items:center; border:0; border-left:3px solid transparent; border-bottom:1px solid #eef3f6; padding:15px 18px; text-align:left; color:#22364b; background:transparent; }.conversation:hover { background:#f6fbfd; }.conversation.selected { background:#e9f7fc; border-left-color:#28a8d8; }.avatar { width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#d8f0f8;color:#16759e;font-weight:800; }.conversation-text { display:grid; gap:3px; flex:1; min-width:0; }.conversation-text strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.conversation-text small { color:#6e8295; }.status-dot { width:9px;height:9px;border-radius:50%;background:#45b984;box-shadow:0 0 0 3px #45b9841f; }.status-dot.manual { background:#f3b63f;box-shadow:0 0 0 3px #f3b63f24; }.status-dot.closed { background:#94a3b1;box-shadow:none; }
.chat-panel { min-width:0; min-height:0; display:flex; flex-direction:column; position:relative; }.chat-header{align-items:center;background:#fff;}.chat-header h2 { margin:0 0 5px; }.chat-header span { color:#64798e; font-size:.86rem; }.actions { display:flex;align-items:center;flex-wrap:wrap;gap:8px; }.actions button:hover,.operator button:hover,.icon-button:hover{background:#f1f8fb;border-color:#9dcfe0;}.actions .danger { color:#bd4f59; border-color:#edc0c5; }.actions .danger:hover{background:#fff5f5;border-color:#dd9099;}.messages { flex:1; padding:30px clamp(18px,4vw,50px); overflow:auto; background-color:#edf4f7; background-image:radial-gradient(#bdd4de70 1px,transparent 1px);background-size:20px 20px; }.bubble { max-width:min(620px,82%); padding:12px 14px 9px; margin:0 0 12px; border-radius:6px 16px 16px 16px; background:#fff; box-shadow:0 2px 8px #26445a13; color:#283b4e; }.bubble.outbound { margin-left:auto; border-radius:16px 6px 16px 16px; background:#d5f2fc; }.bubble p { margin:0 0 6px; white-space:pre-wrap; overflow-wrap:anywhere; }.bubble small { color:#70869a; font-size:.72rem; }.reply-box { display:flex; align-items:end; gap:10px; padding:16px 22px; background:#fff; border-top:1px solid #dce6ed; }.reply-box textarea { min-height:50px; max-height:160px; resize:vertical; }.reply-box .primary{min-height:50px;}.empty-chat { margin:auto; max-width:330px; text-align:center; color:#63778a; }.empty-chat .brand-mark { margin:0 auto 18px; }.toast { position:absolute;right:20px;bottom:92px;max-width:min(380px,calc(100% - 40px)); padding:11px 13px; border:1px solid #a9d8e9; border-radius:11px; background:#f1fbff; color:#27637d; box-shadow:0 8px 20px #315b711c; }
@media (max-width:760px) { .support-shell { grid-template-columns:1fr; grid-template-rows:auto 1fr; }.conversation-panel { max-height:42dvh; border-right:0; border-bottom:1px solid #dce6ed; }.panel-header{padding:16px 18px 14px;}.operator{padding:10px 18px;}.conversation-list { max-height:27dvh; }.conversation{padding:12px 16px;}.chat-header { align-items:flex-start; flex-direction:column; padding:16px 18px; }.messages { min-height:34dvh;padding:18px; }.reply-box { padding:12px; }.reply-box .primary{padding:12px 14px;}.toast{bottom:82px;right:12px;max-width:calc(100% - 24px);} }
#blazor-error-ui { display:none; }
.modal-backdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:#18304480;backdrop-filter:blur(3px);}.password-dialog{position:relative;width:min(440px,100%);padding:28px;border-radius:22px;background:#fff;box-shadow:0 22px 65px #152d4090;}.password-dialog h2{margin-bottom:10px;}.dialog-close{position:absolute;right:16px;top:14px;border:0;background:transparent;color:#607489;font-size:1.7rem;line-height:1;}.dialog-save{width:100%;margin-top:22px;}