/* ═══════════════════════════════════════════════════════════════════
   Configuración de canal (PC) — modal flotante con animación
   + canal de anuncios (caja bloqueada) + insignia de modo lento
   ═══════════════════════════════════════════════════════════════════ */
#chmOverlay {
  display: none; position: fixed; inset: 0; z-index: 1200;
  align-items: center; justify-content: center;
  padding: 16px 8vw; box-sizing: border-box;
  background: rgba(0, 0, 0, 0); transition: background .2s ease;
}
#chmOverlay.open { background: rgba(0, 0, 0, .68); }
#chmOverlay .chm-modal {
  position: relative; display: flex; width: 100%; max-width: 1180px; height: 100%; max-height: 900px;
  background: #1b1c20; border: 1px solid #2c2e34; border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .6); overflow: hidden;
  opacity: 0; transform: translateY(14px) scale(.965);
  transition: opacity .2s ease, transform .26s cubic-bezier(.2, .9, .25, 1.05);
}
#chmOverlay.open .chm-modal { opacity: 1; transform: none; }
#chmOverlay.closing .chm-modal { opacity: 0; transform: translateY(8px) scale(.975); transition: opacity .18s ease, transform .2s ease; }
@media (prefers-reduced-motion: reduce) { #chmOverlay, #chmOverlay .chm-modal { transition: none !important; } }

.chm-sidebar { width: clamp(240px, 24vw, 330px); min-width: clamp(240px, 24vw, 330px); background: #212227; border-right: 1px solid #2c2e34; display: flex; }
.chm-sb-inner { flex: 1; overflow-y: auto; padding: 20px 14px 24px; }
.chm-sb-title { display: flex; align-items: center; gap: 8px; padding: 6px 12px 18px; font-size: 1.15rem; font-weight: 600; color: #f2f3f5; min-width: 0; }
.chm-sb-hash { color: #949ba4; display: flex; flex: none; }
.chm-sb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chm-sb-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; margin-bottom: 2px;
  border: none; border-radius: 9px; background: transparent; color: #d2d5db; font: inherit; font-size: .93rem; font-weight: 600;
  text-align: left; cursor: pointer; transition: background .15s, color .15s;
}
.chm-sb-item svg { flex: none; color: #b5bac1; }
.chm-sb-item:hover { background: #2a2c33; color: #fff; }
.chm-sb-item.active { background: #32343c; color: #fff; }
.chm-sb-item.active svg { color: #fff; }
.chm-sb-item.danger { color: #f0626f; margin-top: 12px; }
.chm-sb-item.danger svg { color: #f0626f; }
.chm-sb-item.danger:hover { background: rgba(240, 98, 111, .12); color: #ff7b87; }

.chm-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; background: #1b1c20; }
.chm-head { display: flex; align-items: center; justify-content: space-between; height: 68px; flex: none; padding: 0 20px 0 28px; border-bottom: 1px solid #2c2e34; }
.chm-head-title { margin: 0; font-size: 1.3rem; font-weight: 600; color: #f2f3f5; }
.chm-close { width: 40px; height: 40px; border-radius: 10px; border: none; background: none; color: #d2d5db; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; }
.chm-close:hover { background: #2a2c33; color: #fff; }
.chm-content { flex: 1; overflow-y: auto; padding: 28px 36px 110px; scrollbar-width: thin; }
.chm-inner { max-width: 720px; margin: 0 auto; }

.chm-field-label { font-size: .92rem; font-weight: 700; color: #f2f3f5; margin: 0 0 8px; }
.chm-hint { font-size: .83rem; color: #b5bac1; line-height: 1.4; margin: -2px 0 6px; }
.chm-sep { height: 1px; background: #2c2e34; margin: 24px 0; }
.chm-input, .chm-textarea { width: 100%; box-sizing: border-box; background: #26272d; border: 1px solid #34363d; border-radius: 10px; color: #f2f3f5; font: inherit; font-size: .95rem; padding: 0 16px; outline: none; transition: border-color .15s; }
.chm-input { height: 48px; }
.chm-input:focus, .chm-textarea:focus { border-color: #5b57e8; }
.chm-textarea-wrap { position: relative; }
.chm-textarea { height: 96px; padding: 14px 16px 32px; resize: none; line-height: 1.4; }
.chm-textarea::placeholder { color: #8c919b; }
.chm-counter { position: absolute; right: 14px; bottom: 9px; font-size: .78rem; color: #8c919b; font-variant-numeric: tabular-nums; pointer-events: none; }

/* Barra del modo lento — mismo estilo que el límite de participantes de voz */
.chm-range-wrap { position: relative; padding-top: 34px; padding-bottom: 34px; margin: 4px 0 0; }
.chm-tooltip { position: absolute; top: 0; left: 0; transform: translateX(-50%); background: #0B0C0E; border: 1px solid #2E333C; color: #fff; font-size: .8rem; font-weight: 700; padding: 6px 12px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s ease; }
.chm-tooltip::after { content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border-width: 6px 6px 0 6px; border-style: solid; border-color: #0B0C0E transparent transparent transparent; }
.chm-tooltip.visible { opacity: 1; }
.chm-ruler { position: absolute; left: 0; right: 0; top: 38px; height: 14px; pointer-events: none; }
.chm-ruler-tick { position: absolute; top: 0; width: 2px; height: 14px; background: #66678D; border-radius: 1px; }
.chm-ruler-labels { position: absolute; left: 0; right: 0; top: 62px; font-size: .78rem; color: #949ba4; height: 16px; pointer-events: none; }
.chm-ruler-labels span { position: absolute; transform: translateX(-50%); white-space: nowrap; transition: color .15s; }
.chm-ruler-labels span.on { color: #23a559; font-weight: 700; }
input.chm-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: #4e5058; outline: none; margin: 10px 0 6px; position: relative; z-index: 1; cursor: pointer; }
input.chm-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #413CDD; cursor: pointer; margin-top: -1px; }
input.chm-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #413CDD; cursor: pointer; }

.chm-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 4px; margin-top: 18px; }
.chm-toggle-info { min-width: 0; }
.chm-switch { position: relative; flex: none; width: 48px; height: 28px; cursor: pointer; }
.chm-switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.chm-switch-track { position: absolute; inset: 0; border-radius: 14px; background: #4e5058; transition: background .2s; }
.chm-switch-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .22s cubic-bezier(.3, 1.3, .5, 1); }
.chm-switch input:checked + .chm-switch-track { background: #413CDD; }
.chm-switch input:checked + .chm-switch-track .chm-switch-knob { transform: translateX(20px); }

/* Barra de cambios sin guardar */
.chm-unsaved { position: absolute; left: 24px; right: 24px; bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px 12px 20px; background: #0C0B0E; border: 1px solid #2d2f36; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); color: #f2f3f5; font-size: .92rem; font-weight: 600; opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity .22s ease, transform .28s cubic-bezier(.2, .9, .3, 1.1); }
.chm-unsaved.visible { opacity: 1; transform: none; pointer-events: auto; }
.chm-unsaved-actions { display: flex; gap: 8px; }
.chm-btn { border: none; border-radius: 8px; padding: 9px 18px; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; transition: background .15s, opacity .15s; }
.chm-btn.ghost { background: transparent; color: #d2d5db; }
.chm-btn.ghost:hover { background: #2a2c33; color: #fff; }
.chm-btn.primary { background: #4641d9; color: #fff; }
.chm-btn.primary:hover { background: #5651f0; }
.chm-btn:disabled { opacity: .55; cursor: default; }
@media (max-width: 1100px) { #chmOverlay { padding: 8px; } }
@media (max-width: 768px) { #chmOverlay { display: none !important; } }

/* ── Canal de anuncios / sin permiso: caja bloqueada ── */
.message-form-wrap.mf-locked .mf-row { opacity: .62; cursor: not-allowed; background: transparent !important; border-color: #2B2F36 !important; box-shadow: none; }
.message-form-wrap.mf-locked #attachBtn,
.message-form-wrap.mf-locked .mf-pill-icons,
.message-form-wrap.mf-locked .mf-icon-switcher,
.message-form-wrap.mf-locked .mf-slow-badge { display: none !important; }
.message-form-wrap.mf-locked .mf-row::before {
  content: ''; flex: none; width: 22px; height: 22px; margin: 0 4px 0 12px; background: #8c919b;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M13%202.5a1.5%201.5%200%200%201%203%200v11a1.5%201.5%200%200%201-3%200v-.214c-2.162-1.241-4.49-1.843-6.912-2.083l.405%202.712A1%201%200%200%201%205.51%2015.1h-.548a1%201%200%200%201-.916-.599l-1.85-3.49-.202-.003A2.014%202.014%200%200%201%200%209V7a2.02%202.02%200%200%201%201.992-2.013%2075%2075%200%200%200%202.483-.075c3.043-.154%206.148-.849%208.525-2.199zm1%200v11a.5.5%200%200%200%201%200v-11a.5.5%200%200%200-1%200m-1%201.35c-2.344%201.205-5.209%201.842-8%202.033v4.233q.27.015.537.036c2.568.189%205.093.744%207.463%201.993zm-9%206.215v-4.13a95%2095%200%200%201-1.992.052A1.02%201.02%200%200%200%201%207v2c0%20.55.448%201.002%201.006%201.009A61%2061%200%200%201%204%2010.065m-.657.975%201.609%203.037.01.024h.548l-.002-.014-.443-2.966a68%2068%200%200%200-1.722-.082z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M13%202.5a1.5%201.5%200%200%201%203%200v11a1.5%201.5%200%200%201-3%200v-.214c-2.162-1.241-4.49-1.843-6.912-2.083l.405%202.712A1%201%200%200%201%205.51%2015.1h-.548a1%201%200%200%201-.916-.599l-1.85-3.49-.202-.003A2.014%202.014%200%200%201%200%209V7a2.02%202.02%200%200%201%201.992-2.013%2075%2075%200%200%200%202.483-.075c3.043-.154%206.148-.849%208.525-2.199zm1%200v11a.5.5%200%200%200%201%200v-11a.5.5%200%200%200-1%200m-1%201.35c-2.344%201.205-5.209%201.842-8%202.033v4.233q.27.015.537.036c2.568.189%205.093.744%207.463%201.993zm-9%206.215v-4.13a95%2095%200%200%201-1.992.052A1.02%201.02%200%200%200%201%207v2c0%20.55.448%201.002%201.006%201.009A61%2061%200%200%201%204%2010.065m-.657.975%201.609%203.037.01.024h.548l-.002-.014-.443-2.966a68%2068%200%200%200-1.722-.082z'/%3E%3C/svg%3E") center / contain no-repeat; transform: scaleX(-1);
}
.message-form-wrap.mf-locked .message-input { cursor: not-allowed; }
.message-form-wrap.mf-locked .message-input::placeholder { color: #8c919b; opacity: 1; }
.channel-item .channel-announce { display: inline-flex; align-items: center; }

/* ── Insignia del modo lento en la caja de texto ── */
.mf-slow-badge { display: none; align-items: center; gap: 5px; flex: none; margin-right: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: #b5bac1; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; user-select: none; }
.mf-slow-badge.cooling { background: rgba(240, 178, 50, .16); color: #f0b232; }