:root {
  --cc-pink: #eb78b5;
  --cc-text: #171717;
  --cc-border: #dedee3;
}

.kiwi-wrap {
  color: var(--cc-text);
}

/* Cabecera Kiwi provisional */
.kiwi-header {
  background: var(--cc-pink) !important;
  color: var(--cc-text) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Mensajes limpios */
.kiwi-messagelist {
  background: #ffffff !important;
  box-shadow: none !important;
}

/* Editor inferior */
.kiwi-controlinput {
  background: #ffffff !important;
}

/* ==========================================
   CHATCITO 2026 - ESTRUCTURA REAL KIWIIRC
   ========================================== */

/* Eliminar navegación izquierda */
.kiwi-wrap > .kiwi-statebrowser {
    display: none !important;
}

/* Dar todo el ancho al workspace */
.kiwi-wrap > .kiwi-workspace {
    position: relative !important;
    left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Contenedor central */
.kiwi-workspace .kiwi-container,
.kiwi-workspace .kiwi-container-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Mantener disposición horizontal:
   conversación izquierda / usuarios derecha */
.kiwi-container-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
}

/* Conversación: todo el espacio libre */
.kiwi-container-content > .kiwi-messagelist {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* Usuarios: pegados al borde derecho */
.kiwi-container-content > .kiwi-sidebar-section-nicklist {
    display: block !important;
    flex: 0 0 250px !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    margin: 0 !important;
    border-left: 1px solid #dedee3 !important;
    background: #f5f5f6 !important;
}

/* Sin márgenes externos */
.kiwi-wrap,
.kiwi-workspace {
    padding: 0 !important;
}

/* MÓVIL: solo conversación */
@media (max-width: 768px) {
    .kiwi-container-content > .kiwi-sidebar-section-nicklist {
        display: none !important;
    }

    .kiwi-container-content > .kiwi-messagelist {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}


/* CHATCITO 2026 - MENU FUNCIONAL */

/* Mantener la barra nativa montada para conservar
   los componentes Vue y el reproductor de radios. */
.kiwi-wrap > .kiwi-statebrowser.cc-menu-nativo {
  display: block !important;
  position: fixed !important;
  top: 55px !important;
  left: 8px !important;
  width: 290px !important;
  height: min(75vh, 650px) !important;
  z-index: 10000 !important;
  border: 1px solid #e0a4c6 !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 35px rgba(0,0,0,.22) !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-110%) !important;
  transition: transform .18s ease, visibility .18s;
}

.kiwi-wrap > .kiwi-statebrowser.cc-menu-abierto {
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}

/* Botón rosa con letras negras */
#cc-boton-salas {
  order: -1;
  flex: 0 0 auto;
  background: #eb78b5;
  color: #111111;
  border: 0;
  border-radius: 5px;
  padding: 9px 12px;
  margin: 4px 8px;
  font: 700 13px Arial, sans-serif;
  cursor: pointer;
}

#cc-boton-salas:hover {
  background: #f5a3cf;
}

.kiwi-header {
  background: #eb78b5 !important;
  color: #111111 !important;
}

/* Adaptación del menú a móvil */
@media (max-width: 768px) {
  .kiwi-wrap > .kiwi-statebrowser.cc-menu-nativo {
    top: 48px !important;
    left: 0 !important;
    width: min(310px, 94vw) !important;
    height: calc(100dvh - 105px) !important;
  }

  #cc-boton-salas {
    padding: 7px 9px;
    font-size: 12px;
  }
}

/* CHATCITO 2026 - BOTONES SUPERIORES */

#cc-menu-botones {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 8px;
}

.cc-menu-button {
  background: transparent;
  color: #111111;
  border: 0;
  padding: 9px 13px;
  font: 700 13px Arial, sans-serif;
  cursor: pointer;
  border-radius: 5px;
  white-space: nowrap;
}

.cc-menu-button:hover,
.cc-menu-button[aria-expanded="true"] {
  background: #f5a3cf;
}

/* Anular el estilo anterior del botón individual */
#cc-boton-salas {
  margin: 0;
  background: transparent;
  order: initial;
}

@media (max-width: 768px) {
  #cc-menu-botones {
    gap: 2px;
    margin: 0 3px;
  }

  .cc-menu-button {
    font-size: 11px;
    padding: 7px 5px;
  }
}

/* CHATCITO 2026 - RADIO DEFINITIVA V1 */

#cc-radio2026 {
  position: fixed;
  z-index: 20000;
  width: min(360px, calc(100vw - 16px));
  max-height: calc(100dvh - 70px);
  overflow-y: auto;
  box-sizing: border-box;
  background: #fff;
  color: #211d23;
  border: 1px solid #eee5eb;
  border-radius: 13px;
  box-shadow: 0 16px 45px rgba(34,20,32,.18);
  font: 13px/1.4 Arial, sans-serif;
}

#cc-radio2026[hidden] {
  display: none !important;
}

.ccr-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid #f0eaf0;
}

.ccr-head div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ccr-head strong {
  font-size: 15px;
  color: #211d23;
}

.ccr-head span {
  font-size: 12px;
  color: #7b747d;
}

.ccr-close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: #f6f2f5;
  color: #423943;
  font-size: 22px;
  cursor: pointer;
}

.ccr-list {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.ccr-station {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 75px;
  padding: 10px;
  border: 1px solid #ebe3ea;
  border-radius: 11px;
  background: linear-gradient(120deg,#faf8fa,#f5edf3);
  color: #211d23;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.ccr-station:nth-child(2) {
  background: linear-gradient(120deg,#f6f5fa,#ebeaf5);
}

.ccr-station:hover,
.ccr-station.is-playing {
  border-color: #de8dbb;
  background: #fcecf5;
}

.ccr-station img {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  object-fit: contain;
  background: #fff;
  border-radius: 9px;
  border: 1px solid #eee;
}

.ccr-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ccr-info strong {
  font-size: 13px;
  color: #211d23;
}

.ccr-info small {
  font-size: 11px;
  color: #79717a;
}

.ccr-play {
  display: grid;
  place-items: center;
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #eb78b5;
  color: #191219;
  font-size: 15px;
  font-weight: bold;
}

.ccr-bottom {
  padding: 12px 16px 15px;
  background: #faf8fa;
  border-top: 1px solid #f0eaf0;
}

.ccr-status {
  min-height: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #a63978;
  margin-bottom: 10px;
}

.ccr-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ccr-stop {
  width: 35px;
  height: 35px;
  border: 0;
  border-radius: 8px;
  background: #f0e3ec;
  color: #793555;
  cursor: pointer;
}

.ccr-volume {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  font-size: 12px;
  color: #655d68;
}

.ccr-volume input {
  flex: 1;
  min-width: 0;
  accent-color: #d5579b;
}

@media (max-width: 768px) {
  #cc-radio2026 {
    left: 8px !important;
    right: 8px;
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 65px);
  }
}

/* ==========================================
   CHATCITO 2026 - MODO OSCURO GLOBAL
   ========================================== */

:root {
  --cc-bg-main: #0d0f14;
  --cc-bg-panel: #151922;
  --cc-bg-panel-2: #1b2130;
  --cc-bg-row: #171b25;
  --cc-bg-row-hover: #222938;
  --cc-border: #2b3140;

  --cc-text-main: #f4f6fb;
  --cc-text-soft: #b9c0cf;
  --cc-text-muted: #8f98aa;

  --cc-pink: #eb78b5;
  --cc-pink-2: #f39bc9;

  --cc-op: #e5c15a;
  --cc-halfop: #67a8ff;
  --cc-voice: #e14b5a;
}

/* Fondo general */
html,
body,
.kiwi-wrap,
.kiwi-workspace,
.kiwi-container,
.kiwi-container-content {
  background: var(--cc-bg-main) !important;
  color: var(--cc-text-main) !important;
}

/* Cabecera */
.kiwi-header {
  background: linear-gradient(180deg, #ef8fc2 0%, #e56faf 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.kiwi-header *,
#cc-menu-botones .cc-menu-button {
  color: #ffffff !important;
}

/* Botones de cabecera */
.cc-menu-button {
  background: transparent !important;
  color: #ffffff !important;
}

.cc-menu-button:hover,
.cc-menu-button[aria-expanded="true"] {
  background: rgba(255,255,255,.16) !important;
  color: #ffffff !important;
}

/* Zona mensajes */
.kiwi-messagelist,
.kiwi-workspace .kiwi-container,
.kiwi-workspace .kiwi-container-content {
  background: var(--cc-bg-main) !important;
  color: var(--cc-text-main) !important;
}

.kiwi-messagelist-item,
.kiwi-messagelist-message {
  color: var(--cc-text-main) !important;
}

.kiwi-messagelist-message time,
.kiwi-messagelist-time,
.kiwi-messagelist-message-traffic,
.kiwi-messagelist-message .u-text-muted {
  color: var(--cc-text-muted) !important;
}

/* Caja de escribir */
.kiwi-controlinput,
.kiwi-container-footer {
  background: var(--cc-bg-panel) !important;
  border-top: 1px solid var(--cc-border) !important;
  color: var(--cc-text-main) !important;
}

.kiwi-controlinput input,
.kiwi-controlinput textarea {
  background: #11151d !important;
  color: var(--cc-text-main) !important;
  border: 1px solid var(--cc-border) !important;
}

.kiwi-controlinput input::placeholder,
.kiwi-controlinput textarea::placeholder {
  color: var(--cc-text-muted) !important;
}

/* Panel derecho de usuarios */
.kiwi-container-content > .kiwi-sidebar-section-nicklist,
.kiwi-sidebar,
.kiwi-nicklist {
  background: var(--cc-bg-panel) !important;
  color: var(--cc-text-main) !important;
  border-left: 1px solid var(--cc-border) !important;
}

/* Cabecera lista usuarios */
.kiwi-nicklist-header,
.kiwi-sidebar .kiwi-channelinfo,
.kiwi-sidebar h3,
.kiwi-sidebar h4 {
  background: transparent !important;
  color: var(--cc-text-main) !important;
  border-color: var(--cc-border) !important;
}

/* Filas usuarios */
.kiwi-nicklist-user {
  background: transparent !important;
  color: var(--cc-text-main) !important;
  border-radius: 10px !important;
  margin: 2px 6px !important;
  padding: 6px 8px !important;
}

.kiwi-nicklist-user:hover {
  background: var(--cc-bg-row-hover) !important;
}

/* Links y texto de nick */
.kiwi-nicklist-user a,
.kiwi-nicklist-user span,
.kiwi-nicklist-user div {
  color: inherit !important;
}

/* Avatares */
.kiwi-nicklist-user img {
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: #0f1218 !important;
}

/* Radio nueva en oscuro también */
#cc-radio2026 {
  background: #141922 !important;
  color: var(--cc-text-main) !important;
  border: 1px solid var(--cc-border) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.45) !important;
}

.ccr-head {
  background: #141922 !important;
  border-bottom: 1px solid var(--cc-border) !important;
}

.ccr-head strong {
  color: var(--cc-text-main) !important;
}

.ccr-head span {
  color: var(--cc-text-soft) !important;
}

.ccr-close {
  background: #232938 !important;
  color: #ffffff !important;
}

.ccr-list {
  background: #141922 !important;
}

.ccr-station {
  background: linear-gradient(180deg, #1a2030 0%, #171c28 100%) !important;
  border: 1px solid var(--cc-border) !important;
  color: var(--cc-text-main) !important;
}

.ccr-station:nth-child(2) {
  background: linear-gradient(180deg, #1a1f2d 0%, #171b26 100%) !important;
}

.ccr-station:hover,
.ccr-station.is-playing {
  background: #222938 !important;
  border-color: #d778ac !important;
}

.ccr-info strong {
  color: var(--cc-text-main) !important;
}

.ccr-info small {
  color: var(--cc-text-soft) !important;
}

.ccr-bottom {
  background: #141922 !important;
  border-top: 1px solid var(--cc-border) !important;
}

.ccr-status {
  color: #f39bc9 !important;
}

.ccr-volume {
  color: var(--cc-text-soft) !important;
}

.ccr-stop {
  background: #252c3a !important;
  color: #ffffff !important;
}