/* ========================================================================
   Legacy NEO compatibility layer — 2026-09-16
   ------------------------------------------------------------------------
   The old NEO skin previously owned the rail, chat list, chat header,
   message bubbles, composer and Settings. Those rules were intentionally
   removed: the active application shell is now owned by apple_ui.css +
   final_ui.css only. Keep this file limited to feature-specific utilities
   that do not define primary app geometry or visual language.
   ======================================================================== */

html,body{color:var(--label-primary,var(--text));}
body.has-app{background:var(--background-primary,var(--bg))!important;}

/* Legacy rail is not part of the current Telegram-style desktop shell. */
.app-rail{display:none!important;width:0!important;min-width:0!important;}

/* Lumo utility panels: neutral surfaces, no neon/radial styling. */
.lumo-tools{z-index:1200}
.lumo-tools-backdrop{background:rgba(0,0,0,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lumo-tools-card{border:1px solid var(--separator,var(--line));border-radius:16px;background:var(--surface-primary,var(--panel));box-shadow:0 18px 54px rgba(0,0,0,.24)}
.lumo-tools-kicker{color:var(--accent);font-weight:650}
.lumo-tools-head h3{color:var(--label-primary,var(--text))}
.lumo-tools-body{max-height:calc(min(78vh,760px) - 88px);overflow:auto}
.tools-search{border:1px solid var(--separator,var(--line));background:var(--background-secondary,var(--panel-2));color:var(--label-primary,var(--text));outline:none}
.tools-search:focus{border-color:var(--accent)}
.tools-row{border:0;background:transparent;color:var(--label-primary,var(--text))}
.tools-row:hover{background:var(--hover)}
.tools-avatar{color:#fff;font-weight:700;box-shadow:none}
.tools-row-icon{background:var(--accent-muted);color:var(--accent)}
.tools-row-text b{color:inherit}.tools-row-text small,.tools-empty,.tools-empty.hero span,.tools-call-hero span{color:var(--label-secondary,var(--muted))}
.tools-empty.hero strong{color:var(--label-primary,var(--text))}
.tools-call-orb{color:#fff;background:var(--accent);box-shadow:none}
.tools-call-hero span{font-size:12px;line-height:1.5}

/* Auto-delete status colors, without glow. */
[data-ttl="5"]{color:#ff9f0a!important}
[data-ttl="30"]{color:#bf5af2!important}
[data-ttl="300"]{color:#32ade6!important}

.icon-btn svg,.backBtn svg{display:block}

/* Lightweight interaction utilities retained from the old layer. */
@keyframes react-pop{0%{transform:scale(.72);opacity:0}100%{transform:scale(1);opacity:1}}
.react-chip,.msg-reacts span,.reaction-badge{animation:react-pop .16s ease-out both}
.dot.online,.status-dot.online{background:var(--success,var(--green))}

#toast{background:color-mix(in srgb,var(--surface-primary,var(--panel)) 94%,transparent)!important;color:var(--label-primary,var(--text))!important;border:1px solid var(--separator,var(--line));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:12px;box-shadow:0 10px 32px rgba(0,0,0,.22)}
#reconnect{background:var(--destructive,var(--danger))!important;color:#fff!important;font-weight:600}

#msgs,#chatList,.tools-list{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--label-tertiary,var(--muted)) 45%,transparent) transparent}
#msgs::-webkit-scrollbar,#chatList::-webkit-scrollbar{width:6px}
#msgs::-webkit-scrollbar-thumb,#chatList::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--label-tertiary,var(--muted)) 45%,transparent);border-radius:6px}