/* ══════════════════════════════════════════════════════════════
   DESKTOP POLISH — pulido visual y arreglos SOLO para PC
   Se carga el último. Todo va dentro de @media (min-width:769px) y
   con html:not(.lock-mobile-layout), así que la versión móvil (incluido
   un móvil girado en horizontal) queda exactamente igual que antes.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  html:not(.lock-mobile-layout) {
    --dp-surface:      #23262C;   /* barras / cajas elevadas */
    --dp-surface-2:    #2A2E35;
    --dp-line:         #2B2F36;
    --dp-text-faint:   #7F8591;
  }

  /* ── 1. CAJA DE MENSAJE ─────────────────────────────────────
     BUG: .message-form-wrap era un flex en fila y .mf-row no tenía
     ancho, así que la barra medía ~320px en vez de todo el ancho (y el
     selector de emojis, anclado al botón, salía en medio de la pantalla).
     La barra de "respondiendo a" y la vista previa de adjuntos se
     insertan dentro del mismo contenedor y quedaban AL LADO de la caja
     en vez de encima. Ahora el contenedor es una columna. */
  html:not(.lock-mobile-layout) .message-form-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    height: auto;
    min-height: 56px;
    padding: 6px 16px 20px;
    background: var(--bg-channel);
  }
  html:not(.lock-mobile-layout) .mf-row {
    width: 100%;
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 14px 0 10px;
    gap: 10px;
    background: var(--dp-surface);
    border: 1px solid var(--dp-line);
    border-radius: 10px;
    transition: border-color .15s ease, background .15s ease;
  }
  html:not(.lock-mobile-layout) .mf-row:focus-within {
    border-color: rgba(88, 101, 242, .55);
    background: #262A31;
  }
  html:not(.lock-mobile-layout) .mf-pill { flex: 1; min-width: 0; }

  /* Botón "+" : icono limpio de 26px, sin círculo gris de fondo */
  html:not(.lock-mobile-layout) .mf-circle-btn#attachBtn {
    width: 34px; height: 34px; min-width: 34px;
    background: transparent;
    border-radius: 8px;
  }
  html:not(.lock-mobile-layout) .mf-circle-btn#attachBtn:hover { background: rgba(255,255,255,.07); }
  html:not(.lock-mobile-layout) .attach-icon-desktop { width: 26px; height: 26px; transition: fill .15s ease; }
  html:not(.lock-mobile-layout) .mf-circle-btn#attachBtn:hover .attach-icon-desktop { fill: #fff; }

  html:not(.lock-mobile-layout) .message-input {
    font-size: .95rem;
    padding: 13px 0;
    line-height: 1.35;
  }
  html:not(.lock-mobile-layout) .message-input::placeholder { color: var(--dp-text-faint); }

  /* Barra de "respondiendo a": pegada a la caja y con el mismo ancho */
  html:not(.lock-mobile-layout) #replyBar {
    width: 100%;
    margin: 0 !important;
    background: var(--dp-surface-2) !important;
    border: 1px solid var(--dp-line) !important;
    border-bottom: none !important;
    border-radius: 10px 10px 0 0 !important;
  }
  html:not(.lock-mobile-layout) #replyBar + .mf-attach-preview + .mf-row,
  html:not(.lock-mobile-layout) #replyBar ~ .mf-row {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  /* Icono emoji de la derecha: un poco más grande y con hover claro */
  html:not(.lock-mobile-layout) #smileyIconImg.mf-pill-icon { width: 24px; height: 24px; opacity: .8; }
  html:not(.lock-mobile-layout) #smileyIconImg.mf-pill-icon:hover { opacity: 1; }

  /* ── 2. BARRA DE USUARIO (abajo a la izquierda) ─────────────
     BUG: las iniciales ("US") no estaban centradas en el avatar: el span
     es absoluto pero nunca llevaba display:flex, así que se pegaban
     arriba a la izquierda y se cortaban. */
  html:not(.lock-mobile-layout) #userBarInitials,
  html:not(.lock-mobile-layout) #homeUserBarInitials {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  html:not(.lock-mobile-layout) .user-bar {
    background: #15171B;
    border-top: 1px solid var(--border);
    padding: 0 12px 0 14px;
  }
  html:not(.lock-mobile-layout) .user-bar-settings {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    color: var(--text-muted);
    transition: background .15s ease, color .15s ease;
  }
  html:not(.lock-mobile-layout) .user-bar-settings:hover { background: rgba(255,255,255,.08); color: var(--text-header); }

  /* ── 3. CABECERA DEL CHAT ───────────────────────────────────
     Iconos de tamaños distintos (la campana era diminuta) → todos
     en una caja de 32px con el mismo hover. */
  html:not(.lock-mobile-layout) .chat-header { gap: 10px; }
  html:not(.lock-mobile-layout) .chat-header-title { font-size: 1rem; }
  html:not(.lock-mobile-layout) .chat-header-icons { gap: 2px; }
  html:not(.lock-mobile-layout) .chat-header-icons .hdr-icon {
    width: 32px; height: 32px;
    padding: 5px;
    border-radius: 6px;
    box-sizing: border-box;
  }
  html:not(.lock-mobile-layout) .chat-header-icons .hdr-icon:hover {
    background: rgba(255,255,255,.07);
  }
  html:not(.lock-mobile-layout) .members-btn { width: 32px; height: 32px; border-radius: 6px; }

  /* ── 4. MENSAJES ────────────────────────────────────────────
     BUG: toda la app tenía user-select:none, así que en PC era
     imposible seleccionar o copiar el texto de un mensaje. */
  html:not(.lock-mobile-layout) .msg-text,
  html:not(.lock-mobile-layout) .msg-text *,
  html:not(.lock-mobile-layout) .msg-sender,
  html:not(.lock-mobile-layout) .msg-time,
  html:not(.lock-mobile-layout) .msg-reply-text,
  html:not(.lock-mobile-layout) .msg-link,
  html:not(.lock-mobile-layout) .msg-embed-title,
  html:not(.lock-mobile-layout) .msg-embed-desc {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    cursor: text;
  }
  html:not(.lock-mobile-layout) .msg-link { cursor: pointer; }
  html:not(.lock-mobile-layout) .msg-text { overflow-wrap: anywhere; line-height: 1.45; }
  html:not(.lock-mobile-layout) .messages-area ::selection { background: rgba(88, 101, 242, .45); }

  html:not(.lock-mobile-layout) .message-card { border-radius: 6px; }
  html:not(.lock-mobile-layout) .message-card:hover { background: rgba(255,255,255,.035); }
  html:not(.lock-mobile-layout) .msg-time { color: var(--dp-text-faint); }

  /* ── 5. PANEL DE CANALES ──────────────────────────────────── */
  html:not(.lock-mobile-layout) .channel-panel-header {
    font-size: 1rem;
    transition: background .15s ease;
    cursor: pointer;
  }
  html:not(.lock-mobile-layout) .channel-panel-header:hover { background: rgba(255,255,255,.04); }
  html:not(.lock-mobile-layout) .channel-section-title { padding-top: 18px; letter-spacing: .05em; }
  html:not(.lock-mobile-layout) .channel-item {
    padding: 7px 10px;
    margin-bottom: 1px;
    border-radius: 6px;
  }
  html:not(.lock-mobile-layout) .channel-item.active { background: #2A2D33; }

  /* ── 6. RAIL DE SERVIDORES ─────────────────────────────────── */
  html:not(.lock-mobile-layout) .sidebar { gap: 10px; border-right-color: var(--border); }

  /* ── 7. PANEL "ACTIVO AHORA" (amigos) ───────────────────────── */
  html:not(.lock-mobile-layout) #friendActivityPanel { background: var(--bg-channel); }
}