/* =========================================================
   S.P.O.T. — MENU MOBILE DE PRODUÇÃO
   Desktop permanece inalterado.
   Mobile: usuário abre dropdown com conta, ferramentas, módulos e saída.
   ========================================================= */

.spot-mobile-user-chevron,
.spot-mobile-menu-backdrop,
.spot-mobile-user-menu,
.spot-mobile-header-tools{
  display:none;
}

@media (max-width:768px){
  /* Remove o menu lateral / barra inferior no mobile */
  .side-nav{
    display:none !important;
  }

  .main-wrapper{
    padding-bottom:0 !important;
  }

  /* Cabeçalho em duas linhas */
  .header{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    gap:12px !important;
    padding:14px 12px 10px !important;
  }

  .header-actions{
    grid-row:1 !important;
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    margin-left:0 !important;
  }

  /* Usuário no canto esquerdo */
  .user-profile-wrapper{
    position:relative !important;
    z-index:12020 !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    padding:0 !important;
    margin:0 auto 0 0 !important;
    border:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-direction:row !important;
  }

  .user-profile{
    min-width:0 !important;
    width:auto !important;
    max-width:210px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    cursor:pointer !important;
  }

  #current-user-avatar{
    width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;
    border-radius:9px !important;
  }

  .user-info{
    min-width:0 !important;
    align-items:flex-start !important;
    gap:0 !important;
  }

  .user-name{
    max-width:125px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:13px !important;
    line-height:1.15 !important;
  }

  .user-role{
    max-width:125px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    margin-top:2px !important;
    font-size:9px !important;
    line-height:1.1 !important;
    letter-spacing:.04em !important;
  }

  .spot-mobile-user-chevron{
    width:24px;
    height:24px;
    flex:0 0 24px;
    display:grid;
    place-items:center;
    border-radius:8px;
    color:#636a73;
    transition:transform .18s ease, background .18s ease;
  }

  .spot-mobile-user-chevron svg{
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .user-profile.is-mobile-menu-open .spot-mobile-user-chevron{
    transform:rotate(180deg);
    background:rgba(17,18,20,.055);
  }

  /* Todas as ferramentas ficam no dropdown do usuário. */
  .spot-mobile-header-tools { display:none !important; }
  .spot-mobile-menu-actions { margin-bottom:14px; }
  .spot-mobile-menu-action {
    width:100%; min-height:46px; padding:10px 9px;
    display:flex; align-items:center; gap:12px;
    border:0; border-radius:11px; background:transparent;
    color:#181a1d; font:inherit; font-size:12px; font-weight:600;
    text-align:left; cursor:pointer;
  }
  .spot-mobile-menu-action svg {
    width:19px; height:19px; flex:0 0 19px;
    fill:none; stroke:currentColor; stroke-width:1.65;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .spot-mobile-menu-action:hover,
  .spot-mobile-menu-action:focus-visible { background:#EEF0F1; }
  .spot-mobile-menu-action:focus-visible { outline:2px solid #747980; outline-offset:-2px; }

  /* Exit textual deixa de ocupar o topo */
  .exit-demo-btn{
    display:none !important;
  }

  /* Barra S.P.O.T. fica na segunda linha */
  .ai-command-container:not(.spot-mode-bubble){
    grid-row:2 !important;
    position:relative !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:min(380px, calc(100vw - 24px)) !important;
    max-width:380px !important;
    justify-self:start !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* IA vira bolinha circular quando módulo estiver aberto */
  body .ai-command-container.spot-mode-bubble:not(.bubble-open){
    position:fixed !important;
    top:auto !important;
    left:auto !important;
    right:16px !important;
    bottom:18px !important;
    transform:none !important;
    width:54px !important;
    min-width:54px !important;
    max-width:54px !important;
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:#171717 !important;
    color:#fff !important;
    box-shadow:0 14px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    z-index:12150 !important;
    cursor:pointer !important;
  }

  body .ai-command-container.spot-mode-bubble:not(.bubble-open) .search-bar{
    width:54px !important;
    min-width:54px !important;
    max-width:54px !important;
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:transparent !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  body .ai-command-container.spot-mode-bubble:not(.bubble-open) .search-bar input{
    display:none !important;
  }

  body .ai-command-container.spot-mode-bubble:not(.bubble-open) .search-bar svg{
    width:21px !important;
    height:21px !important;
    color:#fff !important;
    stroke:#fff !important;
    margin:0 !important;
  }

  body .ai-command-container.spot-mode-bubble:not(.bubble-open) .ai-response-box{
    display:none !important;
  }

  body .ai-command-container.spot-mode-bubble.bubble-open{
    position:fixed !important;
    top:auto !important;
    left:auto !important;
    right:12px !important;
    bottom:12px !important;
    width:calc(100vw - 24px) !important;
    min-width:0 !important;
    max-width:420px !important;
    height:auto !important;
    max-height:70dvh !important;
    padding:10px !important;
    margin:0 !important;
    border:1px solid rgba(17,18,20,.10) !important;
    border-radius:18px !important;
    background:#fff !important;
    color:#171717 !important;
    box-shadow:0 24px 65px rgba(0,0,0,.28) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    z-index:12150 !important;
  }

  body .ai-command-container.spot-mode-bubble.bubble-open .search-bar{
    width:100% !important;
    height:46px !important;
    padding:0 13px !important;
    border:1px solid #d8dbe0 !important;
    border-radius:13px !important;
    background:#f7f7f8 !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:9px !important;
  }

  body .ai-command-container.spot-mode-bubble.bubble-open .search-bar input{
    display:block !important;
    width:100% !important;
    color:#171717 !important;
  }

  body .ai-command-container.spot-mode-bubble.bubble-open .search-bar svg{
    width:18px !important;
    height:18px !important;
    color:#3d4249 !important;
    stroke:currentColor !important;
  }

  body .ai-command-container.spot-mode-bubble.bubble-open .ai-response-box{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    width:100% !important;
    max-height:45dvh !important;
    margin-top:8px !important;
    overflow:auto !important;
  }

  /* Fundo do dropdown */
  .spot-mobile-menu-backdrop{
    position:fixed;
    inset:0;
    z-index:11990;
    display:block;
    background:rgba(18,19,21,.15);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .16s ease, visibility .16s ease;
  }

  .spot-mobile-menu-backdrop.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  /* Dropdown compacto, preso ao usuário */
  .spot-mobile-user-menu{
    position:fixed;
    z-index:12010;
    display:flex;
    flex-direction:column;
    width:min(310px, calc(100vw - 16px));
    max-height:min(68dvh, 560px);
    background:rgba(249,249,250,.985);
    border:1px solid rgba(17,18,20,.09);
    border-radius:17px;
    box-shadow:0 20px 55px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.92);
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-6px) scale(.985);
    transform-origin:top left;
    transition:opacity .16s ease, transform .18s ease, visibility .16s ease;
  }

  .spot-mobile-user-menu.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }

  .spot-mobile-menu-scroll{
    flex:1;
    min-height:0;
    overflow:auto;
    padding:10px;
    scrollbar-width:none;
  }

  .spot-mobile-menu-scroll::-webkit-scrollbar{
    display:none;
  }

  .spot-mobile-menu-title{
    margin:4px 7px 9px;
    font-size:9px;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:#9a9fa7;
  }

  .spot-mobile-menu-group{
    margin-bottom:8px;
  }

  .spot-mobile-menu-group:last-child{
    margin-bottom:0;
  }

  .spot-mobile-menu-group-name{
    margin:5px 7px 6px;
    min-height:24px;
    font-size:10px;
    font-weight:800;
    color:#565c65;
    display:flex;
    align-items:center;
    gap:7px;
  }

  .spot-mobile-group-icon{
    width:22px;
    height:22px;
    flex:0 0 22px;
    border-radius:7px;
    display:grid;
    place-items:center;
    background:#eef0f2;
    color:#59616b;
  }

  .spot-mobile-group-icon svg{
    width:12px;
    height:12px;
    fill:currentColor !important;
    stroke:none !important;
  }

  .spot-mobile-module-list{
    display:flex;
    flex-direction:column;
    gap:4px;
  }

  .spot-mobile-module{
    width:100%;
    min-height:48px;
    padding:7px 8px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:#181a1d;
    display:flex;
    align-items:center;
    gap:9px;
    text-align:left;
    cursor:pointer;
    transition:background .14s ease, transform .14s ease;
  }

  .spot-mobile-module:active{
    transform:scale(.985);
    background:#eef0f2;
  }

  .spot-mobile-module-icon{
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:#eef0f2;
    color:#59616b;
  }

  .spot-mobile-module-icon svg{
    width:17px;
    height:17px;
    fill:currentColor !important;
    stroke:none !important;
  }

  .spot-mobile-module-icon .spot-catalog-icon{
    width:17px;
    height:17px;
    fill:currentColor !important;
    stroke:none !important;
  }

  .spot-mobile-module-copy{
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:2px;
  }

  .spot-mobile-module-copy strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
    line-height:1.25;
    font-weight:800;
  }

  .spot-mobile-module-copy span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8px;
    color:#979ca4;
  }

  .spot-mobile-module-arrow{
    width:24px;
    height:24px;
    flex:0 0 24px;
    display:grid;
    place-items:center;
    color:#9aa0a8;
  }

  .spot-mobile-module-arrow svg{
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .spot-mobile-empty{
    padding:22px 12px;
    text-align:center;
    color:#8a8f97;
    font-size:10px;
    line-height:1.5;
  }

  .spot-mobile-menu-exit-wrap{
    padding:7px 10px 10px;
    border-top:0;
    background:transparent;
  }

  .spot-mobile-menu-exit{
    width:100%;
    min-height:38px;
    padding:0 10px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#b23b34;
    display:flex;
    align-items:center;
    gap:8px;
    font:inherit;
    font-size:10px;
    font-weight:800;
    cursor:pointer;
  }

  .spot-mobile-menu-exit svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .floating-window{
    z-index:12050 !important;
  }
}

@media (max-width:390px){
  .spot-mobile-header-tools{
    gap:11px;
  }

  .spot-mobile-header-tool{
    width:28px;
    height:28px;
  }

  .user-name,
  .user-role{
    max-width:96px !important;
  }

  body .ai-command-container.spot-mode-bubble:not(.bubble-open),
  body .ai-command-container.spot-mode-bubble:not(.bubble-open) .search-bar{
    width:50px !important;
    min-width:50px !important;
    max-width:50px !important;
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;
  }
}


/* =========================================================
   V24 — DROPDOWN CONTÍNUO, SEM LINHA / SEM FAIXA
   ========================================================= */
@media (max-width:768px){
  .spot-mobile-user-menu{
    background:rgba(249,249,250,.985) !important;
  }

  .spot-mobile-menu-scroll{
    background:transparent !important;
    border:0 !important;
    border-bottom:0 !important;
    box-shadow:none !important;
  }

  .spot-mobile-menu-scroll::before,
  .spot-mobile-menu-scroll::after,
  .spot-mobile-menu-exit-wrap::before,
  .spot-mobile-menu-exit-wrap::after{
    content:none !important;
    display:none !important;
  }

  .spot-mobile-menu-exit-wrap{
    margin:0 !important;
    padding:4px 10px 10px !important;
    border:0 !important;
    border-top:0 !important;
    border-bottom:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent !important;
  }

  .spot-mobile-menu-exit{
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent !important;
  }
}

/* Colunas comuns para ferramentas, grupos, módulos e saída. */
@media (max-width:768px) {
  .spot-mobile-user-menu { box-sizing:border-box; }
  .spot-mobile-menu-action,
  .spot-mobile-module,
  .spot-mobile-menu-exit {
    box-sizing:border-box;
    min-height:48px;
    padding:7px 8px;
    gap:9px;
  }
  .spot-mobile-action-icon {
    width:34px; height:34px; flex:0 0 34px;
    display:grid; place-items:center;
    border-radius:10px; background:#eef0f2; color:#59616b;
  }
  .spot-mobile-action-icon svg {
    width:17px; height:17px; flex:none;
    fill:none; stroke:currentColor; stroke-width:1.65;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .spot-mobile-menu-exit .spot-mobile-action-icon {
    background:transparent; color:inherit;
  }
  .spot-mobile-menu-action > span:last-child,
  .spot-mobile-module-copy strong,
  .spot-mobile-menu-exit > span:last-child {
    font-size:11px; line-height:1.35; font-weight:700;
  }
  .spot-mobile-menu-group-name {
    margin:5px 8px 6px; gap:9px;
  }
  .spot-mobile-group-icon { width:34px; flex-basis:34px; background:transparent; }
  .spot-mobile-menu-title { margin-left:8px; margin-right:8px; }
}