@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--color-bg-primary:#0a0a0f;--color-bg-secondary:#12121a;--color-bg-tertiary:#1a1a26;--color-bg-elevated:#1e1e2e;--color-bg-hover:#252536;--color-bg-active:#2d2d42;--color-surface:#ffffff08;--color-surface-hover:#ffffff0f;--color-surface-active:#ffffff14;--glass-bg:#ffffff0a;--glass-border:#ffffff14;--glass-blur:20px;--color-text-primary:#e8e8ed;--color-text-secondary:#8b8b9e;--color-text-tertiary:#5e5e72;--color-text-inverse:#0a0a0f;--color-brand:#6366f1;--color-brand-hover:#818cf8;--color-brand-muted:#6366f126;--color-success:#22c55e;--color-success-muted:#22c55e26;--color-warning:#f59e0b;--color-warning-muted:#f59e0b26;--color-danger:#ef4444;--color-danger-muted:#ef444426;--color-info:#3b82f6;--color-info-muted:#3b82f626;--color-priority-urgent:#ef4444;--color-priority-high:#f59e0b;--color-priority-normal:#6b7280;--color-channel-sms:#3b82f6;--color-channel-email:#8b5cf6;--color-channel-voicemail:#f59e0b;--color-channel-system:#6b7280;--color-subscriber:#22c55e;--color-subscriber-bg:#22c55e1f;--color-border:#ffffff0f;--color-border-hover:#ffffff1f;--color-border-focus:var(--color-brand);--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--text-xs:.6875rem;--text-sm:.75rem;--text-base:.8125rem;--text-md:.875rem;--text-lg:1rem;--text-xl:1.25rem;--text-2xl:1.5rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-glow:0 0 20px #6366f126;--transition-fast:.12s ease;--transition-base:.2s ease;--transition-slow:.3s ease;--thread-list-width:320px;--metadata-panel-width:360px;--header-height:56px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-text-primary);background-color:var(--color-bg-primary);height:100vh;line-height:1.5;overflow:hidden}#root{flex-direction:column;height:100vh;display:flex}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-bg-active);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}.mono{font-family:var(--font-mono)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.chip{align-items:center;gap:var(--space-1);padding:2px var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;font-weight:600;display:inline-flex}.chip--subscriber{color:var(--color-subscriber);background:var(--color-subscriber-bg)}.chip--urgent{color:var(--color-priority-urgent);background:var(--color-danger-muted)}.chip--high{color:var(--color-priority-high);background:var(--color-warning-muted)}.chip--sms{color:var(--color-channel-sms);background:var(--color-info-muted)}.chip--email{color:var(--color-channel-email);background:#8b5cf626}.chip--voicemail{color:var(--color-channel-voicemail);background:var(--color-warning-muted)}.priority-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.priority-dot--urgent{background:var(--color-priority-urgent);box-shadow:0 0 6px var(--color-priority-urgent);animation:2s ease-in-out infinite pulse-urgent}.priority-dot--high{background:var(--color-priority-high)}.priority-dot--normal{background:var(--color-priority-normal)}@keyframes pulse-urgent{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-lg)}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-family:var(--font-sans);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;border:none;font-weight:600;display:inline-flex}.btn:active{transform:scale(.97)}.btn--primary{background:var(--color-brand);color:#fff}.btn--primary:hover{background:var(--color-brand-hover);box-shadow:var(--shadow-glow)}.btn--ghost{color:var(--color-text-secondary);background:0 0}.btn--ghost:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.btn--danger{background:var(--color-danger-muted);color:var(--color-danger)}.btn--danger:hover{background:var(--color-danger);color:#fff}.btn--send{background:var(--color-brand);color:#fff;padding:var(--space-3) var(--space-6);font-size:var(--text-md);border-radius:var(--radius-lg)}.btn--send:hover{background:var(--color-brand-hover);box-shadow:var(--shadow-glow)}.app-layout{height:100vh;display:flex;overflow:hidden}.thread-list-pane{width:var(--thread-list-width);min-width:var(--thread-list-width);background:var(--color-bg-secondary);border-right:1px solid var(--color-border);flex-direction:column;height:100vh;display:flex}.thread-list-header{padding:var(--space-4) var(--space-4) var(--space-3);border-bottom:1px solid var(--color-border)}.thread-list-header h1{font-size:var(--text-lg);color:var(--color-text-primary);margin-bottom:var(--space-3);font-weight:700}.thread-search{width:100%;padding:var(--space-2) var(--space-3);background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:var(--font-sans);font-size:var(--text-sm);transition:border-color var(--transition-fast);outline:none}.thread-search:focus{border-color:var(--color-border-focus)}.thread-search::placeholder{color:var(--color-text-tertiary)}.thread-filters{gap:var(--space-1);padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--color-border);display:flex}.thread-filter-btn{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);color:var(--color-text-secondary);font-family:var(--font-sans);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;font-weight:500}.thread-filter-btn:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.thread-filter-btn--active{background:var(--color-brand-muted);color:var(--color-brand)}.thread-items{padding:var(--space-2) 0;flex:1;overflow-y:auto}.thread-item{align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);cursor:pointer;transition:background var(--transition-fast);border-left:3px solid #0000;display:flex}.thread-item:hover{background:var(--color-bg-hover)}.thread-item--active{background:var(--color-bg-active);border-left-color:var(--color-brand)}.thread-item--unread{background:var(--color-surface)}.thread-item__content{flex:1;min-width:0}.thread-item__top{justify-content:space-between;align-items:center;gap:var(--space-2);margin-bottom:2px;display:flex}.thread-item__name{font-size:var(--text-sm);color:var(--color-text-primary);align-items:center;gap:var(--space-2);font-weight:600;display:flex}.thread-item__time{font-size:var(--text-xs);color:var(--color-text-tertiary);flex-shrink:0}.thread-item__preview{font-size:var(--text-xs);color:var(--color-text-secondary);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.thread-item__badges{align-items:center;gap:var(--space-1);margin-top:var(--space-1);display:flex}.conversation-pane{background:var(--color-bg-primary);flex-direction:column;flex:1;min-width:0;height:100vh;display:flex}.conversation-header{padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--color-border);background:var(--color-bg-secondary);min-height:var(--header-height);justify-content:space-between;align-items:center;display:flex}.conversation-header__info{align-items:center;gap:var(--space-3);display:flex}.conversation-header__name{font-size:var(--text-md);font-weight:600}.conversation-header__actions{gap:var(--space-2);display:flex}.conversation-messages{padding:var(--space-4) var(--space-5);gap:var(--space-3);flex-direction:column;flex:1;display:flex;overflow-y:auto}.message{gap:var(--space-1);flex-direction:column;max-width:70%;display:flex}.message--inbound{align-self:flex-start}.message--outbound{align-self:flex-end}.message__bubble{padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-sm);word-break:break-word;line-height:1.6}.message--inbound .message__bubble{background:var(--color-bg-elevated);border-bottom-left-radius:var(--radius-sm)}.message--outbound .message__bubble{background:var(--color-brand);color:#fff;border-bottom-right-radius:var(--radius-sm)}.message__meta{align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--color-text-tertiary);padding:0 var(--space-1);display:flex}.message--outbound .message__meta{justify-content:flex-end}.suggested-response{margin:0 var(--space-5);padding:var(--space-4);background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--color-brand-muted);border-radius:var(--radius-lg);animation:.3s slide-up}.suggested-response__label{font-size:var(--text-xs);color:var(--color-brand);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-2);font-weight:600}.suggested-response__text{width:100%;min-height:80px;padding:var(--space-3);background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:var(--font-sans);font-size:var(--text-sm);resize:vertical;transition:border-color var(--transition-fast);outline:none;line-height:1.6}.suggested-response__text:focus{border-color:var(--color-brand)}.suggested-response__actions{justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-3);display:flex}@keyframes slide-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.conversation-input{align-items:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border);background:var(--color-bg-secondary);display:flex}.conversation-input__field{min-height:40px;max-height:120px;padding:var(--space-2) var(--space-3);background:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:var(--font-sans);font-size:var(--text-sm);resize:none;transition:border-color var(--transition-fast);outline:none;flex:1;line-height:1.5}.conversation-input__field:focus{border-color:var(--color-border-focus)}.conversation-input__field::placeholder{color:var(--color-text-tertiary)}.conversation-input-wrapper{border-top:1px solid var(--color-border);background:var(--color-bg-secondary)}.conversation-input-toolbar{padding:var(--space-2) var(--space-5) 0;justify-content:space-between;align-items:center;display:flex}.channel-switcher{background:var(--color-bg-tertiary);border-radius:var(--radius-md);gap:2px;padding:2px;display:flex}.channel-btn{padding:4px var(--space-3);border-radius:var(--radius-sm);color:var(--color-text-secondary);font-family:var(--font-sans);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;font-weight:600}.channel-btn:hover:not(:disabled){color:var(--color-text-primary)}.channel-btn--active{background:var(--color-brand-muted);color:var(--color-brand);box-shadow:0 1px 3px #0003}.channel-btn:disabled{opacity:.3;cursor:not-allowed}.template-dropdown{background:var(--color-bg-elevated);border:1px solid var(--color-border-hover);border-radius:var(--radius-lg);width:260px;max-height:300px;box-shadow:var(--shadow-lg);z-index:50;animation:.15s slide-up;position:absolute;bottom:calc(100% + 4px);right:0;overflow-y:auto}.template-dropdown__item{align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);color:var(--color-text-secondary);font-family:var(--font-sans);font-size:var(--text-xs);text-align:left;cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;display:flex}.template-dropdown__item:hover{background:var(--color-surface-hover);color:var(--color-text-primary)}.template-dropdown__id{font-family:var(--font-mono);color:var(--color-brand);background:var(--color-brand-muted);border-radius:var(--radius-sm);flex-shrink:0;padding:1px 4px;font-size:10px}.conversation-input__subject{width:100%;padding:var(--space-2) var(--space-5);border:none;border-bottom:1px solid var(--color-border);color:var(--color-text-primary);font-family:var(--font-sans);font-size:var(--text-sm);transition:border-color var(--transition-fast);background:0 0;outline:none;font-weight:600}.conversation-input__subject:focus{border-bottom-color:var(--color-brand)}.conversation-input__subject::placeholder{color:var(--color-text-tertiary);font-weight:400}.metadata-pane{width:var(--metadata-panel-width);min-width:var(--metadata-panel-width);background:var(--color-bg-secondary);border-left:1px solid var(--color-border);flex-direction:column;height:100vh;display:flex;overflow-y:auto}.metadata-header{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);align-items:center;gap:var(--space-3);min-height:var(--header-height);display:flex}.metadata-header__name{font-size:var(--text-md);font-weight:700}.metadata-header__id{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-tertiary)}.metadata-tabs{border-bottom:1px solid var(--color-border);display:flex}.metadata-tab{padding:var(--space-2) var(--space-3);color:var(--color-text-secondary);font-family:var(--font-sans);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-bottom:2px solid #0000;flex:1;font-weight:500}.metadata-tab:hover{color:var(--color-text-primary)}.metadata-tab--active{color:var(--color-brand);border-bottom-color:var(--color-brand)}.metadata-content{padding:var(--space-4) var(--space-5);flex:1;overflow-y:auto}.metadata-section{margin-bottom:var(--space-6)}.metadata-section__title{font-size:var(--text-xs);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-3);font-weight:600}.metadata-field{padding:var(--space-2) 0;border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.metadata-field:last-child{border-bottom:none}.metadata-field__label{font-size:var(--text-xs);color:var(--color-text-secondary)}.metadata-field__value{font-size:var(--text-sm);color:var(--color-text-primary);text-align:right;font-weight:500}.metadata-field__value--mono{font-family:var(--font-mono);font-size:var(--text-xs)}.quick-actions{gap:var(--space-2);grid-template-columns:1fr 1fr;display:grid}.quick-action{align-items:center;gap:var(--space-2);padding:var(--space-3);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--color-text-secondary);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-fast);flex-direction:column;font-weight:500;display:flex}.quick-action:hover{background:var(--color-surface-hover);border-color:var(--color-border-hover);color:var(--color-text-primary);transform:translateY(-1px)}.quick-action__icon{font-size:var(--text-lg)}.empty-state{justify-content:center;align-items:center;gap:var(--space-4);height:100%;color:var(--color-text-tertiary);text-align:center;padding:var(--space-8);flex-direction:column;display:flex}.empty-state__icon{opacity:.3;font-size:3rem}.empty-state__title{font-size:var(--text-md);color:var(--color-text-secondary);font-weight:600}.empty-state__subtitle{font-size:var(--text-sm);max-width:280px}.status-chip{padding:2px var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;display:inline-flex}.status-chip--completed{color:var(--color-success);background:var(--color-success-muted)}.status-chip--failed{color:var(--color-danger);background:var(--color-danger-muted)}.status-chip--active{color:var(--color-info);background:var(--color-info-muted)}.status-chip--cancelled{color:var(--color-text-tertiary);background:var(--color-surface)}.role-badge{padding:1px var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);align-items:center;gap:3px;font-weight:600;display:inline-flex}.role-badge--washer{color:#f97316;background:#f973161f}.role-badge--driver{color:#06b6d4;background:#06b6d41f}.role-badge--admin{color:#a855f7;background:#a855f71f}.skeleton{background:linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-hover) 50%, var(--color-bg-tertiary) 75%);border-radius:var(--radius-sm);background-size:200% 100%;animation:1.5s ease-in-out infinite skeleton-shimmer}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (width<=768px){.app-layout{flex-direction:column}.thread-list-pane{border-right:none;border-bottom:1px solid var(--color-border);width:100%;min-width:100%;height:auto;max-height:100vh}.thread-list-pane--hidden{display:none}.conversation-pane{height:100vh}.metadata-pane{display:none}.metadata-pane--mobile{border-left:none;border-top:1px solid var(--color-border);border-radius:var(--radius-xl) var(--radius-xl) 0 0;z-index:100;width:100%;min-width:100%;height:60vh;animation:.3s slide-up;display:flex;position:fixed;bottom:0;left:0;right:0}.btn--send{width:100%;min-height:48px;font-size:var(--text-lg)}}.thread-item{animation:.2s both fade-in-up}@keyframes fade-in-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.message{animation:.25s both message-appear}@keyframes message-appear{0%{opacity:0;transform:translateY(12px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.thread-search:focus,.conversation-input__field:focus,.conversation-input__subject:focus,.suggested-response__text:focus{box-shadow:0 0 0 2px var(--color-brand-muted)}.metadata-content,.thread-items{scroll-behavior:smooth}.thread-item__badges .chip{animation:.3s both badge-pop}@keyframes badge-pop{0%{opacity:0;transform:scale(.8)}60%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}.btn{position:relative;overflow:hidden}.btn:after{content:"";opacity:0;background:radial-gradient(circle,#ffffff26 0%,#0000 70%);transition:opacity .2s;position:absolute;inset:0}.btn:hover:after{opacity:1}.connection-status{align-items:center;gap:var(--space-1);padding:2px var(--space-2);color:var(--color-text-tertiary);font-size:10px;font-weight:500;display:flex}.connection-dot{background:var(--color-success);border-radius:50%;width:6px;height:6px;animation:3s ease-in-out infinite pulse-dot}.connection-dot--disconnected{background:var(--color-danger);animation:none}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}.toast{bottom:var(--space-6);padding:var(--space-3) var(--space-6);background:var(--color-bg-elevated);border:1px solid var(--color-border-hover);border-radius:var(--radius-lg);color:var(--color-text-primary);font-size:var(--text-sm);box-shadow:var(--shadow-lg);z-index:200;opacity:0;pointer-events:none;font-weight:500;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:fixed;left:50%;transform:translate(-50%)translateY(100px)}.toast--visible{opacity:1;pointer-events:all;transform:translate(-50%)translateY(0)}.toast--success{border-color:var(--color-success);color:var(--color-success)}.toast--error{border-color:var(--color-danger);color:var(--color-danger)}.kbd{background:var(--color-bg-tertiary);border:1px solid var(--color-border);min-width:20px;height:20px;font-family:var(--font-mono);color:var(--color-text-tertiary);border-radius:4px;justify-content:center;align-items:center;padding:0 4px;font-size:10px;line-height:1;display:inline-flex}.thread-item:hover{box-shadow:inset 3px 0 0 var(--color-brand-muted)}.thread-item--active{box-shadow:inset 3px 0 0 var(--color-brand)}.conversation-header,.metadata-header{-webkit-backdrop-filter:blur(12px)}.metadata-tab{transition:all var(--transition-base)}.metadata-tab--active{background:var(--color-brand-muted);border-radius:var(--radius-sm) var(--radius-sm) 0 0}.conversation-input-wrapper:focus-within{border-top-color:var(--color-brand-muted);box-shadow:0 -2px 12px #6366f10d}.metadata-pane--hidden{display:none}.unread-badge{background:var(--color-brand);color:#fff;border-radius:var(--radius-full);min-width:18px;height:18px;font-size:10px;font-weight:700;font-family:var(--font-mono);justify-content:center;align-items:center;padding:0 4px;display:inline-flex}.login-container{background:var(--surface-0);background-image:radial-gradient(circle at 15%,#3b82f614,#0000 25%),radial-gradient(circle at 85% 30%,#8b5cf614,#0000 25%);justify-content:center;align-items:center;width:100vw;min-height:100vh;display:flex}.login-card{background:var(--surface-1);padding:var(--space-8);border-radius:var(--radius-lg);border:1px solid var(--border);width:100%;max-width:400px;animation:.6s cubic-bezier(.16,1,.3,1) fadeInUp;box-shadow:0 20px 40px #0006}.login-header{text-align:center;margin-bottom:var(--space-6)}.login-logo{margin-bottom:var(--space-4);font-size:48px;animation:6s ease-in-out infinite float}.login-header h1{color:var(--text-primary);margin:0 0 var(--space-1) 0;font-size:24px;font-weight:600}.login-header p{color:var(--text-secondary);margin:0;font-size:14px}.login-form{gap:var(--space-4);flex-direction:column;display:flex}.input-group{gap:var(--space-2);flex-direction:column;display:flex}.input-group label{color:var(--text-secondary);font-size:13px;font-weight:500}.input-group input{background:var(--surface-2);border:1px solid var(--border);color:var(--text-primary);padding:var(--space-3);border-radius:var(--radius-sm);transition:var(--transition-bounce);font-size:14px}.input-group input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px #3b82f61a}.login-btn{background:linear-gradient(135deg, var(--primary), var(--primary-hover));color:#fff;padding:var(--space-3);border-radius:var(--radius-sm);cursor:pointer;margin-top:var(--space-2);transition:var(--transition-bounce);border:none;font-weight:600}.login-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #3b82f64d}.login-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.login-error{color:var(--danger);padding:var(--space-3);border-radius:var(--radius-sm);margin-bottom:var(--space-4);text-align:center;background:#ef44441a;border:1px solid #ef444433;font-size:13px;animation:.4s ease-in-out shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}