.vi-chat {
    --vi-chat-red: var(--red, #e3262e);
    --vi-chat-red-dark: var(--red-dark, #b91e24);
    --vi-chat-black: var(--black, #111114);
    position: fixed;
    right: max(24px, env(safe-area-inset-right));
    bottom: calc(max(24px, env(safe-area-inset-bottom)) + var(--vi-chat-keyboard-offset, 0px));
    z-index: 100;
    color: #1e1e22;
    font: 14px/1.5 Inter, Arial, Helvetica, sans-serif;
}
.vi-chat [hidden] { display: none !important; }
.vi-chat button, .vi-chat textarea { font: inherit; }
.vi-chat button { cursor: pointer; }
.vi-chat button:disabled { cursor: default; opacity: .5; }
.vi-chat button:focus-visible, .vi-chat a:focus-visible, .vi-chat textarea:focus-visible {
    outline: 2px solid var(--vi-chat-red);
    outline-offset: 3px;
}
.vi-chat-launcher {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 14px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--vi-chat-red);
    color: #fff;
    box-shadow: 0 6px 24px rgba(17, 17, 20, .16);
    font-weight: 700 !important;
    transition: background .2s;
}
.vi-chat-launcher:hover, .vi-chat-send:hover:not(:disabled) { background: var(--vi-chat-red-dark); }
.vi-chat-panel {
    display: flex;
    flex-direction: column;
    width: 370px;
    height: min(560px, calc(100vh - 48px));
    height: min(560px, calc(var(--vi-chat-viewport-height, 100dvh) - 48px));
    max-width: calc(100vw - 48px);
    overflow: hidden;
    border: 1px solid #e7e7e9;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 56px rgba(17, 17, 20, .2);
}
.vi-chat-header { display: flex; align-items: center; gap: 12px; padding: 18px; background: var(--vi-chat-black); color: #fff; }
.vi-chat-brand { display: grid; place-content: center; position: relative; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: #fff; color: var(--vi-chat-black); font-size: 17px; font-weight: 900; }
.vi-chat-brand span { position: absolute; right: 6px; bottom: 6px; color: var(--vi-chat-red); }
.vi-chat-heading { flex: 1; }
.vi-chat-heading h2 { margin: 0; font-size: 17px; letter-spacing: -.4px; }
.vi-chat-heading p { margin: 2px 0 0; color: #c6c6ca; font-size: 12px; }
.vi-chat-close { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 10px; background: transparent; color: #fff; }
.vi-chat-close:hover { background: #29292d; }
.vi-chat-protocol { margin: 0; padding: 9px 18px; border-bottom: 1px solid #e7e7e9; color: #6c6d73; font-size: 11px; }
.vi-chat-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px; background: #f5f5f6; }
.vi-chat-messages { display: flex; flex-direction: column; gap: 14px; }
.vi-chat-message { max-width: 88%; align-self: flex-start; padding: 11px 13px; border: 1px solid #e7e7e9; border-radius: 14px 14px 14px 4px; background: #fff; }
.vi-chat-message--visitor { align-self: flex-end; border-color: var(--vi-chat-red-dark); border-radius: 14px 14px 4px 14px; background: var(--vi-chat-red-dark); color: #fff; }
.vi-chat-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.vi-chat-message small { display: block; margin-top: 6px; color: #6c6d73; font-size: 10px; }
.vi-chat-message--visitor small { color: #fff; opacity: .85; }
.vi-chat-loading { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: #6c6d73; font-size: 12px; }
.vi-chat-dots { display: flex; gap: 4px; }
.vi-chat-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--vi-chat-red); animation: vi-chat-pulse 1s infinite alternate; }
.vi-chat-dots i:nth-child(2) { animation-delay: .2s; }
.vi-chat-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes vi-chat-pulse { to { opacity: .3; transform: translateY(-3px); } }
.vi-chat-error { padding: 10px 18px; border-top: 1px solid #ffd4d6; background: #fff0f0; color: #a71920; font-size: 12px; }
.vi-chat-error p { margin: 0; }
.vi-chat-error button { min-height: 36px; margin-top: 5px; padding: 4px 0; border: 0; background: transparent; color: inherit; text-decoration: underline; font-weight: 700; }
.vi-chat-handoff { padding: 12px 18px 0; }
.vi-chat-handoff a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px; border-radius: 10px; background: var(--vi-chat-black); color: #fff; font-weight: 700; }
.vi-chat-handoff a:hover { background: #29292d; }
.vi-chat-form { display: flex; align-items: flex-end; gap: 10px; margin: 0; padding: 12px 18px 8px; }
.vi-chat-form textarea { flex: 1; min-width: 0; max-height: 96px; min-height: 44px; resize: none; padding: 11px 12px; border: 1px solid #dedee2; border-radius: 12px; background: #fff; color: #1e1e22; font-size: 16px; line-height: 22px; }
.vi-chat-form textarea:focus { border-color: var(--vi-chat-red); }
.vi-chat-send { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 12px; background: var(--vi-chat-red); color: #fff; }
.vi-chat-note { margin: 0; padding: 0 18px 12px; color: #6c6d73; font-size: 10px; text-align: center; }
.vi-chat-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 480px) {
    .vi-chat { right: max(12px, env(safe-area-inset-right)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--vi-chat-keyboard-offset, 0px)); }
    .vi-chat-launcher { padding: 15px; width: 54px; height: 54px; justify-content: center; }
    .vi-chat-launcher > span { display: none; }
    .vi-chat-panel { width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-width: calc(100vw - 24px); height: min(560px, calc(100vh - 24px)); height: min(560px, calc(var(--vi-chat-viewport-height, 100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .vi-chat-launcher { transition: none; }
    .vi-chat-dots i { animation: none; }
}