/*
 * REQ 300-vervolg (CMD-0070, chat-first visual preview, na issue #406). Lay-out voor de
 * permanente, tweekoloms werkruimte binnen de UI 2.0-schil (ui2-shell.css blijft ongewijzigd):
 * de chat (#ui2-chat-pane) staat op desktop altijd zichtbaar en centraal, het contextpaneel
 * (#ui2-context-pane, bevat het bestaande #ui2-content dat ui2-router.js vult) staat ernaast.
 * Onder 1024px (zelfde breakpoint als de rest van de schil) is het contextpaneel een van-rechts
 * inschuivend paneel, net als #ui2-nav dat al is voor de mobiele hoofdnavigatie; chat is dan de
 * standaard, volledige weergave.
 *
 * Hergebruikt uitsluitend bestaande tokens (tokens.css/skins/*.css) en de bestaande
 * chatopmaak (#zone-chat/.chat-*, shell.css, REQ 103/CMD-0017): dit bestand voegt alleen de
 * omliggende paneel-/drawerlay-out toe, geen nieuwe kleuren of chatstijl.
 */

.ui2-workspace {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
}

/* --- Lijstpaneel (driepaneel-modus: Apparaten/Klanten, feat/apparaten-klanten-3paneel) ----------
 * Nieuw derde paneel, links van de chat, uitsluitend zichtbaar wanneer UI2Shell.enterThreePaneMode()
 * (ui2-shell.js) de modifierklasse .ui2-workspace--3pane op #ui2-workspace zet. Zonder die klasse
 * (elke andere sectie: Dashboard, Tickets, Audit-log, Beheer, Gesprekken, Signalen,
 * Microsoft-gebruikers) is dit paneel display:none en dus volledig onzichtbaar/niet-in-flow, exact
 * de bestaande tweekoloms-lay-out blijft voor die secties ongewijzigd. Vaste breedte in v1 (20rem,
 * bewuste keuze, geen eigen sleepbalk zoals het contextpaneel hieronder al heeft — dat is een latere
 * verfraaiing, geen vereiste voor deze eerste versie).
 */

.ui2-list-pane {
  position: relative; /* ankerpunt voor .ui2-list-resize-handle hieronder, zelfde als .ui2-context-pane */
  display: none;
  flex-shrink: 0;
  width: 20rem;
  min-width: 0;
  flex-direction: column;
  background: var(--color-bg-surface);
  border-right: 1px solid var(--color-border-subtle);
  /* Zelfde container-query-mechanisme als .ui2-context-pane hieronder (container-type/-name):
     kindregels kunnen zich aanpassen aan de door de gebruiker gesleepte paneelbreedte, los van de
     vensterbreedte. */
  container-type: inline-size;
  container-name: ui2-list;
}

.ui2-workspace--3pane .ui2-list-pane {
  display: flex;
  order: -1; /* altijd vóór de chat, ongeacht DOM-volgorde */
}

/* Door de gebruiker gekozen breedte (ui2-shell.js, listPaneResizer/.ui2-list-resize-handle
   hieronder), exacte spiegeling van de --ui2-context-pane-custom-width-regel verderop in dit
   bestand: bewust een losse regel ACHTER de basisregel hierboven, gescoped op dezelfde 1024px-grens,
   en NIET via een inline style.width (zou de mobiele drawer-breedte in de @media hieronder
   overstemmen). */
@media (min-width: 1024px) {
  .ui2-list-pane {
    width: var(--ui2-list-pane-custom-width, 20rem);
  }
}

/* Sleepbalk aan de RECHTERrand van het lijstpaneel (spiegelbeeld van .ui2-context-resize-handle
   hieronder, die aan de linkerrand van het contextpaneel zit): zelfde brede, onzichtbare trefzone
   (12px) met alleen een dun kleuraccent bij hover/focus/slepen, zelfde makePaneResizer()-mechanisme
   in ui2-shell.js. right: -6px zet het midden van de trefzone op de bestaande border-right van het
   paneel. Alleen zichtbaar vanaf 1024px, zelfde reden als bij het contextpaneel: onder die grens is
   het lijstpaneel een vaste-breedte drawer, niet iets om te resizen. */
.ui2-list-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -6px;
  width: 12px;
  cursor: col-resize;
  touch-action: none;
  z-index: 1;
}

.ui2-list-resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5px;
  width: 2px;
  background: transparent;
  transition: background-color 120ms ease;
}

.ui2-list-resize-handle:hover::after,
.ui2-list-resize-handle:focus-visible::after,
.ui2-list-resize-handle.is-resizing::after {
  background: var(--color-accent);
}

.ui2-list-resize-handle:focus-visible {
  outline: none; /* de eigen ::after-kleurindicator is hier het focusteken, geen dubbele outline. */
}

.ui2-list-pane-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--spacing-4);
}

.ui2-list-pane-header { display: none; }

.ui2-list-toggle { display: none; }

.ui2-list-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim-nav);
  z-index: var(--z-nav-backdrop);
}

@media (max-width: 1023.98px) {
  /* Zelfde van-de-zijkant-inschuivende drawer als het bestaande contextpaneel hieronder, gespiegeld
     naar links, en alleen relevant binnen de driepaneel-modus (buiten die modus bestaat het paneel
     toch al niet, zie hierboven). */
  .ui2-workspace--3pane .ui2-list-toggle { display: inline-flex; }

  .ui2-shell.list-open .ui2-list-backdrop { display: block; }

  /* Onder 1024px is #ui2-list-pane een vaste-breedte drawer (zie hieronder), niet iets om te
     resizen, zelfde reden als .ui2-context-resize-handle hieronder. */
  .ui2-list-resize-handle { display: none; }

  .ui2-workspace--3pane .ui2-list-pane {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--z-nav);
    width: min(90vw, 20rem);
    transform: translateX(-100%);
    box-shadow: var(--shadow-xl);
    border-right: none;
    padding-top: env(safe-area-inset-top, 0);
  }

  .ui2-shell.list-open .ui2-list-pane { transform: translateX(0); }

  .ui2-list-pane-header { display: flex; justify-content: flex-end; padding: var(--spacing-2); }
  .ui2-list-close { display: inline-flex; }
}

@media (prefers-reduced-motion: no-preference) {
  @media (max-width: 1023.98px) {
    .ui2-list-pane { transition: transform .18s ease; }
  }
}

/* --- Chatpaneel (centraal, permanent) ----------------------------------------------------------- */

.ui2-chat-pane {
  flex: 1 1 auto;
  /* Zelfde waarde als CHAT_MIN_WIDTH_PX in ui2-shell.js: die constante bepaalt hoeveel ruimte
     contextPaneMaxWidthForViewport() minimaal voor dit paneel vrijhoudt zodra de gebruiker het
     contextpaneel breder sleept. Blijf deze twee plekken in lockstep aanpassen. */
  min-width: 480px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Losstaande eis (vier-koloms-lay-out, los van de zijpaneel-breedtes hierboven): de chat-kolom zelf
   mag nooit edge-to-edge uitrekken op een heel breed scherm. Geen bestaand "max leesbreedte"-token
   gevonden in tokens.css/skins/*.css (dat bestand is uitsluitend het skin-tokencontract voor
   kleur/typografie/schaduw/z-index, zie de bestandsheader daar, en het tokencontract in
   tests/frontend/ui2-shell-theme.test.js bewaakt precies dat); 840px is dus, net als de vaste
   paneelbreedtes hierboven (26rem/20rem), een losse layoutconstante hier in ui2-workspace.css, geen
   skin-token/CSS-variabele (die waarde verandert nooit per skin of per gebruikersactie, in
   tegenstelling tot de door de gebruiker gesleepte paneelbreedtes hierboven). 840px zit in het
   midden van de gangbare 720-960px-marge voor een leesbare tekstkolom en geeft de
   chatbubbels/composer ruim de breedte die shell.css er al voor voorziet (bv. .chat-msg
   max-width: 85%) zonder dat een berichtregel op een ultrabreed scherm onleesbaar lang wordt.

   #zone-chat is de enige rechtstreekse container van zowel de berichtenlijst (.chat-messages) als
   de chatbalk (.chat-input-row, shell.js Chat.mount()); door uitsluitend dit ene element te
   begrenzen en te centreren volgen beide kinderen (die al width: 100% van hun ouder aannemen)
   vanzelf mee, zonder shell.css/ui2-chat-composer.js zelf aan te raken (zie PR #664: de
   verstuurknop-component blijft ongewijzigd). Header (.ui2-chat-pane-header) hieronder krijgt
   dezelfde begrenzing zodat de titelbalk optisch boven dezelfde kolom blijft staan. */
#zone-chat,
.ui2-chat-pane-header {
  width: 100%;
  max-width: 840px;
  margin-inline: auto;
}

/* Bugmelding PO (echt mobiel toestel, viewport ~412px, #/klanten): op mobiel was er geen enkele
 * zichtbare manier om het lijst- of contextpaneel te openen. Oorzaak: de min-width: 480px hierboven
 * is alleen bedoeld voor de sleepgrens van het CONTEXTPANEEL op desktop (CHAT_MIN_WIDTH_PX,
 * ui2-shell.js — dat mechanisme bestaat pas vanaf 1024px, zie .ui2-context-resize-handle die
 * daaronder al display:none is), maar gold zonder deze override OOK onder 1024px. Op elk scherm
 * smaller dan 480px (vrijwel elke telefoon, inclusief de ~412px uit de bugmelding) dwong dat de
 * hele driepaneel-werkruimte (en dus ook #ui2-chat-pane-header, met daarin #ui2-list-toggle en
 * #ui2-context-toggle) breder te zijn dan de viewport. Omdat .ui2-shell overflow: hidden heeft
 * (D-251, ui2-shell.css), werd dat overschot niet scrollbaar maar afgesneden — het rechterdeel van
 * de header (met daarin #ui2-context-toggle, en, afhankelijk van de precieze breedtes op het
 * toestel, ook #ui2-list-toggle) viel zo buiten het zichtbare, niet-scrollbare gebied. min-width: 0
 * hier laat de chat gewoon meekrimpen met de viewport, zoals elk ander mobiel element in dit
 * bestand al doet, zodat de header nooit meer breder hoeft te zijn dan het scherm. */
@media (max-width: 1023.98px) {
  .ui2-chat-pane { min-width: 0; }
}

.ui2-chat-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-base);
  flex-shrink: 0;
}

.ui2-chat-pane-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

/* Alleen zichtbaar onder 1024px: op desktop staat het contextpaneel al statisch ernaast, geen
   toggle nodig (zelfde aanpak als .ui2-hamburger in ui2-shell.css). */
.ui2-context-toggle { display: none; }

/* #zone-chat (shell.js Chat.mount(), REQ 103/CMD-0017) krijgt hier, in plaats van via shell.css'
   eigen min-breedte-voorwaarde vanaf 1024 pixels (die uitging van de oude vier-zones-chrome), op
   ELKE breakpoint een flexcontainer die de resterende hoogte van het chatpaneel vult: de
   berichtenlijst (.chat-messages, shell.css) moet ook op een smal scherm zelf kunnen scrollen in
   plaats van de hele pagina te laten meegroeien. Zelfde ID-selector als shell.css, later geladen
   (zie index.html), dus deze regel wint zonder !important. */
#zone-chat {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* --- Contextpaneel (rechts op desktop, van-rechts-inschuivend paneel onder 1024px) --------------- */

.ui2-context-pane {
  position: relative; /* ankerpunt voor .ui2-context-resize-handle hieronder */
  flex-shrink: 0;
  width: 26rem;
  max-width: 34vw;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
  border-left: 1px solid var(--color-border-subtle);
  /* Naamgegeven inline-size container zodat kindregels (bv. microsoft-users.css) hun eigen lay-out
     kunnen aanpassen aan de door de gebruiker gesleepte paneelbreedte, los van de viewportbreedte.
     Op de basisregel (niet alleen binnen @media min-width:1024px) zodat het ook geen kwaad kan op
     de mobiele, van-rechts-inschuivende drawer-breedte. */
  container-type: inline-size;
  container-name: ui2-context;
}

/* Bugmelding van Lars (UX): de sleepbalk (.ui2-context-resize-handle hieronder) hing maar over
   ongeveer de helft van zijn eigen paneel, in plaats van over de volle lengte. Oorzaak: overflow-y:
   auto stond tot nu toe op #ui2-context-pane zelf, het element waarop de handle ook top:0/bottom:0
   ankert. Een position:absolute kind met top:0/bottom:0 krijgt daarbij de hoogte van het
   CONTAINING BLOCK's eigen renderbox (hier de zichtbare paneelhoogte, bijvoorbeeld 1143px), niet
   van zijn scrollHeight (bijvoorbeeld 2508px zodra de inhoud van #ui2-content langer is dan het
   scherm) — dus de handle stopte halverwege de werkelijke, scrollbare inhoud.
   Vastgesteld door in de browser pane.scrollHeight (2508) tegen handle.rect.height (1143) af te
   zetten: bijna precies de helft, wat exact overeenkomt met Lars' waarneming.
   Oplossing: het scrollen verplaatsen van #ui2-context-pane zelf naar #ui2-content daarbinnen (zie
   hieronder). #ui2-context-pane houdt dan altijd zijn eigen, vaste (viewport-)hoogte aan, ongeacht
   hoe lang de inhoud is, dus de handle (nog steeds top:0/bottom:0 op datzelfde, nu niet meer
   scrollende element) dekt voortaan altijd de volle lengte van het paneel. */
.ui2-context-pane .ui2-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Door de gebruiker gekozen breedte (ui2-shell.js, resizehandle hieronder). Bewust een losse regel
   ACHTER de basisregel hierboven, gescoped op dezelfde 1024px-grens als de rest van dit bestand, en
   NIET via een inline style.width op het element zelf: een inline style zou de mobiele breedteregel
   verderop in dit bestand (@media max-width: 1023.98px) overstemmen zodra het venster smaller wordt
   dan 1024px, wat de van-rechts-inschuivende drawer daar zou kapotmaken. --ui2-context-pane-
   custom-width staat pas op iets zodra de gebruiker daadwerkelijk heeft gesleept; zonder die
   variabele gelden gewoon de vaste waarden hierboven. */
@media (min-width: 1024px) {
  .ui2-context-pane {
    width: var(--ui2-context-pane-custom-width, 26rem);
    max-width: var(--ui2-context-pane-custom-width, 34vw);
  }
}

/* Resize-gedreven breakpoint (in aanvulling op de viewport-gedreven @media hierboven): zodra de
   gebruiker het contextpaneel zelf breder sleept dan 600px (ruim voorbij de standaard 26rem/416px
   startbreedte, en breder dan de oude vaste CONTEXT_PANE_MAX_WIDTH_PX ooit toeliet), krijgen
   kindcomponenten binnen dit paneel de kans om een comfortabelere lay-out te tonen — bv. bredere
   kolommen in .ms-user-row (microsoft-users.css). Reageert op de daadwerkelijke paneelbreedte, niet
   op de vensterbreedte, dus werkt onafhankelijk van @media (min-width: 1024px) hierboven. Toekomstige
   schermen kunnen hier eigen `@container ui2-context (min-width: ...)`-regels aan toevoegen. */
@container ui2-context (min-width: 600px) {
  .ui2-context-pane-header {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }
}

/* Bugmelding van Lars (UX): het contextpaneel met de muis breder/smaller kunnen slepen aan zijn
   linkerrand, zonder scrollbar of dikke lijn — een brede, onzichtbare trefzone (12px) voor het
   muisgemak, met alleen een DUN kleuraccent dat verschijnt bij :hover/:focus-visible of tijdens het
   slepen zelf (.is-resizing, door ui2-shell.js gezet). ui2-shell.js zet de daadwerkelijke breedte
   als inline style op #ui2-context-pane (style.width, met style.maxWidth = 'none' zodra een eigen
   breedte is gekozen, want anders blijft de vaste max-width: 34vw hierboven het resultaat afkappen).
   left: -6px zet het midden van de trefzone precies op de bestaande border-left van het paneel. */
.ui2-context-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  width: 12px;
  cursor: col-resize;
  touch-action: none;
  z-index: 1;
}

.ui2-context-resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 5px;
  width: 2px;
  background: transparent;
  transition: background-color 120ms ease;
}

.ui2-context-resize-handle:hover::after,
.ui2-context-resize-handle:focus-visible::after,
.ui2-context-resize-handle.is-resizing::after {
  background: var(--color-accent);
}

.ui2-context-resize-handle:focus-visible {
  outline: none; /* de eigen ::after-kleurindicator is hier het focusteken, geen dubbele outline. */
}

.ui2-context-pane-header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  flex-shrink: 0;
}

.ui2-context-pane-header .ui2-context-bar {
  flex: 1 1 auto;
  min-width: 0;
}

/* Alleen zichtbaar onder 1024px, zelfde reden als .ui2-context-toggle hierboven. */
.ui2-context-close { display: none; }

.ui2-context-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim-nav);
  z-index: var(--z-nav-backdrop);
}

@media (max-width: 1023.98px) {
  .ui2-workspace { flex-direction: column; }

  .ui2-chat-pane-header { padding: var(--spacing-2) var(--spacing-3); }

  .ui2-context-toggle { display: inline-flex; }

  .ui2-shell.context-open .ui2-context-backdrop { display: block; }

  /* Onder 1024px is #ui2-context-pane een vaste-breedte drawer (zie hieronder), niet iets om te
     resizen. */
  .ui2-context-resize-handle { display: none; }

  .ui2-context-pane {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-nav);
    width: min(90vw, 26rem);
    max-width: none;
    transform: translateX(100%);
    box-shadow: var(--shadow-xl);
    border-left: none;
    padding-top: env(safe-area-inset-top, 0);
  }

  .ui2-shell.context-open .ui2-context-pane { transform: translateX(0); }

  .ui2-context-close { display: inline-flex; }

  .ui2-context-pane-header { padding: var(--spacing-2) var(--spacing-2) 0; }
}

@media (prefers-reduced-motion: no-preference) {
  @media (max-width: 1023.98px) {
    .ui2-context-pane { transition: transform .18s ease; }
  }
}

/* --- Geen horizontale overflow, ook niet op 360px (zelfde eis als ui2-shell.css) ------------------ */

@media (max-width: 359.98px) {
  .ui2-chat-pane-header { flex-wrap: wrap; }
  .ui2-context-pane { width: 100vw; }
  .ui2-workspace--3pane .ui2-list-pane { width: 100vw; }
}