/* stlw-chat-full-panel.css
 * CSS del component compartit STLW ONE (FAB + panel + chat + reptes + freestyle).
 * Extret verbatim del bloc <style> dedicat de stalow-home-unified-10__1_.html (font canonica).
 * NOTA: els overrides responsius dins @media compartits (~home 2883-4652) NO son aqui;
 * resten inline a cada pagina (residual conegut, identic a les dues, amb !important).
 * NO editar a banda sense actualitzar la font.
 */
    /* ══════════════════════════════════════════════
       STLW AVATAR SYSTEM — Botó flotant + Animacions
    ══════════════════════════════════════════════ */
    #stlw-one-btn {
      position: fixed; bottom: 88px; right: 20px; z-index: 100000;
      transition: box-shadow 0.3s, opacity 0.25s ease;
      width: 68px; height: 68px; border-radius: 50%;
      background: linear-gradient(145deg, #050e0e, #0d1f1f);
      border: 2px solid rgba(59,191,191,0.5);
      box-shadow: 0 0 28px rgba(59,191,191,0.22), 0 6px 28px rgba(0,0,0,0.7);
      cursor: pointer; overflow: visible;
      display: flex; align-items: center; justify-content: center;
      transition: box-shadow 0.3s, opacity 0.25s ease;
    }
    #stlw-one-btn:hover { box-shadow: 0 0 42px rgba(59,191,191,0.5), 0 8px 36px rgba(0,0,0,0.8); }
    /* Sense sessió: STLW ONE és visible (FAB + panell) perquè el convidat
       pugui obrir-lo i fer servir el reproductor. L'enviament de missatges
       està bloquejat a stlwSend/stlwSendChip/stlwMicToggle, que demanen login. */
    /* Quan la barra inferior (admin-quick-bar ~46px) és visible, tot puja igual */
    body.admin-bar-active .stlw-shop-fab { bottom: 50px; }
    body.admin-bar-active .stlw-cart-fab { bottom: 50px; }
    body.admin-bar-active #stlw-one-btn  { bottom: 110px; }
    @media (max-width: 600px) {
      #stlw-one-btn { right: 20px; }
    }

    /* ── MODE ADMIN: engranatge giratori al FAB ── */
    #stlw-one-btn.admin-mode {
      background: linear-gradient(145deg, #1a1200, #2e2000);
      border-color: rgba(255,200,0,0.7);
      box-shadow: 0 0 32px rgba(255,200,0,0.28), 0 6px 28px rgba(0,0,0,0.7);
    }
    #stlw-one-btn.admin-mode:hover {
      box-shadow: 0 0 50px rgba(255,200,0,0.55), 0 8px 36px rgba(0,0,0,0.8);
    }
    #stlw-one-btn .admin-gear-svg {
      display: none;
      position: absolute;
      width: 100%; height: 100%;
      top: 0; left: 0;
      transform-origin: center center;
      overflow: visible;
      z-index: 0;
      animation: admin-gear-spin 6s linear infinite;
      opacity: 0.9;
    }
    #stlw-one-btn.admin-mode .admin-gear-svg { display: block; }
    #stlw-one-btn svg.krs-avatar { position: relative; z-index: 1; }
    #stlw-one-btn.admin-mode #stlw-one-ping { border-color: #ffc800; background: #ffc800; }
    @keyframes admin-gear-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    /* ── MODE ADMIN: engranatge al header del chat ── */
    .stlw-chat-avatar .admin-gear-overlay {
      display: none;
      position: absolute;
      inset: -5px;
      z-index: 0;
      animation: admin-gear-spin 8s linear infinite;
      opacity: 0.8;
      pointer-events: none;
    }
    .stlw-chat-avatar .admin-gear-overlay svg {
      width: 100%; height: 100%;
      display: block;
      transform-origin: center center;
    }
    .stlw-chat-avatar.admin-active .admin-gear-overlay { display: block; }
    .stlw-chat-avatar svg { position: relative; z-index: 1; }

    /* SVG del botó: pot sortir de la rodona */
    #stlw-one-btn svg.krs-avatar {
      width: 100%; height: 100%; border-radius: 50%;
      transform-origin: center bottom;
      transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
                  filter 0.4s;
      display: block;
    }

    /* ── 5 ANIMACIONS ── */
    /* 1. BOUNCE: rebota amunt */
    @keyframes av-bounce {
      0%,100%{ transform: translateY(0) scale(1); }
      30%    { transform: translateY(-14px) scale(1.08); }
      55%    { transform: translateY(-6px)  scale(1.04); }
      75%    { transform: translateY(-10px) scale(1.06); }
    }
    /* 2. SHAKE: sacseja d'esquerra a dreta com un MC */
    @keyframes av-shake {
      0%,100%{ transform: rotate(0deg) scale(1); }
      15%    { transform: rotate(-12deg) scale(1.1) translateX(-4px); }
      35%    { transform: rotate(14deg)  scale(1.12) translateX(4px); }
      55%    { transform: rotate(-8deg)  scale(1.08) translateX(-2px); }
      75%    { transform: rotate(6deg)   scale(1.05) translateX(2px); }
    }
    /* 3. POP-OUT: surt de la rodona cap amunt */
    @keyframes av-popout {
      0%  { transform: scale(1) translateY(0); filter: drop-shadow(0 0 0px rgba(59,191,191,0)); }
      40% { transform: scale(1.6) translateY(-18%) rotate(-5deg); filter: drop-shadow(0 6px 16px rgba(59,191,191,0.7)); }
      70% { transform: scale(1.5) translateY(-15%) rotate(3deg);  filter: drop-shadow(0 6px 14px rgba(59,191,191,0.5)); }
      100%{ transform: scale(1) translateY(0); filter: drop-shadow(0 0 0px rgba(59,191,191,0)); }
    }
    /* 4. SPIN: gira 360 estil DJ */
    @keyframes av-spin {
      0%  { transform: rotate(0deg) scale(1); }
      40% { transform: rotate(200deg) scale(1.15); }
      70% { transform: rotate(330deg) scale(1.05); }
      100%{ transform: rotate(360deg) scale(1); }
    }
    /* 5. WAVE: balanceja com un show */
    @keyframes av-wave {
      0%,100%{ transform: rotate(0deg) translateY(0) scale(1); }
      20%    { transform: rotate(-15deg) translateY(-8px) scale(1.1); }
      40%    { transform: rotate(15deg)  translateY(-12px) scale(1.12); }
      60%    { transform: rotate(-10deg) translateY(-6px) scale(1.08); }
      80%    { transform: rotate(8deg)   translateY(-10px) scale(1.1); }
    }

    /* Classes d'animació (s'apliquen al svg) */
    #stlw-one-btn.anim-bounce  svg.krs-avatar { animation: av-bounce  0.75s cubic-bezier(0.34,1.56,0.64,1); }
    #stlw-one-btn.anim-shake   svg.krs-avatar { animation: av-shake   0.7s ease-in-out; }
    #stlw-one-btn.anim-popout  svg.krs-avatar { animation: av-popout  0.85s cubic-bezier(0.34,1.56,0.64,1); }
    #stlw-one-btn.anim-spin    svg.krs-avatar { animation: av-spin    0.8s cubic-bezier(0.34,1.56,0.64,1); }
    #stlw-one-btn.anim-wave    svg.krs-avatar { animation: av-wave    0.9s cubic-bezier(0.34,1.56,0.64,1); }

    /* ── SKIN TRANSITION ── */
    #stlw-one-btn svg.krs-avatar.skin-out {
      animation: skin-exit 0.35s cubic-bezier(0.55,0,1,0.45) forwards !important;
    }
    #stlw-one-btn svg.krs-avatar.skin-in {
      animation: skin-enter 0.4s cubic-bezier(0.34,1.56,0.64,1) both !important;
    }
    @keyframes skin-exit  { to   { transform: scale(0) rotate(180deg); opacity: 0; } }
    @keyframes skin-enter { from { transform: scale(0) rotate(-180deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }

    /* Ping verd */
    #stlw-one-ping {
      position: absolute; top: 2px; right: 2px;
      min-width: 18px; height: 18px; border-radius: 9px; background: #ff4747;
      z-index: 1; display: none;
      font-size: 9px; font-weight: 900; color: #fff; font-family: 'Montserrat', sans-serif;
      text-align: center; line-height: 18px; padding: 0 4px;
      box-shadow: 0 0 8px rgba(255,71,71,0.5);
      animation: stlwPingPulse 1.4s ease-in-out infinite;
    }
    @keyframes stlwPingPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(59,191,191,0.7); transform: scale(1); }
      50% { box-shadow: 0 0 0 6px rgba(59,191,191,0); transform: scale(1.15); }
    }
    #stlw-one-ping::after {
      content: ''; position: absolute; inset: -3px; border-radius: 50%;
      border: 1.5px solid #3bbfbf; animation: stlw-ping 1.8s infinite;
    }
    @keyframes stlw-ping {
      0%  { transform: scale(1); opacity: 0.8; }
      100%{ transform: scale(2.4); opacity: 0; }
    }

    /* ── SKIN SELECTOR al header del chat ── */
    .stlw-skin-selector {
      display: flex; align-items: center; gap: 6px;
      font-size: 8px; letter-spacing: 1px; color: rgba(255,255,255,0.4);
    }
    .stlw-skin-selector select {
      background: rgba(59,191,191,0.08); border: 1px solid rgba(59,191,191,0.25);
      color: rgba(255,255,255,0.75); border-radius: 6px; font-size: 8px;
      padding: 2px 5px; cursor: pointer; font-family: 'Montserrat', Arial, Helvetica, sans-serif;
      letter-spacing: 0.5px;
    }
    .stlw-skin-selector select:focus { outline: none; border-color: rgba(59,191,191,0.5); }

    /* ── PANEL PRINCIPAL ── */
    #stlw-one-panel {
      position: fixed; bottom: 166px; right: 20px; z-index: 99999;
      width: 380px; min-height: 480px; max-height: calc(100vh - 174px);
      background: #080d0d;
      border: 1px solid rgba(59,191,191,0.18);
      border-radius: 16px;
      box-shadow: 0 12px 70px rgba(0,0,0,0.85), 0 0 50px rgba(59,191,191,0.06);
      display: flex; flex-direction: column;
      transform: translateY(22px) scale(0.94); opacity: 0; pointer-events: none;
      transition: opacity 0.38s cubic-bezier(0.34,1.56,0.64,1), transform 0.38s cubic-bezier(0.34,1.56,0.64,1);
      font-family: 'Montserrat', Arial, Helvetica, sans-serif; overflow: visible;
    }
    /* Reclipa interiorment perquè els fills respectin les cantonades arrodonides
       però l'avatar usuari pugui sobresortir del panell */
    #stlw-one-panel .stlw-chat-header { border-radius: 16px 16px 0 0; overflow: hidden; }
    #stlw-one-panel .stlw-chat-header { position: relative; z-index: 1; }
    #stlw-one-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: all; }
    /* Mentre l'usuari arrossega: desactivem la transició perquè el resize sigui fluid */
    #stlw-one-panel.stlw-one-resizing { transition: none !important; }
    /* Wrapper columna esquerra: transparent per defecte (portrait), només
       es converteix en rail flex en landscape (veure media query landscape). */
    #stlw-one-left { display: contents; }

    /* ── RESIZE HANDLES (doble clic per restablir) ── */
    .stlw-one-resize {
      position: absolute; z-index: 100; pointer-events: auto;
      background: rgba(59,191,191,0.08); transition: background .15s;
    }
    .stlw-one-resize-w {
      left: 0; top: 20px; bottom: 20px;
      width: 10px; cursor: ew-resize;
      border-top-left-radius: 16px; border-bottom-left-radius: 16px;
    }
    .stlw-one-resize-n {
      top: 0; left: 20px; right: 20px;
      height: 10px; cursor: ns-resize;
      border-top-left-radius: 16px; border-top-right-radius: 16px;
    }
    .stlw-one-resize-nw {
      top: 0; left: 0;
      width: 22px; height: 22px;
      cursor: nwse-resize;
      border-top-left-radius: 16px;
    }
    .stlw-one-resize:hover,
    .stlw-one-resize.active { background: rgba(59,191,191,0.32); }
    .stlw-one-resize-nw::after {
      content: ''; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px;
      border-left: 2px solid rgba(59,191,191,0.45);
      border-top: 2px solid rgba(59,191,191,0.45);
      border-top-left-radius: 4px;
      opacity: .7; pointer-events: none;
    }
    @media (max-width:600px){
      /* Sense resize en mòbil: el panel ocupa tot l'ample disponible */
      .stlw-one-resize { display: none; }
    }

    /* ── MÒBIL: finestra flotant compacta, cantonada dreta ── */
    @media(max-width:600px){
      #stlw-one-panel {
        width: calc(100vw - 24px);
        max-width: 360px;
        right: 12px;
        left: auto;
        bottom: 88px;
        max-height: 72vh;
        border-radius: 14px;
        border: 1px solid rgba(59,191,191,0.25);
        transform: translateY(14px) scale(0.95);
      }
      #stlw-one-panel.open { transform: translateY(0) scale(1); }
      #stlw-one-btn { bottom: 88px; right: 20px; width: 58px; height: 58px; }
      /* Missatge de benvinguda de STLW ONE: amagat en mòbil per no complicar l'aterratge */
      #stlw-one-panel .stlw-msg.bot:has(.stlw-msg-avatar.first-greet) { display: none !important; }
    }
    /* ── Compacta internament per aprofitar l'espai vertical ── */
    @media(max-width:600px){
      .stlw-chat-status    { display: none; } /* guanya 1 línia d'alçada al header */
      .stlw-chat-header    { padding: 9px 12px; gap: 8px; }
      .stlw-chat-avatar    { width: 54px; height: 54px; }
      /* Chips: sempre 1 fila scrollable en mòbil */
      .stlw-chat-chips {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 5px 10px !important;
        gap: 4px !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        align-items: center !important;
        max-height: none !important;
      }
      .stlw-chat-chips::-webkit-scrollbar { display: none; }
      .stlw-chip { padding: 4px 8px; font-size: 7.5px; }
      .stlw-chip-label { display: none; } /* Elimina el ◈ label */
      .stlw-chat-input-wrap{ padding: 8px 8px; gap: 6px; }
      #stlw-chat-input     { padding: 7px 12px; font-size: 16px; min-width: 0; }
      #stlw-chat-send      { width: 36px; height: 36px; }
      #stlw-mic-btn        { width: 36px; height: 36px; font-size: 14px; }
      #stlw-emoji-btn      { width: 36px; height: 36px; font-size: 15px; }
      .stlw-chat-messages  { padding: 10px 12px; gap: 8px; }
    }

    /* ── HEADER ── */
    .stlw-chat-header {
      display: flex; align-items: center; gap: 11px;
      padding: 13px 16px;
      background: linear-gradient(135deg,#071414,#0a1a1a);
      border-bottom: 1px solid rgba(59,191,191,0.1);
      flex-shrink: 0;
    }
    .stlw-chat-avatar {
      width: 64px; height: 64px; border-radius: 50%; overflow: visible;
      border: 1.5px solid rgba(59,191,191,0.4);
      flex-shrink: 0; position: relative;
      box-shadow: 0 0 12px rgba(59,191,191,0.2);
    }
    .stlw-chat-avatar svg { width: 100%; height: 100%; border-radius: 50%; position: relative; z-index: 1; }
    .stlw-chat-avatar::after {
      content: ''; position: absolute; bottom: 2px; right: 2px;
      width: 8px; height: 8px; border-radius: 50%;
      background: #4cff91; border: 1.5px solid #080d0d;
      z-index: 2;
    }

    /* ── ANAGLYPH AVATAR — capes de color sobre el wrapper ── */
    /* Usem un pseudo-element sobre el contenidor de l'avatar del header */
    .stlw-chat-avatar .av-anaglyph-r,
    .stlw-chat-avatar .av-anaglyph-c {
      position: absolute; inset: 0; border-radius: 50%;
      pointer-events: none; z-index: 0;
    }
    .stlw-chat-avatar .av-anaglyph-r {
      box-shadow: -3px 0 0 0 rgba(255,40,40,0.55), 3px 0 0 0 rgba(0,0,0,0);
      animation: av-ana-r 4s ease-in-out infinite;
      mix-blend-mode: screen;
    }
    .stlw-chat-avatar .av-anaglyph-c {
      box-shadow: 3px 0 0 0 rgba(0,220,255,0.45), -3px 0 0 0 rgba(0,0,0,0);
      animation: av-ana-c 4s ease-in-out infinite;
      mix-blend-mode: screen;
    }
    @keyframes av-ana-r {
      0%,100%{ transform: translateX(0); opacity:0; box-shadow: 0 0 0 0 rgba(255,40,40,0); }
      20%    { transform: translateX(-2px); opacity:1; box-shadow: -3px 0 8px 1px rgba(255,40,40,0.5); }
      45%    { transform: translateX(-3px); opacity:0.8; box-shadow: -4px 0 10px 2px rgba(255,40,40,0.4); }
      70%    { transform: translateX(-1.5px); opacity:0.9; box-shadow: -2px 0 6px 1px rgba(255,40,40,0.45); }
      88%    { opacity:0.2; }
    }
    @keyframes av-ana-c {
      0%,100%{ transform: translateX(0); opacity:0; box-shadow: 0 0 0 0 rgba(0,220,255,0); }
      20%    { transform: translateX(2px); opacity:1; box-shadow: 3px 0 8px 1px rgba(0,220,255,0.4); }
      45%    { transform: translateX(3px); opacity:0.8; box-shadow: 4px 0 10px 2px rgba(0,220,255,0.35); }
      70%    { transform: translateX(1.5px); opacity:0.9; box-shadow: 2px 0 6px 1px rgba(0,220,255,0.38); }
      88%    { opacity:0.2; }
    }

    /* ── ANAGLYPH BOTÓ FLOTANT ── */
    #stlw-one-btn .av-anaglyph-r,
    #stlw-one-btn .av-anaglyph-c {
      position: absolute; inset: 0; border-radius: 50%;
      pointer-events: none; z-index: 2;
    }
    #stlw-one-btn .av-anaglyph-r {
      animation: av-ana-r 4s ease-in-out infinite;
      box-shadow: -3px 0 10px 2px rgba(255,40,40,0.5);
      mix-blend-mode: screen;
    }
    #stlw-one-btn .av-anaglyph-c {
      animation: av-ana-c 4s ease-in-out infinite;
      box-shadow: 3px 0 10px 2px rgba(0,220,255,0.4);
      mix-blend-mode: screen;
    }
    .stlw-chat-info { flex: 1; min-width: 0; overflow: hidden; }
    .stlw-header-actions {
      display: flex; align-items: center; gap: 5px;
      margin-left: auto; flex-shrink: 0;
    }
    .stlw-skin-inline {
      display: flex; align-items: center; gap: 5px; margin-top: 4px;
    }
    .stlw-skin-label {
      font-size: 7px; font-weight: 900; letter-spacing: 2px;
      color: rgba(59,191,191,0.5); text-transform: uppercase;
    }
    .stlw-skin-inline select {
      background: #0d1a1a; border: 1px solid rgba(59,191,191,0.2);
      color: rgba(255,255,255,0.85); border-radius: 5px; font-size: 8px;
      padding: 2px 5px; cursor: pointer; font-family: 'Montserrat', Arial, Helvetica, sans-serif;
      letter-spacing: 0.5px; outline: none; font-weight: 700;
      transition: border-color 0.2s;
      -webkit-appearance: none; appearance: none;
    }
    .stlw-skin-inline select option {
      background: #0d1a1a; color: #f0f0f0;
    }
    .stlw-skin-inline select:focus { border-color: rgba(59,191,191,0.5); }
    .stlw-chat-name {
      font-size: 12px; font-weight: 800; color: #fff; letter-spacing: 2px; text-transform: uppercase;
      display: flex; align-items: center;
    }
    .stlw-chat-name .stlw-name-one { color: #3bbfbf; }

    /* ── ANAGLYPH ANIMAT ── */
    .stlw-name-anaglyph {
      position: relative; display: inline-block;
    }
    /* Capa vermella (esquerra) */
    .stlw-name-anaglyph::before {
      content: 'STLW ONE';
      position: absolute; inset: 0;
      color: #ff2020;
      mix-blend-mode: screen;
      animation: anaglyph-r 3.5s ease-in-out infinite;
      pointer-events: none;
      opacity: 0.85;
    }
    /* Capa cian (dreta) */
    .stlw-name-anaglyph::after {
      content: 'STLW ONE';
      position: absolute; inset: 0;
      color: #00e5ff;
      mix-blend-mode: screen;
      animation: anaglyph-c 3.5s ease-in-out infinite;
      pointer-events: none;
      opacity: 0.85;
    }
    @keyframes anaglyph-r {
      0%,100%{ transform: translateX(0px); opacity:0; }
      15%    { transform: translateX(-3px); opacity:0.9; }
      35%    { transform: translateX(-5px); opacity:0.85; }
      50%    { transform: translateX(-2px); opacity:0.7; }
      65%    { transform: translateX(-4px); opacity:0.85; }
      80%    { transform: translateX(-1px); opacity:0.5; }
      90%    { opacity:0; }
    }
    @keyframes anaglyph-c {
      0%,100%{ transform: translateX(0px); opacity:0; }
      15%    { transform: translateX(3px); opacity:0.9; }
      35%    { transform: translateX(5px); opacity:0.85; }
      50%    { transform: translateX(2px); opacity:0.7; }
      65%    { transform: translateX(4px); opacity:0.85; }
      80%    { transform: translateX(1px); opacity:0.5; }
      90%    { opacity:0; }
    }
    .stlw-chat-status { font-size: 8.5px; color: #4cff91; letter-spacing: 1.5px; margin-top: 2px; }
    /* ── Notificació acció admin (apareix al header del chat) ── */
    #stlw-home-action-notif {
      display: none;
      position: absolute;
      top: 8px; right: 70px;
      background: rgba(10,10,18,0.97);
      border: 1px solid rgba(76,255,145,0.45);
      border-left: 3px solid #4cff91;
      border-radius: 6px;
      padding: 5px 10px;
      font-family: var(--font-mono, monospace);
      font-size: 9px; font-weight: 800;
      color: #4cff91; letter-spacing: 0.5px;
      white-space: nowrap;
      z-index: 99999;
      pointer-events: none;
      animation: stlwNotifIn 0.2s ease;
    }
    #stlw-home-action-notif.visible { display: block; }
    @keyframes stlwNotifIn {
      from { opacity:0; transform: translateY(-4px); }
      to   { opacity:1; transform: translateY(0); }
    }
    .stlw-chat-cfg-btn {
      background: none; border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.35);
      cursor: pointer; padding: 0; border-radius: 6px; font-size: 14px; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      width: 28px; height: 28px;
      transition: all 0.15s; margin-right: 4px; flex-shrink: 0;
    }
    #stlw-notif-bell:hover { color: #ffd700 !important; border-color: rgba(255,215,0,0.3) !important; background: rgba(255,215,0,0.08) !important; }
    .stlw-chat-cfg-btn:hover { color: var(--accent,#3bbfbf); border-color: rgba(59,191,191,0.3); }
    .stlw-chat-cfg-btn.active { color: var(--accent,#3bbfbf); border-color: var(--accent,#3bbfbf); background: rgba(59,191,191,0.08); }
    /* ── Avatar usuari sobresortint a la cantonada superior dreta del panell ── */
    .stlw-chat-user-av {
      position: absolute;
      top: -16px; right: 14px;
      width: 64px; height: 64px; border-radius: 50%;
      border: none;
      background: #0d1414; color: #ff9f47;
      cursor: pointer; display: none;
      align-items: center; justify-content: center;
      font-size: 22px; font-weight: 900; letter-spacing: 0.5px;
      font-family: 'Montserrat', Arial, Helvetica, sans-serif;
      overflow: hidden; padding: 0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.6);
      z-index: 30;
      transition: transform 0.18s, box-shadow 0.18s;
    }
    .stlw-chat-user-av:hover { transform: scale(1.04); box-shadow: 0 6px 16px rgba(0,0,0,0.75); }
    .stlw-chat-user-av.has-photo { background-size: cover; background-position: center; color: transparent; }
    /* Reservem espai a la dreta del header per l'avatar, i posicionem la fila
       d'accions (🔔 ⚙ ✕) absolutament a sota seu. SKIN/VEU van en files separades. */
    #stlw-one-panel .stlw-chat-header {
      padding-right: 96px; padding-top: 10px; padding-bottom: 10px;
      align-items: stretch; min-height: 96px; position: relative;
    }
    #stlw-one-panel .stlw-chat-header > .stlw-chat-avatar { align-self: flex-start; }
    #stlw-one-panel .stlw-chat-header > .stlw-chat-info {
      display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 76px;
    }
    #stlw-one-panel .stlw-chat-header > .stlw-chat-info .stlw-chat-status { margin-top: 0; }
    /* Bell + close: a l'esquerra de la foto d'usuari (top-right del panell).
       L'avatar és right:14px width:64px, així que aquí right:84px deixa 4px de gap. */
    #stlw-one-panel .stlw-chat-header > .stlw-header-actions {
      position: absolute; top: 8px; right: 84px;
      flex-direction: row; gap: 4px;
      margin: 0; padding: 0;
    }
    #stlw-one-panel .stlw-chat-header .stlw-skin-inline { margin-top: 0; }
    #stlw-one-panel .stlw-chat-header .stlw-skin-inline select {
      font-size: 9px; padding: 4px 8px; flex: 1; min-width: 0;
    }
    #stlw-one-panel .stlw-chat-header .stlw-skin-label { font-size: 8px; }
    @media (max-width: 480px) {
      .stlw-chat-user-av { top: -14px; right: 10px; width: 54px; height: 54px; font-size: 18px; }
      #stlw-one-panel .stlw-chat-header { padding-right: 78px; min-height: 84px; }
      #stlw-one-panel .stlw-chat-header > .stlw-header-actions { top: 6px; right: 70px; }
    }
        .stlw-chat-close {
      width: 28px; height: 28px; border-radius: 50%;
      background: rgba(255,255,255,0.05); border: none; cursor: pointer;
      color: rgba(255,255,255,0.4); font-size: 14px;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.2s; flex-shrink: 0;
    }
    .stlw-chat-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

    /* ── TABS CONVERSES ── */
    .stlw-tabs-bar {
      display: flex; gap: 0;
      border-bottom: 1px solid rgba(59,191,191,0.08);
      background: rgba(0,0,0,0.3);
      flex-shrink: 0; overflow-x: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(59,191,191,0.2) transparent;
    }
    .stlw-tabs-bar::-webkit-scrollbar { height: 3px; }
    .stlw-tabs-bar::-webkit-scrollbar-track { background: transparent; }
    .stlw-tabs-bar::-webkit-scrollbar-thumb { background: rgba(59,191,191,0.25); border-radius: 3px; }
    .stlw-tabs-bar::-webkit-scrollbar-thumb:hover { background: rgba(59,191,191,0.4); }
    .stlw-tab-btn {
      padding: 7px 12px; font-size: 8px; font-weight: 800;
      letter-spacing: 1.5px; text-transform: uppercase;
      color: rgba(255,255,255,0.25); background: transparent; border: none;
      border-bottom: 2px solid transparent; cursor: pointer;
      white-space: nowrap; transition: all 0.2s;
      font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    }
    .stlw-tab-btn.active { color: #3bbfbf; border-bottom-color: #3bbfbf; }
    .stlw-tab-btn:hover:not(.active) { color: rgba(255,255,255,0.5); }
    .stlw-tab-btn .stlw-tab-dot {
      display: inline-block; width: 5px; height: 5px; border-radius: 50%;
      background: #3bbfbf; margin-right: 4px; vertical-align: middle;
    }
    .stlw-tab-new {
      padding: 7px 10px; font-size: 14px; background: transparent; border: none;
      color: rgba(59,191,191,0.4); cursor: pointer; transition: color 0.2s;
      font-family: 'Montserrat', Arial, Helvetica, sans-serif; margin-left: auto;
      position: relative;
    }
    .stlw-tab-new:hover { color: #3bbfbf; }

    /* ── Menú flotant converses ── */
    #stlw-conv-menu {
      position: fixed; z-index: 999999;
      background: #080e0e;
      border: 1px solid rgba(59,191,191,0.25);
      border-radius: 12px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.85), 0 0 30px rgba(59,191,191,0.07);
      padding: 8px 0;
      min-width: 220px; width: 232px;
      max-height: calc(100dvh - 80px);
      overflow-y: auto; overflow-x: hidden;
      scrollbar-width: thin;
      scrollbar-color: rgba(59,191,191,0.2) transparent;
      font-family: 'Montserrat', Arial, Helvetica, sans-serif;
      animation: conv-menu-in 0.18s cubic-bezier(0.34,1.56,0.64,1);
    }
    #stlw-conv-menu::-webkit-scrollbar { width: 3px; }
    #stlw-conv-menu::-webkit-scrollbar-thumb { background: rgba(59,191,191,0.25); border-radius: 2px; }

    #stlw-tab-menu {
      position: fixed; z-index: 999999;
      background: #080e0e; border: 1px solid rgba(59,191,191,0.25);
      border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.85);
      padding: 6px 0; min-width: 220px; width: 232px;
      max-height: calc(100dvh - 60px); overflow-y: auto; overflow-x: hidden;
      scrollbar-width: thin; font-family: 'Montserrat', Arial, sans-serif;
      animation: conv-menu-in 0.18s cubic-bezier(0.34,1.56,0.64,1);
    }
    .stlw-tab-menu-header { font-size:7px;font-weight:900;letter-spacing:2px;color:rgba(59,191,191,0.5);text-transform:uppercase;padding:6px 14px 4px; }
    .stlw-tab-menu-item { display:flex;align-items:center;gap:9px;padding:8px 14px;font-size:10px;font-weight:700;color:rgba(255,255,255,0.6);background:transparent;border:none;width:100%;text-align:left;cursor:pointer;font-family:'Montserrat',Arial,sans-serif;transition:background 0.1s,color 0.1s; }
    .stlw-tab-menu-item:hover { background:rgba(59,191,191,0.07);color:#fff; }
    .stlw-tab-menu-item.danger { color:rgba(255,71,71,0.7); }
    .stlw-tab-menu-item.danger:hover { background:rgba(255,71,71,0.08);color:#ff4747; }
    .tm-icon { width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);font-size:11px;flex-shrink:0; }
    .stlw-tab-menu-sep { height:1px;background:rgba(255,255,255,0.05);margin:4px 0; }
    .stlw-tab-rename-wrap { display:none;padding:8px 10px;gap:6px; }
    .stlw-tab-rename-wrap.visible { display:flex; }
    .stlw-tab-rename-input { flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:6px;color:#fff;font-size:10px;padding:5px 8px;outline:none;font-family:'Montserrat',Arial,sans-serif; }
    .stlw-tab-rename-ok { background:rgba(59,191,191,0.15);border:1px solid rgba(59,191,191,0.3);color:#3bbfbf;font-size:9px;font-weight:800;letter-spacing:1px;padding:5px 10px;border-radius:5px;cursor:pointer;font-family:'Montserrat',Arial,sans-serif; }
    /* Tab close button */
    .stlw-tab-btn { display:inline-flex;align-items:center;gap:0; }
    .stlw-tab-close { display:inline-flex;align-items:center;justify-content:center;margin-left:5px;width:14px;height:14px;border-radius:3px;font-size:9px;line-height:1;color:rgba(255,255,255,0.2);background:transparent;border:none;cursor:pointer;padding:0;flex-shrink:0;transition:all 0.15s; }
    .stlw-tab-close:hover { background:rgba(255,71,71,0.25);color:#ff7070; }
    /* User pill — posicionada absoluta sota la foto d'usuari (top-right del panell),
       per deixar tot l'espai horitzontal de la pill bar al mini music player. */
    .stlw-user-pill { display:none;align-items:center;gap:5px;padding:3px 7px 3px 3px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:20px;position:absolute;top:54px;right:14px;z-index:25; }
    .stlw-user-pill.visible { display:flex!important; }
    @media (max-width: 480px) {
      #stlw-user-pill { top:44px;right:10px; }
    }
    .stlw-user-pill-av { width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:900;flex-shrink:0;font-family:"Montserrat",sans-serif;line-height:1; }
    .stlw-user-pill-name { font-size:8px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,0.55);max-width:65px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
    /* DM picker */
    #stlw-dm-picker { position:fixed;z-index:1000000;background:#080e0e;border:1px solid rgba(59,191,191,0.25);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,0.85);padding:6px 0;min-width:220px;width:240px;max-height:340px;overflow-y:auto;font-family:"Montserrat",sans-serif;scrollbar-width:thin; }
    .stlw-dm-picker-hdr { font-size:7px;font-weight:900;letter-spacing:2px;color:rgba(59,191,191,0.6);text-transform:uppercase;padding:6px 14px 8px;border-bottom:1px solid rgba(255,255,255,0.06);margin-bottom:2px; }
    .stlw-dm-picker-search { width:calc(100% - 20px);margin:6px 10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:6px;color:#fff;font-size:10px;padding:5px 8px;outline:none;font-family:inherit;box-sizing:border-box; }
    .stlw-dm-picker-search:focus { border-color:rgba(59,191,191,0.4); }
    .stlw-dm-picker-item { display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;border:none;background:transparent;width:100%;text-align:left;transition:background 0.1s; }
    .stlw-dm-picker-item:hover { background:rgba(59,191,191,0.07); }
    .stlw-dm-picker-av { width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;flex-shrink:0; }
    .stlw-dm-picker-nom { font-size:10px;font-weight:700;color:rgba(255,255,255,0.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block; }
    .stlw-dm-picker-disc { font-size:8px;color:rgba(255,255,255,0.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin-top:1px; }
    /* Video zone */
    #stlw-video-zone { display:none;flex-direction:column;flex:1;background:#000;position:relative;overflow:hidden; }
    #stlw-video-zone.active { display:flex; }
    #stlw-jitsi-frame { flex:1;width:100%;border:none;background:#000; }
    #stlw-video-bar { display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:rgba(6,6,6,0.95);border-top:1px solid rgba(59,191,191,0.15);flex-shrink:0;gap:8px; }
    #stlw-video-bar-info { font-size:9px;font-weight:700;letter-spacing:1px;color:rgba(59,191,191,0.8);font-family:"Montserrat",sans-serif;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
    .stlw-video-btn { font-size:8px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:5px 10px;border-radius:5px;cursor:pointer;font-family:"Montserrat",sans-serif;border:none;flex-shrink:0;transition:all 0.15s; }
    #stlw-video-back { background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.7); }
    #stlw-video-back:hover { background:rgba(255,255,255,0.14);color:#fff; }
    #stlw-video-end { background:rgba(255,71,71,0.12);color:rgba(255,71,71,0.85);border:1px solid rgba(255,71,71,0.2); }
    #stlw-video-end:hover { background:rgba(255,71,71,0.22);color:#ff4747; }
    @keyframes conv-menu-in {
      from { opacity:0; transform: scale(0.92) translateY(6px); }
      to   { opacity:1; transform: scale(1) translateY(0); }
    }
    .conv-menu-section {
      font-size: 7px; font-weight: 900; letter-spacing: 2.5px;
      color: rgba(59,191,191,0.35); text-transform: uppercase;
      padding: 8px 14px 4px; pointer-events: none;
    }
    .conv-menu-item {
      display: flex; align-items: center; gap: 9px;
      padding: 8px 14px; font-size: 10px; font-weight: 700;
      color: rgba(255,255,255,0.6); cursor: pointer;
      transition: background 0.15s, color 0.15s;
      letter-spacing: 0.5px; border: none; background: transparent;
      width: 100%; text-align: left;
    }
    .conv-menu-item:hover { background: rgba(59,191,191,0.07); color: #fff; }
    .conv-menu-item .conv-menu-icon {
      width: 22px; height: 22px; border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; flex-shrink: 0;
      background: rgba(59,191,191,0.08);
    }
    .conv-menu-item.accent .conv-menu-icon { background: rgba(59,191,191,0.15); }
    .conv-menu-item.accent { color: #3bbfbf; }
    .conv-menu-sep { height: 1px; background: rgba(255,255,255,0.05); margin: 5px 0; }
    /* Submenú disciplines */
    .conv-menu-disc-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 4px; padding: 4px 14px 8px;
    }
    .conv-menu-disc-btn {
      padding: 6px 8px; border-radius: 7px; font-size: 9px; font-weight: 700;
      border: 1px solid rgba(255,255,255,0.07);
      background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.55);
      cursor: pointer; transition: all 0.15s; text-align: left;
      font-family: 'Montserrat', Arial, Helvetica, sans-serif;
      display: flex; align-items: center; gap: 5px; letter-spacing: 0.3px;
    }
    .conv-menu-disc-btn:hover { background: rgba(59,191,191,0.1); border-color: rgba(59,191,191,0.3); color: #fff; }
    /* Converses guardades scroll */
    .conv-menu-saved-list { max-height: 120px; overflow-y: auto; padding: 0 0 4px; }
    .conv-menu-saved-list::-webkit-scrollbar { width: 2px; }
    .conv-menu-saved-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 6px 14px; cursor: pointer; transition: background 0.15s;
    }
    .conv-menu-saved-item:hover { background: rgba(59,191,191,0.06); }
    .conv-menu-saved-name { font-size: 10px; color: rgba(255,255,255,0.55); font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .conv-menu-saved-date { font-size: 8px; color: rgba(255,255,255,0.25); margin-left: 8px; flex-shrink: 0; }
    .conv-menu-empty { font-size: 9px; color: rgba(255,255,255,0.2); padding: 6px 14px 8px; font-style: italic; }

    /* ── PRO CONFIG dins conv-menu ── */
    .stlw-pro-section { padding: 4px 0 2px; }
    .stlw-pro-header {
      display: flex; align-items: center; gap: 7px;
      padding: 8px 14px 6px;
    }
    .stlw-pro-badge {
      font-size: 7px; font-weight: 900; letter-spacing: 2px;
      background: linear-gradient(135deg, #ffd700, #ff9f47);
      color: #060606; padding: 2px 6px; border-radius: 4px;
    }
    .stlw-pro-title { font-size: 10px; font-weight: 800; color: #fff; letter-spacing: 0.3px; }
    .stlw-pro-desc { font-size: 9px; color: rgba(255,255,255,0.35); padding: 0 14px 6px; line-height: 1.4; }
    .stlw-pro-input-wrap {
      padding: 4px 14px 8px; display: flex; gap: 6px; align-items: center;
    }
    .stlw-pro-input {
      flex: 1; background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,215,0,0.2);
      border-radius: 7px; padding: 7px 10px;
      font-size: 10px; color: #fff; font-family: 'Montserrat', sans-serif;
      outline: none; transition: border-color 0.2s;
      letter-spacing: 0.5px;
    }
    .stlw-pro-input:focus { border-color: rgba(255,215,0,0.5); }
    .stlw-pro-input::placeholder { color: rgba(255,255,255,0.2); font-size: 9px; }
    .stlw-pro-save-btn {
      background: linear-gradient(135deg, #ffd700, #ff9f47);
      color: #060606; border: none; border-radius: 7px;
      padding: 7px 11px; font-size: 9px; font-weight: 900;
      letter-spacing: 1px; cursor: pointer; font-family: 'Montserrat', sans-serif;
      white-space: nowrap; transition: opacity 0.2s;
    }
    .stlw-pro-save-btn:hover { opacity: 0.85; }
    .stlw-pro-status {
      display: flex; align-items: center; gap: 6px;
      padding: 4px 14px 8px; font-size: 9px;
    }
    .stlw-pro-dot {
      width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
    }
    .stlw-pro-dot.active { background: #4cff91; box-shadow: 0 0 6px #4cff91; }
    .stlw-pro-dot.inactive { background: rgba(255,255,255,0.2); }
    .stlw-pro-status-text { color: rgba(255,255,255,0.45); }

    /* ── XP STRIP ── */
    .stlw-chat-xp-strip {
      padding: 7px 15px; background: rgba(59,191,191,0.03);
      border-bottom: 1px solid rgba(59,191,191,0.07);
      display: flex; align-items: center; gap: 9px; flex-shrink: 0;
    }
    .stlw-chat-xp-label { font-size: 7.5px; font-weight: 800; letter-spacing: 2px; color: rgba(59,191,191,0.45); text-transform: uppercase; white-space: nowrap; }
    .stlw-chat-xp-bar-wrap { flex: 1; height: 3px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; }
    .stlw-chat-xp-bar-fill { height: 100%; background: linear-gradient(90deg,#3bbfbf,#4cff91); border-radius: 2px; transition: width 0.8s cubic-bezier(0.16,1,0.3,1); }
    .stlw-chat-rank-tag { font-size: 7.5px; font-weight: 800; letter-spacing: 1.5px; color: #3bbfbf; text-transform: uppercase; white-space: nowrap; }

    /* ── REPTE DEL DIA ── */
    .stlw-challenge-bar {
      padding: 8px 14px; border-bottom: 1px solid rgba(255,215,0,0.1);
      background: linear-gradient(90deg, rgba(255,215,0,0.05), rgba(255,140,0,0.03));
      flex-shrink: 0; display: flex; gap: 8px; align-items: center;
      cursor: pointer; transition: background 0.2s; text-decoration: none;
    }
    .stlw-challenge-bar:hover { background: linear-gradient(90deg,rgba(255,215,0,0.1),rgba(255,140,0,0.06)); }
    .stlw-challenge-bar-icon { font-size: 14px; flex-shrink: 0; }
    .stlw-challenge-bar-text { flex: 1; min-width: 0; }
    .stlw-challenge-bar-label { font-size: 7px; font-weight: 800; letter-spacing: 2px; color: rgba(255,215,0,0.55); text-transform: uppercase; }
    .stlw-challenge-bar-name { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
    .stlw-challenge-x2 {
      background: rgba(255,215,0,0.15); border: 1px solid rgba(255,215,0,0.35);
      border-radius: 4px; padding: 2px 6px;
      font-size: 8px; font-weight: 900; letter-spacing: 1px; color: #ffd700;
      white-space: nowrap; flex-shrink: 0;
    }

    /* ── BANNER MARQUEE: text que es desplaça lateralment amb info dels reptes destacats ── */
    .stlw-banner-marquee-wrap {
      flex: 1; min-width: 0; overflow: hidden; position: relative;
      mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    }
    .stlw-banner-marquee {
      display: inline-block; white-space: nowrap;
      animation: stlwBannerScroll 38s linear infinite;
      font-size: 10px; font-weight: 700;
      color: rgba(255,255,255,0.85);
      padding-left: 100%;
      will-change: transform;
    }
    .stlw-banner-marquee-wrap:hover .stlw-banner-marquee {
      animation-play-state: paused;
    }
    @keyframes stlwBannerScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-100%); }
    }
    .stlw-banner-msg-sep {
      display: inline-block; margin: 0 14px;
      color: rgba(255,215,0,0.35); font-weight: 400;
    }
    .stlw-banner-msg {
      display: inline-block;
    }
    .stlw-banner-msg-label {
      font-size: 9px; font-weight: 900; letter-spacing: 1.5px;
      text-transform: uppercase; margin-right: 5px;
    }
    .stlw-banner-msg-text {
      color: #fff; font-weight: 700;
    }
    .stlw-banner-msg-bonus {
      font-size: 8px; font-weight: 900; padding: 1px 5px;
      border-radius: 3px; margin-left: 6px;
      background: rgba(255,215,0,0.18); color: #ffd700;
    }
    .stlw-banner-admin-btn {
      flex-shrink: 0; margin-left: 6px;
      width: 22px; height: 22px;
      background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.3);
      border-radius: 4px; cursor: pointer;
      color: #ffd700; font-size: 12px; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.15s;
    }
    .stlw-banner-admin-btn:hover {
      background: rgba(255,215,0,0.25); color: #fff;
    }

    /* ── ADMIN MODAL: configurar missatges del banner ── */
    .stlw-banner-admin-overlay {
      display: none; position: fixed; inset: 0; z-index: 100050;
      background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
      align-items: flex-start; justify-content: center; padding: 40px 16px;
      overflow-y: auto;
    }
    .stlw-banner-admin-overlay.open { display: flex; }
    .stlw-banner-admin-box {
      background: #0d1117; border: 1px solid rgba(255,215,0,0.28);
      border-radius: 12px; padding: 22px 22px 16px;
      max-width: 560px; width: 100%;
      font-family: Montserrat, sans-serif; color: #fff;
    }
    .stlw-banner-admin-hd {
      display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
      padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .stlw-banner-admin-hd-title {
      font-size: 13px; font-weight: 900; letter-spacing: 1.5px;
      text-transform: uppercase; color: #ffd700;
    }
    .stlw-banner-admin-hd-close {
      margin-left: auto; background: none; border: none;
      color: rgba(255,255,255,0.5); cursor: pointer; font-size: 18px;
    }
    .stlw-banner-admin-list {
      display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
      max-height: 360px; overflow-y: auto;
    }
    .stlw-banner-admin-item {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 12px; background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08); border-radius: 6px;
    }
    .stlw-banner-admin-item-icon {
      font-size: 16px; flex-shrink: 0;
    }
    .stlw-banner-admin-item-text {
      flex: 1; min-width: 0; font-size: 11px; color: #fff;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .stlw-banner-admin-item-meta {
      font-size: 8px; color: rgba(255,255,255,0.4); margin-top: 2px;
      letter-spacing: 0.5px; font-family: 'JetBrains Mono', monospace;
    }
    .stlw-banner-admin-item-toggle {
      cursor: pointer; user-select: none;
    }
    .stlw-banner-admin-item-actions {
      display: flex; gap: 4px; flex-shrink: 0;
    }
    .stlw-banner-admin-mini-btn {
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.7); cursor: pointer;
      font-size: 9px; font-weight: 700; padding: 3px 8px;
      border-radius: 4px; letter-spacing: 0.5px;
    }
    .stlw-banner-admin-mini-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
    .stlw-banner-admin-mini-btn.danger:hover { background: rgba(255,71,71,0.2); color: #ff4747; border-color: rgba(255,71,71,0.4); }
    .stlw-banner-admin-form {
      display: grid; grid-template-columns: 60px 1fr; gap: 8px 12px;
      padding: 12px; background: rgba(255,215,0,0.04);
      border: 1px solid rgba(255,215,0,0.15); border-radius: 6px;
      margin-bottom: 12px;
    }
    .stlw-banner-admin-form label {
      font-size: 9px; font-weight: 800; letter-spacing: 1px;
      color: rgba(255,215,0,0.7); text-transform: uppercase;
      align-self: center;
    }
    .stlw-banner-admin-form input,
    .stlw-banner-admin-form select {
      background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.12);
      color: #fff; padding: 7px 10px; border-radius: 4px;
      font-size: 11px; font-family: inherit;
    }
    .stlw-banner-admin-form input:focus,
    .stlw-banner-admin-form select:focus {
      outline: none; border-color: rgba(255,215,0,0.5);
    }
    .stlw-banner-admin-form-row {
      grid-column: 1 / -1; display: flex; gap: 8px;
      justify-content: flex-end;
    }
    .stlw-banner-admin-form-btn {
      background: linear-gradient(135deg, #ffd700, #ff9f47);
      color: #000; border: none; padding: 7px 16px; border-radius: 4px;
      font-size: 10px; font-weight: 900; letter-spacing: 1px;
      cursor: pointer; text-transform: uppercase;
    }
    .stlw-banner-admin-form-btn.ghost {
      background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7);
      border: 1px solid rgba(255,255,255,0.12);
    }
    .stlw-banner-admin-help {
      font-size: 9px; color: rgba(255,255,255,0.45);
      line-height: 1.5; padding: 10px 12px;
      background: rgba(59,191,191,0.04); border-left: 2px solid rgba(59,191,191,0.4);
      border-radius: 3px;
    }

    /* ── Fila horitzontal repte + event ── */
    .stlw-notis-row {
      display: flex; flex-direction: row; align-items: stretch;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      flex-shrink: 0;
    }
    /* Repte: ocupa tot l'ample (event banner eliminat) */
    .stlw-notis-row .stlw-challenge-bar {
      flex: 1; border-bottom: none; border-right: none;
      padding: 7px 14px; min-width: 0;
    }

    /* ── MISSATGES ── */
    /* ── Msg sender avatar ── */
    .stlw-msg-row { display:flex; align-items:flex-end; gap:6px; margin-bottom:2px; }
    .stlw-msg-row.user-row { flex-direction:row-reverse; }
    .stlw-msg-av {
      width:22px; height:22px; border-radius:50%; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      font-size:8px; font-weight:900; font-family:"Montserrat",sans-serif;
      margin-bottom:2px;
    }
    /* ── Group info bar ── */
    #stlw-group-bar {
      display:none; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,0.05);
      background:rgba(255,255,255,0.02); flex-shrink:0; flex-direction:column; gap:2px;
    }
    #stlw-group-bar.visible { display:flex; }
    .stlw-group-name-row {
      display:flex; align-items:center; gap:6px;
    }
    .stlw-group-name {
      font-size:10px; font-weight:800; color:rgba(255,255,255,0.85);
      flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
      font-family:"Montserrat",sans-serif;
    }
    .stlw-group-desc {
      font-size:8px; color:rgba(255,255,255,0.3); font-family:"Montserrat",sans-serif;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .stlw-group-avatars {
      display:flex; gap:2px; align-items:center;
    }
    .stlw-group-av {
      width:18px; height:18px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-size:7px; font-weight:900; border:1px solid rgba(0,0,0,0.4);
      margin-left:-4px; font-family:"Montserrat",sans-serif;
    }
    .stlw-group-av:first-child { margin-left:0; }
    .stlw-group-edit-btn {
      font-size:9px; background:none; border:none; color:rgba(255,255,255,0.25);
      cursor:pointer; padding:0 2px; transition:color 0.15s; flex-shrink:0;
    }
    .stlw-group-edit-btn:hover { color:rgba(59,191,191,0.8); }
    /* ── Group edit panel ── */
    #stlw-group-edit {
      display:none; position:absolute; inset:0; z-index:50;
      background:#070d0d; flex-direction:column; overflow:hidden;
    }
    #stlw-group-edit.open { display:flex; }
    .stlw-group-edit-hdr {
      display:flex; align-items:center; gap:8px; padding:10px 14px;
      border-bottom:1px solid rgba(255,255,255,0.06); flex-shrink:0;
    }
    .stlw-group-edit-title {
      font-size:9px; font-weight:900; letter-spacing:2px; color:rgba(59,191,191,0.8);
      text-transform:uppercase; font-family:"Montserrat",sans-serif; flex:1;
    }
    .stlw-group-edit-close {
      background:none; border:none; color:rgba(255,255,255,0.3); cursor:pointer; font-size:14px;
    }
    .stlw-group-edit-body { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px; }
    .stlw-group-field-label {
      font-size:8px; font-weight:800; letter-spacing:2px; color:rgba(255,255,255,0.3);
      text-transform:uppercase; font-family:"Montserrat",sans-serif; margin-bottom:5px;
    }
    .stlw-group-field-input {
      width:100%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
      border-radius:7px; color:#fff; font-size:11px; padding:8px 10px;
      outline:none; font-family:"Montserrat",sans-serif; box-sizing:border-box; transition:border-color 0.15s;
    }
    .stlw-group-field-input:focus { border-color:rgba(59,191,191,0.4); }
    .stlw-group-member-list { display:flex; flex-direction:column; gap:4px; }
    .stlw-group-member-row {
      display:flex; align-items:center; gap:8px; padding:6px 8px;
      background:rgba(255,255,255,0.03); border-radius:7px;
    }
    .stlw-group-member-nom { font-size:10px; font-weight:700; color:rgba(255,255,255,0.7); flex:1; font-family:"Montserrat",sans-serif; }
    .stlw-group-member-remove {
      font-size:10px; color:rgba(255,71,71,0.5); background:none; border:none; cursor:pointer; transition:color 0.15s;
    }
    .stlw-group-member-remove:hover { color:#ff4747; }
    .stlw-group-add-btn {
      display:flex; align-items:center; gap:6px; padding:7px 10px;
      background:rgba(59,191,191,0.06); border:1px dashed rgba(59,191,191,0.2);
      border-radius:7px; color:rgba(59,191,191,0.6); font-size:9px; font-weight:700;
      letter-spacing:1px; cursor:pointer; font-family:"Montserrat",sans-serif; transition:all 0.15s;
    }
    .stlw-group-add-btn:hover { background:rgba(59,191,191,0.12); border-color:rgba(59,191,191,0.4); color:#3bbfbf; }
    .stlw-group-save-btn {
      background:rgba(59,191,191,0.12); border:1px solid rgba(59,191,191,0.3); color:#3bbfbf;
      font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
      padding:9px; border-radius:7px; cursor:pointer; font-family:"Montserrat",sans-serif;
      transition:all 0.15s; width:100%;
    }
    .stlw-group-save-btn:hover { background:rgba(59,191,191,0.2); }
    .stlw-chat-messages {
      flex: 1; overflow-y: auto; padding: 14px; display: flex;
      flex-direction: column; gap: 11px;
      scrollbar-width: thin; scrollbar-color: rgba(59,191,191,0.15) transparent;
    }
    .stlw-chat-messages::-webkit-scrollbar { width: 3px; }
    .stlw-chat-messages::-webkit-scrollbar-thumb { background: rgba(59,191,191,0.18); border-radius: 2px; }
    .stlw-msg { display: flex; gap: 8px; align-items: flex-end; animation: stlw-msg-in 0.3s cubic-bezier(0.34,1.56,0.64,1); }
    @keyframes stlw-msg-in { from{opacity:0;transform:translateY(10px) scale(0.95);} to{opacity:1;transform:translateY(0) scale(1);} }
    .stlw-msg.user { flex-direction: row-reverse; }
    .stlw-msg-avatar {
      width: 27px; height: 27px; border-radius: 50%;
      border: 1px solid rgba(59,191,191,0.28); flex-shrink: 0;
      background: #0c1e1e;
      position: relative; overflow: visible;
      transition: transform 0.2s;
    }
    /* Màscara circular interior - talla el SVG dins la rodona */
    .stlw-msg-avatar::before {
      content: ''; position: absolute; inset: 0; border-radius: 50%;
      overflow: hidden; z-index: 1; pointer-events: none;
    }
    .stlw-msg-avatar svg {
      width: 100%; height: 100%; border-radius: 50%;
      overflow: hidden; display: block;
      transform-origin: center bottom;
      transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
    }
    /* Pop-out quan parla */
    .stlw-msg-avatar.speaking svg {
      transform: scale(1.55) translateY(-10%);
      filter: drop-shadow(0 4px 12px rgba(59,191,191,0.55));
    }
    /* Animació d'entrada del primer missatge */
    @keyframes avatar-bounce-in {
      0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
      60%  { transform: scale(1.4) rotate(8deg);  opacity: 1; }
      80%  { transform: scale(0.88) rotate(-4deg); }
      100% { transform: scale(1) rotate(0deg); }
    }
    .stlw-msg-avatar.first-greet svg {
      animation: avatar-bounce-in 0.7s cubic-bezier(0.34,1.56,0.64,1) both;
    }
    /* Pols teal subtil quan no parla */
    @keyframes avatar-idle {
      0%, 100% { box-shadow: 0 0 0 0 rgba(59,191,191,0); }
      50%       { box-shadow: 0 0 0 3px rgba(59,191,191,0.18); }
    }
    .stlw-msg-avatar { animation: avatar-idle 3s ease-in-out infinite; }
    .stlw-msg-avatar.user-av {
      background: rgba(255,255,255,0.05);
      border-color: rgba(255,255,255,0.12);
      display: flex; align-items: center; justify-content: center;
      font-size: 8px; font-weight: 900; color: rgba(255,255,255,0.4);
    }
    .stlw-msg-bubble {
      max-width: 245px; padding: 10px 13px; border-radius: 14px;
      font-size: 11.5px; line-height: 1.65; color: rgba(255,255,255,0.87);
    }
    .stlw-msg.bot .stlw-msg-bubble {
      background: rgba(59,191,191,0.07); border: 1px solid rgba(59,191,191,0.14);
      border-bottom-left-radius: 4px;
    }
    .stlw-msg.user .stlw-msg-bubble {
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09);
      border-bottom-right-radius: 4px; text-align: right;
    }
    .stlw-msg-verse {
      margin-top: 8px; padding: 8px 10px;
      background: rgba(59,191,191,0.06); border-left: 2px solid #3bbfbf;
      border-radius: 4px; font-size: 10.5px; color: #3bbfbf; font-style: italic; line-height: 1.75;
    }
    .stlw-msg-verse .verse-label {
      display: block; font-style: normal; font-size: 7.5px; font-weight: 800;
      letter-spacing: 2px; color: rgba(59,191,191,0.45); margin-bottom: 5px;
    }
    .stlw-msg-levelup { background: linear-gradient(135deg,rgba(76,255,145,0.07),rgba(59,191,191,0.07)) !important; border-color: rgba(76,255,145,0.2) !important; }
    .stlw-levelup-badge {
      display: inline-flex; align-items: center; gap: 5px;
      background: rgba(76,255,145,0.12); border: 1px solid rgba(76,255,145,0.28);
      border-radius: 20px; padding: 3px 9px;
      font-size: 8.5px; font-weight: 800; letter-spacing: 2px; color: #4cff91;
      margin-bottom: 7px; text-transform: uppercase;
    }
    /* Typing */
    .stlw-typing { display: flex; gap: 4px; align-items: center; padding: 2px 0; }
    .stlw-typing span { width: 5px; height: 5px; border-radius: 50%; background: #3bbfbf; animation: stlw-typing 1.2s infinite; }
    .stlw-typing span:nth-child(2){animation-delay:.2s;}
    .stlw-typing span:nth-child(3){animation-delay:.4s;}
    @keyframes stlw-typing { 0%,60%,100%{opacity:0.2;transform:translateY(0);} 30%{opacity:1;transform:translateY(-3px);} }

    /* ── REPTES DIARIS PANEL ── */
    .stlw-challenges-panel { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: rgba(59,191,191,0.15) transparent; }
    .stlw-ch-card {
      background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
      border-radius: 8px; padding: 11px 13px; text-decoration: none; color: inherit;
      display: block; transition: all 0.2s; position: relative;
    }
    .stlw-ch-card:hover { background: rgba(59,191,191,0.05); border-color: rgba(59,191,191,0.2); transform: translateY(-1px); }
    .stlw-ch-card.featured {
      border-color: rgba(255,215,0,0.3);
      background: linear-gradient(135deg,rgba(255,215,0,0.04),rgba(255,140,0,0.02));
    }
    .stlw-ch-card.featured::before {
      content: '⭐ REPTE DESTACAT · x2 XP + x2 COINS';
      display: block; font-size: 7px; font-weight: 800; letter-spacing: 2px;
      color: rgba(255,215,0,0.6); text-transform: uppercase; margin-bottom: 6px;
    }
    .stlw-ch-card-top { display: flex; align-items: flex-start; gap: 10px; }
    .stlw-ch-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
    .stlw-ch-info { flex: 1; }
    .stlw-ch-cat { font-size: 8px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 3px; }
    .stlw-ch-title { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.92); line-height: 1.35; }
    .stlw-ch-desc { font-size: 10px; color: rgba(255,255,255,0.52); line-height: 1.6; margin-top: 5px; }
    .stlw-ch-footer { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
    .stlw-ch-xp { font-size: 9px; font-weight: 800; color: #3bbfbf; letter-spacing: 1px; }
    .stlw-ch-xp.x2 { color: #ffd700; }
    .stlw-ch-diff {
      font-size: 7.5px; font-weight: 800; letter-spacing: 1.5px; padding: 2px 7px;
      border-radius: 20px; border: 1px solid; text-transform: uppercase;
    }
    .stlw-ch-diff.easy   { color: #4cff91; border-color: rgba(76,255,145,0.3); background: rgba(76,255,145,0.07); }
    .stlw-ch-diff.medium { color: #ffdd47; border-color: rgba(255,221,71,0.3); background: rgba(255,221,71,0.07); }
    .stlw-ch-diff.hard   { color: #ff4757; border-color: rgba(255,71,87,0.3); background: rgba(255,71,87,0.07); }
    .stlw-ch-link-arrow { margin-left: auto; font-size: 10px; color: rgba(59,191,191,0.3); transition: color 0.2s; }
    .stlw-ch-card:hover .stlw-ch-link-arrow { color: #3bbfbf; }
    .stlw-ch-section-label { font-size: 8px; font-weight: 800; letter-spacing: 2.5px; color: rgba(255,255,255,0.18); text-transform: uppercase; padding: 4px 2px; }

    /* ── CERCADOR REPTES + LOGROS ── */
    .stlw-ch-search-bar { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.04); background:rgba(0,0,0,0.2); flex-shrink:0; }
    .stlw-ch-search-icon { font-size:12px; opacity:0.5; }
    .stlw-ch-search-input { flex:1; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:7px 10px; color:#fff; font-size:11px; font-family:'Montserrat',sans-serif; outline:none; transition:border-color .15s,background .15s; }
    .stlw-ch-search-input::placeholder { color:rgba(255,255,255,0.32); }
    .stlw-ch-search-input:focus { border-color:rgba(59,191,191,0.4); background:rgba(59,191,191,0.06); }
    .stlw-ch-search-clear { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:6px; padding:5px 9px; color:rgba(255,255,255,0.5); cursor:pointer; font-size:10px; font-weight:700; transition:all .15s; }
    .stlw-ch-search-clear:hover { color:#fff; background:rgba(255,71,87,0.15); border-color:rgba(255,71,87,0.3); }
    .stlw-ch-search-empty { text-align:center; padding:32px 16px; color:rgba(255,255,255,0.35); font-size:11px; font-family:'Montserrat',sans-serif; }
    .stlw-ch-search-empty strong { color:rgba(255,255,255,0.65); }

    /* ── FREESTYLE ZONE ── */
    .stlw-fs-panel { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:14px; scrollbar-width:thin; scrollbar-color:rgba(255,71,87,0.2) transparent; container-type:inline-size; container-name:stlw-fs; }
    .stlw-fs-mode-tabs { display:flex; gap:0; border-bottom:1px solid rgba(255,255,255,0.06); }
    .stlw-fs-mode-tab { flex:1; background:none; border:none; color:rgba(255,255,255,0.4); font-family:'Montserrat',sans-serif; font-size:10px; font-weight:800; letter-spacing:2px; padding:10px 6px; cursor:pointer; border-bottom:2px solid transparent; transition:color .15s, border-color .15s; text-transform:uppercase; }
    .stlw-fs-mode-tab.active { color:#ff6b9d; border-bottom-color:#ff6b9d; }
    .stlw-fs-mode-tab:hover:not(.active) { color:rgba(255,255,255,0.7); }
    .stlw-fs-card { background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); border-radius:10px; padding:14px; }
    .stlw-fs-card h4 { margin:0 0 8px 0; font-size:11px; font-weight:900; letter-spacing:2px; color:rgba(255,107,157,0.85); text-transform:uppercase; font-family:'Montserrat',sans-serif; }
    .stlw-fs-card p { margin:0 0 12px 0; font-size:11px; line-height:1.55; color:rgba(255,255,255,0.6); }
    .stlw-fs-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg,#ff6b9d 0%,#ff4757 100%); color:#fff; border:none; border-radius:24px; padding:10px 18px; font-family:'Montserrat',sans-serif; font-size:11px; font-weight:900; letter-spacing:2px; cursor:pointer; text-transform:uppercase; transition:transform .12s, box-shadow .15s; box-shadow:0 4px 18px rgba(255,71,87,0.3); }
    .stlw-fs-btn:hover { transform:translateY(-1px); box-shadow:0 6px 22px rgba(255,71,87,0.45); }
    .stlw-fs-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none; }
    .stlw-fs-btn.recording { background:linear-gradient(135deg,#ff4757,#b30e22); animation: stlw-fs-pulse 1.05s infinite; }
    .stlw-fs-btn.ghost { background:transparent; border:1px solid rgba(255,255,255,0.18); color:rgba(255,255,255,0.85); box-shadow:none; }
    .stlw-fs-btn.ghost:hover { background:rgba(255,255,255,0.05); }
    @keyframes stlw-fs-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,71,87,0.6);} 50%{box-shadow:0 0 0 14px rgba(255,71,87,0);} }
    /* ── Visualitzador del tempo de la instrumental ─────────────────
       16 cel·les (4 compassos × 4 polsos). Sincronitzat amb el BPM i
       el drop detectats per detectBpm(). La cel·la activa s'il·lumina
       quan el seu pols està sonant; els downbeats (pols 1 de cada
       compàs) es mostren amb tint diferent perquè es noti l'estructura.
    ============================================================ */
    .stlw-fs-beat-strip {
      display:flex; flex-direction:column; gap:6px;
      margin-top:10px; padding:10px 12px;
      background:rgba(0,0,0,0.25);
      border:1px solid rgba(255,255,255,0.06);
      border-radius:8px;
    }
    .stlw-fs-beat-strip.idle { opacity:0.55; }
    .stlw-fs-beat-header {
      display:flex; justify-content:space-between; align-items:center;
      font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
      color:rgba(255,255,255,0.45);
    }
    .stlw-fs-beat-bpm { color:#e8ff47; font-family:'Courier New',monospace; font-weight:900; }
    .stlw-fs-beat-grid {
      display:flex; align-items:flex-end; gap:3px; height:22px;
    }
    .stlw-fs-beat-cell {
      flex:1; min-width:6px; height:60%;
      background:rgba(255,255,255,0.1);
      border-radius:2px;
      transition:transform 70ms ease-out, background 70ms, box-shadow 70ms;
    }
    .stlw-fs-beat-cell.downbeat { background:rgba(255,255,255,0.22); height:90%; }
    .stlw-fs-beat-cell.active   { background:#7af542; height:100%; transform:translateY(-2px) scaleY(1.05); box-shadow:0 0 10px rgba(122,245,66,0.65); }
    .stlw-fs-beat-cell.active.downbeat { background:#e8ff47; box-shadow:0 0 14px rgba(232,255,71,0.75); }
    .stlw-fs-beat-sep { width:6px; }
    /* Indicador d'estat: esperant drop, sonant o pausat */
    .stlw-fs-beat-status {
      display:inline-block; width:7px; height:7px; border-radius:50%;
      background:rgba(255,255,255,0.25); transition:background 200ms;
      vertical-align:middle; margin-right:6px;
    }
    .stlw-fs-beat-strip.playing  .stlw-fs-beat-status { background:#7af542; box-shadow:0 0 6px rgba(122,245,66,0.7); }
    .stlw-fs-beat-strip.waiting  .stlw-fs-beat-status { background:#ff9f47; animation:stlw-fs-wait-pulse 1s infinite; }
    @keyframes stlw-fs-wait-pulse { 0%,100%{opacity:0.4;} 50%{opacity:1;} }
    .stlw-fs-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .stlw-fs-timer { font-family:'Courier New',monospace; font-weight:900; font-size:22px; color:#ff6b9d; letter-spacing:3px; text-align:center; padding:8px 0; }
    .stlw-fs-meter { width:100%; height:6px; background:rgba(255,255,255,0.05); border-radius:4px; overflow:hidden; margin-top:6px; }
    .stlw-fs-meter > i { display:block; height:100%; background:linear-gradient(90deg,#ff6b9d,#ff4757); width:0%; transition:width .12s linear; }
    .stlw-fs-list { display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; }
    .stlw-fs-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid rgba(255,255,255,0.06); border-radius:8px; background:rgba(255,255,255,0.02); cursor:pointer; transition:all .15s; }
    .stlw-fs-item:hover { border-color:rgba(255,107,157,0.35); background:rgba(255,107,157,0.05); }
    .stlw-fs-item.active { border-color:rgba(255,107,157,0.55); background:rgba(255,107,157,0.1); }
    .stlw-fs-item-name { flex:1; font-size:11px; color:rgba(255,255,255,0.8); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .stlw-fs-item-play { font-size:14px; }
    .stlw-fs-chips { display:flex; flex-wrap:wrap; gap:6px; }
    .stlw-fs-chip { background:rgba(255,107,157,0.08); border:1px solid rgba(255,107,157,0.25); color:#ff8eb6; font-size:10px; font-weight:700; padding:5px 10px; border-radius:14px; font-family:'Montserrat',sans-serif; letter-spacing:0.5px; cursor:pointer; transition:all .15s; }
    .stlw-fs-chip:hover { background:rgba(255,107,157,0.18); color:#fff; }
    .stlw-fs-result { background:rgba(255,107,157,0.04); border:1px solid rgba(255,107,157,0.2); border-radius:10px; padding:14px; }
    .stlw-fs-result h5 { margin:0 0 10px 0; font-size:11px; font-weight:900; letter-spacing:2px; color:#ff6b9d; text-transform:uppercase; font-family:'Montserrat',sans-serif; }
    .stlw-fs-scores { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:10px; }
    .stlw-fs-score { background:rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:8px 10px; }
    .stlw-fs-score-label { font-size:8px; font-weight:800; letter-spacing:2px; color:rgba(255,255,255,0.45); text-transform:uppercase; }
    .stlw-fs-score-value { font-family:'Courier New',monospace; font-size:18px; font-weight:900; color:#ff6b9d; }
    .stlw-fs-score.total .stlw-fs-score-value { color:#4cff91; font-size:22px; }
    .stlw-fs-score.total { grid-column:span 2; background:rgba(76,255,145,0.06); border-color:rgba(76,255,145,0.25); }
    .stlw-fs-comment { font-size:11px; line-height:1.6; color:rgba(255,255,255,0.78); white-space:pre-wrap; }
    .stlw-fs-reply { background:rgba(59,191,191,0.06); border:1px solid rgba(59,191,191,0.25); border-radius:10px; padding:12px 14px; font-family:'Courier New',monospace; font-size:12px; line-height:1.7; color:rgba(255,255,255,0.9); white-space:pre-wrap; }
    .stlw-fs-loading { text-align:center; color:rgba(255,255,255,0.45); font-size:10px; letter-spacing:2px; padding:14px; font-weight:700; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:10px; }
    .stlw-fs-spinner { width:14px; height:14px; border:2px solid rgba(255,255,255,0.18); border-top-color:#e8ff47; border-radius:50%; animation:stlwFsSpin 0.7s linear infinite; flex-shrink:0; }
    @keyframes stlwFsSpin { to { transform:rotate(360deg); } }
    #stlw-fs-mic-status.busy::before { content:''; display:inline-block; width:12px; height:12px; margin-right:8px; border:2px solid rgba(255,255,255,0.18); border-top-color:#e8ff47; border-radius:50%; animation:stlwFsSpin 0.7s linear infinite; vertical-align:-2px; }
    .stlw-fs-winner { text-align:center; padding:10px 14px; border-radius:8px; font-family:'Montserrat',sans-serif; font-size:13px; font-weight:900; letter-spacing:2px; margin-bottom:12px; text-transform:uppercase; }
    .stlw-fs-winner.a { background:linear-gradient(135deg,rgba(255,107,157,0.22),rgba(255,71,87,0.12)); color:#ffb3cd; border:1px solid rgba(255,107,157,0.45); }
    .stlw-fs-winner.b { background:linear-gradient(135deg,rgba(59,191,191,0.22),rgba(59,191,191,0.08)); color:#7fdede; border:1px solid rgba(59,191,191,0.45); }
    .stlw-fs-winner.tie { background:rgba(255,215,0,0.1); color:#ffd700; border:1px solid rgba(255,215,0,0.4); }
    .stlw-fs-versus { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px; margin-bottom:10px; min-width:0; }
    @media (max-width:520px){ .stlw-fs-versus { grid-template-columns:1fr; } }
    .stlw-fs-speaker { border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:8px 9px; transition:all .2s; min-width:0; overflow:hidden; }
    .stlw-fs-speaker.winner { box-shadow:0 0 0 1px currentColor inset; }
    .stlw-fs-speaker-h { display:flex; justify-content:space-between; align-items:center; gap:6px; font-size:9.5px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; font-family:'Montserrat',sans-serif; margin-bottom:4px; min-width:0; }
    .stlw-fs-speaker-h > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .stlw-fs-speaker-total { font-family:'Courier New',monospace; font-size:13px; font-weight:900; flex-shrink:0; white-space:nowrap; }
    .stlw-fs-speaker-sub { font-size:9px; color:rgba(255,255,255,0.4); letter-spacing:0.5px; margin-bottom:8px; font-weight:600; overflow-wrap:anywhere; }
    .stlw-fs-mini-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px; min-width:0; }
    .stlw-fs-mini { display:flex; justify-content:space-between; align-items:center; gap:4px; font-size:10px; padding:3px 6px; background:rgba(0,0,0,0.18); border-radius:6px; min-width:0; overflow:hidden; }
    .stlw-fs-mini span { color:rgba(255,255,255,0.55); font-weight:700; letter-spacing:0.6px; font-size:8px; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
    .stlw-fs-mini strong { font-family:'Courier New',monospace; font-weight:900; flex-shrink:0; }
    /* Cards stack to single column when the chat panel is narrow */
    @container stlw-fs (max-width: 360px) {
      .stlw-fs-versus { grid-template-columns:1fr; }
    }
    @container stlw-fs (max-width: 200px) {
      .stlw-fs-mini-grid { grid-template-columns:1fr; }
    }

    /* ── EVIDENCE MODAL ── */
    .evidence-modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.85);
      z-index: 100001; display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none; transition: opacity 0.2s;
      backdrop-filter: blur(4px);
    }
    .evidence-modal-overlay.open { opacity: 1; pointer-events: all; }
    .evidence-modal {
      background: var(--surface, #0d1117); border: 1px solid var(--border, rgba(59,191,191,0.12));
      border-radius: 12px; width: 540px; max-width: 95vw;
      max-height: 90vh; overflow-y: auto; position: relative;
      transform: translateY(20px); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
    }
    .evidence-modal-overlay.open .evidence-modal { transform: translateY(0); }
    .ev-modal-header {
      padding: 16px 20px; border-bottom: 1px solid var(--border, rgba(59,191,191,0.12));
      display: flex; align-items: flex-start; gap: 12px;
    }
    .ev-modal-challenge-name { flex: 1; font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.4; }
    .ev-modal-challenge-pts {
      font-family: 'Fira Code', monospace; font-size: 12px;
      padding: 2px 8px; background: rgba(76,255,145,0.1);
      border: 1px solid rgba(76,255,145,0.25); border-radius: 3px;
      color: #4cff91; flex-shrink: 0;
    }
    .ev-modal-body { padding: 20px; }
    .ev-dropzone {
      border: 2px dashed var(--border, rgba(59,191,191,0.12)); border-radius: 12px;
      padding: 32px 20px; text-align: center; cursor: pointer;
      transition: all 0.2s; position: relative; overflow: hidden; margin-bottom: 16px;
    }
    .ev-dropzone:hover, .ev-dropzone.drag-over { border-color: #4cff91; background: rgba(76,255,145,0.04); }
    .ev-dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
    .ev-dropzone-icon { font-size: 28px; margin-bottom: 8px; }
    .ev-dropzone-text { font-size: 13px; color: rgba(255,255,255,0.65); }
    .ev-dropzone-sub { font-size: 11px; color: rgba(255,255,255,0.3); font-family: 'Fira Code', monospace; margin-top: 4px; }
    .ev-preview { display: none; position: relative; border-radius: 12px; overflow: hidden; margin-bottom: 16px; background: rgba(255,255,255,0.03); border: 1px solid var(--border, rgba(59,191,191,0.12)); }
    .ev-preview.visible { display: block; }
    .ev-preview img, .ev-preview video { width: 100%; max-height: 280px; object-fit: contain; display: block; }
    .ev-preview-info { padding: 10px 14px; font-size: 11px; font-family: 'Fira Code', monospace; color: rgba(255,255,255,0.5); display: flex; justify-content: space-between; border-top: 1px solid var(--border, rgba(59,191,191,0.12)); }
    .ev-preview-remove { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.7); border: none; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }
    .ev-caption {
      width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--border, rgba(59,191,191,0.12));
      border-radius: 12px; padding: 10px 12px; color: #f0f0f0;
      font-family: 'Fira Code', monospace; font-size: 12px; resize: vertical; min-height: 70px;
      outline: none; line-height: 1.5; transition: border-color 0.2s;
    }
    .ev-caption:focus { border-color: #4cff91; }
    .ev-caption-toolbar {
      display: flex; gap: 6px; margin-bottom: 6px; align-items: center;
    }
    .ev-toolbar-btn {
      background: rgba(255,255,255,0.04); border: 1px solid rgba(59,191,191,0.15);
      border-radius: 6px; color: rgba(255,255,255,0.5); font-size: 11px;
      padding: 4px 10px; cursor: pointer; font-family: 'Fira Code', monospace;
      transition: all 0.15s; display: flex; align-items: center; gap: 5px; white-space: nowrap;
    }
    .ev-toolbar-btn:hover { border-color: #4cff91; color: #4cff91; background: rgba(76,255,145,0.05); }
    .ev-emoji-picker {
      display: none; position: absolute; background: #0d1117;
      border: 1px solid rgba(59,191,191,0.2); border-radius: 10px;
      padding: 10px; z-index: 100010; box-shadow: 0 8px 32px rgba(0,0,0,0.7);
      width: 280px; flex-wrap: wrap; gap: 4px;
    }
    .ev-emoji-picker.open { display: flex; }
    .ev-emoji-item {
      font-size: 20px; cursor: pointer; padding: 4px; border-radius: 6px; line-height: 1;
      transition: background 0.1s;
    }
    .ev-emoji-item:hover { background: rgba(76,255,145,0.1); }
    .ev-yt-input-row {
      display: none; gap: 6px; align-items: center; margin-top: 6px;
    }
    .ev-yt-input-row.open { display: flex; }
    .ev-yt-input {
      flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,0,0,0.3);
      border-radius: 6px; color: #f0f0f0; font-family: 'Fira Code', monospace;
      font-size: 11px; padding: 5px 10px; outline: none;
    }
    .ev-yt-input:focus { border-color: rgba(255,80,80,0.6); }
    .ev-yt-confirm {
      background: rgba(255,0,0,0.15); border: 1px solid rgba(255,80,80,0.35);
      border-radius: 6px; color: rgba(255,120,120,0.9); font-size: 11px;
      padding: 5px 10px; cursor: pointer; font-family: 'Fira Code', monospace;
      white-space: nowrap;
    }
    .ev-yt-confirm:hover { background: rgba(255,0,0,0.25); }
    .ev-share-options { display: flex; align-items: center; gap: 8px; padding: 12px 0; margin-top: 8px; border-top: 1px solid var(--border, rgba(59,191,191,0.12)); }
    .ev-share-toggle {
      display: flex; align-items: center; gap: 6px; cursor: pointer;
      padding: 6px 12px; border-radius: 12px;
      border: 1px solid var(--border, rgba(59,191,191,0.12)); background: rgba(255,255,255,0.03);
      transition: all 0.2s; font-size: 12px; font-family: 'Fira Code', monospace; color: rgba(255,255,255,0.5); user-select: none;
    }
    .ev-share-toggle:hover { border-color: #4cff91; }
    .ev-share-toggle.active { background: rgba(76,255,145,0.08); border-color: rgba(76,255,145,0.3); color: #4cff91; }
    .ev-share-toggle .toggle-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid var(--border, rgba(59,191,191,0.12)); transition: all 0.2s; }
    .ev-share-toggle.active .toggle-dot { background: #4cff91; border-color: #4cff91; }

    /* ── QUICK CHIPS ── */
    /* ── CHIPS: 3 files → 2 files → 1 fila (dinàmic per count) ── */
    .stlw-chat-chips {
      padding: 6px 10px;
      display: flex; flex-wrap: nowrap; gap: 5px; flex-shrink: 0;
      border-top: 1px solid rgba(255,255,255,0.04);
      background: rgba(0,0,0,0.18); align-items: center;
      overflow-x: auto; overflow-y: hidden;
      scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .stlw-chat-chips::-webkit-scrollbar { display: none; }
    .stlw-chat-chips.chips-rows-2 {
      flex-wrap: wrap; max-height: 62px;
      overflow-x: hidden; align-items: flex-start;
    }
    .stlw-chat-chips.chips-rows-1 {
      flex-wrap: nowrap; overflow-x: auto; align-items: center;
    }
    .stlw-chat-chips.chips-rows-1::-webkit-scrollbar { display: none; }
    .stlw-chip-label {
      font-size: 7px; font-weight: 800; letter-spacing: 2px; color: rgba(59,191,191,0.3);
      text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
    }
    .stlw-chip-calendar,
    .stlw-chip-highlight {
      background: rgba(255,215,0,0.08) !important;
      border-color: rgba(255,215,0,0.35) !important;
      color: rgba(255,215,0,0.75) !important;
      font-weight: 700 !important;
    }
    .stlw-chip-calendar:hover,
    .stlw-chip-highlight:hover {
      background: rgba(255,215,0,0.18) !important;
      border-color: rgba(255,215,0,0.65) !important;
      color: #ffd700 !important;
    }
    .stlw-chip {
      padding: 5px 11px; border-radius: 20px;
      background: rgba(59,191,191,0.05); border: 1px solid rgba(59,191,191,0.18);
      color: rgba(255,255,255,0.5); font-size: 8.5px; font-weight: 700; letter-spacing: 0.8px;
      cursor: pointer;
      transition: background 0.18s, border-color 0.18s, color 0.18s,
                  opacity 0.25s ease, max-width 0.3s ease,
                  padding 0.3s ease, margin 0.3s ease, border-width 0.3s ease;
      text-transform: uppercase; font-family: 'Montserrat', Arial, Helvetica, sans-serif;
      white-space: nowrap; flex-shrink: 0;
    }
    .stlw-chip:hover { background: rgba(59,191,191,0.13); border-color: rgba(59,191,191,0.38); color: #3bbfbf; }
    .stlw-chip.chip-used {
      opacity: 0; pointer-events: none;
      max-width: 0; padding-left: 0; padding-right: 0;
      margin: 0; border-width: 0; overflow: hidden;
    }

    /* ── INPUT ── */
    .stlw-chat-input-wrap {
      display: flex; align-items: center; gap: 8px;
      padding: 11px 13px; border-top: 1px solid rgba(255,255,255,0.05);
      background: rgba(255,255,255,0.015); flex-shrink: 0;
      position: relative;
    }
    #stlw-chat-input {
      flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
      border-radius: 20px; padding: 9px 13px; font-size: 11.5px; color: #fff;
      outline: none; font-family: 'Montserrat', Arial, Helvetica, sans-serif; transition: border-color 0.2s;
    }
    /* iOS Safari fa auto-zoom si font-size < 16px en focus → en touch posem 16px */
    @media (hover: none) and (pointer: coarse) {
      #stlw-chat-input { font-size: 16px; }
    }
    #stlw-chat-input::placeholder { color: rgba(255,255,255,0.18); }
    #stlw-chat-input:focus { border-color: rgba(59,191,191,0.32); }
    #stlw-chat-send {
      width: 36px; height: 36px; border-radius: 50%;
      background: linear-gradient(135deg,#3bbfbf,#2aa0a0); border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      transition: transform 0.2s, box-shadow 0.2s;
      box-shadow: 0 2px 12px rgba(59,191,191,0.22);
    }
    #stlw-chat-send:hover { transform: scale(1.08); box-shadow: 0 4px 20px rgba(59,191,191,0.38); }
    #stlw-chat-send svg { width: 14px; height: 14px; fill: #fff; }


    /* ══════════════════════════════════════
       STLW VOICE SYSTEM — CSS
    ══════════════════════════════════════ */

    /* Botó TTS ON/OFF */
    #stlw-tts-toggle {
      width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.35); transition: all 0.2s;
    }
    #stlw-tts-toggle:hover { background: rgba(59,191,191,0.12); border-color: rgba(59,191,191,0.3); color: #3bbfbf; }
    #stlw-tts-toggle.active {
      background: rgba(59,191,191,0.18); border-color: rgba(59,191,191,0.55);
      color: #3bbfbf; box-shadow: 0 0 8px rgba(59,191,191,0.25);
    }

    /* Botó mic a l'input */
    #stlw-mic-btn {
      width: 36px; height: 36px; border-radius: 50%;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: all 0.25s; color: rgba(255,255,255,0.4);
      font-size: 15px; position: relative;
    }
    #stlw-mic-btn:hover { background: rgba(59,191,191,0.12); border-color: rgba(59,191,191,0.35); color: #3bbfbf; }
    #stlw-mic-btn.listening {
      background: rgba(255,70,70,0.15); border-color: rgba(255,70,70,0.5);
      color: #ff4646; animation: mic-pulse 1.2s infinite;
    }
    @keyframes mic-pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(255,70,70,0.4); }
      50% { box-shadow: 0 0 0 7px rgba(255,70,70,0); }
    }
    #stlw-mic-btn.unsupported { opacity: 0.3; cursor: not-allowed; }

    /* Botó emoji a l'input (mateix tamany que el mic) */
    #stlw-emoji-btn {
      width: 36px; height: 36px; border-radius: 50%;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; transition: all 0.25s; color: rgba(255,255,255,0.55);
      font-size: 17px; line-height: 1; padding: 0;
    }
    #stlw-emoji-btn:hover { background: rgba(255,215,0,0.12); border-color: rgba(255,215,0,0.35); }
    #stlw-emoji-btn.active { background: rgba(255,215,0,0.18); border-color: rgba(255,215,0,0.5); }
    .stlw-emoji-popover {
      position: absolute; bottom: 54px; left: 8px; z-index: 50;
      background: #0f0f0f; border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.55);
      display: none; max-width: 260px;
    }
    .stlw-emoji-popover.open { display: block; }
    .stlw-emoji-popover-cat {
      font-size: 8px; font-weight: 800; letter-spacing: 1.5px;
      color: rgba(255,255,255,0.4); text-transform: uppercase;
      padding: 4px 4px 2px; margin-top: 4px;
    }
    .stlw-emoji-popover-cat:first-child { margin-top: 0; }
    .stlw-emoji-popover-grid {
      display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
    }
    .stlw-emoji-popover-grid button {
      background: transparent; border: 0; font-size: 18px; line-height: 1;
      width: 26px; height: 26px; cursor: pointer; border-radius: 5px;
      padding: 0; color: inherit; transition: background .15s;
    }
    .stlw-emoji-popover-grid button:hover { background: rgba(255,255,255,0.08); }

    /* ── Controls integrats al header (fila única) ── */
    .stlw-controls-row {
      display: flex; align-items: center; gap: 4px;
      flex-wrap: nowrap; margin-top: 3px;
    }
    .stlw-ctrl-label {
      font-size: 6.5px; font-weight: 900; letter-spacing: 1.5px;
      color: rgba(255,255,255,0.2); text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
    }
    .stlw-ctrl-sep {
      color: rgba(255,255,255,0.12); font-size: 9px; flex-shrink: 0;
    }
    .stlw-ctrl-sel,
    #stlw-voice-gender,
    #stlw-voice-lang,
    #stlw-voice-skin {
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
      border-radius: 5px; color: rgba(255,255,255,0.6); font-size: 8.5px;
      padding: 2px 4px; cursor: pointer; outline: none;
      font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: 700;
      transition: border-color 0.2s; flex-shrink: 0;
      -webkit-appearance: none; appearance: none;
      max-width: 62px;
      color-scheme: dark;
    }
    .stlw-ctrl-sel option, .stlw-ctrl-sel optgroup,
    #stlw-voice-select option, #stlw-voice-select optgroup {
      background: #0d1f1f;
      color: #c8f0f0;
    }
    .stlw-ctrl-sel optgroup, #stlw-voice-select optgroup {
      background: #071414;
      color: rgba(59,191,191,0.8);
      font-size: 8px;
    }
    .stlw-ctrl-sel:focus,
    #stlw-voice-gender:focus,
    #stlw-voice-lang:focus,
    #stlw-voice-skin:focus { border-color: rgba(59,191,191,0.4); }
    /* Idioma: molt compacte */
    #stlw-voice-lang { max-width: 36px; }
    /* Voice skin: mida mitjana */
    #stlw-voice-skin { max-width: 58px; }
    /* TTS toggle ara inline al header */
    #stlw-tts-toggle {
      width: 22px; height: 22px; border-radius: 5px; flex-shrink: 0;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.35); transition: all 0.2s; padding: 0;
    }
    #stlw-tts-toggle:hover { background: rgba(59,191,191,0.12); border-color: rgba(59,191,191,0.3); color: #3bbfbf; }
    #stlw-tts-toggle.active {
      background: rgba(59,191,191,0.18); border-color: rgba(59,191,191,0.55);
      color: #3bbfbf; box-shadow: 0 0 6px rgba(59,191,191,0.25);
    }
    /* TTS indicator inline al nom */
    #stlw-tts-indicator {
      display: none; align-items: center; gap: 3px; margin-left: 6px;
      font-size: 7px; color: #3bbfbf; letter-spacing: 1px; font-weight: 700;
    }
    #stlw-tts-indicator.active { display: inline-flex; }
    #stlw-tts-indicator .tts-bars {
      display: flex; gap: 2px; align-items: flex-end; height: 9px;
    }
    #stlw-tts-indicator .tts-bars span {
      width: 2px; background: #3bbfbf; border-radius: 1px;
      animation: tts-bar 0.7s infinite alternate;
    }
    #stlw-tts-indicator .tts-bars span:nth-child(2) { animation-delay: 0.15s; }
    #stlw-tts-indicator .tts-bars span:nth-child(3) { animation-delay: 0.3s; }
    @keyframes tts-bar {
      from { height: 3px; opacity: 0.5; }
      to   { height: 9px; opacity: 1; }
    }
    /* Nom del chat amb indicador al costat */
    .stlw-chat-name {
      display: flex; align-items: center; gap: 0;
    }
    /* Elimina .stlw-voice-sep antiga */
    .stlw-voice-sep { display: none; }

    /* Speaker per cada missatge bot */
    .stlw-msg-speaker {
      position: absolute; bottom: 4px; right: 6px;
      width: 20px; height: 20px; border-radius: 50%;
      background: transparent; border: none; cursor: pointer;
      color: rgba(255,255,255,0.2); font-size: 11px;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.2s; opacity: 0; line-height: 1;
    }
    .stlw-msg-bubble:hover .stlw-msg-speaker { opacity: 1; }
    .stlw-msg-speaker:hover { color: #3bbfbf; background: rgba(59,191,191,0.1); }
    .stlw-msg-speaker.speaking { color: #3bbfbf; opacity: 1; animation: speaker-pulse 0.8s infinite alternate; }
    @media (hover: none) {
      .stlw-msg-speaker { opacity: 0.55; color: rgba(59,191,191,0.7); }
    }
    @keyframes speaker-pulse { from { color: #3bbfbf; } to { color: #4cff91; } }
    .stlw-msg-bubble { position: relative; padding-bottom: 22px; }
    /* Controls TTS per missatge */
    .stlw-msg-tts-ctrl {
      display: none; align-items: center; gap: 3px;
      position: absolute; bottom: 3px; left: 6px;
    }
    .stlw-msg-tts-ctrl.active { display: flex; }
    .stlw-msg-tts-ctrl button {
      background: rgba(59,191,191,0.1); border: 1px solid rgba(59,191,191,0.25);
      border-radius: 4px; cursor: pointer; font-size: 9px;
      padding: 2px 5px; line-height: 1; color: rgba(59,191,191,0.85);
      transition: all 0.15s;
    }
    .stlw-msg-tts-ctrl button:hover { background: rgba(59,191,191,0.2); }
    .stlw-msg-tts-ctrl .tts-stop-btn {
      color: rgba(255,100,100,0.8); border-color: rgba(255,80,80,0.2);
      background: rgba(255,60,60,0.07);
    }

    /* Indicador TTS a l'status bar */
    #stlw-tts-indicator {
      display: none; align-items: center; gap: 4px;
      font-size: 7.5px; color: #3bbfbf; letter-spacing: 1px; font-weight: 700;
    }
    #stlw-tts-indicator.active { display: flex; }
    #stlw-tts-indicator .tts-bars {
      display: flex; gap: 2px; align-items: flex-end; height: 10px;
    }
    #stlw-tts-indicator .tts-bars span {
      width: 2px; background: #3bbfbf; border-radius: 1px;
      animation: tts-bar 0.7s infinite alternate;
    }
    #stlw-tts-indicator .tts-bars span:nth-child(2) { animation-delay: 0.15s; }
    #stlw-tts-indicator .tts-bars span:nth-child(3) { animation-delay: 0.3s; }
    @keyframes tts-bar {
      from { height: 3px; opacity: 0.5; }
      to   { height: 10px; opacity: 1; }
    }

    /* ── HOVER TOOLTIP ── */
    .radar-hover-label {
      position: absolute; background: rgba(6,6,6,0.92);
      border: 1px solid rgba(59,191,191,0.3); padding: 5px 11px;
      font-size: 9.5px; font-weight: 700; letter-spacing: 1px;
      color: var(--teal); pointer-events: none; z-index: 10; white-space: nowrap;
    }
  
    /* ═══════════════════════════════════════════════════
       STLW MUSIC PLAYER — Botó + Reproductor + Bafarades
       ═══════════════════════════════════════════════════ */

    /* ── Botó música (al costat de stlw-one-btn) ── */
    /* ── Botó música: anaglif vermell/blau/negre, posicionat al costat esquerra del STLW ONE ── */
    #stlw-music-btn {
      position: fixed; z-index: 99999;
      width: 42px; height: 42px; border-radius: 50%;
      background: linear-gradient(145deg, #0a0005, #14000a);
      border: 2px solid rgba(255,30,30,0.6);
      box-shadow: 0 0 18px rgba(255,0,60,0.25), -3px 0 12px rgba(0,120,255,0.2), 0 4px 16px rgba(0,0,0,0.8);
      cursor: pointer; overflow: visible;
      display: flex; align-items: center; justify-content: center;
      transition: box-shadow 0.3s, transform 0.2s;
      user-select: none;
      /* Posició: al costat esquerra del stlw-one-btn (bottom=88px, right=20px+68px+10px=98px) */
      bottom: 97px; right: 98px;
    }
    #stlw-music-btn:hover {
      box-shadow: 0 0 30px rgba(255,0,60,0.5), -4px 0 20px rgba(0,120,255,0.35), 0 6px 24px rgba(0,0,0,0.9);
      transform: scale(1.08);
    }
    #stlw-music-btn.playing {
      border-color: rgba(255,30,30,0.9);
      animation: music-pulse-anaglyph 2s ease-in-out infinite;
    }
    @keyframes music-pulse-anaglyph {
      0%,100% { box-shadow: 0 0 14px rgba(255,0,60,0.3), -3px 0 10px rgba(0,120,255,0.2), 0 4px 16px rgba(0,0,0,0.8); }
      50%      { box-shadow: 0 0 28px rgba(255,0,60,0.65), -5px 0 18px rgba(0,120,255,0.45), 0 4px 16px rgba(0,0,0,0.8); }
    }
    /* Efecte anaglif intern: duplicació rojo+cian */
    #stlw-music-btn::before {
      content: ''; position: absolute; inset: -2px; border-radius: 50%;
      border: 1.5px solid rgba(0,200,255,0.4);
      transform: translate(-2px, 0);
      pointer-events: none;
    }
    #stlw-music-btn::after {
      content: ''; position: absolute; inset: -2px; border-radius: 50%;
      border: 1.5px solid rgba(255,0,60,0.35);
      transform: translate(2px, 0);
      pointer-events: none;
    }
    #stlw-music-btn svg { width: 20px; height: 20px; }
    /* Ones animades quan reprodueix */
    #stlw-music-btn .music-bars {
      display: none; gap: 2px; align-items: flex-end; height: 16px;
    }
    #stlw-music-btn.playing .music-bars { display: flex; }
    #stlw-music-btn.playing .music-icon { display: none; }
    #stlw-music-btn .music-bars span {
      display: block; width: 2.5px; border-radius: 2px;
      animation: bar-dance 0.8s ease-in-out infinite alternate;
    }
    #stlw-music-btn .music-bars span:nth-child(1){ height:6px;  background:#ff1e3c; animation-delay:0s; }
    #stlw-music-btn .music-bars span:nth-child(2){ height:13px; background:#fff; animation-delay:0.15s; }
    #stlw-music-btn .music-bars span:nth-child(3){ height:10px; background:#0090ff; animation-delay:0.05s; }
    #stlw-music-btn .music-bars span:nth-child(4){ height:15px; background:#fff; animation-delay:0.25s; }
    #stlw-music-btn .music-bars span:nth-child(5){ height:8px;  background:#ff1e3c; animation-delay:0.1s; }
    @keyframes bar-dance {
      0%   { transform: scaleY(0.4); }
      100% { transform: scaleY(1.2); }
    }
    @media (max-width: 420px) {
      #stlw-music-btn { bottom: 22px; right: 80px; width: 38px; height: 38px; }
    }

    /* ── Panel reproductor ── */
    #stlw-music-panel {
      position: fixed; bottom: 232px; right: 24px; z-index: 99998;
      width: 320px;
      background: linear-gradient(160deg, #0d0208 0%, #050008 60%, #000d18 100%);
      border: 1px solid rgba(255,30,60,0.3);
      border-radius: 20px;
      box-shadow: 0 0 50px rgba(255,30,60,0.12), 0 20px 60px rgba(0,0,0,0.8);
      padding: 20px;
      transform: translateY(20px) scale(0.92); opacity: 0; pointer-events: none;
      transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
      font-family: 'Montserrat', sans-serif;
      backdrop-filter: blur(20px);
    }
    #stlw-music-panel.open {
      transform: translateY(0) scale(1); opacity: 1; pointer-events: all;
    }
    @media (max-width: 420px) {
      #stlw-music-panel { right: 8px; left: 8px; width: auto; bottom: 180px; }
      #stlw-music-btn { bottom: 158px; right: 20px; width: 46px; height: 46px; }
    }

    /* Header panel */
    .mp-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 18px;
    }
    .mp-title {
      font-size: 10px; font-weight: 800; letter-spacing: 4px;
      text-transform: uppercase; color: rgba(180,100,255,0.8);
      display: flex; align-items: center; gap: 8px;
    }
    .mp-title::before {
      content: ''; display: block; width: 6px; height: 6px;
      border-radius: 50%; background: #ff1e3c;
      animation: mp-dot-pulse 1.8s ease-in-out infinite;
    }
    @keyframes mp-dot-pulse {
      0%,100%{ opacity:0.4; transform:scale(1); }
      50%    { opacity:1;   transform:scale(1.3); }
    }
    .mp-close {
      width: 28px; height: 28px; border-radius: 8px;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.4); font-size: 14px; transition: all 0.2s;
    }
    .mp-close:hover { background: rgba(255,30,60,0.12); color: #ff1e3c; border-color: rgba(255,30,60,0.3); }

    /* Now playing */
    .mp-now-playing {
      background: rgba(255,30,60,0.07);
      border: 1px solid rgba(255,30,60,0.12);
      border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
    }
    .mp-np-label {
      font-size: 8px; font-weight: 700; letter-spacing: 3px;
      text-transform: uppercase; color: rgba(255,30,60,0.6); margin-bottom: 6px;
    }
    .mp-np-track {
      font-size: 14px; font-weight: 800; color: #fff;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      letter-spacing: 0.5px;
    }
    .mp-np-track.scrolling { animation: track-scroll 8s linear infinite; }
    @keyframes track-scroll {
      0%,15%  { transform: translateX(0); }
      85%,100%{ transform: translateX(-60%); }
    }
    .mp-np-artist {
      font-size: 10px; color: rgba(255,30,60,0.6); margin-top: 4px;
      font-weight: 600; letter-spacing: 1px;
    }

    /* Barra de progrés */
    .mp-progress-wrap {
      margin: 12px 0 8px;
      position: relative;
    }
    .mp-progress-bar {
      width: 100%; height: 4px; border-radius: 2px;
      background: rgba(255,255,255,0.08); cursor: pointer; overflow: hidden;
      position: relative;
    }
    .mp-progress-fill {
      height: 100%; border-radius: 2px;
      background: linear-gradient(90deg, #8a0020, #ff1e3c, #0090ff);
      width: 0%; transition: width 0.5s linear;
    }
    .mp-times {
      display: flex; justify-content: space-between;
      font-size: 9px; color: rgba(255,255,255,0.3); margin-top: 5px;
      font-weight: 600; letter-spacing: 1px; font-family: monospace;
    }

    /* Controls */
    .mp-controls {
      display: flex; align-items: center; justify-content: center; gap: 16px;
      margin: 14px 0;
    }
    .mp-btn {
      width: 36px; height: 36px; border-radius: 50%; border: none;
      background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: all 0.2s; font-size: 14px;
    }
    .mp-btn:hover { background: rgba(255,30,60,0.12); color: #ff1e3c; }
    .mp-btn-play {
      width: 52px; height: 52px; border-radius: 50%;
      background: linear-gradient(135deg, #8a0020, #ff1e3c);
      border: none; color: #fff; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; transition: all 0.25s;
      box-shadow: 0 4px 20px rgba(255,30,60,0.4);
    }
    .mp-btn-play:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(255,30,60,0.6); }
    .mp-btn-shuffle, .mp-btn-repeat {
      font-size: 13px; opacity: 0.4;
    }
    .mp-btn-shuffle.active, .mp-btn-repeat.active {
      opacity: 1; color: #ff1e3c; background: rgba(255,30,60,0.1);
    }

    /* Volume */
    .mp-volume-row {
      display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
    }
    .mp-vol-icon { font-size: 13px; color: rgba(255,255,255,0.35); flex-shrink: 0; }
    .mp-vol-slider {
      flex: 1; height: 3px; border-radius: 2px;
      background: rgba(255,255,255,0.1); cursor: pointer;
      -webkit-appearance: none; appearance: none; outline: none; border: none;
    }
    .mp-vol-slider::-webkit-slider-thumb {
      -webkit-appearance: none; width: 12px; height: 12px;
      border-radius: 50%; background: #ff1e3c; cursor: pointer;
    }
    .mp-vol-slider::-webkit-slider-runnable-track {
      height: 3px; border-radius: 2px;
      background: linear-gradient(90deg, #ff1e3c var(--vol-pct,70%), rgba(255,255,255,0.1) var(--vol-pct,70%));
    }

    /* Llista de cançons */
    .mp-list-title {
      font-size: 9px; font-weight: 800; letter-spacing: 3px;
      text-transform: uppercase; color: rgba(255,255,255,0.25); margin-bottom: 10px;
    }
    .mp-list {
      max-height: 180px; overflow-y: auto; margin: 0 -4px;
      scrollbar-width: thin; scrollbar-color: rgba(255,30,60,0.3) transparent;
    }
    .mp-list::-webkit-scrollbar { width: 3px; }
    .mp-list::-webkit-scrollbar-thumb { background: rgba(255,30,60,0.3); border-radius: 2px; }
    .mp-track-item {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 10px; border-radius: 10px; cursor: pointer;
      transition: background 0.2s; margin-bottom: 2px;
    }
    .mp-track-item:hover { background: rgba(255,30,60,0.1); }
    .mp-track-item.active { background: rgba(255,30,60,0.12); }
    .mp-track-num {
      font-size: 10px; color: rgba(255,255,255,0.2); width: 16px;
      text-align: center; font-family: monospace; font-weight: 600; flex-shrink: 0;
    }
    .mp-track-item.active .mp-track-num { color: #ff1e3c; }
    .mp-track-info { flex: 1; min-width: 0; }
    .mp-track-name {
      font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.8);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mp-track-item.active .mp-track-name { color: #fff; }
    .mp-track-dur {
      font-size: 9px; color: rgba(255,255,255,0.2); font-family: monospace;
      flex-shrink: 0;
    }
    .mp-no-tracks {
      text-align: center; padding: 20px; color: rgba(255,255,255,0.2);
      font-size: 11px; line-height: 1.7;
    }

    /* ── BAFARADES STLW ONE ── */
    .stlw-speech-bubble {
      position: fixed; z-index: 99997;
      right: 105px; bottom: 95px;
      background: linear-gradient(135deg, #0d1f1f 0%, #0a1818 100%);
      border: 1px solid rgba(59,191,191,0.4);
      border-radius: 18px 18px 4px 18px;
      padding: 10px 16px; max-width: 220px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(59,191,191,0.12);
      font-family: 'Montserrat', sans-serif; font-size: 12px;
      font-weight: 700; color: #fff; line-height: 1.4;
      opacity: 0; transform: translateX(10px) scale(0.9);
      transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1);
      pointer-events: none;
    }
    .stlw-speech-bubble.show {
      opacity: 1; transform: translateX(0) scale(1);
    }
    .stlw-speech-bubble .bubble-track {
      color: #3bbfbf; font-size: 11px; font-weight: 800;
      letter-spacing: 0.5px; margin-bottom: 3px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .stlw-speech-bubble .bubble-comment {
      color: rgba(255,255,255,0.75); font-size: 11px; font-weight: 600;
    }
    /* Cua de la bafarada */
    .stlw-speech-bubble::after {
      content: ''; position: absolute; bottom: -8px; right: 14px;
      border-left: 8px solid transparent;
      border-top: 8px solid rgba(59,191,191,0.4);
    }
    @media (max-width: 420px) {
      .stlw-speech-bubble { right: 80px; max-width: 180px; font-size: 11px; }
    }

    
    /* ═══════════════════════════════════════════════
       STLW MINI MUSIC PLAYER — inline a la pill bar
       Versió v2: més polit, share, progress bar inline.
       ═══════════════════════════════════════════════ */
    .stlw-mini-music {
      display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
      flex: 1 1 auto; min-width: 0;
      padding: 5px 10px;
      background: linear-gradient(135deg, rgba(255,30,60,0.08) 0%, rgba(0,144,255,0.06) 100%);
      border: 1px solid rgba(255,30,60,0.18);
      border-radius: 22px;
      box-shadow: inset 0 0 12px rgba(0,0,0,0.25), 0 2px 8px rgba(255,30,60,0.08);
      position: relative;
      overflow: visible;
    }
    .stlw-mini-music::before {
      content: ''; position: absolute; inset: 0;
      border-radius: 22px;
      background: radial-gradient(ellipse at left, rgba(255,30,60,0.12) 0%, transparent 60%);
      pointer-events: none; opacity: 0.6;
    }
    .stlw-mini-music > * { position: relative; z-index: 1; }
    /* Botó play/pause */
    .mmp-play {
      width: 34px; height: 34px; border-radius: 50%;
      background: linear-gradient(135deg, #ff1e3c, #8a0020);
      border: 1px solid rgba(255,80,100,0.55);
      color: #fff; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s;
      flex-shrink: 0; padding: 0;
      box-shadow: 0 2px 10px rgba(255,30,60,0.35), inset 0 1px 0 rgba(255,255,255,0.18);
    }
    .mmp-play:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(255,30,60,0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
    .mmp-play:active { transform: scale(0.95); }
    .mmp-play.playing {
      background: linear-gradient(135deg, #ff4d72, #ff1e3c);
      box-shadow: 0 0 16px rgba(255,30,60,0.6), 0 2px 12px rgba(255,30,60,0.45);
      animation: mmp-play-pulse 2.2s ease-in-out infinite;
    }
    .mmp-play svg { width: 14px; height: 14px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); }
    @keyframes mmp-play-pulse {
      0%,100%{ box-shadow: 0 0 12px rgba(255,30,60,0.45), 0 2px 12px rgba(255,30,60,0.4); }
      50%   { box-shadow: 0 0 22px rgba(255,30,60,0.75), 0 2px 14px rgba(255,30,60,0.55); }
    }
    /* Barres animades (visible quan reprodueix) */
    .mmp-bars {
      display: none; gap: 1.5px; align-items: flex-end; height: 14px;
    }
    .mmp-play.playing ~ .mmp-info .mmp-bars,
    .mmp-bars.active { display: flex; }
    .mmp-bars span {
      display: block; width: 2px; border-radius: 1px;
      animation: mmp-bar 0.7s ease-in-out infinite alternate;
    }
    .mmp-bars span:nth-child(1){ height:5px;  background:#ff1e3c; animation-delay:0s; }
    .mmp-bars span:nth-child(2){ height:11px; background:rgba(255,255,255,0.85); animation-delay:0.12s; }
    .mmp-bars span:nth-child(3){ height:8px;  background:#0090ff; animation-delay:0.04s; }
    .mmp-bars span:nth-child(4){ height:13px; background:rgba(255,255,255,0.85); animation-delay:0.2s; }
    @keyframes mmp-bar {
      0%  { transform: scaleY(0.35); }
      100%{ transform: scaleY(1.1); }
    }
    /* Info pista */
    .mmp-info {
      display: flex; flex-direction: column; gap: 2px;
      min-width: 0; flex: 1 1 100%; order: 10;
    }
    .mmp-info-row {
      display: flex; align-items: center; gap: 5px; min-width: 0;
    }
    .mmp-track-txt {
      font-size: 10.5px; font-weight: 800; color: rgba(255,255,255,0.6);
      flex: 1 1 auto; min-width: 0; max-width: none;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      letter-spacing: 0.3px; font-family: 'Montserrat', sans-serif;
      transition: color 0.3s;
      cursor: pointer;
      -webkit-tap-highlight-color: rgba(255,30,60,0.2);
    }
    .mmp-track-txt:hover { color: #fff; }
    .mmp-track-txt:active { color: #ff8095; }
    .mmp-track-txt.playing {
      color: #fff;
      text-shadow: 0 0 8px rgba(255,80,100,0.45);
    }
    /* Tooltip de nom complet de pista (clic al text del mini-player; funciona també al mobil) */
    .mmp-fulltitle-tip {
      position: fixed; z-index: 1000000;
      max-width: min(86vw, 360px);
      background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
      border: 1px solid rgba(255,30,60,0.55);
      border-radius: 10px;
      padding: 10px 28px 10px 12px;
      font-family: 'Montserrat', sans-serif;
      font-size: 12px; font-weight: 700;
      color: #fff;
      line-height: 1.35;
      word-break: break-word;
      box-shadow: 0 10px 28px rgba(0,0,0,0.75), 0 0 18px rgba(255,30,60,0.28);
      opacity: 0; transform: translateY(6px);
      transition: opacity 0.18s, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
      pointer-events: none;
      display: none;
    }
    .mmp-fulltitle-tip.show { opacity: 1; transform: translateY(0); pointer-events: auto; display: block; }
    .mmp-fulltitle-tip .ftt-art { color: rgba(255,128,149,0.85); font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px; display:block; margin-top: 4px; }
    .mmp-fulltitle-tip .ftt-close {
      position: absolute; top: 2px; right: 6px;
      background: transparent; border: 0; color: rgba(255,255,255,0.55);
      font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 6px;
    }
    .mmp-fulltitle-tip .ftt-close:hover { color: #ff8095; }
    /* Progress inline (sota el text) */
    .mmp-inline-prog {
      width: 100%; height: 2px; background: rgba(255,255,255,0.08);
      border-radius: 2px; overflow: hidden; min-width: 50px;
    }
    .mmp-inline-prog-fill {
      height: 100%;
      background: linear-gradient(90deg, #ff1e3c, #ff80a0, #0090ff);
      width: 0%; transition: width 0.4s linear;
      box-shadow: 0 0 6px rgba(255,30,60,0.5);
    }
    /* Prev / Next */
    .mmp-prev, .mmp-next {
      width: 28px; height: 28px; border-radius: 7px; border: 1px solid transparent;
      background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.4);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: all 0.18s; padding: 0; flex-shrink: 0;
    }
    .mmp-prev:hover, .mmp-next:hover {
      background: rgba(255,30,60,0.14); color: #fff;
      border-color: rgba(255,30,60,0.4);
    }
    .mmp-prev:active, .mmp-next:active { transform: scale(0.9); }
    .mmp-prev svg, .mmp-next svg { width: 12px; height: 12px; }
    /* PULL UP — rebobinar/reiniciar pista (rasta colors) */
    .mmp-pullup-btn {
      width: 22px; height: 28px; padding: 0; border-radius: 6px;
      border: 1px solid rgba(0,0,0,0.45);
      background: linear-gradient(90deg, #1a8a3a 0%, #ffd500 50%, #d32027 100%);
      color: #000; font-family: 'Montserrat', sans-serif;
      font-size: 7px; font-weight: 900; letter-spacing: 0.5px; line-height: 1;
      text-transform: uppercase; cursor: pointer; flex-shrink: 0;
      text-shadow: 0 1px 0 rgba(255,255,255,0.45);
      transition: all 0.18s; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.35);
    }
    .mmp-pullup-btn span { display: block; transform: scaleX(0.82); transform-origin: center; letter-spacing: 0; }
    .mmp-pullup-btn:hover {
      transform: scale(1.05);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 10px rgba(255,213,0,0.55);
    }
    .mmp-pullup-btn:active { transform: scale(0.92); }
    .mmp-pullup-btn.flash { animation: mmp-pullup-flash 0.55s ease-out; }
    @keyframes mmp-pullup-flash {
      0%   { box-shadow: 0 0 0 0 rgba(255,213,0,0.85); transform: scale(1.12); }
      100% { box-shadow: 0 0 0 14px rgba(255,213,0,0);  transform: scale(1); }
    }
    .mmp-pullup-btn { position: relative; }
    .mmp-pullup-btn::before {
      content: '';
      position: absolute;
      inset: -7px;
      border-radius: 12px;
      padding: 5px;
      background: conic-gradient(
        from 0deg,
        transparent 0deg 6deg,
        #25e066 6deg 30deg,
        transparent 30deg 126deg,
        #ffe34d 126deg 150deg,
        transparent 150deg 246deg,
        #ff3540 246deg 270deg,
        transparent 270deg 360deg
      );
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      filter: blur(2.5px) brightness(1.6) saturate(1.5)
              drop-shadow(0 0 5px rgba(37,224,102,0.9))
              drop-shadow(0 0 5px rgba(255,227,77,0.9))
              drop-shadow(0 0 5px rgba(255,53,64,0.9));
      pointer-events: none;
      mix-blend-mode: screen;
      opacity: 0;
      transition: opacity 0.3s ease-out;
    }
    .mmp-pullup-btn.spin-rasta::before {
      opacity: 1;
      animation: mmp-pullup-spin 0.45s linear infinite;
    }
    @keyframes mmp-pullup-spin { to { transform: rotate(360deg); } }
    /* Botó llista / selector de pista */
    .mmp-list-btn, .mmp-share-btn, .mmp-shuffle-btn {
      width: 28px; height: 28px; border-radius: 7px; border: 1px solid transparent;
      background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.4);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: all 0.18s; padding: 0; flex-shrink: 0; font-size: 13px;
      position: relative;
    }
    .mmp-list-btn:hover, .mmp-share-btn:hover, .mmp-shuffle-btn:hover {
      background: rgba(255,30,60,0.14); color: #fff;
      border-color: rgba(255,30,60,0.4);
    }
    .mmp-list-btn:active, .mmp-share-btn:active, .mmp-shuffle-btn:active { transform: scale(0.9); }
    .mmp-list-btn.open { background: rgba(255,30,60,0.18); color: #ff8095; border-color: rgba(255,30,60,0.55); }
    .mmp-share-btn svg, .mmp-shuffle-btn svg { width: 13px; height: 13px; }
    .mmp-shuffle-btn.active {
      background: rgba(255,30,60,0.18); color: #ff8095; border-color: rgba(255,30,60,0.55);
      box-shadow: 0 0 8px rgba(255,30,60,0.35);
    }
    .mmp-share-btn.flash {
      background: rgba(76,255,145,0.2);
      color: #4cff91;
      border-color: rgba(76,255,145,0.5);
      box-shadow: 0 0 10px rgba(76,255,145,0.4);
    }
    /* FM mode button (chat player) */
    .mmp-fm-btn {
      width: 30px; height: 28px; border-radius: 7px;
      border: 1px solid transparent;
      background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.45);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: all 0.18s; padding: 0; flex-shrink: 0;
      font-size: 9px; font-weight: 800; letter-spacing: 1px;
      font-family: var(--font-mono, monospace);
    }
    .mmp-fm-btn:hover {
      background: rgba(232,255,71,0.14);
      color: #e8ff47;
      border-color: rgba(232,255,71,0.4);
    }
    .mmp-fm-btn.active {
      background: rgba(232,255,71,0.18);
      color: #e8ff47;
      border-color: rgba(232,255,71,0.55);
      box-shadow: 0 0 8px rgba(232,255,71,0.35);
    }
    .mmp-fm-btn:active { transform: scale(0.9); }
    /* Toast de share */
    .mmp-share-toast {
      position: fixed; z-index: 999999;
      background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
      border: 1px solid rgba(76,255,145,0.5);
      border-radius: 10px;
      padding: 10px 14px;
      font-family: 'Montserrat', sans-serif;
      font-size: 11px; font-weight: 700;
      color: #fff;
      box-shadow: 0 8px 28px rgba(0,0,0,0.7), 0 0 18px rgba(76,255,145,0.25);
      opacity: 0; transform: translateY(8px);
      transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
      pointer-events: none;
      max-width: 280px;
    }
    .mmp-share-toast.show { opacity: 1; transform: translateY(0); pointer-events: all; }
    .mmp-share-toast .tlabel { color: #4cff91; font-size: 8px; letter-spacing: 2px; text-transform: uppercase; display:block; margin-bottom: 3px; }
    .mmp-share-toast .turl { display:block; word-break: break-all; font-family: monospace; font-size: 10px; color: rgba(255,255,255,0.7); }
    /* Dropdown selector de pistes */
    .mmp-dropdown {
      position: fixed;
      width: 290px;
      height: 410px;
      min-width: 260px;
      min-height: 220px;
      background: linear-gradient(180deg, #0d1010 0%, #050808 100%);
      border: 1px solid rgba(255,30,60,0.35);
      border-radius: 12px; padding: 10px;
      box-shadow: 0 -4px 30px rgba(0,0,0,0.92), 0 0 24px rgba(255,30,60,0.18);
      z-index: 999999; display: none;
      font-family: 'Montserrat', sans-serif;
      box-sizing: border-box;
    }
    .mmp-dropdown.open { display: flex; flex-direction: column; }
    .mmp-dd-resize {
      position: absolute; background: transparent; z-index: 10;
      transition: background 0.12s;
    }
    .mmp-dd-resize:hover, .mmp-dd-resize.dragging { background: rgba(255,30,60,0.35); }
    .mmp-dd-resize-l  { left: -3px;  top: 8px;    bottom: 8px;  width: 6px;  cursor: ew-resize;  border-radius: 3px; }
    .mmp-dd-resize-t  { top:  -3px;  left: 8px;   right: 8px;   height: 6px; cursor: ns-resize;  border-radius: 3px; }
    .mmp-dd-resize-tl { top:  -4px;  left: -4px;  width: 14px;  height: 14px; cursor: nwse-resize; border-radius: 4px; }
    .mmp-dd-resize-tl::after {
      content: ""; position: absolute; left: 3px; top: 3px; width: 6px; height: 6px;
      border-left: 2px solid rgba(255,30,60,0.55); border-top: 2px solid rgba(255,30,60,0.55);
      border-radius: 2px 0 0 0;
    }
    .mmp-dd-toolbar {
      display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
      padding: 0 2px;
    }
    .mmp-dd-tabs { display: flex; gap: 2px; flex: 0 0 auto; }
    .mmp-dd-tab {
      background: transparent; border: 1px solid rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.5); font-size: 8.5px; font-weight: 800;
      letter-spacing: 1.2px; text-transform: uppercase; font-family: monospace;
      padding: 5px 9px; border-radius: 4px; cursor: pointer; transition: all 0.15s;
    }
    .mmp-dd-tab:hover { color: #fff; border-color: rgba(255,30,60,0.4); }
    .mmp-dd-tab.active {
      background: rgba(255,30,60,0.12); border-color: rgba(255,30,60,0.5); color: #ff8095;
    }
    .mmp-dd-sort {
      flex: 1 1 auto; min-width: 0;
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.7); font-size: 9.5px; font-weight: 700; font-family: monospace;
      padding: 5px 6px; border-radius: 4px; cursor: pointer; outline: none;
      appearance: none; -webkit-appearance: none;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='%23999' d='M0 2l4 4 4-4z'/></svg>");
      background-repeat: no-repeat; background-position: right 6px center;
      padding-right: 18px;
    }
    .mmp-dd-sort:hover { border-color: rgba(255,30,60,0.4); color: #fff; }
    .mmp-dd-sort option { background: #0d1010; color: #fff; }
    /* Tab d'Instrumentals: accent groc-verd quan està actiu */
    #mmp-tab-instr.active {
      background: rgba(232,255,71,0.14); border-color: rgba(232,255,71,0.55); color: #e8ff47;
    }
    .mmp-dd-search-wrap { position: relative; margin: 6px 0 2px; }
    .mmp-dd-search {
      width: 100%; box-sizing: border-box;
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
      color: #fff; font-size: 10.5px; font-family: monospace;
      padding: 6px 48px 6px 10px; border-radius: 4px; outline: none;
      transition: border-color 0.15s;
    }
    .mmp-dd-search:focus { border-color: rgba(255,30,60,0.5); background: rgba(255,255,255,0.06); }
    .mmp-dd-search::placeholder { color: rgba(255,255,255,0.28); letter-spacing: 0.5px; }
    .mmp-dd-search-clear {
      position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
      background: transparent; border: 0; color: rgba(255,255,255,0.4);
      cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 6px;
      display: none;
    }
    .mmp-dd-search-clear:hover { color: #ff8095; }
    .mmp-dd-search-wrap.has-text .mmp-dd-search-clear { display: block; }
    /* Boto micro: dictar el nom de la canço amb la veu (STT local) */
    .mmp-dd-search-mic {
      position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
      background: transparent; border: 0; color: rgba(255,255,255,0.45);
      cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 5px;
      border-radius: 4px; transition: color 0.15s, background 0.15s;
    }
    .mmp-dd-search-mic:hover { color: #fff; background: rgba(255,255,255,0.07); }
    .mmp-dd-search-mic.recording { color: #ff3c5a; animation: mmp-mic-pulse 1s ease-in-out infinite; }
    .mmp-dd-search-mic.transcribing { color: #4cc4ff; opacity: 0.7; }
    @keyframes mmp-mic-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
    .mmp-dropdown.open { animation: mmp-dd-in 0.18s ease-out; }
    @keyframes mmp-dd-in {
      from { opacity: 0; transform: translateY(6px) scale(0.98); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .mmp-dd-title {
      font-size: 8px; font-weight: 900; letter-spacing: 3px;
      color: #ff8095; text-transform: uppercase; margin-bottom: 8px;
      padding: 0 4px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .mmp-dd-list {
      flex: 1 1 auto; min-height: 0; overflow-y: auto;
      scrollbar-width: thin; scrollbar-color: rgba(255,30,60,0.4) transparent;
      position: relative;
    }
    .mmp-dd-list::-webkit-scrollbar { width: 3px; }
    .mmp-dd-list::-webkit-scrollbar-thumb { background: rgba(255,30,60,0.4); border-radius: 2px; }
    .mmp-dd-item {
      display: flex; align-items: center; gap: 7px;
      padding: 4px 9px; border-radius: 6px; cursor: pointer;
      transition: background 0.15s, transform 0.1s; font-size: 11px;
    }
    .mmp-dd-item:hover { background: rgba(255,30,60,0.1); transform: translateX(2px); }
    .mmp-dd-item.active { background: rgba(255,30,60,0.18); box-shadow: inset 2px 0 0 #ff1e3c; }
    .mmp-dd-num {
      font-size: 9px; color: rgba(255,255,255,0.3); width: 18px;
      text-align: right; font-family: monospace; flex-shrink: 0; font-weight: 700;
    }
    .mmp-dd-item.active .mmp-dd-num { color: #ff1e3c; }
    .mmp-dd-name {
      display: flex; flex-direction: row; align-items: center; gap: 10px;
      flex: 1; min-width: 0; overflow: hidden;
    }
    .mmp-dd-title {
      flex: 1.5; min-width: 0;
      font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.82);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mmp-dd-artist {
      flex: 1; min-width: 0;
      font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.45);
      letter-spacing: 0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      font-family: monospace; text-align: right;
    }
    .mmp-dd-item.active .mmp-dd-title { color: #fff; }
    .mmp-dd-item.active .mmp-dd-artist { color: rgba(255,30,60,0.7); }
    /* Add-to-playlist button */
    .mmp-dd-add {
      background: transparent; border: none; padding: 2px 4px;
      color: rgba(255,255,255,0.3); cursor: pointer; font-size: 13px; line-height: 1;
      border-radius: 4px; transition: all 0.15s;
    }
    .mmp-dd-add:hover { background: rgba(232,255,71,0.12); color: #e8ff47; }
    /* Playlist popover */
    .mmp-pl-popover {
      position: absolute; right: 14px; background: #11151a;
      border: 1px solid rgba(232,255,71,0.4); border-radius: 6px;
      padding: 6px; min-width: 170px; max-width: 220px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.6); z-index: 10;
    }
    .mmp-pl-popover-title {
      font-size: 8px; font-weight: 800; letter-spacing: 1.5px; color: rgba(255,255,255,0.5);
      text-transform: uppercase; padding: 3px 6px 6px; font-family: monospace;
      border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 4px;
    }
    .mmp-pl-popover-item {
      display: block; width: 100%; text-align: left; background: transparent;
      border: none; color: rgba(255,255,255,0.75); font-size: 10px; font-weight: 600;
      padding: 6px 8px; border-radius: 4px; cursor: pointer; font-family: inherit;
    }
    .mmp-pl-popover-item:hover { background: rgba(232,255,71,0.1); color: #e8ff47; }
    .mmp-pl-popover-item.new { color: #4cff91; font-weight: 700; }
    /* Playlist view */
    .mmp-pl-row {
      display: flex; align-items: center; gap: 6px; padding: 7px 8px;
      border-radius: 6px; cursor: pointer; transition: background 0.15s;
    }
    .mmp-pl-row:hover { background: rgba(232,255,71,0.06); }
    .mmp-pl-name {
      flex: 1; min-width: 0; font-size: 11px; font-weight: 700; color: #fff;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mmp-pl-count {
      font-size: 8.5px; color: rgba(255,255,255,0.4); font-family: monospace;
      flex-shrink: 0;
    }
    .mmp-pl-play { background: transparent; border: none; color: #4cff91; font-size: 12px; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
    .mmp-pl-play:hover { background: rgba(76,255,145,0.15); }
    .mmp-pl-del { background: transparent; border: none; color: rgba(255,71,71,0.6); font-size: 11px; cursor: pointer; padding: 2px 5px; border-radius: 4px; }
    .mmp-pl-del:hover { background: rgba(255,71,71,0.15); color: #ff4747; }
    .mmp-pl-newbtn {
      width: 100%; background: rgba(76,255,145,0.08); border: 1px dashed rgba(76,255,145,0.3);
      color: #4cff91; font-size: 10px; font-weight: 700; padding: 8px;
      border-radius: 6px; cursor: pointer; margin-bottom: 6px; font-family: inherit;
    }
    .mmp-pl-newbtn:hover { background: rgba(76,255,145,0.14); }
    .mmp-pl-tracks {
      padding: 0 0 0 18px; border-left: 2px solid rgba(232,255,71,0.15); margin: 2px 0 6px 14px;
    }
    .mmp-pl-track {
      display: flex; align-items: center; gap: 6px; padding: 4px 6px; font-size: 10px;
      color: rgba(255,255,255,0.65); border-radius: 4px;
    }
    .mmp-pl-track:hover { background: rgba(255,30,60,0.06); color: #fff; }
    .mmp-pl-track-rm { background: transparent; border: none; color: rgba(255,71,71,0.5); font-size: 11px; cursor: pointer; padding: 0 4px; }
    .mmp-pl-track-rm:hover { color: #ff4747; }
    .mmp-dd-share {
      background: transparent; border: none; padding: 2px 4px;
      color: rgba(255,255,255,0.3); cursor: pointer; font-size: 11px;
      border-radius: 4px; transition: all 0.15s;
      display: flex; align-items: center; justify-content: center;
    }
    .mmp-dd-share:hover { background: rgba(76,255,145,0.15); color: #4cff91; }
    .mmp-dd-empty {
      font-size: 10px; color: rgba(255,255,255,0.25); text-align: center;
      padding: 14px 8px; line-height: 1.6;
    }
    /* Barra de progrés dropdown (la mantenim per a la llista) */
    .mmp-prog-wrap {
      height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px;
      overflow: hidden; cursor: pointer; margin-top: 10px;
    }
    .mmp-prog-fill {
      height: 100%; border-radius: 2px;
      background: linear-gradient(90deg, #8a0020, #ff1e3c, #0090ff);
      width: 0%; transition: width 0.5s linear;
    }

    @media (max-width: 380px) {
      .mmp-track-txt { max-width: none; }
      .stlw-mini-music { gap: 3px; padding: 3px 5px; }
    }

    /* Boto DJ del mini-reproductor (.mmp-dj-btn). Estava nomes inline a la home;
       mogut aqui perque el dashboard (que carrega aquest CSS) tambe l'estilitzi.
       Font: stalow-home-unified-10__1_.html. */
    .mmp-dj-btn {
      width: 28px; height: 28px; border-radius: 7px; border: 1px solid transparent;
      background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: all 0.18s; padding: 0; flex-shrink: 0;
      font-size: 9px; font-weight: 900; letter-spacing: 0.5px;
      font-family: 'Montserrat', sans-serif;
    }
    .mmp-dj-btn span { transform: scaleX(0.92); }
    .mmp-dj-btn:hover {
      background: rgba(0,144,255,0.16); color: #4cc4ff;
      border-color: rgba(0,144,255,0.45);
    }
    .mmp-dj-btn.active {
      background: rgba(0,144,255,0.2); color: #4cc4ff;
      border-color: rgba(0,144,255,0.6);
      box-shadow: 0 0 9px rgba(0,144,255,0.4);
    }
    .mmp-dj-btn:active { transform: scale(0.9); }