:root {
      color-scheme: dark;
    }

    body {
      background: radial-gradient(circle at top, #1f2937 0, #020617 55%, #000 100%);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    }

    /* Scrollbars */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.6);
      border-radius: 999px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgba(148, 163, 184, 0.9);
    }

    /* Champ de saisie */
    #aria-input {
      resize: none;
      scrollbar-width: thin;
      scrollbar-color: rgba(148, 163, 184, 0.6) transparent;
    }

    /* Animations bulles */
    .message-aria {
      animation: fadeInUp 0.22s ease-out;
    }

    .message-juju {
      animation: fadeInUp 0.22s ease-out;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(6px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Gradient bouton envoyer */
    .btn-send-gradient {
      background-image: linear-gradient(135deg, #14b8a6, #06b6d4);
    }

    .btn-send-gradient:hover {
      filter: brightness(1.05);
      box-shadow: 0 0 18px rgba(45, 212, 191, 0.45);
    }

    /* Mobile drawer */
    .drawer-enter {
      animation: drawerEnter 0.22s ease-out forwards;
    }

    .drawer-leave {
      animation: drawerLeave 0.18s ease-in forwards;
    }

    @keyframes drawerEnter {
      from {
        transform: translateX(-100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes drawerLeave {
      from {
        transform: translateX(0);
        opacity: 1;
      }
      to {
        transform: translateX(-100%);
        opacity: 0;
      }
    }

    /* Vignettes images */
    .image-thumb {
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }

    /* Fix largeur listes de conversations pour éviter le scroll horizontal */
    #conversation-list,
    #conversation-list-mobile {
      min-width: 0;
    }
  
    #menu-chatgpt-logs {
      font-weight: 500;
    }

/* =========================
   Responsive Mobile Fixes
   (flex scroll, dvh, safe-area)
   ========================= */

*{box-sizing:border-box;}
html,body{height:100%;overflow-x:hidden;}

/* Use dynamic viewport height on mobile browsers */
body > div.min-h-screen{
  height:100dvh;
  min-height:100dvh;
}

/* Main must be a flex child that can shrink */
main.flex-1{
  display:flex;
  min-height:0;
}

/* The main inner container currently uses a fixed 100vh calc in HTML.
   Override it so the layout relies on flex sizing (prevents 'empty chat' on mobile). */
main.flex-1 > div.max-w-6xl.mx-auto.flex{
  flex:1;
  min-height:0;
  height:auto !important;
}

/* Chat area column must be allowed to shrink */
#aria-scroll{
  min-height:0;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* Ensure the message container never forces horizontal overflow */
#aria-messages{min-width:0;}

/* iOS/Android keyboard zoom prevention */
@media (max-width: 640px){
  input, textarea{font-size:16px;}
  /* Bigger touch targets */
  button, .btn, [role="button"]{min-height:44px;}
}

/* Safe-area for bottom (composer) */
@supports (padding: max(0px)){
  section.border-t.bg-slate-950\/80{ /* INPUT AREA wrapper */
    padding-bottom: max(0.625rem, env(safe-area-inset-bottom));
  }
}

/* Optional: lock background scroll when drawer is open (JS can toggle this class) */
body.aria-no-scroll{overflow:hidden;}


/* --- Fix overflow horizontal (mobile) --- */
html, body {
  overflow-x: hidden;
}

/* Off-canvas drawers (fixed + translate) can still create a tiny horizontal scroll on some mobiles */
#app, .app, .main {
  overflow-x: hidden;
}

/* Ensure long tokens / URLs don't force layout wider */
#aria-messages, #aria-messages * {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Code/log blocks: keep readable without forcing page width */
#aria-messages pre, #aria-messages code {
  max-width: 100%;
}
#aria-messages pre {
  white-space: pre-wrap;
}


/* =========================
   Mobile width fixes (composer + views)
   ========================= */
@media (max-width: 520px){

  /* Ensure main containers never exceed viewport */
  main, header, section, div { max-width: 100%; }

  /* Views headers: stack + full width back button already handled via HTML classes,
     but keep as CSS safety */
  #doc-memory-view > div:first-child,
  #image-library-view > div:first-child,
  #tech-view .flex.flex-col.sm\:flex-row{
    align-items: flex-start;
  }

  /* --- Composer (bottom bar) --- */
  #aria-composer{
    width: 100%;
    flex-wrap: wrap;
  }

  /* Make textarea full width */
  #aria-input{
    flex: 1 1 100%;
    width: 100%;
  }

  /* Buttons go in 2 columns under textarea */
  #aria-send,
  #aria-generate-image{
    flex: 1 1 calc(50% - 0.25rem);
    width: calc(50% - 0.25rem);
  }

  /* File inputs / action rows in doc-memory: stack */
  #doc-memory-view input[type="file"]{
    width: 100%;
    max-width: 100%;
  }
  #docMemoryUploadBtn{
    width: 100%;
  }

  /* Action rows inside docMemory list: wrap buttons */
  #docMemoryList .flex{
    flex-wrap: wrap;
  }
  #docMemoryList .flex > *{
    min-width: 0;
  }
  #docMemoryList button,
  #docMemoryList a{
    width: 100%;
  }
}


/* =========================
   PRO MOBILE LAYOUT (Tech / Doc memory / Images / Composer)
   ========================= */

/* Hard guard against tiny horizontal scroll (off-canvas / long content) */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* Long tokens, URLs, JSON */
#aria-messages, #aria-messages * ,
#doc-memory-view, #doc-memory-view * ,
#image-library-view, #image-library-view * ,
#tech-view, #tech-view * ,
#facts-dashboard-root, #facts-dashboard-root * {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Facts dashboard tables (if any) should scroll internally instead of expanding page */
#facts-dashboard-root table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#facts-dashboard-root th, #facts-dashboard-root td { white-space: nowrap; }

@media (max-width: 520px) {

  /* ---------- Composer (bottom input) ---------- */
  #aria-composer{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "input input"
      "send  img" !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  #aria-input{
    grid-area: input !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: min(22vh, 160px) !important;
    overflow-y: auto !important;
  }

  #aria-send{
    grid-area: send !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  #aria-generate-image{
    grid-area: img !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /* ---------- Item actions (Doc / Images) ---------- */
  .aria-item-actions{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  /* Make each action fill its cell */
  .aria-item-actions > *{
    width: 100% !important;
    justify-content: center !important;
  }

  /* If there are 3 actions (e.g., open/insert/delete), make delete full width */
  .aria-item-actions--doc > *:nth-child(3),
  .aria-item-actions--img > *:nth-child(3){
    grid-column: 1 / -1 !important;
  }

  /* For image library where "Ouvrir" is a span, keep it button-like */
  .aria-item-actions--img span{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.35rem 0.5rem !important;
    border-radius: 0.75rem !important;
    border: 1px solid rgba(51,65,85,0.8) !important; /* slate-700/80 */
    background: rgba(2,6,23,0.25) !important; /* subtle */
  }

  /* ---------- Cards spacing for tool views ---------- */
  #doc-memory-view .border,
  #image-library-view .border,
  #tech-view .border{
    max-width: 100% !important;
  }

  /* =========================
   MOBILE – Composer confort (v2)
   - textarea visible (2-3 lignes)
   - boutons toujours visibles
   - scroll interne seulement après plusieurs lignes
   ========================= */
@media (max-width: 520px) {

  /* On garantit que le composer ne s'étire pas bizarrement */
  #aria-composer{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "input input"
      "send  img" !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  /* Textarea: confortable mais borné */
  #aria-input{
    grid-area: input !important;

    /* 2-3 lignes visibles, sans manger les boutons */
    min-height: 72px !important;
    max-height: 120px !important;

    overflow-y: auto !important;      /* scroll seulement si ça dépasse max-height */
    line-height: 1.35 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Les boutons restent TOUJOURS visibles */
  #aria-send{
    grid-area: send !important;
    min-height: 44px !important;
    height: 44px !important;
    width: 100% !important;
  }
  #aria-generate-image{
    grid-area: img !important;
    min-height: 44px !important;
    height: 44px !important;
    width: 100% !important;
  }
}



}