/* 
 * Hydrant DTA.css
 * Main stylesheet for the Hydrant Digital Twin Application
 * __V3D_TEMPLATE__ - template-based file; delete this line to prevent this file from being updated 
 */

/* ===== GLOBAL SETTINGS ===== */
/* CSS Variables provide a centralized system for theme configuration.
   These variables control typography, colors, and spacing throughout the entire UI.
   Modifying these values will automatically update all elements that reference them,
   making it easier to maintain visual consistency and implement theming. */
   :root {
    /* ----- Typography ----- */
    --font-family: 'Inter', sans-serif;
    
    /* Font Sizes */
    --font-size-small: 12px;
    --font-size-normal: 14px;
    --font-size-button: 12px;
    --font-size-title: 18px;
    
    /* Font Weights */
    --font-weight-regular: 300;
    --font-weight-medium: 300;
    --font-weight-semibold: 600;
    --font-weight-bold: 600;
    
    /* Line Heights */
    --line-height-normal: 1.4;
    --line-height-heading: 1.2;
    
    /* ----- Colors ----- */
    /* Text Colors */
    --text-color-primary: #ffffff;
    --text-color-secondary: #939498;
    --text-color-black: #000000;
    
    /* UI Element Colors */
    --bg-menu: #1e1f20;
    --bg-button: #333537;
    --bg-preloader: #181818;
    --bg-preloader-bar: #c8c8c8;
    --bg-preloader-background: #d9d9d9;
    --cta-color: #00EFE8;
    --cta-color-hover: #00948A;
    --cta-color-transparent: rgba(0, 239, 232, 0.3);
    --transparent-white-10: rgba(255, 255, 255, 0.1);
    --transparent-white-20: rgba(255, 255, 255, 0.2);
    --transparent-white-30: rgba(255, 255, 255, 0.3);
    --transparent-black-10: rgba(0, 0, 0, 0.1);
    --transparent-black-30: rgba(0, 0, 0, 0.3);
    --transparent-black-50: rgba(0, 0, 0, 0.5);
    
    /* Message Colors */
    --user-message-color: #292929; /* Darker gray for user messages */
    
    /* Panel Colors */
    --bg-panel: #1e1f20;
    --bg-panel-item: #333537;
    --bg-panel-item-hover: #575757;
    --bg-panel-button: #00bfa5;
    --bg-panel-button-hover: #00a896;
    --panel-border-color: var(--transparent-white-10);
    
    /* Status Colors */
    --battery-color: #01f702;
    --water-color: #4eb6f4;
    --filter-color: #FFC107;
    
    /* ----- Filter Effects ----- */
    --icon-filter-gray: invert(60%) sepia(9%) saturate(119%) hue-rotate(202deg) brightness(89%) contrast(87%);
    --icon-filter-white: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
    --icon-filter-cta: invert(67%) sepia(91%) saturate(380%) hue-rotate(131deg) brightness(101%) contrast(101%);
    
    /* ----- Sizing & Spacing ----- */
    /* Icon Sizes */
    --icon-size-menu: 28px;
    --icon-size-nav: 20px;
    --icon-size-small: 20px;
    
    /* Menu & Navigation */
    --menu-height: 64px;
    --menu-width: 412px;
    --menu-radius: 16px;
    --menu-padding: 60px;
    
    /* Buttons */
    --button-height: 40px;
    --button-padding: 8px;
    --button-gap: 20px;
    --button-border-radius: 24px;
    
    /* Panel Dimensions */
    --panel-width: 390px;
    --panel-height: 685px;  
    --panel-border-radius: 16px;
    --panel-item-border-radius: 4px;
    
    /* Spacers */
    --panel-padding: 15px;
    --panel-gap: 10px;
    --panel-side-padding: 8px;
    --panel-row-gap: 4px;
    
    /* ----- Effects ----- */
    --shadow-panel: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-button: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-popup: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 8px 2px rgba(0, 239, 232, 0.4);
    --shadow-glow-hover: 0 0 12px 3px rgba(0, 239, 232, 0.5);
    
    /* ----- Transitions ----- */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
  
    /* ----- Z-index Layers ----- */
    --z-index-base: 1;
    --z-index-menu: 10;
    --z-index-panel: 100;
    --z-index-action-menu: 1000;
    --z-index-tutorial: 1001;
  }
  
  /* Responsive Breakpoints */
  :root {
    /* We're using CSS variables for breakpoints to maintain consistency */
    --breakpoint-sm: 480px;   /* Small mobile devices */
    --breakpoint-md: 768px;   /* Standard mobile/tablet breakpoint */
    --breakpoint-lg: 1024px;  /* Tablets and small desktops */
    --breakpoint-xl: 1200px;  /* Large desktops */
  }
  
  /* ===== BASE ELEMENTS ===== */
  /* Core element styling that establishes the foundation for the UI.
     These styles normalize the environment and set baseline behaviors
     for content positioning, scrolling, and text rendering. */
  * { 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes tap blinking on iOS devices */
  }
  
  body {
    margin: 0;
    overflow: hidden;
    font-family: var(--font-family);
  }
  
  /* ===== FONT IMPORTS ===== */
  @font-face {
    font-family: 'Inter';
    font-weight: 400;
    font-style: normal;
    src: url('./fonts/Inter_18pt-Regular.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'Inter';
    font-weight: 500;
    font-style: normal;
    src: url('./fonts/Inter_18pt-Medium.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'Inter';
    font-weight: 600;
    font-style: normal;
    src: url('./fonts/Inter_18pt-SemiBold.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'Inter';
    font-weight: 700;
    font-style: normal;
    src: url('./fonts/Inter_18pt-Bold.ttf') format('truetype');
  }
  
  /* ===== 3D VIEWER COMPONENTS ===== */
  /* Styles for the 3D model viewer and related loading elements.
     These control the primary interactive canvas where users view and manipulate
     the Hydrant 3D model. The preloader elements provide visual feedback during
     the initial loading phase before the model is ready for interaction. */
  .v3d-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  /* Custom Preloader Screen Styles */
  .custom-preloader-screen {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-preloader-background);
    transition: opacity 0.5s ease-in-out;
  }
  
  .preloader-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
  }
  
  .preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .preloader-logo {
    width: 150px;
    height: 150px;
    margin-bottom: 30px;
    /* Make SVG image black instead of white */
    filter: brightness(0);
    animation: pulse 2s infinite alternate;
  }
  
  .preloader-progress-container {
    width: 100%;
    height: 10px;
    background-color: var(--bg-panel-item);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: 0 0 10px var(--shadow-glow);
    border: 1px solid var(--text-color-black);
  }
  
  .preloader-progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--cta-color);
    border-radius: 5px;
    transition: width 0.3s ease-in-out;
  }
  
  .preloader-percentage {
    font-family: var(--font-family);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-bold);
    color: var(--text-color-black);
    text-align: center;
  }
  
  /* Hide original Verge3D preloader */
  #v3d_preloader_container {
    display: none !important;
  }
  
  /* Original Verge3D preloader styles - kept for reference */
  .v3d-simple-preloader-logo {
      background-image: url('media/hydrant.svg');
  }
  
  .v3d-simple-preloader-bar {
      background: var(--bg-panel-item);
      height: 10px;
      border-color: var(--bg-panel-item);
  }
  
  .v3d-simple-preloader-background {
      background-color: var(--bg-preloader-bar);
  }
  
  .v3d-simple-preloader-bar-container {
      border-color: var(--bg-panel-item);
      background-color: var(--bg-menu);
      box-shadow: 0 0 10px var(--shadow-glow);
  }
  
  /* ===== MODEL ANNOTATIONS ===== */
  /* Annotation styles for interactive labels within the 3D model.
     These elements display information about specific components when users
     hover over or select parts of the vacuum. The dialogs provide detailed
     descriptions and can include multiple paragraphs of information. */
  .v3d-annotation {
    width: auto;
    background-color: var(--bg-panel);
    color: var(--text-color-primary);
    border-radius: var(--panel-border-radius);
    padding: 6px 10px;
    font-family: var(--font-family);
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-regular);
    text-align: center;
    border: none; /* Explicitly set border to none */
    transition: background-color var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
  }
  
  .v3d-annotation:hover {
    background-color: var(--cta-color);
    color: var(--text-color-black);
  }
  
  .v3d-annotation-dialog {
    width: 250px;
    background-color: var(--bg-panel);
    color: var(--text-color-primary);
    border-radius: var(--panel-border-radius);
    padding: 6px 10px;
    font-family: var(--font-family);
    font-size: var(--font-size-normal);
    text-align: left;
    white-space: pre-line;
    line-height: var(--line-height-normal);
    border: none; /* Explicitly set border to none */
    position: absolute; /* Ensure position is set */
    top: 100%; /* Position directly below the annotation */
    left: 50%; /* Position at the horizontal center of the parent */
    transform: translateX(-50%) translateY(10px); /* Center it horizontally and add small gap */
    box-shadow: var(--shadow-panel);
    border-left: 2px solid var(--cta-color);
  }
  
  .v3d-annotation-dialog p {
    position: relative;
    padding-bottom: 4px;
    margin-bottom: 8px;
    font-weight: var(--font-weight-regular);
  }
  
  .v3d-annotation-dialog p:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--text-color-secondary);
  }
  
  /* ===== NAVIGATION SYSTEM ===== */
  /* Navigation bar and menu components that allow users to access different
     application functions. The top navigation contains app title and utility
     buttons, while the bottom function menu provides access to the main
     application sections like procedures, and documentation. */
  /* Common menu properties */
  #navigation-menu,
  #function-menu {
    position: fixed;
    background-color: var(--bg-menu);
    display: flex;
    align-items: center;
    z-index: var(--z-index-menu);
    box-sizing: border-box;
  }
  
  /* Navigation menu (top bar) */
  #navigation-menu {
    top: 0;
    left: 0;
    width: 100%;
    height: var(--menu-height);
    justify-content: space-between;
    padding: 0;
  }
  
  .nav-left,
  .nav-right {
    display: flex;
    align-items: center;
  }
  
  .nav-left {
    margin-left: var(--menu-padding);
  }
  
  .nav-right {
    gap: var(--button-gap);
    margin-right: var(--menu-padding);
  }
  
  #app-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-color-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-medium);
  }
  
  /* Function menu (bottom bar) */
  #function-menu {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: var(--menu-width);
    height: var(--menu-height);
    border-radius: var(--menu-radius);
    justify-content: space-around;
  }
  
  .menu-item {
    flex-direction: column;
    padding: var(--button-padding);
  }
  
  #function-menu .menu-item::after {
    content: attr(data-function);
    font-size: var(--font-size-button);
    margin-top: 4px;
    text-transform: capitalize;
  }
  
  /* ===== BUTTON DESIGN SYSTEM ===== */
  /* Comprehensive button styling system with multiple variants (circle, pill) 
     and state changes (hover, active). These components are used throughout
     the application for both navigation and actions. The system is built around
     the base .btn class with modifiers that change appearance and behavior.
     Different variants handle different use cases - circles for utility controls,
     pills for actions with text labels. */
  /* Base button styles */
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-button);
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    padding: var(--button-padding);
    transition: color var(--transition-fast), filter var(--transition-fast);
  }
  
  .btn img {
    transition: filter var(--transition-fast);
  }
  
  /* Button shapes */
  .btn-circle {
    border-radius: 50%;
    width: var(--button-height);
    height: var(--button-height);
    padding: 0;
  }
  
  .btn-pill {
    border-radius: var(--button-border-radius);
    padding: 8px 16px;
    height: var(--button-height);
  }
  
  /* Button types */
  /* 1. Function Menu Buttons (Gray with White hover) */
  .btn-gray-to-white {
    color: var(--text-color-primary);
    background: transparent;
  }
  
  .btn-gray-to-white:hover, 
  .btn-gray-to-white.active {
    color: var(--cta-color);
  }
  
  .btn-gray-to-white img {
    filter: var(--icon-filter-white);
    width: var(--icon-size-menu);
    height: var(--icon-size-menu);
  }
  
  .btn-gray-to-white:hover img,
  .btn-gray-to-white.active img {
    filter: var(--icon-filter-cta);
  }
  
  /* 2. Navigation Buttons (White with Gray hover) */
  .btn-white-to-gray  {
    color: var(--text-color-primary);
    background-color: var(--bg-button);
  }
  
  .btn-white-to-gray:hover{
    color: var(--text-color-primary);
  }
  
  .btn-white-to-gray img {
    filter: var(--icon-filter-white) !important; /* Force white icons */
    width: var(--icon-size-nav);
    height: var(--icon-size-nav);
  }
  
  .btn-white-to-gray:hover img {
    filter: var(--icon-filter-cta) !important; /* Force gray icons on hover */
  }
  
  /* 3. Active Button Style (for interactive elements_return button) */
  .btn-active {
    background-color: var(--bg-button);
    border-radius: 50%;
    width: var(--button-height);
    height: var(--button-height);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: box-shadow var(--transition-fast);
    
    /* Glow effect for the button */
    box-shadow: var(--shadow-glow);
    border: 1px solid var(--cta-color-transparent);
  }
  
  .btn-active:hover {
    box-shadow: var(--shadow-glow-hover);
  }
  
  .btn-active img {
    width: var(--icon-size-nav);
    height: var(--icon-size-nav);
    filter: var(--icon-filter-cta) !important;
  }
  
  /* 4. Action Menu Buttons */
  .action-item.btn-pill {
    background-color: var(--bg-menu);
    color: var(--text-color-primary);
    box-shadow: var(--shadow-button);
  }
  
  .action-item.btn-pill img {
    filter: var(--icon-filter-white);
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }
  
  .action-item.btn-pill .button-text {
    color: var(--text-color-primary);
  }
  
  /* Inactive state for action menu buttons */
  .action-item.btn-pill.inactive {
    background-color: var(--bg-menu);
    color: var(--text-color-secondary);
    cursor: default;
    opacity: 0.6;
  }
  
  .action-item.btn-pill.inactive img {
    filter: var(--icon-filter-gray);
  }
  
  .action-item.btn-pill.inactive .button-text {
    color: var(--text-color-secondary);
  }
  
  .action-item.btn-pill.inactive:hover {
    color: var(--text-color-secondary);
    background-color: var(--bg-menu);
  }
  
  .action-item.btn-pill.inactive:hover img {
    filter: var(--icon-filter-gray);
  }
  
  .action-item.btn-pill.inactive:hover .button-text {
    color: var(--text-color-secondary);
  }
  
  /* Hover and active states for enabled buttons */
  .action-item.btn-pill:not(.inactive):hover,
  .action-item.btn-pill:not(.inactive).active {
    color: var(--cta-color);
  }
  
  .action-item.btn-pill:not(.inactive):hover img,
  .action-item.btn-pill:not(.inactive).active img {
    filter: var(--icon-filter-cta);
  }
  
  .action-item.btn-pill:not(.inactive):hover .button-text,
  .action-item.btn-pill:not(.inactive).active .button-text {
    color: var(--cta-color);
  }
  
  /* Center close button special case */
  #action_close {
    background-color: var(--bg-menu);
  }
  
  #action_close img {
    width: 24px;
    height: 24px;
    margin-right: 0;
    filter: var(--icon-filter-white);
  }
  
  #action_close:hover img {
    filter: var(--icon-filter-cta);
  }
  
  /* Reset button text */
  #reset_button img {
    margin-right: 10px;
  }
  
  #reset_button .button-text {
    color: var(--text-color-primary);
  }
  
  #reset_button:hover .button-text {
    color: var(--cta-color);
  }
  
  /* Hide the default fullscreen button */
  #fullscreen-button {
    display: none !important;
  }

  /* === CHATBOT FLOATING BUTTON ===== */
  /* Floating chatbot button positioned in bottom right corner */
  .chatbot-floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--cta-color);
    box-shadow: var(--shadow-glow);
    z-index: var(--z-index-menu);
    transition: all var(--transition-fast);
    border: 2px solid var(--cta-color-transparent);
  }

  .chatbot-floating-btn:hover {
    background-color: var(--cta-color-hover);
    box-shadow: var(--shadow-glow-hover);
    transform: scale(1.05);
  }

  .chatbot-floating-btn img {
    width: 28px;
    height: 28px;
    filter: brightness(0) !important; /* Force black icon on cyan background */
  }

  .chatbot-floating-btn:hover img {
    filter: brightness(0) !important; /* Keep black on hover */
  }
  
  /* ===== PANEL COMPONENT SYSTEM ===== */
  /* Panel containers form the main content areas of the application.
     Each panel represents a different functional section like procedures,
     procedures, documents, and parts catalog. Panels have a consistent
     structure with headers, content areas, and can be dragged on desktop.
     They adapt to different content types through modifier classes. */
  .panel-container {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: var(--panel-width);
    height: var(--panel-height);
    background-color: var(--bg-panel);
    border-radius: var(--panel-border-radius);
    color: var(--text-color-primary);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-panel);
    z-index: var(--z-index-panel);
  }
  
  .panel-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--bg-panel);
    border-bottom: 1px solid var(--panel-border-color);
    position: relative;
    cursor: move;
    user-select: none;
    padding-top: 25px;
  }
  
  /* === Panel Content Containers === */
  .panel-content, 
  .table-content, 
  .chat-content {
    flex: 1;
    overflow-y: auto;
    background-color: var(--bg-panel);
  }
  
  .panel-content {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .table-content {
    padding: 8px;
  }
  
  .chat-content {
    display: flex;
    flex-direction: column;
    height: calc(100% - 56px);
    padding: 0;
    overflow: hidden;
  }
  
  /* === Panel Buttons === */
  .panel-close-btn, 
  .panel-collapse-btn, 
  #cart-purchase,
  #ai_trigger {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--bg-panel-item);
    width: 36px;
    height: 36px;
    border-radius: var(--panel-item-border-radius);
  }
  
  .panel-close-btn, 
  .panel-collapse-btn {
    left: var(--panel-padding);
  }
  
  #cart-purchase,
  #ai_trigger {
    right: var(--panel-padding);
  }
  
  /* AI Trigger button specific styling */
  #ai_trigger {
    display: block; /* Hidden by default - controlled via JavaScript and Verge3D puzzles */
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }
  
  /* Show AI Trigger button when active */
  #ai_trigger.active {
    display: block;
  }
  
  #ai_trigger img {
    width: 20px;
    height: 20px;
    filter: var(--icon-filter-white);
    transition: filter var(--transition-fast);
  }
  
  .panel-close-btn:hover, 
  .panel-collapse-btn:hover, 
  #cart-purchase:hover,
  #ai_trigger:hover {
    background-color: var(--bg-panel-item-hover);
  }

  /* === Start Tutorial Button in Info Panel === */
  #start-tutorial-btn {
    position: absolute;
    right: var(--panel-padding);
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--cta-color);
    color: var(--text-color-black);
    border: none;
    padding: 8px 16px;
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }

  #start-tutorial-btn:hover {
    background-color: var(--cta-color-hover);
  }
  
  #ai_trigger:hover img {
    filter: var(--icon-filter-cta);
  }

  /* Procedure AI Trigger buttons - positioned like cart-purchase */
  [id^="procedure_"][id$="_ai_trigger"] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: var(--panel-padding);
    background-color: var(--bg-panel-item);
    width: 36px;
    height: 36px;
    border-radius: var(--panel-item-border-radius);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    display: none; /* Hidden by default */
    z-index: 1002;
  }

  [id^="procedure_"][id$="_ai_trigger"] img {
    width: 20px;
    height: 20px;
    filter: var(--icon-filter-white);
    transition: filter var(--transition-fast);
  }

  [id^="procedure_"][id$="_ai_trigger"]:hover {
    background-color: var(--bg-panel-item-hover);
  }

  [id^="procedure_"][id$="_ai_trigger"]:hover img {
    filter: var(--icon-filter-cta);
  }
  
  /* === Typography & Text Elements === */
  .panel-title, 
  .part-name, 
  .panel-controls h3, 
  .panel-item h3 {
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-bold);
    margin: 0 0 8px 0;
    text-align: left;
    color: var(--text-color-primary);
  }
  
  .panel-header .panel-title {
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    width: 100%;
  }
  
  .panel-value, 
  .part-price {
    font-size: var(--font-size-normal);
    color: var(--text-color-primary);
    font-weight: 400 !important;
    font-family: var(--font-family) !important;
  }
  
  .panel-value {
    text-align: right;
    margin-left: auto;
  }
  
  .panel-description, 
  .part-description, 
  .section-header td {
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
  }
  
  .panel-label {
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-bold);
    text-align: left;
    min-width: fit-content;
  }
  
  .table-row td, 
  .extras-row td, 
  .part-item, .part-item_active, 
  .part-item table tr td, .part-item_active table tr td {
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-medium);
    background-color: var(--bg-panel-item);
    border-radius: var(--panel-item-border-radius);
    padding: var(--panel-padding);
    color: var(--text-color-primary);
    transition: background-color var(--transition-fast);
    cursor: pointer;
  }
  
  .panel-item:hover, 
  .table-row:hover td, 
  .extras-row:hover td {
    background-color: var(--bg-panel-item-hover);
  }
  
  /* Section headers exception */
  .section-header td, 
  .section-header:hover td {
    background-color: transparent !important;
    cursor: default !important;
  }
  
  .panel-item {
    background-color: var(--bg-panel-item);
    border-radius: var(--panel-item-border-radius);
    padding: var(--panel-padding);
    margin-bottom: 4px;
  }
  
  .panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--panel-row-gap);
  }
  
  /* === Controls & Indicators === */
  .panel-controls {
    background-color: var(--bg-panel-item);
    border-radius: var(--panel-item-border-radius);
    padding: var(--panel-padding);
    gap: 8px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
  }
  
  /* Controls title needs to be at the top with proper spacing */
  .panel-controls .panel-title {
    margin-bottom: 8px;
  }
  
  .panel-button {
    background-color: var(--cta-color);
    color: var(--text-color-black);
    border: none;
    border-radius: 25px;
    padding: 12px 15px;
    width: 100%;
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    text-align: center;
    text-transform: none;
    transition: all var(--transition-fast);
  }
  
  .panel-button:hover {
    background-color: var(--cta-color-hover);
  }
  
  .panel-select-container {
    width: 100%;
  }
  
  #cleaning-mode {
    width: 100%;
    text-align: center;
    background-color: var(--cta-color);
    color: var(--text-color-black);
    border: none;
    border-radius: 25px;
    padding: 12px 15px;
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('media/dropdown.svg');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
  }
  
  /* Indicators for battery, water, filter */
  .indicator-container {
    width: 100%;
    height: 8px;
    background-color: var(--transparent-white-10);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 10px;
  }
  
  .indicator {
    height: 100%;
    width: 100%;
  }
  
  .indicator-level {
    height: 100%;
    border-radius: 4px;
    transition: width var(--transition-medium);
  }
  
  .battery-indicator .indicator-level { background-color: var(--battery-color); }
  .water-indicator .indicator-level { background-color: var(--water-color); }
  .filter-indicator .indicator-level { background-color: var(--filter-color); }
  
  /* === TABLE COMPONENTS ===== */
  /* Specialized table layouts used in multiple panels for displaying
     structured data like procedures, parts catalog, and extras menu.
     These components ensure consistent spacing and alignment of data. */
  .table-wrapper {
    width: 100%;
  }
  
  .panel-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
    table-layout: fixed;
  }
  
  /* === EXTRAS PANEL COMPONENTS ===== */
  /* Components for the extras panel that provides access to secondary
     functions like settings, support, and information. Items use a
     consistent layout with icons, text, and expand indicators. */
  .extras-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  
  .left-content {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .small-icon {
    width: 20px;
    height: 20px;
    filter: var(--icon-filter-white);
  }
  
  .expand-icon {
    width: 16px;
    height: 16px;
    filter: var(--icon-filter-gray);
  }
  
  .extras-row:hover .expand-icon {
    filter: var(--icon-filter-white);
  }
  
  /* === PARTS CATALOG COMPONENTS ===== */
  /* Specialized components for the parts catalog section that displays
     replacement components with names, descriptions, prices, and purchase
     options. Each part can be selected and added to the shopping cart. */
  .part-item, .part-item_active {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-panel-item);
    border-radius: var(--panel-item-border-radius);
    padding: 8px var(--panel-padding);
    color: var(--text-color-primary);
    transition: background-color var(--transition-fast);
    cursor: pointer;
    margin-bottom: 4px;
  }
  
  .part-item:last-child, .part-item_active:last-child {
    margin-bottom: 0;
  }
  
  .part-name {
    font-weight: var(--font-weight-medium);
    margin: 0;
  }
  
  /* Remove the grid positioning for description and price since they won't be used */
  .part-description,
  .part-price {
    display: none;
  }
  
  .cart-add {
    background-color: var(--cta-color);
    color: var(--text-color-primary);
    border-radius: 4px;
    width: 36px;
    height: 36px;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast);
    position: relative;
    background-image: url('./media/cart_add.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
  }
  
  .cart-add:hover {
    background-color: var(--cta-color-hover);
  }
  
  /* === DASHBOARD COMPONENTS ===== */
  /* Wright J-5 engine dashboard interface displaying real-time engine metrics,
     gauges, status indicators, and performance data. Designed for aviation
     maintenance professionals to monitor engine health and operational parameters. */
  
  /* Dashboard Sections */
  .dashboard-section {
    background-color: var(--bg-panel-item);
    border-radius: var(--panel-item-border-radius);
    padding: var(--panel-padding);
    margin-bottom: var(--panel-gap);
  }
  
  .dashboard-section-title {
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-bold);
    color: var(--text-color-primary);
    margin: 0 0 12px 0;
    text-align: left;
  }
  
  /* Engine Controls Grid */
  .dashboard-controls-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .engine-controls-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
  }
  
  /* Engine Control Button */
  .engine-control-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: none;
    padding: 12px 16px;
    background-color: var(--bg-panel);
    border: 2px solid var(--transparent-white-20);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
  }
  
  .engine-control-button:hover {
    border-color: var(--cta-color);
    background-color: var(--transparent-white-10);
  }
  
  .engine-control-button.status-running {
    border-color: #ff4444;
    background-color: rgba(255, 68, 68, 0.1);
  }
  
  .engine-control-button.status-stopped {
    border-color: var(--battery-color);
    background-color: rgba(1, 247, 2, 0.1);
  }
  
  .engine-control-button.status-transitioning {
    border-color: var(--filter-color);
    background-color: var(--transparent-white-10);
  }
  
  .control-content {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .control-text {
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-bold);
    color: var(--text-color-primary);
  }
  
  .engine-control-button.status-running .control-text {
    color: #ff4444;
  }
  
  .engine-control-button.status-stopped .control-text {
    color: var(--battery-color);
  }
  
  .engine-control-button.status-transitioning .control-text {
    color: var(--filter-color);
  }
  
  .status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--battery-color);
    animation: pulse 2s infinite;
  }
  
  .engine-control-button.status-running .status-dot {
    background-color: #ff4444;
  }
  
  .engine-control-button.status-stopped .status-dot {
    background-color: var(--battery-color);
    animation: none;
  }
  
  .engine-control-button.status-transitioning .status-dot {
    background-color: var(--filter-color);
    animation: pulse 1s infinite;
  }

  /* RPM Control Section */
  .rpm-control-section {
    width: 100%;
    max-width: none;
  }
  
  .control-label {
    font-size: var(--font-size-small);
    color: var(--text-color-primary);
    margin-bottom: 6px;
    display: block;
    font-weight: var(--font-weight-regular);
  }
  
  .slider-container {
    position: relative;
    margin-bottom: 12px;
  }
  
  /* Visual scale background showing full 0-2200 range */
  .slider-scale {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    margin-bottom: 4px;
    pointer-events: none;
    z-index: 1;
  }
  
  .slider-track-background {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .slider-danger-zone {
    position: absolute;
    right: 0;
    top: 0;
    width: 4.5%; /* 100/2200 * 100 = 4.5% for 100 RPM range */
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 68, 68, 0.6), #ff4444);
    border-radius: 0 3px 3px 0;
    border: 1px solid #ff4444;
    box-shadow: inset 0 0 3px rgba(255, 68, 68, 0.8);
  }
  
  .rpm-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2); /* Subtle background for the controllable area */
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    z-index: 3;
  }
  
  /* Override slider track for WebKit browsers */
  .rpm-slider::-webkit-slider-track {
    width: 100%;
    height: 6px;
    background: transparent;
    border-radius: 3px;
  }
  
  /* Override slider track for Firefox */
  .rpm-slider::-moz-range-track {
    width: 100%;
    height: 6px;
    background: transparent;
    border-radius: 3px;
    border: none;
  }
  
  .rpm-slider:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  
  .rpm-slider::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cta-color);
    cursor: pointer;
    border: 2px solid var(--bg-panel);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
  }
  
  .rpm-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cta-color);
    cursor: pointer;
    border: 2px solid var(--bg-panel);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
  }
  
  .rpm-slider:hover::-webkit-slider-thumb,
  .rpm-slider:active::-webkit-slider-thumb {
    background: var(--battery-color);
    transform: scale(1.1);
  }
  
  .rpm-slider:hover::-moz-range-thumb,
  .rpm-slider:active::-moz-range-thumb {
    background: var(--battery-color);
    transform: scale(1.1);
  }
  
  .rpm-slider:disabled::-webkit-slider-thumb {
    background: var(--text-color-secondary);
    cursor: not-allowed;
    transform: none;
  }
  
  .rpm-slider:disabled::-moz-range-thumb {
    background: var(--text-color-secondary);
    cursor: not-allowed;
    transform: none;
  }
  
  .slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-tiny);
    color: var(--text-color-secondary);
    margin-top: 6px;
    font-weight: var(--font-weight-regular);
    position: relative;
  }
  
  .scale-label {
    position: relative;
    text-align: center;
    min-width: 30px;
  }
  
  .scale-label.controllable-start,
  .scale-label.controllable-end {
    color: var(--cta-color);
    font-weight: var(--font-weight-bold);
  }
  
  .scale-label.danger-zone {
    color: #ff4444;
    font-weight: var(--font-weight-bold);
  }
  
  .slider-range-indicators {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    gap: 8px;
  }
  
  .range-indicator {
    font-size: var(--font-size-tiny);
    font-weight: var(--font-weight-regular);
    padding: 2px 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
  }
  
  .range-indicator.controllable {
    color: var(--cta-color);
    border: 1px solid var(--cta-color);
  }
  
  .range-indicator.danger {
    color: #ff4444;
    border: 1px solid #ff4444;
  }
  
  /* Visual feedback for different RPM operating ranges */
  .slider-container.rpm-low .rpm-slider::-webkit-slider-thumb {
    background: #4eb6f4; /* Blue for low RPM */
    box-shadow: 0 0 8px rgba(78, 182, 244, 0.4);
  }
  
  .slider-container.rpm-low .rpm-slider::-moz-range-thumb {
    background: #4eb6f4;
    box-shadow: 0 0 8px rgba(78, 182, 244, 0.4);
  }
  
  .slider-container.rpm-normal .rpm-slider::-webkit-slider-thumb {
    background: var(--battery-color); /* Green for normal RPM */
    box-shadow: 0 0 8px rgba(1, 247, 2, 0.4);
  }
  
  .slider-container.rpm-normal .rpm-slider::-moz-range-thumb {
    background: var(--battery-color);
    box-shadow: 0 0 8px rgba(1, 247, 2, 0.4);
  }
  
  .slider-container.rpm-high .rpm-slider::-webkit-slider-thumb {
    background: #ffa500; /* Orange for high RPM */
    box-shadow: 0 0 8px rgba(255, 165, 0, 0.4);
  }
  
  .slider-container.rpm-high .rpm-slider::-moz-range-thumb {
    background: #ffa500;
    box-shadow: 0 0 8px rgba(255, 165, 0, 0.4);
  }
  
  .rpm-display {
    text-align: center;
    font-size: var(--font-size-normal);
    color: var(--text-color-primary);
    font-weight: var(--font-weight-bold);
    padding: 4px 8px;
    background-color: var(--bg-panel);
    border-radius: var(--panel-item-border-radius);
    border: 1px solid var(--transparent-white-10);
  }
  
  .engine-runtime {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  
  .engine-details {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
  }
  
  .engine-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-small);
  }
  
  .detail-label {
    color: var(--text-color-secondary);
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
  }
  
  .detail-value {
    color: var(--text-color-primary);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
  }
  
  /* Dashboard Gauges */
  .dashboard-gauges-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--panel-gap);
    justify-content: center;
    align-items: center;
  }
  
  .gauge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 120px;
  }
  
  .dashboard-gauge {
    width: 120px;
    height: 80px;
    margin: 0 auto 8px auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Ensure Google Charts gauges are centered within their containers */
  .dashboard-gauge > div {
    margin: 0 auto !important;
  }
  
  .gauge-label {
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
    font-weight: var(--font-weight-regular);
    margin-top: 4px;
  }
  
  /* Performance Metrics Grid */
  .dashboard-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--panel-gap);
  }
  
  .metric-card {
    background-color: var(--bg-panel);
    border-radius: var(--panel-item-border-radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid var(--transparent-white-10);
  }
  
  .metric-label {
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
    margin-bottom: 4px;
    font-weight: var(--font-weight-regular);
  }
  
  .metric-value {
    font-size: var(--font-size-title);
    color: var(--text-color-primary);
    font-weight: var(--font-weight-bold);
    line-height: 1;
  }
  
  .metric-unit {
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
    margin-top: 2px;
    font-weight: var(--font-weight-regular);
  }
  
  /* System Status Grid */
  .dashboard-systems-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .system-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    background-color: var(--bg-panel);
    border-radius: var(--panel-item-border-radius);
    border: 1px solid var(--transparent-white-10);
  }
  
  .system-icon {
    width: 20px;
    height: 20px;
    filter: var(--icon-filter-white);
    flex-shrink: 0;
  }
  
  .system-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  
  .system-name {
    font-size: var(--font-size-normal);
    color: var(--text-color-primary);
    font-weight: var(--font-weight-regular);
  }
  
  .system-status-text {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-medium);
  }
  
  .system-status-text.status-ok {
    color: var(--battery-color);
  }
  
  .system-status-text.status-warning {
    color: var(--filter-color);
  }
  
  .system-status-text.status-error {
    color: #ff4444;
  }
  
  /* Performance Graphs */
  .dashboard-graphs-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--panel-gap);
  }
  
  .graph-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg-panel);
    border-radius: var(--panel-item-border-radius);
    padding: 4px;
    border: 1px solid var(--transparent-white-10);
    position: relative;
  }
  
  .graph-current-value {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.8);
    color: var(--text-color-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .graph-current-value .status-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--battery-color);
  }
  
  .graph-current-value.engine-stopped .status-indicator {
    background-color: var(--text-color-secondary);
  }
  
  .trend-chart {
    width: 100%;
    height: 120px;
    background-color: transparent;
  }
  
  .graph-label {
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
    margin-top: 8px;
    font-weight: var(--font-weight-regular);
  }

  /* Inspection History */
  .inspection-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .inspection-item {
    padding: 12px;
    background-color: var(--bg-panel);
    border-radius: var(--panel-item-border-radius);
    border: 1px solid var(--transparent-white-10);
  }
  
  .inspection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
  }
  
  .inspection-type {
    font-size: var(--font-size-normal);
    color: var(--text-color-primary);
    font-weight: var(--font-weight-medium);
  }
  
  .inspection-status {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    padding: 4px 8px;
    border-radius: 12px;
    text-transform: uppercase;
  }
  
  .inspection-status.status-passed {
    background-color: var(--battery-color);
    color: var(--text-color-black);
  }
  
  .inspection-status.status-attention {
    background-color: var(--filter-color);
    color: var(--text-color-black);
  }
  
  .inspection-status.status-failed {
    background-color: #ff4444;
    color: var(--text-color-primary);
  }
  
  .inspection-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .inspection-date {
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
    font-weight: var(--font-weight-regular);
  }
  
  .inspection-hours {
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
    font-weight: var(--font-weight-regular);
  }

  /* Activity List */
  .activity-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .activity-item {
    padding: 8px;
    background-color: var(--bg-panel);
    border-radius: var(--panel-item-border-radius);
    border: 1px solid var(--transparent-white-10);
  }
  
  .activity-time {
    font-size: var(--font-size-small);
    color: var(--text-color-secondary);
    margin-bottom: 4px;
    font-weight: var(--font-weight-regular);
  }
  
  .activity-description {
    font-size: var(--font-size-normal);
    color: var(--text-color-primary);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
  }
  
  /* Responsive Dashboard Layout */
  @media screen and (max-width: 1024px) {
    .dashboard-gauges-grid {
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      justify-content: center;
      padding: 0 5px;
    }
    
    .gauge-container {
      width: 100%;
      max-width: 150px;
      margin: 0 auto;
      min-height: 100px;
    }
    
    .dashboard-metrics-grid {
      grid-template-columns: 1fr;
      gap: 8px;
    }
    
    .dashboard-graphs-container {
      grid-template-columns: 1fr;
      gap: 8px;
    }
    
    .dashboard-gauge {
      width: 90px;
      height: 65px;
      margin: 0 auto 4px auto;
    }
    
    /* Ensure better centering on mobile */
    .dashboard-gauge > div {
      margin: 0 auto !important;
      display: block !important;
    }
    
    .metric-card {
      padding: 10px;
    }
    

    
    .trend-chart {
      height: 100px;
    }
  }

  /* === CHATBOT INTERFACE ===== */
  /* AI assistant chat interface that allows users to ask questions and
     receive support. Includes message bubbles for both user and bot messages,
     an input field with send button, and scroll behavior for conversation history. */
  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .chatbot-message {
    max-width: 80%;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: var(--font-size-normal);
    line-height: var(--line-height-normal);
    margin-bottom: 4px;
  }
  
  .chatbot-message p {
    margin: 0;
  }
  
  .user-message {
    align-self: flex-end;
    background-color: var(--user-message-color);
    color: var(--text-color-primary);
    border-bottom-right-radius: 4px;
  }
  
  .bot-message {
    align-self: flex-start;
    background-color: var(--bg-panel-item);
    color: var(--text-color-primary);
    border-bottom-left-radius: 4px;
  }
  
  .chat-input-container {
    display: flex;
    padding: 10px;
    border-top: 1px solid var(--panel-border-color);
    align-items: center;
    background-color: var(--bg-panel);
  }
  
  .chat-input {
    flex: 1;
    padding: 10px 15px;
    border: none;
    border-radius: 20px;
    background-color: var(--bg-panel-item);
    color: var(--text-color-primary);
    font-size: var(--font-size-normal);
    font-family: var(--font-family);
    outline: none;
    margin-right: 10px;
  }
  
  .chat-input::placeholder {
    color: var(--text-color-secondary);
  }
  
  #chat-send {
    background-color: var(--bg-panel-item);
    width: 36px;
    height: 36px;
  }
  
  #chat-send:hover {
    background-color: var(--bg-panel-item-hover);
  }
  
  #chat-send img {
    width: 16px;
    height: 16px;
    transition: all 0.2s ease;
  }
  
  /* === MOBILE INPUT FOCUS HANDLING ===== */
  /* Mobile chat input container that appears under navigation menu */
  .mobile-chat-input-container {
    position: fixed;
    top: var(--menu-height);
    left: 0;
    right: 0;
    display: none;
    padding: 10px;
    border-bottom: 1px solid var(--panel-border-color);
    background-color: var(--bg-panel);
    z-index: var(--z-index-panel);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .mobile-chat-input-container .chat-input-container {
    margin: 0;
    padding: 0;
    border-top: none;
    background-color: transparent;
  }

  @media screen and (max-width: 1024px) {
    /* Basic mobile chatbot styling - no keyboard handling */
    #chatbot-container {
      height: 50vh;
      bottom: 64px;
    }

    /* Hide original input when mobile input is active */
    #chatbot-container.mobile-input-active .chat-input-container {
      display: none;
    }

    /* Adjust chat messages height when mobile input is active */
    #chatbot-container.mobile-input-active .chat-messages {
      height: calc(100% - 20px);
      margin-bottom: 10px;
    }
  }
  
  /* Show Me Button Styles */
  .show-me-btn {
    display: none; /* Hidden by default - controlled via Verge3D puzzles */
    /* Base button styling */
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-button);
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    transition: color var(--transition-fast), filter var(--transition-fast);
    /* White pill button styling */
    color: var(--text-color-primary);
    background-color: var(--bg-button);
    border: 1px solid var(--text-color-primary);
    border-radius: 20px;
    padding: 8px 16px;
    margin-top: 8px;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .show-me-btn:hover {
    color: var(--cta-color);
  }
  
  .show-me-btn img {
    filter: var(--icon-filter-white);
    width: 16px;
    height: 16px;
    transition: filter var(--transition-fast);
  }
  
  .show-me-btn:hover img {
    filter: var(--icon-filter-cta);
  }
  
  .show-me-btn span {
    font-weight: var(--font-weight-medium);
    user-select: none;
  }
  



  
  /* === MEDIA CONTENT COMPONENTS ===== */
  /* Components for displaying images and videos within panels.
     Includes responsive scaling for different screen sizes and
     maintains aspect ratios for embedded content. */
  .panel-image {
    width: 100%;
    height: auto;
    max-height: 350px;
    border-radius: var(--panel-item-border-radius);
    margin-bottom: 8px;
    object-fit: contain;
    display: block;
  }
  
  /* Map container styling */
  #cleaning-map {
    padding: 0;
    overflow: hidden;
    display: none;
  }
  
  #cleaning-map.panel-item {
    height: auto;
    overflow: visible;
    padding-bottom: 15px;
  }
  
  #cleaning-map img {
    width: 100%;
    height: auto;
    border-radius: var(--panel-item-border-radius) var(--panel-item-border-radius) 0 0;
    display: block;
    margin: 0;
  }
  
  #map-title {
    padding: var(--panel-padding);
    margin: 0;
  }
  
  /* === VIDEO TUTORIAL ===== */
  .video-content {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-panel);
  }
  
  .video-wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    position: relative;
    overflow: hidden;
  }
  
  .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--panel-item-border-radius);
  }
  
  /* === INFORMATION PANEL ===== */
  /* Components specific to the information/help panel that explains
     application features and interactions. Organizes content into
     clearly defined sections with icons and descriptions. */
  .info-container-wrapper {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 0;
  }
  
  .info-section {
    background-color: var(--bg-panel-item);
    border-radius: var(--panel-item-border-radius);
    padding: var(--panel-padding);
    margin: 0 8px 4px 8px;
    cursor: default;
  }
  
  .info-section:hover {
    background-color: var(--bg-panel-item);
  }
  
  .info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--text-color-primary);
    font-size: var(--font-size-normal);
  }
  
  .info-item:last-child {
    margin-bottom: 0;
  }
  
  .info-container-wrapper .section-header {
    padding: 10px var(--panel-padding) 4px var(--panel-padding);
    margin: 0;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-regular);
    color: var(--text-color-secondary);
    text-align: left;
  }
  
  #info-container .table-content {
    padding: 8px 0;
  }
  
  /* === CHECK INDICATORS ===== */
  /* Check mark icons used in selection interfaces like the
     cut direction settings panel. They indicate the currently
     selected option and can represent different axis choices. */
  .check-icon {
    width: 16px;
    height: 16px;
    filter: var(--icon-filter-cta);
  }
  
  .check-icon-x {
    display: block; /* Default state */
  }
  
  .check-icon-y,
  .check-icon-z {
    display: none; /* Default state */
  }
  
  /* === PROCEDURE COMPONENTS ===== */
  /* Components for the step-by-step maintenance procedure interface.
     Includes playback controls, step descriptions, and navigation
     between instructions. Designed for clear, guided user workflows. */
  .procedure-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-bottom: 5px;
    padding: 5px;
  }
  
  .procedure-control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--bg-panel-item);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }
  
  .procedure-control-btn:hover {
    background-color: var(--bg-panel-item-hover);
  }
  
  .procedure-control-btn img {
    width: 20px;
    height: 20px;
    filter: var(--icon-filter-white);
  }
  
  .procedure-step {
    background-color: var(--bg-panel-item);
    border-radius: var(--panel-item-border-radius);
    padding: var(--panel-padding);
    margin-bottom: 10px;
  }
  
  .procedure-description {
    /* Core text styling */
    font-size: var(--font-size-normal);
    color: var(--text-color-primary);
    line-height: 1.6;
    margin: 0;
    text-align: left;
    
    /* Essential for preserving formatting from Verge3D puzzles */
    white-space: pre-line;
    word-wrap: break-word;
    overflow-wrap: break-word;
    
    /* Better rendering of special characters like bullet points */
    font-feature-settings: normal;
    text-rendering: optimizeLegibility;
    
    /* Padding and spacing */
    padding: 0;
  }
  
  /* Enhanced formatting for procedure descriptions */
  .procedure-description {
    /* Automatically style bullet points */
    background-image: linear-gradient(transparent, transparent);
  }
  
  /* Style lines that start with bullet characters */
  .procedure-description::before {
    content: "";
    display: block;
    height: 0;
  }
  
  /* Universal bullet point styling - detects common bullet characters */
  .procedure-description {
    /* Handle bullet points starting with • - * or numbers */
    line-height: 1.6;
  }
  
  /* Add spacing between paragraphs when separated by double line breaks */
  .procedure-description {
    /* Better paragraph spacing */
    text-align: left;
  }
  
  /* Style for procedure text with automatic bullet point detection */
  .procedure-description[data-format="bullets"] {
    padding-left: 0;
  }
  
  /* Alternative: If you want to use CSS to style specific patterns */
  .procedure-description {
    /* Auto-indent lines that start with common bullet characters */
    text-indent: 0;
  }
  
  /* Enhanced version with better bullet support */
  .procedure-description {
    /* Reset the previous styles and add comprehensive formatting */
    font-size: var(--font-size-normal);
    color: var(--text-color-primary);
    line-height: 1.6;
    margin: 0;
    
    /* Essential for preserving formatting from Verge3D */
    white-space: pre-line;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: left;
    
    /* Better spacing for multi-line content */
    padding: 0;
    
    /* Ensure proper rendering of special characters */
    font-feature-settings: normal;
    text-rendering: optimizeLegibility;
  }
  
  /* === SCROLLBAR CUSTOMIZATION ===== */
  /* Custom styling for scrollbars to match the application theme.
     Provides thin, subtle scrollbars that integrate with the UI
     while maintaining usability for navigating overflowing content. */
  .panel-content::-webkit-scrollbar,
  .table-content::-webkit-scrollbar,
  .chat-messages::-webkit-scrollbar,
  .info-container-wrapper::-webkit-scrollbar,
  .maintenance-history::-webkit-scrollbar,
  .maintenance-list::-webkit-scrollbar {
    width: 8px;
  }
  
  .panel-content::-webkit-scrollbar-track,
  .table-content::-webkit-scrollbar-track,
  .chat-messages::-webkit-scrollbar-track,
  .info-container-wrapper::-webkit-scrollbar-track,
  .maintenance-history::-webkit-scrollbar-track,
  .maintenance-list::-webkit-scrollbar-track {
    background: var(--transparent-black-10);
  }
  
  .panel-content::-webkit-scrollbar-thumb,
  .table-content::-webkit-scrollbar-thumb,
  .chat-messages::-webkit-scrollbar-thumb,
  .info-container-wrapper::-webkit-scrollbar-thumb,
  .maintenance-history::-webkit-scrollbar-thumb,
  .maintenance-list::-webkit-scrollbar-thumb {
    background: var(--transparent-white-20);
    border-radius: 4px;
  }
  
  .panel-content::-webkit-scrollbar-thumb:hover,
  .table-content::-webkit-scrollbar-thumb:hover,
  .chat-messages::-webkit-scrollbar-thumb:hover,
  .info-container-wrapper::-webkit-scrollbar-thumb:hover,
  .maintenance-history::-webkit-scrollbar-thumb:hover,
  .maintenance-list::-webkit-scrollbar-thumb:hover {
    background: var(--transparent-white-30);
  }
  
  /* === ACTION MENU SYSTEM ===== */
  /* Context menu that appears when clicking on a 3D component.
     Provides component-specific actions like explode view, isolate,
     documentation access, and purchase options. Positioned relative
     to the selected 3D model component. */
  .action-menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: var(--z-index-action-menu);
    background-color: transparent;
    width: 320px;
    height: 160px;
  }
  
  /* Action menu buttons positioning */
  #action_close {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }
  
  #explode_button {
    position: absolute;
    left: calc(50% - 100px - 40px);
    top: 50%;
    transform: translateY(-50%);
  }
  
  #isolate_button {
    position: absolute;
    right: calc(50% - 100px - 40px);
    top: 50%;
    transform: translateY(-50%);
  }
  
  #buy_button {
    position: absolute;
    top: calc(50% - 40px - 40px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  #document_button {
    position: absolute;
    bottom: calc(50% - 40px - 40px);
    left: 50%;
    transform: translateX(-50%);
  }
  
  /* === TUTORIAL SYSTEM ===== */
  .tutorial-overlay {
    position: fixed;
    inset: 0;
    background-color: transparent;
    z-index: var(--z-index-tutorial);
    display: none;
    opacity: 0;
    transition: opacity var(--transition-slow);
  }
  
  .tutorial-overlay.fade-in {
    opacity: 1;
  }
  
  .tutorial-step {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 360px;
    z-index: var(--z-index-tutorial);
  }
  
  .tutorial-card {
    background-color: var(--bg-panel);
    border-radius: var(--panel-border-radius);
    padding: 12px; /* Reduced padding from 20px to 12px */
    position: relative;
    box-shadow: var(--shadow-panel);
  }
  
  .tutorial-close {
    position: absolute;
    top: 12px; /* Adjusted to match new padding */
    right: 12px; /* Adjusted to match new padding */
  }
  
  .tutorial-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--text-color-primary);
    gap: 8px; /* Reduced gap from 12px to 8px */
  }
  
  .tutorial-image {
    width: 140px; /* Reduced from 200px */
    height: 60px; /* Reduced from 80px */
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-panel);
  }
  
  .tutorial-image img {
    width: 70%; /* Reduced from 80% */
    filter: brightness(0) invert(1);
  }
  
  .tutorial-content h3 {
    margin-top: 0; /* Reduced from 5px */
    font-size: 16px; /* Added smaller size for the title */
  }
  
  .tutorial-content p {
    color: var(--text-color-secondary);
    margin: 0;
    line-height: 1.3; /* Reduced from 1.5 */
    font-size: 13px; /* Smaller font size */
    margin-bottom: 2px; /* Add a little space between paragraphs */
  }
  
  .tutorial-content strong {
    color: var(--text-color-primary); /* Make Android and iOS text white */
  }
  
  /* Tutorial message styles */
  .tutorial-message {
    position: absolute;
    background-color: var(--bg-panel);
    border-radius: var(--panel-border-radius);
    padding: 20px;
    color: var(--text-color-primary);
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 320px;
    min-height: 150px;
    box-sizing: border-box;
    box-shadow: var(--shadow-panel);
    z-index: var(--z-index-tutorial);
    opacity: 1;
    transition: opacity var(--transition-slow);
  }
  
  .tutorial-message p {
    margin: 0;
    font-size: var(--font-size-normal);
    line-height: var(--line-height-normal);
  }
  
  .tutorial-message .button-container {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
  }
  
  .tutorial-message .tutorial-next,
  .tutorial-message .tutorial-end {
    flex: 1;
    padding: 12px 16px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  
  .tutorial-message .tutorial-next {
    background-color: var(--cta-color);
    color: var(--text-color-black);
  }
  
  .tutorial-message .tutorial-next:hover {
    background-color: var(--cta-color-hover);
  }
  
  .tutorial-message .tutorial-end {
    background-color: var(--bg-panel-item);
    color: var(--text-color-primary);
  }
  
  .tutorial-message .tutorial-end:hover {
    background-color: var(--bg-panel-item-hover);
  }
  
  /* Tutorial buttons */
  .tutorial-buttons {
    margin-top: 2px; /* Reduced from 5px */
    display: flex;
    flex-direction: column;
    gap: 6px; /* Reduced from 8px */
    width: 100%;
  }
  
  .tutorial-buttons .btn {
    width: 100%;
    justify-content: center;
    font-weight: var(--font-weight-bold);
    font-size: calc(var(--font-size-button) + 1px);
    height: 36px; /* Slightly smaller height */
  }
  
  .tutorial-buttons .btn:first-child {
    background-color: var(--cta-color);
    color: var(--text-color-black);
  }
  
  .tutorial-buttons .btn:first-child:hover {
    background-color: var(--cta-color-hover);
  }
  
  .fade-out {
    opacity: 0 !important;
    transition: opacity var(--transition-slow) !important;
  }
  /* Tutorial highlight effect - add this to your CSS file */
  .tutorial-highlight {
    animation: glow 1.5s infinite alternate;
    box-shadow: 0 0 10px var(--cta-color);
    position: relative;
    z-index: var(--z-index-tutorial);
    transition: box-shadow 0.5s ease, border-top 0.5s ease;
  }
  
  /* Class added during fade-out transition */
  .tutorial-highlight-fade {
    animation: none !important;
    box-shadow: 0 0 0 transparent !important;
    border-top-color: var(--transparent-white-10) !important; 
    transition: box-shadow 0.5s ease, border-top-color 0.5s ease !important;
  }
  
  @keyframes glow {
    from {
        box-shadow: 0 0 5px var(--cta-color);
    }
    to {
        box-shadow: 0 0 15px var(--cta-color), 0 0 20px var(--cta-color);
    }
  }
  
  /* === INTERACTION HINTS ===== */
  /* Contextual help system that provides hints about how to interact
     with the 3D model. Appears at key moments to guide user actions
     like clicking on components. Includes fade animations and icons. */
  .interaction-hint {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--z-index-tutorial);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    opacity: 1;
    transition: opacity var(--transition-slow);
    font-family: var(--font-family);
  }
  
  .interaction-hint.fade-out {
    opacity: 0;
  }
  
  .hint-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--panel-gap);
    padding: var(--panel-padding);
    background-color: var(--transparent-white-20);
    border-radius: var(--panel-border-radius);
    color: var(--text-color-primary);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-panel);
  }
  
  .tap-icon {
    width: var(--menu-height);
    height: var(--menu-height);
    filter: var(--icon-filter-cta);
    animation: pulse 1.5s infinite;
  }
  
  .hint-content p {
    color: var(--text-color-black);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-bold);
    margin: 0;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
  }
  
  /* === ANIMATIONS ===== */
  /* Keyframe animations used throughout the UI for subtle motion effects.
     The pulse animation creates attention-drawing effects for interactive elements. */
  
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
  
  /* === UNAVAILABLE POPUP ===== */
  /* Popup message that appears when a feature is unavailable */
  .unavailable-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--bg-panel);  
    color: var(--text-color-primary);
    border-radius: var(--panel-border-radius);
    padding: 8px 12px;
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    text-align: center;
    z-index: var(--z-index-tutorial);
    box-shadow: var(--shadow-popup);
    display: none; /* Hidden by default */
    min-width: 200px;
  }
  
  .unavailable-popup p {
    margin: 0;
    font-size: var(--font-size-normal);
  }

  /* === DASHBOARD LOADING POPUP ===== */
  /* Popup that appears when dashboard requires main assembly to be loaded */
  .dashboard-loading-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--bg-panel);
    color: var(--text-color-primary);
    border-radius: var(--panel-border-radius);
    font-family: var(--font-family);
    z-index: var(--z-index-tutorial);
    box-shadow: var(--shadow-popup);
    display: none; /* Hidden by default */
    min-width: 280px;
    max-width: 320px;
  }

  .popup-content {
    position: relative;
    padding: 50px 20px 20px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .popup-close-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--bg-panel-item);
    width: 30px;
    height: 30px;
    border-radius: var(--panel-item-border-radius);
  }

  .popup-close-btn:hover {
    background-color: var(--bg-panel-item-hover);
  }

  .popup-close-btn img {
    width: 16px;
    height: 16px;
    filter: var(--icon-filter-white);
  }

  .popup-close-btn:hover img {
    filter: var(--icon-filter-cta);
  }

  .dashboard-loading-popup p {
    margin: 0 0 20px 0;
    font-size: var(--font-size-normal);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--text-color-primary);
  }

  .popup-buttons {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .popup-action-btn {
    background-color: var(--bg-panel-item);
    color: var(--text-color-primary);
    border-radius: var(--button-border-radius);
    padding: 8px 16px;
    height: var(--button-height);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color var(--transition-fast);
  }

  .popup-action-btn:hover {
    background-color: var(--bg-panel-item-hover);
  }

  .popup-action-btn img {
    width: 16px;
    height: 16px;
    filter: var(--icon-filter-white);
  }

  .popup-action-btn:hover img {
    filter: var(--icon-filter-cta);
  }

  .popup-action-btn span {
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-medium);
    color: var(--text-color-primary);
  }

  .popup-action-btn:hover span {
    color: var(--cta-color);
  }
  
  /* === RESPONSIVE DESIGN ===== */
  /* Mobile-specific adjustments for smaller screens (under 1024px width).
     These rules modify layout, sizing, and positioning to optimize
     the interface for touch interaction and limited screen real estate. */
  @media screen and (max-width: 1024px) {
    /* Navigation menus */
    #navigation-menu {
      padding: 0 10px;
    }
    
    .nav-left {
      margin-left: 10px;
    }
    
    .nav-right {
      margin-right: 10px;
    }
    
    #function-menu {
      width: 100%;
      bottom: 0;
      left: 0;
      border-radius: 0;
      transform: none;
    }
  
    /* Panel containers */
    .panel-container {
      width: 100%;
      right: 0;
      left: 0;
      transform: none;
      border-radius: 0;
      bottom: 64px;
      top: auto;
    }
  
    /* Panel heights */
    #chatbot-container,
    #dashboard-container {
      height: 50vh;
    }
    
    #procedures-container,
    #procedures-menu-container,
    #documents-SS00-container,
    #extras-container,
    #support-container,
    #info-container,
    #cut-container,
    #video-tutorial-container,
    #parts-SS00-container,
    #parts-SS01-container,
    #parts-SS01-01-container,
    #parts-SS01-02-container,
    #parts-SS01-03-container,
    #parts-SS01-03-01-container,
    #parts-SS03-01-02-container,
    #parts-SS01-04-container,
    #parts-SS01-05-container,
    #parts-SS01-06-container,
    #parts-SS01-07-container,
    #parts-SS01-08-container,
    #parts-SS01-09-container,
    #parts-SS02-container,
    #parts-SS02-01-container,
    #parts-SS03-container,
    #parts-SS03-01-container,
    #parts-SS03-01-01-container,
    #parts-SS03-01-02-container,
    #parts-SS03-01-03-container,
    #parts-SS03-01-04-container,
    #parts-SS04-container {
      height: 25vh;
    }
  
    /* Disable dragging on mobile */
    .panel-header {
      cursor: default;
      padding: 8px 15px;
      padding-top: 15px;
      min-height: 40px;
    }

    /* Chatbot button mobile positioning */
    .chatbot-floating-btn {
      bottom: 84px; /* Position above bottom function menu */
      right: 20px;
      width: 50px;
      height: 50px;
    }



    .chatbot-floating-btn img {
      width: 24px;
      height: 24px;
    }
  
    /* Remove border radius from panel components */
    .panel-item, 
    .table-row td, 
    .extras-row td, 
    .part-item, .part-item_active,
    .procedure-step,
    .info-section,
    .panel-controls,
    .indicator-container,
    .indicator-level,
    .video-wrapper iframe,
    .panel-image,
    .chatbot-message {
      border-radius: 0;
    }
  
    /* Action Menu Mobile Layout */
    .action-menu {
      position: fixed;
      top: var(--menu-height);
      left: 0;
      width: 100%;
      height: var(--menu-height);
      transform: none;
      background-color: var(--bg-menu);
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-top: 1px solid var(--transparent-white-10);
      z-index: 1000;
    }
  
    /* Reset action menu button positions */
    #explode_button,
    #isolate_button,
    #buy_button,
    #document_button,
    #action_close {
      position: static;
      transform: none;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: transparent;
      box-shadow: none;
      border-radius: 0;
    }
  
    /* Mobile action menu styling */
    .action-menu .action-item {
      background-color: transparent;
      color: var(--text-color-primary);
      padding: var(--button-padding);
      height: auto;
      box-shadow: none;
    }
  
    .action-menu .action-item.btn-pill {
      border-radius: 0;
    }
  
    .action-menu .action-item img {
      margin-right: 0;
      margin-bottom: 4px;
      width: var(--icon-size-menu);
      height: var(--icon-size-menu);
    }
  
    .action-menu .action-item::after {
      content: attr(data-action);
      font-size: var(--font-size-button);
      color: var(--text-color-primary);
      text-transform: capitalize;
      display: block;
      margin-top: 4px;
    }
  
    #action_close::after {
      content: "Close";
    }
  
        /* Inactive state for mobile action menu buttons */
    .action-menu .action-item.inactive {
      color: var(--text-color-secondary);
      cursor: default;
      opacity: 0.6;
    }

    .action-menu .action-item.inactive img {
      filter: var(--icon-filter-gray);
    }

    .action-menu .action-item.inactive::after {
      color: var(--text-color-secondary);
    }

    .action-menu .action-item.inactive:hover {
      color: var(--text-color-secondary);
    }

    /* Active state for mobile action menu buttons */
    .action-menu .action-item.active::after {
      color: var(--cta-color);
    }
  
    .action-menu .action-item.inactive:hover img {
      filter: var(--icon-filter-gray);
    }
  
    .action-menu .action-item.inactive:hover .button-text {
      color: var(--text-color-secondary);
    }
  
    /* Update enabled button hover states to exclude inactive buttons */
    .action-menu .action-item:not(.inactive):hover,
    .action-menu .action-item:not(.inactive).active {
      color: var(--text-color-primary);
    }
  
    .action-menu .action-item:not(.inactive):hover img,
    .action-menu .action-item:not(.inactive).active img {
      filter: var(--icon-filter-cta);
    }
  
        .action-menu .action-item:not(.inactive):hover .button-text,
    .action-menu .action-item:not(.inactive).active .button-text {
      color: var(--cta-color);
    }

    /* Hide HTML button text on mobile - let CSS ::after handle text display */
    .action-menu .action-item.btn-pill .button-text {
      display: none;
    }

    /* Special handling for highlight effect on mobile action menu */
    .action-menu.tutorial-highlight {
      box-shadow: 0 0 15px var(--cta-color), 0 0 15px var(--cta-color);
      border-top: 1px solid var(--cta-color);
      z-index: var(--z-index-tutorial);
      transition: box-shadow 0.5s ease, border-top-color 0.5s ease;
    }
    
    /* Handle fade-out transition specifically for mobile menu */
    .action-menu.tutorial-highlight.tutorial-highlight-fade {
      box-shadow: none;
      border-top-color: var(--transparent-white-10);
    }
  
    /* Tutorial mobile adjustments */
    .tutorial-step {
      width: 90%;
      max-width: 360px;
    }
  
    .tutorial-message {
      max-width: calc(100% - 40px);
      left: 50%;
      transform: translateX(-50%);
      right: auto;
    }
  
    .tutorial-message.mobile-hint {
      bottom: 100px;
      top: auto;
    }
  
    .tutorial-message .button-container {
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
    }
  
    .tutorial-next, 
    .tutorial-end {
      margin: 0;
      width: 48%;
      min-width: auto;
    }
  }
  
  /* Landscape mode for mobile devices */
  @media screen and (max-width: 1024px) and (orientation: landscape) {
    /* Function menu positioning - vertical column on the right side */
    #function-menu {
      width: auto;
      height: calc(100% - var(--menu-height)); /* Reduce height to not overlap with nav menu */
      bottom: 0;
      top: var(--menu-height); /* Position it below the navigation menu */
      left: auto;
      right: 0;
      flex-direction: column;
      justify-content: flex-start; /* Change to flex-start instead of center */
      border-radius: 0;
      padding: 0; /* Remove vertical padding */
      gap: 0; /* Remove gap between items - will control with padding */
      overflow-y: auto; /* Enable scrolling if needed */
    }
    
    /* Adjust menu items for vertical layout */
    #function-menu .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 5px; /* Consistent padding for all screen sizes */
      margin: 0; /* Ensure no margins */
      height: auto; /* Let content determine height */
    }
    
    #function-menu .menu-item img {
      margin-bottom: 2px; /* Reduce space between icon and text */
    }
    
    #function-menu .menu-item::after {
      font-size: calc(var(--font-size-button) - 1px);
      margin-top: 2px;
      white-space: nowrap; /* Prevent text wrapping */
    }
    
    
    /* Panel positioning for landscape mode */
    .panel-container {
      width: 33%; /* 1/3 of the screen width */
      height: calc(100% - var(--menu-height)); /* Full height minus nav menu */
      left: 0;
      bottom: 0;
      top: var(--menu-height);
      border-radius: 0;
    }
    
    /* Reset panel heights for consistency in landscape */
    #chatbot-container,
    #dashboard-container,
    #procedures-container,
    #procedures-menu-container,
    #documents-SS00-container,
    #extras-container,
    #support-container,
    #info-container,
    #cut-container,
    #video-tutorial-container,
    #parts-SS00-container,
    #parts-SS01-container,
    #parts-SS01-01-container,
    #parts-SS01-02-container,
    #parts-SS01-03-container,
    #parts-SS01-03-01-container,
    #parts-SS03-01-02-container,
    #parts-SS01-04-container,
    #parts-SS01-05-container,
    #parts-SS01-06-container,
    #parts-SS01-07-container,
    #parts-SS01-08-container,
    #parts-SS01-09-container,
    #parts-SS02-container,
    #parts-SS02-01-container,
    #parts-SS03-container,
    #parts-SS03-01-container,
    #parts-SS03-01-01-container,
    #parts-SS03-01-02-container,
    #parts-SS03-01-03-container,
    #parts-SS03-01-04-container,
    #parts-SS04-container {
      height: calc(100% - var(--menu-height));
    }
    
    /* Canvas adjustments for landscape mode */
    .v3d-container.panel-open,
    .v3d-container.panel-open.large-container,
    .v3d-container.panel-open.small-container {
      height: 100% !important; /* Override the height from portrait mode */
      width: calc(100% - 33% - var(--menu-height)) !important; /* Account for panel width and function menu */
      left: 33% !important;
      right: var(--menu-height) !important;
    }
    
    /* Action menu positioning for landscape mode */
    .action-menu {
      position: fixed;
      width: auto;
      height: calc(100% - var(--menu-height));
      top: var(--menu-height);
      bottom: 0;
      left: auto;
      right: var(--menu-height);
      transform: none;
      background-color: var(--bg-menu);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      border-right: 1px solid var(--transparent-white-10);
      border-left: 1px solid var(--transparent-white-10);
      z-index: var(--z-index-action-menu);
    }
    
    /* Reset all action buttons positions for landscape layout */
    #explode_button,
    #isolate_button,
    #buy_button,
    #document_button,
    #action_close {
      position: static;
      transform: none;
      width: auto;
      margin: 0;
      padding: 8px 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: transparent;
      border-radius: 0;
    }
    
    /* Style the action menu items like function menu items */
    .action-menu .action-item {
      background-color: transparent;
      box-shadow: none;
    }
    
    .action-menu .action-item.btn-pill {
      border-radius: 0;
      height: auto;
      padding: 8px 5px;
    }
    
    .action-menu .action-item img {
      margin-right: 0;
      margin-bottom: 2px;
      width: var(--icon-size-menu);
      height: var(--icon-size-menu);
    }
    
    .action-menu .action-item::after {
      content: attr(data-action);
      font-size: calc(var(--font-size-button) - 1px);
      color: var(--text-color-primary);
      text-transform: capitalize;
      display: block;
      margin-top: 2px;
      white-space: nowrap;
    }
    
    #action_close::after {
      content: "Close";
    }
    
    /* Inactive state for mobile action menu buttons */
    .action-menu .action-item.inactive {
      color: var(--text-color-secondary);
      cursor: default;
      opacity: 0.6;
    }
  
    .action-menu .action-item.inactive img {
      filter: var(--icon-filter-gray);
    }
  
    .action-menu .action-item.inactive::after {
      color: var(--text-color-secondary);
    }
  
    .action-menu .action-item.inactive:hover {
      color: var(--text-color-secondary);
    }
  
    .action-menu .action-item.inactive:hover img {
      filter: var(--icon-filter-gray);
    }
  
    .action-menu .action-item.inactive:hover::after {
      color: var(--text-color-secondary);
    }
  
    /* Update enabled button hover states to exclude inactive buttons */
    .action-menu .action-item:not(.inactive):hover,
    .action-menu .action-item:not(.inactive).active {
      color: var(--text-color-primary);
    }
  
    .action-menu .action-item:not(.inactive):hover img,
    .action-menu .action-item:not(.inactive).active img {
      filter: var(--icon-filter-cta);
    }
  
    .action-menu .action-item:not(.inactive):hover::after,
    .action-menu .action-item:not(.inactive).active::after {
      color: var(--cta-color);
    }
  
    .action-menu .action-item.btn-pill .button-text {
      display: none;
    }
    
    /* Adjust tutorial and hints for landscape mode */
    .tutorial-message.mobile-hint {
      bottom: 20px;
      right: calc(var(--menu-height) + 10px);
      left: auto;
      transform: none;
    }
    
    /* Chatbot button positioning in landscape mode */
    .chatbot-floating-btn {
      bottom: 20px;
      right: calc(var(--menu-height) + 20px); /* Position left of function menu */
    }
    
    /* Ensure scrolling works properly in landscape mode panels */
    .panel-content, 
    .table-content, 
    .chat-content {
      overflow-y: auto;
      max-height: calc(100% - 60px); /* 60px accounts for header height */
    }


  }
  
  /* Canvas container when no panels are open in landscape */
  @media screen and (max-width: 1024px) and (orientation: landscape) {
    #v3d-container:not(.panel-open) {
      width: calc(100% - var(--menu-height)) !important;
      right: var(--menu-height) !important;
      left: 0 !important;
    }
  }
  
  /* iPhone SE and very small devices */
  @media screen and (max-width: 375px) and (max-height: 667px) {
    /* App title - make it fit on small screen */
    #app-title {
      font-size: 16px;
      white-space: nowrap;
      overflow: visible;
    }
    
    /* Tighter spacing in header */
    .nav-left {
      margin-left: 5px;
    }
    
    .nav-right {
      margin-right: 5px;
      gap: 10px;
    }
    
    /* Fix bottom menu text for narrow screens */
    #function-menu {
      padding: 0 8px;
    }
    
    #function-menu .menu-item {
      padding: 8px 2px;
    }
    
    #function-menu .menu-item::after {
      font-size: 11px;
      white-space: nowrap; 
      font-weight: var(--font-weight-semibold);
    }
    
    /* Smaller buttons */
    .btn-circle {
      width: 36px;
      height: 36px;
    }
  
        /* Use same panel heights as standard mobile view for consistency */
    #chatbot-container,
    #dashboard-container{
      height: 50vh; 
    }

    #procedures-container,
    #procedures-menu-container,
    #documents-SS00-container,
    #extras-container,
    #support-container,
    #info-container,
    #cut-container,
    #video-tutorial-container,
    #parts-SS00-container,
    #parts-SS01-container,
    #parts-SS01-01-container,
    #parts-SS01-02-container,
    #parts-SS01-03-container,
    #parts-SS01-03-01-container,
    #parts-SS03-01-02-container,
    #parts-SS01-04-container,
    #parts-SS01-05-container,
    #parts-SS01-06-container,
    #parts-SS01-07-container,
    #parts-SS01-08-container,
    #parts-SS01-09-container,
    #parts-SS02-container,
    #parts-SS02-01-container,
    #parts-SS03-container,
    #parts-SS03-01-container,
    #parts-SS03-01-01-container,
    #parts-SS03-01-02-container,
    #parts-SS03-01-03-container,
    #parts-SS03-01-04-container,
    #parts-SS04-container {
      height:25vh;
    }

    /* Chatbot button adjustments for very small screens */
    .chatbot-floating-btn {
      width: 44px;
      height: 44px;
      bottom: 74px; /* Slightly higher to account for smaller menu */
      right: 15px;
    }

    .chatbot-floating-btn img {
      width: 20px;
      height: 20px;
    }
    
    /* Dashboard gauge adjustments for very small screens */
    .dashboard-gauges-grid {
      padding: 0 2px;
      gap: 6px;
    }
    
    .gauge-container {
      max-width: 120px;
      min-height: 90px;
    }
    
    .dashboard-gauge {
      width: 80px;
      height: 55px;
    }
    
    /* Landscape mode specific adjustments for very small devices */
    @media (orientation: landscape) {
      #function-menu {
        padding: 0; /* Remove padding completely */
        justify-content: center; /* Ensure vertical centering */
        gap: 0; /* Minimize gap for space efficiency */
      }
      
      #function-menu .menu-item {
        padding: 4px 2px; /* Minimum padding for small screens */
        min-height: 50px; /* Ensure minimum height for touch targets */
      }
      
      #function-menu .menu-item img {
        width: 24px; /* Smaller icons */
        height: 24px;
      }
      
      #function-menu .menu-item::after {
        font-size: 9px; /* Smaller text */
        margin-top: 1px;
      }
      
      .panel-container {
        width: 40%; /* Slightly wider panel for very small screens */
      }
      
      .v3d-container.panel-open,
      .v3d-container.panel-open.large-container,
      .v3d-container.panel-open.small-container {
        width: calc(100% - 40% - var(--menu-height)) !important;
        left: 40% !important;
      }


    }
  }
  
  /* Tablets and small desktops */
  @media screen and (min-width: calc(var(--breakpoint-md) + 1px)) and (max-width: var(--breakpoint-lg)) {
    .panel-container {
      width: 360px;
      height: 60vh;
    }
    
    /* Center panels better on tablets */
    #chatbot-container,
    #dashboard-container,
    #procedures-container,
    #procedures-menu-container,
    #documents-SS00-container,
    #parts-SS00-container,
    #parts-SS01-container,
    #parts-SS01-01-container,
    #parts-SS01-02-container,
    #parts-SS01-03-container,
    #parts-SS01-03-01-container,
    #parts-SS03-01-02-container,
    #parts-SS01-04-container,
    #parts-SS01-05-container,
    #parts-SS01-06-container,
    #parts-SS01-07-container,
    #parts-SS01-08-container,
    #parts-SS01-09-container,
    #parts-SS02-container,
    #parts-SS02-01-container,
    #parts-SS03-container,
    #parts-SS03-01-container,
    #parts-SS03-01-01-container,
    #parts-SS03-01-02-container,
    #parts-SS03-01-03-container,
    #parts-SS03-01-04-container,
    #parts-SS04-container,
    #extras-container,
    #support-container,
    #info-container,
    #cut-container,
    #chatbot-container,
    #video-tutorial-container {
      right: 50%;
      transform: translateX(50%) translateY(-50%);
    }
  }
  
  /* Large desktops - optimize for larger screens */
  @media screen and (min-width: var(--breakpoint-xl)) {
    :root {
      /* Slightly larger elements for high-resolution displays */
      --panel-width: 420px;
      --panel-height: 720px;
      --font-size-normal: 16px;
      --font-size-title: 20px;
    }
    
    .panel-container {
      right: 5%;
    }
    
    /* Larger, more spaced elements */
    .panel-padding {
      padding: 18px;
    }
    
    .indicator-container {
      height: 10px;
    }
    
    /* Prevent panels from getting too small relative to screen */
    #function-menu {
      width: 480px;
      height: 70px;
    }
    
    .btn-circle {
      width: 44px;
      height: 44px;
    }
  }