/* =========================================================================
   KlipTok v33 · RED INTEGRADA  (assets/kt-v33-red.css)   —  solo añade.
   · Amplía el chat al 100% de la pantalla (red integrada).
   · Icono de chat mucho más visible y algo más grande.
   · Responsive móvil: la barra superior de acciones y las barras del feed
     dejan de salirse / distorsionar la pantalla.
   No modifica reglas existentes: solo las refuerza con mayor especificidad.
   ========================================================================= */

/* ---------- 0) nunca desbordar a lo ancho en móvil ---------- */
html, body { max-width: 100%; }
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  /* la barra superior de acciones cabe entera: menos huecos y botones más compactos */
  #kt-top { gap: .35rem !important; padding: 0 .5rem !important; grid-template-columns: auto minmax(0, 1fr) auto !important; }
  #kt-top .kt-top-l, #kt-top .kt-top-r { gap: .25rem !important; min-width: 0; }
  #kt-top .kt-btn { padding: 0 .55rem !important; }
  #kt-top .kt-ibtn { width: 2.1rem !important; height: 2.1rem !important; }
  #kt-top #logo-home { max-width: 5.5rem; overflow: hidden; }
  #kt-top #logo-home .kt-logo-name { font-size: .95rem; }
  /* barra de acciones móvil (búsqueda + categorías) y carrusel: desplazamiento limpio, sin romper el ancho */
  #tabs-mobile { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; scrollbar-width: none; }
  #tabs-mobile::-webkit-scrollbar { display: none; }
  #tabs-desktop { max-width: 100%; }
  /* raíl de acciones de cada tarjeta del feed: que quepa y no empuje el diseño */
  .feed-card .absolute.bottom-4.right-3 { max-width: calc(100% - .75rem); }
  /* barra de navegación de vistas (editores/herramientas): el título largo no rompe la fila */
  #kt-navbar { gap: .35rem; padding: 0 .5rem; }
  #kt-navbar .ktn-crumbs { min-width: 0; }
  #k19-topnav { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  #k19-topnav::-webkit-scrollbar { display: none; }
}

/* ---------- 1) el chat ocupa el 100% (red integrada) ---------- */
#ktc.ktc .ktc-shell { inset: 0 !important; border-radius: 0 !important; max-width: none !important; max-height: none !important; }
#ktc.ktc .ktc-bg { background: rgba(2, 6, 23, .78); }

/* ---------- 2) icono de chat más visible y algo más grande ---------- */
/* botón del lateral */
#ktc-side {
  position: relative; padding: .7rem .9rem !important; font-size: .95rem !important;
  background: linear-gradient(135deg, #2563eb, #9333ea, #ec4899) !important; color: #fff !important;
  border: 0 !important; box-shadow: 0 10px 26px -10px rgba(147, 51, 234, .85) !important;
}
#ktc-side:hover { filter: brightness(1.06); }
#ktc-side .ktc-side-ic { font-size: 1.35rem; line-height: 1; }
#ktc-side .ktc-side-dot {
  position: absolute; top: 4px; right: 8px; width: 9px; height: 9px; border-radius: 999px;
  background: #22d3ee; box-shadow: 0 0 0 2px #fff; display: none;
}
html.dark #ktc-side .ktc-side-dot { box-shadow: 0 0 0 2px #0f172a; }
#ktc-side.ktc-hasnew .ktc-side-dot { display: block; }

/* botón de chat en las tarjetas del feed: más grande */
.feed-card [title="Hilo de Chat del Video"] { transform: scale(1.12); }
.feed-card [title="Hilo de Chat del Video"] span { font-size: 21px !important; }

/* lanzador flotante (FAB): siempre a la vista */
#ktc-fab {
  position: fixed; z-index: 9000; inset-inline-end: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.05rem;
  border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: 700 .9rem/1 Inter, system-ui, sans-serif;
  background: linear-gradient(135deg, #2563eb, #9333ea, #ec4899);
  box-shadow: 0 16px 40px -12px rgba(147, 51, 234, .9);
}
#ktc-fab:hover { filter: brightness(1.07); transform: translateY(-1px); }
#ktc-fab .ktc-fab-ic { font-size: 1.5rem; line-height: 1; }
#ktc-fab .ktc-fab-tx { display: inline; }
@media (max-width: 767px) {
  #ktc-fab { padding: .8rem; inset-inline-end: 14px; bottom: 14px; }
  #ktc-fab .ktc-fab-tx { display: none; }   /* en móvil, solo el icono (grande) */
}
body.k19-reels #ktc-fab { bottom: 14px; }
@media (min-width: 768px) { body.kt-book-on #ktc-fab { inset-inline-end: 92px; } }

/* ---------- 3) conmutador Chats / Red en la cabecera del chat ---------- */
#ktc .ktc-redtoggle { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--ktc-soft, rgba(15,23,42,.06)); }
#ktc .ktc-redtoggle button {
  border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer;
  padding: 7px 13px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
}
#ktc .ktc-redtoggle button.on { background: linear-gradient(135deg, #2563eb, #9333ea); color: #fff; }
#ktc .ktc-redtoggle .ktc-rt-ic { font-size: 1.05rem; }

/* ---------- 4) panel Red (dentro del chat) ---------- */
#ktc .ktc-red { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
#ktc.ktc-red-on .ktc-red { display: block; }
#ktc.ktc-red-on .ktc-main { display: none; }
#ktc .ktc-red-hero {
  max-width: 900px; margin: 0 auto 16px; padding: 18px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(236,72,153,.12));
  border: 1px solid var(--ktc-line, rgba(15,23,42,.12));
}
#ktc .ktc-red-hero h2 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 800; }
#ktc .ktc-red-hero p { margin: 0; font-size: .82rem; color: var(--ktc-mut, #64748b); }
#ktc .ktc-red-bar { max-width: 900px; margin: 0 auto 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#ktc .ktc-red-bar .ktc-rtabs { display: inline-flex; flex-wrap: wrap; gap: 6px; }
#ktc .ktc-red-bar .ktc-rtabs button {
  border: 1px solid var(--ktc-line, rgba(15,23,42,.16)); background: var(--ktc-soft, rgba(15,23,42,.05)); color: inherit;
  border-radius: 999px; padding: 7px 13px; font: inherit; font-weight: 700; font-size: .8rem; cursor: pointer;
}
#ktc .ktc-red-bar .ktc-rtabs button.on { background: linear-gradient(135deg, #2563eb, #9333ea); color: #fff; border-color: transparent; }
#ktc .ktc-red-bar input {
  flex: 1; min-width: 160px; padding: 9px 12px; border-radius: 11px; font: inherit;
  border: 1px solid var(--ktc-line, rgba(15,23,42,.16)); background: var(--ktc-bg, #fff); color: inherit;
}
#ktc .ktc-grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
#ktc .ktc-pcard {
  border: 1px solid var(--ktc-line, rgba(15,23,42,.12)); border-radius: 16px; padding: 14px; background: var(--ktc-panel, #f8fafc);
  display: flex; flex-direction: column; gap: 8px;
}
#ktc .ktc-pcard .ktc-phead { display: flex; align-items: center; gap: 10px; }
#ktc .ktc-pcard .ktc-pname { font-weight: 800; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ktc .ktc-pcard .ktc-pmeta { font-size: .72rem; color: var(--ktc-mut, #64748b); }
#ktc .ktc-pcard .ktc-pcats { display: flex; flex-wrap: wrap; gap: 4px; }
#ktc .ktc-pcard .ktc-pcats span { font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--ktc-soft, rgba(15,23,42,.07)); color: var(--ktc-mut, #64748b); }
#ktc .ktc-pcard .ktc-pacts { display: flex; gap: 6px; margin-top: 2px; }
#ktc .ktc-pcard .ktc-pacts button {
  flex: 1; border-radius: 10px; padding: 8px 6px; font: inherit; font-weight: 700; font-size: .78rem; cursor: pointer;
  border: 1px solid var(--ktc-line, rgba(15,23,42,.16)); background: var(--ktc-bg, #fff); color: inherit;
}
#ktc .ktc-pcard .ktc-pacts button.ktc-follow { background: linear-gradient(135deg, #2563eb, #9333ea); color: #fff; border-color: transparent; }
#ktc .ktc-pcard .ktc-pacts button.ktc-follow.on { background: var(--ktc-soft, rgba(15,23,42,.08)); color: inherit; border-color: var(--ktc-line, rgba(15,23,42,.16)); }
#ktc .ktc-pcard .ktc-pacts button.ktc-dm { flex: 0 0 auto; }
#ktc .ktc-red .ktc-empty { text-align: center; color: var(--ktc-mut, #64748b); padding: 30px 16px; grid-column: 1 / -1; }
#ktc .ktc-red-more { max-width: 900px; margin: 14px auto 4px; text-align: center; }
#ktc .ktc-red-more button { border: 1px solid var(--ktc-line, rgba(15,23,42,.16)); background: var(--ktc-soft, rgba(15,23,42,.05)); color: inherit; border-radius: 12px; padding: 10px 18px; font: inherit; font-weight: 700; cursor: pointer; }
#ktc .ktc-red-note { max-width: 900px; margin: 8px auto 0; font-size: .72rem; color: var(--ktc-mut, #64748b); text-align: center; }

@media (max-width: 780px) {
  #ktc .ktc-grid { grid-template-columns: 1fr 1fr; }
  #ktc .ktc-red { padding: 12px; }
}
@media (max-width: 460px) {
  #ktc .ktc-grid { grid-template-columns: 1fr; }
}