:root{--font-heading: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s cubic-bezier(.16, 1, .3, 1)}.dark-theme{--bg-app: #0c1317;--bg-sidebar: #111b21;--bg-sidebar-header: #202c33;--bg-chat-pane: #0b141a;--bg-chat-wallpaper: #0b141a;--bg-card: #182229;--bg-hover: #202c33;--bg-active: #2a3942;--bg-input: #2a3942;--bg-bubble-in: #202c33;--bg-bubble-out: #005c4b;--border-color: #222e35;--border-focus: #00a884;--text-primary: #e9edef;--text-secondary: #8696a0;--text-muted: #667781;--text-highlight: #00a884;--text-bubble-in: #e9edef;--text-bubble-out: #e9edef;--accent-color: #00a884;--accent-color-hover: #00c298;--accent-red: #ea0038;--accent-blue: #53bdeb;--shadow-sm: 0 1px 3px rgba(0,0,0,.2);--shadow-md: 0 4px 20px rgba(0,0,0,.3);--shadow-lg: 0 10px 40px rgba(0,0,0,.45);--glass-bg: rgba(24, 34, 41, .7);--glass-border: rgba(255, 255, 255, .05)}.light-theme{--bg-app: #f8fafc;--bg-sidebar: #ffffff;--bg-sidebar-header: #f1f5f9;--bg-chat-pane: #f8fafc;--bg-chat-wallpaper: #f8fafc;--bg-card: #ffffff;--bg-hover: #f1f5f9;--bg-active: #e2e8f0;--bg-input: #f1f5f9;--bg-bubble-in: #ffffff;--bg-bubble-out: #ccfbf1;--border-color: #e2e8f0;--border-focus: #0d9488;--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #64748b;--text-highlight: #0d9488;--text-bubble-in: #0f172a;--text-bubble-out: #115e59;--accent-color: #0d9488;--accent-color-hover: #0f766e;--accent-red: #f43f5e;--accent-blue: #0ea5e9;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 14px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .08);--glass-bg: rgba(255, 255, 255, .85);--glass-border: rgba(0, 0, 0, .06)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--bg-app);color:var(--text-primary);height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased;transition:background-color var(--transition-normal)}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:600}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.app-container{height:100vh;display:flex;flex-direction:column;background-color:var(--bg-app)}.auth-page{display:flex;align-items:center;justify-content:center;height:100vh;background:radial-gradient(circle at 10% 20%,rgba(0,168,132,.15) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(83,189,235,.1) 0%,transparent 40%),var(--bg-app);padding:20px;position:relative}.auth-card{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:40px;border-radius:20px;box-shadow:var(--shadow-lg);width:100%;max-width:400px;transform:translateY(0);animation:floatIn var(--transition-slow)}@keyframes floatIn{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.auth-title{font-size:28px;font-weight:700;text-align:center;margin-bottom:8px;color:var(--accent-color);letter-spacing:-.5px}.auth-subtitle{font-size:14px;color:var(--text-secondary);text-align:center;margin-bottom:30px}.auth-input-group{margin-bottom:20px}.auth-input-group label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-bottom:8px;color:var(--text-secondary)}.auth-input{width:100%;background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);padding:12px 16px;border-radius:10px;font-size:15px;outline:none;font-family:var(--font-body);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.auth-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px #00a88426}.auth-btn{width:100%;background:linear-gradient(135deg,var(--accent-color) 0%,#009688 100%);color:#fff;border:none;padding:14px;border-radius:10px;font-size:16px;font-weight:600;font-family:var(--font-heading);cursor:pointer;box-shadow:0 4px 12px #00a88440;transition:transform var(--transition-fast),box-shadow var(--transition-fast),opacity var(--transition-fast)}.auth-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #00a88459}.auth-btn:active{transform:translateY(1px)}.auth-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.auth-error{background:#ea00381a;border:1px solid rgba(234,0,56,.2);color:var(--accent-red);padding:12px;border-radius:8px;font-size:13px;margin-bottom:20px;text-align:center}.theme-toggle-btn{position:absolute;top:20px;right:20px;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-fast);box-shadow:var(--shadow-sm);z-index:10}.theme-toggle-btn:hover{background:var(--bg-hover);transform:scale(1.05)}.chat-shell{display:flex;height:100vh;width:100vw;overflow:hidden;background-color:var(--bg-app)}.sidebar{width:380px;min-width:320px;max-width:450px;background-color:var(--bg-sidebar);border-right:1px solid var(--border-color);display:flex;flex-direction:column;height:100%;transition:width var(--transition-slow)}.sidebar-header{background-color:var(--bg-sidebar-header);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-color)}.agent-profile{display:flex;align-items:center;gap:12px}.agent-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent-color) 0%,#0288d1 100%);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:var(--shadow-sm)}.agent-info{display:flex;flex-direction:column}.agent-name{font-weight:600;font-size:15px;color:var(--text-primary)}.agent-status{font-size:11px;color:var(--accent-color);display:flex;align-items:center;gap:4px}.agent-status:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--accent-color)}.sidebar-actions{display:flex;align-items:center;gap:10px}.icon-btn{background:transparent;border:none;color:var(--text-secondary);font-size:18px;cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.icon-btn:hover{background-color:var(--bg-hover);color:var(--text-primary)}.sidebar-search-box{padding:10px 14px;border-bottom:1px solid var(--border-color);background-color:var(--bg-sidebar)}.search-input-wrapper{background-color:var(--bg-input);border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:8px}.search-input{background:transparent;border:none;outline:none;width:100%;color:var(--text-primary);font-size:13px;font-family:var(--font-body)}.conversation-list{flex:1;overflow-y:auto}.conversation-item{display:flex;align-items:center;gap:14px;padding:14px 18px;cursor:pointer;border-bottom:1px solid var(--border-color);transition:background-color var(--transition-fast);position:relative;overflow:hidden}.conversation-item:hover{background-color:var(--bg-hover)}.conversation-item.active{background-color:var(--bg-active)}.conversation-item.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background-color:var(--accent-color)}.conv-avatar{width:48px;height:48px;border-radius:50%;background-color:var(--bg-input);border:1px solid var(--border-color);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex-shrink:0;text-shadow:var(--shadow-sm)}.conv-content{flex:1;min-width:0}.conv-row-1{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}.conv-name{font-weight:600;font-size:15px;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conv-time{font-size:11px;color:var(--text-muted);white-space:nowrap}.conv-row-2{display:flex;justify-content:space-between;align-items:center}.conv-last-msg{font-size:13px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.conv-unread-badge{background-color:var(--accent-color);color:#fff;border-radius:12px;font-size:11px;font-weight:700;padding:2px 7px;min-width:18px;text-align:center;animation:popIn var(--transition-fast)}@keyframes popIn{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.chat-pane{flex:1;display:flex;flex-direction:column;background-color:var(--bg-chat-pane);background-image:radial-gradient(var(--border-color) 1px,transparent 1px);background-size:20px 20px;position:relative}.chat-pane-header{background-color:var(--bg-sidebar-header);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-color);z-index:5}.active-chat-info{display:flex;align-items:center;gap:14px}.active-chat-avatar{width:42px;height:42px;border-radius:50%;background:var(--bg-input);color:var(--accent-color);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center}.active-chat-name{font-weight:600;font-size:16px;color:var(--text-primary)}.active-chat-phone{font-size:12px;color:var(--text-secondary)}.chat-actions{display:flex;align-items:center;gap:12px}.action-btn-outline{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);padding:6px 14px;border-radius:20px;font-size:13px;font-family:var(--font-heading);cursor:pointer;transition:var(--transition-fast)}.action-btn-outline:hover{background-color:var(--bg-hover);color:var(--text-primary);border-color:var(--text-muted)}.message-thread-container{flex:1;overflow-y:auto;padding:24px 8%;display:flex;flex-direction:column;gap:6px}.message-bubble-wrapper{display:flex;width:100%}.message-bubble-wrapper.outbound{justify-content:flex-end}.message-bubble-wrapper.inbound{justify-content:flex-start}.message-bubble{max-width:65%;min-width:120px;padding:8px 14px 6px;border-radius:12px;box-shadow:var(--shadow-sm);position:relative;animation:bubbleSlide var(--transition-normal);word-wrap:break-word}@keyframes bubbleSlide{0%{transform:translateY(8px);opacity:.8}to{transform:translateY(0);opacity:1}}.message-bubble.outbound{background-color:var(--bg-bubble-out);color:var(--text-bubble-out);border-top-right-radius:2px}.message-bubble.inbound{background-color:var(--bg-bubble-in);color:var(--text-bubble-in);border-top-left-radius:2px}.message-body{font-size:14.5px;line-height:1.5;white-space:pre-wrap}.message-meta{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:10px;color:var(--text-muted);margin-top:4px;text-align:right}.status-tick{font-size:13px;line-height:1}.chat-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;background-color:var(--bg-chat-pane)}.placeholder-illustration{font-size:72px;color:var(--border-color);margin-bottom:24px;animation:floatAnimation 4s ease-in-out infinite}@keyframes floatAnimation{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.placeholder-title{font-size:24px;font-weight:500;color:var(--text-primary);margin-bottom:10px}.placeholder-text{font-size:14px;color:var(--text-secondary);max-width:350px;line-height:1.5}.message-input-panel{background-color:var(--bg-sidebar-header);border-top:1px solid var(--border-color);padding:12px 20px;display:flex;flex-direction:column;gap:10px;z-index:5}.input-panel-tabs{display:flex;gap:8px}.input-tab-btn{padding:6px 14px;border-radius:16px;font-size:12px;font-weight:600;border:none;cursor:pointer;font-family:var(--font-heading);transition:var(--transition-fast)}.input-tab-btn.active{background-color:var(--accent-color);color:#fff}.input-tab-btn.inactive{background-color:var(--bg-input);color:var(--text-secondary)}.input-tab-btn.inactive:hover{background-color:var(--bg-hover);color:var(--text-primary)}.input-row{display:flex;align-items:flex-end;gap:12px}.chat-textarea{flex:1;background-color:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);resize:none;height:48px;padding:13px 18px;border-radius:24px;outline:none;font-family:var(--font-body);font-size:14.5px;line-height:1.4;transition:border-color var(--transition-fast)}.chat-textarea:focus{border-color:var(--border-focus)}.send-btn-round{width:46px;height:46px;border-radius:50%;background-color:var(--accent-color);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast),background-color var(--transition-fast)}.send-btn-round:hover{background-color:var(--accent-color-hover);transform:scale(1.04)}.send-btn-round:active{transform:scale(.96)}.send-btn-round:disabled{opacity:.6;cursor:not-allowed;transform:none}.template-form-row{flex:1;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.template-form-row input{background-color:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);border-radius:12px;padding:10px 14px;font-size:13.5px;outline:none;font-family:var(--font-body);flex:1;min-width:140px;transition:border-color var(--transition-fast)}.template-form-row input:focus{border-color:var(--border-focus)}.dashboard-container{flex:1;overflow-y:auto;padding:40px;background-color:var(--bg-app);max-width:1200px;margin:0 auto;width:100%}.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;border-bottom:1px solid var(--border-color);padding-bottom:20px}.dashboard-title-row{display:flex;flex-direction:column}.dashboard-title{font-size:32px;font-weight:800;color:var(--text-primary);letter-spacing:-.5px}.dashboard-subtitle{font-size:14px;color:var(--text-secondary)}.dashboard-controls{display:flex;align-items:center;gap:16px}.select-dropdown{background-color:var(--bg-card);border:1px solid var(--border-color);color:var(--text-primary);padding:8px 16px;border-radius:8px;font-size:14px;font-family:var(--font-heading);outline:none;cursor:pointer;transition:var(--transition-fast)}.select-dropdown:hover{background-color:var(--bg-hover)}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:40px}.kpi-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform var(--transition-normal),box-shadow var(--transition-normal)}.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.kpi-card:before{content:"";position:absolute;top:0;left:0;height:4px;width:100%}.kpi-card.sent:before{background:var(--text-secondary)}.kpi-card.delivered:before{background:var(--accent-blue)}.kpi-card.read:before{background:var(--accent-color)}.kpi-card.failed:before{background:var(--accent-red)}.kpi-label{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);font-weight:700;margin-bottom:12px}.kpi-value{font-size:32px;font-weight:800;color:var(--text-primary);line-height:1;font-family:var(--font-heading)}.kpi-subtext{font-size:13px;color:var(--text-muted);margin-top:8px}.charts-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;margin-bottom:40px}.mobile-back-btn{display:none}@media (max-width: 1024px){.sidebar{width:320px;min-width:300px}.charts-grid{grid-template-columns:1fr}}@media (max-width: 768px){.chat-shell{position:relative;width:100vw;height:100vh}.sidebar{width:100vw;max-width:100vw;min-width:100vw;display:flex}.chat-pane{width:100vw;max-width:100vw;height:100%;display:none;position:absolute;top:0;left:0;z-index:10}.chat-shell.chat-active .sidebar{display:none}.chat-shell.chat-active .chat-pane{display:flex}.mobile-back-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;font-size:22px;color:var(--text-primary);cursor:pointer;padding:4px 8px;margin-right:8px;border-radius:50%;width:36px;height:36px;transition:var(--transition-fast)}.mobile-back-btn:hover{background-color:var(--bg-hover)}.chat-pane-header{padding:10px 16px}.message-thread-container{padding:16px 12px}.message-bubble{max-width:85%;font-size:14px;padding:8px 12px 6px}.message-input-panel{padding:10px 12px}.input-row{gap:8px}.chat-textarea{font-size:16px;padding:10px 14px;height:42px;border-radius:20px}.send-btn-round{width:42px;height:42px}.template-form-row{flex-direction:column;align-items:stretch;gap:8px;width:100%}.template-form-row input{width:100%;min-width:0;font-size:15px;padding:8px 12px}.dashboard-container{padding:16px}.dashboard-header{flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:16px;margin-bottom:20px}.dashboard-title{font-size:24px}.dashboard-controls{width:100%;flex-direction:column;align-items:stretch;gap:12px}.dashboard-controls>div{width:100%!important}.dashboard-controls input{width:100%!important}.select-dropdown{width:100%}.kpi-grid{grid-template-columns:1fr;gap:12px;margin-bottom:24px}.kpi-card{padding:16px}.kpi-value{font-size:28px}.charts-grid{grid-template-columns:1fr;gap:16px;margin-bottom:24px}.chart-card{padding:16px}.svg-chart{height:180px}.dashboard-table-wrapper{overflow-x:auto;border-radius:12px}.dashboard-table th,.dashboard-table td{padding:10px 12px;font-size:13px;white-space:nowrap}.auth-card{padding:24px 20px;border-radius:16px}.auth-title{font-size:24px}.auth-subtitle{margin-bottom:20px}.stats-container{padding:0 12px;margin:16px auto}.stats-title{font-size:22px}.stats-card{padding:16px!important}.stats-card form{width:100%}.suggestion-item{padding:8px 10px}}.chart-card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:24px;box-shadow:var(--shadow-sm)}.chart-header{font-size:18px;font-weight:700;color:var(--text-primary);margin-bottom:20px;font-family:var(--font-heading)}.dashboard-table-wrapper{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:30px}.dashboard-table{width:100%;border-collapse:collapse;text-align:left}.dashboard-table th{background-color:var(--bg-sidebar-header);color:var(--text-primary);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.5px;padding:16px 20px;border-bottom:1px solid var(--border-color);font-family:var(--font-heading)}.dashboard-table td{padding:14px 20px;font-size:14px;color:var(--text-secondary);border-bottom:1px solid var(--border-color);font-family:var(--font-body)}.dashboard-table tr:last-child td{border-bottom:none}.dashboard-table tr:hover td{color:var(--text-primary);background-color:var(--bg-hover)}.badge-pill-failed{color:var(--accent-red);font-weight:600}.svg-chart-container{display:flex;align-items:center;justify-content:center;position:relative;width:100%}.svg-chart{width:100%;height:250px;overflow:visible}.chart-line{fill:none;stroke:var(--accent-color);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0px 4px 8px rgba(0,168,132,.3))}.chart-line-delivered{fill:none;stroke:var(--accent-blue);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0px 4px 8px rgba(83,189,235,.2))}.chart-grid-line{stroke:var(--border-color);stroke-width:1}.chart-axis-text{fill:var(--text-secondary);font-size:9px;font-family:var(--font-body)}.chart-data-dot{fill:var(--bg-card);stroke-width:3;cursor:pointer;transition:r var(--transition-fast)}.chart-data-dot.sent{stroke:var(--accent-color)}.chart-data-dot.delivered{stroke:var(--accent-blue)}.chart-data-dot:hover{r:6}.chart-legend{display:flex;gap:16px;justify-content:flex-end;margin-bottom:12px}.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}.legend-color{width:12px;height:12px;border-radius:3px}.back-link{color:var(--accent-color);text-decoration:none;font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;transition:var(--transition-fast)}.back-link:hover{color:var(--accent-color-hover);transform:translate(-2px)}.suggestion-item{transition:var(--transition-fast)}.suggestion-item:hover{background-color:var(--bg-hover)!important}.search-control-wrapper{display:flex;align-items:center;gap:6px;background-color:var(--bg-input);border:1px solid var(--border-color);border-radius:6px;padding:6px 12px;position:relative;width:auto;transition:border-color var(--transition-fast)}.search-control-wrapper:focus-within{border-color:var(--border-focus)}.search-control-input{background:none;border:none;color:var(--text-primary);outline:none;font-size:13.5px;width:220px;font-family:var(--font-body)}.date-range-wrapper{display:flex;align-items:center;gap:6px}@media (max-width: 768px){.search-control-wrapper{width:100%}.search-control-input{width:100%;flex:1;font-size:16px}.date-range-wrapper{width:100%;justify-content:space-between;gap:8px}.date-range-wrapper input{flex:1;width:100%;font-size:14px}}.stats-shell{width:100vw;height:100vh;overflow-y:auto;background-color:var(--bg-app)}.stats-container{max-width:900px;margin:40px auto;padding:0 20px;width:100%}.admin-forms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:24px}@media (max-width: 768px){.stats-container{padding:0 12px;margin:16px auto}.admin-forms-grid{grid-template-columns:1fr;gap:16px}}.member-input-col{flex:0 0 240px;display:flex;gap:8px;align-items:flex-end}@media (max-width: 768px){.member-input-col{flex:1 1 100%;width:100%}}