html { scroll-padding-bottom: 165px; }
body { --chat-keyboard: 0px; --chat-nav: calc(70px + env(safe-area-inset-bottom)); }
.chat-shell { max-width: 680px; background: #fcfbfd; }
.chat-header { padding: 13px 15px 15px; background: linear-gradient(110deg, #69008d, #300b82); }
.chat-header .logo strong { color: #fff; }
.chat-back svg { transform: rotate(180deg); }
.chat-main { padding: 0 14px 175px; }
.chat-intro { display: flex; align-items: center; gap: 14px; padding: 20px 0 14px; }
.chat-intro-icon { display: grid; flex: none; place-items: center; width: 66px; height: 66px; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #9b00bd, #4b006d); }
.chat-intro-icon svg { width: 36px; height: 36px; }
.chat-intro h1 { margin: 0 0 4px; color: #36004e; font-size: clamp(24px, 6vw, 29px); line-height: 1.1; }
.chat-subtitle { margin: 0; color: #291034; font-size: 15px; font-weight: 700; }
.chat-demo-label { margin: 5px 0 0; color: #765280; font-size: 13px; font-weight: 700; }
.chat-disclaimer { margin: 0 0 16px; padding: 11px 12px; border-radius: 11px; color: #5d4866; background: #f3eaf8; font-size: 12px; line-height: 1.45; }
.chat-date { display: flex; align-items: center; gap: 10px; margin: 12px 0 17px; color: #624675; font-size: 12px; font-weight: 700; text-align: center; }
.chat-date::before, .chat-date::after { flex: 1; height: 1px; background: #ebe4ee; content: ''; }
.chat-date span { padding: 7px 12px; border-radius: 20px; background: #f0e9f8; }
.chat-messages { display: grid; gap: 15px; }
.chat-message { display: flex; align-items: flex-start; gap: 9px; min-width: 0; scroll-margin-bottom: 190px; }
.chat-avatar { display: grid; place-items: center; flex: none; width: 39px; height: 39px; border-radius: 50%; }
.chat-avatar svg { width: 23px; height: 23px; }
.support-avatar { background: #ead9f5; color: #7900a2; }
.customer-avatar { background: #f0ddfa; color: #8800ad; }
.chat-bubble { min-width: 0; max-width: min(80%, 470px); padding: 12px 14px 8px; border-radius: 16px 16px 16px 5px; background: #f0e8f8; color: #261231; }
.chat-bubble strong { display: block; margin-bottom: 5px; font-size: 11px; }
.chat-bubble p { margin: 0; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-bubble time { display: block; margin-top: 5px; color: #7d6a86; font-size: 11px; text-align: right; }
.customer-message { flex-direction: row-reverse; }
.customer-message .chat-bubble { border-radius: 16px 16px 5px 16px; background: #7900a1; color: #fff; }
.customer-message time { color: #f0d7fa; }
.chat-orders { display: flex; align-items: center; gap: 12px; margin: 17px 0; padding: 12px; border: 1px solid #d5b5e3; border-radius: 13px; background: #fff; box-shadow: 0 2px 8px #3b00400e; }
.chat-orders > span:nth-child(2) { display: grid; flex: 1; min-width: 0; gap: 4px; }
.chat-orders strong { color: #2c1040; font-size: 15px; }
.chat-orders small { color: #6d6270; font-size: 12px; }
.chat-orders-icon { display: grid; place-items: center; flex: none; width: 43px; height: 43px; border-radius: 50%; background: #fff0e7; color: #f77b00; }
.chat-orders-icon svg { width: 27px; height: 27px; }
.chat-arrow { width: 19px; height: 19px; color: #3a0c50; }
.chat-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.chat-topics a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 76px; padding: 8px 4px; border: 1px solid #ece6ef; border-radius: 12px; background: #fff; box-shadow: 0 2px 5px #26002c0c; color: #321341; text-align: center; font-size: 12px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.chat-topics svg { width: 27px; height: 27px; color: #8c00aa; }
.chat-topics a:first-child svg { color: #f78000; }
.chat-compose-wrap { position: fixed; z-index: 6; right: 0; bottom: calc(var(--chat-nav) + var(--chat-keyboard)); left: 0; max-width: 680px; margin: auto; padding: 9px 10px; border-top: 1px solid #eee8f0; background: #fcfbfd; box-shadow: 0 -3px 12px #2b0d360b; }
.chat-compose { display: flex; align-items: center; gap: 6px; }
.chat-tool, .chat-emoji, .chat-send { display: grid; place-items: center; flex: none; padding: 0; border: 0; cursor: pointer; }
.chat-tool { width: 37px; height: 43px; border: 1px solid #e6deea; border-radius: 50%; background: #fff; color: #382044; }
.chat-tool svg, .chat-emoji svg, .chat-send svg { width: 21px; height: 21px; }
.chat-input-wrap { display: flex; align-items: center; flex: 1; min-width: 0; height: 45px; border: 1px solid #ded5e3; border-radius: 25px; background: #fff; }
.chat-input-wrap:focus-within { outline: 2px solid #ffb539; }
.chat-input-wrap input { flex: 1; min-width: 0; padding: 0 0 0 12px; border: 0; outline: 0; background: transparent; color: #23132a; font-size: 16px; }
.chat-input-wrap input::placeholder { color: #776d7d; }
.chat-emoji { width: 36px; height: 40px; border-radius: 50%; background: transparent; color: #4a245b; }
.chat-send { width: 44px; height: 44px; border-radius: 50%; background: #79009d; color: #fff; }
.chat-feedback { margin: 0 0 8px; padding: 9px 11px; border-radius: 9px; background: #f2e7f8; color: #48195c; font-size: 12px; line-height: 1.35; }
.chat-emoji-picker { display: flex; gap: 4px; width: fit-content; margin: 0 0 8px auto; padding: 5px; border: 1px solid #e6deea; border-radius: 10px; background: #fff; }
.chat-emoji-picker button { width: 40px; height: 38px; border: 0; border-radius: 7px; background: transparent; font-size: 21px; }
.chat-main :is(a, button), .chat-compose-wrap button { scroll-margin-bottom: 170px; }
.chat-main a:focus-visible, .chat-compose-wrap button:focus-visible { outline: 3px solid #ffb539; outline-offset: 2px; }
.keyboard-open { --chat-nav: env(safe-area-inset-bottom); }
.keyboard-open .bottom-nav { display: none; }
@media (min-width: 540px) { .chat-topics { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 340px) { .chat-header { padding-inline: 9px; } .chat-main { padding-inline: 10px; } .chat-compose-wrap { padding-inline: 6px; } .chat-compose { gap: 4px; } .chat-tool { width: 33px; height: 40px; } .chat-send { width: 40px; height: 40px; } .chat-input-wrap input { padding-left: 9px; } }