/* DEMOUPLINK-11 — the bottom half of the full-page chat's own seam.
   rocketcode/uplink's own resources/js/chat/style.css already squares the TOP seam
   (`.uplink-chat-page .fi-page-header-main-ctn { padding-top: 0 }`) — that rule's own comment
   says plainly "only the TOP seam is in scope, nothing said about the bottom". This file is
   the first thing this panel ever loads of its own: AdminPanelProvider::panel() registers it
   via `->assets([Css::make(...)])` (Filament's own FilamentAsset mechanism, the same one
   rocketcode/uplink itself uses for its `uplink-chat` asset id) rather than a `viteTheme()` —
   there is nothing else this panel needs a Tailwind build step FOR yet, and `->assets()` is
   published by the `filament:upgrade` call already wired into this project's own
   `composer.json` `post-autoload-dump` script, so it needs no new build pipeline of its own.

   Measured on the running app, viewport 1728x997, before this rule existed:
     .fi-main                          top 64  bottom 997  (height 933)
     .uplink-chat-page                 top 64  bottom 933  (height 869 — 64px short of .fi-main)
     the chat root inside it           top 64  bottom 901  (height 837 — 96px short of the
                                                              viewport's own bottom edge)

   App.vue's chat root carries `uplink:h-[calc(100dvh-10rem)]` for the full page. 10rem (160px)
   already folds in one adjustment from an earlier ticket (12rem -> 10rem, the 2rem/32px of
   `.fi-page-header-main-ctn`'s own padding-TOP that rule zeroes) — its own comment says "every
   other, unexplained part of that offset ... is untouched". `.fi-page-header-main-ctn` still
   keeps its 2rem (32px) padding-BOTTOM (deliberately, per the package's own comment above) —
   this file does not touch it, so the chat root still sits 32px above wherever its own box
   ends. For `.uplink-chat-page` (that header spacer plus the chat root) to reach all the way
   to `.fi-main`'s own bottom edge, the chat root itself has to be 32px + 64px (the part the
   10rem constant does not yet account for) taller than it is today: 10rem - 4rem = 6rem.

   `.uplink-chat-page .fi-page-content > div` is the chat root's own parent-scoped selector —
   two classes, specificity (0,2,0) — against the one Tailwind utility class
   `uplink:h-[calc(100dvh-10rem)]` Vue binds directly on that element (0,1,0). This wins on
   specificity alone, regardless of asset load order, so no `!important`. */
/* 🔴 CORRECTED: `.fi-page-content > div` IS NOT THE CHAT ROOT. The comment above
   assumed it was — "the chat root's own parent-scoped selector" — and that assumption is
   wrong, which is why the rule it justified changed a wrapper's height and left the screen
   looking exactly as it did before. Mingle mounts the Vue app through two generated-id
   wrappers (`#mingle-<random>-container` and `#mingle-<random>`), so the element carrying
   `uplink:h-[calc(100dvh-10rem)]` — the one that paints the background and clips with
   `overflow-hidden` — sits THREE levels below `.fi-page-content`, not one.

   Measured on the running app after the first attempt shipped, viewport 1728x997:
     .fi-main                                 bottom 997
     .uplink-chat-page                        bottom 997   (the first attempt fixed this)
     .fi-page-content > div                   bottom 965   (and this)
     the div that actually paints the card    bottom 901   (96px short — unchanged)

   Those ids are regenerated per render, so they cannot be targeted. The chain is
   single-child all the way down, so each wrapper simply inherits its parent's height, and
   the last selector reaches the element Vue binds the utility class on. Four type selectors
   plus two classes still beats that one utility class (0,1,0) on specificity, so there is
   still no `!important` here.

   The 4rem is the topbar, and nothing else: `.fi-page-header-main-ctn`'s own padding-bottom
   is zeroed on the line below rather than subtracted here, so the card closes against the
   bottom edge exactly the way the package's own rule already closes it against the top.

   Verified at 1728x997 and at 1280x800: card bottom equals .fi-main bottom, no dead strip,
   no horizontal page scroll, and the conversation list no longer clips its last row. */
.uplink-chat-page .fi-page-header-main-ctn {
  padding-bottom: 0;
}

.uplink-chat-page .fi-page-content > div {
  height: calc(100dvh - 4rem);
}

.uplink-chat-page .fi-page-content > div > div,
.uplink-chat-page .fi-page-content > div > div > div,
.uplink-chat-page .fi-page-content > div > div > div > div {
  height: 100%;
}


/* The chat takes the width it is given on the right, instead of leaving a gutter there.

   `.fi-main` is a centred max-width container, not a fixed-gutter one: Filament caps it at
   1280px and centres it with `margin: 0 auto`, so the 64px that reads as "a gutter" on each
   side is simply the leftover of that cap. Measured at 1728 wide: `.fi-main-ctn` is 1408
   (the viewport minus the 320px navigation), `.fi-main` 1280, the remaining 128 split two
   ways. On a wider screen those gutters grow; they were never 64.

   That matters for how this is written. Removing only `margin-right` does nothing while the
   cap is in place — the element stays 1280 wide and the space simply moves. And lifting the
   cap alone collapses BOTH sides, because `auto` margins resolve to 0 once there is no
   leftover to distribute. So the cap goes, the left margin is restated explicitly as the
   64px it used to compute to, and the right one goes to 0.

   `width: auto` is load-bearing and not tidiness: `.fi-main` carries `width: 100%`, so with
   the cap gone it would be 1408 wide AND pushed 64px right — 64px past the viewport edge,
   clipped rather than scrolled because the full-page chat sets `overflow: hidden` on
   `html`. Measured that way round first; this is the correction.

   Verified at 1728x997: card left 384 (64px clear of the navigation), right 1728 (flush with
   the window), width 1344, nothing past the edge. */
.fi-main:has(.uplink-chat-page) {
  max-width: none;
  width: auto;
  margin-left: 0;
  margin-right: 0;
}


/* DEMOUPLINK-18 — the collapse toggle lives in the sidebar now, so this only styles it.

   What this replaces: DEMOUPLINK-16 and -17 took Filament’s topbar button and pinned it
   over the sidebar with position:fixed and a hardcoded top offset. It looked right and was
   wrong, and impersonation proved it — the banner moves the layout, a fixed offset does not
   move with it, and the button landed on the brand logo. Operator: "Het menu knopje staat
   dus niet goed binnen het menu div gezet."

   app/Providers/Filament/AdminPanelProvider.php now renders
   resources/views/filament/sidebar-collapse-toggle.blade.php through
   PanelsRenderHook::SIDEBAR_NAV_START, which is inside <nav class="fi-sidebar-nav">. It
   flows there like any other item, so there is no position, no offset and nothing to keep
   in sync. Filament’s own topbar button is hidden rather than left as a second control.

   The three bars are drawn on ::before: one 16x2 bar plus two box-shadows at ±5px. CSS
   cannot rewrite an SVG path, and this needs no asset. Colours come from the panel’s own
   --gray-*/--primary-* custom properties, which RocketCodePanelTheme fills, so the button
   follows the house style by construction in both themes.

   Collapsed shortens the middle bar — "there is more here than you can see". Hover widens
   all three over 180ms; :active scales the button. Measured in the browser at 2056 wide,
   normally and while impersonating, expanded and collapsed, light and dark. */
@media (min-width: 1024px) {
  .fi-topbar-collapse-sidebar-btn-ctn {
    display: none;
  }

  .rc-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    /* Lines the button up with the navigation items rather than with the nav box.
       Measured: .fi-sidebar-nav carries padding-left 24px and the .fi-sidebar-nav-groups
       list inside it carries margin: 0 -8px, so every item lands at x=16. This button is a
       sibling of that list, not a child, so without the same -8px it sat at x=26 — the
       operator spotted it immediately: "Waarom staan de andere menu items goed maar het
       knopje niet." No bottom margin: the nav is a flex column with gap: 28px, and adding
       one on top of that was the extra space he also saw. */
    margin-left: -0.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.625rem;
    background-color: #fff;
    color: var(--gray-600);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
    transition:
      background-color 120ms ease,
      border-color 120ms ease,
      color 120ms ease;
  }

  .rc-sidebar-toggle:hover {
    border-color: var(--primary-200);
    background-color: var(--primary-50);
    color: var(--primary-600);
  }

  .rc-sidebar-toggle:active {
    transform: scale(0.93);
  }

  .rc-sidebar-toggle::before {
    content: '';
    display: block;
    width: 1rem;
    height: 2px;
    border-radius: 1px;
    background-color: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
    transition:
      width 180ms cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .rc-sidebar-toggle:hover::before {
    width: 1.125rem;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
  }

  body:has(.fi-main-sidebar:not(.fi-sidebar-open)) .rc-sidebar-toggle::before {
    width: 0.75rem;
  }

  body:has(.fi-main-sidebar:not(.fi-sidebar-open)) .rc-sidebar-toggle:hover::before {
    width: 1rem;
  }

  .dark .rc-sidebar-toggle {
    border-color: var(--gray-700);
    background-color: var(--gray-800);
    color: var(--gray-300);
    box-shadow: none;
  }

  .dark .rc-sidebar-toggle:hover {
    border-color: var(--primary-800);
    background-color: var(--primary-950);
    color: var(--primary-300);
  }
}


/* DEMOUPLINK-18 — impersonation: the banner’s offset was being counted twice.

   stechstudio/filament-impersonate renders #impersonate-banner fixed at the top and gives
   body a 50px margin-top to clear it. Filament ALSO adds that 50px to its own sticky
   offsets. Measured while impersonating, before these two rules: .fi-topbar-ctn sat at
   top: 50px and therefore y=100, while .fi-main-sidebar sat at top: 114px — so the topbar
   painted over the first 50px of the sidebar, which is why the brand logo and the sidebar’s
   own first element shared the same strip of screen.

   Setting the two offsets back to what they are without a banner restores the normal
   relationship, because body’s margin has already moved everything down. Measured after:
   topbar 50 -> 114, sidebar 114, logo 62 -> 102, nothing overlapping.

   The chat gets the same correction for the same reason: DEMOUPLINK-11’s
   calc(100dvh - 4rem) knows nothing about a 50px banner, so the composer fell below the
   window. Measured: 50px of overshoot, now 0. */
body:has(#impersonate-banner) .fi-topbar-ctn {
  top: 0;
}

body:has(#impersonate-banner) .fi-main-sidebar {
  top: 4rem;
}

body:has(#impersonate-banner) .uplink-chat-page .fi-page-content > div {
  height: calc(100dvh - 4rem - 50px);
}

/* DEMOUPLINK-17 — correction to the two margins directly above, and a reading column.

   The 64px left margin read as a seam between the navigation and the chat rather than as
   breathing room: the chat is the page, so a gap before it looks like a mistake. Both
   margins are 0 now, and the air moved INSIDE the column below, where it is air around the
   text instead of a strip of background. Measured after: chat 320 -> 2056, flush against the
   navigation on one side and the window on the other.

   The column itself is the real change. Measured on the running app at 2056 wide, before:

     paragraph width   1288px
     font-size         14px
     characters/line   202

   Typographic practice puts comfortable prose at 45-90 characters; 202 is roughly two
   columns of text the eye has to track back across. After:

     box               784px (49rem), centred, 40px of padding on each side
     paragraph width   704px
     font-size         15px, line-height 1.7
     characters/line   103

   Still above 90, deliberately: dropping to 90 at this font size means a 620px column in a
   1700px pane, which reads as a slot rather than a chat. 103 was the number that looked
   right in the browser with the operator watching, and that is what settled it.

   The composer gets the same 49rem so the two line up exactly — measured, both at x 764,
   both 784 wide. Without it the input spans the full pane and the column appears to float.

   🔴 Scoped on `px-16`, a Tailwind utility the PACKAGE sets on the transcript's own
   scroll container. That is brittle on purpose-for-now: the first version of this scoped on
   `overflow-y-auto`, which ALSO matched the conversation list and quietly squeezed its
   titles. `px-16` is the one class unique to the transcript. The durable fix is RCP-1478,
   in the package, where this does not need a selector at all. */
.uplink-chat-page [class*="px-16"] {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.uplink-chat-page [class*="px-16"] > div {
  max-width: 49rem;
  margin-inline: auto;
  padding-inline: 40px;
}

.uplink-chat-page [class*="px-16"] [class*="prose"] {
  font-size: 0.9375rem;
  line-height: 1.7;
}

.uplink-chat-page form {
  max-width: 49rem;
  margin-inline: auto;
}