/* igni-chat — the HERE room skin, extracted verbatim from welcome.html (W1).
   Requires the host base skin (.card/.k/.sub/.rows/&c) — documented in the receipt. */

/* The portal. Step into a living universe — orb, resonance, spring choreography, glass depth.
   Motion is transform/opacity only (60fps) and yields to prefers-reduced-motion. Spacing
   scale shared with auth.html: card 22px pad / 24px radius, 14px gaps, 24px rhythm. */
*{box-sizing:border-box;margin:0;padding:0}
.portal{display:inline-block;margin-left:8px;color:var(--ember);text-decoration:none;font-weight:500;font-size:12px}
.portal:active{transform:scale(.96)}
.ghost{color:var(--soft);font-size:12px;padding:6px 4px;animation:fade .4s var(--smooth) both}
#hmsgs{overflow-x:hidden;mask-image:linear-gradient(180deg,transparent 0,#000 22px);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px)}
.msgrow{position:relative;display:flex;flex-direction:column;align-items:flex-start;margin-top:12px;padding:0 6px;opacity:0;animation:fade .5s var(--smooth) both}
.msgrow.cont{margin-top:3px}
.msgrow.me{align-items:flex-end}
.msgrow.pop{animation:popin .26s var(--spring) both}
.who{font-size:11px;color:var(--soft);margin:0 0 3px 14px;letter-spacing:.01em}
.who.igni{color:var(--soft)}
.bub{position:relative;max-width:75%;padding:8px 14px;border-radius:19px;font-size:15px;letter-spacing:-.01em;line-height:1.35;color:var(--ink);background:#26262a;border:none;overflow-wrap:anywhere}
.bub.igni{}
.me .bub{background:#0a6fd8;color:#fff}
.msgrow.cont:not(.me) .bub{border-top-left-radius:5px}
.msgrow.cont.me .bub{border-top-right-radius:5px}
.bub .portal{color:var(--tint-hi);font-weight:600}
.me .bub .portal{color:#fff;text-decoration:underline}
.me .bub .xn{background:rgba(255,255,255,.22);color:rgba(255,255,255,.9)}
.msgrow.pending .bub{filter:opacity(.6) saturate(.7)}
.dlv{font-size:11px;color:var(--soft);margin:3px 4px 0 0}
.msgrow.me .rxrow{margin:-7px 12px 0 0}
.msgrow.me .rxbar{left:auto;right:8px}
.btime{position:absolute;right:2px;bottom:12px;font-size:10.5px;color:var(--soft);opacity:0;transition:opacity .18s var(--smooth);pointer-events:none}
.msgrow.me .btime{right:auto;left:2px}
.msgrow:hover .btime{opacity:1}
.bub.tail-l::before,.bub.tail-r::before{content:'';position:absolute;bottom:0;width:11px;height:17px;background:inherit}
.bub.tail-r::before{right:-5.5px;clip-path:path('M0 0 C 2 9 6.5 14.5 11 17 C 5 17 1.5 15 0 12 Z')}
.bub.tail-l::before{left:-5.5px;clip-path:path('M11 0 C 9 9 4.5 14.5 0 17 C 6 17 9.5 15 11 12 Z')}
.bub.wbub{max-width:92%;width:min(92%,430px);padding:0;background:transparent}
.bub.wbub.tail-l::before,.bub.wbub.tail-r::before{content:none}
.wcap{font-size:13px;color:var(--soft);margin-bottom:8px}
.wg .wgt{font-size:14px;font-weight:590;color:var(--ink);margin-bottom:6px}
.wgk{font-size:11px;color:var(--soft);letter-spacing:.03em}
.wgv{font-size:20px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.wgs{font-size:11px;color:var(--soft);margin-top:2px}
.wgg{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px}
.wgc{background:rgba(255,255,255,.05);border-radius:10px;padding:8px 10px}
.wgi{padding:6px 0;border-top:1px solid rgba(255,255,255,.05);font-size:13.5px}
.wgi:first-of-type{border-top:none}
.wgl{color:var(--tint-hi);text-decoration:none;font-weight:500}
.wgb{font-size:13.5px;color:var(--dim);line-height:1.45}
.wgic{font-size:22px;margin-bottom:4px}
.wgbar{height:5px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:8px 0 2px}
.wgbar i{display:block;height:100%;border-radius:999px;background:var(--tint)}
.wgch{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.wgo{border:1px solid rgba(10,132,255,.45);background:rgba(10,132,255,.14);color:var(--tint-hi);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer;transition:transform .15s var(--spring)}
.wgo:active{transform:scale(.94)}
.wgim{max-width:100%;border-radius:12px;display:block}
.wg{background:#1c1c1e;border-radius:22px;padding:14px;box-shadow:0 10px 30px -14px rgba(0,0,0,.65)}
.wcap{margin:0 0 6px 4px}
.wghead{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.wgapp{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;background:rgba(255,255,255,.09);-webkit-mask-image:var(--sqmask);mask-image:var(--sqmask);-webkit-mask-size:100% 100%;mask-size:100% 100%;overflow:hidden}
.wgapp img,.ai2 img{width:72%;height:72%;object-fit:contain;display:block}
.wavi{width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;vertical-align:-3px;margin-right:5px;overflow:hidden}
.wavi img{width:100%;height:100%;object-fit:cover}
.emo{display:inline-flex;align-items:center;justify-content:center;height:1.35em;width:1.35em;vertical-align:-0.28em;overflow:hidden}
.emo img{height:100%;width:100%;object-fit:contain;display:block}
.emo.emg{font-size:1.15em;width:auto;height:auto;vertical-align:-0.08em}
.bub.ejumbo{background:transparent !important;border:none;padding:2px 4px;box-shadow:none}
.bub.ejumbo .emo{height:44px;width:44px;vertical-align:middle;margin:0 3px 0 0}
.bub.ejumbo .emo.emg{font-size:38px}
.eprow .emo{height:22px;width:22px;vertical-align:middle}
.emo[data-glyph]{cursor:pointer;transition:transform .15s var(--spring)}
.emo[data-glyph]:hover{transform:scale(1.18)}
.emo[data-glyph]:active{transform:scale(.94)}
.emo[data-glyph]:focus-visible{outline:2px solid var(--tint);outline-offset:2px;border-radius:8px}
.pmention{color:var(--tint-hi);font-weight:600;cursor:pointer;border-radius:6px;transition:opacity .12s var(--eo,ease)}
.pmention:hover{opacity:.75}
.pmention:focus-visible{outline:2px solid var(--tint);outline-offset:1px}
#pcardbg{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:59}
#pcard{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;width:min(320px,86vw)}
#pcard .pacts{display:flex;gap:8px;margin-top:10px}
#pcard .pacts button{flex:1;padding:11px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(28,28,33,.86);color:#f9f9f9;font-weight:600;font-size:14px;cursor:pointer}
#pcard .pacts button.pri{background:var(--tint);border-color:transparent}
.bub.ejumbo .emo[data-glyph]:hover{transform:scale(1.06)}
.wgname{font-size:11px;font-weight:590;letter-spacing:.04em;color:var(--soft)}
.wgact{display:flex;gap:8px;margin-top:12px}
.wga{flex:1;border:none;border-radius:12px;padding:9px 12px;font-size:13px;font-weight:600;background:rgba(255,255,255,.09);color:var(--ink);cursor:pointer;transition:transform .15s var(--spring)}
.wga.p{background:#0a6fd8;color:#fff;box-shadow:inset 0 -1px 0 rgba(0,0,0,.28)}
.wga:active{transform:scale(.96)}
.wg.hero{position:relative;padding:0;overflow:hidden;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .18s var(--spring)}
.wg.hero:active{transform:scale(.975)}
.hart{position:absolute;inset:0}
.hart img{width:100%;height:100%;object-fit:cover;display:block}
.hart::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 80% at 18% 0%,rgba(255,255,255,.14),transparent 55%)}
.hscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.64) 80%)}
.hfoot .wgapp{width:32px;height:32px;border-radius:9px;font-size:18px;background:rgba(255,255,255,.12)}
.hfoot .wga{flex:none;min-width:76px;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700}
.wgmedia{position:relative;height:110px;border-radius:14px;margin-bottom:10px;overflow:hidden}
.wgmedia img{width:100%;height:100%;object-fit:cover;display:block}
.wgav{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex:none}
.wgpill{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.08);font-size:10px;font-weight:600;letter-spacing:.03em;color:var(--soft);vertical-align:2px}
.wgpill.ok{background:rgba(48,209,88,.15);color:#5fe08a}
.wgo.cry{flex:none;padding:4px 10px;font-size:12px}
.plus{width:32px;height:32px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);color:var(--dim);font-size:17px;line-height:1;padding:0;cursor:pointer;transition:transform .18s var(--spring),background .2s,color .2s}
.plus:active{transform:scale(.9)}
.plus.on{background:var(--tint);border-color:transparent;color:#fff;transform:rotate(45deg)}
.uppanel{position:absolute;left:0;right:0;bottom:calc(100% + 10px);border-radius:18px;background:rgba(28,28,34,.9);backdrop-filter:blur(24px) saturate(1.35);-webkit-backdrop-filter:blur(24px) saturate(1.35);border:1px solid rgba(255,255,255,.10);box-shadow:0 18px 50px -18px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.07);z-index:12;animation:popin .24s var(--spring) both;overflow:hidden}
.atray{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:12px}
.atile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 4px;border:none;background:transparent;cursor:pointer;border-radius:12px;transition:transform .15s var(--spring),background .2s}
.atile:hover{background:rgba(255,255,255,.05)}
.atile:active{transform:scale(.92)}
.atile .ai2{width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;background:rgba(255,255,255,.09);-webkit-mask-image:var(--sqmask);mask-image:var(--sqmask);-webkit-mask-size:100% 100%;mask-size:100% 100%;overflow:hidden}
.atile .an2{font-size:10px;color:var(--soft)}
.hfullbtn{position:absolute;top:10px;right:10px;z-index:8;width:30px;height:30px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(30,30,36,.7);color:var(--soft);font-size:14px;cursor:pointer;transition:transform .15s var(--spring),color .2s}
.hfullbtn:hover{color:var(--ink)}.hfullbtn:active{transform:scale(.92)}
.card.hfull{position:fixed!important;inset:10px;z-index:70;display:flex;flex-direction:column;max-width:none;margin:0;overflow:hidden;animation:none;opacity:1;transform:none}
.card.hfull #hmsgs{flex:1}
.hday{display:flex;align-items:center;justify-content:center;margin:22px 0 8px;color:var(--soft);font-size:11px;font-weight:500;letter-spacing:.02em}
.hday::before,.hday::after{content:none}
.xn{display:inline-block;margin-left:8px;padding:1px 6px;background:rgba(255,255,255,.05);border:none;border-radius:4px;font-size:10px;font-weight:500;color:var(--soft);vertical-align:1px}
.hunread{color:var(--tint-hi);opacity:.9}
.apphead .wgapp{width:30px;height:30px;font-size:17px}
#kbg{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#kbar{position:fixed;left:50%;top:14%;transform:translateX(-50%);z-index:96;width:min(560px,92vw);background:#17171c;border:1px solid rgba(255,255,255,.1);border-radius:16px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.6);animation:sheetup .2s var(--spring) both}
.kres{max-height:46vh;overflow:auto;padding:6px}
.kres button{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;border:none;background:transparent;color:var(--ink);text-align:left;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:14px}
.kres button.sel,.kres button:hover{background:rgba(255,255,255,.08)}
.kres .kk{font-size:11px;color:var(--soft);min-width:34px}
.kres .kn{flex:1;font-weight:590;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kres .kd{font-size:12px;color:var(--soft)}
.rcard{display:flex;gap:9px;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:10px 12px;margin:4px 0;cursor:pointer}
.rcard:hover{background:rgba(255,255,255,.07)}
.rcgo{color:var(--soft)}
.rcw{font-size:12px;color:var(--soft)}.rcw b{color:var(--ink)}
.kflash{animation:kflash 1.2s ease}
#hmsgs.dense .bub{padding-top:6px;padding-bottom:6px}
#hmsgs.dense .btime{display:none}
#hmsgs.dense .row+.row,#hmsgs.dense>div+div{margin-top:2px}
@keyframes fade{to{opacity:1}}
@keyframes popin{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
@keyframes sheetup{from{opacity:0;transform:translateY(3%)}to{opacity:1;transform:none}}
@keyframes kflash{0%,100%{background:transparent}30%{background:rgba(255,214,10,.14)}}

/* ══ W3 — photo attach · camera sheet · voice · grounding (append-only; every selector NEW) ══ */
.wtool{width:32px;height:32px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.07);color:var(--dim);padding:0;cursor:pointer;transition:transform .18s var(--spring),background .2s,color .2s}
.wtool:active{transform:scale(.9)}
.wtool .wti{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#hmic.on{background:var(--tint);border-color:transparent;color:#fff;animation:vpulse 1.6s ease-in-out infinite}
#hattpend{position:absolute;left:0;right:0;bottom:calc(100% + 8px);display:flex;gap:6px;z-index:11}
.hattchip{position:relative;width:52px;height:52px;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#17171c;box-shadow:0 8px 24px -8px rgba(0,0,0,.6)}
.hattchip img{width:100%;height:100%;object-fit:cover;display:block}
.hattx{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;border:none;background:rgba(0,0,0,.62);color:#fff;font-size:10px;line-height:1;padding:0;cursor:pointer}
.hattrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.hatt{max-width:min(240px,100%);max-height:240px;border-radius:12px;display:block;cursor:zoom-in}
#hlbx{position:fixed;inset:0;z-index:97;background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;animation:fade .2s var(--smooth) both;cursor:zoom-out}
#hlbx img{max-width:94vw;max-height:92vh;border-radius:14px;box-shadow:0 30px 90px rgba(0,0,0,.7)}
#camsheet{position:fixed;inset:0;z-index:96;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center}
.camcard{width:min(560px,100vw);max-height:94vh;overflow:auto;background:#17171c;border:1px solid rgba(255,255,255,.1);border-radius:22px 22px 0 0;padding:14px;animation:sheetup .22s var(--spring) both}
.camhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.camtitle{font-size:13px;color:var(--soft);letter-spacing:.02em}
.camx{width:28px;height:28px;border-radius:50%;border:none;background:rgba(255,255,255,.08);color:var(--ink);cursor:pointer}
.camvid{width:100%;max-height:56vh;border-radius:16px;background:#000;display:block}
.camctl{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:12px}
.camshut{width:62px;height:62px;border-radius:50%;border:4px solid rgba(255,255,255,.9);background:rgba(255,255,255,.25);cursor:pointer;transition:transform .15s var(--spring)}
.camshut:active{transform:scale(.92)}
.camshut:disabled{opacity:.35;cursor:default}
.camflip{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:var(--ink);font-size:17px;cursor:pointer}
.camspacer{width:40px;height:40px}
.camstill{width:100%;border-radius:16px;display:block}
.camcap{width:100%;margin-top:10px;font-size:15px;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:9px 14px;outline:none}
.camplace{margin-top:10px}
.camplacebtn{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--ink);border-radius:999px;padding:8px 14px;font-size:13px;cursor:pointer}
.camplacesel{width:100%;font-size:14px;color:var(--ink);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:9px 12px;outline:none}
.camground{margin-top:8px;border:1px solid rgba(255,214,10,.28);background:rgba(255,214,10,.07);border-radius:14px;padding:10px 12px}
.camconsent{font-size:12.5px;line-height:1.45;color:var(--ink)}
.camconsent b{font-weight:650}
.camglabel{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:var(--ink);cursor:pointer}
.camretake{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--ink);border-radius:999px;padding:9px 16px;font-size:14px;cursor:pointer}
.camuse{border:none;background:var(--tint);color:#fff;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer}
.camuse:disabled{opacity:.5}
@keyframes vpulse{0%,100%{box-shadow:0 0 0 0 rgba(10,132,255,.45)}50%{box-shadow:0 0 0 8px rgba(10,132,255,0)}}