:root{--primary-color:#6366f1;--primary-hover:#4f46e5;--primary-light:#eef2ff;--secondary-color:#8b5cf6;--accent-color:#06b6d4;--background-color:#f8fafc;--surface-color:#fff;--surface-hover:#f1f5f9;--text-primary:#0f172a;--text-secondary:#475569;--text-tertiary:#94a3b8;--border-color:#e2e8f0;--border-light:#f1f5f9;--success-color:#10b981;--success-light:#d1fae5;--error-color:#ef4444;--error-light:#fee2e2;--warning-color:#f59e0b;--warning-light:#fef3c7;--info-color:#3b82f6;--info-light:#dbeafe;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;--shadow-xl:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-weight:400;line-height:1.6}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;color:var(--text-primary);background:#f3f4f6;margin:0;padding:0}h1,h2,h3,h4,h5,h6{margin:0;font-weight:600}button{background:linear-gradient(135deg,var(--primary-color)0%,var(--secondary-color)100%);color:#fff;cursor:pointer;box-shadow:var(--shadow-sm);letter-spacing:.3px;border:none;border-radius:12px;padding:.75em 1.5em;font-family:inherit;font-size:1em;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1)}button:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}button:active{box-shadow:var(--shadow-sm);transform:translateY(0)}button:focus,button:focus-visible{outline:3px solid var(--primary-light);outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed;transform:none}.tab-navigation{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;gap:0;margin:1.5rem 2rem;padding:.25rem;display:flex;position:relative}.tab-button{color:#64748b;cursor:pointer;z-index:1;background:0 0;border:none;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.875rem 1.5rem;font-size:.9375rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.tab-button:hover:not(.active){color:#475569;background:#8b5cf60d}.tab-button.active{color:#fff;background:#8b5cf6;box-shadow:0 2px 4px #8b5cf633}.tab-label{letter-spacing:.3px;font-weight:600}.tab-badge{color:#fff;background:#ef4444;border-radius:10px;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 6px;font-size:.75rem;font-weight:700;animation:.3s cubic-bezier(.68,-.55,.265,1.55) popIn;display:inline-flex}.tab-button.active .tab-badge{color:#8b5cf6;background:#ffffffe6}@keyframes popIn{0%{opacity:0;transform:scale(0)}50%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.tab-badge.pulse{animation:2s infinite pulse}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}@media (max-width:768px){.tab-navigation{margin:1rem 1.5rem}.tab-button{padding:.75rem 1rem;font-size:.875rem}.tab-badge{min-width:18px;height:18px;font-size:.7rem}}.lead-card{cursor:pointer;background:#fff;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:1rem;padding:0;transition:all .2s;position:relative;overflow:hidden;box-shadow:0 1px 3px #0000001a}.lead-card:hover{border-color:#d1d5db;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.lead-card.expanded{border-color:#8b5cf6;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.lead-card-compact{align-items:center;gap:1rem;padding:1rem;transition:background .2s;display:flex}.lead-card-compact:hover{background:#f9fafb}.lead-card-avatar{color:#fff;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:.875rem;font-weight:600;transition:transform .2s;display:flex}.lead-card:hover .lead-card-avatar{transform:scale(1.05)}.lead-card-info{flex:1;min-width:0}.lead-card-name-row{align-items:center;gap:.75rem;margin-bottom:.5rem;display:flex}.lead-card-name{color:#111827;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:1rem;font-weight:600;overflow:hidden}.lead-card-badge{color:#7c3aed;text-transform:uppercase;letter-spacing:.025em;background:#f3e8ff;border-radius:4px;padding:.125rem .5rem;font-size:.75rem;font-weight:500}.lead-card-preview{color:#6b7280;align-items:center;gap:1rem;font-size:.875rem;display:flex}.lead-card-email-preview,.lead-card-phone-preview{align-items:center;gap:.375rem;display:flex}.lead-card-email-preview svg,.lead-card-phone-preview svg{opacity:.6;flex-shrink:0}.lead-card-meta{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:.5rem;display:flex}.lead-card-time{color:#9ca3af;align-items:center;gap:.25rem;font-size:.8125rem;font-weight:500;display:flex}.lead-card-time svg{opacity:.7}.lead-card-expand-btn{color:#6b7280;cursor:pointer;background:#f3f4f6;border:none;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:1px;width:28px;height:28px;transition:all .2s;display:flex}.lead-card-expand-btn:hover{color:#374151;background:#e5e7eb}.lead-card-expand-btn .time-arrow{opacity:.8}.lead-card-expand-btn svg:last-child{width:16px;height:16px}.lead-card-expand-btn svg{transition:transform .3s}.lead-card-expand-btn svg.rotated{transform:rotate(180deg)}.lead-card-details{border-top:1px solid #f3f4f6;padding:0 1rem 1rem}.lead-card-divider{display:none}.lead-card-details-grid{gap:.75rem;margin:1rem 0;display:grid}.lead-detail-item{background:#f9fafb;border:1px solid #f3f4f6;border-radius:6px;gap:.75rem;padding:.75rem;transition:all .2s;display:flex}.lead-detail-item:hover{background:#f3f4f6;border-color:#e5e7eb}.lead-detail-item.full-width{grid-column:1/-1}.lead-detail-icon{border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.lead-detail-icon.email-icon{color:#1d4ed8;background:#dbeafe}.lead-detail-icon.phone-icon{color:#166534;background:#dcfce7}.lead-detail-icon.description-icon{color:#7c3aed;background:#f3e8ff}.lead-detail-icon.time-icon{color:#d97706;background:#fef3c7}.lead-detail-content{flex:1;min-width:0}.lead-detail-label{text-transform:uppercase;letter-spacing:.025em;color:#6b7280;margin-bottom:.25rem;font-size:.75rem;font-weight:500;display:block}.lead-detail-value{color:#111827;word-break:break-word;font-size:.875rem;font-weight:500;display:block}.lead-detail-value.email-link,.lead-detail-value.phone-link{color:#2563eb;text-decoration:none;transition:color .2s}.lead-detail-value.email-link:hover,.lead-detail-value.phone-link:hover{color:#1d4ed8;text-decoration:underline}.lead-detail-value.description-text{white-space:pre-wrap;color:#374151;line-height:1.5}.lead-detail-subtext{color:#9ca3af;margin-top:.25rem;font-size:.75rem;font-weight:400;display:block}.lead-card-actions{gap:.5rem;margin-top:1rem;display:flex}.lead-action-btn{cursor:pointer;border:none;border-radius:6px;flex:1;justify-content:center;align-items:center;gap:.375rem;padding:.625rem 1rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.lead-action-btn.primary{color:#fff;background:#8b5cf6}.lead-action-btn.primary:hover{background:#7c3aed}.lead-action-btn.secondary{color:#fff;background:#10b981}.lead-action-btn.secondary:hover{background:#059669}.lead-action-btn.danger{color:#fff;background:#ef4444}.lead-action-btn.danger:hover{background:#dc2626}@keyframes slideInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.lead-card-compact{flex-wrap:wrap;padding:.875rem}.lead-card-avatar{width:36px;height:36px;font-size:.8125rem}.lead-card-name{font-size:.9375rem}.lead-card-preview{flex-direction:column;align-items:flex-start;gap:.375rem}.lead-card-meta{flex-direction:row;justify-content:space-between;align-items:center;width:100%}.lead-card-details{padding:0 .875rem .875rem}.lead-detail-item{padding:.625rem}.lead-detail-icon{width:28px;height:28px}.lead-card-actions{flex-direction:column}.lead-action-btn{width:100%}}.new-leads-tab{animation:.3s ease-out fadeIn}.new-leads-header{border-bottom:1px solid #f3f4f6;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}.new-leads-header h2{color:#111827;align-items:center;gap:.5rem;margin:0;font-size:1.25rem;font-weight:600;display:flex}.new-leads-header h2:before{content:"📋";font-size:1.25rem}.new-leads-list{flex-direction:column;gap:.75rem;display:flex}.new-leads-loading{flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:3rem 2rem;display:flex}.new-leads-loading p{color:#6b7280;font-size:.9375rem;font-weight:500}.new-leads-error{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:3rem 2rem;display:flex}.new-leads-empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:3rem 2rem;display:flex}.new-leads-empty p{color:#6b7280;font-size:.9375rem;font-weight:500}.new-leads-empty p:first-child:before{content:"📭";opacity:.6;margin-bottom:.75rem;font-size:3rem;display:block}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width:768px){.new-leads-header{flex-direction:column;align-items:flex-start;gap:.75rem}.new-leads-header h2{font-size:1.125rem}}.chat-card{cursor:pointer;background:#fff;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:1rem;padding:0;transition:all .2s;position:relative;overflow:hidden;box-shadow:0 1px 3px #0000001a}.chat-card:hover{border-color:#d1d5db;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.chat-card.expanded{border-color:#8b5cf6;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.chat-card-compact{align-items:center;gap:1rem;padding:1rem;transition:background .2s;display:flex}.chat-card-compact:hover{background:#f9fafb}.chat-card-avatar{color:#fff;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:.875rem;font-weight:600;transition:transform .2s;display:flex}.chat-card:hover .chat-card-avatar{transform:scale(1.05)}.chat-card-info{flex:1;min-width:0}.chat-card-name-row{align-items:center;gap:.75rem;margin-bottom:.5rem;display:flex}.chat-card-name{color:#111827;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:1rem;font-weight:600;overflow:hidden}.chat-card-badge{color:#166534;text-transform:uppercase;letter-spacing:.025em;background:#dcfce7;border-radius:4px;padding:.125rem .5rem;font-size:.75rem;font-weight:500}.chat-card-preview{color:#6b7280;align-items:center;gap:1rem;font-size:.875rem;display:flex}.chat-card-email-preview,.chat-card-phone-preview{align-items:center;gap:.375rem;display:flex}.chat-card-email-preview svg,.chat-card-phone-preview svg{opacity:.6;flex-shrink:0}.chat-card-meta{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:.5rem;display:flex}.chat-card-time{color:#9ca3af;align-items:center;gap:.25rem;font-size:.8125rem;font-weight:500;display:flex}.chat-card-time svg{opacity:.7}.time-text-with-arrow{align-items:center;gap:.375rem;display:flex}.time-arrow{opacity:.6;color:#9ca3af;flex-shrink:0}.chat-card-expand-btn{color:#6b7280;cursor:pointer;background:#f3f4f6;border:none;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:1px;width:28px;height:28px;transition:all .2s;display:flex}.chat-card-expand-btn:hover{color:#374151;background:#e5e7eb}.chat-card-expand-btn .time-arrow{opacity:.8}.chat-card-expand-btn svg:last-child{width:16px;height:16px}.chat-card-expand-btn svg{transition:transform .3s}.chat-card-expand-btn svg.rotated{transform:rotate(180deg)}.chat-card-details{border-top:1px solid #f3f4f6;padding:0 1rem 1rem}.chat-card-divider{display:none}.chat-card-details-grid{gap:.75rem;margin:1rem 0;display:grid}.chat-detail-item{background:#f9fafb;border:1px solid #f3f4f6;border-radius:6px;gap:.75rem;padding:.75rem;transition:all .2s;display:flex}.chat-detail-item:hover{background:#f3f4f6;border-color:#e5e7eb}.chat-detail-item.full-width{grid-column:1/-1}.chat-detail-icon{border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.chat-detail-icon.email-icon{color:#1d4ed8;background:#dbeafe}.chat-detail-icon.phone-icon{color:#166534;background:#dcfce7}.chat-detail-icon.description-icon{color:#7c3aed;background:#f3e8ff}.chat-detail-icon.time-icon{color:#d97706;background:#fef3c7}.chat-detail-content{flex:1;min-width:0}.chat-detail-label{text-transform:uppercase;letter-spacing:.025em;color:#6b7280;margin-bottom:.25rem;font-size:.75rem;font-weight:500;display:block}.chat-detail-value{color:#111827;word-break:break-word;font-size:.875rem;font-weight:500;display:block}.chat-detail-value.email-link,.chat-detail-value.phone-link{color:#2563eb;text-decoration:none;transition:color .2s}.chat-detail-value.email-link:hover,.chat-detail-value.phone-link:hover{color:#1d4ed8;text-decoration:underline}.chat-detail-value.description-text{white-space:pre-wrap;color:#374151;line-height:1.5}.chat-detail-subtext{color:#9ca3af;margin-top:.25rem;font-size:.75rem;font-weight:400;display:block}.chat-card-actions{gap:.5rem;margin-top:1rem;display:flex}.chat-action-btn{cursor:pointer;border:none;border-radius:6px;flex:1;justify-content:center;align-items:center;gap:.375rem;padding:.625rem 1rem;font-size:.875rem;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.chat-action-btn.primary{color:#fff;background:#10b981}.chat-action-btn.primary:hover{background:#059669}.chat-action-btn.danger{color:#fff;background:#ef4444}.chat-action-btn.danger:hover{background:#dc2626}@media (max-width:768px){.chat-card-compact{flex-wrap:wrap;padding:.875rem}.chat-card-avatar{width:36px;height:36px;font-size:.8125rem}.chat-card-name{font-size:.9375rem}.chat-card-preview{flex-direction:column;align-items:flex-start;gap:.375rem}.chat-card-meta{flex-direction:row;justify-content:space-between;align-items:center;width:100%}.chat-card-details{padding:0 .875rem .875rem}.chat-detail-item{padding:.625rem}.chat-detail-icon{width:28px;height:28px}.chat-card-actions{flex-direction:column}.chat-action-btn{width:100%}}.message-count-badge{color:#fff;background:#ef4444;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:.75rem;font-weight:600;display:flex;position:absolute;top:-4px;right:-4px;box-shadow:0 1px 3px #0003}.chat-card-badges{align-items:center;gap:.5rem;display:flex}.chat-card-badge.messages-badge{color:#fff;background:#3b82f6;border-radius:12px;padding:.25rem .5rem;font-size:.75rem;font-weight:500}.chat-card-message-preview{margin-top:.25rem}.latest-message-text{color:#6b7280;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.875rem;line-height:1.25;display:-webkit-box;overflow:hidden}.messages-container{background:#f9fafb;border:1px solid #e5e7eb;border-radius:6px;max-height:300px;overflow-y:auto}.message-item{background:#fff;border-bottom:1px solid #e5e7eb;margin-bottom:1px;padding:.75rem}.message-item:last-child{border-bottom:none;margin-bottom:0}.message-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.message-number{color:#fff;background:#8b5cf6;border-radius:12px;padding:.125rem .375rem;font-size:.75rem;font-weight:600}.message-time{color:#6b7280;font-size:.75rem;font-weight:500}.message-text{color:#374151;word-wrap:break-word;margin:0;font-size:.875rem;line-height:1.5}.chat-detail-icon.messages-icon{color:#8b5cf6;background:#ddd6fe}.chat-detail-icon.conversation-icon{color:#3b82f6;background:#dbeafe}@media (max-width:768px){.messages-container{max-height:200px}.message-item{padding:.5rem}.message-header{flex-direction:column;align-items:flex-start;gap:.25rem}.message-count-badge{width:16px;height:16px;font-size:.625rem;top:-2px;right:-2px}}.chat-card.updated{animation:.5s ease-out messageUpdate}@keyframes messageUpdate{0%{transform:scale(1);box-shadow:0 1px 3px #0000001a}50%{transform:scale(1.02);box-shadow:0 4px 12px #8b5cf64d}to{transform:scale(1);box-shadow:0 1px 3px #0000001a}}.messages-container::-webkit-scrollbar{width:6px}.messages-container::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.messages-container::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.messages-container::-webkit-scrollbar-thumb:hover{background:#94a3b8}.notification-indicator{margin-left:.5rem;font-size:.875rem;animation:2s infinite bounce}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-3px)}60%{transform:translateY(-2px)}}.chat-card-badge.notification-badge{color:#fff;background:#f59e0b;border-radius:12px;padding:.25rem .5rem;font-size:.75rem;font-weight:600;animation:2s infinite pulse}.chat-action-btn.pulsing{animation:2s infinite buttonPulse;box-shadow:0 0 #8b5cf6b3}@keyframes buttonPulse{0%{transform:scale(1);box-shadow:0 0 #8b5cf6b3}70%{transform:scale(1.05);box-shadow:0 0 0 10px #8b5cf600}to{transform:scale(1);box-shadow:0 0 #8b5cf600}}.chat-card.has-active-notification{border-color:#f59e0b;animation:3s infinite borderGlow;box-shadow:0 0 0 2px #f59e0b33}@keyframes borderGlow{0%,to{box-shadow:0 0 0 2px #f59e0b33}50%{box-shadow:0 0 0 4px #f59e0b66}}.chat-card.has-active-notification:before{content:"";z-index:10;background:#f59e0b;border:2px solid #fff;border-radius:50%;width:12px;height:12px;animation:2s infinite notificationPulse;position:absolute;top:-2px;right:-2px}@keyframes notificationPulse{0%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.3)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion:reduce){.notification-indicator,.chat-card-badge.notification-badge,.chat-action-btn.pulsing,.chat-card.has-active-notification,.chat-card.has-active-notification:before{animation:none}.chat-card.has-active-notification{border-color:#f59e0b;box-shadow:0 0 0 2px #f59e0b4d}}.incoming-chats-tab{animation:.3s ease-out fadeIn}.incoming-chats-header{border-bottom:1px solid #f3f4f6;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}.incoming-chats-header h2{color:#111827;align-items:center;gap:.5rem;margin:0;font-size:1.25rem;font-weight:600;display:flex}.incoming-chats-header h2:before{content:"💬";font-size:1.25rem}.connection-warning{color:#92400e;background:#fef3c7;border:1px solid #fde68a;border-radius:6px;align-items:center;gap:.375rem;padding:.375rem .75rem;font-size:.8125rem;font-weight:500;display:inline-flex}.incoming-chats-list{flex-direction:column;gap:.75rem;display:flex}.incoming-chats-loading{flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:3rem 2rem;display:flex}.loading-spinner{border:3px solid #f3f4f6;border-top-color:#10b981;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}.incoming-chats-loading p{color:#6b7280;font-size:.9375rem;font-weight:500}.incoming-chats-error{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:3rem 2rem;display:flex}.error-message{color:#dc2626;background:#fee2e2;border:1px solid #fecaca;border-radius:8px;padding:1rem 1.5rem;font-size:.9375rem;font-weight:500}.retry-button{color:#fff;cursor:pointer;background:#10b981;border:none;border-radius:6px;padding:.625rem 1.5rem;font-size:.875rem;font-weight:500;transition:all .2s}.retry-button:hover{background:#059669}.incoming-chats-empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:3rem 2rem;display:flex}.incoming-chats-empty p{color:#6b7280;font-size:.9375rem;font-weight:500}.incoming-chats-empty p:first-child:before{content:"💬";opacity:.6;margin-bottom:.75rem;font-size:3rem;display:block}@media (max-width:768px){.incoming-chats-header{flex-direction:column;align-items:flex-start;gap:.75rem}.incoming-chats-header h2{font-size:1.125rem}}.incoming-chats-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.header-actions{align-items:center;gap:1rem;display:flex}.notification-status{background:#fef3c7;border:1px solid #f59e0b;border-radius:8px;align-items:center;gap:.75rem;padding:.5rem 1rem;font-size:.875rem;display:flex}.notification-count{color:#92400e;font-weight:500}.stop-all-notifications-btn{color:#fff;cursor:pointer;background:#f59e0b;border:none;border-radius:6px;padding:.375rem .75rem;font-size:.75rem;font-weight:600;transition:all .2s}.stop-all-notifications-btn:hover{background:#d97706;transform:translateY(-1px)}.stop-all-notifications-btn:active{transform:translateY(0)}.connection-warning{color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;padding:.5rem 1rem;font-size:.875rem;font-weight:500}@media (max-width:768px){.incoming-chats-header{flex-direction:column;align-items:stretch}.header-actions{justify-content:space-between}.notification-status{flex:1;justify-content:space-between}.stop-all-notifications-btn{flex-shrink:0}}@media (prefers-color-scheme:dark){.notification-status{background:#451a03;border-color:#92400e}.notification-count{color:#fbbf24}.connection-warning{color:#fca5a5;background:#450a0a;border-color:#dc2626}}.connection-status-wrapper{align-items:center;gap:.75rem;display:flex;position:relative}.connection-status{border:1px solid #0000;border-radius:8px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;transition:all .2s;display:flex}.status-icon{justify-content:center;align-items:center;width:8px;height:8px;font-size:.75rem;display:flex}.status-text{letter-spacing:.025em}.connection-status.connected{color:#166534;background:#dcfce7;border-color:#bbf7d0}.connection-status.reconnecting{color:#92400e;background:#fef3c7;border-color:#fde68a}.connection-status.disconnected{color:#991b1b;background:#fee2e2;border-color:#fecaca}.connection-status.connecting{color:#1e40af;background:#dbeafe;border-color:#bfdbfe}.sound-test-toggle{cursor:pointer;color:#64748b;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;justify-content:center;align-items:center;padding:.5rem;font-size:1rem;transition:all .2s;display:flex}.sound-test-toggle:hover{color:#475569;background:#f1f5f9;border-color:#cbd5e1}.sound-test-panel{z-index:1000;background:#fff;border:1px solid #e2e8f0;border-radius:8px;flex-direction:column;gap:.5rem;min-width:180px;padding:.75rem;animation:.2s ease-out slideDown;display:flex;position:absolute;top:calc(100% + .5rem);right:0;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.sound-test-panel:before{content:"";background:#fff;border:none;border-top:1px solid #e2e8f0;border-left:1px solid #e2e8f0;width:8px;height:8px;position:absolute;top:-4px;right:16px;transform:rotate(45deg)}.sound-test-panel button{color:#fff;cursor:pointer;background:#8b5cf6;border:none;border-radius:6px;padding:.5rem .75rem;font-size:.875rem;font-weight:500;transition:all .2s}.sound-test-panel button:hover{background:#7c3aed}.sound-test-panel button:nth-child(2){background:#10b981}.sound-test-panel button:nth-child(2):hover{background:#059669}.connection-status.connected .status-icon{animation:2s ease-in-out infinite pulse-green}.connection-status.reconnecting .status-icon{animation:1s linear infinite spin}.connection-status.disconnected .status-icon{animation:1.5s ease-in-out infinite pulse-red}.connection-status.connecting .status-icon{animation:1.5s ease-in-out infinite pulse-blue}@keyframes pulse-green{0%,to{opacity:1}50%{opacity:.6}}@keyframes pulse-red{0%,to{opacity:1}50%{opacity:.4}}@keyframes pulse-blue{0%,to{opacity:1}50%{opacity:.6}}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.connection-status{padding:.5rem .75rem;font-size:.8125rem}.status-icon{width:8px;height:8px;font-size:.7rem}.sound-test-toggle{padding:.5rem;font-size:.9rem}.sound-test-panel{min-width:160px;left:0;right:auto}.sound-test-panel:before{left:16px;right:auto}}.dashboard{z-index:1;background:#fff;border-radius:16px;max-width:1200px;margin:0 auto;animation:.6s ease-out slideUp;position:relative;overflow:hidden;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.dashboard-header{border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;padding:2rem 2rem 1rem;display:flex}.dashboard-header h1{color:#1f2937;margin:0;font-size:2rem;font-weight:700}.dashboard-content{min-height:500px;padding:0 2rem 2rem}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.dashboard-header{flex-direction:column;gap:1rem;padding:1.5rem 1.5rem 1rem}.dashboard-header h1{font-size:1.75rem}.dashboard-content{padding:0 1.5rem 1.5rem}}.app{background:#f3f4f6;max-width:1400px;min-height:100vh;margin:0 auto;padding:2rem;position:relative}.app h1{color:#1f2937;margin-bottom:2rem;font-weight:700}html{scroll-behavior:smooth}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px;transition:background .3s}::-webkit-scrollbar-thumb:hover{background:#94a3b8}::selection{color:#1f2937;background:#8b5cf633}::selection{color:#1f2937;background:#8b5cf633}.in-app-notification{z-index:10000;opacity:0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;width:400px;max-width:calc(100vw - 40px);transition:all .3s cubic-bezier(.4,0,.2,1);position:fixed;top:20px;right:20px;transform:translate(420px);box-shadow:0 10px 25px #00000026}.in-app-notification.show{opacity:1;transform:translate(0)}.notification-content{padding:1rem}.notification-header{align-items:center;gap:.5rem;margin-bottom:.75rem;display:flex}.notification-icon{flex-shrink:0;font-size:1.25rem}.notification-title{color:#111827;flex:1;font-size:.875rem;font-weight:600}.notification-close{color:#6b7280;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:1.25rem;transition:all .2s;display:flex}.notification-close:hover{color:#374151;background:#f3f4f6}.notification-body{color:#6b7280;word-wrap:break-word;margin-bottom:1rem;font-size:.875rem;line-height:1.5}.notification-warning{color:#92400e;text-align:center;background:#fef3c7;border:1px solid #f59e0b;border-radius:6px;margin-bottom:1rem;padding:.5rem;font-size:.75rem;font-weight:500}.notification-actions{justify-content:flex-end;gap:.5rem;display:flex}.notification-btn{cursor:pointer;border:1px solid #0000;border-radius:6px;padding:.5rem 1rem;font-size:.875rem;font-weight:500;transition:all .2s}.notification-btn.primary{color:#fff;background:#8b5cf6;border-color:#8b5cf6}.notification-btn.primary:hover{background:#7c3aed;border-color:#7c3aed}.notification-btn.secondary{color:#374151;background:#f3f4f6;border-color:#d1d5db}.notification-btn.secondary:hover{background:#e5e7eb;border-color:#9ca3af}.toast{color:#fff;z-index:10001;opacity:0;word-wrap:break-word;border-radius:8px;max-width:300px;padding:1rem 1.5rem;font-size:.875rem;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);position:fixed;bottom:20px;right:20px;transform:translateY(100px)}.toast.show{opacity:1;transform:translateY(0)}.toast-success{background:#10b981;box-shadow:0 4px 12px #10b98166}.toast-error{background:#ef4444;box-shadow:0 4px 12px #ef444466}.toast-info{background:#3b82f6;box-shadow:0 4px 12px #3b82f666}.chat-card.has-active-notification{border-color:#f59e0b;box-shadow:0 0 0 2px #f59e0b33}.chat-card.has-active-notification:before{content:"";background:#f59e0b;border:2px solid #fff;border-radius:50%;width:12px;height:12px;animation:2s infinite pulse;position:absolute;top:-2px;right:-2px}.notification-status-indicator{color:#6b7280;z-index:9999;background:#fff;border:1px solid #e5e7eb;border-radius:8px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;display:flex;position:fixed;top:20px;left:20px;box-shadow:0 4px 12px #0000001a}.notification-status-indicator.active{color:#92400e;background:#fef3c7;border-color:#f59e0b}.notification-status-indicator .status-dot{background:#d1d5db;border-radius:50%;width:8px;height:8px}.notification-status-indicator.active .status-dot{background:#f59e0b;animation:2s infinite pulse}@media (max-width:768px){.in-app-notification{width:auto;max-width:none;top:10px;left:10px;right:10px;transform:translateY(-100px)}.in-app-notification.show{transform:translateY(0)}.notification-actions{flex-direction:column}.notification-btn{justify-content:center;width:100%}.toast{max-width:none;bottom:10px;left:10px;right:10px}.notification-status-indicator{justify-content:center;top:10px;left:10px;right:10px}}@media (prefers-color-scheme:dark){.in-app-notification{background:#1f2937;border-color:#374151}.notification-title{color:#f9fafb}.notification-body{color:#d1d5db}.notification-close{color:#9ca3af}.notification-close:hover{color:#d1d5db;background:#374151}.notification-btn.secondary{color:#d1d5db;background:#374151;border-color:#4b5563}.notification-btn.secondary:hover{background:#4b5563;border-color:#6b7280}.notification-status-indicator{color:#d1d5db;background:#1f2937;border-color:#374151}}@media (prefers-reduced-motion:reduce){.in-app-notification,.toast,.notification-btn,.notification-close{transition:none}.chat-card.has-active-notification:before,.notification-status-indicator.active .status-dot{animation:none}}@media (prefers-contrast:high){.in-app-notification,.notification-btn{border-width:2px}.toast{border:2px solid}}