/* ── MESSAGE FORM ──────────────────────── */

#replyBar {
  border-radius: 12px 12px 0 0 !important;
  border-bottom: 1px solid #26292F !important;
  margin-bottom: 4px;
}
#typingIndicator {
  padding-bottom: 0 !important;
}

.message-form-wrap {
  padding: 8px 10px 14px;
  flex-shrink: 0;
  background: var(--bg-dark);
  position: relative;
  z-index: 10;
}

/* ── Vista previa de adjunto (imagen/video/gif/webm) antes de enviar ──
   Aparece encima de la caja de texto al elegir un archivo. Una sola
   línea separadora, pegada justo encima de la caja de texto (no arriba
   del todo, que ya tiene su propio borde superior en .message-form-wrap
   y quedaban dos líneas pegadas una a otra). */
.mf-attach-preview {
  padding: 2px 2px 12px;
  margin-bottom: 8px;
}
/* Recuadro/pop-up negro que envuelve todo: iconos arriba a la derecha,
   el medio (imagen/video) debajo, y nombre/tamaño/tipo al fondo, ya
   dentro del propio recuadro. */
.mf-attach-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 220px;
  max-width: 100%;
  background: #0B0C0E;
  border: 1px solid #2E333C;
  border-radius: 10px;
  padding: 8px;
  gap: 8px;
}
/* Barra de iconos (ojo / lápiz / papelera): esquina superior derecha
   del pop-up. Siempre visible (en móvil no hay hover). */
.mf-attach-icons {
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: #1E1F22;
  border: 1px solid #2E333C;
  border-radius: 7px;
  padding: 3px 4px;
  white-space: nowrap;
}
.mf-attach-icon-btn {
  background: none;
  border: none;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 5px;
  flex: 1;
}
.mf-attach-icon-btn:hover { background: rgba(255,255,255,0.08); }
.mf-attach-icon-btn img { width: 15px; height: 15px; display: block; }

.mf-attach-thumb-wrap {
  position: relative;
  width: 100%;
  height: 140px;
}
.mf-attach-thumb {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: #16171A;
  overflow: hidden;
}
.mf-attach-thumb img,
.mf-attach-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  /* Transición suave del blur: al marcar/desmarcar spoiler el medio no
     se quita ni se vuelve a montar (eso es lo que causaba el parpadeo),
     solo se difumina/aclara en el sitio. */
  transition: filter .15s ease;
  filter: blur(0);
}
.mf-attach-thumb.is-spoiler img,
.mf-attach-thumb.is-spoiler video {
  filter: blur(14px);
}

/* Etiqueta "SPOILER": píldora oscura, bordes muy redondeados, centrada
   sobre el medio difuminado. */
.mf-attach-spoiler-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: rgba(30, 31, 34, 0.85);
  color: #f2f3f5;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 8px 20px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
}

/* Nombre / tamaño / tipo: abajo, dentro del pop-up */
.mf-attach-info { min-width: 0; }
.mf-attach-name {
  color: var(--text-header, #f2f3f5);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mf-attach-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-size: 0.72rem;
  color: var(--text-muted, #949ba4);
}
.mf-attach-type {
  color: #a3a9f4;
  font-weight: 700;
  text-transform: uppercase;
}

/* Fila principal: + | pill | mic/send */
.mf-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Botones circulares laterales base */
.mf-circle-btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: var(--bg-input);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}
.mf-circle-btn:hover  { background: var(--bg-hover); }
.mf-circle-btn:active { transform: scale(0.92); }

/* Icono de adjuntar: uno para móvil (+ suelto) y otro para PC (círculo con +) */
.attach-icon-desktop { display: none; }
.attach-icon-mobile  { display: block; }

/* Mic: visible por defecto */
.mf-mic-btn {
  display: flex;
}

/* Switcher wrapper — mismo tamaño que los botones circulares */
/* Solo debe existir en móvil (en PC se envía con Enter) */
.mf-icon-switcher {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

/* Cada layer ocupa todo el espacio del wrapper */
.mf-layer {
  position: absolute;
  inset: 0;
  width: 42px;
  height: 42px;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Mic visible por defecto, send oculto */
#micBtn  { opacity: 1; pointer-events: auto;  transform: scale(1); }
#sendBtn { opacity: 0; pointer-events: none;  transform: scale(0.7); }

/* Con texto: mic se desvanece, send aparece */
.mf-icon-switcher.has-text #micBtn  { opacity: 0; pointer-events: none;  transform: scale(0.7); }
.mf-icon-switcher.has-text #sendBtn { opacity: 1; pointer-events: auto;  transform: scale(1); }

/* Send: fondo azul */
.mf-send-circle {
  background: #5865f2 !important;
}
.mf-send-circle:hover  { background: #4752c4 !important; }

/* Pill central */
.mf-pill {
  flex: 1;
  min-width: 0;
  background: var(--bg-input);
  border-radius: 24px;
  display: flex;
  align-items: center;
  padding: 0 10px 0 14px;
  min-height: 42px;
  gap: 6px;
}

/* Textarea dentro de la pill */
.message-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 1rem; /* >=16px evita el auto-zoom del teclado móvil al enfocar/desenfocar */
  font-family: 'Inter', sans-serif;
  padding: 10px 0;
  resize: none;
  overflow-y: hidden;
  line-height: 1.4;
  max-height: 120px;
  overflow-y: auto;
  display: block;
  align-self: center;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
.message-input::placeholder {
  color: #C0C5CF;
}
.message-input:not(:placeholder-shown) {
  white-space: pre-wrap;
  overflow-x: auto;
}

/* Íconos GIF + emoji dentro de pill */
.mf-pill-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.mf-pill-icon {
  width: 26px;
  height: 26px;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
  filter: invert(0.5);
}
.mf-pill-icon:hover { filter: invert(0.9); }
#smileyIconImg.mf-pill-icon { filter: none; opacity: 0.85; }
#smileyIconImg.mf-pill-icon:hover { opacity: 1; filter: brightness(1.15); }

/* Send btn legacy (por si algo lo referencia) */
.send-btn {
  display: none;
}
.send-btn.visible {
  display: flex;
}

/* ── Desktop: barra plana única (como Discord de escritorio) ──
   En PC el "+" es pequeño y sin fondo, y toda la fila (+ | input | iconos)
   vive dentro de una sola barra plana, no una píldora separada. */
@media (min-width: 769px) {
  .message-form-wrap {
    padding: 0 16px;
    height: 56px;
    display: flex;
    align-items: center;
  }

  .mf-row {
    background: var(--bg-channel, #191B20);
    border-radius: 8px;
    padding: 0 16px;
    gap: 12px;
    min-height: 44px;
  }

  .mf-pill {
    background: transparent;
    padding: 0;
    border-radius: 0;
    min-height: auto;
  }

  /* Forzar los iconos (emoji/gif/etc.) a la esquina derecha de la barra,
     sin depender de que el textarea se estire por sí solo */
  .mf-pill-icons {
    margin-left: auto;
  }

  .attach-icon-mobile  { display: none; }
  .attach-icon-desktop { display: block; }

  /* En PC no se usa el switcher mic/enviar (se envía con Enter) */
  .mf-icon-switcher { display: none !important; }
}

/* Clases legacy */
.form-icon-btn {
  background: none; border: none;
  display: flex; align-items: center;
  cursor: pointer; padding: 4px;
  flex-shrink: 0;
}
.form-icon {
  width: 22px; height: 22px;
  filter: invert(0.5);
  cursor: pointer;
  transition: filter var(--transition);
  flex-shrink: 0;
}
.form-icon:hover { filter: invert(0.9); }
.form-right-icons {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}

/* Icono de emoji en móvil (< 769px): la "carita" del icono en color
   #C0C5CF. En escritorio se deja el color original (#C7CBD1). */
@media (max-width: 768px) {
  #smileyIconImg .mf-smiley-face { fill: #C0C5CF; }
  /* La opacidad 0.85 de base (línea ~274) diluye el gris hacia un tono
     más apagado (~#A9AEB8); en móvil se anula para que se vea el
     #C0C5CF real. */
  #smileyIconImg.mf-pill-icon { opacity: 1; }
}