/**
 * File:          public/css/style_mobile_v2.css
 * Version:       0.1.1
 * Last Modified: 2026-05-30 01:30 AM
 * Description:   Mobile UX v2 fixes overflowing collapsed sidebar, adds Filters
 *                slide-down menu, collapses chip row, repairs header overlap.
 *                Loaded AFTER style_v1.css so it overrides cleanly.
 */

@media (max-width: 768px) {

  /* Collapsed sidebar must not bleed contents into main area */
  #sidebar.collapsed {
    transform: translateX(-100%) !important;
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  #sidebar:not(.collapsed) {
    visibility: visible;
    overflow: hidden auto;
    width: min(86vw, 320px) !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.5);
  }

  #sidebar-backdrop {
    position: fixed; inset: 0; z-index: 150;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
  }
  #sidebar-backdrop.visible {
    opacity: 1; pointer-events: auto;
  }

  /* HEADER tidy one row */
  #header {
    height: 48px; min-height: 48px; padding: 4px 8px;
    gap: 6px; flex-wrap: nowrap; overflow: hidden;
    position: relative; z-index: 60;
  }
  #header-title {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #header-title #header-session-name { font-size: 12px; }
  .header-status { display: none !important; }
  #help-guide-btn { display: none !important; }
  .mode-toggle { display: none !important; }
  #toggle-canvas-btn {
    padding: 6px 8px; font-size: 11px; min-height: 36px;
    flex-shrink: 0;
  }
  #toggle-sidebar-btn {
    width: 40px; height: 40px; min-width: 40px; min-height: 40px;
    padding: 0; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Filters menu trigger lives in header */
  #mobile-filters-btn {
    display: inline-flex !important;
    align-items: center; gap: 4px;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 18px;
    padding: 6px 10px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    min-height: 36px;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #mobile-filters-btn .filters-active-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-weight: 600;
    color: #c4b5fd;
  }
  #mobile-filters-btn .filters-active-chip img {
    width: 14px; height: 14px;
  }

  /* DISCUSSION MODE BAR collapses to a single summary row */
  #discussion-mode-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: rgba(99, 102, 241, 0.06);
    min-height: 36px;
    position: relative; z-index: 55;
  }
  #discussion-mode-bar > * { display: none !important; }
  #discussion-mode-bar .mobile-bar-summary {
    display: flex !important;
    align-items: center;
    gap: 6px;
    width: 100%;
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
  }
  #discussion-mode-bar .mobile-bar-summary .label {
    font-weight: 600;
    color: var(--accent-hover);
    flex-shrink: 0;
  }
  #discussion-mode-bar .mobile-bar-summary .status {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    opacity: 0.85;
  }
  #discussion-mode-bar:not(.active) { display: none !important; }

  /* FILTERS BOTTOM SHEET */
  #mobile-filters-sheet {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 220;
    background: var(--bg-secondary, #161619);
    border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
    padding: 14px 14px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.25s ease;
  }
  #mobile-filters-sheet.open {
    display: block;
    transform: translateY(0);
  }
  #mobile-filters-sheet .sheet-handle {
    width: 40px; height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 0 auto 14px;
  }
  #mobile-filters-sheet h3 {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--text-primary);
    display: flex; justify-content: space-between; align-items: center;
  }
  #mobile-filters-sheet h3 button {
    background: none; border: none;
    color: var(--text-secondary);
    font-size: 22px; padding: 4px 10px; cursor: pointer;
    font-family: inherit;
  }
  #mobile-filters-sheet .sheet-section {
    margin-bottom: 16px;
  }
  #mobile-filters-sheet .sheet-section-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    margin-bottom: 6px;
    font-weight: 600;
  }
  #mobile-filters-sheet .slot {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  #mobile-filters-sheet #discuss-target-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    overflow: visible !important;
    width: 100%;
  }
  #mobile-filters-sheet #discuss-target-wrap .discuss-target-btn {
    width: 100% !important;
    justify-content: center;
    min-height: 44px;
    font-size: 13px !important;
    padding: 10px 8px !important;
  }
  #mobile-filters-sheet #chat-layout-toggle {
    display: flex !important;
    gap: 6px;
    width: 100%;
    justify-content: stretch;
  }
  #mobile-filters-sheet #chat-layout-toggle button {
    flex: 1 1 0;
    min-height: 44px;
    font-size: 13px;
    border-radius: 10px;
    padding: 10px;
  }
  /* Ensure parent slot doesn't squish layout flex */
  #mobile-filters-sheet #slot-chat-layout { display: block; }
  #mobile-filters-sheet #hide-user-toggle {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
  }
  #mobile-filters-sheet #filter-status {
    display: flex !important;
    align-items: center; gap: 6px;
    font-size: 12px;
    color: var(--text-dim);
    padding: 4px 0;
  }

  /* WELCOME: shrink shield logo */
  #welcome {
    padding: 16px 16px;
    text-align: center;
  }
  #welcome-logo {
    width: 56px !important; height: 56px !important;
    margin: 0 auto 8px;
    display: block;
  }
  #welcome h1 {
    font-size: 20px !important;
    margin: 4px 0 6px;
  }
  #welcome p {
    font-size: 13px !important;
    line-height: 1.5;
    max-width: 320px;
    margin: 0 auto;
  }

  .scroll-bottom-btn {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    left: auto !important; right: 12px !important;
    transform: none !important;
    width: 44px; height: 44px;
  }
  .scroll-bottom-btn:hover { transform: translateY(-1px) !important; }
  body.on-welcome .scroll-bottom-btn { display: none !important; }

  /* INPUT bottom row */
  #input-area {
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
  }
  #input-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 14px;
    flex-wrap: nowrap;
  }
  #modelSelectorBtn {
    max-width: 30vw !important;
    font-size: 12px !important;
    padding: 8px !important;
  }
  #modelSelectorBtn .sel-label {
    max-width: 22vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #sendBtn {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    flex-shrink: 0;
  }

  body.filters-sheet-open { overflow: hidden; }
  body.filters-sheet-open #app { filter: brightness(0.6); transition: filter 0.2s; }
  #mobile-filters-sheet-backdrop {
    display: none;
    position: fixed; inset: 0; z-index: 210;
    background: rgba(0,0,0,0.5);
  }
  #mobile-filters-sheet-backdrop.open { display: block; }
}

/* Tighter rules at ≤400px so the bottom action row never clips */
@media (max-width: 400px) {
  #header { padding: 4px 6px; gap: 4px; }
  #mobile-filters-btn {
    padding: 6px 8px;
    font-size: 11px;
    max-width: 140px;
  }
  #input-row {
    gap: 3px;
    padding: 3px 4px;
  }
  #modelSelectorBtn {
    max-width: 26vw !important;
    font-size: 11px !important;
    padding: 6px 6px !important;
  }
  #modelSelectorBtn .sel-label { max-width: 18vw; }
  #sendBtn {
    padding: 10px 10px !important;
    font-size: 12px !important;
  }
  /* Attach + plus collapse to slimmer at smallest widths */
  .mobile-plus-btn { width: 34px !important; height: 34px !important; }
  #attachBtn { width: 34px !important; height: 34px !important; }
}

@media (min-width: 769px) {
  #mobile-filters-btn { display: none !important; }
  #mobile-filters-sheet, #mobile-filters-sheet-backdrop { display: none !important; }
}

/* === END OF FILE (FILENAME: /var/www/vhosts/pokepapi.com/council/public/css/style_mobile_v2.css) === */