/* ============================================================================
   engine-redesign.css — AIDC Platform /app UI/UX polish
   ----------------------------------------------------------------------------
   LOAD ORDER: injected AFTER engine-ux-v1.css (and after chat.html's inline
   <style>), so these rules win by source order. `!important` is used ONLY where
   we must override the base inline <style> in chat.html or an existing injected
   stylesheet that already uses `!important`.

   THEME SAFETY: every rule uses design tokens (var(--border), var(--border2),
   var(--bg2), etc.) or pure geometry (position / size / radius / offsets).
   No dark hex is hardcoded where a token exists, so the page stays correct in
   both DARK (default) and LIGHT (html.light-theme) themes — light-theme remaps
   those tokens in tablet-theme-fix.css.

   SECTIONS
     1. Desktop layout fix — kill the empty-canvas dead space (primary fix)
     2. Topbar declutter — breathing room, divider, uniform icon-button set
     3. Floating-button consolidation — align the bottom-right stack

   SCOPING NOTES (verified against the live DOM/CSS):
     - Mobile compaction lives at  @media (max-width:768px)   -> DO NOT touch
     - Mobile UX overrides live at @media (max-width:600px)   -> DO NOT touch
     - Tablet icon-rail lives at   @media (min-width:601px) and (max-width:1024px)
     - tablet-theme-fix sticky bar  @media (min-width:769px) and (max-width:1199px)
       => this overlaps the desktop range 1025-1199px, so Section 1 uses an
          elevated selector (.main .chat-area .input-area) to win that overlap
          deterministically regardless of stylesheet injection order.
   ========================================================================== */


/* ============================================================================
   1. DESKTOP LAYOUT FIX  (>= 1025px only)
   ----------------------------------------------------------------------------
   ROOT CAUSE: chat.html:140 sets `.input-area{position:fixed; left:220px}`,
   pulling the input bar OUT of .chat-area's flex-column flow. `.msgs{flex:1}`
   then stretches to full height with top-aligned content, leaving a large empty
   dark canvas; the reserved `.msgs{padding-bottom:110px}` band compounds it.

   FIX: return .input-area to normal in-flow flex flow so it sits naturally at
   the bottom of .chat-area (which is flex-direction:column, verified). With
   .msgs{flex:1} + a static, flex-shrink:0 .input-area, the two stack correctly
   and the empty band disappears. Reserved bottom padding drops to a normal gap.

   The elevated selector (.main .chat-area .input-area, specificity 0-3-0) beats
   both the base `.input-area` (0-1-0) and tablet-theme-fix's `.input-area`
   (0-1-0) !important rule, so we win cleanly in the 1025-1199px overlap.
   Mobile (<=600) and tablet (601-1024) positioning is left entirely untouched.
   ========================================================================== */
@media (min-width: 1025px) {
  /* HEIGHT-CHAIN FIX (root cause of the dead space): tablet-theme-fix.css forces
     body{height:-webkit-fill-available !important}, which on DESKTOP Chrome has no
     parent height chain and collapses to CONTENT height instead of the viewport.
     That breaks the flex:1 chain (.main/.chat-area fill only content), so a static
     .input-area sits mid-page with empty space below (short content) or the page
     scrolls and clips the input (tall content, e.g. KB expanded). Force a definite
     viewport height on desktop. `html body` (0-0-2) beats the base `body` !important
     regardless of stylesheet injection order. */
  html body {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
  .main .chat-area .input-area {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
  }
  .main .chat-area .msgs {
    padding-bottom: 20px !important;
  }
}


/* ============================================================================
   2. TOPBAR DECLUTTER  (>= 769px only — never overrides mobile compaction)
   ----------------------------------------------------------------------------
   .topbar-right is packed by 6 scripts (credits pills, Role/persona, export,
   language globe, theme toggle, Account/Logout, cost pill, credit-gate). We add
   breathing room and make the icon-buttons read as one set — SPACING ONLY, no
   functional control is hidden. Gated at >=769px so the mobile (<=768px)
   overflow-scroll compaction in chat.html keeps working.
   ========================================================================== */
@media (min-width: 769px) {

  /* Consistent horizontal rhythm across the whole control cluster. */
  .topbar .topbar-right {
    gap: 10px;
  }

  /* Divider: a touch taller and given real margin so it visually groups the
     control clusters instead of hugging its neighbours. Uses --border2 (the
     slightly stronger token) so it actually reads in both themes. */
  .topbar .topbar-right .tb-divider {
    height: 20px;
    margin: 0 4px;
    background: var(--border2, rgba(255, 255, 255, 0.1));
  }

  /* --- Uniform icon-button set ------------------------------------------
     Normalize the three icon-style controls so they share height + radius +
     alignment and read as a matched set:
       - #aidc-export-btn      (export tray icon; JS-injected inline styles)
       - .ux1-lang-btn         (globe + EN/JP/KR/CN code; stays a pill so its
                                 language code is never clipped — only its
                                 corner radius + height are harmonized)
       - .btn-sm:has(.theme-icon)  (theme toggle; the ONLY .btn-sm that is an
                                 icon — Account/Logout .btn-sm text buttons are
                                 excluded by :has() and keep their pill shape)
     We deliberately do NOT force border-color here: the export button and lang
     button manage their own hover accents (red / green) via JS/their own CSS,
     and overriding with !important would kill those hovers. Radius is safe to
     !important on the export button because its JS hover only touches color. */

  .topbar .ux1-lang-btn {
    height: 32px;
    border-radius: 8px !important;
  }

  .topbar #aidc-export-btn {
    height: 32px;
    border-radius: 8px !important;
  }

  .topbar .btn-sm:has(.theme-icon) {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    line-height: 1;
  }
  .topbar .btn-sm:has(.theme-icon) .theme-icon {
    font-size: 14px;
    line-height: 1;
  }
}


/* ============================================================================
   3. FLOATING-BUTTON CONSOLIDATION  (>= 1025px only — desktop stack)
   ----------------------------------------------------------------------------
   Three scripts drop fixed elements into the bottom-right corner with mismatched
   right offsets (16px vs 20px):
       - .kb-toggle-btn / #aidc-kb-toggle : right:16px bottom:120px (48x48)
       - #aidc-prog-pill                  : right:20px bottom:72px
       - #aidc-bulk-progress              : right:20px bottom:20px (340px panel)

   We align every element to a single right edge (20px) and lock in their
   non-overlapping vertical rhythm (20 / 72 / 120). Only the KB toggle actually
   moves (16 -> 20px); the pill/panel values are restated for clarity. We touch
   ONLY the right/bottom offsets — z-index (901 / 9999 / 99999) is left as-is
   because that ordering (toggle < pill < panel) is a sane layering hierarchy,
   and show/hide logic (display toggling in JS) is untouched.

   Scoped to >=1025px so the mobile offsets (kb right:12/bottom:80,
   prog-pill right:12/bottom:68 at <=768px) are preserved.
   ========================================================================== */
@media (min-width: 1025px) {
  #aidc-kb-toggle,
  .kb-toggle-btn {
    right: 20px !important;
    bottom: 120px !important;
  }
  #aidc-prog-pill {
    right: 20px !important;
    bottom: 72px !important;
  }
  #aidc-bulk-progress {
    right: 20px !important;
    bottom: 20px !important;
  }
}