/* compare */
.cmp-bar{position:fixed; inset-inline-start:50%; transform:translateX(-50%); bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:35; width:min(720px,calc(100% - 32px)); background:var(--strong); color:var(--on-strong); border-radius:20px; padding:12px; padding-inline-start:20px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; box-shadow:var(--shadow-lg); animation:up .35s cubic-bezier(.2,.7,.2,1)}
[dir="rtl"] .cmp-bar{transform:translateX(50%)}
@keyframes up{from{opacity:0; translate:0 20px}}
.cmp-bar .tags{display:flex; gap:6px; flex-wrap:wrap; flex:1 1 200px; min-width:0}
.cmp-bar .tag{padding:6px 6px 6px 12px; padding-inline:12px 6px; border-radius:999px; background:var(--strong-2); color:var(--on-strong); font-size:14px; display:inline-flex; align-items:center; gap:4px}
.cmp-bar .tag button{width:26px; height:26px; border-radius:50%; border:none; background:transparent; color:inherit; display:inline-flex; align-items:center; justify-content:center}
.cmp-bar .btn{min-height:44px; font-size:15px}
@media (max-width:1240px){ .cmp-bar{bottom:calc(96px + env(safe-area-inset-bottom,0px))} }
@media (max-width:640px){ .cmp-bar{bottom:calc(88px + env(safe-area-inset-bottom,0px))} }
.modal-bg{position:fixed; inset:0; z-index:60; background:var(--overlay); display:flex; align-items:center; justify-content:center; padding:16px; animation:fade .25s}
@keyframes fade{from{opacity:0}}
.modal{background:var(--card); border-radius:var(--r-card); width:min(920px,100%); max-height:88vh; overflow:auto; padding:28px; display:flex; flex-direction:column; gap:20px; animation:rise .35s cubic-bezier(.2,.7,.2,1)}
@media (max-width:640px){ .modal{padding:20px} }
.modal-hd{display:flex; justify-content:space-between; align-items:center; gap:12px}
.modal-hd h2{font-size:30px; font-weight:800}
.cmp-scroll{overflow-x:auto}
.cmp-grid{display:grid; min-width:600px}
.cmp-grid > div{padding:14px 12px; border-bottom:1px solid var(--line-3); font-size:15px}
.cmp-grid .rl{color:var(--ink-2); font-weight:700; font-size:14px}
.cmp-grid .hd{font-family:var(--f-display); font-weight:700; font-size:18px; line-height:1.2}
.cmp-grid .best{color:var(--primary-ink); font-weight:700}

/* chat */
.chat-fab{position:fixed; inset-inline-end:24px; bottom:calc(24px + env(safe-area-inset-bottom,0px)); z-index:36; height:60px; padding-inline:14px 22px; border-radius:30px; border:none; background:var(--primary); color:var(--on-primary); font-weight:700; font-size:16px; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-lg); transition:transform .2s}
.chat-fab:hover{transform:translateY(-2px)}
.chat-fab .ic{width:40px; height:40px; border-radius:50%; background:var(--sand); color:var(--on-sand); display:flex; align-items:center; justify-content:center; position:relative}
.chat-fab .ic::after{content:""; position:absolute; inset-inline-end:-1px; top:-1px; width:10px; height:10px; border-radius:50%; background:#8FD3B0; border:2px solid var(--primary)}
.chat-fab .ic.off::after{background:var(--warm)}
@media (max-width:640px){ .chat-fab{inset-inline-end:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); padding-inline:12px} .chat-fab .t{display:none} }
.chat{position:fixed; inset-inline-end:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:50; width:min(390px,calc(100% - 32px)); height:min(600px,calc(100% - 32px)); background:var(--card); border-radius:var(--r-card); border:1px solid var(--line); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; animation:chatin .35s cubic-bezier(.2,.7,.2,1); transform-origin:bottom right}
[dir="rtl"] .chat{transform-origin:bottom left}
@keyframes chatin{from{opacity:0; transform:scale(.92) translateY(10px)}}
.chat-hd{background:var(--primary); color:var(--on-primary); padding:16px; display:flex; align-items:center; gap:12px}
.chat-av{width:44px; height:44px; border-radius:14px; background:var(--sand); color:var(--warm); display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.chat-hd .nm{font-weight:700; display:block} .chat-hd small{font-size:13px; opacity:.88; display:block}
.chat-hd .icon-btn{background:rgba(255,255,255,.16); border:none; color:inherit; margin-inline-start:auto}
.chat-log{flex:1 1 auto; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--bg)}
.msg{max-width:82%; padding:10px 14px; font-size:15px; line-height:1.45; animation:msgin .3s ease backwards; white-space:pre-line}
@keyframes msgin{from{opacity:0; transform:translateY(6px)}}
.msg.me{align-self:flex-start; background:var(--card); border:1px solid var(--line); border-radius:16px 16px 16px 4px}
.msg.you{align-self:flex-end; background:var(--primary); color:var(--on-primary); border-radius:16px 16px 4px 16px}
[dir="rtl"] .msg.me{border-radius:16px 16px 4px 16px} [dir="rtl"] .msg.you{border-radius:16px 16px 16px 4px}
.msg a{color:inherit; font-weight:700}
.typing{align-self:flex-start; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px 14px; display:flex; gap:4px}
.typing i{width:7px; height:7px; border-radius:50%; background:var(--ink-2); animation:dots 1.2s infinite} .typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,60%,100%{opacity:.3; transform:none} 30%{opacity:1; transform:translateY(-3px)}}
.quick{padding:10px 12px 0; display:flex; gap:6px; flex-wrap:wrap}
.quick button{padding:8px 12px; min-height:36px; border-radius:999px; border:1px solid var(--primary-line); background:var(--card); color:var(--primary-ink); font-size:13px; font-weight:700; text-align:start}
.quick button:hover{background:var(--primary-soft)}
.chat-in{padding:12px; display:flex; gap:8px; margin:0}
.chat-in .input{height:46px; font-size:15px}
.chat-in .btn{min-height:46px; width:46px; padding:0}
.chat-wa{font-size:13px; text-align:center; padding:0 12px 10px; color:var(--ink-2)} .chat-wa a{font-weight:700}

/* toast */
.toast{position:fixed; inset-inline-start:50%; transform:translateX(-50%); top:calc(80px + env(safe-area-inset-top,0px)); z-index:80; background:var(--strong); color:var(--on-strong); padding:12px 18px; border-radius:14px; font-weight:500; font-size:15px; box-shadow:var(--shadow-lg); display:flex; gap:12px; align-items:center; max-width:calc(100% - 32px); animation:fade .25s}
[dir="rtl"] .toast{transform:translateX(50%)}
.toast button{background:var(--strong-2); color:var(--on-strong); border:none; border-radius:8px; padding:6px 10px; font-weight:700; font-size:13px}

/* lightbox */
.lb{position:fixed; inset:0; z-index:70; background:var(--overlay); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:16px; animation:fade .25s}
.lb-in{position:relative; width:min(1100px,100%); height:min(720px,calc(100% - 32px)); border-radius:28px; display:flex; align-items:center; justify-content:center; overflow:hidden}
.lb-in .art{width:min(420px,70%); height:auto; aspect-ratio:160/110; max-width:100%; opacity:.6}
.lb .close{position:absolute; inset-inline-end:16px; top:16px}