:root { font-family: Inter, system-ui, sans-serif; color:#172033; background:#eef2f7; } * { box-sizing:border-box; } [hidden] { display:none !important; } body { margin:0; } button,input,select { font:inherit; } button { border:0; border-radius:8px; padding:10px 14px; background:#2463bd; color:#fff; font-weight:700; cursor:pointer; } button:hover { background:#1d519b; } button:disabled { background:#a8b5c5; cursor:not-allowed; } button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #8eb8fa; outline-offset:2px; } input,select { width:100%; border:1px solid #bcc9d9; border-radius:8px; padding:11px; } input:focus,select:focus { border-color:#3c75cf; }.settings-form { max-width:720px; display:grid; gap:10px; }.settings-form h3 { margin:18px 0 0; font-size:1rem; }.settings-form label { display:grid; gap:6px; font-weight:650; font-size:.9rem; }.field-help { color:#627086; font-size:.82rem; font-weight:400; line-height:1.4; }.field-error { min-height:1em; color:#a53232; font-size:.8rem; font-weight:600; }.field-error:empty { display:none; } input[aria-invalid="true"],select[aria-invalid="true"] { border-color:#b64444; background:#fff8f8; }
.app-shell { max-width:1550px; min-height:100vh; margin:auto; padding:24px; }.app-header { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }.eyebrow { margin:0 0 5px; color:#3a65a9; font-size:.76rem; font-weight:750; letter-spacing:.05em; text-transform:uppercase; } h1,h2,p { margin-top:0; } h1 { margin-bottom:0; font-size:1.65rem; } h2 { font-size:1.2rem; }.muted { color:#627086; line-height:1.5; }.small { font-size:.85rem; }.panel { background:#fff; border:1px solid #dbe3ee; border-radius:16px; box-shadow:0 6px 20px #24324b12; padding:22px; }.main-nav { display:flex; gap:8px; }.nav-button { background:#dce5f2; color:#38506e; }.nav-button:hover,.nav-button.active { background:#2463bd; color:#fff; }.view[hidden] { display:none; }.empty-chat { max-width:600px; margin:80px auto; text-align:center; }.empty-chat button { margin-top:8px; }.chat-workspace { display:grid; grid-template-columns:minmax(500px,1fr) 330px; gap:20px; }.chat-panel { min-height:680px; display:flex; flex-direction:column; }.chat-header { border-bottom:1px solid #e6ebf1; padding-bottom:16px; }.chat-header h2 { margin-bottom:5px; }.status-pill { display:inline-block; margin:4px 0 0; padding:4px 9px; border-radius:999px; background:#e8f1ff; color:#245797; font-size:.82rem; font-weight:700; }.chat-actions { display:flex; gap:8px; margin-top:15px; }.secondary-button { background:#edf2f7; color:#315174; }.secondary-button:hover { background:#dce8f5; }.messages { flex:1; display:flex; flex-direction:column; gap:12px; overflow-y:auto; padding:22px 2px; }.message { max-width:78%; margin:0; padding:11px 13px; border-radius:12px; background:#edf2f7; align-self:flex-start; }.message.bot { background:#e4f4ec; align-self:flex-end; }.message .sender { display:block; color:#526277; font-size:.72rem; font-weight:750; text-transform:uppercase; }.message p { margin:4px 0; white-space:pre-wrap; }.message time { color:#718096; font-size:.72rem; }.empty { align-self:center; color:#718096; padding-top:90px; }.message-form { display:flex; gap:10px; border-top:1px solid #e6ebf1; padding-top:16px; }.message-form input { flex:1; }.side-panel { min-height:680px; }.detail-tabs { display:flex; gap:8px; margin-bottom:18px; border-bottom:1px solid #e6ebf1; }.tab-button { padding:8px 4px; border-radius:0; color:#627086; background:transparent; }.tab-button:hover { color:#2463bd; background:transparent; }.tab-button.active { color:#2463bd; border-bottom:2px solid #2463bd; background:transparent; } dl { margin:0; } dl div { padding:10px 0; border-bottom:1px solid #edf0f5; } dt { color:#627086; font-size:.75rem; font-weight:700; text-transform:uppercase; } dd { margin:4px 0 0; overflow-wrap:anywhere; }.activity-list { max-height:560px; overflow-y:auto; }.activity-entry { padding:12px 2px; border-bottom:1px solid #edf0f5; }.activity-entry p { margin:3px 0; }.activity-entry time { color:#627086; font-size:.76rem; }
.management-header { display:flex; align-items:start; justify-content:space-between; gap:24px; margin-bottom:18px; }.management-header h2 { margin-bottom:5px; font-size:1.45rem; }.customer-form { display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:end; margin-bottom:16px; }.customer-form label { display:block; margin-bottom:6px; font-size:.85rem; font-weight:700; }.customer-form label span { font-weight:400; color:#627086; }.form-actions { display:flex; gap:8px; }.notice { min-height:1.2em; color:#245797; }.management-grid { display:grid; grid-template-columns:minmax(340px,.8fr) minmax(520px,1.2fr); gap:20px; }.management-column { min-height:610px; display:flex; flex-direction:column; }.column-heading { display:flex; align-items:start; justify-content:space-between; gap:12px; border-bottom:1px solid #e6ebf1; padding-bottom:14px; }.column-heading h2 { margin-bottom:4px; }.column-heading button { white-space:nowrap; }.management-list { display:flex; flex-direction:column; gap:10px; overflow-y:auto; padding:16px 2px; }.customer-card,.case-card { width:100%; padding:16px; border:1px solid #e1e7ef; border-radius:10px; background:#f8fafc; }.customer-card.active { background:#e8f1ff; border-color:#79a5e4; }.customer-card-header,.case-card-header { display:flex; justify-content:space-between; gap:12px; }.customer-card h3,.case-card h3 { margin:0; font-size:1rem; }.customer-card p,.case-card p { margin:5px 0 0; color:#526277; }.case-card .case-status { color:#245797; font-weight:700; }.card-actions { display:flex; gap:8px; margin-top:13px; }.danger-button { background:#b64444; }.danger-button:hover { background:#923535; }.empty-list { padding:30px 8px; color:#627086; text-align:center; }.development-info { margin-top:18px; color:#738096; font-size:.8rem; overflow-wrap:anywhere; }
.bot-mode { display:inline-block; margin:6px 0 0 8px; color:#627086; font-size:.78rem; }.takeover-controls { display:flex; align-items:end; flex-wrap:wrap; gap:8px; margin-top:12px; }.takeover-controls label { display:grid; gap:4px; color:#627086; font-size:.78rem; font-weight:700; }.takeover-controls select { min-width:180px; padding:8px; }.message.human { background:#fff0d4; align-self:flex-end; }.chat-feedback { min-height:1.2em; margin:10px 0 0; color:#b64444; font-size:.88rem; }.priority-badge { display:inline-block; width:max-content; padding:3px 8px; border-radius:999px; font-size:.8rem; font-weight:750; }.priority-normal { color:#2b5c42 !important; background:#e5f4eb; }.priority-urgent { color:#845114 !important; background:#fff0d4; }.priority-critical { color:#9d3030 !important; background:#fde6e6; } @media (max-width:1050px) { .chat-workspace,.management-grid { grid-template-columns:1fr; }.side-panel { min-height:auto; }.management-column { min-height:400px; } } @media (max-width:650px) { .app-shell { padding:12px; }.app-header,.management-header { align-items:start; flex-direction:column; }.customer-form { grid-template-columns:1fr; }.chat-actions,.message-form { flex-direction:column; }.main-nav { width:100%; }.nav-button { flex:1; } }
.duration-input { display:flex; align-items:center; gap:8px; }.duration-input input { max-width:150px; }.duration-presets { display:flex; flex-wrap:wrap; gap:6px; }.duration-presets button { padding:6px 10px; background:#edf2f7; color:#315174; }.duration-presets button.active { background:#2463bd; color:#fff; }
.email-test { display:grid; gap:10px; margin-top:14px; }.email-test h3 { margin:0; }.email-test-actions { display:flex; flex-wrap:wrap; gap:8px; }
.email-settings-panel { display:grid; gap:14px; margin-top:14px; padding:20px; border:1px solid #d4dfec; border-radius:14px; background:#f8fafc; }.email-settings-panel h3,.email-settings-panel p { margin:0; }.email-section-heading { display:flex; justify-content:space-between; gap:16px; }.email-section-heading h3 { margin-bottom:5px; font-size:1.08rem; }.email-group { min-width:0; margin:0; padding:15px; border:1px solid #dbe3ee; border-radius:10px; background:#fff; display:grid; gap:7px; }.email-group legend { padding:0 6px; color:#315174; font-size:.86rem; font-weight:750; }.email-group label { display:block; margin-top:3px; }.email-toggle-control { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:11px; padding:14px 15px; border:1px solid #dbe3ee; border-radius:10px; background:#fff; cursor:pointer; }.email-toggle-control.compact { margin-top:5px; background:#f8fafc; }.email-toggle-control input { width:18px; height:18px; margin:2px 0 0; cursor:pointer; }.email-toggle-control > label { display:flex !important; flex-direction:column; gap:3px; margin:0; cursor:pointer; line-height:1.35; }.email-toggle-control label span { color:#627086; font-size:.8rem; font-weight:400; }.email-field-grid { display:grid; grid-template-columns:minmax(0,1fr) 140px; gap:12px; }.email-field-grid > div { min-width:0; display:grid; gap:7px; }.email-secret-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:9px; margin-top:3px; padding:10px; border-radius:8px; background:#e8f4ec; color:#2b5c42; font-size:.83rem; font-weight:700; }.text-danger-button { padding:7px 10px; background:#fff; border:1px solid #d7a0a0; color:#a53232; font-size:.8rem; }.text-danger-button:hover { background:#fdecec; }.email-actions { display:flex; flex-wrap:wrap; gap:9px; }.email-status { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; padding:13px 14px; border-radius:10px; background:#edf2f7; color:#315174; font-size:.86rem; }.email-status > div { display:grid; gap:3px; }.email-status > div span { color:#627086; font-size:.8rem; }.email-status-dot { width:11px; height:11px; border-radius:50%; background:#8795a8; }.email-status-dot.active { background:#2f8a59; }.email-status-dot.warning { background:#c48525; }.email-status-dot.error { background:#b64444; }.email-test-section { display:grid; gap:9px; padding-top:14px; border-top:1px solid #dbe3ee; }.email-test-section h3 { font-size:.98rem; }
.attachment-panel { border-top:1px solid #e6ebf1; padding:14px 0 2px; }.attachment-heading { display:flex; justify-content:space-between; gap:12px; color:#526277; font-size:.82rem; }.attachment-heading span { font-size:.76rem; }.attachment-list { display:flex; flex-wrap:wrap; gap:8px; padding:10px 0; }.attachment-item { display:flex; align-items:center; gap:7px; max-width:100%; padding:7px 9px; border-radius:8px; background:#eef3f8; color:#315174; font-size:.82rem; }.attachment-item span { overflow-wrap:anywhere; }.attachment-item button { padding:3px 7px; font-size:.75rem; background:#b64444; }.attachment-picker { display:inline-block; border-radius:8px; padding:8px 10px; background:#edf2f7; color:#315174; font-size:.84rem; font-weight:700; cursor:pointer; }.attachment-picker input { display:none; }
.message.attachment-message { background:#edf2f7; border:1px dashed #9fb2c9; }.message.attachment-message p { white-space:pre-line; font-weight:650; }
.login-view { max-width:430px; margin:10vh auto; }.login-form { display:grid; gap:14px; margin-top:22px; }.login-form label { display:grid; gap:6px; font-size:.85rem; font-weight:700; }
.recovery-code { display:block; margin:18px 0; padding:16px; border:1px solid #79a5e4; border-radius:10px; background:#e8f1ff; color:#173f75; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:1.05rem; font-weight:750; letter-spacing:.04em; overflow-wrap:anywhere; text-align:center; }.recovery-confirm { display:flex; align-items:flex-start; gap:9px; margin:18px 0; color:#526277; font-size:.88rem; line-height:1.4; }.recovery-confirm input { width:auto; margin-top:3px; }.account-panel { display:grid; gap:10px; margin-bottom:10px; padding:18px; border:1px solid #dbe3ee; border-radius:12px; background:#f8fafc; }.account-panel h3 { margin:0; }.account-actions { display:flex; flex-wrap:wrap; gap:8px; }
.license-panel { display:grid; gap:12px; margin-top:14px; padding:18px; border:1px solid #dbe3ee; border-radius:12px; background:#f8fafc; }.license-panel h3 { margin:0; }.license-details { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }.license-details div { min-width:0; }.license-details dd { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.84rem; }.license-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }.license-picker { display:inline-block !important; border-radius:8px; padding:10px 14px; background:#edf2f7; color:#315174; font-weight:700 !important; cursor:pointer; }.license-picker input { display:none; } @media (max-width:650px) { .license-details,.email-field-grid { grid-template-columns:1fr; }.email-settings-panel { padding:14px; }.email-actions { display:grid; grid-template-columns:1fr; }.email-actions button { width:100%; }.email-status { grid-template-columns:auto minmax(0,1fr); }.email-status button { grid-column:1 / -1; width:100%; }.email-secret-actions { align-items:flex-start; flex-direction:column; }.email-secret-actions button { width:100%; } }

.bot-rules-manager { margin-top:18px; padding:22px; border:1px solid #cbd9ea; border-radius:16px; background:#fbfdff; box-shadow:0 6px 20px #24324b12; }.bot-rules-heading,.bot-rules-list-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }.bot-rules-heading h3,.bot-rules-list-heading h4,.bot-rules-editor-panel h4 { margin:0 0 5px; }.bot-rules-active { margin:14px 0; padding:9px 12px; border-radius:8px; background:#e8f1ff; color:#245797; font-weight:700; }.bot-rules-grid { display:grid; grid-template-columns:minmax(210px,.6fr) minmax(0,1.4fr); gap:16px; }.bot-rules-list-panel,.bot-rules-editor-panel { min-width:0; padding:16px; border:1px solid #dbe3ee; border-radius:12px; background:#fff; }.bot-rule-set-list { display:grid; gap:7px; margin-top:14px; }.bot-rule-set-item { width:100%; text-align:left; background:#edf2f7; color:#315174; }.bot-rule-set-item.active { background:#2463bd; color:#fff; }.bot-rule-set-item span { display:block; margin-top:3px; font-size:.76rem; font-weight:500; }.bot-rules-editor-panel { display:grid; gap:10px; }.bot-rules-editor-panel label { display:grid; gap:6px; font-weight:650; font-size:.9rem; }.bot-rules-editor-panel textarea { width:100%; resize:vertical; border:1px solid #bcc9d9; border-radius:8px; padding:11px; line-height:1.45; }.bot-rule-actions { display:flex; flex-wrap:wrap; gap:8px; }.bot-rule-confirmation { padding:12px; border:1px solid #e2b6b6; border-radius:9px; background:#fff8f8; color:#813333; }.bot-rule-confirmation p { margin-bottom:10px; }.bot-rule-confirmation div { display:flex; flex-wrap:wrap; gap:8px; }.core-rules-panel { margin-top:16px; padding:14px; border:1px solid #dbe3ee; border-radius:10px; background:#f8fafc; }.core-rules-panel summary { cursor:pointer; color:#315174; font-weight:750; }.core-rules-panel pre { margin:10px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; line-height:1.5; color:#344760; }.core-rules-panel p { margin:10px 0; }
@media (max-width:760px) { .bot-rules-grid { grid-template-columns:1fr; }.bot-rule-actions { display:grid; grid-template-columns:1fr; }.bot-rule-actions button { width:100%; } }