/* 
 * DTA_RoboVac.css
 * Main stylesheet for the RoboVac 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;
  --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 RoboVac 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%;
}

.v3d-simple-preloader-logo {
    background-image: url('media/robovac.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 dashboard, 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);
}

/* Hover and active states */
.action-item.btn-pill:hover,
.action-item.btn-pill.active {
  color: var(--cta-color);
}

.action-item.btn-pill:hover img,
.action-item.btn-pill.active img {
  filter: var(--icon-filter-cta);
}

.action-item.btn-pill:hover .button-text,
.action-item.btn-pill.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;
}

/* ===== PANEL COMPONENT SYSTEM ===== */
/* Panel containers form the main content areas of the application.
   Each panel represents a different functional section like dashboard,
   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 {
  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 {
  right: var(--panel-padding);
}

.panel-close-btn:hover, 
.panel-collapse-btn:hover, 
#cart-purchase:hover {
  background-color: var(--bg-panel-item-hover);
}

/* === 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;
}

/* === Dashboard-specific styles === */
.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);
}

/* No hover effect on dashboard items to match the second image */
#dashboard-container .panel-item {
  cursor: default;
}

#dashboard-container .panel-item:hover {
  background-color: var(--bg-panel-item);
}

/* Adjust spacing for label-value pairs */
#dashboard-container .panel-row .panel-label,
#dashboard-container .panel-row .panel-title {
  margin-bottom: 0;
}

/* Style for the cleaning status rows */
#dashboard-container .panel-item h3.panel-title {
  margin-bottom: 8px;
}

/* Panel item that contains next service needs special styling */
#dashboard-container .panel-item .next-service .panel-label {
  font-weight: var(--font-weight-bold);
}

/* === 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-semibold);
  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);
}

/* === 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: 20px;
  height: 20px;
}

/* === DASHBOARD STATUS COMPONENTS ===== */
/* Specialized components for the dashboard panel that display
   cleaning status, next service reminders, and other vacuum metrics.
   These use consistent styling but with specific layout adjustments. */
.cleaning-status {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cleaning-status .panel-row {
  justify-content: flex-start;
}

.cleaning-status .panel-label {
  min-width: 120px;
}

.cleaning-status .panel-value {
  font-weight: var(--font-weight-regular);
  margin-left: 0;
}

.next-service {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.next-service .panel-label {
  font-weight: var(--font-weight-medium);
}

.panel-item .next-service h3.panel-title {
  margin-bottom: 0;
}

/* === 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-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 {
  font-size: var(--font-size-normal);
  color: var(--text-color-primary);
  line-height: var(--line-height-normal);
  margin: 0;
}

/* === 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 {
  width: 8px;
}

.panel-content::-webkit-scrollbar-track,
.table-content::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track,
.info-container-wrapper::-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 {
  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 {
  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;
}

.tutorial-step {
  position: absolute;
  bottom: 120px;
  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: 20px;
  position: relative;
  box-shadow: var(--shadow-panel);
}

.tutorial-close {
  position: absolute;
  top: 20px;
  right: 20px;
}

.tutorial-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--text-color-primary);
  gap: 12px;
}

.tutorial-image {
  width: 200px;
  height: 80px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-panel);
}

.tutorial-image img {
  width: 80%;
  filter: brightness(0) invert(1);
}

.tutorial-content h3 {
  margin-top: 5px;
}

.tutorial-content p {
  color: var(--text-color-secondary);
  margin: 0;
  line-height: 1.5;
}

/* 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: 5px;
  display: flex;
  flex-direction: column;
  gap: 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);
}

.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);
}

.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: nowrap;
}

/* === 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);
}

/* === 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 */
  #dashboard-container,
  #chatbot-container {
    height: 50vh;
  }

  #procedures-container,
  #procedures-menu-container,
  #documents-SS00-container,
  #documents-SS00_01-container,
  #extras-container,
  #support-container,
  #info-container,
  #cut-container,
  #video-tutorial-container,
  #parts-SS00-container {
    height: 25vh;
  }

  /* Disable dragging on mobile */
  .panel-header {
    cursor: default;
    padding: 8px 15px;
    padding-top: 15px;
    min-height: 40px;
  }

  /* 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";
  }

  .action-menu .action-item:hover,
  .action-menu .action-item.active {
    color: var(--text-color-primary);
  }

  .action-menu .action-item:hover img,
  .action-menu .action-item.active img {
    filter: var(--icon-filter-cta);
  }

  .action-menu .action-item:hover::after,
  .action-menu .action-item.active::after {
    color: var(--cta-color);
  }

  .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 */
  #dashboard-container,
  #chatbot-container,
  #procedures-container,
  #procedures-menu-container,
  #documents-SS00-container,
  #documents-SS00_01-container,
  #extras-container,
  #support-container,
  #info-container,
  #cut-container,
  #video-tutorial-container,
  #parts-SS00-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";
  }
  
  .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;
  }
  
  /* 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 */
  #dashboard-container,
  #chatbot-container{
    height: 50vh; 
  }

  #procedures-container,
  #procedures-menu-container,
  #documents-SS00-container,
  #documents-SS00_01-container,
  #extras-container,
  #support-container,
  #info-container,
  #cut-container,
  #video-tutorial-container,
  #parts-SS00-container  {
    height:25vh;
  }
  
  /* 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 */
  #dashboard-container,
  #procedures-container,
  #procedures-menu-container,
  #documents-SS00-container,
  #documents-SS00_01-container,
  #parts-SS00-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;
  }
}

#cleaning-map.panel-item {
  height: auto;
  overflow: visible;
  padding-bottom: 15px;
}