/* ============================================================
   Graphico Pro — responsive.css (Fixed Sidebar Toggle)
   Mobile‑first, touch‑optimised, with smooth breakpoints.
   ============================================================ */

/* --------------------------------------------
   Base (Mobile < 640px)
   -------------------------------------------- */

/* Sidebar closed by default on small screens */
#sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  width: min(16rem, 85vw);
  max-width: 16rem;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.22, 0.68, 0, 1.2),
              box-shadow 0.3s cubic-bezier(0.22, 0.68, 0, 1.2);
  will-change: transform;
}

/* Open states – support both .is-open and .translate-x-0 (used by JS) */
#sidebar.is-open,
#sidebar.translate-x-0 {
  transform: translateX(0) !important; /* override all other transforms */
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

/* Backdrop for overlay */
#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 30;
}

#sidebar-backdrop.is-visible {
  display: block;
}

/* Panel spacing */
#panel-chat {
  padding: 0.75rem;
}

#panel-projects,
#panel-data {
  padding: 1rem;
}

#project-grid {
  grid-template-columns: 1fr;
}

#image-results {
  grid-template-columns: repeat(2, 1fr);
}

#data-stats {
  grid-template-columns: repeat(2, 1fr);
}

.chat-message {
  max-width: 92%;
}

.header-right .user-meta {
  display: none;
}

#panel-title {
  font-size: 1rem;
}

/* Touch targets (mobile) */
button,
.btn,
[role="button"],
.sidebar-nav__item,
#send-chat-btn,
#voice-input-btn,
#logout-btn,
#new-project-btn,
#data-refresh-btn,
#data-file-delete-btn {
  min-height: 44px;
  min-width: 44px;
}

input,
select,
textarea {
  font-size: 16px; /* Prevents iOS zoom */
}

/* --------------------------------------------
   sm — 640px+ (Mobile Landscape)
   -------------------------------------------- */
@media (min-width: 640px) {
  #panel-chat {
    padding: 1rem;
  }

  #project-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .header-right .user-meta {
    display: flex;
  }

  #panel-title {
    font-size: 1.1rem;
  }
}

/* --------------------------------------------
   md — 768px+ (Tablet) – Sidebar becomes static
   -------------------------------------------- */
@media (min-width: 768px) {
  #sidebar {
    position: static !important;
    transform: none !important;
    display: flex;
    flex-shrink: 0;
    width: 16rem;
    max-width: none;
    box-shadow: none !important;
    backdrop-filter: none !important;
    background: var(--color-surface, #17181C);
    transition: none !important;
    will-change: auto;
  }

  #sidebar-backdrop {
    display: none !important;
  }

  #sidebar-toggle-btn {
    display: none;
  }

  #panel-chat {
    padding: 2rem 2rem 0;
  }

  #panel-projects,
  #panel-data {
    padding: 2rem;
  }

  #image-results {
    grid-template-columns: repeat(3, 1fr);
  }

  #data-stats {
    grid-template-columns: repeat(4, 1fr);
  }

  .chat-message {
    max-width: 78%;
  }

  #panel-title {
    font-size: 1.25rem;
  }
}

/* --------------------------------------------
   lg — 1024px+ (Small Desktop)
   -------------------------------------------- */
@media (min-width: 1024px) {
  #project-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .chat-message {
    max-width: 70%;
  }

  .main-content {
    max-width: 72rem;
    margin: 0 auto;
  }
}

/* --------------------------------------------
   xl — 1280px+ (Desktop)
   -------------------------------------------- */
@media (min-width: 1280px) {
  #project-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  #data-stats {
    grid-template-columns: repeat(4, 1fr);
  }

  .chat-message {
    max-width: 62%;
  }
}

/* --------------------------------------------
   2xl — 1536px+ (Large Desktop)
   -------------------------------------------- */
@media (min-width: 1536px) {
  #project-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .chat-message {
    max-width: 55%;
  }

  #panel-chat {
    padding: 2.5rem 3rem 0;
  }

  #panel-projects,
  #panel-data {
    padding: 2.5rem 3rem;
  }
}

/* --------------------------------------------
   Print Styles
   -------------------------------------------- */
@media print {
  #sidebar,
  #app-header,
  #chat-form,
  #sidebar-backdrop,
  #loading-bar,
  #toast-container {
    display: none !important;
  }

  #main-content {
    overflow: visible;
    padding: 0;
  }

  body {
    background: white;
    color: black;
  }

  .chat-message {
    max-width: 100%;
    border: 1px solid #ccc;
    margin-bottom: 8px;
    page-break-inside: avoid;
  }
}

/* --------------------------------------------
   Touch Device Optimisations
   -------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .hover-lift:hover {
    transform: none;
  }

  .hover-scale:hover {
    transform: none;
  }

  button,
  .btn,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* --------------------------------------------
   High Contrast / Forced Colors
   -------------------------------------------- */
@media (forced-colors: active) {
  .border-hairline {
    border-color: ButtonText;
  }

  .bg-brass {
    background-color: Highlight;
    color: HighlightText;
  }
}

/* --------------------------------------------
   Additional overflow protection
   -------------------------------------------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

#view-dashboard {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.main-column,
#main-content {
  min-width: 0;
  max-width: 100%;
}

/* Landscape phones */
@media (max-width: 900px) and (orientation: landscape) {
  #panel-chat {
    height: calc(100dvh - var(--header-height, 4rem));
  }

  #chat-history {
    min-height: 6rem;
  }
}

/* Large monitors */
@media (min-width: 1600px) {
  #panel-projects,
  #panel-data {
    max-width: var(--content-max-w, 72rem);
    margin-inline: auto;
  }
}

/* Dialogs */
#new-project-dialog,
dialog {
  max-width: min(28rem, calc(100vw - 1.5rem));
}

@media (max-width: 420px) {
  #new-project-dialog form,
  dialog form {
    max-height: min(85dvh, 85vh);
    overflow-y: auto;
  }
}

/* Image gallery */
#image-results img,
.image-result-img {
  max-width: 100%;
  height: auto;
}

/* Data dropzone */
#data-dropzone {
  max-width: 100%;
}

/* Scroll containers */
#data-table-container,
.overflow-x-auto {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Attachments on mobile */
@media (max-width: 767px) {
  #chat-attach-btn {
    min-height: 44px;
    min-width: 44px;
    height: 2.75rem;
    width: 2.75rem;
  }

  .chat-attachment-chip {
    max-width: 100%;
  }

  .chat-attachment-name {
    max-width: min(10rem, 42vw);
  }

  .chat-attachment-remove {
    min-height: 32px;
    min-width: 32px;
    height: 2rem;
    width: 2rem;
  }

  #chat-attachments-preview {
    max-height: 7.5rem;
  }
}

/* Toast full-width on mobile */
@media (max-width: 767px) {
  #toast-container {
    left: var(--space-3);
    right: var(--space-3);
    max-width: none;
    width: auto;
  }
}

/* ============================================================
   God-Tier Responsive Layer
   Additive — all rules above remain untouched. This section
   layers fluid typography, safe-areas, container queries and
   fine-grained device support on top of the existing system.
   ============================================================ */

/* --------------------------------------------
   Fluid typography (clamp-based, scales smoothly
   between breakpoints instead of jumping)
   -------------------------------------------- */
#panel-title {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
}

.panel-heading {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
}

.login-heading {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}

/* --------------------------------------------
   Safe-area insets (notched / gesture-bar devices)
   -------------------------------------------- */
#sidebar {
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

#app-header {
  padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
}

#chat-form {
  margin-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
}

#toast-container {
  top: max(var(--space-4), env(safe-area-inset-top, 0px));
  right: max(var(--space-4), env(safe-area-inset-right, 0px));
}

@media (max-width: 767px) {
  #toast-container {
    left: max(var(--space-3), env(safe-area-inset-left, 0px));
    right: max(var(--space-3), env(safe-area-inset-right, 0px));
  }
}

/* --------------------------------------------
   Container queries — panels adapt to their own
   width, not just viewport (progressive enhancement)
   -------------------------------------------- */
@supports (container-type: inline-size) {
  #panel-projects,
  #panel-data {
    container-type: inline-size;
    container-name: panel;
  }

  @container panel (max-width: 420px) {
    .panel-header {
      flex-direction: column;
      align-items: stretch;
    }
  }

  @container panel (min-width: 900px) {
    .panel-heading {
      font-size: var(--text-2xl, 1.5rem);
    }
  }
}

/* --------------------------------------------
   Foldables / very narrow phones (< 360px)
   -------------------------------------------- */
@media (max-width: 359px) {
  #panel-chat,
  #panel-projects,
  #panel-data {
    padding-left: var(--space-2, 0.5rem);
    padding-right: var(--space-2, 0.5rem);
  }

  .chat-message {
    max-width: 96%;
  }

  #image-results {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------
   Tablet portrait refinement (768–900px band that
   sits awkwardly between md and lg today)
   -------------------------------------------- */
@media (min-width: 768px) and (max-width: 900px) {
  #project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------
   Ultra-wide (2xl+) — cap chat width for readability
   without altering the existing #panel-chat rules
   -------------------------------------------- */
@media (min-width: 1920px) {
  #chat-history,
  #chat-form {
    max-width: 90rem;
    margin-inline: auto;
    width: 100%;
  }
}

/* --------------------------------------------
   Fine pointer refinement — restore hover richness
   only for devices that truly support it, avoiding
   sticky-hover states on touch (extends existing
   touch-device block above, does not override it)
   -------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .project-card,
  .sidebar-nav__item,
  #data-stats .stat-card {
    transition-duration: 220ms;
  }
}

/* --------------------------------------------
   Print — refine further (keeps existing print
   rules above intact, adds link/url visibility)
   -------------------------------------------- */
@media print {
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #555;
  }

  .message-content pre,
  .message-content code {
    white-space: pre-wrap;
    word-break: break-word;
  }
}

/* --------------------------------------------
   Dynamic viewport height helper for mobile browser
   chrome show/hide (Safari/Chrome address bar)
   -------------------------------------------- */
@supports (height: 100dvh) {
  #view-login {
    min-height: 100dvh;
  }
}

/* --------------------------------------------
   Orientation change smoothing — avoid layout snap
   -------------------------------------------- */
#sidebar,
#panel-chat {
  transition-property: transform, box-shadow, height;
}