body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button{cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--link);outline-offset:4px}
.icon{display:block;flex-shrink:0;width:22px;height:22px}
.icon.sm{width:18px;height:18px}
.icon.md{width:20px;height:20px}
.icon.xs{width:16px;height:16px}
.control{display:flex;align-items:center;justify-content:center;min-width:22px;min-height:26px}
.flag{height:15px;width:21px;border-radius:3px;object-fit:cover}
.overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px}
.panel-backdrop{position:absolute;inset:0;background:var(--overlay);animation:fade-in var(--duration-fast) ease-out both}
.sheet{position:relative;width:470px;max-width:100%;max-height:calc(100dvh - 48px);overflow:auto;border-radius:24px;background:var(--card);color:var(--foreground);padding:24px;box-shadow:var(--shadow-sheet-value);animation:sheet-in var(--duration-base) cubic-bezier(.22,1,.36,1) both}
.is-closing .panel-backdrop{animation:fade-out var(--duration-fast) ease-out both}
.is-closing .sheet{animation:sheet-out var(--duration-base) cubic-bezier(.22,1,.36,1) both}
.sheet-title{font-size:20px;font-weight:600;margin:0 40px 20px 0}
.close{position:absolute;right:22px;top:22px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--muted-foreground)}
.close:hover{background:var(--muted)}
header button{transition:opacity var(--duration-fast) cubic-bezier(.4,0,.2,1)}
#receive-method [data-action="copy"]{transition:opacity var(--duration-fast) cubic-bezier(.4,0,.2,1)}
.faq-search{width:100%;height:48px;border:1px solid var(--field-border);border-radius:14px;padding:0 16px;margin-bottom:14px;outline:none}
.faq-search:focus{border-color:var(--foreground)}
.faq-item{border-bottom:1px solid var(--hairline)}
.faq-question{width:100%;padding:17px 0;display:flex;align-items:center;gap:16px;text-align:left;font-size:16px;font-weight:400;line-height:1.5}
.faq-question span{flex:1;font-weight:600;line-height:1.375}
.faq-answer{padding:0 0 18px;color:var(--muted-foreground);font-size:15px;line-height:1.625}
.faq-question[aria-expanded=true] svg{rotate:-180deg}
.faq-empty{color:var(--muted-foreground);padding:16px 0}
.chat-toggle{position:fixed;z-index:40;right:calc(20px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:none;color:#fff;animation:chat-pulse 2.4s ease infinite}
.chat-toggle svg{display:block;width:100%;height:100%}
.chat{position:fixed;z-index:70;right:calc(20px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));width:380px;height:520px;max-height:calc(100dvh - 48px);display:flex;flex-direction:column;background:#fff;color:#111;border-radius:24px;box-shadow:0 20px 50px rgba(11,20,55,.25);overflow:hidden;animation:chat-in .3s cubic-bezier(.22,1,.36,1)}
.chat.is-closing{animation:chat-out .26s ease-in forwards}
.chat-header .icon,.chat-composer .icon{width:23px;height:23px;stroke-width:2}
.chat-header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid #eceef7;flex-shrink:0}
.chat-avatar{width:42px;height:42px;flex-shrink:0;border-radius:12px}
.chat-heading{flex:1;min-width:0}
.chat-heading strong{display:block;font-size:15px;font-weight:600;color:#111}
.chat-heading p{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:400;color:#8a8fa3;margin-top:2px}
.chat-status{width:6px;height:6px;border-radius:50%;background:#22a66d;display:inline-block}
.chat-header button{background:none;border:0;color:#6b7286;padding:6px}
.chat-body{padding:0 14px 14px;flex:1;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;background:#fbfbfe}
.chat-banner{position:relative;display:flex;align-items:center;gap:12px;box-sizing:border-box;width:calc(100% + 8px);margin:10px -4px 3px;flex-shrink:0;padding:12px 14px;border-radius:20px;border:1px solid #dce1f0;background:#edeff7;box-shadow:0 2px 6px rgba(20,30,60,.11);animation:fade-in .3s ease-out}
.chat-banner>img{width:28px;height:28px;flex-shrink:0}
.chat-banner>div{flex:1;min-width:0}
.chat-banner p{font-size:15px;font-weight:700;color:#14151c;line-height:1.3}
.chat-banner span{display:block;margin-top:2px;font-size:12.5px;font-weight:500;color:#767c94;line-height:1.3}
.chat-banner>.icon{color:#9aa0b4;stroke-width:2}
.chat-composer{display:flex;align-items:center;gap:8px;padding:12px;border-top:1px solid #eceef7;background:#fff;flex-shrink:0}
.chat-composer button{background:none;border:0;color:#6b7286;padding:8px;flex-shrink:0;cursor:pointer}
.chat-composer button[aria-label="Send"]{color:#2563eb}
.chat-composer button:disabled{opacity:.4;cursor:default}
.chat-composer textarea{flex:1;padding:10px 14px;border-radius:20px;border:1px solid #eceef7;font-size:14px;font-weight:400;font-family:inherit;outline:none;background:#fbfbfe;color:#111;min-width:0;resize:none;line-height:20px;max-height:100px}
.chat-composer textarea:focus{border-color:#2563eb}
.chat-messages{display:flex;flex-direction:column;gap:10px}
.chat-message{max-width:88%;padding:10px 12px;border-radius:15px;background:#eef0f7;align-self:flex-start;overflow-wrap:anywhere;flex-shrink:0}
.chat-message-visitor{background:#e7efff;align-self:flex-end}
.chat-message>strong{display:block;font-size:12px;color:#626b80;margin-bottom:4px}
.chat-message p{font-size:14px;line-height:1.45;white-space:pre-wrap}
.chat-message-time{display:block;font-size:10px;color:#70798b;margin-top:5px;text-align:right}
.chat-retry{font-size:12px;color:#2459b9;text-decoration:underline;margin-top:6px}
.chat-retry:disabled{opacity:.4;cursor:default}
.chat-file{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:#2459b9;text-align:left;margin-top:5px;max-width:100%;overflow-wrap:anywhere}
.chat-file img{display:block;max-width:100%;max-height:200px;object-fit:contain;border-radius:8px}
.chat-file span{min-width:0;max-width:100%}
.chat-selection:empty,.chat-error:empty{display:none}
.chat-selection{display:flex;gap:8px;align-items:center;padding:8px 16px;font-size:12px;background:#f3f5fa}
.chat-selection span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-selection button{padding:5px}
.chat-error{font-size:12px;line-height:1.4;color:#b42332;padding:8px 16px;margin:0}
.placeholder-message{color:var(--muted-foreground);font-size:15px;line-height:1.6}
.mobile-guide{margin-top:16px;border:1px solid var(--field-border);border-radius:20px}
.mobile-guide>button{display:flex;width:100%;gap:16px;align-items:center;justify-content:space-between;padding:16px;font-weight:600;font-size:16px;text-align:left;line-height:1.375}
.mobile-guide>button svg,.faq-question svg{color:var(--muted-foreground);transition:transform var(--duration-base) cubic-bezier(.4,0,.2,1),translate var(--duration-base) cubic-bezier(.4,0,.2,1),scale var(--duration-base) cubic-bezier(.4,0,.2,1),rotate var(--duration-base) cubic-bezier(.4,0,.2,1)}
.mobile-guide>button[aria-expanded=true] svg{rotate:-180deg}
.mobile-guide ol{padding:0 16px 20px;display:flex;flex-direction:column;gap:12px;list-style:none;counter-reset:guide}
.mobile-guide li{display:flex;align-items:flex-start;gap:12px;font-size:15px;color:var(--muted-foreground);line-height:1.375;counter-increment:guide}
.mobile-guide li:before{content:counter(guide);display:grid;place-items:center;flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--panel);color:var(--foreground);font-size:13px;font-weight:600}


.panel-faq{padding:0;justify-content:flex-start;align-items:stretch}
.panel-faq .panel-backdrop{animation:fade-in var(--duration-panel) cubic-bezier(.4,0,.2,1) both}
.panel-faq .sheet{display:flex;flex-direction:column;width:470px;height:100dvh;max-height:100dvh;border-radius:0;padding:0;overflow:hidden;animation:drawer-in var(--duration-panel) cubic-bezier(.33,1,.68,1) both}
.panel-faq.is-closing .panel-backdrop{animation:fade-out var(--duration-panel) cubic-bezier(.4,0,.2,1) both}
.panel-faq.is-closing .sheet{animation:drawer-out var(--duration-panel) cubic-bezier(.33,1,.68,1) both}
.faq-header{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 8px;flex-shrink:0}
.panel-faq .sheet-title{font-weight:700;margin:0;line-height:1.5}
.panel-faq .close{position:static;width:36px;height:36px;color:var(--foreground);border-radius:999px}
.faq-search-wrap{display:flex;gap:12px;align-items:center;border:1px solid var(--field-border);padding:12px 16px;border-radius:16px;color:var(--placeholder);margin-bottom:12px}
.panel-faq .faq-search-wrap{margin:12px 24px;color:var(--foreground);flex-shrink:0}
.faq-search-wrap>.icon{color:var(--placeholder)}
.faq-search-wrap:focus-within{border-color:color-mix(in oklab,var(--foreground) 40%,transparent)}
.faq-search-wrap .faq-search{margin:0;padding:0;border:0;border-radius:0;height:24px;color:var(--foreground);font-size:16px}
#faq-list{flex:1;overflow:auto;overscroll-behavior:contain;padding-bottom:calc(env(safe-area-inset-bottom) + 24px);margin:0 24px}
.faq-item{border-bottom:0;border-top:1px solid var(--hairline)}
.faq-item:first-child{border-top:0}
.faq-question{padding:20px 12px;font-size:16px}
.faq-answer{padding:0 12px 20px;font-size:16px}
.faq-content{border-radius:18px;transition:background-color var(--duration-base) cubic-bezier(.4,0,.2,1)}
.faq-content.is-open{background:var(--panel)}
.accordion-grid{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--duration-slow) cubic-bezier(.22,1,.36,1),opacity var(--duration-slow) cubic-bezier(.22,1,.36,1)}
.accordion-grid.is-open{grid-template-rows:1fr;opacity:1}
.accordion-clip{min-height:0;overflow:hidden}
@keyframes drawer-in{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes drawer-out{from{transform:translateX(0);opacity:1}to{transform:translateX(-100%);opacity:0}}
@keyframes fade-out{from{opacity:1}to{opacity:0}}
@keyframes sheet-out{from{transform:translateY(0)}to{transform:translateY(100%)}}
@keyframes chat-in{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes chat-out{from{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}
@keyframes chat-pulse{0%,100%{box-shadow:0 0 0 0 rgba(59,131,246,.28)}50%{box-shadow:0 0 0 4px rgba(59,131,246,.16)}}
.amount-heading{flex-wrap:wrap}
.invoice-amount{max-width:100%;min-width:0;margin-left:auto;overflow-wrap:anywhere;text-align:right}
@media(max-width:639px){.overlay{padding:0;align-items:flex-end}.sheet{width:100%;max-height:90dvh;border-radius:24px 24px 0 0;padding:24px 20px calc(env(safe-area-inset-bottom) + 24px)}.chat{left:0;right:0;top:calc(3px + env(safe-area-inset-top));bottom:calc(3px + env(safe-area-inset-bottom));width:auto;height:auto;max-height:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:639px){.panel-faq .sheet{width:100%;padding:0}.faq-header{padding:20px 20px 8px}.panel-faq .faq-search-wrap{margin:12px 20px}#faq-list{margin:0 20px}.panel-faq .close{color:var(--link)}}