/* mobile-fixes-v2.css — Roger 2026-05-26
   Fix Firefox mobile (Gecko): hamburger sumindo, inputs estourando viewport, layout overlap */

@media (max-width: 900px) {
  /* HAMBURGER: garantir visível com prioridade máxima */
  .sb-hamburger, #sb-hamburger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 24px !important;
    background: rgba(124,92,255,.15) !important;
    border: 1px solid rgba(124,92,255,.4) !important;
    border-radius: 6px !important;
    color: #cbb8ff !important;
    cursor: pointer !important;
    z-index: 51 !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }
  .sb-hamburger:active { background: rgba(124,92,255,.3) !important; }

  /* Header em mobile: hamburger SEMPRE à esquerda + sem deixar conteúdo esmagar */
  .header, header.header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 56px !important;
  }
  .header h1 {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 14px !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .header h1 .desc { display: none !important; }
  .header .head-actions { flex-shrink: 0 !important; gap: 6px !important; }
  .header .credit { display: none !important; }
  .header .user { width: 36px !important; height: 36px !important; font-size: 13px !important; }

  /* INPUTS/TEXTAREAS/BUTTONS: nunca estourar viewport */
  input:not([type=range]):not([type=checkbox]):not([type=radio]),
  textarea,
  select,
  button {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Containers que tem inputs grandes — garantir sem overflow */
  .panel-center, main, .host, .stream, form, .form, .panel {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  /* Mas permite scroll vertical */
  .panel-center, main, .host, .stream { overflow-y: auto !important; }

  /* ROWS de botões inline: wrap mobile em vez de scroll horizontal */
  .row, .toolbar, .actions, .bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    max-width: 100% !important;
  }

  /* CARDS prompt-sugeridos no chat (que estavam no header) */
  .ch-prompt, .ch-sug, .ch-suggest {
    max-width: calc(100vw - 24px) !important;
    margin: 0 12px !important;
  }

  /* Forçar sidebar para z-index correto vs backdrop */
  .sidebar { z-index: 100 !important; }
  .sb-backdrop { z-index: 99 !important; }
  .sidebar .sb-item { min-height: 44px !important; padding: 10px 14px !important; }
}

/* Garantia universal: nada ultrapassa 100vw em mobile */
@media (max-width: 600px) {
  html, body { max-width: 100vw !important; overflow-x: hidden !important; }
  * { max-width: 100vw; }
  pre, code { overflow-x: auto; max-width: 100% !important; }

  /* Header mais compacto em ultra-small */
  .header { padding: 6px 10px !important; min-height: 52px !important; }
  .header h1 { font-size: 13px !important; }
  .header h1 .ico { font-size: 16px !important; margin-right: 4px !important; }
}

/* iOS: previne zoom em focus (>= 16px font) — exclui range */
@media (max-width: 900px) {
  input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
  textarea,
  select,
  [contenteditable=true] {
    font-size: max(16px, 1em) !important;
  }
}

/* Touch targets >= 44px (Apple HIG) em pointer:coarse */
@media (pointer: coarse) {
  button:not(.icon-only),
  a.btn, .btn,
  [role=button]:not(.tab) {
    min-height: 40px;
    padding: 8px 14px;
  }
  button.icon-only, .icon-btn {
    min-width: 44px; min-height: 44px;
  }
}

/* Tabelas: scroll horizontal próprio */
@media (max-width: 900px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  td, th { white-space: nowrap; }
}

/* Modais: full-screen mobile */
@media (max-width: 900px) {
  .dlg .box, .modal .box, .dialog, .dialog .box {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 88vh !important;
    margin: 4vh auto !important;
    box-sizing: border-box !important;
  }
}

/* Safe area iOS notch */
@media (max-width: 900px) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .header { padding-top: calc(8px + env(safe-area-inset-top)) !important; }
}

/* === Fix Roger Firefox mobile audit 2026-05-26 === */
@media (max-width: 900px) {
  /* Provider chip cobre hamburger no mobile - esconde */
  #salix-provider-chip {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    display: none !important;
  }

  /* Action bars com botões que estouram viewport — wrap */
  .ai-actions, .ai-head, .actions-row, .btn-row,
  .toolbar, .au-toolbar, .oc-toolbar, .dc-tabs, .fp-tabs,
  .vz-tabs, [class*="-tabs"], [class*="-actions"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .ai-actions > *, .ai-head > *,
  .toolbar > *, .actions-row > * {
    flex-shrink: 0 !important;
  }

  /* Tabs horizontais: deixa scroll horizontal natural */
  .dc-tab, .fp-tab, .vz-tab, .oc-tab, [data-tab] {
    flex-shrink: 0 !important;
  }
}

/* salix-ai.com — mobile-fix.css — v2026-05-27
 * Roger 2026-05-27: confirmou aplicar fix mobile responsivo
 * Override agressivo pra forçar layout 1-coluna em viewports ≤ 780px
 * Cobre tanto HTMLs standalone (/studio/*.html) quanto Angular SaaS (/app/*).
 * NÃO MEXE em endpoints, chains, auth ou JS — puramente CSS.
 */

@media (max-width: 780px) {
  /* 0. Prevent horizontal overflow root */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* 1. Studio shell grid: força coluna única */
  .studio,
  .ts,
  .app-shell,
  .layout-grid,
  .editor-grid,
  .studio-grid,
  .main-grid,
  .canvas-grid,
  .editor-shell,
  [class*="studio-layout"],
  [class*="editor-layout"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "head" "main" !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* 2. Sidebar fixa → drawer overlay off-screen */
  .studio > .sidebar,
  .sidebar:not(.sidebar-app):not(.sidebar-mobile-ok),
  .ts-left,
  .layout-sidebar,
  .editor-sidebar,
  aside.sidebar,
  .panel-left,
  .left-pane,
  .col-left {
    position: fixed !important;
    left: 0 !important; top: 0 !important; bottom: 0 !important;
    width: 280px !important; max-width: 80vw !important;
    z-index: 1000 !important;
    transform: translateX(-100%) !important;
    transition: transform .25s ease !important;
    box-shadow: 8px 0 28px rgba(0,0,0,.55) !important;
    overflow-y: auto !important;
  }
  .sidebar.open,
  .sidebar.is-open,
  .ts-left.open,
  .left-pane.open {
    transform: translateX(0) !important;
  }

  /* 3. Right side panels: hide on mobile */
  .panel-right,
  .right-pane,
  .col-right,
  .editor-right,
  .ts-right.optional {
    display: none !important;
  }

  /* 4. Main / canvas area: full width */
  .main,
  .ts-canvas,
  .canvas,
  .editor-canvas,
  .studio-main,
  .layout-main,
  .panel-center,
  [class*="canvas-area"],
  [class*="content-area"] {
    grid-area: main !important;
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* 5. Show hamburger */
  .sb-hamburger,
  .menu-toggle,
  .sidebar-toggle,
  [data-action="toggle-sidebar"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important; height: 40px !important;
    background: transparent !important; border: 0 !important;
    color: var(--fg, #fff) !important; font-size: 22px !important;
    cursor: pointer !important;
  }

  /* 6. Hide floating bot widgets that block content on mobile */
  .sx-floater, .floater-bot, .salix-assistant-floater,
  [data-role="floater"], [data-widget="bot-floater"],
  #sx-floater, #salix-bot-floater,
  .copilot-floater, .ai-floater,
  .bot-fab, .floating-bot {
    display: none !important;
  }

  /* 7. Force text wrap on common containers (prevent horiz scroll) */
  pre, code, table {
    max-width: 100% !important;
    overflow-x: auto !important;
    word-break: break-word !important;
  }

  /* 8. Header: shrink padding and title */
  .header, .ts-top, .editor-header {
    padding: 8px 10px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .header h1, .ts-title, .editor-title {
    font-size: 15px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  /* 9. Composer / chat toolbar: wrap actions */
  .chat-toolbar, .composer-toolbar, .chat-actions,
  .editor-toolbar, .composer-bottom {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .chat-input, .composer-input {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 10. Backdrop overlay when sidebar open */
  .sb-backdrop,
  .sidebar-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.55) !important;
    z-index: 999 !important;
    display: none !important;
  }
  .sb-backdrop.open,
  .sidebar-backdrop.is-open {
    display: block !important;
  }
}

/* Extra: very small phones (<= 480px) */
@media (max-width: 480px) {
  .header h1, .ts-title, .editor-title { font-size: 14px !important; }
  .sb-hamburger { font-size: 20px !important; }
  /* Bottom navigation more compact */
  .bottom-nav, .nav-bottom {
    padding: 4px 6px !important;
  }
}

/* Roger 2026-05-30: orchestrator mobile fix - mygrid roubava 135px do canvas em mobile */
@media (max-width:900px){
  body.ssi-loaded .oc-mygrid, .oc-mygrid{display:none !important}
  body.ssi-loaded .oc-pane[data-pane=builder] .oc-body{flex:1 !important;min-height:300px !important}
  body.ssi-loaded .bld-canvas .empty-state{position:relative !important;top:auto !important;left:auto !important;transform:none !important;margin:20px auto !important;max-height:none !important}
  body.ssi-loaded .bld-canvas{padding-bottom:120px !important}
}


/* Roger 2026-05-30: orchestrator - remover banner stats topo + Meus workflows em TODAS resoluções */
.oc-mygrid, #orch-role-banner{display:none !important}