@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);color:var(--text-main);background:linear-gradient(135deg,var(--accent-gradient-start) 0%,var(--accent-gradient-end) 100%);min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px}.chat-container{width:100%;max-width:420px;height:calc(100dvh - 40px);max-height:700px;background:var(--bg-surface);border-radius:24px;box-shadow:0 25px 50px -12px #00000040;display:flex;flex-direction:column;overflow:hidden}.chat-header{background:linear-gradient(135deg,var(--accent-gradient-start) 0%,var(--accent-gradient-end) 100%);color:var(--text-on-accent);padding:20px 24px;text-align:center}.chat-header h1{font-family:var(--font-heading);font-size:20px;font-weight:700;margin-bottom:4px}.chat-header p{font-size:13px;opacity:.9}.chat-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column}.init-form{margin:auto;width:100%;max-width:300px}.init-form h2{font-size:18px;font-weight:700;color:var(--text-main);margin-bottom:8px;text-align:center}.init-form p{font-size:13px;color:var(--text-muted);margin-bottom:24px;text-align:center}.form-group{margin-bottom:16px}.form-group label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:6px}.form-group input{width:100%;padding:14px 16px;border:2px solid var(--border-subtle);border-radius:12px;font-size:15px;transition:all .2s}.form-group input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}.submit-btn{width:100%;padding:16px;background:linear-gradient(135deg,var(--accent-gradient-start) 0%,var(--accent-gradient-end) 100%);color:var(--text-on-accent);border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all .2s}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px color-mix(in srgb,var(--accent) 30%,transparent)}.submit-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:20px}.message{max-width:80%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;position:relative;box-shadow:0 1px 2px #0000000d;animation:fadeIn .3s ease-out}.message.customer{align-self:flex-end;background:linear-gradient(135deg,var(--accent-gradient-start),var(--accent-gradient-end));color:var(--text-on-accent);border-bottom-right-radius:4px}.message.staff{align-self:flex-start;background:var(--bg-body);color:var(--text-main);border:1px solid var(--border-subtle);border-bottom-left-radius:4px}.message.system{align-self:center;background:#fef3c7;color:#92400e;font-size:12px;padding:6px 16px;border-radius:20px;box-shadow:none}.message-time{font-size:10px;opacity:.7;margin-top:4px;text-align:right}.message.staff .message-time{text-align:left;color:var(--text-muted)}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.chat-input{padding:16px 20px;border-top:1px solid var(--border-subtle);background:var(--bg-body);display:flex;gap:12px}.chat-input input{flex:1;padding:14px 18px;border:2px solid var(--border-subtle);border-radius:24px;font-size:14px;transition:all .2s}.chat-input input:focus{outline:none;border-color:var(--accent)}.send-btn{width:48px;height:48px;background:linear-gradient(135deg,var(--accent-gradient-start) 0%,var(--accent-gradient-end) 100%);color:var(--text-on-accent);border:none;border-radius:50%;font-size:18px;cursor:pointer;transition:all .2s}.send-btn:hover{transform:scale(1.1)}.hidden{display:none!important}.hours-notice{background:#fef3c7;color:#92400e;padding:12px 16px;font-size:12px;text-align:center;border-bottom:1px solid #fcd34d}.typing-indicator{display:flex;gap:4px;padding:12px 16px;background:var(--accent-soft);border-radius:16px;width:fit-content}.typing-indicator span{width:8px;height:8px;background:var(--text-subtle);border-radius:50%;animation:bounce 1.4s infinite ease-in-out}.typing-indicator span:nth-child(1){animation-delay:-.32s}.typing-indicator span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.closed-notice{background:linear-gradient(135deg,#fef3c7,#fde68a);border:1px solid #fcd34d;color:#92400e;padding:16px 20px;text-align:center;font-size:13px;font-weight:600;display:flex;flex-direction:column;gap:8px;align-items:center}.closed-notice small{font-weight:400;opacity:.8}