:root{--primary: #7269ef;--primary-hover: #6159da;--primary-container: #7269ef;--on-primary: #ffffff;--on-primary-container: #eeedfe;--secondary: #7a7f9a;--secondary-container: #eeedfe;--on-secondary-container: #343a40;--tertiary-container: #ef476f;--background: #f5f7fb;--surface: #ffffff;--surface-container-lowest: #ffffff;--surface-container-low: #e6ebf5;--surface-container: #f0f2f8;--surface-container-high: #e6ebf5;--surface-container-highest: #dce1ec;--surface-variant: #e6ebf5;--surface-dim: #c5cbd8;--sidebar-bg: #f5f7fb;--chat-bg: #ffffff;--input-bg: #e6ebf5;--on-surface: #343a40;--on-surface-variant: #7a7f9a;--outline: #8f96a8;--outline-variant: #e6ebf5;--error: #ef476f;--success: #06d6a0;--info: #7269ef;--focus-ring: 0 0 0 2px rgba(114, 105, 239, .35);--radius: .25rem;--radius-lg: .5rem;--radius-xl: .5rem;--sidebar-width: 360px;--topbar-height: 72px;--shadow-sm: 0 1px 2px rgba(52, 58, 64, .06);--shadow-md: 0 4px 10px rgba(52, 58, 64, .08);--shadow-lg: 0 8px 24px rgba(52, 58, 64, .12);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--background);color:var(--on-surface);height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased}#root{height:100vh}button,input,textarea{font:inherit}button{cursor:pointer}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--surface-dim);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#8f96a8}.test-mode-banner{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--primary);color:#fff;text-align:center;padding:6px 12px;font-size:.75rem;line-height:20px;font-weight:600;letter-spacing:.01em}.app.has-test-banner{padding-top:32px}.app{display:flex;height:100vh;max-width:100%;margin:0 auto;background:var(--background)}.sidebar{width:var(--sidebar-width);flex-shrink:0;display:flex;flex-direction:column;position:relative;background:var(--sidebar-bg);border-right:1px solid var(--outline-variant)}.sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;height:var(--topbar-height);flex-shrink:0;background:var(--surface-container-lowest);border-bottom:1px solid var(--outline-variant)}.sidebar-identity{display:flex;align-items:center;gap:12px;min-width:0}.sidebar-identity__avatar{position:relative;flex-shrink:0}.sidebar-identity__dot{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:9999px;background:var(--outline);border:2px solid var(--surface-container-lowest)}.sidebar-identity__dot.online{background:var(--success)}.sidebar-identity__text{min-width:0}.sidebar-identity__name{margin:0;font-size:18px;line-height:24px;font-weight:600;color:var(--on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-identity__status{margin:0;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.01em;color:var(--on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.icon-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:9999px;background:transparent;color:var(--on-surface-variant);transition:background .15s ease,color .15s ease}.icon-btn:hover{background:#7269ef1f}.icon-btn.active{color:var(--primary);background:var(--secondary-container)}.icon-btn--back{display:none}.dev-panel{background:var(--surface-container);border-bottom:1px solid var(--outline-variant);padding:12px 24px;display:flex;flex-direction:column;gap:10px}.dev-panel__label{display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:16px;font-weight:500;color:var(--on-surface-variant)}.dev-panel__input{background:var(--surface-container-lowest);border:1px solid var(--outline-variant);border-radius:var(--radius-lg);color:var(--on-surface);padding:8px 12px;font-size:14px;outline:none;transition:box-shadow .15s ease}.dev-panel__input:focus{box-shadow:var(--focus-ring)}.dev-panel__row{display:flex;align-items:center;gap:8px}.dev-panel__hint{font-size:12px;color:var(--on-surface-variant)}.dev-panel__warn{margin:0;font-size:12px;line-height:1.5;color:#92400e;background:#fff7ed;border:1px solid #fed7aa;border-radius:var(--radius-lg);padding:8px 10px}.search{padding:8px 16px;position:relative;flex-shrink:0;background:var(--sidebar-bg)}.search-icon{position:absolute;left:28px;top:50%;transform:translateY(-50%);color:var(--outline);pointer-events:none;transition:color .15s ease}.search:focus-within .search-icon{color:var(--primary)}.search input{width:100%;background:var(--input-bg);border:none;border-radius:var(--radius-lg);padding:10px 16px 10px 40px;color:var(--on-surface);font-size:14px;line-height:20px;outline:none;transition:box-shadow .15s ease}.search input:focus{box-shadow:var(--focus-ring)}.search input::placeholder{color:var(--on-surface-variant)}.contact-list{flex:1;overflow-y:auto;list-style:none;margin:0;padding:0;background:var(--sidebar-bg)}.contact-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;border-left:4px solid transparent;transition:background .15s ease,color .15s ease}.contact-item:hover{background:var(--surface-container)}.contact-item.active{background:var(--secondary-container);color:var(--on-secondary-container);border-left-color:var(--primary)}.avatar{width:48px;height:48px;border-radius:9999px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0;-webkit-user-select:none;user-select:none}.avatar--sm{width:40px;height:40px;font-size:14px}img.avatar{object-fit:cover;background:var(--surface-container-high)}.contact-body{flex:1;min-width:0}.contact-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.contact-name{font-size:16px;line-height:24px;font-weight:500;color:var(--on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-item.active .contact-name{font-weight:700;color:inherit}.contact-time{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.01em;color:var(--on-surface-variant);flex-shrink:0}.contact-item.active .contact-time{color:inherit;opacity:.7}.contact-preview{font-size:14px;line-height:20px;color:var(--on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-item.active .contact-preview{color:inherit;opacity:.8}.chat{flex:1;display:flex;flex-direction:column;min-width:0;position:relative;background:var(--chat-bg)}.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px;margin:auto;max-width:560px;width:100%;background:var(--surface-container-lowest);border:1px solid var(--outline-variant);border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}.chat-empty__logo{margin-bottom:24px;color:var(--primary)}.chat-empty__title{margin:0 0 12px;font-size:24px;line-height:32px;letter-spacing:-.02em;font-weight:600;color:var(--on-surface)}.chat-empty__text{margin:0;font-size:14px;line-height:20px;color:var(--on-surface-variant);max-width:460px}.chat-empty__footer{margin:32px 0 0;font-size:11px;line-height:14px;color:var(--outline);display:flex;align-items:center;gap:6px}.chat-empty__lock{color:var(--outline)}.chat-header{display:flex;align-items:center;gap:16px;width:100%;padding:12px 24px;height:var(--topbar-height);flex-shrink:0;z-index:10;background:var(--surface-container-lowest);border-bottom:1px solid var(--outline-variant)}.chat-header-info{flex:1;min-width:0}.chat-header-info strong{display:block;font-size:18px;line-height:24px;font-weight:600;color:var(--on-surface);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-header-info span{display:block;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.01em;color:var(--on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-header__brand{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.chat-header__logo{width:40px;height:40px;border-radius:9999px;object-fit:cover;display:block;background:var(--surface-container-lowest)}.chat-header-status{text-transform:lowercase;color:var(--success)}.chat-header-status--typing{color:var(--primary-container)}.typing-dots:after{display:inline-block;width:1.1em;text-align:left;animation:wa-typing-dots 1.2s steps(4,end) infinite;content:""}@keyframes wa-typing-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.sim-btn{background:transparent;border:1px solid var(--outline-variant);color:var(--on-surface-variant);padding:6px 14px;border-radius:9999px;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.01em;margin-right:4px;white-space:nowrap;transition:background .15s ease,border-color .15s ease}.sim-btn:hover{background:var(--surface-container);border-color:var(--outline)}.messages{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;padding:24px;display:flex;flex-direction:column;gap:16px;background:var(--chat-bg)}.messages:before{display:none}.messages>*{position:relative}.date-separator{display:flex;justify-content:center;position:sticky;top:0;z-index:10;margin:4px 0}.date-separator span{background:var(--surface-container);color:var(--on-surface-variant);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.01em;padding:4px 16px;border-radius:9999px;box-shadow:var(--shadow-sm)}.bubble{max-width:70%;align-self:flex-start}.bubble.outbound{align-self:flex-end}.bubble+.bubble{margin-top:-12px}.bubble-content{position:relative;padding:10px 16px;border-radius:var(--radius-xl);font-size:14px;line-height:20px;box-shadow:var(--shadow-sm);word-wrap:break-word;overflow-wrap:anywhere}.bubble.inbound .bubble-content{background:var(--input-bg);color:var(--on-surface)}.bubble.outbound .bubble-content{background:var(--primary);color:var(--on-primary)}.wa-message-body strong{font-weight:600}.wa-message-body em{font-style:italic}.wa-message-body del{text-decoration:line-through;opacity:.85}.wa-mono-block{display:block;font-family:ui-monospace,Cascadia Code,Segoe UI Mono,monospace;font-size:.88em;background:#343a4014;border-radius:var(--radius);padding:4px 6px;margin:2px 0;white-space:pre-wrap;word-break:break-word}.bubble.outbound .wa-mono-block{background:#ffffff29}.bubble-time{margin-top:4px;font-size:10px;line-height:14px;display:flex;align-items:center;justify-content:flex-end;gap:3px;white-space:nowrap;-webkit-user-select:none;user-select:none;color:var(--on-surface-variant)}.bubble.outbound .bubble-time{color:inherit;opacity:.75}.bubble-status{display:inline-flex;align-items:center;margin-left:2px;color:inherit}.bubble-status.read{color:var(--info)}.composer{display:flex;align-items:flex-end;gap:12px;padding:16px;flex-shrink:0;background:var(--surface-container-lowest);border-top:1px solid var(--outline-variant)}.composer .icon-btn{margin-bottom:4px}.composer-input-wrap{flex:1;background:var(--input-bg);border-radius:var(--radius-xl);margin-bottom:2px;transition:box-shadow .15s ease}.composer-input-wrap:focus-within{box-shadow:var(--focus-ring)}.composer-input-wrap textarea{width:100%;background:transparent;border:none;color:var(--on-surface);padding:12px 24px;resize:none;min-height:44px;max-height:100px;font-size:14px;line-height:20px;outline:none;display:block}.composer-input-wrap textarea::placeholder{color:var(--outline)}.composer-send{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:none;border-radius:var(--radius-xl);background:var(--primary);color:var(--on-primary);flex-shrink:0;box-shadow:var(--shadow-md);transition:background .15s ease,transform .1s ease}.composer-send:hover{background:var(--primary-hover)}.composer-send:disabled{cursor:default;opacity:.9}.composer-send:disabled:hover{background:var(--primary)}.composer-send:disabled:hover .material-symbols-outlined{transform:none}.composer-send:active{transform:scale(.95)}.composer-send .material-symbols-outlined{transition:transform .15s ease}.composer-send:hover .material-symbols-outlined{transform:rotate(12deg)}.ws-dot{width:8px;height:8px;border-radius:9999px;background:var(--outline);flex-shrink:0}.ws-dot.open{background:var(--success)}.sidebar-plan-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;flex-shrink:0;background:var(--surface-container-lowest);border-top:1px solid var(--outline-variant)}.sidebar-plan-bar__plan{font-size:13px;line-height:18px;font-weight:600;color:var(--primary);white-space:nowrap}.chat-plan-switch{position:relative}.chat-plan-switch__btn{display:inline-flex;align-items:center;gap:4px;padding:7px 12px;border:1px solid var(--primary);border-radius:var(--radius-lg);background:transparent;color:var(--primary);font-size:13px;line-height:18px;font-weight:600;transition:background .15s ease,color .15s ease}.chat-plan-switch__btn:hover{background:#7269ef1f}.chat-plan-switch__menu{position:absolute;left:0;bottom:calc(100% + 6px);min-width:180px;padding:4px;background:var(--surface-container-lowest);border:1px solid var(--outline-variant);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:30}.chat-plan-switch__item{display:block;width:100%;text-align:left;padding:8px 12px;border:none;border-radius:6px;background:transparent;color:var(--on-surface);font-size:13px;line-height:18px;font-weight:500}.chat-plan-switch__item:hover{background:var(--secondary-container);color:var(--primary)}@media(max-width:900px){.sidebar{width:100%}.chat,.app.chat-open .sidebar{display:none}.app.chat-open .chat,.icon-btn--back{display:flex}.chat-empty{display:none}.messages{padding:16px;font-size:15px}.bubble{max-width:85%}.bubble-content{font-size:15px;line-height:22px}.chat-header,.sidebar-header{padding-left:16px;padding-right:16px}.composer-input-wrap textarea{padding:12px 16px}}