/* Whiteblock shell — chrome + layout
   ====================================
   Provides ONLY shell-level styles. Section CSS lives in /sections/{name}/styles.css
   and is loaded with data-section="{name}" so the router can remove it on teardown.
*/

/* ============================================================
   FALLBACK TOKENS — para secciones que no cargan wb-tokens-{primitive,semantic}.css
   (ej. /juego/). :where(:root) tiene specificity 0 → cualquier regla real
   (incluido [data-theme="light"]) gana sin importar el orden de carga.
   ============================================================ */
:where(:root){
  --bg: #0a0a0a;
  --surface: #111111;
  --surface2: #1a1a1a;
  --surface3: #2a2a2a;
  --border: #2a2a2a;
  --border2: #333333;
  --text: #e0e0e0;
  --text2: #bbbbbb;
  --muted: #6b7280;
  --dim: #444444;
  --white: #ffffff;
  --accent: #1700FF;
  --accent-h: #1300CC;
  --accent-bg: rgba(23,0,255,.10);
  --accent-border: rgba(23,0,255,.30);
  --accent2: #3838FF;
  --red: #ef4444;
  --red-bg: rgba(239,68,68,.10);
  --green: #22c55e;
  --green-bg: rgba(34,197,94,.10);
  --yellow: #eab308;
  --yellow-bg: rgba(234,179,8,.10);
  --purple: #a855f7;
  --purple-bg: rgba(168,85,247,.10);
  --cyan: #06b6d4;
  --blue: #1700FF;
  --glass-bg: rgba(20,22,30,.78);
  --glass-bg-strong: rgba(20,22,30,.92);
  --glass-border: rgba(255,255,255,.08);
  --glass-blur: blur(20px) saturate(180%);
  --glass-shadow: 0 16px 48px rgba(8,4,32,.55);
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 4px 12px rgba(8,4,32,.35);
  --shadow-lg: 0 12px 40px rgba(12,6,48,.55);
  --surface-hover: rgba(255,255,255,.015);
  --modal-overlay: rgba(0,0,0,.60);
  --transition: .15s ease;
  --wb-gray-300: #cbd5e1;
  --wb-gray-400: #94a3b8;
  --wb-gray-500: #6b7280;
  --wb-gray-600: #475569;
  --wb-gray-700: #2a2a2a;
  --wb-gray-800: #1a1a1a;
  --wb-gray-900: #111111;
  --wb-black: #0a0a0a;
  --wb-white: #ffffff;
  --wb-text-xs: 11px;
  --wb-text-sm: 12px;
  --wb-text-base: 13px;
  --wb-text-md: 14px;
  --wb-text-lg: 16px;
  --wb-text-xl: 20px;
  --wb-radius-sm: 4px;
  --wb-radius-md: 6px;
  --wb-radius-lg: 8px;
  --wb-radius-xl: 12px;
  --wb-radius-2xl: 16px;
}

/* ---------- Cossette Titre (used by chrome titles + sections) ---------- */
@font-face{font-family:'Cossette Titre';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/CossetteTitre-Regular.ttf') format('truetype');}
@font-face{font-family:'Cossette Titre';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/CossetteTitre-Bold.ttf') format('truetype');}

/* ---------- Shell layout ---------- */
html,body{margin:0;padding:0;height:100%;}
body{display:flex;flex-direction:column;min-height:100dvh;font-family:'Geist','Inter Tight',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);}

/* ---------- Native-feel touch refinements (PWA mobile) ---------- */
/* Eliminar tap highlight azul iOS por defecto en TODOS los elementos */
*{ -webkit-tap-highlight-color:transparent; }

/* Eliminar 300ms tap delay legacy en clickables. touch-action:manipulation
   permite scroll/zoom pero suprime el double-tap-to-zoom timing. */
button, a, input, select, textarea, label, [role="button"], [onclick]{
  touch-action: manipulation;
}

/* Disable pull-to-refresh nativo (overscroll-behavior:none en body en mobile).
   La PWA no necesita refresh — los datos vienen vía API/SW. */
@media(max-width:768px){
  html, body{ overscroll-behavior:none; }
}

/* Smooth scroll inertia natural iOS para containers scrollables. -webkit-overflow-scrolling
   es legacy pero aún relevante en algunos WebKit. overscroll-behavior:contain evita
   que el scroll del child se propague al body (rubber-band scroll fix). */
.content, .main-content, #content, #gestionContent, .scrollable,
[id$="Content"], .drawer-body, .modal{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Prevent text selection en UI chrome y elementos de control. NO afecta a
   contenido editable (inputs, textarea, [contenteditable]). */
.wb-shell-chrome, .game-hud, .game-hud-cluster, .ghud-arrow, .ghud-btn,
.settings-card-icon, .settings-section-label, .topbar, .sidebar, .sb-nav{
  user-select: none;
  -webkit-user-select: none;
}

/* Asegurar que inputs SÍ permiten selección y caret */
input, textarea, [contenteditable]{
  user-select: text;
  -webkit-user-select: text;
}

/* ---------- Skip-to-content link (accesibilidad: aparece al recibir foco con Tab) ---------- */
.wb-skip-link{
  position:absolute;top:-100px;left:8px;z-index:9999;
  background:var(--accent);color:#fff;
  padding:8px 16px;border-radius:var(--wb-radius-md);
  font-weight:600;text-decoration:none;font-size:var(--wb-text-md);
  transition:top var(--transition);
}
.wb-skip-link:focus,.wb-skip-link:focus-visible{top:8px;outline:none;box-shadow:0 0 0 3px var(--accent-bg);}

/* Theme tokens viven en /assets/wb-tokens-{primitive,semantic}.css (cargados antes en _shell-head.html) */
#wb-section-content{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}

/* When chrome is visible, sections that were sized at 100dvh need to subtract chrome height.
   Sections opt in by living inside #wb-section-content (which is flex:1). */
@media(min-width:769px){
  /* Si la sección declara su propia min-height:100dvh (facturas/share legacy),
     el height calc se ignora porque min-height gana. Forzamos min/max iguales
     a la altura calculada para que .app NO desborde body y el chrome sticky
     no acabe solapando el topbar de la sección. */
  #wb-section-content > .app{
    height: calc(100dvh - 52px) !important;
    min-height: calc(100dvh - 52px) !important;
    max-height: calc(100dvh - 52px) !important;
  }
  #wb-section-content > .app > .sidebar{ top: 52px !important; height: calc(100dvh - 52px) !important; }
  /* Sections may have a sticky mobile-header; on desktop chrome replaces it */
  #wb-section-content > .mobile-header{ display:none !important; }
  /* Hide redundant logos in section sidebars — chrome already shows it */
  #wb-section-content > .app > .sidebar > .sb-header{ display:none !important; }
}

/* Mobile: layout 100% explícito con position:fixed.
   - html/body: viewport completo, sin scroll propio
   - chrome: arriba, height = 48 + safe-top, z-index máximo (NADA pasa por encima)
   - #wb-section-content: bajo el chrome hasta el bottom del viewport (visualmente
     cubre el gesture bar para que no quede franja gris). El padding-bottom va
     dentro de los scrollers para que los items respiren sobre el gesture bar.
   - Modales/drawers/overlays full-screen: idéntico anclaje (top:chrome.bottom,
     bottom:0 al viewport). Nunca tapan al chrome. */
/* Móvil landscape — overlay de "rota el dispositivo" como fallback si iOS Safari
   ignora el manifest orientation:portrait. En landscape, viewport-width pasa a ser
   el lado largo del móvil (~844px en iPhone), así que NO usamos max-width.
   max-height:500px detecta móvil real (no tablet/iPad).
   `body:not([data-embedded])` excluye iframes — cuando /share/ se embebe en el
   modal del juego (Cap. Ar Chivo), el iframe puede ser pequeño y horizontal
   sin que sea un dispositivo en landscape real. */
@media (orientation: landscape) and (max-height: 500px){
  html:not([data-embedded]) body::before{
    content:"";
    position:fixed;inset:0;z-index:99999;
    background:var(--bg);
    pointer-events:auto;
  }
  html:not([data-embedded]) body::after{
    content:"📱  Rota el dispositivo a vertical";
    position:fixed;inset:0;z-index:100000;
    display:flex;align-items:center;justify-content:center;
    color:var(--text);font-family:'Geist','Inter Tight',system-ui,sans-serif;
    font-size:var(--wb-text-lg);font-weight:600;letter-spacing:.2px;
    padding:24px;text-align:center;
    pointer-events:none;
  }
}

/* Embed mode (iframe). El modal que nos enmarca ya tiene cabecera + cierre,
   así que escondemos el chrome de la sección y dejamos toda la altura para
   el contenido de /share/, /app/, etc. */
html[data-embedded] .wb-shell-chrome{ display:none !important; }
html[data-embedded] #wb-section-content{
  top:0 !important;
  inset:0 !important;
}

@media(max-width:768px){
  html{
    background:var(--bg) !important;
    /* 100vh !important — NO 100% — porque html con 100% en iOS PWA fullscreen
       incluye la safe-area zone, pintando ~50px extra de bg que se ven como
       "banda". 100vh limita html a la altura del viewport visible, sin zona
       extra. !important previene que cualquier otra regla pise esto. */
    height:100vh !important;
    overflow:hidden !important;
  }
  body{
    position:fixed !important;
    inset:0 !important;
    height:100vh !important;
    min-height:0 !important;
    overflow:hidden !important;
    display:block;
    background:var(--bg) !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box;
  }
  #wb-section-content{
    bottom:calc(-1 * env(safe-area-inset-bottom, 0px)) !important;
    height:auto !important;
  }
  .wb-shell-chrome{
    position:fixed !important;
    top:0; left:0; right:0;
  }
  #wb-section-content{
    position:fixed !important;
    top:calc(48px + env(safe-area-inset-top, 0px));
    /* Extender por debajo del safe-area-inset-bottom — el contenido cubre
       hasta el borde físico de la pantalla. */
    bottom:calc(-1 * env(safe-area-inset-bottom, 0px));
    left:0; right:0;
    flex:none;
    overflow:hidden;
  }
  #wb-section-content > .app{
    display:flex !important;
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    overflow:hidden !important;
  }
  /* .main / main rellenan el .app verticalmente */
  #wb-section-content > .app > .main,
  #wb-section-content > .app > main{
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    overflow:hidden !important;
  }
  /* Scroll containers rellenan .main verticalmente. padding-bottom:0 para
     eliminar la franja gris al fondo — el home indicator de iOS es translúcido
     y deja ver el contenido detrás sin tapar lectura. */
  #wb-section-content .content,
  #wb-section-content .main-content{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:100% !important;
    padding-bottom:0 !important;
  }
}

/* ---------- Chrome bar ---------- */
/* Reset auto-aplicado a TODO el chrome: garantiza box-sizing border-box y
   sin focus-ring por click (solo keyboard via :focus-visible).
   Sin esto, secciones que no tienen reset propio (como gestion) heredan
   browser defaults y los botones del chrome se renderizan más grandes. */
.wb-shell-chrome,
.wb-shell-chrome *,
.wb-shell-chrome *::before,
.wb-shell-chrome *::after { box-sizing: border-box; }
.wb-shell-chrome a:focus,
.wb-shell-chrome button:focus { outline: none; }
.wb-shell-chrome a:focus-visible,
.wb-shell-chrome button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.wb-shell-chrome{
  position:sticky; top:0; left:0; right:0; z-index:1000;
  height:52px; box-sizing:border-box; flex-shrink:0;
  background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:18px;
  padding:0 18px;
  font-family:'Geist','Inter Tight',system-ui,sans-serif;
  color:var(--text);
}
[data-theme="light"] .wb-shell-chrome{ background:var(--surface); border-bottom-color:var(--border); color:var(--text); }

.wb-shell-logo{ display:inline-flex; align-items:center; height:100%; }
.wb-shell-logo img{ height:24px; width:auto; }
.wb-shell-logo .logo-light{ display:none; }
[data-theme="light"] .wb-shell-logo .logo-dark{ display:none; }
[data-theme="light"] .wb-shell-logo .logo-light{ display:inline-block; }

.wb-shell-tabs{ display:flex; align-items:center; gap:2px; }
.wb-shell-tab{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:8px;
  color:var(--wb-gray-400); text-decoration:none;
  font-size:var(--wb-text-xs); font-weight:400;
  text-transform:uppercase; letter-spacing:.5px;
  font-family:'Cossette Titre',sans-serif;
  transition:background .12s, color .12s;
}
.wb-shell-tab i{ font-size:.85rem; width:14px; min-width:14px; text-align:center; }
.wb-shell-tab-iconly{ padding:6px 10px; }
.wb-shell-tab-iconly i{ font-size:.95rem; }
/* El atributo HTML `hidden` no surte efecto sobre .wb-shell-tab porque la
   regla del componente fija display:inline-flex con la misma especificidad.
   Forzamos display:none cuando un tab esté marcado hidden (lo usan los
   .wb-admin-only que solo aparecen para role==='admin'). */
.wb-shell-tab[hidden]{ display:none !important; }
/* Juego tab solo visible en Modo niño (body.wb-kid-mode lo activa) */
.wb-shell-tab[data-tab="juego"]{ display:none; }
body.wb-kid-mode .wb-shell-tab[data-tab="juego"]{ display:inline-flex; }
/* Spotify ACL: clientes solo ven Lofi. Admin/empleado ven Spotify+Lofi.
   `body.wb-no-spotify` lo activa wb-shell.js cuando role !== admin/empleado. */
body.wb-no-spotify .wb-shell-mode-bar,
body.wb-no-spotify #wb-shell-spot-connect,
body.wb-no-spotify #wb-shell-spot-pane,
body.wb-no-spotify .wb-shell-spot-fullscreen,
body.wb-no-spotify #wb-shell-mode-spotify { display: none !important; }
.wb-shell-tab:hover{ background:var(--surface2); color:var(--text); }
[data-theme="light"] .wb-shell-tab{ color:var(--wb-gray-500); }
[data-theme="light"] .wb-shell-tab:hover{ background:var(--surface2); color:var(--text); }

/* Active tab — highlighted via body[data-active-section] */
body[data-active-section="app"] .wb-shell-tab[data-tab="app"],
body[data-active-section="facturas"] .wb-shell-tab[data-tab="facturas"],
body[data-active-section="share"] .wb-shell-tab[data-tab="share"],
body[data-active-section="gestion"] .wb-shell-tab[data-tab="gestion"],
body[data-active-section="juego"] .wb-shell-tab[data-tab="juego"]{
  background:rgba(255,255,255,.08); color:#fff;
}
[data-theme="light"] body[data-active-section="app"] .wb-shell-tab[data-tab="app"],
[data-theme="light"] body[data-active-section="facturas"] .wb-shell-tab[data-tab="facturas"],
[data-theme="light"] body[data-active-section="share"] .wb-shell-tab[data-tab="share"],
[data-theme="light"] body[data-active-section="gestion"] .wb-shell-tab[data-tab="gestion"],
[data-theme="light"] body[data-active-section="juego"] .wb-shell-tab[data-tab="juego"]{
  background:rgba(0,0,0,.06); color:var(--text);
}

/* Sections wrapper (envuelve el button mobile + las tabs desktop) */
.wb-shell-sections-wrap{ position:relative; display:flex; align-items:center; }

/* Botón "secciones" — solo visible en mobile, oculta en desktop */
.wb-shell-sections-btn{
  display:none;
  align-items:center; gap:8px;
  padding:6px 12px; border-radius:8px;
  background:transparent; border:1px solid var(--border);
  color:var(--text); cursor:pointer;
  font-family:'Cossette Titre',sans-serif;
  font-size:var(--wb-text-xs); font-weight:400;
  text-transform:uppercase; letter-spacing:.5px;
  transition:background .12s, border-color .12s;
}
.wb-shell-sections-btn:hover{ background:var(--surface2); border-color:var(--dim); }
.wb-shell-sections-btn[aria-expanded="true"]{ background:var(--accent-bg); border-color:var(--accent-border); color:var(--accent); }
.wb-shell-sections-icon{ font-size:1rem; transition:transform .15s; }

/* Mobile-only items dentro del account dropdown (música, chat) */
.wb-shell-panel-menu .wb-shell-mobile-only{ display:none; }

.wb-shell-actions{ margin-left:auto; display:flex; align-items:center; gap:2px; }

.wb-shell-icon{
  width:34px; height:34px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--wb-gray-400);
  cursor:pointer; font-size:.95rem; text-decoration:none;
  transition:background .12s, color .12s;
  position:relative;
}
/* Mismo patrón que .wb-shell-tab[hidden]: el atributo `hidden` no surte
   efecto frente a `display:inline-flex` por igualdad de especificidad.
   Forzamos display:none explícito. Aplica al botón ✨ asistente IA y
   cualquier otro .wb-shell-icon con hidden. */
.wb-shell-icon[hidden]{ display:none !important; }
.wb-shell-icon:hover{ background:var(--surface2); color:var(--text); }
[data-theme="light"] .wb-shell-icon{ color:var(--wb-gray-500); }
[data-theme="light"] .wb-shell-icon:hover{ background:var(--surface2); color:var(--text); }

.wb-shell-dot{
  position:absolute; top:6px; right:6px;
  width:7px; height:7px; border-radius:50%;
  background:#fff; border:2px solid var(--bg);
}
[data-theme="light"] .wb-shell-dot{ background:var(--text); border-color:#ffffff; }

/* Numeric badge attached to a wb-shell-icon (notif/chat counts) */
.wb-shell-badge{
  position:absolute; top:2px; right:2px;
  background:var(--red); color:#fff;
  font-size:9px; font-weight:700;
  min-width:16px; height:16px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 4px;
  border:2px solid var(--surface);
}
.wb-shell-badge[hidden]{ display:none; }
[data-theme="light"] .wb-shell-badge{ border-color:#ffffff; }

/* Pop containers */
.wb-shell-pop{ position:relative; }

.wb-shell-panel{
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--glass-bg-strong); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg); padding:10px;
  box-shadow:var(--glass-shadow);
  width:230px; z-index:1001;
}
.wb-shell-panel[hidden]{ display:none; }
[data-theme="light"] .wb-shell-panel{
  background:var(--glass-bg-strong);
  border-color:var(--glass-border);
  box-shadow:var(--glass-shadow);
}

/* Music station selector — minimal: name flanked by chevrons, no chip */
.wb-shell-station{
  display:flex; align-items:center; gap:4px;
  padding:2px 0 8px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:10px;
}
[data-theme="light"] .wb-shell-station{ border-bottom-color:rgba(0,0,0,.06); }
.wb-shell-station-name{
  flex:1; text-align:center;
  font-size:11.5px; font-weight:500; letter-spacing:.2px;
  color:rgba(255,255,255,.78);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
[data-theme="light"] .wb-shell-station-name{ color:rgba(0,0,0,.7); }
.wb-shell-nav{
  background:transparent; border:none; color:rgba(255,255,255,.4);
  cursor:pointer; padding:4px 6px; border-radius:4px;
  font-size:.7rem; transition:color .12s, background .12s;
}
.wb-shell-nav:hover{ color:rgba(255,255,255,.95); background:rgba(255,255,255,.06); }
[data-theme="light"] .wb-shell-nav{ color:rgba(0,0,0,.35); }
[data-theme="light"] .wb-shell-nav:hover{ color:rgba(0,0,0,.85); background:rgba(0,0,0,.04); }

.wb-shell-controls{ display:flex; align-items:center; gap:10px; }
.wb-shell-play{
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--bg); border:none;
  cursor:pointer; font-size:.62rem;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .12s, background .12s;
  flex-shrink:0;
}
.wb-shell-play:hover{ background:#fff; transform:scale(1.06); }
.wb-shell-play:active{ transform:scale(.94); }
.wb-shell-play:disabled{ opacity:.4; cursor:wait; transform:none; }
[data-theme="light"] .wb-shell-play{ background:var(--text); color:#fff; }
[data-theme="light"] .wb-shell-play:hover{ background:#000; }

.wb-shell-vol{ flex:1; display:flex; align-items:center; gap:6px; }
.wb-shell-vol i{ color:rgba(255,255,255,.35); font-size:.66rem; width:10px; text-align:center; }
[data-theme="light"] .wb-shell-vol i{ color:rgba(0,0,0,.35); }
.wb-shell-vol input[type=range]{
  flex:1; -webkit-appearance:none; appearance:none;
  height:2px; background:rgba(255,255,255,.12); border-radius:1px; outline:none;
  transition:background .12s;
}
.wb-shell-vol input[type=range]:hover{ background:rgba(255,255,255,.2); }
[data-theme="light"] .wb-shell-vol input[type=range]{ background:rgba(0,0,0,.1); }
[data-theme="light"] .wb-shell-vol input[type=range]:hover{ background:rgba(0,0,0,.18); }
.wb-shell-vol input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.95); border:none; cursor:pointer;
  transition:transform .12s;
}
.wb-shell-vol input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.2); }
.wb-shell-vol input[type=range]::-moz-range-thumb{
  width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.95); border:none; cursor:pointer;
}
[data-theme="light"] .wb-shell-vol input[type=range]::-webkit-slider-thumb{ background:var(--text); }
[data-theme="light"] .wb-shell-vol input[type=range]::-moz-range-thumb{ background:var(--text); }

/* Account menu (reuses wb-shell-panel) */
.wb-shell-panel-menu{ width:200px; padding:6px; }
.wb-shell-panel-menu button{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; border-radius:6px;
  background:transparent; border:none; color:var(--text);
  font-family:'Geist','Inter Tight',system-ui,sans-serif;
  font-size:var(--wb-text-base); font-weight:500;
  cursor:pointer; text-align:left;
  transition:background .12s, color .12s;
}
.wb-shell-panel-menu button:hover{ background:var(--surface2); color:#fff; }
.wb-shell-panel-menu button.danger{ color:var(--red); }
.wb-shell-panel-menu button.danger:hover{ background:var(--red-bg); color:var(--red); }
.wb-shell-panel-menu button i{ width:14px; font-size:.85rem; color:var(--wb-gray-400); }
.wb-shell-panel-menu button.danger i{ color:var(--red); }
[data-theme="light"] .wb-shell-panel-menu button{ color:var(--text); }
[data-theme="light"] .wb-shell-panel-menu button:hover{ background:var(--surface2); color:var(--text); }

/* Hidden YouTube iframe target */
#wb-shell-yt{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ---------- Hamburger (mobile-only, en secciones con sidebar) ----------
   Solo icono, sin estilos de botón (sin bg, sin border, sin hover state).
   tap-highlight transparente para iOS — sin destello azul. */
.wb-shell-hamburger{
  width:44px; height:44px;
  background:transparent !important; border:none !important;
  color:var(--wb-gray-400);
  display:none; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.05rem; padding:0;
  -webkit-tap-highlight-color:transparent;
  outline:none;
}
[data-theme="light"] .wb-shell-hamburger{ color:var(--wb-gray-500); }
.wb-shell-hamburger:focus,
.wb-shell-hamburger:hover,
.wb-shell-hamburger:active{ background:transparent !important; outline:none; }
.wb-shell-hamburger:active i{ opacity:.6; }

/* ---------- Mobile: chrome compacto, icon-only tabs, hamburger visible ---------- */
@media(max-width:768px){
  /* Chrome respeta el notch/Dynamic Island con safe-area-inset-top.
     En modo Safari normal (URL bar visible) no afecta — el browser maneja el inset.
     En PWA standalone, el chrome se aleja del notch para no quedar tapado. */
  .wb-shell-chrome{
    height:calc(48px + env(safe-area-inset-top, 0px));
    padding-top:env(safe-area-inset-top, 0px);
    padding-left:max(8px, env(safe-area-inset-left, 0px));
    padding-right:max(8px, env(safe-area-inset-right, 0px));
    padding-bottom:0;
    gap:6px;
  }
  /* Hamburger visible en mobile (el JS lo muestra solo en secciones con sidebar) */
  .wb-shell-hamburger:not([hidden]){ display:inline-flex; }
  /* Logo ligeramente más pequeño */
  .wb-shell-logo img{ height:20px; }
  /* Sections button: solo el icono dinámico (cambia según sección activa) */
  .wb-shell-sections-btn:not([hidden]){ display:inline-flex; padding:0; min-width:44px; min-height:44px; justify-content:center; align-items:center; border:none; background:transparent !important; -webkit-tap-highlight-color:transparent; }
  .wb-shell-sections-btn:active i{ opacity:.6; }
  .wb-shell-sections-btn[aria-expanded="true"]{ color:var(--accent); }
  /* Tabs como dropdown vertical full-width centered (glass).
     top respeta safe-area-inset-top (notch/Dynamic Island). */
  .wb-shell-tabs{
    position:fixed;
    top:calc(48px + env(safe-area-inset-top, 0px) + 6px);
    left:max(8px, env(safe-area-inset-left, 0px));
    right:max(8px, env(safe-area-inset-right, 0px));
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:6px;
    background:var(--glass-bg-strong);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border);
    border-radius:12px;
    box-shadow:var(--glass-shadow);
    z-index:1001;
    display:none;
  }
  /* Light mode mobile: el backdrop-filter saturando dark content por debajo
     (chrome, drawer, app sidebar) ensucia el dropdown y lo deja oscuro. Igual
     fix que el dropdown de notificaciones: opaque surface sin blur. */
  [data-theme="light"] .wb-shell-tabs{
    background:var(--surface);
    border-color:var(--border);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:0 16px 48px rgba(8,4,32,.14);
  }
  .wb-shell-tabs.open{ display:flex; }
  .wb-shell-tab{
    padding:10px 12px;
    min-height:44px; min-width:0;
    justify-content:flex-start;
    gap:10px;
    border-radius:6px;
  }
  .wb-shell-tab span{ display:inline !important; font-size:var(--wb-text-base); letter-spacing:.3px; }
  .wb-shell-tab i{ font-size:1rem; width:18px; text-align:center; }
  /* Tab "icon-only" del juego: en dropdown ya no es icon-only */
  .wb-shell-tab-iconly{ padding:10px 12px; }
  /* Acciones tight + 44px target */
  .wb-shell-actions{ gap:0; }
  .wb-shell-icon{
    width:44px; height:44px;
    border-radius:8px;
  }
  .wb-shell-icon i{ font-size:1rem; }
  /* Chat icon oculto en mobile (item dentro del menú de cuenta) */
  #wb-shell-chat-btn{ display:none !important; }
  /* Mostrar items mobile-only dentro del account dropdown */
  .wb-shell-panel-menu .wb-shell-mobile-only:not([hidden]){ display:flex; }
  /* Paneles flotantes: full-width respetando safe-area (notch/island/edges). */
  .wb-shell-panel{
    position:fixed;
    top:calc(48px + env(safe-area-inset-top, 0px) + 6px);
    right:max(6px, env(safe-area-inset-right, 0px));
    left:max(6px, env(safe-area-inset-left, 0px));
    width:auto; max-width:none;
  }
  /* Notif dropdown reposicionado igual. z-index DEBE superar al chrome
     (chrome:2147483000) para que no se meta detrás. Centrado horizontal
     vía left+right simétricos. */
  .wb-notif-dropdown{
    top:calc(48px + env(safe-area-inset-top, 0px) + 6px) !important;
    right:max(8px, env(safe-area-inset-right, 0px)) !important;
    left:max(8px, env(safe-area-inset-left, 0px)) !important;
    width:auto !important;
    max-width:none !important;
    max-height:75dvh !important;
    z-index:2147483100 !important;
  }
  /* Igual blindaje para los paneles flotantes del chrome (cuenta, música).
     Si alguno se cuela bajo el chrome es por z-index. */
  .wb-shell-panel{ z-index:2147483100 !important; }
  /* Música en mobile: el WRAP queda visible (no display:none) para que el panel
     position:fixed renderice. Solo escondemos el BOTÓN icon — el panel se abre
     desde el menú de cuenta vía proxy JS. */
  #wb-shell-music-wrap > #wb-shell-music-btn{ display:none; }
  /* Ocultar el .mobile-header de las secciones — el chrome lo reemplaza */
  body[data-active-section="share"] .mobile-header,
  body[data-active-section="facturas"] .mobile-header,
  body[data-active-section="app"] .mobile-header{
    display:none !important;
  }

  /* ============================================================
     MOBILE NAVIGATION: TAB BAR horizontal scrolleable bajo el chrome.
     Reemplaza la sidebar oculta-tras-hamburger en mobile. Patrón estándar
     (Twitter/GitHub/Reddit): tabs siempre visibles, scroll horizontal con
     snap, item activo subrayado en accent. Funciona con cualquier número
     de items.
     ============================================================ */

  /* Hamburger ya no necesario — la tab bar es siempre visible */
  .wb-shell-hamburger{ display:none !important; }

  /* Sidebar → tab bar horizontal */
  body[data-active-section="share"] .sidebar,
  body[data-active-section="facturas"] .sidebar,
  body[data-active-section="app"] .sidebar,
  body[data-active-section="gestion"] .sidebar{
    position:fixed !important;
    top:calc(48px + env(safe-area-inset-top, 0px)) !important;
    left:0 !important;
    right:0 !important;
    bottom:auto !important;
    width:100% !important;
    height:48px !important;
    max-height:48px !important;
    min-height:48px !important;
    flex-direction:row !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x proximity;
    background:var(--surface) !important;
    border-bottom:1px solid var(--border) !important;
    border-right:0 !important;
    border-left:0 !important;
    z-index:999 !important;
    transform:none !important;
    box-shadow:none !important;
    padding:0 6px !important;
    margin:0 !important;
    gap:0 !important;
    display:flex !important;
    align-items:stretch !important;
    /* Hide scrollbar but keep functional */
    scrollbar-width:none;
  }
  body[data-active-section="share"] .sidebar::-webkit-scrollbar,
  body[data-active-section="facturas"] .sidebar::-webkit-scrollbar,
  body[data-active-section="app"] .sidebar::-webkit-scrollbar,
  body[data-active-section="gestion"] .sidebar::-webkit-scrollbar{ display:none; }

  /* La sidebar abre/cierra con .open en mobile (transform); aquí siempre visible */
  body[data-active-section="share"] .sidebar.open,
  body[data-active-section="facturas"] .sidebar.open,
  body[data-active-section="app"] .sidebar.open,
  body[data-active-section="gestion"] .sidebar.open{
    transform:none !important;
  }

  /* Ocultar header del logo, user, labels — el chrome ya tiene logo + acc btn */
  body[data-active-section] .sidebar .sb-header,
  body[data-active-section] .sidebar .sb-user,
  body[data-active-section] .sidebar .sb-user-info,
  body[data-active-section] .sidebar .sb-user-menu,
  body[data-active-section] .sidebar .sb-label,
  body[data-active-section] .sidebar .sb-section-title{
    display:none !important;
  }

  /* sb-nav: layout horizontal flex */
  body[data-active-section] .sidebar .sb-nav{
    flex:none !important;
    flex-direction:row !important;
    display:flex !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:0 !important;
    margin:0 !important;
    width:auto !important;
    overflow:visible !important;
  }

  /* sb-item como tab horizontal */
  body[data-active-section] .sidebar .sb-item{
    flex:0 0 auto !important;
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:auto !important;
    width:auto !important;
    height:48px !important;
    min-height:48px !important;
    padding:0 14px !important;
    margin:0 !important;
    border-radius:0 !important;
    border:0 !important;
    border-bottom:2px solid transparent !important;
    background:transparent !important;
    color:var(--muted) !important;
    white-space:nowrap !important;
    scroll-snap-align:start;
    font-size:var(--wb-text-base) !important;
    font-weight:600 !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    gap:7px !important;
    transition:color .12s, border-color .12s !important;
  }
  body[data-active-section] .sidebar .sb-item:hover{
    background:transparent !important;
    color:var(--text) !important;
  }
  body[data-active-section] .sidebar .sb-item.active{
    background:transparent !important;
    color:var(--accent) !important;
    border-bottom-color:var(--accent) !important;
  }
  body[data-active-section] .sidebar .sb-item svg,
  body[data-active-section] .sidebar .sb-item i{
    width:16px !important;
    height:16px !important;
    flex:0 0 auto !important;
    margin:0 !important;
    opacity:1 !important;
  }

  /* #wb-section-content baja 48px más para no quedar tapado por la tab bar */
  body[data-active-section="share"] #wb-section-content,
  body[data-active-section="facturas"] #wb-section-content,
  body[data-active-section="app"] #wb-section-content,
  body[data-active-section="gestion"] #wb-section-content{
    top:calc(48px + 48px + env(safe-area-inset-top, 0px)) !important;
  }

  /* Sidebar overlay ya no se usa — sin drawer */
  body[data-active-section="share"] .sidebar-overlay,
  body[data-active-section="facturas"] .sidebar-overlay,
  body[data-active-section="app"] .sidebar-overlay,
  body[data-active-section="gestion"] .sidebar-overlay{
    display:none !important;
  }

  /* ============================================================
     FACTURAS — sus items son .nav-item (no .sb-item) y tiene company-switcher
     ============================================================ */
  /* nav-item se comporta igual que sb-item en la tab bar */
  body[data-active-section="facturas"] .sidebar .nav-item{
    flex:0 0 auto !important;
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:auto !important;
    width:auto !important;
    height:48px !important;
    min-height:48px !important;
    padding:0 14px !important;
    margin:0 !important;
    border:0 !important;
    border-bottom:2px solid transparent !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--muted) !important;
    white-space:nowrap !important;
    scroll-snap-align:start;
    font-size:var(--wb-text-base) !important;
    font-weight:600 !important;
    gap:7px !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    transition:color .12s, border-color .12s !important;
  }
  body[data-active-section="facturas"] .sidebar .nav-item.active{
    background:transparent !important;
    color:var(--accent) !important;
    border-bottom-color:var(--accent) !important;
  }
  body[data-active-section="facturas"] .sidebar .nav-item svg,
  body[data-active-section="facturas"] .sidebar .nav-item i{
    width:16px !important; height:16px !important;
    flex:0 0 auto !important; margin:0 !important; opacity:1 !important;
  }
  /* Ocultar nav-section labels (cabeceras de grupo) en mobile */
  body[data-active-section="facturas"] .sidebar .nav-section{
    display:none !important;
  }
  /* sb-nav layout horizontal en facturas también */
  body[data-active-section="facturas"] .sidebar .sb-nav{
    flex:none !important;
    flex-direction:row !important;
    display:flex !important;
    align-items:stretch !important;
    gap:0 !important; padding:0 !important; margin:0 !important;
  }

  /* Company switcher: chips horizontales al inicio de la tab bar */
  body[data-active-section="facturas"] .sidebar .company-switcher{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    height:48px !important;
    padding:0 8px !important;
    margin:0 !important;
    border:0 !important;
    border-right:1px solid var(--border) !important;
    background:transparent !important;
  }
  body[data-active-section="facturas"] .sidebar .company-label{
    display:none !important;
  }
  body[data-active-section="facturas"] .sidebar #companySwitcher{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:6px !important;
    padding:0 !important;
    margin:0 !important;
  }
  body[data-active-section="facturas"] .sidebar .company-btn{
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:6px !important;
    flex:0 0 auto !important;
    width:auto !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    padding:0 10px !important;
    margin:0 !important;
    border-radius:16px !important;
    border:1px solid var(--border) !important;
    background:transparent !important;
    color:var(--muted) !important;
    font-size:var(--wb-text-sm) !important;
    font-weight:600 !important;
    white-space:nowrap !important;
    cursor:pointer !important;
    text-align:center !important;
    line-height:1 !important;
  }
  /* El JS renderiza un wrapper <div> sin clase entre dot y company-btn-name.
     Asegurar que ese div interno se comporte inline también. */
  body[data-active-section="facturas"] .sidebar .company-btn > div{
    display:inline-flex !important;
    align-items:center !important;
    line-height:1 !important;
  }
  body[data-active-section="facturas"] .sidebar .company-btn.active{
    background:var(--accent-bg) !important;
    border-color:var(--accent) !important;
    color:var(--accent) !important;
  }
  body[data-active-section="facturas"] .sidebar .company-btn-name{
    font-size:var(--wb-text-sm) !important;
    font-weight:600 !important;
    line-height:1 !important;
  }
  body[data-active-section="facturas"] .sidebar .company-btn-owner{
    display:none !important;
  }
  body[data-active-section="facturas"] .sidebar .company-dot{
    width:7px !important; height:7px !important;
    flex:0 0 auto !important;
  }

  /* ============================================================
     GRIDS DE CONTENIDO — stack vertical en mobile (1 columna).
     Reglas con specificity alta para vencer body[data-active-section] defaults.
     ============================================================ */
  body[data-active-section="facturas"] .cards,
  body[data-active-section="facturas"] .proj-grid,
  body[data-active-section="facturas"] .iva-grid,
  body[data-active-section="facturas"] .client-card,
  body[data-active-section="facturas"] .form-row,
  body[data-active-section="facturas"] .form-row.triple,
  body[data-active-section="facturas"] .review-grid,
  body[data-active-section="facturas"] .status-grid{
    grid-template-columns:1fr !important;
  }
  /* Gestion KPIs */
  body[data-active-section="gestion"] .kpi-grid,
  body[data-active-section="gestion"] .stat-grid,
  body[data-active-section="gestion"] .gestion-kpis{
    grid-template-columns:1fr !important;
  }
  /* App KPIs / dashboards */
  body[data-active-section="app"] .kpi-grid,
  body[data-active-section="app"] .stat-grid,
  body[data-active-section="app"] .cards{
    grid-template-columns:1fr !important;
  }

  /* ============================================================
     OVERLAYS / MODALES / DRAWERS / EDITORES — todos por DEBAJO del chrome
     Regla mobile-only: ningún elemento full-screen pasa por encima del chrome.
     Visualmente llegan al fondo del viewport (bottom:0) cubriendo el gesture
     bar; los scrollers internos compensan con padding-bottom de safe-bottom.
     ============================================================ */
  /* 1) Chrome SIEMPRE encima de todo en mobile. */
  .wb-shell-chrome{ z-index:2147483000 !important; }

  /* 2) Overlays/modales con inset:0 o top:0 — anclados bajo chrome, hasta el
        fondo del viewport. z-index sube a 99999 (encima de la tab bar z:999
        pero por debajo del chrome z:2147483000) para que tapen la tab bar
        y dejen visible el botón Cerrar de su cabecera. */
  .modal-overlay,
  .drawer-overlay,
  .preview-overlay,
  .hub-modal-overlay,
  .sidebar-overlay,
  .cgi-overlay,
  .editor-fullscreen,
  #welcomeOverlay,
  .wb-preview-lb{
    top:calc(48px + env(safe-area-inset-top, 0px)) !important;
    bottom:0 !important;
    left:max(0px, env(safe-area-inset-left, 0px)) !important;
    right:max(0px, env(safe-area-inset-right, 0px)) !important;
    height:auto !important;
    max-height:none !important;
    z-index:99999 !important;
  }

  /* 3) lead-drawer (gestion): se oculta con transform/translateX, no con right.
        Solo ajustamos top/bottom + z-index encima de tab bar. */
  body[data-active-section="gestion"] .lead-drawer,
  body[data-active-section="gestion"] .lead-drawer-overlay{
    top:calc(48px + env(safe-area-inset-top, 0px)) !important;
    bottom:0 !important;
    height:auto !important;
    max-height:none !important;
    z-index:99999 !important;
  }

  /* 4) Drawer (app section): el truco `right:-100vw` para ocultarlo NO funciona
        bien en iOS PWA standalone (queda renderizado dentro del viewport y deja
        franja visible). Forzamos display:none cuando NO tiene .show/.open. */
  body[data-active-section="app"] .drawer:not(.show):not(.open){
    display:none !important;
  }
  body[data-active-section="app"] .drawer.show,
  body[data-active-section="app"] .drawer.open{
    display:flex !important;
    top:calc(48px + env(safe-area-inset-top, 0px)) !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    z-index:99999 !important;
  }
  /* Drawer-overlay también cuando .show */
  body[data-active-section="app"] .drawer-overlay.show{
    top:calc(48px + env(safe-area-inset-top, 0px)) !important;
    bottom:0 !important;
    display:block !important;
    z-index:99998 !important;
  }
  /* Header del drawer sticky para que el botón Cerrar siempre quede visible */
  body[data-active-section="app"] .drawer .drawer-header{
    position:sticky !important;
    top:0 !important;
    z-index:5 !important;
    background:var(--surface) !important;
    border-bottom:1px solid var(--border) !important;
    padding:10px 14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    min-height:44px !important;
  }

  /* 5) Chat widget (app + shell) y notif-dropdown app: se ocultan con
        display:none. Forzamos rectángulo full-screen + z encima de tab bar. */
  body[data-active-section="app"] #chatWidget,
  body[data-active-section="app"] .notif-dropdown,
  #wb-shell-chat-widget{
    top:calc(48px + env(safe-area-inset-top, 0px)) !important;
    bottom:0 !important;
    height:auto !important;
    max-height:none !important;
    z-index:99999 !important;
  }

  /* 6) Toast host bajo chrome. */
  #wb-shell-toast-host{ top:calc(48px + env(safe-area-inset-top, 0px) + 8px) !important; }

  /* 7) Elementos persistentes que NO deben verse en mobile (splash sprites,
        banners, mini-tabs vacíos). */
  #splashSprites,
  .wb-shell-update-banner,
  .wb-pwa-banner,
  #wb-shell-chat-min-tabs:empty,
  .chatMinTab{ display:none !important; }
}

/* ============================================================
   NOTIFICATIONS DROPDOWN (shell-level)
   ============================================================ */
.wb-notif-dropdown{
  position:fixed; top:58px; right:18px;
  width:340px; max-height:420px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:12px;
  box-shadow:var(--glass-shadow);
  z-index:1002; overflow:hidden;
}
/* Light mode: el backdrop-filter sobre contenido oscuro (chat, drawer overlay,
   sidebar de proyectos) ensucia el color y deja el dropdown ilegible. Forzamos
   surface opaca + sin blur. */
[data-theme="light"] .wb-notif-dropdown{
  background:var(--surface);
  border-color:var(--border);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:0 16px 48px rgba(8,4,32,.14);
}
.wb-notif-dropdown[hidden]{ display:none; }
.wb-notif-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--border);
  font-size:var(--wb-text-base); font-weight:700; color:var(--text);
}
.wb-notif-read-all{
  background:none; border:none; color:var(--accent);
  cursor:pointer; font-size:var(--wb-text-xs); font-weight:600;
}
.wb-notif-read-all:hover{ text-decoration:underline; }
.wb-notif-list{ overflow-y:auto; max-height:360px; }
.wb-notif-item{
  display:flex; gap:10px; padding:10px 14px;
  border-bottom:1px solid var(--border);
  cursor:pointer; transition:background .15s;
  color:var(--text);
}
.wb-notif-item:hover{ background:var(--surface2); }
.wb-notif-item.unread{ background:var(--accent-bg); }
.wb-notif-item .wb-notif-icon{ font-size:18px; flex-shrink:0; width:28px; text-align:center; padding-top:2px; color:var(--accent); }
.wb-notif-item .wb-notif-body{ flex:1; min-width:0; }
.wb-notif-item .wb-notif-title{ font-size:var(--wb-text-sm); font-weight:700; color:var(--text); margin-bottom:2px; }
.wb-notif-item .wb-notif-text{ font-size:var(--wb-text-xs); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wb-notif-item .wb-notif-time{ font-size:10px; color:var(--dim); margin-top:3px; }
.wb-notif-empty{ padding:30px; text-align:center; color:var(--muted); font-size:var(--wb-text-base); }

/* ============================================================
   CHAT WIDGET (shell-level)
   ============================================================ */
#wb-shell-chat-widget{
  position:fixed; bottom:20px; right:20px;
  width:380px; height:520px;
  background:rgba(17,17,17,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border,var(--border));
  border-radius:var(--radius-lg); z-index:1003;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  font-size:var(--wb-text-base); color:var(--text,var(--text));
}
#wb-shell-chat-widget[hidden]{ display:none; }
[data-theme="light"] #wb-shell-chat-widget{ background:rgba(255,255,255,.92); }

/* Modal-style expanded chat: centered + backdrop blur (no migrated section / juego, etc.) */
.wb-chat-backdrop{
  position:fixed; inset:0; z-index:1002;
  background:var(--modal-overlay);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:wb-chat-modal-in .2s ease;
  cursor:zoom-out;
}
.wb-chat-backdrop[hidden]{ display:none; }
[data-theme="light"] .wb-chat-backdrop{ background:rgba(0,0,0,.32); }
@keyframes wb-chat-modal-in{ from{ opacity:0; } to{ opacity:1; } }

body.wb-chat-expanded #wb-shell-chat-widget{
  position:fixed !important;
  top:50% !important; left:50% !important; right:auto !important; bottom:auto !important;
  transform:translate(-50%, -50%);
  width:min(880px, 92vw) !important; height:min(640px, 84vh) !important;
  border-radius:var(--radius-lg) !important;
  border:1px solid var(--border,var(--border)) !important;
  background:var(--surface,var(--surface));
  box-shadow:0 24px 64px rgba(0,0,0,.55);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  flex-direction:row;
  z-index:1003;
  animation:wb-chat-modal-pop .2s ease;
}
@keyframes wb-chat-modal-pop{ from{ opacity:0; transform:translate(-50%, -48%) scale(.97); } to{ opacity:1; transform:translate(-50%, -50%) scale(1); } }
.wb-chat-main{ display:flex; flex-direction:column; flex:1; min-width:0; min-height:0; }
#wb-shell-chat-convos-list{ display:none; }
body.wb-chat-expanded #wb-shell-chat-convos-list{
  display:flex; flex-direction:column;
  width:280px; border-left:1px solid var(--border,var(--border));
  overflow-y:auto; background:var(--surface2,var(--surface2));
  flex-shrink:0;
}
.wb-chat-expand-hide{ display:none; }
body.wb-chat-expanded .wb-chat-expand-hide{ display:inline-flex; }
body.wb-chat-expanded .wb-chat-floating-only{ display:none; }

.wb-chat-header{
  display:flex; align-items:center; padding:10px 14px;
  border-bottom:1px solid var(--border,var(--border)); gap:8px; flex-shrink:0;
}
.wb-chat-header-title{ font-weight:700; font-size:var(--wb-text-base); color:var(--white,#fff); flex:1; }
[data-theme="light"] .wb-chat-header-title{ color:var(--text); }
.wb-chat-header-btn{
  background:none; border:none; color:var(--muted,#6b7280);
  font-size:15px; cursor:pointer;
  padding:2px 6px; border-radius:4px; transition:color .15s;
}
.wb-chat-header-btn:hover{ color:var(--white,#fff); }
[data-theme="light"] .wb-chat-header-btn:hover{ color:var(--text); }

.wb-chat-tabs{
  display:flex; border-bottom:1px solid var(--border,var(--border));
  overflow-x:auto; flex-shrink:0; scrollbar-width:none;
}
.wb-chat-tabs::-webkit-scrollbar{ display:none; }
.wb-chat-tab{
  display:flex; align-items:center; gap:4px;
  padding:7px 12px; font-size:var(--wb-text-xs); color:var(--muted,#6b7280);
  cursor:pointer; white-space:nowrap;
  border-bottom:2px solid transparent; transition:all .15s; flex-shrink:0;
}
.wb-chat-tab:hover{ color:var(--text,var(--text)); }
.wb-chat-tab.active{ color:var(--accent,var(--accent)); border-bottom-color:var(--accent,var(--accent)); font-weight:600; }
.wb-chat-tab .tab-badge{
  background:var(--red,var(--red)); color:#fff;
  font-size:9px; min-width:14px; height:14px; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.wb-chat-tab .tab-close{ color:var(--muted,#6b7280); font-size:10px; margin-left:2px; cursor:pointer; padding:0 2px; }
.wb-chat-tab .tab-close:hover{ color:var(--red,var(--red)); }
.wb-chat-tab-new{ padding:7px 10px; font-size:var(--wb-text-md); color:var(--muted,#6b7280); cursor:pointer; border:none; background:none; font-weight:700; }
.wb-chat-tab-new:hover{ color:var(--accent,var(--accent)); }

.wb-chat-messages{
  flex:1; overflow-y:auto; padding:12px;
  display:flex; flex-direction:column; gap:6px;
}
.wb-chat-msg{ display:flex; gap:8px; align-items:flex-start; max-width:85%; }
.wb-chat-msg.mine{ margin-left:auto; flex-direction:row-reverse; }
.wb-chat-msg-avatar{
  width:24px; height:24px; border-radius:6px;
  background:var(--surface2,var(--surface2)); border:1px solid var(--border,var(--border));
  overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.wb-chat-msg-avatar canvas{ width:24px; height:24px; image-rendering:pixelated; }
.wb-chat-msg-avatar .initials{ font-size:9px; font-weight:700; color:var(--muted,#6b7280); }
.wb-chat-msg-body{ background:var(--surface2,var(--surface2)); border-radius:var(--radius-lg); padding:7px 11px; min-width:0; }
.wb-chat-msg.mine .wb-chat-msg-body{ background:var(--accent,var(--accent)); color:#fff; }
.wb-chat-msg-name{ font-size:var(--wb-text-xs); font-weight:600; color:var(--muted,#6b7280); margin-bottom:2px; }
.wb-chat-msg.mine .wb-chat-msg-name{ color:rgba(255,255,255,.7); }
.wb-chat-msg-text{ font-size:var(--wb-text-base); line-height:1.4; white-space:pre-wrap; word-break:break-word; }
.wb-chat-msg-time{ font-size:9px; color:var(--dim,#444444); margin-top:2px; }
.wb-chat-msg.mine .wb-chat-msg-time{ color:rgba(255,255,255,.5); }
.wb-chat-typing{ font-size:var(--wb-text-xs); color:var(--muted,#6b7280); padding:0 12px 4px; min-height:18px; flex-shrink:0; }

.wb-chat-input-bar{
  display:flex; padding:8px 10px;
  border-top:1px solid var(--border,var(--border));
  gap:6px; flex-shrink:0; align-items:flex-end;
}
.wb-chat-input-bar[hidden]{ display:none; }
.wb-chat-input-bar textarea{
  flex:1; background:var(--surface2,var(--surface2));
  border:1px solid var(--border,var(--border)); border-radius:8px;
  padding:7px 10px; color:var(--text,var(--text));
  font-size:var(--wb-text-base); resize:none; max-height:80px; min-height:34px;
  font-family:inherit; outline:none; transition:border-color .15s;
}
.wb-chat-input-bar textarea:focus{ border-color:var(--accent,var(--accent)); }
.wb-chat-send-btn{
  background:var(--accent,var(--accent)); color:#fff;
  border:none; border-radius:8px; padding:7px 12px;
  cursor:pointer; font-weight:600; font-size:var(--wb-text-sm);
  transition:opacity .15s; flex-shrink:0; height:34px;
}
.wb-chat-send-btn:hover{ opacity:.85; }
.wb-chat-empty{ flex:1; display:flex; align-items:center; justify-content:center; color:var(--muted,#6b7280); font-size:var(--wb-text-sm); text-align:center; padding:20px; }

.wb-chat-convo-list-header{
  padding:10px 12px; border-bottom:1px solid var(--border,var(--border));
  font-size:var(--wb-text-xs); font-weight:700; color:var(--muted,#6b7280);
  text-transform:uppercase; letter-spacing:.5px;
  position:sticky; top:0; background:var(--surface2,var(--surface2)); z-index:1;
}
.wb-chat-convo-empty{ padding:20px; text-align:center; color:var(--muted,#6b7280); font-size:var(--wb-text-sm); }
.wb-chat-convo-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-bottom:1px solid var(--border,var(--border));
  cursor:pointer; transition:background .15s; font-size:var(--wb-text-sm);
  color:var(--text,var(--text));
}
.wb-chat-convo-item:hover{ background:var(--surface,var(--surface)); }
.wb-chat-convo-item.active{ background:var(--accent-bg,rgba(23,0,255,.10)); border-left:3px solid var(--accent,var(--accent)); padding-left:9px; }
.wb-chat-convo-item .ci-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.wb-chat-convo-item .ci-badge{ background:var(--red); color:#fff; font-size:9px; font-weight:700; min-width:16px; height:16px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px; flex-shrink:0; }
.wb-chat-convo-item .ci-del{ background:none; border:none; color:var(--muted,#6b7280); cursor:pointer; font-size:var(--wb-text-sm); padding:2px 4px; border-radius:4px; opacity:0; transition:opacity .15s,color .15s; flex-shrink:0; }
.wb-chat-convo-item:hover .ci-del{ opacity:1; }
.wb-chat-convo-item .ci-del:hover{ color:var(--red); background:var(--surface,var(--surface)); }

.wb-chat-new-conv{ padding:14px; display:flex; flex-direction:column; gap:10px; flex:1; overflow-y:auto; }
.wb-chat-new-conv input{ background:var(--surface2,var(--surface2)); border:1px solid var(--border,var(--border)); border-radius:8px; padding:8px 10px; color:var(--text,var(--text)); font-size:var(--wb-text-base); font-family:inherit; outline:none; }
.wb-chat-new-conv input:focus{ border-color:var(--accent,var(--accent)); }
.wb-chat-user-pick{ display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px; cursor:pointer; transition:background .15s; }
.wb-chat-user-pick:hover{ background:var(--surface2,var(--surface2)); }
.wb-chat-user-pick.selected{ background:var(--accent-bg,rgba(23,0,255,.10)); border:1px solid var(--accent-border,rgba(23,0,255,.30)); }
.wb-chat-user-pick .pick-avatar{ width:24px; height:24px; border-radius:6px; background:var(--surface2,var(--surface2)); overflow:hidden; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:9px; font-weight:700; color:var(--muted,#6b7280); }
.wb-chat-user-pick .pick-name{ font-size:var(--wb-text-base); color:var(--text,var(--text)); }
.wb-chat-user-pick .pick-role{ font-size:var(--wb-text-xs); color:var(--muted,#6b7280); }
.wb-chat-create-btn{ background:var(--accent,var(--accent)); color:#fff; border:none; border-radius:8px; padding:9px; cursor:pointer; font-weight:600; font-size:var(--wb-text-base); font-family:inherit; margin-top:4px; }

/* New-conv DM vs Group tabs */
.wb-chat-new-tabs{ display:flex; gap:4px; }
.wb-chat-new-tab{ flex:1; padding:7px 10px; border:1px solid var(--border,var(--border)); background:var(--surface2,var(--surface2)); color:var(--muted,#6b7280); border-radius:8px; font-size:var(--wb-text-sm); font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:all .15s; font-family:inherit; }
.wb-chat-new-tab:hover{ color:var(--text,var(--text)); }
.wb-chat-new-tab.active{ background:var(--accent,var(--accent)); color:#fff; border-color:var(--accent,var(--accent)); }

/* Presence dot */
.cgi-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--wb-gray-500); border:2px solid var(--surface,var(--surface)); flex-shrink:0; }
.cgi-dot.online{ background:var(--green); }

/* Group info modal */
.cgi-overlay{ position:fixed; inset:0; background:var(--modal-overlay); z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px; }
.cgi-modal{ background:var(--surface,var(--surface)); border-radius:12px; max-width:480px; width:100%; max-height:85vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); color:var(--text,var(--text)); border:1px solid var(--border,var(--border)); }
[data-theme="light"] .cgi-modal{ background:#fff; color:var(--text); border-color:var(--border); }
.cgi-header{ padding:14px 18px; border-bottom:1px solid var(--border,var(--border)); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; font-size:var(--wb-text-md); }
.cgi-close{ background:none; border:none; color:var(--muted,#6b7280); font-size:18px; cursor:pointer; }
.cgi-body{ padding:14px 18px; overflow-y:auto; flex:1; }
.cgi-row{ margin-bottom:14px; }
.cgi-row label{ display:block; font-size:var(--wb-text-xs); font-weight:700; color:var(--muted,#6b7280); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.cgi-row input[type=text]{ width:100%; padding:7px 10px; border:1px solid var(--border,var(--border)); border-radius:6px; background:var(--surface2,var(--surface2)); color:var(--text,var(--text)); font-size:var(--wb-text-base); font-family:inherit; outline:none; }
[data-theme="light"] .cgi-row input[type=text]{ background:#f9fafb; color:var(--text); }
.cgi-members,.cgi-candidates{ display:flex; flex-direction:column; gap:4px; max-height:240px; overflow-y:auto; }
.cgi-member,.cgi-cand{ display:flex; align-items:center; gap:10px; padding:7px 10px; background:var(--surface2,var(--surface2)); border-radius:8px; border:1px solid var(--border,var(--border)); }
[data-theme="light"] .cgi-member,[data-theme="light"] .cgi-cand{ background:#f9fafb; border-color:var(--border); }
.cgi-avatar{ width:30px; height:30px; border-radius:50%; background:var(--surface,var(--surface)); display:flex; align-items:center; justify-content:center; font-size:var(--wb-text-sm); font-weight:700; color:var(--text,var(--text)); flex-shrink:0; position:relative; }
[data-theme="light"] .cgi-avatar{ background:#fff; color:var(--text); }
.cgi-avatar .cgi-dot{ position:absolute; right:-1px; bottom:-1px; }
.cgi-info{ flex:1; min-width:0; }
.cgi-name{ font-size:var(--wb-text-base); font-weight:600; color:var(--text,var(--text)); }
[data-theme="light"] .cgi-name{ color:var(--text); }
.cgi-role{ font-size:var(--wb-text-xs); color:var(--muted,#6b7280); text-transform:uppercase; letter-spacing:.4px; }
.cgi-rm,.cgi-add{ background:none; border:1px solid var(--border,var(--border)); color:var(--muted,#6b7280); width:30px; height:30px; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cgi-rm:hover{ color:var(--red); border-color:var(--red); }
.cgi-add:hover{ color:var(--accent,var(--accent)); border-color:var(--accent,var(--accent)); }

#wb-shell-chat-min-tabs{ position:fixed; bottom:0; left:0; right:0; pointer-events:none; z-index:1004; }
.wb-chat-min-tab{
  position:fixed; bottom:20px;
  background:var(--surface2,var(--surface2));
  border:1px solid var(--border,var(--border));
  border-radius:var(--radius-lg); padding:6px 12px;
  font-size:var(--wb-text-xs); font-weight:600; color:var(--text,var(--text));
  cursor:pointer; pointer-events:auto;
  box-shadow:var(--shadow);
  display:flex; align-items:center; gap:5px;
  transition:transform .15s;
}
.wb-chat-min-tab:hover{ transform:translateY(-2px); }
.wb-chat-min-tab .badge{ background:var(--red); color:#fff; font-size:9px; min-width:14px; height:14px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; padding:0 3px; }

/* Floating toast (incoming notif) */
#wb-shell-toast-host{ position:fixed; top:62px; right:16px; display:flex; flex-direction:column; gap:8px; z-index:1010; max-width:340px; pointer-events:none; }
.wb-shell-toast{
  background:var(--surface,var(--surface));
  border:1px solid var(--accent-border,rgba(23,0,255,.30));
  border-radius:12px; padding:14px 16px;
  box-shadow:var(--shadow-lg);
  display:flex; gap:12px; align-items:flex-start;
  cursor:pointer; pointer-events:auto;
  will-change:transform,opacity;
  animation:wb-toast-in 360ms var(--ease-spring,cubic-bezier(0.32,0.72,0,1));
}
@keyframes wb-toast-in{
  from{ transform:translate3d(0,-12px,0) scale(0.96); opacity:0; filter:blur(2px); }
  to{ transform:translate3d(0,0,0) scale(1); opacity:1; filter:blur(0); }
}
.wb-shell-toast .ts-icon{ font-size:1.4rem; flex-shrink:0; color:var(--accent); }
.wb-shell-toast .ts-body{ flex:1; min-width:0; }
.wb-shell-toast .ts-title{ font-size:var(--wb-text-base); font-weight:700; color:var(--text); margin-bottom:2px; }
.wb-shell-toast .ts-text{ font-size:var(--wb-text-sm); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wb-shell-toast .ts-close{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:var(--wb-text-md); padding:0 2px; flex-shrink:0; }

/* Mobile: chat widget fullscreen.
   El rectángulo (top, bottom, z-index) lo gestiona el bloque mobile principal
   arriba — aquí solo overrides cosmeticos y el modo expanded. */
@media(max-width:768px){
  #wb-shell-chat-widget{
    right:0 !important; left:0 !important;
    width:100% !important;
    border-radius:0 !important;
    transform:none !important;
    box-sizing:border-box;
  }
  body.wb-chat-expanded #wb-shell-chat-widget{
    width:100% !important;
    border-radius:0 !important; border:0 !important;
    transform:none !important;
  }
  /* Input bar respeta el home-indicator en iOS PWA — añadimos safe-area-inset
     al padding-bottom para que la barra no quede pisada por la pill. */
  #wb-shell-chat-widget .wb-chat-input-bar{
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Textarea: 16px para evitar zoom-on-focus en iOS Safari + altura suficiente
     para que el placeholder no se corte. Placeholder se trunca con ellipsis si
     no cabe (jamás envuelve a 2 líneas). */
  #wb-shell-chat-widget .wb-chat-input-bar textarea{
    font-size:16px !important;
    min-height:40px !important;
    line-height:1.35 !important;
  }
  #wb-shell-chat-widget .wb-chat-input-bar textarea::placeholder{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  /* Cuando no hay input bar visible (sin conversación activa), el cuerpo
     también necesita respiración inferior para no morder el home indicator. */
  #wb-shell-chat-widget .wb-chat-msgs,
  #wb-shell-chat-widget .wb-chat-empty{
    padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .wb-chat-backdrop{ display:none !important; }
  .wb-chat-min-tab{ display:none !important; }
}

/* ── Slash dropdown (mini chat) ───────────────────────────── */
.wb-chat-input-bar{ position:relative; }
.wb-chat-slash-dropdown{
  position:absolute; left:8px; right:8px; bottom:calc(100% + 4px);
  background:var(--surface,var(--surface)); border:1px solid var(--border,var(--border));
  border-radius:var(--radius-lg); padding:4px; max-height:220px; overflow-y:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.4); z-index:5;
}
.wb-chat-slash-dropdown[hidden]{ display:none; }
.wb-chat-slash-item{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:none; padding:8px 10px; border-radius:8px;
  color:var(--text,var(--text)); cursor:pointer; text-align:left; font-family:inherit;
}
.wb-chat-slash-item:hover, .wb-chat-slash-item.active{ background:var(--accent-bg,rgba(23,0,255,.10)); }
.wb-chat-slash-item i{ color:var(--accent,var(--accent)); width:18px; text-align:center; }
.wb-chat-slash-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.wb-chat-slash-cmd{ font-size:var(--wb-text-sm); font-weight:700; color:var(--white,#fff); }
[data-theme="light"] .wb-chat-slash-cmd{ color:var(--text); }
.wb-chat-slash-desc{ font-size:var(--wb-text-xs); color:var(--muted,#6b7280); }

/* ── Tab list popover (reabrir conversaciones desde mini) ── */
.wb-chat-tab-list-btn{
  background:none; border:none; color:var(--muted,#6b7280);
  cursor:pointer; padding:7px 10px; font-size:var(--wb-text-xs);
}
.wb-chat-tab-list-btn:hover{ color:var(--accent,var(--accent)); }
body.wb-chat-expanded .wb-chat-tab-list-btn{ display:none; }
.wb-chat-tab-list-pop{
  position:absolute; top:calc(28px + 36px + 4px); right:10px;
  width:240px; max-height:300px; overflow-y:auto;
  background:var(--surface,var(--surface)); border:1px solid var(--border,var(--border));
  border-radius:var(--radius-lg); box-shadow:0 8px 24px rgba(0,0,0,.45); z-index:6;
}
.wb-chat-tab-list-pop[hidden]{ display:none; }
body.wb-chat-expanded .wb-chat-tab-list-pop{ display:none !important; }
.wb-chat-tab-list-header{
  padding:8px 12px; font-size:var(--wb-text-xs); font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--muted,#6b7280);
  border-bottom:1px solid var(--border,var(--border)); position:sticky; top:0;
  background:var(--surface,var(--surface));
}
.wb-chat-tab-list-empty{ padding:20px; text-align:center; color:var(--muted,#6b7280); font-size:var(--wb-text-sm); }
.wb-chat-tab-list-item{
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  cursor:pointer; transition:background .15s; font-size:var(--wb-text-sm);
  color:var(--text,var(--text)); border-bottom:1px solid var(--border,var(--border));
}
.wb-chat-tab-list-item:last-child{ border-bottom:none; }
.wb-chat-tab-list-item:hover{ background:var(--surface2,var(--surface2)); }
.wb-chat-tab-list-item.active{ background:var(--accent-bg,rgba(23,0,255,.10)); }
.wb-chat-tab-list-item .tl-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-chat-tab-list-item .tl-dot{ width:7px; height:7px; border-radius:50%; background:var(--dim,#444444); flex-shrink:0; }
.wb-chat-tab-list-item .tl-dot.open{ background:var(--muted,#6b7280); }
.wb-chat-tab-list-item .tl-dot.active{ background:var(--accent,var(--accent)); }
.wb-chat-tab-list-item .ci-badge{ background:var(--red); color:#fff; font-size:9px; font-weight:700; min-width:16px; height:16px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px; flex-shrink:0; }

/* ── Task ref card en mensajes ───────────────────────────── */
.wb-chat-task-card{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; margin-top:2px;
  background:var(--surface,var(--surface)); border:1px solid var(--border,var(--border));
  border-radius:var(--radius-lg); cursor:pointer; transition:border-color .15s, transform .15s;
}
.wb-chat-msg.mine .wb-chat-task-card{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); }
.wb-chat-task-card:hover{ border-color:var(--accent,var(--accent)); transform:translateY(-1px); }
.wb-chat-task-card-icon{
  width:28px; height:28px; border-radius:var(--radius); flex-shrink:0;
  background:var(--accent-bg,rgba(23,0,255,.10)); color:var(--accent,var(--accent));
  display:flex; align-items:center; justify-content:center; font-size:var(--wb-text-sm);
}
.wb-chat-msg.mine .wb-chat-task-card-icon{ background:rgba(255,255,255,.2); color:#fff; }
.wb-chat-task-card-body{ flex:1; min-width:0; }
.wb-chat-task-card-title{ font-size:12.5px; font-weight:600; color:var(--white,#fff); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-theme="light"] .wb-chat-task-card-title{ color:var(--text); }
.wb-chat-msg.mine .wb-chat-task-card-title{ color:#fff; }
.wb-chat-task-card-meta{ font-size:var(--wb-text-xs); color:var(--muted,#6b7280); margin-top:1px; }
.wb-chat-msg.mine .wb-chat-task-card-meta{ color:rgba(255,255,255,.75); }
.wb-chat-task-card-arrow{ color:var(--muted,#6b7280); font-size:var(--wb-text-xs); flex-shrink:0; }
.wb-chat-msg.mine .wb-chat-task-card-arrow{ color:rgba(255,255,255,.6); }

/* ── Reply bar (sobre el input) ─────────────────────────── */
.wb-chat-reply-bar{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-top:1px solid var(--border,var(--border));
  background:var(--surface2,var(--surface2));
  font-size:11.5px; color:var(--text,var(--text));
  flex-shrink:0;
}
.wb-chat-reply-bar[hidden]{ display:none; }
.wb-chat-reply-info{ flex:1; min-width:0; display:flex; align-items:center; gap:8px; overflow:hidden; }
.wb-chat-reply-info i{ color:var(--accent,var(--accent)); flex-shrink:0; }
.wb-chat-reply-info span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-chat-reply-cancel{ background:none; border:none; color:var(--muted,#6b7280); cursor:pointer; padding:2px 6px; border-radius:4px; font-size:var(--wb-text-sm); }
.wb-chat-reply-cancel:hover{ color:var(--red,var(--red)); background:var(--surface,var(--surface)); }

/* ── Reply quote dentro del mensaje ─────────────────────── */
.wb-chat-msg-quote{
  display:flex; align-items:center; gap:6px;
  padding:5px 8px; margin-bottom:4px; border-radius:6px;
  background:var(--surface,var(--surface));
  border-left:3px solid var(--accent,var(--accent));
  font-size:var(--wb-text-xs); color:var(--muted,#6b7280);
  cursor:pointer; transition:background .15s;
  max-width:100%; overflow:hidden;
}
.wb-chat-msg.mine .wb-chat-msg-quote{ background:rgba(255,255,255,.12); border-left-color:rgba(255,255,255,.6); color:rgba(255,255,255,.85); }
.wb-chat-msg-quote:hover{ background:var(--surface2,var(--surface2)); }
.wb-chat-msg.mine .wb-chat-msg-quote:hover{ background:rgba(255,255,255,.18); }
.wb-chat-msg-quote.disabled{ cursor:default; opacity:.6; }
.wb-chat-msg-quote i{ color:var(--accent,var(--accent)); flex-shrink:0; }
.wb-chat-msg.mine .wb-chat-msg-quote i{ color:rgba(255,255,255,.85); }
.wb-chat-msg-quote-name{ font-weight:700; color:var(--white,#fff); flex-shrink:0; }
[data-theme="light"] .wb-chat-msg-quote-name{ color:var(--text); }
.wb-chat-msg.mine .wb-chat-msg-quote-name{ color:#fff; }
.wb-chat-msg-quote-body{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }

/* Flash highlight cuando saltas a un mensaje vía quote */
.wb-chat-msg.flash > .wb-chat-msg-body{
  animation:wb-chat-msg-flash 1.2s ease;
}
@keyframes wb-chat-msg-flash{
  0%{ box-shadow:0 0 0 2px var(--accent,var(--accent)); }
  100%{ box-shadow:0 0 0 0 transparent; }
}

/* ── Acciones del mensaje (responder) ───────────────────── */
.wb-chat-msg-body{ position:relative; }
.wb-chat-msg-actions{
  position:absolute; top:4px; right:4px;
  display:flex; gap:2px;
  opacity:0; transition:opacity .12s;
}
.wb-chat-msg.mine .wb-chat-msg-actions{ left:4px; right:auto; }
.wb-chat-msg:hover .wb-chat-msg-actions{ opacity:1; }
.wb-chat-msg-action{
  background:var(--surface,var(--surface)); border:1px solid var(--border,var(--border));
  color:var(--muted,#6b7280); cursor:pointer;
  width:22px; height:22px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:10px;
  transition:color .12s, background .12s;
}
.wb-chat-msg-action:hover{ color:var(--accent,var(--accent)); background:var(--surface2,var(--surface2)); }
.wb-chat-msg.mine .wb-chat-msg-action{ background:rgba(0,0,0,.18); border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.7); }
.wb-chat-msg.mine .wb-chat-msg-action:hover{ color:#fff; background:rgba(0,0,0,.32); }

/* ── Chrome chat btn: oculto cuando estás en app/#chat ── */
.wb-chat-btn-hidden{ display:none !important; }

/* ── Inline task picker (sustituye lista de mensajes durante el pick) ── */
.wb-chat-task-picker{ display:flex; flex-direction:column; height:100%; min-height:0; gap:0; padding:0; }
.wb-chat-task-picker-head{
  display:flex; align-items:center; gap:6px; padding:10px 12px;
  border-bottom:1px solid var(--border,var(--border)); flex-shrink:0;
}
.wb-chat-task-picker-head input{
  flex:1; background:var(--surface2,var(--surface2)); border:1px solid var(--border,var(--border));
  border-radius:8px; padding:7px 10px; color:var(--text,var(--text));
  font-size:12.5px; font-family:inherit; outline:none;
}
.wb-chat-task-picker-head input:focus{ border-color:var(--accent,var(--accent)); }
.wb-chat-task-picker-cancel{
  background:none; border:none; color:var(--muted,#6b7280); cursor:pointer;
  padding:6px 8px; border-radius:6px; font-size:var(--wb-text-base);
}
.wb-chat-task-picker-cancel:hover{ color:var(--white,#fff); background:var(--surface2,var(--surface2)); }
.wb-chat-task-picker-list{ flex:1; overflow-y:auto; padding:6px 8px; min-height:0; }
.wb-chat-task-picker-empty{ padding:20px; text-align:center; color:var(--muted,#6b7280); font-size:var(--wb-text-sm); }
.wb-chat-task-picker-item{
  padding:8px 10px; border-radius:8px; cursor:pointer;
  transition:background .12s; border:1px solid transparent;
}
.wb-chat-task-picker-item:hover{ background:var(--accent-bg,rgba(23,0,255,.10)); border-color:var(--accent-border,rgba(23,0,255,.30)); }
.wb-chat-task-picker-title{ font-size:12.5px; font-weight:600; color:var(--white,#fff); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-theme="light"] .wb-chat-task-picker-title{ color:var(--text); }
.wb-chat-task-picker-meta{ font-size:var(--wb-text-xs); color:var(--muted,#6b7280); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Update banner (Phase 2) ───────────────────────────────────── */
.wb-shell-update-banner{
  position:fixed; bottom:18px; right:18px; z-index:99998;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px 10px 14px;
  background:var(--glass-bg-strong); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--glass-shadow);
  /* color:var(--border) era un typo: #2a2a2a sobre el glass oscuro dejaba el
     texto del banner ilegible en tema oscuro (light ya usaba var(--text)). */
  font-size:12.5px; color:var(--text2);
  animation:wb-shell-update-in .25s ease-out;
}
[data-theme="light"] .wb-shell-update-banner{
  background:var(--glass-bg-strong);
  border-color:var(--glass-border);
  box-shadow:var(--glass-shadow);
  color:var(--text);
}
.wb-shell-update-text{ display:inline-flex; align-items:center; gap:8px; }
.wb-shell-update-text i{ font-size:.8rem; opacity:.75; }
.wb-shell-update-btn{
  background:#fff; color:var(--bg); border:none;
  padding:5px 12px; border-radius:6px;
  font-size:var(--wb-text-sm); font-weight:600; cursor:pointer;
  transition:transform .12s, background .12s;
}
.wb-shell-update-btn:hover{ background:#f5f5f5; transform:translateY(-1px); }
[data-theme="light"] .wb-shell-update-btn{ background:var(--text); color:#fff; }
[data-theme="light"] .wb-shell-update-btn:hover{ background:#000; }
.wb-shell-update-close{
  background:transparent; border:none; color:rgba(255,255,255,.4);
  cursor:pointer; padding:4px 6px; border-radius:4px;
  font-size:.78rem; transition:color .12s, background .12s;
}
.wb-shell-update-close:hover{ color:#fff; background:rgba(255,255,255,.08); }
[data-theme="light"] .wb-shell-update-close{ color:rgba(0,0,0,.4); }
[data-theme="light"] .wb-shell-update-close:hover{ color:var(--text); background:rgba(0,0,0,.06); }
@keyframes wb-shell-update-in{
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
@media(max-width:768px){
  .wb-shell-update-banner{ left:12px; right:12px; bottom:12px; justify-content:space-between; }
}

/* ============================================================
   Mobile: prevenir autozoom de iOS Safari al focusar inputs.
   iOS hace zoom-in si font-size < 16px. Forzamos 16px en todos los
   inputs/selects/textareas en mobile.
   Combinado con el viewport meta (user-scalable=no, maximum-scale=1)
   evita TODOS los zooms accidentales (pinch, doble-tap, focus).
   ============================================================ */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ============================================================
   PWA Install Prompt — banner inferior + modal instrucciones iOS
   ============================================================ */
.wb-pwa-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 5000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  transform: translateY(120%);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.wb-pwa-banner-in { transform: translateY(0); opacity: 1; }
.wb-pwa-banner .wb-pwa-icon img {
  width: 44px; height: 44px; border-radius: var(--radius-lg);
  display: block;
}
.wb-pwa-banner .wb-pwa-body { flex: 1; min-width: 0; }
.wb-pwa-banner .wb-pwa-title {
  font-size: var(--wb-text-base); font-weight: 400; color: var(--text);
  font-family: 'Cossette Titre', sans-serif;
  text-transform: uppercase; letter-spacing: .5px;
}
.wb-pwa-banner .wb-pwa-desc {
  font-size: var(--wb-text-xs); color: var(--muted); margin-top: 2px;
  line-height: 1.35;
}
.wb-pwa-banner .wb-pwa-cta {
  background: var(--accent); color: #fff; border: none;
  padding: 8px 14px; border-radius: 8px;
  font-family: inherit; font-size: var(--wb-text-sm); font-weight: 700;
  cursor: pointer; min-height: 36px;
  white-space: nowrap;
}
.wb-pwa-banner .wb-pwa-cta:hover { background: var(--accent-h); }
.wb-pwa-banner .wb-pwa-close {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; padding: 0;
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; font-size: var(--wb-text-xs);
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.wb-pwa-banner .wb-pwa-close:hover { color: var(--text); background: var(--surface2); }

/* iOS instrucciones modal */
.wb-pwa-ios-overlay {
  position: fixed; inset: 0; z-index: 5100;
  background: var(--modal-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  transition: opacity .25s ease;
}
.wb-pwa-ios-overlay-in { opacity: 1; }
.wb-pwa-ios-modal {
  position: relative;
  width: 100%; max-width: 420px;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 24px 20px 20px;
  color: var(--text);
  box-shadow: var(--glass-shadow);
  transform: translateY(20px);
  transition: transform .3s ease;
}
.wb-pwa-ios-overlay-in .wb-pwa-ios-modal { transform: translateY(0); }
.wb-pwa-ios-modal h3 {
  font-family: 'Cossette Titre', sans-serif;
  font-size: var(--wb-text-lg); font-weight: 400;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--text); margin: 0 0 14px;
}
.wb-pwa-ios-modal ol {
  padding-left: 22px; margin: 0 0 14px;
  font-size: var(--wb-text-base); line-height: 1.6; color: var(--text2);
}
.wb-pwa-ios-modal ol li { margin-bottom: 8px; }
.wb-pwa-ios-modal ol li i {
  color: var(--accent); margin: 0 2px;
}
.wb-pwa-ios-modal ol li strong { color: var(--text); }
.wb-pwa-ios-note {
  font-size: var(--wb-text-xs); color: var(--muted); margin: 0;
  text-align: center;
}
.wb-pwa-ios-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; font-size: var(--wb-text-md);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.wb-pwa-ios-close:hover { color: var(--text); background: var(--surface2); }

/* Standalone (PWA instalada): el chrome ya maneja safe-area-inset-top vía
   su propio padding. El body NO debe añadir padding (causaba double-padding
   visible como gap masivo arriba). */


/* ─── Spotify integration in music panel ──────────────────────────── */
.wb-shell-mode-bar{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  padding:4px; margin-bottom:8px;
  background:rgba(255,255,255,.05); border-radius:var(--radius-lg);
}
.wb-shell-mode-bar[hidden]{ display:none; }
[data-theme="light"] .wb-shell-mode-bar{ background:rgba(0,0,0,.04); }
.wb-shell-mode-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:6px 8px; border-radius:var(--radius);
  background:transparent; color:rgba(255,255,255,.55);
  border:none; font-size:.72rem; font-weight:600;
  cursor:pointer; transition:all .15s ease;
  white-space:nowrap; min-width:0;
}
.wb-shell-mode-btn span{ overflow:hidden; text-overflow:ellipsis; }
.wb-shell-mode-btn:hover{ color:#fff; }
.wb-shell-mode-btn.active{ background:rgba(255,255,255,.12); color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.wb-shell-mode-btn i, .wb-shell-mode-btn svg{ flex-shrink:0; }
[data-theme="light"] .wb-shell-mode-btn{ color:rgba(0,0,0,.5); }
[data-theme="light"] .wb-shell-mode-btn:hover{ color:#000; }
[data-theme="light"] .wb-shell-mode-btn.active{ background:#fff; color:#000; box-shadow:0 1px 2px rgba(0,0,0,.08); }

.wb-shell-spot-connect-banner{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin-top:10px; padding:10px 12px;
  background:#1db954; color:#000;
  border:none; border-radius:8px;
  font-size:.78rem; font-weight:700;
  cursor:pointer; transition:all .15s ease;
}
.wb-shell-spot-connect-banner:hover{ background:#1ed760; }
.wb-shell-spot-connect-banner[hidden]{ display:none; }
.wb-spot-logo{ flex-shrink:0; }

/* Spotify pane (rich layout with tabs, backdrop, progress) */
.wb-shell-spot-pane{ position:relative; padding:0; min-height:240px; }
.wb-shell-spot-pane[hidden]{ display:none; }
.wb-shell-lofi-pane[hidden]{ display:none; }

/* Backdrop blurred cover */
.wb-shell-spot-backdrop{
  position:absolute; inset:-10px; z-index:0;
  background-size:cover; background-position:center;
  filter:blur(28px) saturate(1.4); opacity:0;
  transition:opacity .5s ease, background-image .5s ease;
  pointer-events:none; border-radius:var(--radius-lg);
}
.wb-shell-spot-backdrop.active{ opacity:.35; }
[data-theme="light"] .wb-shell-spot-backdrop.active{ opacity:.22; }
.wb-shell-spot-pane > *:not(.wb-shell-spot-backdrop){ position:relative; z-index:1; }

/* Tabs */
.wb-shell-spot-tabs{
  display:flex; align-items:center; gap:2px;
  padding:6px 4px 8px;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:8px;
}
[data-theme="light"] .wb-shell-spot-tabs{ border-bottom-color:rgba(0,0,0,.06); }
.wb-shell-spot-tab{
  flex:1; min-width:0; padding:7px 6px;
  background:transparent; border:none; cursor:pointer;
  color:rgba(255,255,255,.4); font-size:.78rem;
  border-radius:6px; transition:all .15s ease;
}
.wb-shell-spot-tab:hover{ background:rgba(255,255,255,.06); color:rgba(255,255,255,.8); }
.wb-shell-spot-tab.active{ background:rgba(29,185,84,.18); color:#1db954; }
[data-theme="light"] .wb-shell-spot-tab{ color:rgba(0,0,0,.4); }
[data-theme="light"] .wb-shell-spot-tab:hover{ background:rgba(0,0,0,.05); color:rgba(0,0,0,.85); }
.wb-shell-spot-expand{
  flex:0; padding:7px 8px;
  background:transparent; border:none; cursor:pointer;
  color:rgba(255,255,255,.35); font-size:.66rem;
  border-radius:6px; transition:all .15s ease;
}
.wb-shell-spot-expand:hover{ background:rgba(255,255,255,.06); color:#fff; }
[data-theme="light"] .wb-shell-spot-expand{ color:rgba(0,0,0,.35); }
[data-theme="light"] .wb-shell-spot-expand:hover{ background:rgba(0,0,0,.05); color:#000; }

/* Tab panes */
.wb-shell-spot-tabpane{ padding:0 2px; }
.wb-shell-spot-tabpane[hidden]{ display:none; }

/* Now Playing track row */
.wb-shell-spot-track{
  display:flex; align-items:center; gap:10px;
  padding:0 0 10px;
}
.wb-shell-spot-cover-wrap{ position:relative; flex-shrink:0; }
.wb-shell-spot-cover{
  width:48px; height:48px; border-radius:6px;
  object-fit:cover; flex-shrink:0;
  background:rgba(255,255,255,.05);
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
[data-theme="light"] .wb-shell-spot-cover{ background:rgba(0,0,0,.06); box-shadow:0 4px 12px rgba(0,0,0,.12); }
.wb-shell-spot-pane.is-playing .wb-shell-spot-cover{ animation:wb-spot-pulse 2.4s ease-in-out infinite; }
@keyframes wb-spot-pulse{
  0%,100%{ box-shadow:var(--shadow), 0 0 0 0 rgba(29,185,84,.0); }
  50%{ box-shadow:var(--shadow), 0 0 0 4px rgba(29,185,84,.18); }
}
.wb-shell-spot-cover-placeholder{
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.25); font-size:1.1rem;
}
[data-theme="light"] .wb-shell-spot-cover-placeholder{ color:rgba(0,0,0,.25); }
.wb-shell-spot-meta{ flex:1; min-width:0; }
.wb-shell-spot-title{
  font-size:.82rem; font-weight:600; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
[data-theme="light"] .wb-shell-spot-title{ color:#000; }
.wb-shell-spot-artist{
  font-size:.7rem; color:rgba(255,255,255,.55); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
[data-theme="light"] .wb-shell-spot-artist{ color:rgba(0,0,0,.55); }
.wb-shell-spot-like{
  flex-shrink:0; padding:6px;
  background:transparent; border:none; cursor:pointer;
  color:rgba(255,255,255,.4); font-size:.95rem;
  border-radius:50%; transition:all .15s ease;
}
.wb-shell-spot-like:hover{ color:#fff; background:rgba(255,255,255,.08); }
.wb-shell-spot-like.liked{ color:#1db954; }
[data-theme="light"] .wb-shell-spot-like{ color:rgba(0,0,0,.4); }
[data-theme="light"] .wb-shell-spot-like:hover{ background:rgba(0,0,0,.06); color:#000; }

/* Progress bar */
.wb-shell-spot-progress{
  display:flex; align-items:center; gap:6px;
  padding:4px 0 8px;
}
.wb-shell-spot-time{
  font-size:.62rem; color:rgba(255,255,255,.45);
  font-variant-numeric:tabular-nums;
  min-width:28px; text-align:center;
}
[data-theme="light"] .wb-shell-spot-time{ color:rgba(0,0,0,.45); }
.wb-shell-spot-seek{
  flex:1; height:4px; appearance:none; -webkit-appearance:none;
  background:rgba(255,255,255,.12); border-radius:2px;
  outline:none; cursor:pointer;
  background-image: linear-gradient(#1db954,#1db954);
  background-repeat:no-repeat;
}
[data-theme="light"] .wb-shell-spot-seek{ background:rgba(0,0,0,.1); }
.wb-shell-spot-seek::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none;
  width:11px; height:11px; border-radius:50%;
  background:#fff; cursor:pointer;
  opacity:0; transition:opacity .15s;
}
.wb-shell-spot-seek:hover::-webkit-slider-thumb{ opacity:1; }
.wb-shell-spot-seek::-moz-range-thumb{
  width:11px; height:11px; border-radius:50%; border:none;
  background:#fff; cursor:pointer; opacity:0;
}
.wb-shell-spot-seek:hover::-moz-range-thumb{ opacity:1; }

/* Controls row */
.wb-shell-spot-controls{ justify-content:center; gap:10px; padding:6px 0 8px; }
.wb-shell-spot-controls .wb-shell-nav{
  background:transparent; border:none; padding:6px;
  color:rgba(255,255,255,.7); font-size:.95rem; cursor:pointer;
  border-radius:50%; transition:all .15s ease;
}
.wb-shell-spot-controls .wb-shell-nav:hover{ background:rgba(255,255,255,.1); color:#fff; }
[data-theme="light"] .wb-shell-spot-controls .wb-shell-nav{ color:rgba(0,0,0,.7); }
[data-theme="light"] .wb-shell-spot-controls .wb-shell-nav:hover{ background:rgba(0,0,0,.06); color:#000; }
.wb-shell-spot-mini-btn{
  background:transparent; border:none; padding:6px;
  color:rgba(255,255,255,.4); font-size:.78rem; cursor:pointer;
  border-radius:4px; transition:all .15s ease;
}
.wb-shell-spot-mini-btn:hover{ color:rgba(255,255,255,.8); }
.wb-shell-spot-mini-btn.active{ color:#1db954; }
[data-theme="light"] .wb-shell-spot-mini-btn{ color:rgba(0,0,0,.4); }
[data-theme="light"] .wb-shell-spot-mini-btn:hover{ color:rgba(0,0,0,.85); }

/* Search */
.wb-shell-spot-search-input{
  width:100%; padding:8px 10px;
  background:rgba(255,255,255,.06); color:#fff;
  border:1px solid rgba(255,255,255,.1); border-radius:var(--radius);
  font-size:.78rem; outline:none;
  margin-bottom:8px; box-sizing:border-box;
}
.wb-shell-spot-search-input:focus{ border-color:#1db954; background:rgba(255,255,255,.08); }
[data-theme="light"] .wb-shell-spot-search-input{
  background:rgba(0,0,0,.04); color:#000; border-color:rgba(0,0,0,.08);
}
[data-theme="light"] .wb-shell-spot-search-input:focus{ background:#fff; border-color:#1db954; }
.wb-shell-spot-search-input::placeholder{ color:rgba(255,255,255,.35); }
[data-theme="light"] .wb-shell-spot-search-input::placeholder{ color:rgba(0,0,0,.35); }
.wb-shell-spot-results{ max-height:240px; overflow-y:auto; }

/* Result/playlist/queue items */
.wb-shell-spot-item{
  display:flex; align-items:center; gap:8px;
  padding:6px 4px; border-radius:6px;
  cursor:pointer; transition:background .15s ease;
}
.wb-shell-spot-item:hover{ background:rgba(255,255,255,.06); }
[data-theme="light"] .wb-shell-spot-item:hover{ background:rgba(0,0,0,.05); }
.wb-shell-spot-item-cover{
  width:36px; height:36px; border-radius:4px; flex-shrink:0;
  object-fit:cover;
  background:rgba(255,255,255,.06);
}
.wb-shell-spot-item-cover-ph{
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.35); font-size:.78rem;
}
.wb-shell-spot-item-info{ flex:1; min-width:0; }
.wb-shell-spot-item-title{
  font-size:.74rem; color:#fff; font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
[data-theme="light"] .wb-shell-spot-item-title{ color:#000; }
.wb-shell-spot-item-sub{
  font-size:.66rem; color:rgba(255,255,255,.5); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
[data-theme="light"] .wb-shell-spot-item-sub{ color:rgba(0,0,0,.5); }
.wb-shell-spot-empty{
  padding:18px; text-align:center;
  color:rgba(255,255,255,.4); font-size:.7rem;
}
[data-theme="light"] .wb-shell-spot-empty{ color:rgba(0,0,0,.4); }

.wb-shell-spot-playlists, .wb-shell-spot-queue{
  max-height:280px; overflow-y:auto;
}

/* Footer with device + disconnect */
.wb-shell-spot-foot{
  display:flex; align-items:center; gap:6px;
  margin-top:10px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
}
[data-theme="light"] .wb-shell-spot-foot{ border-top-color:rgba(0,0,0,.06); }
.wb-shell-spot-device-btn{
  flex:1; display:inline-flex; align-items:center; gap:6px;
  padding:5px 8px; border-radius:6px;
  background:transparent; color:rgba(255,255,255,.5);
  border:none; font-size:.66rem;
  cursor:pointer; min-width:0;
  text-align:left;
}
.wb-shell-spot-device-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-shell-spot-device-btn:hover{ background:rgba(255,255,255,.06); color:#fff; }
[data-theme="light"] .wb-shell-spot-device-btn{ color:rgba(0,0,0,.5); }
[data-theme="light"] .wb-shell-spot-device-btn:hover{ background:rgba(0,0,0,.05); color:#000; }
.wb-shell-spot-foot a{
  flex-shrink:0; padding:5px;
  font-size:.66rem; color:rgba(255,255,255,.35);
  cursor:pointer; text-decoration:none;
  border-radius:4px;
}
.wb-shell-spot-foot a:hover{ color:#1db954; background:rgba(29,185,84,.1); }
[data-theme="light"] .wb-shell-spot-foot a{ color:rgba(0,0,0,.35); }

/* Devices popover */
.wb-shell-spot-devices-pop{
  position:absolute; bottom:42px; left:8px; right:8px;
  background:rgba(20,22,30,.98); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08); border-radius:8px;
  padding:6px; z-index:10;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.wb-shell-spot-devices-pop[hidden]{ display:none; }
[data-theme="light"] .wb-shell-spot-devices-pop{ background:#fff; border-color:rgba(0,0,0,.08); }

/* Mini-player in chrome (replaces headphones button when track active) */
.wb-shell-mini-player{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 6px 3px 3px;
  background:rgba(255,255,255,.06);
  border-radius:16px;
  height:32px; max-width:180px; min-width:0;
  cursor:pointer; transition:background .15s ease;
  vertical-align:middle;
}
.wb-shell-mini-player:hover{ background:rgba(255,255,255,.1); }
.wb-shell-mini-player[hidden]{ display:none !important; }
[data-theme="light"] .wb-shell-mini-player{ background:rgba(0,0,0,.04); }
[data-theme="light"] .wb-shell-mini-player:hover{ background:rgba(0,0,0,.07); }
.wb-shell-mini-cover{
  width:26px; height:26px; border-radius:50%; object-fit:cover;
  flex-shrink:0;
}
.wb-shell-mini-info{
  flex:1; min-width:0; line-height:1.1;
  display:flex; flex-direction:column; justify-content:center;
}
.wb-shell-mini-title{
  font-size:.68rem; font-weight:600; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100px;
}
[data-theme="light"] .wb-shell-mini-title{ color:#000; }
.wb-shell-mini-artist{
  font-size:.58rem; color:rgba(255,255,255,.5);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100px;
  margin-top:1px;
}
[data-theme="light"] .wb-shell-mini-artist{ color:rgba(0,0,0,.5); }
.wb-shell-mini-play{
  width:22px; height:22px; border-radius:50%;
  background:#fff; color:#000; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; font-size:.55rem;
  padding:0;
}
.wb-shell-mini-play:hover{ transform:scale(1.06); }
@media (max-width:700px){ .wb-shell-mini-player{ display:none !important; } }

/* Fullscreen "Now Playing" overlay */
.wb-shell-spot-fullscreen{
  position:fixed; inset:0; z-index:9998;
  display:flex; align-items:center; justify-content:center;
  animation:wb-spot-fs-in .3s cubic-bezier(.2,.8,.2,1);
}
.wb-shell-spot-fullscreen[hidden]{ display:none; }
@keyframes wb-spot-fs-in{ from{ opacity:0; } to{ opacity:1; } }
.wb-shell-spot-fullscreen-bg{
  position:absolute; inset:0;
  background:#000;
  background-size:cover; background-position:center;
}
.wb-shell-spot-fullscreen-bg::after{
  content:''; position:absolute; inset:0;
  backdrop-filter:blur(60px) saturate(1.4); -webkit-backdrop-filter:blur(60px) saturate(1.4);
  background:rgba(0,0,0,.55);
}
.wb-shell-spot-fullscreen-close{
  position:absolute; top:24px; right:24px; z-index:2;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.1); color:#fff;
  border:none; cursor:pointer; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s ease;
}
.wb-shell-spot-fullscreen-close:hover{ background:rgba(255,255,255,.2); transform:scale(1.05); }
.wb-shell-spot-fullscreen-content{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  gap:18px; padding:24px;
  max-width:560px; width:90%;
}
.wb-shell-spot-fullscreen-cover{
  width:min(60vh,400px); height:min(60vh,400px);
  border-radius:14px; object-fit:cover;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
  animation:wb-spot-fs-cover-in .5s cubic-bezier(.2,.8,.2,1);
}
@keyframes wb-spot-fs-cover-in{ from{ transform:scale(.85); opacity:0; } to{ transform:scale(1); opacity:1; } }
.wb-shell-spot-fullscreen-title{
  font-size:1.6rem; font-weight:800; color:#fff;
  text-align:center; margin-top:8px;
  text-shadow:0 2px 12px rgba(0,0,0,.4);
}
.wb-shell-spot-fullscreen-artist{
  font-size:1rem; color:rgba(255,255,255,.75);
  text-align:center;
}
.wb-shell-spot-fullscreen-progress{
  display:flex; align-items:center; gap:10px;
  width:100%; max-width:480px; margin-top:10px;
}
.wb-shell-spot-fullscreen-progress span{
  font-size:.72rem; color:rgba(255,255,255,.6);
  font-variant-numeric:tabular-nums; min-width:40px; text-align:center;
}
.wb-shell-spot-fullscreen-progress input[type=range]{
  flex:1; height:5px; appearance:none; -webkit-appearance:none;
  background:rgba(255,255,255,.18); border-radius:3px;
  outline:none; cursor:pointer;
  background-image: linear-gradient(#1db954,#1db954);
  background-repeat:no-repeat;
}
.wb-shell-spot-fullscreen-progress input[type=range]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:#fff; cursor:pointer;
}
.wb-shell-spot-fullscreen-controls{
  display:flex; align-items:center; gap:18px;
  margin-top:10px;
}
.wb-shell-spot-fullscreen-controls button{
  background:transparent; border:none; cursor:pointer;
  color:rgba(255,255,255,.85); font-size:1.1rem;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s ease;
}
.wb-shell-spot-fullscreen-controls button:hover{ background:rgba(255,255,255,.1); color:#fff; }
.wb-shell-spot-fullscreen-play{
  background:#fff !important; color:#000 !important;
  width:64px !important; height:64px !important;
  font-size:1.4rem !important;
}
.wb-shell-spot-fullscreen-play:hover{ background:#f0f0f0 !important; transform:scale(1.05); }
.wb-shell-spot-fullscreen-controls button.active{ color:#1db954; }

@media (max-width:700px){
  .wb-shell-spot-fullscreen-cover{ width:78vw; height:78vw; }
  .wb-shell-spot-fullscreen-title{ font-size:1.2rem; }
}


/* ── Bubble chat: emoji + GIF picker ─────────────────────────────── */
.wb-chat-input-bar{ position:relative; }
.wb-chat-icon-btn{
  background:transparent;border:none;color:var(--muted, #6b7280);cursor:pointer;
  padding:0 8px;height:34px;border-radius:6px;display:flex;align-items:center;
  justify-content:center;font-size:var(--wb-text-lg);transition:background .12s,color .12s;flex-shrink:0;
}
.wb-chat-icon-btn:hover{ color:var(--text, #e0e0e0); background:var(--surface2, #1a1a1a); }
.wb-chat-emoji-picker,.wb-chat-gif-picker{
  position:absolute;left:8px;bottom:calc(100% + 6px);width:300px;max-width:calc(100% - 16px);
  background:var(--surface, #111111);border:1px solid var(--border, #2a2a2a);
  border-radius:var(--radius-lg);box-shadow:0 8px 24px rgba(0,0,0,.45);padding:8px;z-index:60;
}
.wb-chat-gif-picker{ width:340px; }
.wb-chat-emoji-picker[hidden],.wb-chat-gif-picker[hidden]{ display:none; }
.wb-chat-emoji-tabs{ display:flex;gap:2px;margin-bottom:6px;border-bottom:1px solid var(--border, #2a2a2a);padding-bottom:6px; }
.wb-chat-emoji-tab{
  background:transparent;border:none;cursor:pointer;font-size:var(--wb-text-lg);padding:4px 8px;border-radius:6px;
  opacity:.55;transition:opacity .12s,background .12s;
}
.wb-chat-emoji-tab:hover{ opacity:.85;background:var(--surface2, #1a1a1a); }
.wb-chat-emoji-tab.active{ opacity:1;background:var(--surface2, #1a1a1a); }
.wb-chat-emoji-grid{ display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:200px;overflow-y:auto; }
.wb-chat-emoji-item{
  background:transparent;border:none;cursor:pointer;font-size:var(--wb-text-xl);padding:4px;border-radius:6px;
  transition:background .12s,transform .08s;line-height:1;
}
.wb-chat-emoji-item:hover{ background:var(--surface2, #1a1a1a);transform:scale(1.15); }
.wb-chat-gif-search-row{ display:flex;align-items:center;gap:8px;margin-bottom:8px; }
.wb-chat-gif-search-row input{
  flex:1;padding:6px 10px;border:1px solid var(--border, #2a2a2a);border-radius:6px;
  background:var(--surface2, #1a1a1a);color:var(--text, #e0e0e0);font-size:var(--wb-text-base);
}
.wb-chat-gif-search-row input:focus{ outline:none;border-color:var(--accent, #1700FF); }
.wb-chat-gif-grid{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;max-height:300px;overflow-y:auto;width:100%;box-sizing:border-box; }
.wb-chat-gif-item{ cursor:pointer;border-radius:6px;overflow:hidden;background:var(--surface2, #1a1a1a);position:relative;width:100%;height:100px;display:block; }
.wb-chat-gif-item img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .15s; }
.wb-chat-gif-item:hover img{ transform:scale(1.05); }
.wb-chat-msg-gif img{ display:block; }