/* ══════════════════════════════════════════════════════════════
   DESKTOP FLOAT — SOLO PC
   1) Los desplegables (hojas inferiores) del móvil pasan a ser menús
      FLOTANTES junto al sitio donde pulsas (posición: js/desktopFloat.js).
   2) Apartado VC en PC: popover flotante para conectar, panel de llamada
      flotante y mini-barra "Voz conectada".
   3) Decoración estilo Trevix (panel de usuario flotante, scroll fino…).
   Todo va en @media (min-width:769px) + html:not(.lock-mobile-layout):
   el móvil (y un móvil girado) queda EXACTAMENTE igual que antes.
   Se carga el último.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  html:not(.lock-mobile-layout) {
    --fl-bg: #1d2026;
    --fl-bg-2: #22252b;
    --fl-ring: rgba(255, 255, 255, .08);
    --fl-hover: rgba(255, 255, 255, .06);
    --fl-shadow: 0 10px 32px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  }

  /* ── 1. OVERLAYS transparentes (siguen capturando el clic de fuera) ── */
  html:not(.lock-mobile-layout) .sm-overlay,
  html:not(.lock-mobile-layout) .cc-overlay,
  html:not(.lock-mobile-layout) .fx-overlay,
  html:not(.lock-mobile-layout) .voice-sheet-overlay,
  html:not(.lock-mobile-layout) #pmOverlay,
  html:not(.lock-mobile-layout) #rmOverlay,
  html:not(.lock-mobile-layout) #afOverlay,
  html:not(.lock-mobile-layout) #attachOverlay {
    background: transparent !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  /* el overlay de voz estaba oculto en PC: ahora se muestra */
  html:not(.lock-mobile-layout) .voice-sheet-overlay { display: none !important; }
  html:not(.lock-mobile-layout) .voice-sheet-overlay.open { display: flex !important; z-index: 1300; }

  /* ── 2. Hojas → tarjetas flotantes ── */
  html:not(.lock-mobile-layout) .sm-sheet,
  html:not(.lock-mobile-layout) .cc-sheet,
  html:not(.lock-mobile-layout) .fx-sheet,
  html:not(.lock-mobile-layout) .voice-sheet,
  html:not(.lock-mobile-layout) #pmSheet,
  html:not(.lock-mobile-layout) #rmSheet,
  html:not(.lock-mobile-layout) #afSheet,
  html:not(.lock-mobile-layout) .attach-sheet {
    position: fixed !important;
    left: var(--fl-x, 80px);
    top: var(--fl-y, 80px);
    width: 300px !important;
    max-width: calc(100vw - 16px) !important;
    height: auto !important;
    max-height: min(72vh, 560px) !important;
    overflow-y: auto;
    padding: 6px !important;
    background: var(--fl-bg) !important;
    border: 0;
    border-radius: 12px !important;
    box-shadow: var(--fl-shadow);
    transform: none !important;
    transition: none !important;
    scrollbar-width: thin;
    animation: fl-pop .14s ease-out;
    transform-origin: top left;
  }
  @keyframes fl-pop {
    from { opacity: 0; scale: .96; }
    to   { opacity: 1; scale: 1; }
  }
  /* la hoja de voz es un poco más ancha (tiene tarjetas de acción) */
  html:not(.lock-mobile-layout) .voice-sheet { width: 340px !important; padding: 10px !important; }

  /* sin "pill" de arrastre */
  html:not(.lock-mobile-layout) .sm-handle,
  html:not(.lock-mobile-layout) .cc-handle,
  html:not(.lock-mobile-layout) .fx-pill,
  html:not(.lock-mobile-layout) .voice-sheet-pill-wrap,
  html:not(.lock-mobile-layout) #pmSheet .pv-drag-pill,
  html:not(.lock-mobile-layout) #rmSheet .pv-drag-pill,
  html:not(.lock-mobile-layout) #afSheet .pv-drag-pill,
  html:not(.lock-mobile-layout) .attach-sheet .pv-drag-pill { display: none !important; }

  /* grupos / tarjetas: sin márgenes laterales, más compactos */
  html:not(.lock-mobile-layout) .sm-group,
  html:not(.lock-mobile-layout) .cc-group,
  html:not(.lock-mobile-layout) .fx-card,
  html:not(.lock-mobile-layout) .ms-card {
    margin: 0 0 6px 0 !important;
    background: var(--fl-bg-2) !important;
    border-radius: 8px !important;
  }
  html:not(.lock-mobile-layout) .sm-group:last-child,
  html:not(.lock-mobile-layout) .cc-group:last-child,
  html:not(.lock-mobile-layout) .fx-card:last-child { margin-bottom: 0 !important; }

  /* filas compactas con hover (en PC no hay "pulsar") */
  html:not(.lock-mobile-layout) .sm-item,
  html:not(.lock-mobile-layout) .cc-item,
  html:not(.lock-mobile-layout) .fx-row,
  html:not(.lock-mobile-layout) .ms-row,
  html:not(.lock-mobile-layout) .attach-sheet-item,
  html:not(.lock-mobile-layout) .picker-sheet-item {
    padding: 9px 12px !important;
    gap: 12px !important;
    font-size: .9rem !important;
    border-radius: 6px;
    cursor: pointer;
  }
  html:not(.lock-mobile-layout) .sm-item:hover,
  html:not(.lock-mobile-layout) .cc-item:hover,
  html:not(.lock-mobile-layout) .fx-row:hover,
  html:not(.lock-mobile-layout) .ms-row:hover,
  html:not(.lock-mobile-layout) .attach-sheet-item:hover,
  html:not(.lock-mobile-layout) .picker-sheet-item:hover { background: var(--fl-hover) !important; }
  html:not(.lock-mobile-layout) .fx-row + .fx-row::before { left: 44px; right: 12px; }
  html:not(.lock-mobile-layout) .attach-sheet-body { padding: 0 !important; gap: 0 !important; }
  html:not(.lock-mobile-layout) .fx-quick { padding: 2px 2px 8px; }
  html:not(.lock-mobile-layout) .fx-qbtn { width: 40px; height: 40px; border-radius: 8px; }
  html:not(.lock-mobile-layout) .fx-qbtn:hover { background: var(--fl-hover); }

  /* ── 3. VC en PC ───────────────────────────────────────── */
  html:not(.lock-mobile-layout) .voice-sheet-header { padding: 4px 6px 10px; }
  html:not(.lock-mobile-layout) .voice-sheet-connect-btn { height: 40px; border-radius: 8px; font-size: .92rem; }
  html:not(.lock-mobile-layout) .voice-sheet-actions { gap: 6px; padding-top: 8px; }
  html:not(.lock-mobile-layout) .voice-sheet-action-card { border-radius: 8px !important; cursor: pointer; }
  html:not(.lock-mobile-layout) .voice-sheet-action-card:hover { background: var(--fl-hover) !important; }

  /* ── Panel de llamada a pantalla grande (zona del chat) ── */
  html:not(.lock-mobile-layout) .vc-panel {
    inset: 0 0 0 calc(var(--sidebar-w) + var(--panel-w)) !important;
    top: 0 !important; bottom: 0 !important; right: 0 !important;
    left: calc(var(--sidebar-w) + var(--panel-w)) !important;
    width: auto !important;
    z-index: 900;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    background: #000;
    overflow: hidden;
    animation: none;
  }
  html:not(.lock-mobile-layout) .vc-panel.hidden { display: none; }
  html:not(.lock-mobile-layout) .vc-panel.fl-full { left: 0 !important; z-index: 2000; }
  html:not(.lock-mobile-layout) .vc-header {
    cursor: default; border: 0; background: transparent;
    height: 56px; padding: 0 24px; justify-content: flex-start;
  }
  html:not(.lock-mobile-layout) .vc-back-btn { display: none !important; }
  html:not(.lock-mobile-layout) .vc-header-info { display: flex; align-items: center; gap: 12px; }
  html:not(.lock-mobile-layout) .vc-channel-name { font-size: 1.05rem; font-weight: 600; color: #fff; }
  html:not(.lock-mobile-layout) .vc-content {
    position: absolute; inset: 56px 0 96px 0;
    display: flex; align-items: center; justify-content: center;
    padding: 0 24px; overflow: hidden;
  }
  /* mi tarjeta → "tile" grande con avatar centrado */
  html:not(.lock-mobile-layout) .vc-my-card {
    position: relative;
    width: min(1030px, 100%);
    max-height: 100%;
    aspect-ratio: 16 / 9;
    margin: 0;
    padding: 0;
    border-radius: 16px;
    background: var(--vc-tile, #3a3f8f) !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  html:not(.lock-mobile-layout) .vc-my-card.speaking { box-shadow: inset 0 0 0 3px #23a559 !important; }
  html:not(.lock-mobile-layout) .vc-my-banner { display: none !important; }
  html:not(.lock-mobile-layout) .vc-my-avatar-row { margin: 0 !important; padding: 0 !important; position: static; }
  html:not(.lock-mobile-layout) .vc-my-avatar {
    width: clamp(110px, 18vw, 190px) !important; height: clamp(110px, 18vw, 190px) !important;
    font-size: 3rem; border: 0 !important;
  }
  html:not(.lock-mobile-layout) .vc-my-status-badge { display: none !important; }
  html:not(.lock-mobile-layout) .vc-my-name {
    position: absolute; left: 14px; bottom: 14px;
    background: rgba(0, 0, 0, .65); color: #fff;
    padding: 5px 10px; border-radius: 8px;
    font-size: .85rem; font-weight: 600; margin: 0;
    max-width: calc(100% - 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html:not(.lock-mobile-layout) .vc-my-tag { display: none; }
  html:not(.lock-mobile-layout) .vc-mic-indicator { top: 12px; right: 12px; }

  /* barra de controles flotante abajo al centro */
  html:not(.lock-mobile-layout) .vc-controls {
    position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
    width: auto; margin: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 8px;
    background: #0a0a0c;
    border: 1px solid #26292F;
    border-radius: 18px;
  }
  html:not(.lock-mobile-layout) .vc-ctrl-btn {
    width: 52px; height: 48px; border-radius: 14px;
    background: #1d2026; color: #fff; border: 0;
    display: grid; place-items: center;
  }
  html:not(.lock-mobile-layout) .vc-ctrl-btn svg { width: 22px; height: 22px; }
  html:not(.lock-mobile-layout) .vc-ctrl-btn:hover { background: #2a2d34; transform: none; }
  html:not(.lock-mobile-layout) .vc-ctrl-btn.muted { background: #ed4245; }
  html:not(.lock-mobile-layout) .vc-ctrl-hangup { width: 60px; border-radius: 14px; }

  /* botones extra de la vista (chat / ventana / pantalla completa) */
  #flVcExtra { display: none; }
  html:not(.lock-mobile-layout) .vc-panel:not(.hidden) #flVcExtra { display: block; }
  html:not(.lock-mobile-layout) .fl-vc-corner {
    position: absolute; bottom: 24px; width: 52px; height: 52px;
    background: #0a0a0c; border: 1px solid #26292F; border-radius: 16px;
    color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 3;
  }
  html:not(.lock-mobile-layout) .fl-vc-corner:hover { background: #1d2026; }
  html:not(.lock-mobile-layout) .fl-vc-corner.left { left: 16px; }
  html:not(.lock-mobile-layout) .fl-vc-corner.right { right: 16px; }
  html:not(.lock-mobile-layout) .fl-vc-corner.right2 { right: 80px; }
  html:not(.lock-mobile-layout) .vc-header-tools { margin-left: auto; display: flex; gap: 14px; color: #c9cdd3; }

  /* caja "En el chat de voz" encima del panel de usuario */
  #flVcDock { display: none; }
  html:not(.lock-mobile-layout) #flVcDock.show {
    display: block;
    position: fixed;
    left: 6px;
    bottom: 70px;
    width: calc(var(--sidebar-w) + var(--panel-w) - 12px);
    padding: 12px;
    background: #1d2026;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px var(--fl-ring);
    z-index: 26;
  }
  #flVcDock .fl-vc-top { display: flex; align-items: center; gap: 8px; }
  #flVcDock .fl-vc-state { flex: 1; font-size: .92rem; font-weight: 700; color: #23a559; display: flex; align-items: center; gap: 8px; cursor: pointer; }
  #flVcDock .fl-vc-name { margin-top: 8px; font-size: .82rem; color: #dbdee1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #flVcDock .fl-vc-btns { display: flex; gap: 6px; margin-top: 10px; }
  #flVcDock .fl-vc-btns button { flex: 1; height: 36px; }
  #flVcDock button {
    min-width: 32px; height: 32px; border-radius: 8px; border: 0; background: #2a2d34;
    color: #dbdee1; display: grid; place-items: center; cursor: pointer;
  }
  #flVcDock button:hover { background: #35383f; color: #fff; }
  #flVcDock button.danger:hover { background: #ed4245; color: #fff; }
  #flVcDock button.off { color: #ed4245; }

  /* ── 4. DECORACIÓN estilo Trevix (PC) ─────────────────────── */
  /* panel de usuario flotante abajo a la izquierda (cruza rail + canales) */
  html:not(.lock-mobile-layout) .user-bar {
    left: 6px;
    bottom: 6px;
    width: calc(var(--sidebar-w) + var(--panel-w) - 12px);
    height: 58px;
    padding: 0 8px 0 10px;
    gap: 10px;
    background: #22252b;
    border: 0;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--fl-ring), 0 4px 14px rgba(0, 0, 0, .25);
  }
  html:not(.lock-mobile-layout) .channel-panel,
  html:not(.lock-mobile-layout) .sidebar,
  html:not(.lock-mobile-layout) #homeSidebar { padding-bottom: 72px; }

  html:not(.lock-mobile-layout) .channel-panel-header {
    height: 56px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--fl-ring);
    font-weight: 600;
  }
  html:not(.lock-mobile-layout) .chat-header {
    min-height: 56px;
    border-bottom: 1px solid var(--fl-ring);
  }
  html:not(.lock-mobile-layout) .channel-section-title {
    font-size: .72rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .02em;
  }
  html:not(.lock-mobile-layout) .channel-item { border-radius: 6px; }
  html:not(.lock-mobile-layout) .channel-item:hover { background: var(--fl-hover); }
  html:not(.lock-mobile-layout) .channel-item.active { background: rgba(255, 255, 255, .10); }

  /* rail de servidores: indicador lateral + iconos que "se redondean" */
  html:not(.lock-mobile-layout) #serverList > * { position: relative; }
  html:not(.lock-mobile-layout) .sidebar-home { background: #22252b; }
  html:not(.lock-mobile-layout) .sidebar-separator { background: var(--fl-hover); }

  /* scroll fino visible (la app lo ocultaba del todo) */
  html:not(.lock-mobile-layout) ::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
  html:not(.lock-mobile-layout) ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .14);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  html:not(.lock-mobile-layout) ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .26); background-clip: padding-box; border: 2px solid transparent; }
  html:not(.lock-mobile-layout) .messages-area::-webkit-scrollbar { width: 8px; }

  /* caja de mensaje con el anillo suave de Trevix */
  html:not(.lock-mobile-layout) .mf-row { box-shadow: inset 0 0 0 1px var(--fl-ring); border-color: transparent; }
  html:not(.lock-mobile-layout) .mf-row:focus-within { box-shadow: inset 0 0 0 1px rgba(88, 101, 242, .6); }
}

/* ── Selector de reacción (PC): solo emojis, más compacto ── */
@media (min-width: 769px) {
  html:not(.lock-mobile-layout) #dpPicker.dp-reaction { height: 460px; width: 400px; }
  html:not(.lock-mobile-layout) #dpPicker.dp-reaction .dp-tab:not([data-tab="emojis"]) { display: none; }
  html:not(.lock-mobile-layout) #dpPicker.dp-reaction .dp-tab[data-tab="emojis"] { cursor: default; }
  html:not(.lock-mobile-layout) #dpPicker { box-shadow: var(--fl-shadow); border-radius: 12px; }

  /* ── Hora de los mensajes agrupados (al pasar el ratón / responder) ──
     Antes se desbordaba del hueco del avatar y pisaba el texto. */
  html:not(.lock-mobile-layout) .msg-avatar-placeholder { overflow: hidden; }
  html:not(.lock-mobile-layout) .msg-grouped:hover .msg-avatar-placeholder::after {
    content: attr(data-short);
    display: block;
    width: 100%;
    text-align: center;
    font-size: .64rem;
    line-height: 1;
    letter-spacing: 0;
    color: var(--dp-text-faint, #7F8591);
    overflow: hidden;
    text-overflow: clip;
  }
  /* mensaje al que respondes: sin saltar de sitio (el borde era layout real) */
  html:not(.lock-mobile-layout) .message-card.replying-to {
    border-left: 0;
    box-shadow: inset 3px 0 0 var(--accent);
    background: rgba(88, 101, 242, .10);
  }
}

/* ── VC: avatar más pequeño y centrado dentro del tile ── */
@media (min-width: 769px) {
  html:not(.lock-mobile-layout) .vc-my-card { width: min(1030px, 100%); min-width: 0; }
  html:not(.lock-mobile-layout) .vc-my-avatar-row {
    width: 30%; max-width: 170px; min-width: 72px;
    margin: 0 auto !important; padding: 0 !important;
    top: auto !important; left: auto !important; transform: none !important;
    display: flex; align-items: center; justify-content: center;
  }
  html:not(.lock-mobile-layout) .vc-avatar-wrap {
    width: 100%; margin: 0 !important; position: relative; display: block;
    top: auto !important; left: auto !important; transform: none !important;
  }
  html:not(.lock-mobile-layout) .vc-my-avatar {
    width: 100% !important; height: auto !important; aspect-ratio: 1 / 1;
    margin: 0 !important; border-radius: 50%; overflow: hidden;
    position: relative; display: flex; align-items: center; justify-content: center;
  }
  html:not(.lock-mobile-layout) .vc-my-avatar img { width: 100%; height: 100%; object-fit: cover; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.lock-mobile-layout) .sm-sheet, html:not(.lock-mobile-layout) .cc-sheet,
  html:not(.lock-mobile-layout) .fx-sheet, html:not(.lock-mobile-layout) .vc-panel,
  html:not(.lock-mobile-layout) .voice-sheet { animation: none !important; }
}