/* assets/bytgon-ui.css — 🐲 Bytgon · v200 · CAPA DE INTERFAZ ADAPTABLE DEL PANEL (la lógica vive en assets/bytgon-ui.js)
 * Barras con desbordamiento inteligente (⋯ / +), compositor de una fila en el teléfono, cajón lateral con ✕ y deslizamiento,
 * aviso de proveedor compacto, textos largos plegados, menús coherentes (icono · nombre · explicación), Nexus y toast en móvil.
 * Se carga la ÚLTIMA en admin.html: estas reglas mandan sobre las zonas anteriores. Día y noche por tokens de la casa. */

/* ───────── barra superior del chat: el título nunca queda debajo de los botones ───────── */
.chat-topbar{flex-wrap:nowrap!important;min-width:0}
.chat-topbar>.spacer{display:none!important}
.chat-topbar .ct-id{flex:1 1 auto;min-width:min(120px,36vw);overflow:hidden}
.chat-topbar .ct-title{overflow:hidden;text-overflow:ellipsis;min-width:0}
.chat-topbar .ct-actions{flex:0 0 auto;min-width:0}
.chat-topbar .ct-btn[data-byui-hidden],.chat-composer .cc-btn[data-byui-hidden]{display:none!important}
.chat-topbar .ct-btn.byui-more{opacity:.9}

/* ───────── menús (desplegable en escritorio · hoja inferior en el teléfono) ───────── */
.byui-back{position:fixed;inset:0;z-index:12040;background:transparent}
.byui-back.byui-dim{background:rgba(5,12,30,.38)}
.byui-menu{position:fixed;z-index:12050;min-width:270px;max-width:min(92vw,380px);max-height:min(70vh,560px);overflow:auto;background:var(--panel,#fff);color:var(--ink,#0c0d0d);border-radius:16px;box-shadow:0 18px 50px rgba(10,20,50,.28);padding:6px;display:flex;flex-direction:column;gap:1px;animation:byuiIn .14s ease-out;overscroll-behavior:contain}
@keyframes byuiIn{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}
.byui-menu .byui-mh{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5a6170);padding:8px 10px 4px}
.byui-mi{display:flex;align-items:center;gap:11px;padding:9px 10px;border:0;background:transparent;border-radius:11px;text-align:left;font:inherit;color:var(--ink,#0c0d0d);cursor:pointer;width:100%;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.byui-mi:hover,.byui-mi:focus-visible{background:var(--soft,rgba(12,54,173,.06));outline:none}
.byui-mi:active{background:var(--soft-2,rgba(12,54,173,.11))}
.byui-mi .byui-ic{width:34px;height:34px;border-radius:10px;background:var(--soft,rgba(12,54,173,.06));color:var(--blue,#0c36ad);display:inline-flex;align-items:center;justify-content:center;flex:none}
.byui-mi .byui-ic .bgi,.byui-mi .byui-ic .bfi{width:18px;height:18px;font-size:18px;color:inherit}
.byui-mi .byui-ic .bfi>.bgi{width:18px;height:18px}
.byui-mi .byui-t{display:flex;flex-direction:column;min-width:0;flex:1}
.byui-mi b{font-size:13px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.byui-mi small{font-size:11px;color:var(--muted,#5a6170);line-height:1.3}
.byui-mi .byui-on{flex:none;width:8px;height:8px;border-radius:50%;background:var(--blue,#0c36ad);display:none}
.byui-mi.on .byui-on{display:block}
.byui-mi.on b{color:var(--blue,#0c36ad)}
.byui-mi.byui-danger .byui-ic{color:#dc2626}
.byui-menu.byui-sheet{left:0!important;right:0!important;bottom:0!important;top:auto!important;max-width:none;width:auto;border-radius:20px 20px 0 0;padding:6px 10px max(12px,env(safe-area-inset-bottom));max-height:min(78vh,calc(var(--chat-vh,100dvh) - 44px));animation:byuiUp .2s ease-out}
@keyframes byuiUp{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
.byui-sheet .byui-grab{width:40px;height:4px;border-radius:2px;background:var(--soft-2,rgba(12,54,173,.11));margin:4px auto 8px;flex:none}
.byui-sheet .byui-mi{padding:11px 10px}
.byui-sheet .byui-mi .byui-ic{width:40px;height:40px;border-radius:12px}
.byui-sheet .byui-mi b{font-size:14px}
.byui-sheet .byui-mi small{font-size:12px}

/* ───────── compositor ───────── */
.chat-composer .cc-row .cc-btn.byui-plus{order:0}
.chat-composer .cc-row .cc-btn.byui-plus.byui-main{color:var(--blue,#0c36ad)}

/* ───────── aviso «Conecta un proveedor»: corto en el teléfono, botón Configurar en todas las pantallas ───────── */
#ccNoProvider .byui-notice-short{display:none}
#ccNoProvider .btn.byui-notice-cfg{padding:6px 10px;font-size:12px;white-space:nowrap}

/* ───────── cajón lateral (≤1180 px): cabecera con ✕, sin el «volver al panel» que sacaba del chat ───────── */
.byui-csclose{display:none}
@media (max-width:1180px){
  .chat-side .cs-head{padding:8px 8px 8px 12px;min-height:54px;gap:8px;padding-top:max(8px,env(safe-area-inset-top))}
  .chat-side .cs-head #csBackAdmin{display:none!important}
  .chat-side .cs-head .cs-title{font-size:15px}
  .chat-side .cs-head .byui-csclose{display:inline-flex!important;width:42px;height:42px;border:0!important;border-radius:13px;background:var(--soft,rgba(12,54,173,.06));color:var(--ink,#0c0d0d);align-items:center;justify-content:center;cursor:pointer;margin-left:auto;flex:none;-webkit-tap-highlight-color:transparent}
  .chat-side .cs-head .byui-csclose:hover{background:var(--soft-2,rgba(12,54,173,.11))}
  .chat-side .cs-head .byui-csclose .bgi{width:20px;height:20px}
  .chat-side{touch-action:pan-y} /* el deslizamiento horizontal cierra el cajón (bytgon-ui.js); el vertical sigue siendo scroll */
  .chat-shell.mobile-open .chat-side{box-shadow:0 0 40px rgba(0,0,0,.35)}
  .cs-mobile-toggle{width:40px!important;height:40px!important;border:0!important;border-radius:12px!important;flex:none}
  .cs-mobile-toggle .bfi{font-size:1.6em!important}
  /* la pastilla «Continuar… de tu otro dispositivo» bajo la barra, sin tapar la hamburguesa */
  #csyncContinuePill{top:60px!important}
}

/* ───────── teléfono (≤700 px): una app ───────── */
@media (max-width:700px){
  .chat-topbar{padding:6px 8px 4px!important;gap:6px!important;min-height:48px}
  .chat-topbar .ct-title{font-size:14px}
  .chat-topbar .ct-actions{gap:0}
  .chat-topbar .ct-btn{width:40px!important;height:40px!important}
  .chat-topbar #gridBadgeChat{width:auto!important}
  .chat-shell.collapsed .chat-topbar{padding-left:8px}
  .la-reopen{display:none!important}
  /* compositor: una sola fila [+] [texto] [micro] [enviar] */
  .chat-composer{padding:6px 8px max(8px,env(safe-area-inset-bottom))!important}
  .chat-composer .cc-row{flex-wrap:nowrap!important;align-items:flex-end!important;gap:4px!important;padding:0!important}
  .chat-composer .cc-row .cc-textarea{order:2!important;flex:1 1 auto!important;width:auto!important;min-height:46px;max-height:168px;padding:12px 14px!important;font-size:16px!important;border-radius:16px}
  .chat-composer .cc-row .cc-btn{width:44px!important;height:44px!important;flex:none}
  .chat-composer .cc-row .cc-btn.byui-plus{order:1!important}
  .chat-composer .cc-row #ccMic{order:3!important}
  .chat-composer .cc-row .cc-btn.send{order:4!important;margin-left:0!important}
  .chat-composer .cc-row #ccSearch{margin-left:0!important}
  .chat-composer .cc-attachments{padding:0 0 6px}
  .cc-hint{display:none}
  /* aviso de proveedor compacto */
  #ccNoProvider{padding:8px 10px!important;gap:8px!important;align-items:center!important;flex-wrap:nowrap!important}
  #ccNoProvider>span:first-child{display:none!important}
  #ccNoProvider .byui-notice-long{display:none!important}
  #ccNoProvider .byui-notice-short{display:block;flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.3}
  #ccNoProvider .btn{padding:6px 9px!important;font-size:12px!important}
  /* mensajes y sugerencias */
  .chat-stream{padding:14px 0}
  .chat-stream-inner{padding:0 12px;gap:16px}
  .msg-bubble{max-width:94%;font-size:14.5px}
  .chat-empty{padding:18px 14px}
  .chat-empty h3{font-size:19px}
  .chat-suggestions{grid-template-columns:1fr}
  /* toast arriba, centrado, legible con el teclado abierto (el panel usa #__toast con estilos en línea; .toast es el antiguo) */
  .toast,#__toast{bottom:auto!important;top:max(10px,env(safe-area-inset-top))!important;left:10px!important;right:10px!important;transform:none!important;max-width:none!important;text-align:center;border-radius:14px!important;font-size:13px!important;line-height:1.35}
  /* Nexus: hoja a pantalla completa con pestañas deslizables */
  .nx-overlay{padding:0!important}
  .nx-modal{width:100%!important;height:var(--chat-vh,100dvh)!important;border-radius:0!important;max-height:none!important}
  .nx-head{flex-wrap:wrap!important;padding:10px 12px!important;gap:8px!important}
  .nx-head h3{font-size:15px!important}
  .nx-tabs{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;margin-left:0!important;width:100%;padding:2px 0 4px;order:3}
  .nx-tabs::-webkit-scrollbar{display:none}
  .nx-tab{flex:none;white-space:nowrap;padding:7px 12px!important;font-size:12.5px!important}
  .nx-close{margin-left:auto}
  .nx-body{padding:12px!important}
  /* modal genérico y de redes: a pantalla casi completa */
  .modal{padding:10px!important}
  .modal-card{max-height:calc(var(--chat-vh,100dvh) - 20px)!important}
  /* panel de contexto como hoja (si el escritorio lo adopta, manda la hoja a pantalla completa del motor) */
  #ctxPanel.ctx-panel:not(.adk-float){bottom:0!important;left:0!important;right:0!important;width:100%!important;max-height:min(88vh,calc(var(--chat-vh,100dvh) - 48px))!important;border-radius:16px 16px 0 0!important}
  body.adk-on .adk-float.adk-sheet{max-height:none!important;min-height:0!important}
  /* el dragón del cajón, más compacto en el teléfono */
  .chat-side .dragon-stage{max-width:230px;margin:0 auto}
  /* selector de proveedor / modelo: hoja inferior */
  .bp-pop.bp-sheet{top:auto!important;max-height:min(80vh,calc(var(--chat-vh,100dvh) - 48px))!important;padding-bottom:env(safe-area-inset-bottom)}
  .bp-row{padding:9px 8px}
  /* fichas de redes: cuatro en fila con hueco */
  .social3d-parent{gap:8px}
}
/* el fondo del selector en el teléfono (lo crea bytgon-picker.js v200) */
.bp-back{position:fixed;inset:0;z-index:11990;background:rgba(5,12,30,.38)}
/* pie del selector: regla propia (la del v190 llevaba un paréntesis sin cerrar y arrastraba a las siguientes) */
.bp-foot{display:flex;align-items:center;gap:8px;padding:8px;border-top:1px solid var(--border,transparent);font-size:11px;flex-wrap:wrap;background:var(--panel,#fff)}
.bp-foot-i{opacity:.72;flex:1;min-width:120px;font-size:11px}
.bp-foot-a{display:flex;gap:6px;flex:1;min-width:200px}

/* ───────── textos largos plegados (ⓘ más) ───────── */
details.byui-help{margin:4px 0 0;font-size:11px;color:var(--muted,#5a6170);line-height:1.4}
details.byui-help>summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:5px;color:var(--muted,#5a6170);user-select:none;-webkit-tap-highlight-color:transparent;padding:2px 0}
details.byui-help>summary::-webkit-details-marker{display:none}
details.byui-help>summary .byui-hic{display:inline-flex;flex:none;color:var(--blue,#0c36ad);margin-top:1px}
details.byui-help>summary .byui-hic .bgi{width:13px;height:13px}
details.byui-help>summary .byui-hs{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.byui-help[open]>summary .byui-hs{white-space:normal}
details.byui-help>summary .byui-hmore{flex:none;color:var(--blue,#0c36ad);font-weight:600}
details.byui-help[open]>summary .byui-hmore{display:none}
details.byui-help>.byui-hb{padding:4px 0 0 18px}
details.byui-help>.byui-hb>*{margin-top:0!important}

/* la pastilla flotante «Actividad» sobra cuando el botón de la barra está a la vista (bytgon-ui.js marca body.byui-la-top) */
body.byui-la-top .la-reopen{display:none!important}

/* ───────── coherencia: objetivos táctiles y foco visible ───────── */
@media (hover:none){
  .chat-topbar .ct-btn,.chat-composer .cc-row .cc-btn{min-width:42px;min-height:42px}
  .cs-sec>h4.cs-h{min-height:44px}
  .cs-sec>h4.cs-h .btn,.cs-sec>h4.cs-h button:not(.adk-mini){height:32px;min-width:32px}
}
.chat-topbar .ct-btn:focus-visible,.chat-composer .cc-btn:focus-visible,.byui-csclose:focus-visible{outline:2px solid var(--ring,rgba(12,54,173,.18));outline-offset:2px}