/* You can add global styles to this file, and also import other style files */

/* Import Material Design 3 Systems */
@use './styles/typography'; /* Typography system - must be first */
@use './styles/motion'; /* Motion system - animations and transitions */
@use './styles/state-layers'; /* State layer system - interactive states */
@use './styles/surface-elevation'; /* Surface and elevation system */
@use './styles/responsive'; /* Responsive system - adaptive layouts */
@import './styles/material-grid.css';
@import './styles/m3-color-system.css';

html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--md-sys-typescale-font-family-plain);
}

/* Material Dialog overrides to prevent horizontal scrolling */
.mat-mdc-dialog-container {
  overflow-x: hidden !important;
}

.mat-mdc-dialog-surface {
  overflow-x: hidden !important;
}

/* Custom dialog container for tools modal */
.custom-dialog-container .mat-mdc-dialog-surface {
  overflow-x: hidden !important;
}

/* Custom dialog container for prompt selection */
.prompt-selection-dialog-container .mat-mdc-dialog-surface {
  overflow-x: hidden !important;
  padding: 24px;
}

.prompt-selection-dialog-container .mat-mdc-dialog-container {
  overflow-x: hidden !important;
}

.mat-drawer-backdrop {
  background-color: transparent !important; /* Hidden by default */
}

.mat-drawer-backdrop.mat-drawer-shown {
  background-color: rgba(0, 0, 0, 0.32) !important; /* Only when open */
  opacity: 1 !important;
}

/* Dark mode backdrop */
@media (prefers-color-scheme: dark) {
  .mat-drawer-backdrop.mat-drawer-shown {
    background-color: rgba(0, 0, 0, 0.6) !important;
  }
}

/* Ensure chatbox area is never affected */
.chatbox {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: var(--md-spacing-16);
  padding: var(--md-layout-margin);
  width: min(90%, 1200px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  z-index: 1; /* Lower than panels but visible */
  gap: var(--md-spacing-2);
  background-color: transparent; /* No background interference */
}