.line{background:#111;color:#fff;padding-top:var(--sat);display:flex;flex-direction:column;font-size:calc(4*var(--u));overflow:hidden}
.line :where(button){background:none;border:0;color:inherit;font:inherit;padding:0;text-align:left}
.line .ic{display:inline-grid;flex:none}.line .ic svg{width:100%;height:100%}
.line .iw{position:relative;display:grid}
.line .scroll{padding:0}
.l-bar{display:flex;align-items:center;gap:calc(4*var(--u));padding:calc(2*var(--u)) calc(4.1*var(--u))}
.l-bar .sp{flex:1}
.l-sel{background:#fff;color:#000;font-weight:700;border-radius:calc(6*var(--u));padding:calc(2.6*var(--u)) calc(4.6*var(--u));font-size:calc(4.3*var(--u))}
.l-ttl{font-size:calc(4.3*var(--u))}
.l-pill{height:calc(9.8*var(--u));border-radius:calc(5*var(--u));background:#232323;margin:calc(1*var(--u)) calc(4.1*var(--u)) calc(2*var(--u));display:flex;align-items:center;padding:0 calc(3.5*var(--u));gap:calc(2.5*var(--u));color:#8a8a8e;font-size:calc(4*var(--u))}
.l-pill .sp{flex:1}
.l-crow{width:100%;display:flex;align-items:center;gap:calc(3.5*var(--u));padding:calc(3.6*var(--u)) calc(4.1*var(--u))}
.l-av{border-radius:50%;display:grid;place-items:center;font-weight:600;flex:none;color:#fff}
.l-av.hide{visibility:hidden}
.l-cb{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(.8*var(--u))}
.l-cb b{font-size:calc(4.2*var(--u));font-weight:500}.l-cb span{color:#8a8a8e;font-size:calc(3.8*var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-cr{display:flex;flex-direction:column;align-items:flex-end;gap:calc(1.2*var(--u));color:#8a8a8e;font-size:calc(3.1*var(--u));align-self:flex-start;padding-top:calc(.8*var(--u))}
.l-cr i{font-style:normal;background:#06c755;color:#fff;min-width:calc(4.6*var(--u));height:calc(4.6*var(--u));border-radius:calc(2.3*var(--u));display:grid;place-items:center;font-size:calc(3*var(--u));padding:0 calc(1.2*var(--u))}
.l-tabs{display:flex;background:#181818;padding:calc(2*var(--u)) 0 calc(var(--sab) + calc(1*var(--u)))}
.l-tab{flex:1;display:flex!important;flex-direction:column;align-items:center;gap:calc(1*var(--u));font-size:calc(2.7*var(--u))}
.l-tab.on svg{fill:currentColor}
.l-dot{position:absolute;top:calc(-1.8*var(--u));right:calc(-3*var(--u));min-width:calc(4.4*var(--u));height:calc(4.4*var(--u));border-radius:calc(2.2*var(--u));background:#ff3b30;font-size:calc(2.8*var(--u));display:grid;place-items:center;padding:0 calc(1*var(--u));font-weight:600}
.l-n{position:absolute;top:calc(-2*var(--u));right:calc(-2.2*var(--u));width:calc(4.4*var(--u));height:calc(4.4*var(--u));border-radius:50%;background:#06c755;font-size:calc(2.8*var(--u));display:grid;place-items:center}
.l-top{display:flex;justify-content:flex-end;gap:calc(5*var(--u));padding:calc(3*var(--u)) calc(4.1*var(--u)) 0}
.l-me{display:flex;align-items:center;padding:calc(6*var(--u)) calc(4.1*var(--u)) calc(4*var(--u));gap:calc(3*var(--u))}
.l-me .t{flex:1}.l-me b{font-size:calc(5.5*var(--u));display:block}.l-me span{color:#8a8a8e;font-size:calc(4.4*var(--u))}
.l-add{width:calc(14.4*var(--u));height:calc(14.4*var(--u));border:calc(.3*var(--u)) dashed #444;border-radius:50%;display:grid;place-items:center;color:#8a8a8e;font-size:calc(6*var(--u))}
.l-h{display:flex;justify-content:space-between;padding:calc(3*var(--u)) calc(4.1*var(--u)) calc(1*var(--u));font-weight:700;font-size:calc(4.2*var(--u))}.l-h span{font-weight:400;color:#8a8a8e}
.l-svc{display:flex;overflow-x:auto;padding:calc(2*var(--u)) calc(2*var(--u)) calc(3*var(--u));gap:calc(1*var(--u))}.l-svc div{flex:none;width:calc(17*var(--u));display:flex;flex-direction:column;align-items:center;gap:calc(2*var(--u));color:#8a8a8e;font-size:calc(3.3*var(--u));text-align:center}
.l-ban{margin:calc(2*var(--u)) calc(4.1*var(--u)) calc(8*var(--u));height:calc(60*var(--u));border-radius:calc(3*var(--u));background:var(--img) center/cover,#fff;color:#111;display:grid;place-items:center;font-weight:700}
.l-chat{position:absolute;inset:0;background:#1b1b1b;display:flex;flex-direction:column;padding-top:var(--sat);transform:translateX(100%);transition:transform .35s var(--ease);z-index:3}
.l-chat.open{transform:none}
.l-nm{flex:1;font-size:calc(4.4*var(--u))}.l-back{display:flex!important;align-items:center;gap:calc(1.5*var(--u));font-size:calc(4.8*var(--u));font-weight:600}
.l-msgs{flex:1;padding:calc(2*var(--u)) 0!important}
.l-chip{margin:calc(2*var(--u)) auto calc(3*var(--u));width:max-content;padding:calc(1.6*var(--u)) calc(4*var(--u));border-radius:calc(5*var(--u));background:#2b2b2d;font-size:calc(3.8*var(--u))}
.l-msg{display:flex;align-items:flex-end;gap:calc(2*var(--u));margin:calc(1.2*var(--u)) 0;padding:0 calc(2.2*var(--u))}.l-msg.me{justify-content:flex-end}
.l-b{max-width:62%;padding:calc(2.4*var(--u)) calc(3.4*var(--u));border-radius:calc(4.6*var(--u));font-size:calc(4.2*var(--u));line-height:1.35;background:#2c2c2e;word-break:break-word}
.l-msg.me .l-b{background:#6de37c;color:#000}.l-msg.in .l-b.first{border-top-left-radius:calc(1*var(--u))}.l-msg.me .l-b.first{border-top-right-radius:calc(1*var(--u))}
.l-meta{font-size:calc(3.1*var(--u));color:#8e8e93;line-height:1.3;margin-bottom:calc(.4*var(--u))}.l-msg.me .l-meta{text-align:right}
.l-in{display:flex;align-items:center;gap:calc(3.2*var(--u));padding:calc(2*var(--u)) calc(3.5*var(--u)) calc(var(--sab) + calc(2*var(--u)));background:#181818}
.l-fld{flex:1;display:flex;align-items:center;background:#232323;border-radius:calc(6*var(--u));padding:calc(1.6*var(--u)) calc(3.5*var(--u));gap:calc(2*var(--u));min-width:0}
.l-fld input{flex:1;background:none;border:0;outline:0;color:#fff;font:inherit;font-size:max(16px,calc(4.2*var(--u)));user-select:text;-webkit-user-select:text;min-width:0}

img.l-av{object-fit:cover}
.l-pic{max-width:62%;max-height:calc(70*var(--u));border-radius:calc(4*var(--u));display:block;object-fit:cover}
.l-stk{width:calc(34*var(--u));height:auto}
.l-sheet{position:absolute;inset:0;background:#0007;z-index:9;display:flex;align-items:flex-end}
.l-sheet>div{width:100%;background:#2a2a2a;border-radius:calc(4*var(--u)) calc(4*var(--u)) 0 0;padding:calc(2*var(--u)) 0 calc(var(--sab) + calc(2*var(--u)))}
.l-sheet button{display:block;width:100%;padding:calc(3.6*var(--u)) calc(5*var(--u));font-size:calc(4.4*var(--u))}
.l-tray{display:flex;gap:calc(2*var(--u));overflow-x:auto;padding:calc(2*var(--u));background:#181818}.l-tray[hidden]{display:none}
.l-tray img{width:calc(18*var(--u));height:calc(18*var(--u));object-fit:contain;flex:none}
.l-view{position:absolute;inset:0;background:#000;z-index:10;display:grid;place-items:center}.l-view img{max-width:100%;max-height:100%}

/* ---- chat room alignment like the real app: avatar on TOP of the bubble, time at the bottom ---- */
.l-msg{margin:calc(.85*var(--u)) 0;gap:calc(1.3*var(--u))}
.l-msg.in{align-items:flex-start}
.l-msg.in>.l-av{margin-top:calc(-1.5*var(--u))}
.l-msg.in>.l-meta{align-self:flex-end;margin-bottom:calc(1.2*var(--u))}
.l-b{max-width:68%;padding:calc(1.6*var(--u)) calc(3.7*var(--u));font-size:calc(4.5*var(--u));line-height:calc(6*var(--u))}
.l-pic{max-width:68%;max-height:calc(100*var(--u))}