/* Thread focus mode («تمام‌صفحه کردن ترد») — paired with custom.focus.js.
 * html.nirvan-thread-focus is set by the JS only while the mode is on AND the right panel
 * shows a thread / the thread list. The right panel is painted over the room list and the
 * room view; nothing underneath changes size or display, so Element's saved layout is safe.
 * Docs: docs/01-element/02-stack.md. */

:root { --nirvan-focus-left: 68px; --nirvan-focus-width: 1040px; }

/* The panel itself: fixed over everything right of the space bar. Below dialogs (4000),
 * menus (5000) and toasts (101), above the room UI. */
html.nirvan-thread-focus .mx_RightPanel {
  position: fixed !important;
  top: 0;
  bottom: 0;
  left: var(--nirvan-focus-left);
  right: 0;
  width: auto !important;
  max-width: none !important;
  z-index: 100;
  border-left: none;   /* the space bar's own right border is the divider */
}
/* The space bar's expand/collapse handle straddles its right edge; keep it above the panel. */
html.nirvan-thread-focus .mx_SpacePanel { z-index: 101; }
/* Element puts `contain: strict` on .mx_RoomView_wrapper. Layout/paint containment makes it
 * the containing block of fixed descendants AND clips them, so the panel could not reach
 * over the room list. Keep size+style containment, drop layout+paint — only in this mode.
 * Nothing in the wrapper changes position (focus-test.mjs compares every element's box). */
html.nirvan-thread-focus .mx_RoomView_wrapper { contain: size style !important; }

/* Dragging the width handle in this mode would save a nonsense width — hide it. */
html.nirvan-thread-focus .mx_RightPanel_ResizeWrapper .mx_ResizeHandle--horizontal { display: none !important; }

/* Covered UI must not take keyboard focus or be read by screen readers. visibility keeps
 * its layout box, so timelines keep their size and do not start back-paginating. */
html.nirvan-thread-focus #left-panel,
html.nirvan-thread-focus .mx_MatrixChat .mx_Separator,
html.nirvan-thread-focus .mx_MainSplit > .mx_RoomView_body { visibility: hidden; }

/* Readable line length: content centred, at most --nirvan-focus-width wide. The scrollbar
 * stays at the window edge because only the inner list is narrowed. */
html.nirvan-thread-focus .mx_RightPanel .mx_ThreadPanel .mx_RoomView_MessageList,
html.nirvan-thread-focus .mx_RightPanel .mx_ThreadPanel > .mx_MessageComposer,
html.nirvan-thread-focus .mx_RightPanel .mx_ThreadPanel .mx_ThreadPanel_empty {
  max-width: var(--nirvan-focus-width);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* Header: room name next to «Thread» (the room header is covered); visible only here. */
.nirvan-focus-room { display: none; }
/* The title row is space-between [heading][options?]. Pack it to the start so the tag sits
 * right after the heading; the options (…) button keeps its place at the end (auto margin). */
html.nirvan-thread-focus .mx_RightPanel .mx_BaseCard_header_title { justify-content: flex-start; }
html.nirvan-thread-focus .mx_BaseCard_header_title > .mx_BaseCard_header_title_button--option { margin-left: auto; }
html.nirvan-thread-focus .nirvan-focus-room {
  display: inline-block;
  margin-left: 10px;   /* physical: the header is LTR, the tag itself may be RTL */
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  font: var(--cpd-font-body-md-regular);
  color: var(--cpd-color-text-secondary);
}
html.nirvan-thread-focus .nirvan-focus-btn[data-on="true"] { color: var(--cpd-color-icon-accent-primary, #0467dd); }