/* Liao Web — UI rebuilt to mirror Telegram WebK structure and visual language. Derived references/assets from morethanwords/tweb (GPL-3.0-only); license kept at /tweb-assets/license/GPL-3.0-tweb.txt. */
:root{--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;--primary:#3390ec;--primary-rgb:51,144,236;--text:#0f0f0f;--secondary:#707579;--muted:#a2acb4;--border:#dadce0;--panel:#fff;--bg:#f4f4f5;--hover:rgba(0,0,0,.06);--active:#e6f3ff;--green:#5ca853;--danger:#df3f40;--bubble-in:#fff;--bubble-out:#d9fdd3;--shadow:0 1px 2px rgba(16,35,47,.12),0 8px 24px rgba(16,35,47,.08);--sidebar:26.5rem;--topbar:3.5rem;--radius:1rem;--wallpaper:#8bc5e5}
[data-theme=dark]{--text:#fff;--secondary:#a8b0b7;--muted:#76828c;--border:#303b43;--panel:#17212b;--bg:#0e1621;--hover:rgba(255,255,255,.08);--active:rgba(var(--primary-rgb),.18);--bubble-in:#182533;--bubble-out:#2b5278;--green:#6ab45f;--wallpaper:#0f1f2e}
*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:var(--font);color:var(--text);background:var(--panel);-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button{border:0;background:transparent;color:inherit;cursor:pointer}input,textarea{outline:0;color:var(--text)}.hidden{display:none!important}.app{height:100%;max-width:1680px;margin:0 auto;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);background:var(--bg)}
.icon{width:1.5rem;height:1.5rem;display:inline-block;background:currentColor;mask:center/contain no-repeat;opacity:.9}.i-menu{mask-image:url('/tweb-assets/icons/menu.svg')}.i-search{mask-image:url('/tweb-assets/icons/search.svg')}.i-attach{mask-image:url('/tweb-assets/icons/attach.svg')}.i-send{mask-image:url('/tweb-assets/icons/send.svg')}.i-settings{mask-image:url('/tweb-assets/icons/settings.svg')}.i-edit{mask-image:url('/tweb-assets/icons/edit.svg')}.i-delete{mask-image:url('/tweb-assets/icons/delete.svg')}.i-adduser{mask-image:url('/tweb-assets/icons/adduser.svg')}.i-close{mask-image:url('/tweb-assets/icons/close.svg')}.i-check{mask-image:url('/tweb-assets/icons/check.svg')}
.btn-icon{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;color:var(--secondary);transition:.16s}.btn-icon:hover{background:var(--hover);color:var(--text)}.primary-btn{height:2.75rem;border-radius:.75rem;background:var(--primary);color:#fff;font-weight:600;padding:0 1rem}.ghost-btn{height:2.5rem;border-radius:.75rem;background:var(--hover);color:var(--secondary);padding:0 .9rem}.link-btn{color:var(--primary);font-weight:600}.danger{color:var(--danger)!important}.avatar{width:3.375rem;height:3.375rem;min-width:3.375rem;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;background:linear-gradient(135deg,#5ac8fa,#3478f6);position:relative;overflow:hidden}.avatar.small{width:2.5rem;height:2.5rem;min-width:2.5rem;font-size:.875rem}.avatar.online:after{content:"";position:absolute;right:.1rem;bottom:.1rem;width:.75rem;height:.75rem;border-radius:50%;background:var(--green);border:2px solid var(--panel)}
.sidebar{min-width:0;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:5}.sidebar-header{height:var(--topbar);display:flex;align-items:center;gap:.5rem;padding:0 .8125rem}.brand{flex:1;min-width:0}.brand b{display:block;font-size:1rem;line-height:1.15}.brand span{font-size:.75rem;color:var(--secondary)}.search-wrap{padding:.25rem .8125rem .5rem;position:relative}.search-wrap .icon{position:absolute;left:1.55rem;top:.82rem;width:1.1rem;height:1.1rem;color:var(--muted)}.search{width:100%;height:2.5rem;border:0;border-radius:999px;background:var(--bg);padding:0 1rem 0 2.55rem}.me-card{display:flex;align-items:center;gap:.75rem;margin:0 .8125rem .5rem;padding:.65rem;border-radius:.875rem;background:linear-gradient(135deg,rgba(var(--primary-rgb),.12),rgba(92,168,83,.12))}.me-info{min-width:0;flex:1}.me-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.me-sub{font-size:.8125rem;color:var(--secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dialog-list{list-style:none;margin:0;padding:.25rem .5rem 1rem;overflow:auto;flex:1}.dialog{height:4.5rem;border-radius:.75rem;padding:.5rem;display:flex;align-items:center;gap:.75rem;position:relative}.dialog:hover{background:var(--hover)}.dialog.active{background:var(--active)}.dialog-body{min-width:0;flex:1;border-bottom:1px solid color-mix(in srgb,var(--border),transparent 40%);padding:.2rem 0 .45rem}.dialog:last-child .dialog-body,.dialog.active .dialog-body{border-bottom-color:transparent}.dialog-top{display:flex;gap:.5rem;align-items:center}.dialog-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.dialog-time{font-size:.75rem;color:var(--secondary)}.dialog-sub{margin-top:.2rem;display:flex;gap:.5rem;color:var(--secondary);font-size:.875rem}.dialog-last{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.badge{min-width:1.35rem;height:1.35rem;border-radius:999px;background:var(--primary);color:#fff;font-size:.75rem;display:grid;place-items:center;padding:0 .35rem}.admin-panel{padding:.75rem;border-top:1px solid var(--border);display:grid;gap:.5rem}.admin-panel input{height:2.35rem;border:1px solid var(--border);border-radius:.65rem;background:var(--bg);padding:0 .75rem}.admin-row{display:flex;gap:.5rem}.admin-row input{min-width:0;flex:1}
.chat{min-width:0;display:flex;flex-direction:column;position:relative;background:var(--wallpaper)}.chat:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 18px 18px,rgba(255,255,255,.22) 1.2px,transparent 1.4px),radial-gradient(circle at 44px 42px,rgba(0,0,0,.05) 1px,transparent 1.2px);background-size:64px 64px;opacity:.55;pointer-events:none}.topbar{height:var(--topbar);background:color-mix(in srgb,var(--panel),transparent 4%);backdrop-filter:blur(16px);border-bottom:1px solid color-mix(in srgb,var(--border),transparent 40%);display:flex;align-items:center;gap:.75rem;padding:0 1rem;z-index:2}.topbar-info{min-width:0;flex:1}.topbar-title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-sub{font-size:.8125rem;color:var(--secondary)}.mobile-only{display:none}.messages{z-index:1;flex:1;overflow:auto;padding:1rem .75rem .5rem;scroll-behavior:smooth}.message-list{max-width:45.5rem;margin:0 auto;display:flex;flex-direction:column;gap:.25rem}.day-pill,.system-pill{align-self:center;border-radius:999px;background:rgba(0,0,0,.23);color:#fff;font-size:.75rem;padding:.28rem .65rem;margin:.35rem 0;box-shadow:var(--shadow)}.system-pill{max-width:min(34rem,92%);text-align:center}.message-row{display:flex;align-items:flex-end;gap:.45rem;max-width:78%;position:relative}.message-row.out{align-self:flex-end;flex-direction:row-reverse}.message-row.in{align-self:flex-start}.message-row .avatar{width:2.125rem;height:2.125rem;min-width:2.125rem;font-size:.75rem}.bubble{position:relative;border-radius:1rem;background:var(--bubble-in);padding:.42rem .62rem .34rem;box-shadow:0 1px 1px rgba(0,0,0,.12);line-height:1.32;word-wrap:break-word;white-space:pre-wrap;user-select:text}.out .bubble{background:var(--bubble-out)}.sender{font-weight:700;color:var(--primary);font-size:.85rem;margin-bottom:.1rem}.msg-text{font-size:1rem}.meta{float:right;margin-left:.5rem;margin-top:.25rem;font-size:.72rem;color:var(--secondary);display:inline-flex;align-items:center;gap:.15rem;line-height:1}.out .meta{color:color-mix(in srgb,var(--green),#1b1b1b 20%)}.checks{font-size:.85rem;color:var(--primary)}.file-card{display:flex;align-items:center;gap:.65rem;min-width:13rem;max-width:19rem;padding:.2rem 0}.file-icon{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700}.file-info{min-width:0}.file-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:.78rem;color:var(--secondary)}.image-msg{display:block;max-width:min(19rem,70vw);max-height:22rem;border-radius:.85rem;object-fit:cover}.video-msg{display:block;max-width:min(22rem,72vw);max-height:22rem;border-radius:.85rem;background:#000}.composer-wrap{z-index:2;padding:.5rem 1rem 1rem}.composer{max-width:45.5rem;margin:0 auto;display:flex;align-items:flex-end;gap:.5rem}.compose-box{min-height:3.375rem;flex:1;background:var(--panel);border-radius:1rem;box-shadow:var(--shadow);display:flex;align-items:flex-end;padding:.45rem .5rem}.compose-box textarea{flex:1;min-width:0;max-height:10rem;min-height:2.35rem;resize:none;border:0;background:transparent;padding:.52rem .35rem}.send-btn{background:var(--primary);color:#fff;box-shadow:var(--shadow)}.attach-menu{position:absolute;bottom:4.8rem;left:50%;transform:translateX(-50%);width:min(45.5rem,calc(100% - 2rem));display:none;z-index:4}.attach-card{width:15rem;background:var(--panel);border-radius:1rem;box-shadow:var(--shadow);padding:.4rem}.attach-card button,.context-menu button{width:100%;height:2.75rem;border-radius:.7rem;display:flex;align-items:center;gap:.75rem;padding:0 .8rem;text-align:left}.attach-card button:hover,.context-menu button:hover{background:var(--hover)}
.auth-shell{height:100%;display:grid;place-items:center;background:var(--bg);padding:1rem}.auth-card{width:min(25rem,100%);background:var(--panel);border-radius:1rem;box-shadow:var(--shadow);padding:2rem;text-align:center}.logo{width:6rem;height:6rem;border-radius:50%;margin:0 auto 1.25rem;background:linear-gradient(135deg,#6ec6ff,#168acd);display:grid;place-items:center;color:#fff;font-size:2.4rem;font-weight:800}.auth-card h1{margin:.2rem 0 .4rem}.auth-card p{margin:0 0 1.5rem;color:var(--secondary)}.field{display:grid;gap:.35rem;text-align:left;margin:.75rem 0}.field label{font-size:.82rem;color:var(--secondary)}.field input{height:3rem;border:1px solid var(--border);border-radius:.75rem;background:var(--bg);padding:0 .9rem}.auth-card .primary-btn{width:100%;margin-top:.8rem}.hint{margin-top:1rem;color:var(--secondary);font-size:.82rem}.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%) translateY(1rem);background:rgba(20,20,20,.86);color:#fff;border-radius:999px;padding:.65rem 1rem;opacity:0;pointer-events:none;transition:.2s;z-index:20}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.context-menu{position:fixed;display:none;z-index:15;width:12rem;background:var(--panel);border-radius:.85rem;box-shadow:var(--shadow);padding:.35rem;color:var(--text)}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.28);display:grid;place-items:center;z-index:18;padding:1rem}.modal{width:min(26rem,100%);background:var(--panel);border-radius:1rem;box-shadow:var(--shadow);padding:1.25rem}.modal h3{margin:.2rem 0 .4rem}.modal p{color:var(--secondary);line-height:1.45}.modal input{width:100%;height:2.75rem;border:1px solid var(--border);border-radius:.75rem;background:var(--bg);padding:0 .8rem;margin-top:.5rem}.modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}.backdrop{display:none}
@media (max-width:860px){.app{grid-template-columns:1fr}.sidebar{position:absolute;inset:0 auto 0 0;width:min(88vw,var(--sidebar));transform:translateX(-105%);transition:.22s ease;box-shadow:var(--shadow)}.sidebar.open{transform:translateX(0)}.backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:.22s;z-index:4}.backdrop.show{opacity:1;pointer-events:auto}.mobile-only{display:grid}.message-row{max-width:92%}.messages{padding-left:.35rem;padding-right:.35rem}.composer-wrap{padding:.45rem .5rem .7rem}.topbar{padding:0 .55rem}.admin-panel{display:none}} 

/* tweb structural pass: real WebK class hierarchy and bubble geometry */
:root{--surface-color:var(--panel);--background-color:var(--bg);--primary-color:var(--primary);--primary-color-rgb:var(--primary-rgb);--primary-text-color:var(--text);--secondary-text-color:var(--secondary);--section-box-shadow-color:rgba(16,35,47,.08);--message-background-color:var(--bubble-in);--message-out-background-color:var(--bubble-out);--message-primary-color:var(--primary);--message-primary-color-rgb:var(--primary-rgb);--message-out-primary-color:#4fae4e;--message-time-color:#8d969c;--message-out-time-color:#4fae4e;--message-status-color:#8d969c;--message-out-status-color:#4fae4e;--chat-input-size:3.375rem;--chat-input-padding:.8125rem;--chat-input-max-width:45.5rem;--messages-line-height:1.3125;--message-handhelds-margin:1.25rem;--reflect:1;--bubble-border-radius-big:1rem;--bubble-border-radius-medium:.375rem;--bubble-margin:.125rem;--max-content-width:100%}
.chatlist{list-style:none;margin:0;padding:.25rem .5rem 1rem;overflow:auto;flex:1}.chatlist-chat.row{height:4.5rem;border-radius:.75rem;display:flex;align-items:center;gap:.75rem;padding:.5rem;position:relative;transition:background-color .15s ease,transform .15s ease}.chatlist-chat.row:hover{background:var(--hover)}.chatlist-chat.row.active{background:var(--active)}.chatlist-chat.row.active .row-row{border-bottom-color:transparent}.row-row{min-width:0;flex:1;height:100%;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid color-mix(in srgb,var(--border),transparent 48%)}.row-title-row{display:flex;align-items:center;gap:.5rem;min-width:0}.row-title{font-weight:500;font-size:1rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}.row-time{font-size:.75rem;color:var(--secondary-text-color);white-space:nowrap}.row-subtitle{margin-top:.28rem;display:flex;align-items:center;gap:.45rem;color:var(--secondary-text-color);font-size:.875rem;line-height:1.15;min-width:0}.row-message{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}.sidebar-header{height:3.5rem}.search-wrap{padding:.375rem .8125rem .5rem}.search{height:2.5rem;background:var(--background-color);border-radius:1.375rem;border:2px solid transparent;transition:border-color .18s,background-color .18s}.search:focus{background:var(--surface-color);border-color:var(--primary-color)}
.bubbles{z-index:1;flex:1;overflow:auto;position:relative;padding:.625rem .5rem .375rem;scroll-behavior:smooth;--max-width:45.5rem}.bubbles-inner{width:100%;max-width:var(--chat-input-max-width);min-height:100%;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-end}.bubbles-date-group{position:relative;display:flex;flex-direction:column}.bubbles-group{position:relative;display:flex;align-items:flex-end;margin-bottom:var(--bubble-margin);max-width:100%;animation:messageIn .18s ease-out both}.bubbles-group.is-out{justify-content:flex-end}.bubbles-group.is-in{justify-content:flex-start;padding-left:2.65rem}.bubbles-group-avatar{position:absolute!important;left:.08rem;bottom:.125rem;width:2.125rem!important;height:2.125rem!important;min-width:2.125rem!important;font-size:.75rem;z-index:2}.bubble{--border-start-start-radius:var(--bubble-border-radius-big);--border-start-end-radius:var(--bubble-border-radius-big);--border-end-end-radius:var(--bubble-border-radius-big);--border-end-start-radius:var(--bubble-border-radius-big);position:relative;z-index:1;display:flex;max-width:min(85%,var(--chat-input-max-width));margin:0;user-select:none}.bubble.is-in{align-self:flex-start;--border-start-start-radius:var(--bubble-border-radius-medium);--border-end-start-radius:0}.bubble.is-out{align-self:flex-end;flex-direction:row-reverse;--message-background-color:var(--message-out-background-color);--message-primary-color:var(--message-out-primary-color);--message-time-color:var(--message-out-time-color);--message-status-color:var(--message-out-status-color);--border-start-end-radius:var(--bubble-border-radius-medium);--border-end-end-radius:0}.bubble-content-wrapper{display:flex;flex-direction:column;max-width:min(var(--max-content-width),var(--max-width,100%));position:relative}.bubble-content{position:relative;background:var(--message-background-color);border-start-start-radius:var(--border-start-start-radius);border-start-end-radius:var(--border-start-end-radius);border-end-end-radius:var(--border-end-end-radius);border-end-start-radius:var(--border-end-start-radius);box-shadow:0 1px 2px rgba(0,0,0,.16);padding:.3125rem .5rem .375rem;line-height:var(--messages-line-height);font-size:1rem;color:var(--primary-text-color);white-space:pre-wrap;word-break:break-word;overflow:hidden;user-select:text}.bubble.is-out .bubble-content{margin-left:auto}.bubble .name{font-weight:500;font-size:.875rem;line-height:1.15;color:rgb(var(--message-primary-color-rgb));margin:.05rem 0 .125rem}.message-text{display:inline}.bubble .time{float:right;margin:.375rem 0 0 .5rem;display:inline-flex;align-items:center;gap:.16rem;font-size:.6875rem;line-height:1;color:var(--message-time-color);white-space:nowrap;user-select:none}.bubble .checks{font-size:.8125rem;line-height:.75rem;color:var(--message-status-color);letter-spacing:-.18rem;padding-right:.18rem}.bubble-tail{position:absolute;bottom:-.5px;width:11px;height:20px;fill:var(--message-background-color);filter:drop-shadow(0 1px 1px rgba(0,0,0,.12));pointer-events:none}.bubble.is-in .bubble-tail{left:-8.4px}.bubble.is-out .bubble-tail{right:-8.4px;transform:translateY(1px) scaleX(-1)}.bubble.service{align-self:center;justify-content:center;max-width:min(34rem,92%);margin:.35rem auto}.bubble.service .bubble-content{background:rgba(0,0,0,.24);color:#fff;border-radius:.875rem;box-shadow:0 1px 2px rgba(0,0,0,.12);font-size:.75rem;padding:.28rem .65rem;text-align:center}.bubble.service .bubble-tail{display:none}.day-pill,.system-pill,.message-row{display:contents}.sender{display:none}.file-card{color:inherit;text-decoration:none}.image-msg{margin:-.125rem;max-width:min(20rem,68vw);border-radius:.8125rem}.video-msg{margin:-.125rem;max-width:min(22rem,70vw);border-radius:.8125rem}.bubble:active .bubble-content{filter:brightness(.985)}
.chat-input{display:flex;width:100%;max-width:100%;flex-direction:column;flex:0 0 auto;position:relative;z-index:2}.chat-input-empty-space{padding-top:.75rem}.chat-input-container{--padding-horizontal:var(--chat-input-padding);display:flex;align-items:flex-end;justify-content:center;max-width:var(--chat-input-max-width);margin:0 auto;width:100%;padding:0 var(--padding-horizontal) .75rem;position:relative;gap:.5rem}.rows-wrapper-wrapper{flex:1;min-width:0;background:var(--surface-color);border-radius:1rem;box-shadow:var(--shadow);overflow:hidden}.rows-wrapper.chat-input-wrapper{min-height:var(--chat-input-size);display:flex;align-items:flex-end;padding:.45rem .5rem}.rows-wrapper textarea{flex:1;min-width:0;min-height:2.35rem;max-height:10rem;resize:none;border:0;background:transparent;padding:.52rem .25rem;color:var(--primary-text-color)}.chat-input-secondary-button{flex:0 0 auto}.btn-send{width:var(--chat-input-size);height:var(--chat-input-size);border-radius:50%;background:var(--primary-color)!important;color:#fff!important;box-shadow:var(--shadow);flex:0 0 auto}.attach-menu{bottom:5.25rem}.composer-wrap,.composer,.compose-box{display:contents}
@keyframes messageIn{from{opacity:0;transform:translateY(.375rem) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:860px){.bubbles{padding-left:.25rem;padding-right:.25rem}.bubbles-inner{max-width:100%}.bubble{max-width:calc(100% - var(--message-handhelds-margin))}.bubbles-group.is-in{padding-left:2.35rem}.chat-input-container{padding-left:.5rem;padding-right:.5rem;padding-bottom:.5rem}.image-msg{max-width:72vw}.video-msg{max-width:76vw}}
/* reset legacy bubble styles after moving to tweb nested bubble-content */
.bubbles .bubble{background:transparent!important;padding:0!important;border-radius:0!important;box-shadow:none!important;line-height:var(--messages-line-height)!important;word-wrap:normal!important;white-space:normal!important}.bubbles .bubble-content{background:var(--message-background-color)!important;box-shadow:0 1px 2px rgba(0,0,0,.16)!important}.bubbles .bubble.service .bubble-content{background:rgba(0,0,0,.24)!important}
/* WebK polish: translucent topbar, denser sidebar, focused composer */
.topbar{background:color-mix(in srgb,var(--surface-color),transparent 6%)!important;box-shadow:0 1px 0 color-mix(in srgb,var(--border),transparent 50%);backdrop-filter:saturate(180%) blur(18px)}.chat:before{background-image:radial-gradient(circle at 17px 19px,rgba(255,255,255,.2) 1px,transparent 1.4px),radial-gradient(circle at 44px 43px,rgba(0,0,0,.07) 1px,transparent 1.4px),linear-gradient(135deg,rgba(255,255,255,.12),rgba(0,0,0,.03));background-size:64px 64px,64px 64px,100% 100%;opacity:.78}.sidebar{box-shadow:1px 0 0 rgba(0,0,0,.03)}.me-card{margin:.125rem .5rem .375rem;border-radius:.75rem;padding:.5rem}.chatlist-chat.row{margin:.0625rem 0}.chatlist-chat.row.active .row-title{font-weight:600}.rows-wrapper-wrapper:focus-within{box-shadow:0 1px 2px rgba(16,35,47,.14),0 0 0 2px rgba(var(--primary-rgb),.12)}.btn-send:hover{filter:brightness(.96)}.context-menu{backdrop-filter:blur(18px);background:color-mix(in srgb,var(--surface-color),transparent 4%)}

/* tweb chat background sync: DEFAULT_BACKGROUND_SLUG=pattern -> assets/img/pattern.svg */
:root{--chat-background-color:#99d2ec;--chat-background-pattern:url('/assets/img/pattern.svg');--chat-background-pattern-opacity:.42;--chat-background-pattern-blend:soft-light}
[data-theme=dark]{--chat-background-color:#0f1f2e;--chat-background-pattern-opacity:.18;--chat-background-pattern-blend:soft-light}
.chat{background:var(--chat-background-color)!important;overflow:hidden}.chat:before{content:"";position:absolute;inset:0;width:100%;height:100%;background-image:var(--chat-background-pattern)!important;background-repeat:repeat;background-size:510px auto!important;background-position:center top!important;opacity:var(--chat-background-pattern-opacity)!important;mix-blend-mode:var(--chat-background-pattern-blend);pointer-events:none;z-index:0}.chat:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 34%,rgba(0,0,0,.05));pointer-events:none;z-index:0}.topbar,.bubbles,.chat-input,.attach-menu{position:relative;z-index:1}
/* tweb default theme wallpaper colors from src/config/state.ts */
:root{--chat-background-color:#dbddbb;--chat-background-gradient:linear-gradient(135deg,#dbddbb 0%,#6ba587 35%,#d5d88d 68%,#88b884 100%);--chat-background-pattern-opacity:.5}
[data-theme=dark]{--chat-background-color:#4f5bd5;--chat-background-gradient:linear-gradient(135deg,#fec496 0%,#dd6cb9 35%,#962fbf 68%,#4f5bd5 100%);--chat-background-pattern-opacity:.28}.chat{background:var(--chat-background-gradient)!important}

/* tweb input + native emoji dropdown sync */
.icon.i-smile{mask-image:url('/tweb-assets/icons/smile.svg')}.icon.i-stickers-face{mask-image:url('/tweb-assets/icons/stickers_face.svg')}.icon.i-gifs{mask-image:url('/tweb-assets/icons/gifs.svg')}.icon.i-keyboard{mask-image:url('/tweb-assets/icons/keyboard.svg')}.icon.i-deleteleft{mask-image:url('/tweb-assets/icons/deleteleft.svg')}.icon.i-send2{mask-image:url('/tweb-assets/icons/send2.svg')}
.chat-input{--esg-transition:.2s cubic-bezier(.42,0,.58,1);--menu-background-color:color-mix(in srgb,var(--surface-color),transparent 2%);--menu-backdrop-filter:saturate(180%) blur(20px)}.rows-wrapper.chat-input-wrapper{gap:.125rem}.rows-wrapper.chat-input-wrapper textarea{font-size:1rem;line-height:1.375rem}.chat-input-secondary-button.btn-emoji,.chat-input-secondary-button.attach-file{color:var(--secondary-text-color);opacity:.92}.chat-input-secondary-button.btn-emoji:hover,.chat-input-secondary-button.attach-file:hover{color:var(--primary-text-color)}
.emoji-dropdown{--width:23.875rem;--height:26.25rem;display:flex;flex-direction:column;width:var(--width);height:var(--height);background:var(--surface-color);overflow:hidden;user-select:none;position:absolute;left:var(--chat-input-padding);bottom:5.125rem;max-width:calc(100% - 1rem);max-height:26.25rem;box-shadow:0 5px 10px 5px rgba(16,35,47,.14);z-index:4;border-radius:1.25rem;transition:transform var(--esg-transition),opacity var(--esg-transition);transform:scale(0);opacity:0;transform-origin:0 100%;backdrop-filter:var(--menu-backdrop-filter);background-color:var(--menu-background-color);pointer-events:none}.emoji-dropdown.active{opacity:1;transform:scale(1);pointer-events:auto}.emoji-container{width:100%;max-width:100%;overflow:hidden;height:100%;min-height:0}.emoji-dropdown .tabs-container{height:100%}.emoticons-container{min-height:100%;height:100%;display:flex;flex-direction:column;background:transparent!important}.emoticons-content{flex:1;overflow:auto;padding:.125rem 0 0;position:relative}.emoji-category{position:relative}.category-title{font-size:1rem;font-weight:700;line-height:1.1875rem;color:color-mix(in srgb,var(--primary-text-color),transparent 58%);padding:.75rem .875rem .375rem;width:100%;text-align:center}.emoji-padding .super-emojis{--esg-emoji-size:2.125rem;--esg-emoji-total-size:calc(var(--esg-emoji-size) + .5rem);display:grid;grid-template-columns:repeat(auto-fill,var(--esg-emoji-total-size));justify-content:space-between;position:relative;font-size:var(--esg-emoji-size);line-height:var(--esg-emoji-size);column-gap:.25rem;padding:0 .5rem}.super-emoji{display:inline-grid;place-items:center;padding:.25rem;line-height:inherit;border-radius:.625rem;cursor:pointer;user-select:none;vertical-align:middle;width:var(--esg-emoji-total-size);height:var(--esg-emoji-total-size);font-size:var(--esg-emoji-size);background:transparent;transition:background-color .12s,transform .12s}.super-emoji:hover{background:var(--hover)}.super-emoji:active{transform:scale(.88)}.emoji-tabs.menu-horizontal-div{height:3.0625rem;flex:0 0 3.0625rem;display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color);position:relative}.emoji-tabs .menu-horizontal-div-item{margin:0 .75rem;color:var(--secondary-text-color)}.emoji-tabs .menu-horizontal-div-item.active{color:var(--primary-color);background:rgba(var(--primary-rgb),.08)}.emoji-tabs-search{position:absolute;left:.5rem}.emoji-tabs-delete{position:absolute;right:.5rem}.emoticons-placeholder{height:100%;display:grid;place-items:center;text-align:center;padding:1.5rem;color:var(--secondary-text-color)}.emoticons-placeholder b{display:block;color:var(--primary-text-color);font-size:1.125rem;margin-bottom:.35rem}.emoticons-placeholder span{max-width:17rem;line-height:1.45}.emoji-dropdown .scrollable-y{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--secondary-text-color),transparent 65%) transparent}.emoji-dropdown .scrollable-y::-webkit-scrollbar{width:.35rem}.emoji-dropdown .scrollable-y::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--secondary-text-color),transparent 65%);border-radius:999px}
@media (max-width:560px){.emoji-dropdown{--width:calc(100vw - 1rem);--height:min(26.25rem,calc(100dvh - 9rem));left:.5rem;right:.5rem;bottom:4.75rem}.emoji-tabs .menu-horizontal-div-item{margin:0 .45rem}.emoji-padding .super-emojis{justify-content:space-around}}

/* tweb source-level bottom input structure */
:root{--chat-input-padding:.8125rem;--chat-input-inner-padding:.5rem;--chat-input-size:3.375rem;--chat-input-border-radius:1rem;--button-size:2.5rem;--button-horizontal-margin:.125rem;--line-height:1.3125;--messages-text-size:1rem;--messages-custom-emoji-size:1.25rem;--chat-input-box-shadow:0 1px 2px rgba(16,35,47,.12),0 8px 24px rgba(16,35,47,.08);--dark-primary-color:#2b83dc;--secondary-color:#c4c9cc;--light-primary-color:rgba(var(--primary-rgb),.12)}
.chat-input{display:flex;width:100%;max-width:100%;flex-direction:column;flex:0 0 auto;position:relative;z-index:2}.chat-input-empty-space{padding-top:12px}.chat-input-container{--padding-horizontal:var(--chat-input-padding);display:flex;align-items:flex-end;justify-content:center;max-width:var(--chat-input-max-width);margin:0 auto;width:100%;padding:0 var(--padding-horizontal) .75rem;flex:0 0 auto;position:relative}.rows-wrapper-wrapper{width:100%;display:flex;padding-inline-end:calc(var(--chat-input-size) + .5rem)}.rows-wrapper{--padding-vertical:.3125rem;--padding-horizontal:var(--chat-input-inner-padding);--padding:var(--padding-vertical) var(--padding-horizontal);width:100%;min-height:var(--chat-input-size);max-height:30rem;flex:0 0 auto;position:relative;z-index:3;border-radius:var(--chat-input-border-radius);border-end-end-radius:0;transform:translateX(0) scaleX(1);background:transparent!important;box-shadow:none!important;overflow:visible!important}.rows-wrapper:before{content:" ";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--chat-input-box-shadow);background-color:var(--surface-color);opacity:1}.rows-wrapper .input-tail{position:absolute;bottom:-1px;right:-8.4px;width:11px;height:20px;fill:var(--surface-color);transform:scaleX(-1);filter:drop-shadow(0 1px 1px rgba(0,0,0,.12));z-index:0}.rows-wrapper-row{display:flex;justify-content:space-between;align-items:center;width:100%;position:relative;background-color:transparent;border-radius:var(--chat-input-border-radius);padding:var(--padding);z-index:2}.new-message-wrapper{--send-as-size:1.875rem;--commands-size:2.375rem;align-items:flex-end;min-height:var(--chat-input-size)}.rows-wrapper .btn-icon{flex:0 0 auto;font-size:1.5rem;color:var(--secondary-text-color);margin-block:0 5px;margin-inline:var(--button-horizontal-margin);padding:0;width:var(--button-size);height:var(--button-size);border-radius:50%}.rows-wrapper .btn-icon.active{color:var(--primary-color)}.rows-wrapper .btn-icon:hover{background:var(--hover)}.input-message-container{--imc-padding-horizontal:.5625rem;width:1%;max-height:inherit;flex:1 1 auto;position:relative;overflow:hidden;align-self:center;min-height:calc(var(--chat-input-size) - var(--padding-vertical) * 2);display:flex;align-items:center;padding:0 var(--imc-padding-horizontal)}.input-message-input{--custom-emoji-size:var(--messages-custom-emoji-size);background:none!important;border:none!important;width:100%;padding:.5rem 0!important;overflow-y:auto;resize:none;outline:none;font-size:var(--messages-text-size);line-height:var(--line-height);max-height:min(10rem,calc(30rem - 2.5rem))!important;color:var(--primary-text-color);box-shadow:none!important;margin:0}.input-message-input::placeholder{color:transparent}.input-field-placeholder{position:absolute;left:var(--imc-padding-horizontal);top:50%;transform:translateY(-50%);color:#a2acb4;pointer-events:none;font-size:var(--messages-text-size);line-height:var(--line-height);opacity:1}.input-message-input:not(:placeholder-shown)+.input-field-placeholder,.input-message-input:focus+.input-field-placeholder{opacity:0}.btn-send-container{position:absolute;right:var(--padding-horizontal);bottom:.75rem;padding-bottom:0;display:flex;align-items:center;justify-content:center;z-index:3}.btn-send-container .btn-circle{width:var(--chat-input-size);height:var(--chat-input-size)}.btn-send{font-size:1.5rem;line-height:1.5rem;color:#fff!important;background-color:var(--primary-color)!important;z-index:3;opacity:1!important;box-shadow:var(--chat-input-box-shadow);border-radius:50%;display:grid;place-items:center}.btn-send:hover{background-color:var(--dark-primary-color)!important}.btn-send.disabled{pointer-events:none;background-color:var(--secondary-color)!important}.btn-send .animated-button-icon-icon{width:1.55rem;height:1.55rem}.fake-wrapper{position:absolute;z-index:-1;visibility:hidden}.fake-rows-wrapper{left:var(--padding-horizontal);top:0;width:calc(100% - var(--chat-input-size) - (var(--padding-horizontal) * 2) - .5rem)}.fake-selection-wrapper{position:absolute;top:0;width:28.75rem;max-width:calc(100% - (var(--chat-input-padding) * 2));opacity:0}.chat-input .emoji-dropdown{left:var(--chat-input-padding);bottom:calc(var(--chat-input-size) + 1.75rem)}.attach-menu{bottom:calc(var(--chat-input-size) + 1.75rem)!important}.rows-wrapper-wrapper:focus-within .rows-wrapper:before{box-shadow:0 1px 2px rgba(16,35,47,.14),0 0 0 2px rgba(var(--primary-rgb),.12),0 8px 24px rgba(16,35,47,.08)}
@media (max-width:860px){.chat-input-container{padding-left:.5rem;padding-right:.5rem;padding-bottom:.5rem}.rows-wrapper-wrapper{padding-inline-end:calc(var(--chat-input-size) + .5rem)}.btn-send-container{right:.5rem;bottom:.5rem}.chat-rows-wrapper{--padding-vertical:1px}.input-message-input{max-height:10rem!important}.chat-input .emoji-dropdown{left:.5rem;bottom:calc(var(--chat-input-size) + 1.25rem)}}
/* cleanup previous simplified composer rules so source input wins */
.chat-input .rows-wrapper-wrapper{background:transparent!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;min-width:0}.chat-input .rows-wrapper.chat-input-wrapper{display:block!important;align-items:initial!important;gap:0!important;padding:0!important}.chat-input .rows-wrapper textarea.input-message-input{flex:initial;min-width:0;min-height:auto}.chat-input .compose-box,.chat-input .composer,.chat-input .composer-wrap{display:initial}.chat-input .chat-input-secondary-button.btn-emoji,.chat-input .chat-input-secondary-button.attach-file{opacity:1}

/* playwright mobile fixes */
@media (max-width:860px){
  html,body,#root{height:100%;height:100dvh;overscroll-behavior:none}
  .topbar{height:3.5rem;min-height:3.5rem;padding-left:.5rem;padding-right:.75rem}
  .topbar .avatar.small{width:2.25rem;height:2.25rem;min-width:2.25rem;font-size:.8125rem}
  .topbar-title{font-size:1rem;line-height:1.2}.topbar-sub{font-size:.8125rem;line-height:1.15}
  .bubbles{padding-left:.375rem;padding-right:.875rem;padding-bottom:.375rem}
  .bubbles-group.is-out{padding-right:.45rem}.bubbles-group.is-in{padding-left:2.45rem;padding-right:.45rem}
  .bubble{max-width:calc(100% - 1.5rem)!important}.bubble.is-out .bubble-tail{right:-7.4px}.bubble.is-in .bubble-tail{left:-7.4px}
  .chat-input-container{padding-bottom:max(.5rem,env(safe-area-inset-bottom));align-items:flex-end}
  .chat-input-empty-space{padding-top:.5rem}.chat-input{padding-bottom:0}
  .rows-wrapper-wrapper{padding-inline-end:calc(var(--chat-input-size) + .5rem);width:100%}.rows-wrapper{min-width:0}.rows-wrapper .input-tail{right:-7.4px;bottom:0}
  .btn-send-container{bottom:max(.5rem,env(safe-area-inset-bottom))}
  .emoji-dropdown{bottom:calc(var(--chat-input-size) + max(1.25rem,env(safe-area-inset-bottom) + .75rem))!important;border-radius:1.125rem;max-height:calc(100dvh - 8.5rem)}
}

/* tweb-like grouped message tails */
.bubble:not(.is-group-last) .bubble-tail{display:none!important}.bubble.is-out:not(.is-group-last){--border-end-end-radius:var(--bubble-border-radius-medium)}.bubble.is-in:not(.is-group-last){--border-end-start-radius:var(--bubble-border-radius-medium)}.bubble.is-out.is-group-first{--border-start-end-radius:var(--bubble-border-radius-big)}.bubble.is-in.is-group-first{--border-start-start-radius:var(--bubble-border-radius-big)}.bubbles-group:not(.bubbles-group-last) .bubbles-group-avatar{display:none}.bubbles-date-group+.bubbles-date-group .bubbles-group:not(.bubbles-group-last){margin-bottom:1px}.bubbles-group-last{margin-bottom:.25rem}

/* playwright fix: dropdowns follow growing mobile composer height */
.chat-input .emoji-dropdown{bottom:calc(100% + .5rem)!important}.chat .attach-menu{bottom:calc(var(--chat-input-size) + 1.25rem)!important}@media (max-width:860px){.chat-input .emoji-dropdown{bottom:calc(100% + .5rem)!important}.chat .attach-menu{bottom:calc(100% + .5rem)!important}}


/* 2026-05-19: TWeb-faithful bottom composer fix.
   Keep input as one white rounded bubble with a right tail and a separate circular action button. */
:root{--chat-input-size:3.375rem;--chat-input-border-radius:1rem;--chat-input-inner-padding:.5rem;--chat-input-box-shadow:0 1px 2px rgba(16,35,47,.12),0 8px 24px rgba(16,35,47,.08)}
.icon.i-microphone{mask-image:url('/tweb-assets/icons/microphone.svg')}
.chat-input{position:relative;z-index:2;flex:0 0 auto;width:100%;padding-bottom:0!important}
.chat-input-empty-space{padding-top:.5rem!important}
.chat-input-container{--padding-horizontal:var(--chat-input-padding,.8125rem);position:relative;display:flex!important;align-items:flex-end!important;justify-content:center!important;width:100%;max-width:var(--chat-input-max-width,45.5rem);margin:0 auto;padding:0 var(--padding-horizontal) max(.75rem,env(safe-area-inset-bottom))!important;gap:0!important}
.chat-input .rows-wrapper-wrapper{display:flex!important;flex:1 1 auto!important;min-width:0!important;width:auto!important;padding-inline-end:calc(var(--chat-input-size) + .5rem)!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
.chat-input .rows-wrapper.chat-input-wrapper{--padding-vertical:.3125rem;--padding-horizontal:var(--chat-input-inner-padding,.5rem);--padding:var(--padding-vertical) var(--padding-horizontal);display:block!important;position:relative!important;width:100%!important;min-height:var(--chat-input-size)!important;max-height:30rem!important;padding:0!important;background:transparent!important;border-radius:var(--chat-input-border-radius)!important;border-end-end-radius:0!important;box-shadow:none!important;overflow:visible!important;z-index:3}
.chat-input .rows-wrapper.chat-input-wrapper:before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--surface-color);box-shadow:var(--chat-input-box-shadow);z-index:0}
.chat-input .rows-wrapper .input-tail{display:block!important;position:absolute;right:-8.4px!important;bottom:-1px!important;width:11px!important;height:20px!important;fill:var(--surface-color)!important;transform:scaleX(-1)!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12));z-index:1;pointer-events:none}
.chat-input .rows-wrapper-row{position:relative;z-index:2;display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%;min-height:var(--chat-input-size);padding:var(--padding)!important;background:transparent!important;border-radius:var(--chat-input-border-radius)}
.chat-input .input-message-container{position:relative;display:flex!important;align-items:center!important;flex:1 1 auto!important;width:1%!important;min-width:0!important;min-height:calc(var(--chat-input-size) - var(--padding-vertical) * 2);padding:0 .5625rem!important;overflow:hidden;align-self:center}
.chat-input textarea.input-message-input{display:block!important;flex:1 1 auto!important;width:100%!important;min-width:0!important;min-height:calc(var(--messages-line-height,1.3125) * 1rem + 1rem)!important;max-height:min(10rem,calc(100dvh - 12rem))!important;margin:0!important;padding:.5rem 0!important;border:0!important;outline:0!important;resize:none!important;background:transparent!important;box-shadow:none!important;overflow-y:auto!important;color:var(--primary-text-color)!important;font-size:var(--messages-text-size,1rem)!important;line-height:var(--messages-line-height,1.3125)!important}
.chat-input textarea.input-message-input::placeholder{color:transparent!important}.chat-input .input-field-placeholder{position:absolute;left:.5625rem;top:50%;transform:translateY(-50%);font-size:var(--messages-text-size,1rem);line-height:var(--messages-line-height,1.3125);color:#a2acb4;pointer-events:none;transition:opacity .12s ease}.chat-input textarea.input-message-input:not(:placeholder-shown)+.input-field-placeholder,.chat-input textarea.input-message-input:focus+.input-field-placeholder{opacity:0}
.chat-input .chat-input-secondary-button{flex:0 0 auto!important;width:2.5rem!important;height:2.5rem!important;margin:0 .125rem .25rem!important;color:var(--secondary-text-color)!important;opacity:.92}.chat-input .chat-input-secondary-button:hover{color:var(--primary-text-color)!important;background:var(--hover)!important}
.chat-input .btn-send-container{position:absolute!important;right:var(--padding-horizontal)!important;bottom:max(.75rem,env(safe-area-inset-bottom))!important;display:flex!important;align-items:center!important;justify-content:center!important;width:var(--chat-input-size)!important;height:var(--chat-input-size)!important;z-index:4}
.chat-input .btn-send{display:grid!important;place-items:center!important;width:var(--chat-input-size)!important;height:var(--chat-input-size)!important;border-radius:50%!important;background:var(--primary-color)!important;color:#fff!important;box-shadow:var(--chat-input-box-shadow)!important;opacity:1!important}
.chat-input .btn-send .icon{width:1.65rem;height:1.65rem}.chat-input:not(.has-text) .btn-send .i-send{mask-image:url('/tweb-assets/icons/microphone.svg')}
.chat-input .fake-wrapper{display:none!important}.chat-input .emoji-dropdown{bottom:calc(100% + .5rem)!important}.chat .attach-menu{bottom:calc(var(--chat-input-size) + 1.25rem)!important}
@media (max-width:860px){.chat-input-container{--padding-horizontal:.5rem;padding-left:.5rem!important;padding-right:.5rem!important;padding-bottom:max(.5rem,env(safe-area-inset-bottom))!important}.chat-input .rows-wrapper-wrapper{padding-inline-end:calc(var(--chat-input-size) + .5rem)!important}.chat-input .btn-send-container{right:.5rem!important;bottom:max(.5rem,env(safe-area-inset-bottom))!important}.chat-input .rows-wrapper.chat-input-wrapper{--padding-vertical:1px}.chat-input .rows-wrapper .input-tail{right:-7.4px!important;bottom:0!important}}