/* V24.11 TARGETED FIX
   Scope ONLY:
   1) Mobile Admin Center -> Chat Bot / AI Bot panes can scroll through all settings.
   2) Existing chat loading placeholder gets a clearer loading animation.
   No Firebase, message, bot, member, or send logic is changed here.
*/

/* ---------- Mobile Admin Center: Bot settings ---------- */
@media (max-width: 767px){
  #adminModal #botPane,
  #adminModal #aiBotPane{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    padding-right:2px !important;
    scrollbar-width:thin;
  }

  #adminModal #botPane > #chatBotAdminRoot,
  #adminModal #aiBotPane > #aiBotRoot{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    padding-bottom:18px !important;
  }

  #adminModal #botPane .chatbot-admin-grid,
  #adminModal #aiBotPane .chatbot-admin-grid{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  #adminModal #botPane .panel-section-box,
  #adminModal #aiBotPane .panel-section-box{
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Keep long editor controls inside the phone width. */
  #adminModal #botPane input,
  #adminModal #botPane textarea,
  #adminModal #botPane select,
  #adminModal #aiBotPane input,
  #adminModal #aiBotPane textarea,
  #adminModal #aiBotPane select{
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  #adminModal #botPane .chatbot-editor-actions,
  #adminModal #aiBotPane .chatbot-editor-actions{
    flex-wrap:wrap !important;
  }

  #adminModal #botPane .chatbot-editor-actions > *,
  #adminModal #aiBotPane .chatbot-editor-actions > *{
    min-width:0 !important;
  }

  /* A little extra bottom room so the last Save/Delete controls are reachable. */
  #adminModal #botPane::after,
  #adminModal #aiBotPane::after{
    content:"";
    display:block;
    height:12px;
    flex:0 0 12px;
  }
}

/* ---------- Chat message loading: visual only ---------- */
.chat-loading-state{
  position:relative !important;
  flex-direction:column !important;
  gap:9px !important;
  font-size:13px !important;
}

.chat-loading-state::before{
  content:"";
  width:28px;
  height:28px;
  border:3px solid color-mix(in srgb, var(--text-sub) 20%, transparent);
  border-top-color:var(--primary, #f59e0b);
  border-radius:50%;
  animation:ccMessageSpin .72s linear infinite;
  flex:0 0 auto;
}

.chat-loading-state::after{
  content:"";
  width:34px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,
    transparent 0 18%,
    color-mix(in srgb, var(--primary, #f59e0b) 70%, transparent) 18% 38%,
    transparent 38% 58%,
    color-mix(in srgb, var(--primary, #f59e0b) 70%, transparent) 58% 78%,
    transparent 78%);
  animation:ccMessagePulse 1.05s ease-in-out infinite;
}

@keyframes ccMessageSpin{to{transform:rotate(360deg)}}
@keyframes ccMessagePulse{0%,100%{opacity:.35;transform:scaleX(.82)}50%{opacity:1;transform:scaleX(1)}}

@media (prefers-reduced-motion: reduce){
  .chat-loading-state::before,
  .chat-loading-state::after{animation:none !important;}
}