/* ==========================================================
   Portal Monagas — Cambios 21
   Bot PC: interfaz limpia por categorías, sin saturación visual.
   Android mantiene su modo app a pantalla completa.
   ========================================================== */

/* En móvil las pestañas de PC no existen visualmente. */
#chatAssistant .chat-desktop-tabs{display:none}

@media (min-width:721px){
  #chatAssistant{
    --bot-pc-panel-width:420px;
    --bot-pc-panel-max-height:calc(100dvh - 24px);
  }

  #chatAssistant .chat-window{
    width:min(var(--bot-pc-panel-width),calc(100vw - 24px))!important;
    height:auto!important;
    min-height:0!important;
    max-height:var(--bot-pc-panel-max-height)!important;
    flex-direction:column!important;
    border-radius:22px!important;
    overflow:hidden!important;
    isolation:isolate;
    background:linear-gradient(180deg,#0b1b29 0%,#08253a 100%)!important;
    border:1px solid rgba(156,226,255,.17)!important;
    box-shadow:0 24px 68px rgba(2,23,37,.34),0 0 24px rgba(41,190,255,.08)!important;
    transform:none!important;
  }
  #chatAssistant.open .chat-window,
  #chatAssistant .chat-window.open{display:flex!important}

  #chatAssistant .chat-head{
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr) 34px!important;
    align-items:center!important;
    gap:10px!important;
    padding:11px 12px!important;
    cursor:default!important;
    touch-action:auto!important;
    user-select:text!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
  }
  #chatAssistant .chat-head img{width:34px!important;height:42px!important;object-fit:contain!important}
  #chatAssistant .chat-head>div{min-width:0!important}
  #chatAssistant .chat-head strong{
    display:block!important;
    font-size:13px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #chatAssistant .chat-head span{
    display:block!important;
    font-size:9.5px!important;
    line-height:1.25!important;
    opacity:.8!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #chatAssistant .chat-close{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:11px!important;
  }

  /* Respuesta breve y contenida. */
  #chatAssistant .chat-body{
    flex:0 0 auto!important;
    min-height:72px!important;
    max-height:142px!important;
    overflow-y:auto!important;
    padding:10px 12px 8px!important;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  #chatAssistant .bubble{
    max-width:94%!important;
    font-size:12px!important;
    line-height:1.38!important;
    padding:9px 11px!important;
    overflow-wrap:anywhere!important;
  }
  #chatAssistant .bubble-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
    margin-top:7px!important;
  }
  #chatAssistant .bubble-link{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:34px!important;
    padding:6px 8px!important;
    border-radius:10px!important;
    font-size:10.5px!important;
    text-align:center!important;
    white-space:normal!important;
  }
  #chatAssistant .chat-help-text{
    flex:0 0 auto!important;
    margin:0!important;
    padding:7px 12px!important;
    font-size:10px!important;
    line-height:1.3!important;
    color:rgba(255,255,255,.66)!important;
    background:rgba(0,0,0,.12)!important;
    border-top:1px solid rgba(255,255,255,.05)!important;
    border-bottom:1px solid rgba(255,255,255,.05)!important;
  }

  /* Navegación principal del bot: 4 categorías, una sola vista activa. */
  #chatAssistant .chat-desktop-tabs{
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
    padding:8px 9px!important;
    background:rgba(0,0,0,.13)!important;
    border-bottom:1px solid rgba(255,255,255,.06)!important;
  }
  #chatAssistant .chat-desktop-tab{
    min-width:0!important;
    min-height:48px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    padding:6px 4px!important;
    border:1px solid transparent!important;
    border-radius:11px!important;
    background:transparent!important;
    color:rgba(225,246,255,.72)!important;
    font:inherit!important;
    font-size:9.5px!important;
    font-weight:700!important;
    line-height:1.1!important;
    cursor:pointer!important;
    transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease!important;
  }
  #chatAssistant .chat-desktop-tab i{font-size:13px!important;line-height:1!important}
  #chatAssistant .chat-desktop-tab span{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #chatAssistant .chat-desktop-tab:hover,
  #chatAssistant .chat-desktop-tab:focus-visible{
    color:#fff!important;
    background:rgba(82,194,239,.08)!important;
    border-color:rgba(123,218,255,.12)!important;
    transform:none!important;
  }
  #chatAssistant .chat-desktop-tab.is-active{
    color:#fff!important;
    background:linear-gradient(180deg,rgba(34,152,208,.24),rgba(38,161,207,.10))!important;
    border-color:rgba(126,221,255,.28)!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 0 12px rgba(39,176,232,.08)!important;
  }

  /* Solo una categoría visible. Esto elimina la saturación del menú. */
  #chatAssistant .chat-action-groups{
    flex:0 1 auto!important;
    min-height:0!important;
    max-height:235px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    display:block!important;
    padding:9px 10px 11px!important;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    background:rgba(0,0,0,.05)!important;
  }
  #chatAssistant .chat-action-group{
    display:none!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  #chatAssistant .chat-action-group.is-pc-active{display:block!important}
  #chatAssistant .chat-group-title{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    margin:0 0 8px!important;
    padding:0 2px!important;
    color:#c8efff!important;
    font-size:10.5px!important;
    line-height:1.2!important;
    font-weight:800!important;
  }
  #chatAssistant .chat-group-title i{width:15px!important;flex:0 0 15px!important;text-align:center!important}
  #chatAssistant .chat-suggestions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
  }
  #chatAssistant .chat-suggestion{
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    padding:8px 9px!important;
    border:1px solid rgba(156,226,255,.10)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.045)!important;
    color:#fff!important;
    font-size:10.5px!important;
    line-height:1.22!important;
    text-align:left!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    box-shadow:none!important;
    transform:none!important;
  }
  #chatAssistant .chat-suggestion:hover,
  #chatAssistant .chat-suggestion:focus-visible{
    background:rgba(74,189,235,.10)!important;
    border-color:rgba(116,215,255,.22)!important;
    transform:none!important;
    box-shadow:0 0 0 1px rgba(75,188,235,.04)!important;
  }
  #chatAssistant .chat-suggestion i{
    width:17px!important;
    flex:0 0 17px!important;
    text-align:center!important;
    font-size:12px!important;
    color:#9ee5ff!important;
  }

  #chatAssistant.bot-dragging .chat-window{
    pointer-events:none!important;
    opacity:.88!important;
    transition:opacity .12s ease!important;
  }
  #chatAssistant.open .chat-nudge{display:none!important}
}

@media (min-width:721px) and (max-height:620px){
  #chatAssistant .chat-body{max-height:105px!important}
  #chatAssistant .chat-action-groups{max-height:190px!important}
  #chatAssistant .chat-window{max-height:calc(100dvh - 16px)!important}
}

@media (min-width:721px) and (max-width:900px){
  #chatAssistant{--bot-pc-panel-width:390px}
  #chatAssistant .chat-desktop-tab{font-size:9px!important}
  #chatAssistant .chat-suggestion{font-size:10px!important}
}

@media (prefers-reduced-motion:reduce){
  #chatAssistant .chat-desktop-tab,
  #chatAssistant .chat-suggestion{transition:none!important}
}