/* ============================================================================
   RESPONSIVE LAYOUT - GALACTIC CYBERPUNK EDITION
   ============================================================================
   
   ALL NUMERIC VALUES FOLLOW THE 3-6-9 DIGITAL ROOT SYSTEM
   - 3: 3, 12, 21, 30, 39, 48, 57, 66, 75, 84, 93...
   - 6: 6, 15, 24, 33, 42, 51, 60, 69, 78, 87, 96...
   - 9: 9, 18, 27, 36, 45, 54, 63, 72, 81, 90, 99...
   
   Layout Stack (Mobile/Tablet):
   1. Header (cyberpunk glass header)
   2. Elements Bar (glowing pill buttons)
   3. Canvas (main workspace)
   4. Context Bar (animated tabs)
   5. AI Chat (floating glass panel)
   ============================================================================ */

/* ============================================================================
   RESPONSIVE CUSTOM PROPERTIES (3-6-9 System)
   ============================================================================ */

:root {
  /* ========================================================================
     STANDARDIZED BREAKPOINTS (3-6-9 System)
     ======================================================================== */
  --breakpoint-xsmall: 479px;   /* 4+7+9=20→2+0=2, closest to 3-6-9: use 479 */
  --breakpoint-small: 767px;    /* 7+6+7=20→2+0=2, closest: use 767 (tablet/mobile) */
  --breakpoint-medium: 1023px;  /* 1+0+2+3=6 ✓ (tablet/desktop boundary) */
  --breakpoint-large: 1400px;   /* 1+4+0+0=5, closest to 6: use 1400 */
  
  /* Breakpoint helpers for media queries (use in @media) */
  --bp-xsmall-max: 479px;
  --bp-small-max: 767px;
  --bp-medium-max: 1023px;
  --bp-large-min: 1401px;  /* Large desktop starts at 1401px */
  --bp-medium-min: 1024px; /* Desktop starts at 1024px */
  
  /* Mobile dimensions (all follow 3-6-9 digital root) */
  --mobile-header-height: 54px;   /* 5+4=9 ✓ */
  --mobile-elements-height: 63px; /* 6+3=9 ✓ */
  --mobile-context-collapsed: 45px; /* 4+5=9 ✓ */
  --mobile-context-expanded: 180px; /* 1+8+0=9 ✓ */
  --mobile-ai-collapsed: 63px;    /* 6+3=9 ✓ */
  --mobile-ai-expanded: 270px;    /* 2+7+0=9 ✓ */
  
  /* Tablet dimensions */
  --tablet-header-height: 63px;   /* 6+3=9 ✓ */
  --tablet-elements-height: 72px; /* 7+2=9 ✓ */
  
  /* Touch targets (follow 3-6-9 system) */
  --touch-target: 36px; /* 3+6=9 ✓ - Standard touch target */
  --touch-target-lg: 45px; /* 4+5=9 ✓ - Larger touch target */
  --touch-target-min: 44px; /* iOS/Android recommended minimum (not 3-6-9, but standard) */
}

/* ============================================================================
   DESKTOP (>1023px) - Ensure mobile classes don't affect desktop layout
   ============================================================================ */

@media screen and (width >= 1024px) {
  /* Hide all mobile-only elements on desktop - AGGRESSIVE */
  .mobile-only,
  header.mobile-header,
  div.mobile-elements-bar,
  div.mobile-ai-chat,
  div#mobileAIChat,
  .mobile-header,
  .mobile-elements-bar,
  .mobile-ai-chat,
  #mobileAIChat,
  .ai-mobile-expand-handle,
  main.layout > header.mobile-header,
  main.layout > div.mobile-elements-bar,
  main.layout > div.mobile-ai-chat {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    pointer-events: none !important;
  }
  
  /* Reset AI chat to desktop behavior even if mobile classes exist */
  section.agents-chat,
  section.agents-chat.collapsed,
  section.agents-chat.expanded {
    /* Let index.css handle desktop positioning and width (var(--agents-chat-width)) */
    position: absolute;
    height: auto;
    min-height: auto;
    max-height: min(600px, 75vh);
    margin: 0 !important;
    border-radius: var(--space-12) !important;
  }
  
  .ai-chat-container {
    border-radius: var(--space-12) !important;
    border: 1px solid rgb(0 153 255 / 18%) !important;
  }
  
  /* Ensure desktop elements are visible */
  .desktop-only,
  .top-toolbar,
  #elementsFloatingPanel,
  .elements-toolbar,
  #contextFloatingPanel,
  .context-floating-panel,
  .canvas-unified-toolbar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ============================================================================
   FALLBACK: HIDE MOBILE ELEMENTS (for browsers that don't support media queries)
   ============================================================================ */

.mobile-only,
header.mobile-header,
div.mobile-elements-bar,
div.mobile-ai-chat {
  display: none !important;
}

/* ============================================================================
   RESPONSIVE BREAKPOINT: TABLET & MOBILE (<1024px)
   ============================================================================ */

@media screen and (width <= 1023px) {
  /* --------------------------------------------------------------------------
     HIDE DESKTOP ELEMENTS
     -------------------------------------------------------------------------- */
  
  .desktop-only,
  .top-toolbar,
  #elementsFloatingPanel,
  .elements-toolbar,
  #contextFloatingPanel,
  .context-floating-panel,
  .canvas-unified-toolbar,
  aside.sidebar,
  aside.context-sidebar,
  .panel-header,
  .file-browser-sidebar,
  section.agents-chat.desktop-only {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  
  /* --------------------------------------------------------------------------
     SHOW MOBILE ELEMENTS
     -------------------------------------------------------------------------- */
  
  .mobile-only,
  header.mobile-header,
  div.mobile-elements-bar,
  div.mobile-ai-chat {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* --------------------------------------------------------------------------
     MAIN LAYOUT - VERTICAL STACK
     -------------------------------------------------------------------------- */
  
  main.layout {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh;
    height: 100dvh;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    overflow: hidden;
    background: var(--space-deep);
  }
  
  /* --------------------------------------------------------------------------
     MOBILE HEADER - CYBERPUNK GLASS
     -------------------------------------------------------------------------- */
  
  header.mobile-header {
    display: flex !important;
    align-items: center;
    height: var(--mobile-header-height);
    min-height: var(--mobile-header-height);
    padding: 0 var(--space-12);
    background: var(--gradient-space-vertical);
    border-bottom: 1px solid rgb(0 153 255 / 27%);
    box-shadow: 
      0 3px 18px var(--blue-opacity-15),
      0 6px 36px rgb(0 0 0 / 45%),
      inset 0 -1px 0 rgb(0 255 153 / 9%),
      inset 0 1px 0 rgb(255 255 255 / 3%);
    z-index: var(--z-header);
    flex-shrink: 0;
    position: relative;
  }
  
  /* Header scanline effect */
  header.mobile-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgb(0 153 255 / 1.5%) 2px,
      rgb(0 153 255 / 1.5%) 3px
    );
    pointer-events: none;
  }
  
  /* Space between menu button and widget name */
  header.mobile-header .mobile-widget-name {
    margin-left: var(--space-9);
  }
  
  /* Push action buttons to the right */
  header.mobile-header .mobile-action-btn:first-of-type {
    margin-left: auto;
  }
  
  /* Group action buttons with smaller gap */
  header.mobile-header .mobile-action-btn:not(:first-of-type) {
    margin-left: var(--space-6);
  }
  
  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target);
    height: var(--touch-target);
    background: rgb(0 153 255 / 9%);
    border: 1px solid rgb(0 153 255 / 27%);
    border-radius: var(--space-9);
    color: var(--text-secondary);
    font-size: var(--font-18);
    cursor: pointer;
    transition: all var(--timing-fast) cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
      0 0 9px var(--blue-opacity-10),
      inset 0 1px 0 rgb(255 255 255 / 3%);
    position: relative;
    z-index: var(--z-base);
    flex-shrink: 0;
  }
  
  .mobile-menu-btn:active {
    background: rgb(0 153 255 / 18%);
    border-color: var(--cyan-bright);
    color: var(--cyan-bright);
    box-shadow: 
      0 0 18px rgb(51 204 255 / 36%),
      inset 0 0 9px rgb(51 204 255 / 18%);
    transform: scale(0.96);
  }
  
  .mobile-widget-name {
    font-size: var(--font-12);
    font-weight: 600;
    letter-spacing: 0.03em;
    background: rgb(0 255 153 / 6%);
    border: 1px solid rgb(0 255 153 / 27%);
    border-radius: var(--space-6);
    outline: none;
    color: var(--green-ghost);
    text-shadow: 0 0 9px rgb(0 255 153 / 36%);
    width: 126px;
    max-width: 150px;
    padding: var(--space-6) var(--space-9);
    font-family: inherit;
    transition: all var(--timing-fast) ease;
    height: var(--space-27);
    position: relative;
    z-index: var(--z-base);
    flex-shrink: 0;
  }
  
  .mobile-widget-name::placeholder {
    color: rgb(0 255 153 / 45%);
    text-shadow: none;
  }
  
  .mobile-widget-name:focus {
    border-color: rgb(0 255 153 / 54%);
    background: rgb(0 255 153 / 12%);
    box-shadow: 0 0 12px rgb(0 255 153 / 18%);
    width: 150px;
  }
  
  .mobile-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target);
    height: var(--touch-target);
    background: rgb(0 153 255 / 6%);
    border: 1px solid rgb(0 153 255 / 18%);
    border-radius: var(--space-9);
    color: var(--text-muted);
    font-size: var(--font-18);
    cursor: pointer;
    transition: all var(--timing-fast) cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
      0 0 6px rgb(0 153 255 / 6%),
      inset 0 1px 0 rgb(255 255 255 / 3%);
    position: relative;
    z-index: var(--z-base);
    overflow: hidden;
    flex-shrink: 0;
  }
  
  .mobile-action-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at center,
      rgb(0 153 255 / 27%) 0%,
      transparent 70%
    );
    opacity: 0;
    transition: opacity var(--timing-fast) ease;
  }
  
  .mobile-action-btn:active {
    background: rgb(0 153 255 / 18%);
    border-color: var(--blue-electric);
    color: var(--cyan-bright);
    box-shadow: 
      0 0 18px rgb(0 153 255 / 36%),
      inset 0 0 9px rgb(0 153 255 / 18%);
    transform: scale(0.96);
  }
  
  .mobile-action-btn:active::before {
    opacity: 1;
  }
  
  .mobile-action-btn.primary {
    background: linear-gradient(
      135deg,
      var(--green-opacity-15) 0%,
      var(--blue-opacity-15) 100%
    );
    border-color: rgb(0 255 153 / 36%);
    color: var(--green-ghost);
    box-shadow: 
      0 0 12px rgb(0 255 153 / 18%),
      inset 0 1px 0 rgb(0 255 153 / 9%);
  }
  
  .mobile-action-btn.primary:active {
    background: linear-gradient(
      135deg,
      rgb(0 255 153 / 27%) 0%,
      rgb(0 153 255 / 27%) 100%
    );
    border-color: var(--green-ghost);
    box-shadow: 
      0 0 27px rgb(0 255 153 / 45%),
      inset 0 0 12px rgb(0 255 153 / 27%);
  }
  
  /* --------------------------------------------------------------------------
     MOBILE ELEMENTS BAR - CATEGORY-BASED WITH SUBMENU
     -------------------------------------------------------------------------- */
  
  div.mobile-elements-bar {
    display: flex !important;
    flex-direction: column;
    min-height: var(--mobile-elements-height);
    background: var(--gradient-elements-bar);
    border-bottom: 1px solid var(--green-opacity-15);
    box-shadow: 
      0 3px 12px rgb(0 0 0 / 36%),
      inset 0 1px 0 rgb(0 255 153 / 6%);
    flex-shrink: 0;
    z-index: var(--z-notification);
    position: relative;
    overflow: visible;
  }
  
  /* Category Buttons Container */
  .mobile-categories {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: var(--mobile-elements-height);
    min-height: var(--mobile-elements-height);
    padding: 0 var(--space-6);
    gap: var(--space-3);
  }
  
  /* Individual Category Button */
  .mobile-category-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 72px;
    height: var(--touch-target-lg);
    padding: var(--space-6) var(--space-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--space-9);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--timing-fast) ease;
    position: relative;
  }
  
  .mobile-category-btn:active {
    transform: scale(0.95);
  }
  
  .mobile-category-btn.active {
    background: linear-gradient(
      135deg,
      rgb(0 255 153 / 12%) 0%,
      var(--blue-opacity-12) 100%
    );
    border-color: rgb(0 255 153 / 36%);
    color: var(--green-ghost);
  }
  
  .mobile-category-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgb(0 255 153 / 54%);
  }
  
  .mobile-category-btn i {
    font-size: var(--font-18);
    margin-bottom: var(--space-3);
    transition: text-shadow var(--timing-fast) ease;
  }
  
  .mobile-category-btn.active i {
    text-shadow: 0 0 12px currentcolor;
  }
  
  .mobile-category-btn span {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  
  /* Submenu Container */
  .mobile-elements-submenu {
    display: none;
    flex-direction: column;
    background: linear-gradient(
      180deg,
      rgb(6 12 18 / 99%) 0%,
      var(--space-opacity-99) 100%
    );
    border-top: 1px solid rgb(0 255 153 / 27%);
    box-shadow: 
      0 9px 36px rgb(0 0 0 / 54%),
      inset 0 1px 0 rgb(0 255 153 / 18%);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--timing-normal) ease;
  }
  
  .mobile-elements-submenu.open {
    display: flex;
    max-height: 180px; /* 1+8+0=9 ✓ - more compact without header */
    overflow-y: auto;
  }
  
  /* Submenu Content Grid */
  .mobile-submenu-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-9);
    padding: var(--space-12);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
  }
  
  /* When submenu has subgroup toggle, use flexbox layout */
  .mobile-submenu-content:has(.mobile-subgroup-toggle) {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  
  /* Submenu Element Item */
  .mobile-submenu-element {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-9) var(--space-6);
    background: linear-gradient(
      135deg,
      rgb(0 255 153 / 6%) 0%,
      rgb(0 153 255 / 6%) 100%
    );
    border: 1px solid rgb(0 255 153 / 18%);
    border-radius: var(--space-9);
    color: var(--text-muted);
    cursor: grab;
    transition: all var(--timing-fast) ease;
    min-height: var(--touch-target-lg);
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
  }
  
  .mobile-submenu-element:active {
    background: linear-gradient(
      135deg,
      rgb(0 255 153 / 18%) 0%,
      rgb(0 153 255 / 18%) 100%
    );
    border-color: var(--green-ghost);
    color: var(--green-ghost);
    transform: scale(0.96);
    box-shadow: 
      0 0 18px rgb(0 255 153 / 27%),
      inset 0 0 9px rgb(0 255 153 / 9%);
  }
  
  .mobile-submenu-element.dragging {
    opacity: 0.6;
    transform: scale(1.05);
    box-shadow: 
      0 0 27px rgb(0 255 153 / 45%),
      0 6px 24px rgb(0 0 0 / 45%);
  }
  
  .mobile-submenu-element i {
    font-size: var(--font-18);
    margin-bottom: var(--space-3);
    text-shadow: 0 0 6px currentcolor;
  }
  
  .mobile-submenu-element span {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    white-space: nowrap;
  }
  
  /* Template trigger special style */
  .mobile-submenu-element.template-trigger {
    background: linear-gradient(
      135deg,
      rgb(153 0 255 / 9%) 0%,
      rgb(0 153 255 / 9%) 100%
    );
    border-color: rgb(153 0 255 / 27%);
    cursor: pointer;
  }
  
  .mobile-submenu-element.template-trigger:active {
    background: linear-gradient(
      135deg,
      rgb(153 0 255 / 18%) 0%,
      rgb(0 153 255 / 18%) 100%
    );
    border-color: rgb(153 0 255 / 54%);
    color: #90f;
  }
  
  /* Mobile Subgroup Toggle */
  .mobile-subgroup-toggle {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-9) var(--space-12);
    background: rgb(0 0 0 / 40%);
    border-bottom: 1px solid rgb(0 255 153 / 15%);
    flex-shrink: 0;
  }
  
  .mobile-subgroup-btn {
    flex: 1;
    padding: var(--space-6) var(--space-9);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid rgb(0 255 153 / 20%);
    border-radius: var(--space-6);
    cursor: pointer;
    transition: all var(--timing-fast) ease;
    min-height: var(--touch-target);
  }
  
  .mobile-subgroup-btn:active {
    transform: scale(0.96);
  }
  
  .mobile-subgroup-btn.active {
    color: var(--green-ghost);
    background: rgb(0 255 153 / 15%);
    border-color: var(--green-ghost);
    box-shadow: 0 0 12px rgb(0 255 153 / 30%);
  }
  
  /* Wrapper for submenu elements when toggle is present */
  .mobile-submenu-elements {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-9);
    padding: var(--space-12);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
  }
  
  /* Legacy elements - hide if any remain */
  .mobile-elements-scroll,
  .mobile-element-item,
  .mobile-elements-add {
    display: none !important;
  }
  
  /* --------------------------------------------------------------------------
     CANVAS - MOBILE
     -------------------------------------------------------------------------- */
  
  section.canvas {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    overflow: hidden !important;
    position: relative;
  }
  
  .canvas-body {
    background: 
      radial-gradient(circle at 30% 30%, var(--blue-opacity-03) 0%, transparent 50%),
      radial-gradient(circle at 70% 70%, rgb(0 255 153 / 3%) 0%, transparent 50%),
      var(--space-deep);
  }
  
  /* --------------------------------------------------------------------------
     MOBILE AI CHAT - UNIFIED COMPONENT (Tabs + Chat + Context)
     --------------------------------------------------------------------------
     Single component containing:
     - Navigation tabs (Chat, Settings, Data, Flow, Triggers, Code)
     - Chat panel (default view with AI input)
     - Context panel (shows element properties when context tab selected)
     -------------------------------------------------------------------------- */
  
  div.mobile-ai-chat {
    display: flex !important;
    flex-direction: column;
    margin: 0 !important; /* Edge-to-edge - no margins */
    width: 100% !important; /* Full width */
    box-sizing: border-box !important;
    border-radius: 0; /* No rounded corners - flush to edges */
    border: none;
    border-top: 1px solid rgb(0 153 255 / 27%);
    background: linear-gradient(
      180deg,
      var(--space-dark-opacity-99) 0%,
      var(--space-opacity-99) 100%
    );
    box-shadow: 
      0 -6px 27px rgb(0 0 0 / 45%),
      inset 0 0 27px var(--blue-opacity-03);
    flex-shrink: 0;
    z-index: var(--z-tooltip);
    overflow: hidden;
    transition: height var(--timing-fast) cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }
  
  /* Top glow accent - centered line */
  div.mobile-ai-chat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 36%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgb(51 204 255 / 72%) 50%,
      transparent 100%
    );
    box-shadow: 0 0 18px rgb(51 204 255 / 54%);
    z-index: var(--z-base);
  }
  
  /* Mobile AI Chat - Collapsed State */
  div.mobile-ai-chat.collapsed {
    height: 153px; /* 1+5+3=9 ✓ - tabs + header + input */
  }
  
  /* Mobile AI Chat - Expanded State */
  div.mobile-ai-chat.expanded {
    height: 324px; /* 3+2+4=9 ✓ */
    max-height: 54vh;
  }
  
  /* --------------------------------------------------------------------------
     MOBILE AI TABS - Navigation Header
     -------------------------------------------------------------------------- */
  
  .mobile-ai-tabs {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: var(--space-45);
    min-height: var(--space-45);
    padding: 0;
    background: var(--blue-opacity-03);
    border-bottom: 1px solid var(--blue-opacity-12);
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
  }
  
  .mobile-ai-tabs::-webkit-scrollbar {
    display: none;
  }
  
  .mobile-ai-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-3);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-muted);
    font-size: var(--font-9);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--timing-fast) ease;
    position: relative;
  }
  
  .mobile-ai-tab:active,
  .mobile-ai-tab.active {
    color: var(--cyan-bright);
    background: rgb(0 153 255 / 9%);
    border-bottom-color: var(--cyan-bright);
    box-shadow: 
      inset 0 -3px 9px var(--blue-opacity-12),
      0 2px 9px rgb(51 204 255 / 18%);
  }
  
  .mobile-ai-tab i {
    font-size: var(--font-12);
    text-shadow: 0 0 6px currentcolor;
    transition: all var(--timing-fast) ease;
  }
  
  .mobile-ai-tab.active i {
    text-shadow: 0 0 15px currentcolor;
    filter: drop-shadow(0 0 6px currentcolor);
  }
  
  /* Hide tab labels on mobile - show only icons */
  .mobile-ai-tab span {
    display: none;
  }
  
  /* --------------------------------------------------------------------------
     MOBILE AI PANELS - Content Areas
     -------------------------------------------------------------------------- */
  
  .mobile-ai-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  
  .mobile-ai-panel.hidden {
    display: none !important;
  }
  
  /* --------------------------------------------------------------------------
     CHAT PANEL - AI Chat Interface
     -------------------------------------------------------------------------- */
  
  .mobile-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-9) var(--space-12);
    background: transparent;
    border-bottom: 1px solid rgb(0 153 255 / 9%);
    flex-shrink: 0;
  }
  
  .mobile-ai-agent-select {
    flex: 1;
    max-width: 162px; /* 1+6+2=9 ✓ */
  }
  
  .mobile-ai-select {
    width: 100%;
    padding: var(--space-6) var(--space-9);
    background: rgb(0 153 255 / 9%);
    border: 1px solid rgb(0 153 255 / 27%);
    border-radius: var(--space-6);
    color: var(--text-primary);
    font-size: var(--font-9);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2333ccff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-9) center;
    padding-right: var(--space-27);
  }
  
  .mobile-ai-select:focus {
    outline: none;
    border-color: var(--cyan-bright);
    box-shadow: 0 0 12px rgb(51 204 255 / 27%);
  }
  
  .mobile-ai-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-36);
    height: var(--space-36);
    background: rgb(0 153 255 / 9%);
    border: 1px solid rgb(0 153 255 / 18%);
    border-radius: var(--space-6);
    color: var(--cyan-bright);
    font-size: var(--font-15);
    cursor: pointer;
    transition: all var(--timing-fast) ease;
  }
  
  .mobile-ai-expand-btn:active {
    background: rgb(0 153 255 / 18%);
    transform: scale(0.96);
  }
  
  /* Rotate icon when expanded */
  div.mobile-ai-chat.expanded .mobile-ai-expand-btn i {
    transform: rotate(180deg);
  }
  
  /* Mobile AI Messages Area */
  .mobile-ai-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-12);
    display: none; /* Hidden when collapsed */
  }
  
  div.mobile-ai-chat.expanded .mobile-ai-messages {
    display: block;
  }
  
  .mobile-ai-messages::-webkit-scrollbar {
    width: var(--space-3);
  }
  
  .mobile-ai-messages::-webkit-scrollbar-track {
    background: var(--space-opacity-60);
  }
  
  .mobile-ai-messages::-webkit-scrollbar-thumb {
    background: rgb(0 153 255 / 36%);
    border-radius: var(--space-3);
  }
  
  /* Mobile AI Input Area */
  .mobile-ai-input-area {
    padding: var(--space-9) var(--space-12);
    background: rgb(3 6 9 / 45%);
    border-top: 1px solid var(--blue-opacity-12);
    flex-shrink: 0;
  }
  
  .mobile-ai-input-row {
    display: flex;
    align-items: center;
    gap: var(--space-9);
  }
  
  .mobile-ai-attach-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-36);
    height: var(--space-36);
    background: rgb(0 153 255 / 6%);
    border: 1px solid rgb(0 153 255 / 18%);
    border-radius: var(--space-9);
    color: var(--text-muted);
    font-size: var(--font-15);
    cursor: pointer;
    transition: all var(--timing-fast) ease;
    flex-shrink: 0;
  }
  
  .mobile-ai-attach-btn:active {
    background: rgb(0 153 255 / 18%);
    color: var(--cyan-bright);
  }
  
  .mobile-ai-input {
    flex: 1;
    padding: var(--space-9) var(--space-12);
    background: rgb(0 153 255 / 6%);
    border: 1px solid rgb(0 153 255 / 18%);
    border-radius: var(--space-9);
    color: var(--text-primary);
    font-size: var(--font-12);
    outline: none;
    transition: all var(--timing-fast) ease;
  }
  
  .mobile-ai-input::placeholder {
    color: var(--text-muted);
  }
  
  .mobile-ai-input:focus {
    border-color: var(--cyan-bright);
    box-shadow: 0 0 12px rgb(51 204 255 / 27%);
  }
  
  .mobile-ai-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-36);
    height: var(--space-36);
    background: linear-gradient(
      135deg,
      rgb(0 255 153 / 18%) 0%,
      rgb(0 153 255 / 18%) 100%
    );
    border: 1px solid rgb(0 255 153 / 36%);
    border-radius: var(--space-9);
    color: var(--green-ghost);
    font-size: var(--font-15);
    cursor: pointer;
    transition: all var(--timing-fast) ease;
    flex-shrink: 0;
  }
  
  .mobile-ai-send-btn:active {
    background: linear-gradient(
      135deg,
      rgb(0 255 153 / 36%) 0%,
      rgb(0 153 255 / 36%) 100%
    );
    box-shadow: 0 0 18px rgb(0 255 153 / 45%);
    transform: scale(0.96);
  }
  
  /* --------------------------------------------------------------------------
     CONTEXT PANEL - Element Properties
     -------------------------------------------------------------------------- */
  
  .mobile-ai-context-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-12);
    background: rgb(3 6 9 / 54%);
  }
  
  .mobile-ai-context-content::-webkit-scrollbar {
    width: var(--space-3);
  }
  
  .mobile-ai-context-content::-webkit-scrollbar-track {
    background: var(--space-opacity-60);
  }
  
  .mobile-ai-context-content::-webkit-scrollbar-thumb {
    background: rgb(0 153 255 / 36%);
    border-radius: var(--space-3);
  }
  
  .mobile-ai-context-content::-webkit-scrollbar-thumb:hover {
    background: rgb(0 153 255 / 54%);
  }
  
  /* Context empty state */
  .context-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-muted);
    padding: var(--space-18);
  }
  
  .context-empty-state i {
    font-size: var(--font-27);
    margin-bottom: var(--space-9);
    opacity: 0.45;
    color: var(--cyan-bright);
    text-shadow: 0 0 18px currentcolor;
  }
  
  .context-empty-state p {
    font-size: var(--font-12);
    line-height: 1.5;
  }
  
  /* AI expand handle with glow */
  .ai-mobile-expand-handle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: var(--space-18);
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgb(0 153 255 / 6%) 50%,
      transparent 100%
    );
    cursor: ns-resize;
    touch-action: none;
  }
  
  .ai-mobile-expand-handle::before {
    content: '';
    width: var(--space-36);
    height: var(--space-3);
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--cyan-bright) 50%,
      transparent 100%
    );
    border-radius: var(--space-3);
    box-shadow: 0 0 9px rgb(51 204 255 / 60%);
    transition: all var(--timing-fast) ease;
  }
  
  .ai-mobile-expand-handle:active::before {
    width: var(--space-54);
    box-shadow: 0 0 18px var(--cyan-bright);
  }
  
  /* AI header mobile adjustments */
  .ai-chat-persistent-header {
    padding: var(--space-9) var(--space-12) !important;
    min-height: auto !important;
    background: rgb(3 6 9 / 36%) !important;
    border-bottom: 1px solid var(--blue-opacity-12) !important;
  }
  
  .ai-header-content-row {
    padding: var(--space-3) 0 !important;
    gap: var(--space-9) !important;
  }
  
  .ai-header-resize-handle {
    display: none !important;
  }
  
  .ai-persistent-header-left .agents-select-header {
    min-width: 99px !important;
    max-width: 126px !important;
    font-size: var(--font-9) !important;
    padding: var(--space-6) var(--space-9) !important;
    background: rgb(0 153 255 / 9%) !important;
    border: 1px solid rgb(0 153 255 / 27%) !important;
    border-radius: var(--space-6) !important;
  }
  
  .ai-persistent-header-right {
    display: none !important;
  }
  
  /* AI input area */
  .ai-chat-input-area {
    padding: var(--space-9) var(--space-12) !important;
    background: rgb(3 6 9 / 45%) !important;
    border-top: 1px solid var(--blue-opacity-12) !important;
  }
  
  .ai-input-text-wrapper {
    padding: var(--space-6) var(--space-12) !important;
    background: rgb(0 153 255 / 6%) !important;
    border: 1px solid rgb(0 153 255 / 18%) !important;
    border-radius: var(--space-9) !important;
  }
  
  .ai-input-text-wrapper:focus-within {
    border-color: var(--cyan-bright) !important;
    box-shadow: 0 0 12px rgb(51 204 255 / 27%) !important;
  }
  
  .ai-chat-input {
    font-size: var(--font-12) !important;
    color: var(--text-primary) !important;
  }
  
  .ai-chat-input::placeholder {
    color: var(--text-muted) !important;
  }
  
  .ai-send-button {
    width: var(--touch-target) !important;
    height: var(--touch-target) !important;
    border-radius: var(--space-9) !important;
    background: linear-gradient(
      135deg,
      rgb(0 255 153 / 18%) 0%,
      rgb(0 153 255 / 18%) 100%
    ) !important;
    border: 1px solid rgb(0 255 153 / 36%) !important;
  }
  
  .ai-send-button:active {
    background: linear-gradient(
      135deg,
      rgb(0 255 153 / 36%) 0%,
      rgb(0 153 255 / 36%) 100%
    ) !important;
    box-shadow: 0 0 18px rgb(0 255 153 / 45%) !important;
  }
  
  /* Thread history */
  .ai-thread-history-section {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height var(--timing-fast) ease !important;
  }
  
  .ai-thread-history-section.is-expanded {
    max-height: 135px !important;
  }
  
  /* Chat transcript */
  .ai-chat-transcript-overlay {
    padding: var(--space-12) !important;
    gap: var(--space-9) !important;
  }
  
  .chat-message {
    max-width: 90% !important;
  }
  
  .chat-message-avatar {
    width: var(--space-27) !important;
    height: var(--space-27) !important;
    font-size: var(--font-9) !important;
    border-radius: var(--space-6) !important;
  }
  
  .chat-bubble {
    padding: var(--space-9) var(--space-12) !important;
    font-size: var(--font-12) !important;
    border-radius: var(--space-9) !important;
  }
  
  /* Welcome message */
  .chat-welcome-message {
    padding: var(--space-18) !important;
    text-align: center;
  }
  
  .chat-welcome-message h3 {
    font-size: var(--font-15) !important;
    margin-bottom: var(--space-9) !important;
  }
  
  .chat-suggestions {
    gap: var(--space-6) !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  .chat-suggestion-btn {
    padding: var(--space-6) var(--space-12) !important;
    font-size: var(--font-9) !important;
  }
}

/* ============================================================================
   SMALL MOBILE (<480px) - COMPACT MODE
   ============================================================================ */

@media screen and (width <= 479px) {
  /* Tighter header */
  header.mobile-header {
    height: var(--mobile-header-height);
    padding: 0 var(--space-9);
  }
  
  .mobile-widget-name {
    font-size: var(--font-12);
    width: 108px;
    padding: var(--space-3) var(--space-6);
    height: var(--space-24);
  }
  
  .mobile-action-btn {
    width: var(--space-30);
    height: var(--space-30);
    font-size: var(--font-15);
    border-radius: var(--space-6);
  }
  
  /* Compact category buttons on small screens */
  .mobile-categories {
    padding: 0 var(--space-3);
    gap: var(--space-1);
  }
  
  .mobile-category-btn {
    padding: var(--space-3) var(--space-1);
    max-width: 54px;
  }
  
  .mobile-category-btn i {
    font-size: var(--font-15);
  }
  
  .mobile-category-btn span {
    font-size: 7px;
  }
  
  /* Smaller submenu grid */
  .mobile-submenu-content {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    padding: var(--space-9);
  }
  
  .mobile-submenu-element {
    padding: var(--space-6) var(--space-3);
    min-height: var(--touch-target);
  }
  
  .mobile-submenu-element i {
    font-size: var(--font-15);
  }
}

/* ============================================================================
   TABLET PORTRAIT (480px - 1023px)
   ============================================================================ */

@media screen and (width >= 480px) and (width <= 1023px) and (orientation: portrait) {
  /* Larger header */
  header.mobile-header {
    height: var(--tablet-header-height);
    padding: 0 var(--space-18);
  }
  
  .mobile-widget-name {
    font-size: var(--font-15);
    width: 162px;
    padding: var(--space-6) var(--space-12);
    height: var(--space-36);
  }
  
  .mobile-action-btn {
    width: var(--touch-target-lg);
    height: var(--touch-target-lg);
  }
  
  /* Larger category buttons on tablet */
  .mobile-categories {
    height: var(--tablet-elements-height);
    min-height: var(--tablet-elements-height);
    padding: 0 var(--space-12);
    gap: var(--space-9);
  }
  
  .mobile-category-btn {
    max-width: 90px;
    height: var(--space-54);
    padding: var(--space-9) var(--space-6);
  }
  
  .mobile-category-btn i {
    font-size: var(--font-21);
  }
  
  .mobile-category-btn span {
    font-size: var(--font-9);
  }
  
  /* Larger submenu on tablet */
  .mobile-elements-submenu.open {
    max-height: 270px; /* 2+7+0=9 ✓ */
  }
  
  .mobile-submenu-content {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-12);
    padding: var(--space-15);
  }
  
  .mobile-submenu-element {
    padding: var(--space-12) var(--space-9);
  }
  
  .mobile-submenu-element i {
    font-size: var(--font-21);
  }
  
  .mobile-submenu-element span {
    font-size: var(--font-9);
  }
  
  /* Mobile AI Chat - edge-to-edge */
  div.mobile-ai-chat {
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
  }
  
  div.mobile-ai-chat.collapsed {
    height: 153px; /* 1+5+3=9 ✓ */
  }
  
  div.mobile-ai-chat.expanded {
    height: 297px; /* 2+9+7=18→1+8=9 ✓ */
  }
  
  .mobile-context-tab {
    padding: var(--space-12) var(--space-9);
    font-size: var(--font-9);
  }
  
  /* Show tab labels on tablet */
  .mobile-context-tab span {
    display: inline !important;
  }
}

/* ============================================================================
   TABLET LANDSCAPE (768px - 1023px)
   ============================================================================ */

@media screen and (width >= 768px) and (width <= 1023px) and (orientation: landscape) {
  /* Header with more actions visible */
  header.mobile-header {
    height: var(--tablet-header-height);
    padding: 0 var(--space-24);
  }
  
  /* Horizontal category buttons in landscape */
  .mobile-category-btn {
    flex-direction: row;
    max-width: 108px;
    gap: var(--space-6);
  }
  
  .mobile-category-btn i {
    margin-bottom: 0;
  }
  
  .mobile-category-btn span {
    font-size: var(--font-9);
  }
  
  /* Wide submenu grid in landscape */
  .mobile-submenu-content {
    grid-template-columns: repeat(6, 1fr);
  }
  
  /* Mobile AI Chat - edge-to-edge */
  div.mobile-ai-chat {
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
  }
  
  div.mobile-ai-chat.collapsed {
    height: 153px; /* 1+5+3=9 ✓ */
  }
  
  div.mobile-ai-chat.expanded {
    height: 324px; /* 3+2+4=9 ✓ */
  }
  
  .mobile-ai-context-tabs {
    padding: var(--space-6) var(--space-18);
  }
  
  /* Show tab labels on tablet landscape */
  .mobile-context-tab span {
    display: inline !important;
  }
}

/* ============================================================================
   MOBILE LANDSCAPE
   ============================================================================ */

@media screen and (width <= 896px) and (orientation: landscape) {
  /* Compact header */
  header.mobile-header {
    height: var(--touch-target-lg);
    min-height: var(--touch-target-lg);
  }
  
  .mobile-widget-name {
    font-size: var(--font-12);
    width: 108px;
    padding: var(--space-3) var(--space-6);
    height: var(--space-24);
  }
  
  /* Hide elements bar in landscape - use floating button */
  div.mobile-elements-bar {
    display: none !important;
  }
  
  /* Mobile AI Chat - edge-to-edge in landscape */
  div.mobile-ai-chat {
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
  }
  
  div.mobile-ai-chat.collapsed {
    height: 108px; /* 1+0+8=9 ✓ - compact in landscape */
  }
  
  div.mobile-ai-chat.expanded {
    height: 180px; /* 1+8+0=9 ✓ */
    max-height: 36vh;
  }
  
  .mobile-context-tab {
    padding: var(--space-6) var(--space-9);
  }
  
  .mobile-context-tab span {
    display: none !important;
  }
  
  .mobile-ai-header {
    padding: var(--space-6) var(--space-9) !important;
  }
  
  .mobile-ai-input-area {
    padding: var(--space-6) var(--space-9) !important;
  }
}

/* ============================================================================
   SAFE AREA INSETS (Notched Devices)
   ============================================================================ */

@supports (padding: max(0px)) {
  @media screen and (width <= 1023px) {
    header.mobile-header {
      padding-top: max(0px, env(safe-area-inset-top));
      height: calc(var(--mobile-header-height) + max(0px, env(safe-area-inset-top)));
    }
    
    div.mobile-elements-bar {
      padding-left: max(var(--space-9), env(safe-area-inset-left));
      padding-right: max(var(--space-9), env(safe-area-inset-right));
    }
    
    div.mobile-ai-chat {
      padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
    
    .mobile-ai-input-area {
      padding-bottom: calc(var(--space-9) + max(0px, env(safe-area-inset-bottom))) !important;
    }
  }
}

/* ============================================================================
   TOUCH OPTIMIZATIONS
   ============================================================================ */

@media screen and (width <= 1023px) {
  /* Larger touch targets */
  button,
  .btn,
  [role="button"],
  a {
    min-height: var(--space-36);
  }
  
  /* Prevent text selection on interactive elements */
  .mobile-category-btn,
  .mobile-submenu-element,
  .mobile-context-tab,
  .mobile-action-btn,
  .mobile-menu-btn {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
  }
  
  /* Smooth scrolling */
  .mobile-submenu-content,
  .mobile-context-tabs,
  .mobile-context-content,
  .ai-chat-transcript-overlay {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
  }
  
  /* Disable hover effects on touch devices */
  @media (hover: none) and (pointer: coarse) {
    .mobile-category-btn:hover,
    .mobile-submenu-element:hover,
    .mobile-context-tab:hover,
    .mobile-action-btn:hover {
      background: inherit;
      transform: none;
      box-shadow: inherit;
    }
  }
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS - GPU Acceleration
   ============================================================================ */

@media screen and (width <= 1023px) {
  /* GPU acceleration for animated mobile elements */
  header.mobile-header,
  /* PHASE 7: MIGRATED TO UTILITY CLASSES
   * 
   * GPU acceleration rules have been removed - apply .gpu-accelerate class when creating elements:
   * 
   * - div.mobile-elements-bar → Add .gpu-accelerate class in HTML or JavaScript
   * - div.mobile-ai-chat → Add .gpu-accelerate class in HTML or JavaScript
   * - .mobile-category-btn → Add .gpu-accelerate class in JavaScript when creating buttons
   * - .mobile-submenu-element → Add .gpu-accelerate class in JavaScript when creating elements
   * - .mobile-elements-submenu → Add .gpu-accelerate class in HTML or JavaScript
   * - .mobile-context-tab → Add .gpu-accelerate class in JavaScript when creating tabs
   * 
   * Conditional will-change rules below are preserved and work with .gpu-accelerate utility.
   */
  
  /* Apply will-change only when interacting */
  .mobile-category-btn:hover,
  .mobile-category-btn:active,
  .mobile-submenu-element:hover,
  .mobile-submenu-element:active,
  .mobile-context-tab:hover,
  .mobile-context-tab:active {
    will-change: transform;
  }
  
  /* Reduce paint complexity on very small screens */
  @media (width <= 479px) {
    header.mobile-header::before,
    div.mobile-ai-chat::before {
      display: none;
    }
  }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  div.mobile-ai-chat,
  .mobile-category-btn,
  .mobile-submenu-element,
  .mobile-elements-submenu,
  .mobile-context-tab,
  .mobile-action-btn {
    transition: none !important;
  }
  
  .mobile-action-btn::before {
    display: none;
  }
}

/* ============================================================================
   DARK MODE CONSISTENCY - Unified Component Colors
   ============================================================================ */

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS - Backdrop Filter & Backgrounds
   ============================================================================ */

@media screen and (width <= 1023px) {
  /* Disable expensive backdrop filters on mobile/tablet for better performance */
  aside.sidebar,
  section.canvas,
  section.agents-chat {
    backdrop-filter: none !important;
    background: var(--space-opacity-95);
  }
  
  .canvas-body {
    backdrop-filter: none;
  }
  
  /* Ensure solid backgrounds for mobile components */
  header.mobile-header {
    background: linear-gradient(
      180deg,
      #0c1218 0%,
      #030609 100%
    );
  }
  
  div.mobile-elements-bar {
    background: linear-gradient(
      180deg,
      #030609 0%,
      #0c1218 100%
    );
  }
  
  /* Unified mobile AI chat gradient flow */
  div.mobile-ai-chat {
    background: linear-gradient(
      180deg,
      #0c1218 0%,
      #030609 100%
    );
  }
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes mobileElementPulse {
  0%, 100% {
    box-shadow: 
      0 0 9px rgb(0 255 153 / 18%),
      inset 0 0 6px rgb(0 255 153 / 6%);
  }

  50% {
    box-shadow: 
      0 0 18px rgb(0 255 153 / 36%),
      inset 0 0 9px rgb(0 255 153 / 12%);
  }
}

@keyframes mobileGlowLine {
  0%, 100% {
    opacity: 0.45;
    width: 36%;
  }

  50% {
    opacity: 0.72;
    width: 54%;
  }
}

@media screen and (width <= 1023px) {
  .mobile-element-item.selected {
    animation: mobileElementPulse 2.7s ease-in-out infinite;
  }
  
  div.mobile-elements-bar::after {
    animation: mobileGlowLine 3.6s ease-in-out infinite;
  }
}

/* ============================================================================
   MOBILE AI CHAT BREAKPOINT OVERRIDES
   ============================================================================ */

/* Small mobile - compact unified mobile AI chat */
@media screen and (width <= 479px) {
  /* Edge-to-edge on small screens */
  div.mobile-ai-chat {
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
  }
  
  div.mobile-ai-chat.collapsed {
    height: 135px; /* 1+3+5=9 ✓ - tabs + header + input */
  }
  
  div.mobile-ai-chat.expanded {
    height: 270px; /* 2+7+0=9 ✓ */
    max-height: 45vh;
  }
  
  .mobile-ai-tabs {
    height: var(--space-36);
    min-height: var(--space-36);
  }
  
  .mobile-ai-tab {
    padding: var(--space-9) var(--space-3);
  }
  
  .mobile-ai-header {
    padding: var(--space-6) var(--space-9);
  }
  
  .mobile-ai-input-area {
    padding: var(--space-6) var(--space-9);
  }
  
  .mobile-ai-input {
    padding: var(--space-6) var(--space-9);
    font-size: var(--font-9);
  }
}