:root { --red:#d90000; --ink:#172235; --muted:#66758a; --line:#dfe4eb; --soft:#f5f7f9; --green:#238a55; }
* { box-sizing:border-box; } html,body { margin:0; min-height:100%; font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:#eef1f4; } button,input { font:inherit; } button { cursor:pointer; }
.hidden { display:none !important; }.login-page { min-height:100vh; display:grid; place-items:center; padding:25px; background:linear-gradient(135deg,#16191f,#4d1d20); }.login-card { width:min(440px,100%); background:#fff; border-radius:18px; padding:36px; box-shadow:0 18px 65px rgba(0,0,0,.28); }.brand { display:flex; align-items:center; gap:9px; color:#232323; }.logo-brand img { width:255px;max-width:100%;height:64px;object-fit:contain;object-position:left center;display:block; }.eyebrow { color:var(--red); font-size:12px;letter-spacing:1.3px;font-weight:bold;margin:28px 0 9px; }.login-card h1,.title h1 { margin:0;font-size:28px; }.muted { color:var(--muted);line-height:1.5;margin:8px 0 22px; }.login-card label { font-weight:bold;font-size:14px;display:block;margin:14px 0 6px; }.login-card input,.reply-form input { width:100%;border:1px solid #bdc7d4;border-radius:9px;padding:12px;font-size:15px;outline:none; }.login-card input:focus,.reply-form input:focus { border-color:var(--red);box-shadow:0 0 0 3px #ffdede; }.primary { border:0;background:var(--red);color:#fff;border-radius:9px;padding:12px 16px;font-weight:bold; }.login-card .primary { margin-top:19px;width:100%; }.primary:disabled { opacity:.6;cursor:wait; }.footnote { margin:20px 0 0;color:var(--muted);text-align:center;font-size:12px; }.notice { margin:14px 0;padding:11px 12px;border:1px solid #efa7a7;background:#fff4f4;color:#9d0000;border-radius:8px;font-size:14px;line-height:1.35; }
.app { min-height:100vh; }.topbar { min-height:82px;padding:14px 4.5%;background:#fff;display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--line); }.brand.compact { min-width:205px; }.brand.compact.logo-brand img { width:190px;height:47px; }.title { flex:1; }.title .eyebrow { margin:0 0 4px; }.title h1 { font-size:22px; }.operator-profile { display:flex;align-items:center;gap:9px; }.operator { text-align:right; }.operator strong,.operator small { display:block; }.operator small { color:var(--muted);font-size:12px;margin-top:2px; }.operator-avatar { width:43px;height:43px;border:1px solid #d7dde5;border-radius:50%;padding:0;overflow:hidden;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:bold;cursor:pointer; }.operator-avatar img { display:none;width:100%;height:100%;object-fit:cover; }.operator-avatar.has-photo img { display:block; }.operator-avatar.has-photo span { display:none; }.outline,.link-button { background:#fff;border:1px solid #bdc7d4;color:var(--ink);border-radius:8px;padding:9px 13px;font-weight:bold; }.link-button { color:var(--red);border-color:transparent; }.workspace { display:grid;grid-template-columns:350px 1fr;min-height:calc(100vh - 82px); }.sidebar { background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0; }.sidebar-head { display:flex;justify-content:space-between;align-items:center;padding:21px 20px 14px; }.sidebar-head strong,.sidebar-head span { display:block; }.sidebar-head span { font-size:12px;color:var(--muted);margin-top:4px; }.refresh { border:0;background:var(--soft);color:var(--red);border-radius:7px;font-size:21px;line-height:24px;width:34px;height:34px; }.filter-row { padding:0 14px 13px;border-bottom:1px solid var(--line);display:flex;gap:7px; }.filter { flex:1;border:0;background:transparent;color:var(--muted);padding:8px 4px;border-bottom:2px solid transparent;font-weight:bold;font-size:13px; }.filter.active { color:var(--red);border-bottom-color:var(--red); }.conversation-list { overflow-y:auto; }.conversation-item { padding:15px 19px;border-bottom:1px solid #edf0f3;cursor:pointer; }.conversation-item:hover,.conversation-item.selected { background:#fff4f4; }.conversation-item .line { display:flex;justify-content:space-between;gap:8px;align-items:center; }.conversation-item strong { font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.conversation-item time,.conversation-item p { color:var(--muted);font-size:12px; }.conversation-item p { margin:5px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.tag { background:#ffe4e4;color:#a60000;border-radius:99px;padding:3px 7px;font-size:10px;font-weight:bold;white-space:nowrap; }.chat-area { min-width:0;display:flex; }.empty-state { text-align:center;align-self:center;margin:auto;color:var(--muted);max-width:350px;padding:24px; }.empty-state h2 { color:var(--ink);font-size:21px;margin:10px 0; }.empty-state p { line-height:1.5; }.empty-icon { color:var(--red);font-size:55px; }.empty { color:var(--muted);text-align:center;padding:28px 15px;line-height:1.5; }.empty.small { font-size:14px; }.conversation { flex:1;display:flex;flex-direction:column;max-height:calc(100vh - 82px); }.conversation-head { background:#fff;padding:19px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:16px; }.conversation-head h2 { font-size:20px;margin:0; }.conversation-head p { color:var(--muted);margin:4px 0 0;font-size:13px; }.conversation-actions { display:flex;gap:12px;align-items:center; }.status { color:var(--green);font-weight:bold;font-size:13px; }.status.closed { color:var(--muted); }.context { margin:12px 28px 0;background:#fff9e9;border:1px solid #f2dd9d;border-radius:8px;color:#62542d;padding:9px 11px;font-size:13px;line-height:1.4; }.message-list { flex:1;overflow-y:auto;padding:26px 28px;display:flex;flex-direction:column;gap:10px; }.message { max-width:min(670px,83%);padding:11px 13px;border-radius:12px;line-height:1.45;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere; }.message .sender { display:block;font-size:11px;font-weight:bold;margin-bottom:4px;opacity:.75; }.message.bot,.message.visitor { align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:3px; }.message.agent { align-self:flex-end;background:var(--red);color:#fff;border-bottom-right-radius:3px; }.reply-form { padding:16px 28px;background:#fff;border-top:1px solid var(--line);display:flex;gap:9px; }.reply-form input { flex:1; }.reply-form .primary { min-width:91px; }.conversation.closed .reply-form { display:none; }
.app-nav { min-height:49px;background:#fff;border-bottom:1px solid var(--line);padding:0 4.5%;display:flex;align-items:end;gap:25px; }.nav-item { padding:14px 2px 11px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);font-weight:bold; }.nav-item.active { color:var(--red);border-bottom-color:var(--red); }.workspace { min-height:calc(100vh - 131px); }.dashboard { max-width:1320px;margin:0 auto;padding:30px 4.5% 45px; }.dashboard-head { display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:22px; }.dashboard-head .eyebrow { margin:0 0 8px; }.dashboard-head h2 { margin:0;font-size:27px; }.dashboard-head p:not(.eyebrow) { color:var(--muted);margin:7px 0 0; }.dashboard-actions { display:flex;gap:9px;flex-wrap:wrap; }.dash-notice { padding:12px 14px;border:1px solid #efb3b3;background:#fff5f5;color:#9b0000;border-radius:9px;margin-bottom:20px;line-height:1.4;font-size:14px; }.metric-section { margin-top:30px; }.metric-section h3 { font-size:18px;margin:0 0 14px; }.section-title { display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:14px; }.section-title h3 { margin:0; }.section-title p { color:var(--muted);font-size:13px;margin:4px 0 0; }.source { color:#536175;background:#e9edf2;border-radius:99px;padding:5px 9px;font-size:11px;font-weight:bold;white-space:nowrap; }.metric-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px; }.metric-card { min-height:132px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px;box-shadow:0 2px 8px rgba(17,31,49,.035); }.metric-card span,.metric-card small { color:var(--muted);font-size:12px;line-height:1.3;display:block; }.metric-card strong { display:block;font-size:29px;margin:13px 0 8px;color:var(--ink); }.data-grid { display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:13px; }.data-card { background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px;min-width:0; }.data-card h4 { margin:0 0 11px;font-size:15px; }.data-list p { color:var(--muted);font-size:13px;margin:8px 0; }.data-row { display:grid;grid-template-columns:minmax(0,1fr) 70px 70px;gap:8px;padding:9px 0;border-top:1px solid #edf0f3;font-size:13px; }.data-row span:first-child { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.data-row span:not(:first-child) { color:var(--muted);text-align:right; }
.alert-toast { position:fixed;right:24px;bottom:24px;z-index:1000;max-width:350px;background:#20262e;color:#fff;border-left:4px solid var(--red);border-radius:9px;padding:13px 16px;box-shadow:0 12px 34px rgba(0,0,0,.25);font-size:14px;line-height:1.4; }
.export-card { background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;align-items:end;justify-content:space-between;gap:22px;flex-wrap:wrap;box-shadow:0 2px 8px rgba(17,31,49,.035); }.export-card .eyebrow { margin:0 0 7px; }.export-card h3 { margin:0;font-size:19px; }.export-card p:not(.eyebrow) { color:var(--muted);font-size:14px;margin:6px 0 0; }.export-controls { display:flex;gap:9px;align-items:end;flex-wrap:wrap; }.export-controls label { color:var(--muted);font-size:12px;font-weight:bold;display:flex;flex-direction:column;gap:5px; }.export-controls input { border:1px solid #bdc7d4;border-radius:8px;padding:9px 10px;color:var(--ink); }.export-controls .primary { padding:10px 15px; }.export-card small { width:100%;color:var(--muted);font-size:12px; }
.profile-only { width:min(620px,calc(100% - 32px));margin:70px auto;background:#fff;border:1px solid var(--line);border-radius:15px;padding:30px;box-shadow:0 4px 16px rgba(17,31,49,.06); }.profile-only .eyebrow { margin:0 0 8px; }.profile-only h2 { margin:0;font-size:25px; }.profile-only p:not(.eyebrow) { color:var(--muted);line-height:1.5;margin:9px 0 22px; }.profile-actions { display:flex;gap:9px;flex-wrap:wrap; }.profile-only small { display:block;color:var(--muted);font-size:12px;margin-top:17px; }
.user-admin-card { background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin-top:18px;box-shadow:0 2px 8px rgba(17,31,49,.035); }.user-admin-card .eyebrow { margin:0 0 7px; }.user-admin-card h3 { margin:0;font-size:19px; }.user-admin-card p:not(.eyebrow) { color:var(--muted);font-size:14px;margin:6px 0 0; }.user-create-form { display:grid;grid-template-columns:1.15fr 1.25fr 1fr .7fr auto;gap:9px;align-items:end;margin-top:18px; }.user-create-form label { color:var(--muted);font-size:12px;font-weight:bold;display:flex;flex-direction:column;gap:5px; }.user-create-form input,.user-create-form select { width:100%;border:1px solid #bdc7d4;border-radius:8px;padding:9px 10px;color:var(--ink);background:#fff; }.user-create-form .primary { padding:10px 14px;white-space:nowrap; }.user-edit-form { padding:14px;border:1px solid #f0c5c5;background:#fff8f8;border-radius:9px; }.user-edit-actions { display:flex;gap:8px;align-items:center;flex-wrap:wrap; }.user-admin-note { font-size:12px!important;margin:15px 0 8px!important; }.user-list { display:flex;flex-direction:column;border-top:1px solid #edf0f3; }.user-row { display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 2px;border-bottom:1px solid #edf0f3; }.user-row strong,.user-row small { display:block; }.user-row small { color:var(--muted);font-size:12px;margin-top:3px; }.user-role { color:#8d0000;background:#ffe7e7;border-radius:99px;padding:4px 8px;font-size:11px;font-weight:bold;white-space:nowrap; }.user-role.agent { color:#3f5066;background:#e9edf2; }.user-actions { display:flex;align-items:center;gap:8px; }.user-delete { color:#a00000;border-color:#edb5b5; }.user-edit { color:#314b66; }
.conversation-assignee { display:block;color:#315271;font-size:11px;font-weight:bold;margin-top:6px; }.conversation-assignee.waiting { color:#8b6b20; }.assignment-status { color:#315271;background:#eaf0f6;border-radius:99px;padding:5px 9px;font-size:12px;font-weight:bold;white-space:nowrap; }.conversation-actions { flex-wrap:wrap;justify-content:flex-end; }.reply-form.locked { background:#f4f6f8; }.reply-form.locked input { color:#66758a;background:#edf1f4;cursor:not-allowed; }
@media(min-width:761px) { .workspace { height:calc(100vh - 131px);min-height:0; }.sidebar,.chat-area,.conversation { height:100%;min-height:0; }.conversation { max-height:none; }.message-list { min-height:0; } }
@media(max-width:950px) { .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .topbar { padding:12px 16px;gap:10px; }.title { display:none; }.operator-profile { margin-left:auto; }.operator { margin-left:auto; }.app-nav { padding:0 16px;gap:21px; }.workspace { grid-template-columns:1fr; }.sidebar { min-height:43vh; }.conversation { max-height:none;min-height:100vh; }.conversation-head { padding:15px; }.context { margin:10px 15px 0; }.message-list { min-height:46vh;padding:18px 15px; }.reply-form { padding:12px 15px; }.outline { padding:8px 10px; }.operator small { display:none; }.dashboard { padding:24px 16px 35px; }.dashboard-head { align-items:flex-start;flex-direction:column; }.dashboard-actions { width:100%; }.dashboard-actions button { flex:1; }.data-grid { grid-template-columns:1fr; }.export-card { align-items:stretch; }.export-controls { width:100%; }.export-controls label { flex:1; }.export-controls input { width:100%; }.export-controls .primary { width:100%; }.profile-only { margin:32px auto;padding:24px; }.user-create-form { grid-template-columns:1fr; }.user-row { align-items:flex-start;flex-direction:column;gap:7px; }.user-actions { width:100%;justify-content:space-between; } }
@media(max-width:430px) { .metric-grid { grid-template-columns:1fr; }.brand.compact { min-width:auto; }.brand.compact.logo-brand img { width:112px;height:34px; }.operator { font-size:13px; }.topbar { gap:7px; } }