/* ==========================================================================
   assets/en/workspace-page.css — turns the floating KEVOS chat panel into a
   dedicated full-page chat surface.
                                            (KEVOS Design System v2.0)

   Loaded ONLY by ai/workspace/index.php. Nothing else references it, so it
   cannot affect the floating assistant on any other page.

   ---------------------------------------------------------------------------
   WHAT THIS DOES, AND WHAT IT DELIBERATELY DOES NOT DO
   ---------------------------------------------------------------------------
   The chat itself already works. `assets/kevos-workspace-v2540.js` (284 KB)
   builds the sidebar — "New analysis", Projects, Pinned and the conversation
   history — and handles sending, streaming, pinning, project moves and
   deletion. Every one of those already has a confirm step.

   NONE of that is touched here. This file changes presentation only:

     1. The panel stops being a fixed 430px popup and becomes the page.
     2. The third column (`.en-ws-right`) is hidden — that rail is the main
        source of visual noise on a page whose job is the conversation.
     3. The floating launcher button is hidden, because you are already in
        the chat.

   Reverting is deleting one <link>. The JS, the DB and every endpoint are
   untouched.

   ---------------------------------------------------------------------------
   WHY EVERY RULE CARRIES !important
   ---------------------------------------------------------------------------
   Not laziness. `kevos-workspace-v2540.js` INJECTS ITS OWN STYLESHEET at
   runtime containing rules such as:

       .en-ai-panel.en-ai-maximized{position:fixed!important; ...}

   A runtime-injected <style> lands at the end of the cascade, and those rules
   already use !important. The only way to beat that pair is higher
   specificity plus !important of our own.

   Every selector below is therefore scoped to `body.kevos-chat-page`, which
   raises specificity above the JS rules (0,4,1 vs 0,3,0) while also
   guaranteeing the overrides can never leak onto another page.
   ========================================================================== */


/* ==========================================================================
   1 · THE PANEL BECOMES THE PAGE
   ========================================================================== */

/* ---------------------------------------------------------------------------
   THE PANEL IS A CHILD OF <body>, NOT OF <main>
   ---------------------------------------------------------------------------
   kevos-workspace-v2540.js builds the panel with `document.body.appendChild()`.
   The original CSS made it `position:fixed`, so where it sat in the DOM did
   not matter — it floated above everything.

   An earlier version of this file set `position:static` to make it fill the
   page. That produced a COMPLETELY BLANK PAGE for signed-in users, because a
   static panel falls back into normal flow and lands AFTER <main>, the inline
   <style> and the <script> — below the fold, then clipped by the
   `overflow:hidden` below. The boot shell hides itself as soon as the panel
   exists, so nothing at all was left visible.

   The fix is to lay <body> out as a flex column instead. The panel stays a
   body child and simply becomes the flex item that fills the remaining space.
   This is also immune to header-height drift: nothing hardcodes a header
   offset, so the logo can change size without opening a gap or an overlap.
   --------------------------------------------------------------------------- */

body.kevos-chat-page {
  display: flex;
  flex-direction: column;
  /* dvh, not vh — on mobile Safari the URL bar makes vh taller than the
     visible area, which would push the composer off-screen. */
  min-height: 100dvh;
  /* The chat owns the viewport; the document itself must not scroll. */
  overflow: hidden;
}

/* The site header keeps its normal height and stops being sticky — inside a
   flex column it is simply the first row. */
body.kevos-chat-page > .header {
  flex: 0 0 auto;
  position: static !important;
}

/* <main> holds only the boot shell. It takes its natural height and collapses
   to nothing once the shell hides itself, handing the space to the panel. */
body.kevos-chat-page > main { flex: 0 0 auto; }

/* Signed-out: <main> holds the sign-in card and should fill instead. */
body.kevos-chat-gate > main { flex: 1 1 auto; min-height: 0; }

body.kevos-chat-page .en-ai-panel,
body.kevos-chat-page .en-ai-panel.en-ai-maximized,
body.kevos-chat-page .en-ai-panel.en-ws-ready {
  /* Relative, not static: keeps the panel in flow so flex can size it, while
     still establishing a containing block for anything inside it that the
     bundle positions absolutely. */
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

  flex: 1 1 auto !important;
  min-height: 0 !important;      /* lets inner panes scroll rather than grow */

  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;

  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--bg-page) !important;
  z-index: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* ==========================================================================
   2 · TWO COLUMNS, NOT THREE

   The JS lays the panel out as:
       'head head head'
       'left center right'

   The right rail is removed and its space returned to the conversation.
   ========================================================================== */

body.kevos-chat-page .en-ai-panel.en-ws-ready {
  display: grid !important;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  grid-template-areas:
    'head head'
    'left center' !important;
  overflow: hidden !important;
}

/* The right rail and the floating launcher: both noise on a dedicated page. */
body.kevos-chat-page .en-ws-right,
body.kevos-chat-page .en-ai-fab {
  display: none !important;
}


/* ==========================================================================
   3 · SIDEBAR — New analysis · Projects · Pinned · History

   Structure and content come from the JS. This is spacing, colour and
   scrolling only.
   ========================================================================== */

body.kevos-chat-page .en-ws-left {
  grid-area: left !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;          /* lets the inner list scroll, not grow */
  overflow-y: auto !important;
  overscroll-behavior: contain !important;

  padding: var(--space-4) !important;
  background: var(--surface) !important;
  border-right: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Section labels ("Projects", "Pinned", "Recents"). */
body.kevos-chat-page .en-ws-left h3,
body.kevos-chat-page .en-ws-left h4,
body.kevos-chat-page .en-ws-left .en-ws-section-title {
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin: var(--space-5) 0 var(--space-2) !important;
}

/* Conversation rows. */
body.kevos-chat-page .en-ws-left a,
body.kevos-chat-page .en-ws-left button {
  border-radius: var(--radius-sm) !important;
}

body.kevos-chat-page .en-ws-left a:hover,
body.kevos-chat-page .en-ws-left button:hover {
  background: var(--surface-sunken) !important;
}


/* ==========================================================================
   4 · CONVERSATION COLUMN
   ========================================================================== */

body.kevos-chat-page .en-ws-center,
body.kevos-chat-page .en-ai-panel.en-ws-ready > .en-ws-center {
  grid-area: center !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  background: var(--bg-page) !important;
}

/* The scrolling transcript. min-height:0 is what actually lets a flex child
   scroll instead of stretching its parent. */
body.kevos-chat-page .en-ai-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: var(--space-6) var(--space-5) !important;
  background: transparent !important;
}

/* Centred reading column — a full-width transcript on a 1920px monitor is
   unreadable. */
body.kevos-chat-page .en-ai-body > * {
  max-width: 860px !important;
  margin-inline: auto !important;
}

body.kevos-chat-page .en-ai-msg {
  font-size: var(--text-base) !important;
  line-height: var(--leading-body) !important;
}

/* Composer pinned to the bottom. */
body.kevos-chat-page .en-ai-form {
  flex: 0 0 auto !important;
  padding: var(--space-4) var(--space-5) var(--space-5) !important;
  border-top: 1px solid var(--line) !important;
  background: var(--surface) !important;
}

body.kevos-chat-page .en-ai-form > * {
  max-width: 860px !important;
  margin-inline: auto !important;
}

body.kevos-chat-page .en-ai-note {
  flex: 0 0 auto !important;
  max-width: 860px !important;
  margin-inline: auto !important;
  padding: 0 var(--space-5) var(--space-3) !important;
  font-size: var(--text-xs) !important;
  color: var(--text-muted) !important;
}


/* ==========================================================================
   5 · PANEL HEADER

   The JS renders a close/minimise control, which is meaningless on a
   dedicated page — there is nothing to close back to.
   ========================================================================== */

body.kevos-chat-page .en-ai-head {
  grid-area: head !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--surface) !important;
  border-radius: 0 !important;
}

body.kevos-chat-page .en-ai-close,
body.kevos-chat-page .en-ai-head [data-en-minimize],
body.kevos-chat-page .en-ai-head [data-en-maximize] {
  display: none !important;
}


/* ==========================================================================
   6 · RESPONSIVE

   Below 1080px the sidebar becomes a drawer. This mirrors the breakpoint the
   site header already uses (components.css §1), so the two do not disagree
   about what counts as "mobile".

   The existing workspace.css already implements a drawer at 980px with
   `.en-ws-drawer-open` and a backdrop, and the JS drives it. Those hooks are
   reused rather than replaced — only the breakpoint and the styling change.
   ========================================================================== */

@media (max-width: 1080px) {
  body.kevos-chat-page .en-ai-panel.en-ws-ready {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: 'head' 'center' !important;
  }

  /* ABSOLUTE within the panel, not fixed to the viewport. The panel is
     position:relative (§1), so the drawer pins to the panel's own top edge.
     A fixed drawer offset by a hardcoded --header-h would drift whenever the
     header's real height changed — which it does, because the logo is fluid. */
  body.kevos-chat-page .en-ws-left {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 320px) !important;
    z-index: var(--z-drawer, 300) !important;

    border-right: 1px solid var(--line) !important;
    box-shadow: var(--shadow-md) !important;

    transform: translateX(-100%) !important;
    transition: transform var(--duration-base, 180ms) var(--ease, ease) !important;
  }

  /* `.en-ws-drawer-open` is the existing JS hook — kept, not reinvented. */
  body.kevos-chat-page .en-ws-drawer-open .en-ws-left,
  body.kevos-chat-page.en-ws-drawer-open .en-ws-left {
    transform: translateX(0) !important;
  }

  body.kevos-chat-page .en-ws-menu-btn { display: grid !important; }

  body.kevos-chat-page .en-ai-body,
  body.kevos-chat-page .en-ai-form {
    padding-inline: var(--space-4) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.kevos-chat-page .en-ws-left { transition: none !important; }
}


/* ==========================================================================
   7 · SIGN-IN GATE (signed-out visitors)

   Shown instead of the chat when nobody is signed in. `.kevos-chat-gate` is
   added to <body> only in that state.

   This is a real element in the page, not a JS dialog: present at first
   paint with no flash, works without JavaScript, and cannot be dismissed
   into an unusable empty chat.

   Note §1 sets `overflow:hidden` on body so the chat owns the viewport —
   that is released here, because the gate is a normal scrolling page and a
   short viewport must still be able to reach the button.
   ========================================================================== */

body.kevos-chat-gate { overflow: auto; }

/* <main> is the flexing row (§1), so the gate simply fills it. No hardcoded
   header offset, so nothing drifts if the header height changes. */
body.kevos-chat-gate .kevos-gate {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: var(--space-6) var(--gutter);
}

body.kevos-chat-gate .kevos-gate-card {
  width: min(100%, 560px);
  padding: var(--space-8);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

body.kevos-chat-gate .kevos-gate-card h1 { margin: var(--space-3) 0 var(--space-4); }
body.kevos-chat-gate .kevos-gate-card .lede { font-size: var(--text-base); }

.kevos-gate-points {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  padding: 0;
  list-style: none;
}

.kevos-gate-points li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Tick marker. aria-hidden by virtue of being generated content — screen
   readers announce the list semantics instead. */
.kevos-gate-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--action);
  border-bottom: 2px solid var(--action);
  transform: rotate(-45deg);
}

.kevos-gate-points strong { color: var(--text); }

.kevos-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.kevos-gate-note {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-subtle);
  font-size: var(--text-xs);
  color: var(--text-muted);
}


/* ==========================================================================
   8 · BOOT SHELL

   Shown while the workspace bundle loads, and on failure. Centred rather than
   pinned to the top-left of an empty page.
   ========================================================================== */

body.kevos-chat-page .en-workspace-boot {
  max-width: 620px !important;
  margin: clamp(2rem, 12vh, 7rem) auto !important;
  padding: var(--space-7) !important;
  background: var(--surface-raised) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  color: var(--text) !important;
}

body.kevos-chat-page .en-workspace-boot h1 {
  font-size: var(--text-xl) !important;
  margin-bottom: var(--space-2) !important;
}

body.kevos-chat-page .en-workspace-boot p { color: var(--text-secondary) !important; }

body.kevos-chat-page .en-workspace-boot-detail { color: var(--text-muted) !important; }

body.kevos-chat-page .en-workspace-spinner {
  border-color: var(--line) !important;
  border-top-color: var(--action) !important;
}
