/* Wik Desktop core -- base.css (owner B). The ONLY file with global element selectors (CONTRACT_D1 §8.9); every class here is .wk-.
   Colours are var(--c-*) set by core/tokens.js applyTheme (from colors.xml / values-night); sizes var(--t-*) / var(--chip) set by
   core/size.js applySizes (SizeTokens, 1 sp = 1 dp = 1 CSS px); the face var(--font) by core/fonts.js applyFont.
   The fallbacks below are the DARK palette (the default mode), so a page whose script failed still reads. */
:root {
  --c-bg: #0C0B14; --c-text: #F0EEF8; --c-subtext: #9993B8; --c-page-bg: #0C0B14; --c-card-fill: #1A1828; --c-card2-fill: #201E32;
  --c-card-border: #2E2B45; --c-accent-shown: #7C4FE0; --c-text-accent: #9875E6; --c-chrome-fill: #0C0B14; --c-icon-tint: #D0CCE0;
  --t-read: 13.7px; --t-main: 13.7px; --t-sub: 13.7px; --t-title: 21.6px; --chip: 48px;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; --w-base: 400; --w-name: 700; --w-message: 400;
  --rail-inset: 3px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--c-page-bg); color: var(--c-text);
  font-family: var(--font); font-weight: var(--w-base); font-size: var(--t-read); line-height: 1.25;
  -webkit-font-smoothing: antialiased; user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }
input, textarea, select { font: inherit; color: inherit; }
img { display: block; }
a { color: inherit; }
::selection { background: var(--c-accent-shown); color: var(--c-on-accent-shown, #fff); }
/* the desktop's own scrollbar: thin, in the border token (an extra; Android draws a fading bar) */
* { scrollbar-width: thin; scrollbar-color: var(--c-card-border) transparent; }
:focus-visible { outline: 2px solid var(--c-accent-shown); outline-offset: 1px; }

/* ── the shell (app.js): rail | left pane | right pane from 900 px; one pane below ─────────────────────────────────────── */
.wk-app { position: fixed; inset: 0; display: flex; flex-direction: row; background: var(--c-page-bg); }
.wk-app[hidden], .wk-full[hidden] { display: none; }
.wk-full { position: fixed; inset: 0; overflow: auto; background: var(--c-page-bg); }
/* W1/93 USERSROW (his "the side pannel with 4 icons has larger top padding than the block where Wik logo is", "use unified paddings"): two
   panes, the tab rail stands on THE chrome grid -- its first tab --head-lead from the top (the headers' slots: core/header.js HEADER_SLOTS, R2), --row-gap
   at both sides (a row's start inset), tab to tab --row-vgap (row to row, size.js rowVGapPx): tab i sits level with the header / row i.
   Was --rail-inset 3 px around every tab (6 px to the first, 6 px between): kept for the one-pane bottom row (CapsuleDrawable navTab) */
.wk-rail {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--row-vgap);
  /* R2: the first tab at the headers' lead (core/header.js HEADER_SLOTS padTop --head-lead), level with their slots */
  padding: var(--head-lead) 0 var(--row-gap) var(--row-gap);   /* W1/96 DI (his "the very left pannel with 4 icons [has] too large right padding - too large gap"): no end padding -- the gap to the pane is the pane header's own start pad (+ the hairline), equal to the rail's start pad at every size */
  position: relative; z-index: 1;   /* W1/96 DI: a lit tab's outward ring (core/chip.js, gap / 2) paints over the hairline, never under the pane */ background: var(--c-chrome-fill); border-inline-end: 1px solid var(--c-divider-hair, var(--c-card-border));
}
.wk-pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wk-pane[hidden] { display: none; }
/* W1/96 DI (his "At +2 make sure the settings block shows all icons at top and the settings gear icon is not cropped"): the pane is never
   narrower than its header's slots -- 2 pads + the wordmark (chip x 440 / 288) + 4 chip squares (Wik room, me, wallet, gear) + 4 grid gaps
   + the hairline (core/header.js HEADER_SLOTS, rooms.js renderHeader) -- so at +2 / +3 every slot shows and the gear is whole */
.wk-pane-left { flex: 0 0 max(var(--left-pane, 400px), calc(var(--chip) * 5.5278 + var(--row-gap) * 6 + 2px)); border-inline-end: 1px solid var(--c-divider-hair, var(--c-card-border)); }
.wk-pane-right { flex: 1 1 auto; }
.wk-pane-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.wk-pane-body > * { flex: 1 1 auto; min-height: 0; }
.wk-app[data-layout="one"] { flex-direction: column; }
.wk-app[data-layout="one"] .wk-pane-left { flex: 1 1 auto; border: 0; }
.wk-app[data-layout="one"] .wk-rail {
  order: 9; flex-direction: row; justify-content: space-around; padding: var(--rail-inset) 0; border: 0; gap: 0;
  border-top: 1px solid var(--c-divider-hair, var(--c-card-border));
}
.wk-app[data-layout="one"][data-room="open"] .wk-rail,
.wk-app[data-layout="one"][data-room="open"] .wk-pane-left { display: none; }
.wk-app[data-layout="one"]:not([data-room="open"]) .wk-pane-right { display: none; }


/* a nav tab (CrossroadsActivity.dressBottomNav + CapsuleDrawable navTab): an enclosure the chip's size, the frame corner */
.wk-tab { position: relative; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--c-subtext); }   /* W1/93: the rail's padding + gap place it */
.wk-app[data-layout="one"] .wk-tab { margin: var(--rail-inset); }   /* the bottom row: NAV_TAB_INSET_DP 3 (CapsuleDrawable.kt:292) */
.wk-tab.wk-on { color: var(--c-active-ink, var(--c-lit, var(--c-accent-shown))); }   /* W1/73 BTNFILL: tintBottomNav activeInk(accent()); W1/74 FILLRAW: lit */
.wk-tab[aria-disabled="true"] { cursor: default; }
.wk-tab[aria-disabled="true"] .wk-icon { opacity: 0.55; }

/* ── shapes and chips ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.wk-shaped { position: relative; }
.wk-shaped > :not(.wk-shape) { position: relative; }
.wk-shape { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.wk-chip {
  display: inline-flex; flex: 0 0 auto; align-items: center; vertical-align: middle; padding: 0; white-space: nowrap; isolation: isolate;
}
.wk-chip-square { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; overflow: hidden; }
.wk-chip-square[hidden], .wk-chip-label[hidden] { display: none; }
.wk-chip-square > .wk-identity, .wk-chip-square > img, .wk-chip-square > svg { width: 100%; height: 100%; }
.wk-chip-glyph { line-height: 1; font-weight: 400; }
.wk-chip-label { max-width: 24em; overflow: hidden; text-overflow: ellipsis; font-weight: var(--w-base);   /* R3 L1: buildIconChip (MainActivity.kt:2155) sets no bold -- ROLE_PLAIN, the base weight */ }
.wk-shaped > .wk-chip-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.wk-shaped > .wk-chip-sel { position: absolute; pointer-events: none; z-index: 2; }   /* W177A2_DESK A2-8: the selection, OUTSIDE the chip */
.wk-chip-sel[hidden] { display: none; }
.wk-chip-overlay > .wk-chip-count, .wk-chip-overlay > .wk-chip-hash, .wk-chip-overlay > .wk-chip-lock { position: absolute; }
.wk-shaped > .wk-chip-overlay > .wk-chip-count[hidden] { display: none; }
.wk-chip-count { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  background: var(--c-badge); color: #FFFFFF; font-weight: 700; line-height: 1;
}
.wk-chip-hash { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; line-height: 1; }
.wk-chip-lock { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-subtext); color: var(--c-page-bg); }
/* W1/78 W178_DESK: a locked room's list-row face wears the same disc (chip.js withLockMark) */
.wk-lock-face { position: relative; isolation: isolate; display: inline-flex; flex: 0 0 auto; }   /* the disc stacks INSIDE the face only (no z-index: gate E1 r1 showed a z-index:1 disc bleeding through a covering list) */

.wk-identity { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; }
.wk-identity-img { width: 100%; height: 100%; object-fit: cover; }
.wk-identity-text { line-height: 1; }
.wk-identity-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ── icons, emoji, links ──────────────────────────────────────────────────────────────────────────────────────────────── */
.wk-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: middle; }
.wk-icon-mask { background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
/* W1/96 DI fix1 (his "these buttons are glued to the line"): a pack glyph (stroke on a 24 grid, ink ~1..23) fills its box closer than the
   Material vector it replaced (ink ~3..21), so the post's action row stood ~1-1.5 px nearer the band line; the pack glyph sits at 88 % of
   the button, centred -- its ink keeps at least the Material air above and below (gate R1-GAP, levels 0 / +2 / +3) */
.post-act .post-glyph > .wk-icon-mask { width: 88%; height: 88%; }
.wk-emoji { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -0.28em; }
.wk-link { text-decoration: underline; cursor: pointer; user-select: text; }
.wk-link-none { text-decoration: none; }

/* ── dialogs (bg_dialog.xml, styles_dialog.xml) ──────────────────────────────────────────────────────────────────────── */
.wk-overlays { position: fixed; inset: 0; pointer-events: none; z-index: 100; }
.wk-overlays > * { pointer-events: auto; }
.wk-dialog-scrim { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.7); }
.wk-dialog {
  width: min(calc(100vw - 32px), 360px); max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, var(--c-dialog-bg-top), var(--c-dialog-bg));
  border: 1.5px solid var(--c-logo-frame); border-radius: 20px; box-shadow: 0 0 0 3px var(--c-logo-glow); color: var(--c-text);
  user-select: text;
}
.wk-dialog:focus { outline: none; }
.wk-dialog-title { padding: 22px 24px 8px 24px; font-weight: 500; color: var(--c-text); }
.wk-dialog-message { padding: 8px 24px 8px 24px; color: var(--c-subtext); white-space: pre-wrap; }
.wk-dialog-list { overflow: auto; padding: 4px 0; }
/* W1/77 A2-5 (W177A2_DESK): the text-bound frames below ride THE text-frame scale --tf (core/size.js frameScale, AND-FRAME's funnel):
   ChoiceList.newRow and actionRow (touch minimums, UP-ONLY: 48 / 48 / 59.4 and 52 / 52 / 64.4), wrapInput, the capsule word buttons
   (drawn scaled; below the default level a slop keeps their b114 hit rect -- contract §10 "Hit areas") */
.wk-dialog-item { display: block; width: 100%; min-height: max(48px, calc(var(--tf, 1) * 48px)); padding: calc(var(--tf, 1) * 12px) calc(var(--tf, 1) * 24px); color: var(--c-text); text-align: start; }
.wk-dialog-item:hover, .wk-dialog-item:focus-visible { background: rgba(255, 255, 255, 0.06); }
.wk-dialog-item:disabled { color: var(--c-dim); }
.wk-dialog-add { color: var(--c-text-accent, var(--c-text)); }   /* W1/77 A11 (W177A_DESK): a picker's "Add topic" row */
.wk-dialog-input-wrap { padding: calc(var(--tf, 1) * 8px) calc(var(--tf, 1) * 20px) 0 calc(var(--tf, 1) * 20px); }
.wk-dialog-input { width: 100%; padding: calc(var(--tf, 1) * 8px) calc(var(--tf, 1) * 4px); background: transparent; border: 0; border-bottom: 2px solid var(--c-brand-ink); outline: none; color: var(--c-text); }
.wk-dialog-input.wk-multiline { resize: none; line-height: 1.3; font-family: inherit; overflow-y: auto; }
.wk-dialog-input::placeholder { color: var(--c-dim); }
.wk-dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 16px 12px 16px; }
.wk-dialog-button { min-width: 64px; min-height: 48px; padding: 0 12px; color: var(--c-brand-ink); text-transform: uppercase; font-weight: 500; letter-spacing: 0.04em; border-radius: 4px; }
.wk-dialog-button:hover, .wk-dialog-button:focus-visible { background: rgba(255, 255, 255, 0.06); }
.wk-dialog-button:disabled { color: var(--c-dim); }
.wk-dialog-buttons.wk-sentence .wk-dialog-button { text-transform: none; letter-spacing: 0; }
.wk-dialog-button.wk-danger { color: var(--c-red); }
.wk-dialog-buttons.wk-centred { justify-content: center; }
.wk-dialog-buttons .wk-neutral { margin-inline-end: auto; }   /* r2: alert()'s neutral button at the start */

.wk-toast {
  position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); max-width: min(calc(100vw - 48px), 420px);
  padding: 10px 16px; border-radius: 22px; background: rgba(40, 40, 44, 0.94); color: #FFFFFF; text-align: center;
  pointer-events: none; white-space: pre-wrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.wk-identity-glyph { display: inline-block; width: 1em; height: 1em; vertical-align: middle; }

/* ── bottom sheet (BottomSheetDialog: the frame interior tint, 16dp top corners, the handle) ─────────────────────────── */
.wk-sheet-scrim { position: fixed; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.32); }
.wk-sheet {
  width: min(100vw, 640px); max-height: calc(100vh - 24px); overflow: auto; background: var(--c-card-fill); color: var(--c-text);
  border-radius: 16px 16px 0 0; padding: 0 0 8px 0;
}
.wk-sheet-handle { width: 32px; height: 4px; margin: 10px auto 6px auto; border-radius: 2px; background: var(--c-muted); }

/* ── the emoji picker (fragment_emoji_picker.xml) ───────────────────────────────────────────────────────────────────────── */
.wk-emoji-picker { display: flex; flex-direction: column; }
/* R3 C4: fragment_emoji_picker.xml:22-36 -- margins 8/8/8/4, padding 10dp, background bg_dialog (the logo panel), hint c_subtext */
.wk-emoji-search { margin: 8px 8px 4px 8px; padding: 10px; border: 1.5px solid var(--c-logo-frame); border-radius: 20px;
  background: linear-gradient(180deg, var(--c-dialog-bg-top), var(--c-dialog-bg)); box-shadow: 0 0 0 3px var(--c-logo-glow); color: var(--c-text); outline: none; }
.wk-emoji-search::placeholder { color: var(--c-subtext); }
.wk-emoji-recent[hidden], .wk-emoji-tabs[hidden], .wk-emoji-divider[hidden] { display: none; }
.wk-emoji-divider { height: 1px; background: var(--c-card-border); }
/* R3 L4: categoryTabScroll is 48dp with scrollbars="none" */
.wk-emoji-tabs { display: flex; height: 48px; overflow-x: auto; scrollbar-width: none; background: var(--c-page-bg); }
.wk-emoji-tabs::-webkit-scrollbar { display: none; }
.wk-emoji-tab { flex: 0 0 auto; height: 48px; margin-inline-end: 4px; display: flex; align-items: center; justify-content: center;
  font-family: "Segoe UI Emoji", "Noto Color Emoji", sans-serif; opacity: 0.6; }
.wk-emoji-tab.wk-on { opacity: 1; font-weight: 700; background: rgba(255, 255, 255, 0.08); }
.wk-emoji-body { overflow-y: auto; padding: 0 6px; }
.wk-emoji-grid { display: grid; }
.wk-emoji-cell { display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.wk-emoji-cell:hover, .wk-emoji-cell:focus-visible { background: var(--c-card2-fill); }
.wk-emoji-cell .wk-emoji { width: 75%; height: 75%; }
.wk-emoji-text { font-family: "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }

/* ── D2: the page stack (app.js: a page over the left pane's tab, the phone's showPage / RoomPageFrame) ─────────────────────── */
.wk-page { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; overflow: auto; background: var(--c-page-bg); }
.wk-page[hidden] { display: none; }
.wk-tab[hidden] { display: none; }

/* ── D2: the shared UI kit (core/kit.js) -- each block names its Android template there ─────────────────────────────────────── */
.wk-kit-head { display: flex; flex-direction: row; align-items: center; padding: 4px 8px 4px 0; }
.wk-kit-back { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--c-subtext); }
.wk-kit-back .wk-icon { width: 24px; height: 24px; }
.wk-kit-headpic { flex: 0 0 auto; width: 56px; height: 56px; margin-inline-start: 4px; margin-inline-end: 12px; }
.wk-kit-headcol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wk-kit-headtitle { color: var(--c-text); font-weight: var(--w-name); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-kit-headsub { color: var(--c-dim); }
.wk-kit-cardlabel { margin-bottom: 6px; color: var(--c-dim); font-weight: 700; letter-spacing: 0.12em; }
.wk-kit-card { display: flex; flex-direction: column; background: var(--c-card-fill); border-radius: 12px; overflow: hidden; }   /* r2: THE WikCard (styles_wik.xml:8) -- no border, 12dp */
.wk-kit-row { display: flex; flex-direction: row; align-items: center; min-height: max(52px, calc(var(--tf, 1) * 52px)); padding: calc(var(--tf, 1) * 8px) 0; width: 100%; text-align: start; }
.wk-kit-rowcol { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wk-kit-rowtitle { color: var(--c-text); overflow-wrap: anywhere; }   /* r3: a long wallet address WRAPS (J) */
.wk-kit-rowsub { color: var(--c-dim); overflow: hidden; text-overflow: ellipsis; }
.wk-kit-rowtrail { flex: 0 0 auto; padding: 0 4px 0 12px; font-weight: 700; color: var(--c-text-accent); }
.wk-kit-chevron { flex: 0 0 auto; width: 20px; height: 20px; color: var(--c-dim); display: flex; }
.wk-kit-chevron .wk-icon { width: 20px; height: 20px; }
.wk-kit-divider { height: 1px; background: var(--c-card-border); opacity: 0.5; }
.wk-kit-note { color: var(--c-subtext); padding: 8px 0; }
.wk-kit-pill { display: inline-flex; align-items: center; padding: calc(var(--tf, 1) * 7px) calc(var(--tf, 1) * 14px); margin-inline-end: 8px; white-space: nowrap; flex: 0 0 auto; }
.wk-kit-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-kit-choice { display: inline-flex; align-items: center; justify-content: center; min-height: max(36px, calc(var(--tf, 1) * 36px)); white-space: nowrap; flex: 0 0 auto; }
.wk-kit-labelled { display: flex; flex-direction: column; margin-top: 10px; }
.wk-kit-labelledwords { color: var(--c-subtext); margin-bottom: 8px; }
/* W1/99 D201 (his words, desktop 200: "the buttons are still too close to the line"): a labelled choice row followed by a card divider
   (actionRow draws the divider before the next row) keeps the row's own 8dp below its chips -- actionRow's vertical padding, scaled by the
   text level like it. Desktop adaptation, no Android anchor: Android's labelledRow (AppearanceContent.kt:356) never sits above a divider */
.wk-kit-labelled + .wk-kit-divider { margin-top: calc(var(--tf, 1) * 8px); }
.wk-kit-person { display: flex; flex-direction: row; align-items: center; padding: 6px 0; cursor: pointer; }
.wk-kit-personpic { margin-inline-end: 12px; }
.wk-kit-personname { flex: 1 1 auto; min-width: 0; margin-inline-end: 8px; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-kit-foldhead { display: flex; align-items: center; min-height: 48px; cursor: pointer; }
/* W1/77 A2-5 (W177A2_DESK; contract §10 "Hit areas": a text button whose drawn frame scales below its b114 size keeps its b114 hit rect --
   Android's TouchDelegate / HitBox): the pill and the choice chip get back, as an invisible hit slop, exactly the padding the frame lost
   below the default level (min(0, (--tf - 1) x pad)); at and above the default the slop is 0 (scale-up only). The text's own size is the
   A2-4 curve, not a frame, and is not given back. */
.wk-kit-pill::after, .wk-kit-choice::after { content: ''; position: absolute; pointer-events: auto; }
.wk-kit-pill::after { inset: min(0px, calc((var(--tf, 1) - 1) * 7px)) min(0px, calc((var(--tf, 1) - 1) * 14px)); }
.wk-kit-choice::after { inset: min(0px, calc((var(--tf, 1) - 1) * 6px)) min(0px, calc((var(--tf, 1) - 1) * var(--wk-padh, 12px))); }
.wk-kit-foldchevron { width: 20px; height: 20px; margin-inline-start: 8px; color: var(--c-dim); display: flex; transition: transform 120ms; }
.wk-kit-foldchevron .wk-icon { width: 20px; height: 20px; }
.wk-kit-bar { height: 4px; border-radius: 2px; background: var(--c-card-border); overflow: hidden; }
.wk-kit-barfill { height: 100%; }
.wk-kit-jumplist { position: relative; display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.wk-kit-jumpscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-anchor: none; }
.wk-kit-jumppill { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 8px 16px; border-radius: 20px;
  background: var(--c-card2-fill); color: var(--c-text); border: 1px solid var(--c-accent-shown); }
.wk-kit-jumppill[hidden] { display: none; }
/* W1/69 d4 (A-DA-130): a newest-first list (wall, person page) -- the pill at the TOP, where its newest post is (b72 "a Jump to now pill at
   the top of the Wik page / Bookmarks / hashtag rooms / a person's page") */
.wk-kit-jumppill.wk-kit-jumppill-top { top: 12px; bottom: auto; }

/* ── D2: dialog additions (core/dialogs.js chooseMany, closeTitle) ──────────────────────────────────────────────────────── */
.wk-dialog-check { display: flex; align-items: center; gap: 16px; cursor: pointer; }
.wk-dialog-check input { width: 18px; height: 18px; accent-color: var(--c-accent-shown); }
.wk-dialog-closetitle { display: flex; align-items: center; padding: 8px 4px 0 20px; }
.wk-dialog-closetitle-text { flex: 1 1 auto; min-width: 0; color: var(--c-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wk-dialog-x { flex: 0 0 auto; width: 48px; height: 48px; color: var(--c-subtext); font-size: 18px; display: flex; align-items: center; justify-content: center; }


/* r2 additions: dialogs.view's content; two-line list items (J: Android's kind / whitelist / users rows break lines) */
.wk-dialog-view { overflow: auto; padding: 4px 20px 8px 20px; min-height: 0; }
.wk-dialog-item { white-space: pre-line; }
.wk-kit-listitem { display: flex; flex-direction: column; width: 100%; min-height: 48px; padding: 8px 24px; text-align: start; justify-content: center; }
.wk-kit-listtitle { color: var(--c-text); }
.wk-kit-listsub { color: var(--c-subtext); white-space: pre-line; }
.wk-kit-iconbtn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; cursor: pointer; }
.wk-kit-iconbtn .wk-kit-iconbtn-glyph { width: 100%; height: 100%; display: block; }
.wk-kit-words { pointer-events: none; }
/* r2: a tab page sits BELOW the start page's header (Android keeps renderWalletChip's header above every tab page) */
.wk-page.wk-page-tab { top: var(--start-head, 0px); }
/* r2: a hashtag face (core identity.js hashtagFace) */
.wk-hashface { position: relative; display: inline-block; flex: 0 0 auto; }
.wk-hashtile { position: relative; display: block; }
.wk-hashtile > .wk-hashword { position: absolute; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 700; line-height: 1; z-index: 1; }
.wk-hashface > .wk-hashmark { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font-weight: 700; line-height: 1; z-index: 2; }
/* r3: a two-line list-dialog item (dialogs.choose {label, sub}); kit rows' titles wrap a long wallet address */
.wk-dialog-itemsub { display: block; color: var(--c-subtext); overflow-wrap: anywhere; }
.wk-dialog-item { overflow-wrap: anywhere; }
/* r3 (K's FOR THE ASSEMBLY 7): the Motion effects setting holds the core's motion still too (root data-wk-motion="still") */
:root[data-wk-motion="still"] .wk-kit-foldchevron { transition: none; }
/* r3: an emoji whose picture is still decoding is a box of its size (icons.emojiImg); the picture fills it once decoded */
.wk-emoji-box { position: relative; }
.wk-emoji-box > .wk-emoji-boxed { width: 100%; height: 100%; display: block; }
/* r4: the splitter between the panes (app.js wireSplitter) -- a 6 px grip over the left pane's hairline; two panes only */
.wk-split { flex: 0 0 6px; margin-inline-start: -3px; margin-inline-end: -3px; cursor: col-resize; z-index: 3; position: relative; background: transparent; }
.wk-split:hover, .wk-split:focus-visible { background: var(--c-divider-strong, var(--c-card-border)); }
.wk-app[data-layout="one"] .wk-split { display: none; }
/* W1/70 DLY: two panes and nothing belongs in the left pane (app.js leftWanted) -- it is set aside WHOLE: out of the row (the room
   screen takes the window), kept laid out at its own width so its list keeps its scroll and nothing reflows when it comes back
   (app.js makes it inert meanwhile); the splitter goes with it */
.wk-app[data-layout="two"][data-left="off"] .wk-pane-left { position: absolute; left: -100000px; top: 0; bottom: 0;
  width: var(--left-pane, 400px); visibility: hidden; }
.wk-app[data-layout="two"][data-left="off"] .wk-split { display: none; }
/* r4 (R6 #2): THE page head sits at one position on every page -- the head at the page edge, a fixed height; the body has the gutter */
.wk-kit-head { min-height: 64px; box-sizing: border-box; flex-shrink: 0; }   /* r7 (FINAL2): the head never shrinks in a column page */
.wk-kit-pageframe { display: flex; flex-direction: column; min-height: 0; }
.wk-kit-pagebody { padding: 0 16px 24px 16px; display: flex; flex-direction: column; min-height: 0; }
.wk-kit-iconrow { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; }

/* W175B BIDI r4 (W1/75): user text takes its FIRST-STRONG paragraph direction, as Android's TextView (TEXT_DIRECTION_FIRST_STRONG) --
   toast bodies, chip labels (room / user / folder names), list row titles and second lines (kit). A Latin line in the ar layout keeps its period on the right. */
.wk-toast { unicode-bidi: plaintext; }   /* bodies / centred: the paragraph's own leading edge (Android ALIGN_NORMAL) */
/* W175B BIDI r5: a LABEL keeps its place -- its text takes its own direction, its alignment the parent's (Android: the row lays the TextView out) */
.wk-chip-label, .wk-kit-rowtitle, .wk-kit-rowsub { unicode-bidi: plaintext; }
/* W175B BIDI r5b: match-parent did not hold under plaintext (measured); the page direction pins it */
.wk-chip-label:dir(ltr), .wk-kit-rowtitle:dir(ltr), .wk-kit-rowsub:dir(ltr) { text-align: left; }
.wk-chip-label:dir(rtl), .wk-kit-rowtitle:dir(rtl), .wk-kit-rowsub:dir(rtl) { text-align: right; }

/* ── W1/102 R100 round 6 (operator: "Web should have the rotation fixed too, for iOS users") -- the web client is the PHONE's mirror (Android
   canonical). Gate: html[data-wk-web] (set by the web adapter, never by the desktop app) AND a coarse pointer (a phone / tablet browser; a
   desktop browser stays the desktop copy). The desktop app's own layout is unchanged: it never sets data-wk-web.
   (M) port: MessageAdapter.fitPost + PostSide.gravity (AND-M) -- the turned screen: MY posts at the END edge (right; RTL left), the others'
       at the START; widths untouched (the row keeps its 640 / size caps, posts.css); portrait unchanged (MINE_END_IN_PORTRAIT = false).
   (L) port: WikFullScreen.mediaBands / ZoomImageView.fit (AND-T item L) -- the full-screen picture viewer FITS the screen, aspect kept (scaled
       up as fit() does, not only down), in every shape; its bar keeps clear of the notch / home indicator (env(safe-area-*), 0 elsewhere). */
@media (orientation: landscape) and (pointer: coarse) {
  html[data-wk-web] .post-row.post-mine { align-items: flex-end; }
}
@media (pointer: coarse) {
  html[data-wk-web] .room-zoom-img { width: 100%; height: 100%; object-fit: contain; }
  html[data-wk-web] .room-zoom-bar { margin: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
}