:root{--bg: #f4f6f8;--panel: #ffffff;--border: #d8dcde;--text: #2f3941;--muted: #68737d;--accent: #1f73b7;--accent-dark: #144a75;--danger: #cc3340;--warn: #ad5e18;--note-bg: #fff8dc;--note-border: #f0d675;--sidebar-bg: #1c2b36;--sidebar-text: #c9d3da;--row-hover: #eef4f9;--row-active: #dcecf9;--radius: 6px;--font: "Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);font-size:13px;color:var(--text);background:var(--bg)}.splash{height:100%;display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;color:var(--muted)}.app{height:100vh;display:flex;flex-direction:column}.app-body{flex:1;display:flex;min-height:0}.spacer{flex:1}.muted{color:var(--muted)}.btn{font:inherit;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:var(--radius);padding:5px 10px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-dark)}.btn-secondary{border-color:var(--accent);color:var(--accent)}.btn-ghost{border-color:transparent;background:transparent;color:var(--accent)}.btn-note{background:#b8860b;border-color:#b8860b;color:#fff}.btn-tiny{padding:1px 6px;font-size:11px}.select,.tag-input,input[type=date],input[type=search],input[type=email]{font:inherit;border:1px solid var(--border);border-radius:var(--radius);padding:5px 8px;background:var(--panel);color:var(--text)}.topbar{display:flex;align-items:center;gap:16px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--border)}.topbar-brand{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}.brand-mark{background:var(--accent);color:#fff;border-radius:var(--radius);padding:2px 7px}.mock-badge{background:var(--warn);color:#fff;border-radius:10px;font-size:10px;font-weight:700;padding:2px 8px;letter-spacing:.5px}.global-search{flex:1;max-width:560px;display:flex;gap:6px}.global-search input{flex:1}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}.live-dot{width:8px;height:8px;border-radius:50%;background:#2e8b57}.live-dot-active{animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.3}}.agent-name{font-weight:600}.sidebar{width:232px;flex-shrink:0;background:var(--sidebar-bg);color:var(--sidebar-text);overflow-y:auto;padding:12px 0}.sidebar-title{font-size:11px;text-transform:uppercase;letter-spacing:1px;padding:0 14px 8px;opacity:.7}.view-list{list-style:none;margin:0;padding:0}.view-item{width:100%;display:flex;align-items:center;gap:6px;padding:8px 14px;background:none;border:none;color:inherit;font:inherit;text-align:left;cursor:pointer}.view-item:hover{background:#ffffff12}.view-item-active{background:#ffffff1f;color:#fff;box-shadow:inset 3px 0 0 var(--accent)}.view-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.view-count-wrap{display:flex;gap:4px;align-items:center}.view-count{background:#ffffff26;border-radius:9px;padding:1px 7px;font-size:11px}.view-unassigned{background:var(--warn);color:#fff;border-radius:9px;padding:1px 6px;font-size:10px}.view-delete{opacity:.4;padding:0 2px}.view-delete:hover{opacity:1;color:#ff8080}.sidebar-search-note{padding:10px 14px;font-style:italic;opacity:.8}.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}.filterbar{background:var(--panel);border-bottom:1px solid var(--border);padding:8px 14px}.filterbar-head{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}.view-title{font-size:17px;margin:0}.dirty-marker{color:var(--warn);font-size:22px;line-height:0}.view-stats{color:var(--muted)}.filterbar-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.btn-filter-active{border-color:var(--accent);color:var(--accent);font-weight:600}.filter-count{background:var(--accent);color:#fff;border-radius:8px;font-size:10px;padding:0 5px}.caret{font-size:9px;opacity:.6}.multiselect{position:relative}.multiselect-pop{position:absolute;top:calc(100% + 4px);left:0;z-index:40;min-width:180px;max-height:300px;overflow-y:auto;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 14px #00000026;padding:6px}.multiselect-option{display:flex;align-items:center;gap:7px;padding:5px 6px;border-radius:4px;cursor:pointer}.multiselect-option:hover{background:var(--row-hover)}.multiselect-clear{width:100%;justify-content:center;margin-top:4px}.tag-input{min-width:150px}.date-label{display:inline-flex;align-items:center;gap:4px;color:var(--muted)}.bulkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 14px;background:#fdf6e3;border-bottom:1px solid var(--border)}.bulk-tag-form{display:flex;gap:5px}.queue-table{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}.table-header{display:grid;gap:0;background:var(--panel);border-bottom:2px solid var(--border);padding-right:8px}.th{font:inherit;font-weight:600;font-size:12px;text-align:left;padding:7px 8px;background:none;border:none;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.th-sortable{cursor:pointer}.th-sortable:hover{color:var(--accent)}.th-sorted{color:var(--text)}.th-check{display:flex;align-items:center;justify-content:center}.table-body{flex:1;overflow-y:auto;outline:none;background:var(--panel)}.table-body:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}.table-row{position:absolute;top:0;left:0;right:0;height:46px;display:grid;align-items:center;border-bottom:1px solid #eef1f3;cursor:pointer}.table-row:hover{background:var(--row-hover)}.row-active{background:var(--row-active)!important;box-shadow:inset 3px 0 0 var(--accent)}.row-selected{background:#f0f7ee}.row-closed{opacity:.55}.group-row{position:absolute;top:0;left:0;right:0;height:46px;display:flex;align-items:center;padding:0 12px;font-weight:700;background:var(--bg);border-bottom:1px solid var(--border)}.td{padding:0 8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-check{display:flex;justify-content:center}.cell-subject{font-weight:600;overflow:hidden;text-overflow:ellipsis}.cell-from{display:flex;flex-direction:column;line-height:1.25;min-width:0}.from-name{overflow:hidden;text-overflow:ellipsis}.from-email{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis}.cell-ellipsis{overflow:hidden;text-overflow:ellipsis}.unassigned-label{font-style:italic}.new-chip{position:absolute;top:44px;left:50%;transform:translate(-50%);z-index:30;background:var(--accent);color:#fff;border:none;border-radius:14px;padding:5px 14px;font:inherit;font-weight:600;cursor:pointer;box-shadow:0 3px 10px #00000040}.table-footer{padding:6px 14px;border-top:1px solid var(--border);background:var(--panel);color:var(--muted)}.state{padding:40px;text-align:center;color:var(--muted)}.state-emoji{font-size:30px;margin-bottom:8px}.state-error{color:var(--danger)}.status-badge{display:inline-block;padding:2px 9px;border-radius:3px;font-size:11px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.4px}.status-new{background:#e7a500}.status-open{background:#d93f4c}.status-pending{background:#3091ec}.status-escalated{background:#7a2ee6}.status-resolved{background:#2e8b57}.status-closed{background:#87929d}.tag-chips{display:inline-flex;gap:4px;overflow:hidden}.tag-chip{background:#e9ebed;border-radius:3px;padding:1px 6px;font-size:11px;white-space:nowrap}.tag-more{background:transparent;color:var(--muted)}.sla-breached{color:var(--danger);font-weight:700}.sla-urgent{color:var(--warn);font-weight:600}.reading-pane{width:520px;flex-shrink:0;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0}.pane-topline{display:flex;align-items:center;padding:6px 10px;border-bottom:1px solid var(--border)}.preview-banner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;background:#eef4fb;border-bottom:1px solid var(--border)}.pane-header{padding:10px 14px;border-bottom:1px solid var(--border)}.pane-subject{font-size:15px;margin:0 0 6px}.pane-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px}.pane-fields{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin:0 0 8px}.pane-fields>div{display:flex;gap:6px;min-width:0}.pane-fields dt{color:var(--muted);flex-shrink:0}.pane-fields dd{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pane-actions{display:flex;gap:6px;align-items:center}.thread{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}.msg{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);max-width:92%}.msg-inbound{align-self:flex-start}.msg-outbound{align-self:flex-end;background:#eaf3fb;border-color:#bcd7ee}.msg-note{align-self:stretch;max-width:100%;background:var(--note-bg);border-color:var(--note-border)}.msg-head{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid rgba(0,0,0,.06);font-size:12px}.msg-note-badge{background:#b8860b;color:#fff;border-radius:3px;font-size:10px;font-weight:700;padding:1px 6px;text-transform:uppercase}.msg-body{padding:8px 12px;overflow-wrap:break-word}.msg-body p{margin:0 0 8px}.msg-body img{max-width:100%}.composer{border-top:1px solid var(--border);padding:8px 12px;background:var(--panel)}.composer-note{background:var(--note-bg)}.composer-tabs{display:flex;align-items:center;gap:4px;margin-bottom:6px}.composer-tab{font:inherit;border:1px solid transparent;background:none;border-radius:var(--radius) var(--radius) 0 0;padding:5px 10px;cursor:pointer;color:var(--muted)}.composer-tab-active{color:var(--text);font-weight:600;border-color:var(--border);border-bottom-color:var(--panel);background:var(--panel)}.composer-banner{padding:5px 10px;border-radius:var(--radius);margin-bottom:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.composer-banner-note{background:var(--note-bg);border:1px solid var(--note-border)}.composer-banner-reply{background:#eef4fb;border:1px solid #bcd7ee}.composer-blocked{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px;color:var(--muted);background:var(--bg);border-radius:var(--radius)}.composer-toolbar{display:flex;gap:2px;margin-bottom:4px}.fmt{padding:2px 8px;color:var(--text)}.composer-editor{min-height:84px;max-height:200px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;background:#fff}.composer-note .composer-editor{background:var(--note-bg)}.composer-editor:focus{outline:none;border-color:var(--accent)}.composer-editor:empty:before{content:attr(data-placeholder);color:var(--muted)}.composer-actions{display:flex;gap:8px;margin-top:6px}.toasts{position:fixed;bottom:16px;right:16px;z-index:100;display:flex;flex-direction:column;gap:8px}.toast{padding:9px 14px;border-radius:var(--radius);color:#fff;box-shadow:0 4px 14px #00000040;max-width:360px}.toast-success{background:#2e8b57}.toast-error{background:var(--danger)}@media (max-width: 1100px){.reading-pane{width:420px}.sidebar{width:180px}}