/* ═══════════════════════════════════════════════════════════════════════
   world-messages.css — DIRECT MESSAGES in the v2 chat panel (GH #3146).

   Wray's ruling, 2026-09-26, card 4B: "build direct messages now". The
   Messages tab (every conversation, its unread count, the names you have
   blocked) and one conversation tab, whose head carries BLOCK with a confirm
   and a close. Component: public/js/world-messages.js; the frame and the
   tabs it borrows are the chat panel's (world-chat-v2.css,
   world-presence.js extChan).

   Every rule starts at `body.hud-v2 #world-chat-panel`, so with the HUD pass
   off, or FEATURE_WORLD_MESSAGES off (nothing is drawn), this styles nothing.

   ── THE LAYER ───────────────────────────────────────────────────────────
   `corners`, as world-chat-v2.css is, and for its reason: the skin styles
   `#world-chat-panel`'s buttons and this has to answer it by layer, never
   by a specificity race. Sizes read the panel's own tokens (--chat-font,
   --chat-tab-font, --hv-k), so the four chrome scales need no rule here.
   ═══════════════════════════════════════════════════════════════════════ */
@layer base, module, skin, nerm, corners;

@layer corners {

/* ── the borrowed tabs: a name is somebody's own, and may be long ─────── */
body.hud-v2 #world-chat-panel .wp-chan[data-chan='dm'] {
  /* a guest's name is `guest-` and twelve more: at 9em it read "gues..."
     at 1920 (measured on the served page), which names nobody, and at 16em
     "guest-62f06..." with the tab row still 100px short of full (the #3318
     review). 24em holds a whole guest name at the 8px tab font */
  max-width: 24em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* five tabs on a phone: the conversation's name is the one that gives,
   down to a few letters and an ellipsis, so "Messages" never reads "Messa"
   (it did at 390, measured on the served page) and no tab leaves the panel */
body.hud-v2 #world-chat-panel .wp-chan[data-chan='msgs'] { flex: 0 0 auto; }
body.hud-v2 #world-chat-panel .wp-chan[data-chan='dm'] {
  flex: 0 1 auto;
  min-width: 3em;
}
/* ⭐A PHONE'S TAB ROW STAYS INSIDE THE PANEL (the #3318 UI review). A guild
   member has Local, Guild, System and Messages before any conversation, and
   a conversation's tab then shrank to "g..." and sat past the panel's right
   edge (277-301 against 272 at 390), with the Messages badge out there too.
   So on a narrow panel:
     - the conversation has no tab of its own. Its head names who (below),
       and the Messages tab stands for it, drawn selected: pressing it goes
       back to the list, as a sub-page's parent does;
     - the tabs give up a little side padding while Messages is there, the
       badge's room kept. Measured on the served page: a guild member's four
       tabs, with the Messages badge, inside the frame at 390 and 360. */
@media (max-width: 707px) {
  body.hud-v2 #world-chat-panel .wp-chan[data-chan='dm'] { display: none; }
  body.hud-v2 #world-chat-panel:has(.wp-chan.is-on[data-chan='dm']) .wp-chan[data-chan='msgs'] {
    border-image-source: url('/assets/ui/kitb/chat-tabon.png?v=2026-09-24a');
    padding-top: calc(6 * var(--hv-k, 1) * 1px);
    padding-bottom: calc(6 * var(--hv-k, 1) * 1px);
    color: #3b2a18;
  }
  body.hud-v2 #world-chat-panel:has(.wp-chan[data-chan='msgs']) .wc2-tabs {
    padding-left: calc(3 * var(--hv-k, 1) * 1px);
  }
  body.hud-v2 #world-chat-panel:has(.wp-chan[data-chan='msgs']) .wp-chan {
    padding-left: calc(4 * var(--hv-k, 1) * 1px);
    padding-right: calc(4 * var(--hv-k, 1) * 1px);
  }
  body.hud-v2 #world-chat-panel:has(.wp-chan[data-chan='msgs']) .wp-chan[data-unread] {
    padding-right: max(calc(4 * var(--hv-k, 1) * 1px),
      calc(22px * var(--chat-bk, 1) - 3 * var(--hv-k, 1) * 1px + 2px));
  }
}

/* ── the Messages list ───────────────────────────────────────────────── */
body.hud-v2 #world-chat-panel .wm-list {
  display: flex;
  flex-direction: column;
  gap: var(--chat-gap, 2px);
  min-width: 0;
}
body.hud-v2 #world-chat-panel .wm-note,
body.hud-v2 #world-chat-panel .wm-empty {
  margin: 0;
  color: var(--hv-sys, #93b5d8);
}
/* the note (a name that is nobody, a block) stays in sight at the top of
   the list, as the conversation's head does: it had scrolled half out of
   the log (the #3318 review). Solid, and laid over the log's top padding. */
body.hud-v2 #world-chat-panel .wm-note {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #141820;
  box-shadow: 0 calc(var(--chat-font, 16px) * -1.1) 0 0 #141820;
}
body.hud-v2 #world-chat-panel .wm-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  margin: 0;
  padding: calc(2 * var(--hv-k, 1) * 1px) calc(3 * var(--hv-k, 1) * 1px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  color: #e9dcc0;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
body.hud-v2 #world-chat-panel .wm-row:hover { background: rgba(227, 199, 154, .08); }
body.hud-v2 #world-chat-panel .wm-row:focus-visible {
  outline: 2px solid var(--hv-gold-hi, #e3c79a);
  outline-offset: -2px;
}
body.hud-v2 #world-chat-panel .wm-top {
  display: flex;
  align-items: baseline;
  gap: calc(4 * var(--hv-k, 1) * 1px);
  min-width: 0;
}
body.hud-v2 #world-chat-panel .wm-name {
  font-weight: 400;
  color: color-mix(in srgb, var(--c, #e7c77f) 68%, #fff);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
body.hud-v2 #world-chat-panel .wm-at {
  color: var(--hv-mute, #8a98aa);
  flex: 0 0 auto;
}
/* the unread count: chat-badge.png, the tabs' own badge */
body.hud-v2 #world-chat-panel .wm-count {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: calc(22px * var(--chat-bk, 1));
  height: calc(22px * var(--chat-bk, 1));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: url('/assets/ui/kitb/chat-badge.png?v=2026-09-24a') center / 100% 100% no-repeat;
  image-rendering: pixelated;
  font: 400 calc(8px * var(--chat-bk, 1))/1 var(--hv-f-px);
  color: #fff4dc;
}
body.hud-v2 #world-chat-panel .wm-last {
  display: block;
  min-width: 0;
  color: #cbbd9f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.hud-v2 #world-chat-panel .wm-row.is-new .wm-last { color: #e9dcc0; }

body.hud-v2 #world-chat-panel .wm-blocks {
  margin-top: calc(6 * var(--hv-k, 1) * 1px);
  display: flex;
  flex-direction: column;
  gap: var(--chat-gap, 2px);
}
body.hud-v2 #world-chat-panel .wm-blocks-head {
  margin: 0;
  color: var(--hv-mute, #8a98aa);
}
body.hud-v2 #world-chat-panel .wm-brow {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--hv-k, 1) * 1px);
  min-width: 0;
}
body.hud-v2 #world-chat-panel .wm-bname {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #cbbd9f;
}

/* ── one conversation's head: who, BLOCK, close ──────────────────────── */
body.hud-v2 #world-chat-panel .wm-head {
  position: sticky;
  top: 0;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* ONE ROW (the #3318 review): wrapped, the name took the first row and
     dropped the close onto a second, straight under BLOCK, where its touch
     area covered most of BLOCK and a tap on BLOCK closed the conversation.
     Only a question (the block confirm, "You blocked ...") takes a row of
     its own, above its buttons. */
  flex-wrap: nowrap;
  gap: calc(4 * var(--hv-k, 1) * 1px);
  min-width: 0;
  padding: calc(2 * var(--hv-k, 1) * 1px) 0;
  /* solid: a line scrolled under the head must not show through it */
  background: #141820;
  /* and nothing above it either: the open log keeps one line of padding
     for its top fade (world-chat-v2.css), and a sticky head stops at that
     padding, so a line scrolled past showed in the gap (measured at 390).
     The same colour, one line tall, laid over the gap */
  box-shadow: 0 calc(var(--chat-font, 16px) * -1.1) 0 0 #141820;
  border-bottom: 1px solid rgba(227, 199, 154, .25);
}
body.hud-v2 #world-chat-panel .wm-head.is-ask { flex-wrap: wrap; }
/* the name gives way first, down to an ellipsis, so the buttons keep their
   row */
body.hud-v2 #world-chat-panel .wm-head .wm-name { flex: 1 1 0; min-width: 0; }
/* "online · <place>" after the name, inside it (#2783 slice 3): the name's
   ellipsis cuts this first, so the name always reads */
body.hud-v2 #world-chat-panel .wm-name .wm-online {
  margin-left: .25em;
  color: var(--hv-mute, #8a98aa);
}
body.hud-v2 #world-chat-panel .wm-name .wm-online[hidden] { display: none; }
body.hud-v2 #world-chat-panel .wm-ask {
  flex: 1 1 100%;
  color: var(--hv-gold-hi, #e3c79a);
}
/* ⭐THE HEAD NAMES WHO YOU ARE TALKING TO, ON A PHONE TOO (the #3318 UI
   review). It was hidden below 600px on the grounds that the tab named the
   person, but on a phone the tab is cut to "gue..." (and to "g..." with five
   tabs), so nothing on screen said who. The head is one row either way, so
   the name costs no height: it takes the space left of BLOCK and cuts off
   with an ellipsis. */
/* the head's lines follow it, not the log's foot: a short conversation
   reads from its top under the head */
body.hud-v2 #world-chat-panel .wm-head + .wp-line { margin-top: 0; }

/* a small slate button (btn.png, slice 3 3 5 3), small capitals */
body.hud-v2 #world-chat-panel .wm-btn {
  flex: 0 0 auto;
  box-sizing: border-box;
  margin: 0;
  border-style: solid;
  border-width: calc(3 * var(--hv-k, 1) * 1px) calc(3 * var(--hv-k, 1) * 1px)
    calc(5 * var(--hv-k, 1) * 1px) calc(3 * var(--hv-k, 1) * 1px);
  border-image: url('/assets/ui/kitb/btn.png?v=2026-09-24a') 3 3 5 3 fill /
    calc(3 * var(--hv-k, 1) * 1px) calc(3 * var(--hv-k, 1) * 1px)
    calc(5 * var(--hv-k, 1) * 1px) calc(3 * var(--hv-k, 1) * 1px) stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: calc(2 * var(--hv-k, 1) * 1px) calc(5 * var(--hv-k, 1) * 1px) calc(1 * var(--hv-k, 1) * 1px);
  /* never under the pixel face's own 8px: at 1366 the tab font is 6 to 7px
     and these read as smudges (the #3318 review) */
  font: 400 max(var(--chat-tab-font, 8px), 8px)/1.2 var(--hv-f-px);
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #e9dcc0;
  text-shadow: none;
  white-space: nowrap;
  image-rendering: pixelated;
  cursor: pointer;
}
body.hud-v2 #world-chat-panel .wm-btn.wm-danger {
  border-image-source: url('/assets/ui/kitb/btngold.png?v=2026-09-24a');
  color: #2a1c0c;
}
body.hud-v2 #world-chat-panel .wm-btn:hover { filter: brightness(1.08); }
body.hud-v2 #world-chat-panel .wm-btn:focus-visible,
body.hud-v2 #world-chat-panel .wm-x:focus-visible {
  outline: 2px solid var(--hv-gold-hi, #e3c79a);
  outline-offset: 1px;
}
/* close.png, whole: a conversation shuts back to the Messages list */
body.hud-v2 #world-chat-panel .wm-x {
  flex: 0 0 auto;
  width: calc(13 * var(--hv-k, 1) * 1px);
  height: calc(14 * var(--hv-k, 1) * 1px);
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url('/assets/ui/kitb/close.png?v=2026-09-24a') center / 100% 100% no-repeat;
  box-shadow: none;
  image-rendering: pixelated;
  cursor: pointer;
}
/* a thumb's target: 44 on a touch screen. The head's buttons keep their
   drawn size and reach 44 with a transparent box around them, as the tabs
   do (world-chat-v2.css): drawn at 44 they filled a phone's small log and
   hid the conversation under its own head (measured at 390). */
@media (pointer: coarse) {
  body.hud-v2 #world-chat-panel .wm-btn,
  body.hud-v2 #world-chat-panel .wm-x { position: relative; }
  body.hud-v2 #world-chat-panel .wm-btn::after,
  body.hud-v2 #world-chat-panel .wm-x::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  /* the close's touch area reaches 15.5px either side of its drawn 13px:
     whatever sits before it keeps 16px clear, so no tap on BLOCK (or
     CANCEL, or UNBLOCK) lands on the close (the #3318 review's blocker) */
  body.hud-v2 #world-chat-panel .wm-head > :nth-last-child(2) { margin-right: 16px; }
  /* ...and the close keeps the same 15.5px clear of the log's right edge:
     flush against it, the touch area ran past the log, which cut it to
     about 28px wide and made the log 16px wider than itself (the #3318 UI
     review) */
  body.hud-v2 #world-chat-panel .wm-head > .wm-x { margin-right: 16px; }
  body.hud-v2 #world-chat-panel .wm-row { min-height: 44px; }
  /* ⛔A BLOCKED NAME'S ROW IS AS TALL AS ITS TOUCH AREA (the #3318 UI
     review's blocker). The rows were drawn 23px apart with each UNBLOCK's
     touch area 44px tall, so the next row's area lay over the lower half of
     the button above it: a tap in the middle of one UNBLOCK unblocked the
     next player, with no confirm. A 44px row holds its button's whole area. */
  body.hud-v2 #world-chat-panel .wm-brow { min-height: 44px; }
}

/* ⭐A GUEST WHO CANNOT WRITE READS THE WHOLE LOG (the #3318 UI review).
   On the Messages and conversation tabs the input is disabled for them (it
   says so, and the gold CONNECT WALLET TO TALK button under it is the way
   in), and on a phone the two left a 71px log: the head and one and a half
   lines of the conversation. The disabled input goes on these two tabs
   only; the button stays, and says the same thing. It is never focusable
   while disabled, so hiding it cannot swallow a hotkey (world-chat-v2.css
   on why the form is display:none at rest). */
body.hud-v2 #world-chat-panel:has(.wp-chan.is-on[data-chan='dm'], .wp-chan.is-on[data-chan='msgs']):has(#world-chat.wp-muted) .wc2-formslot {
  display: none;
}

/* at rest the panel shows its last lines, never a control: the head and
   the list's buttons are for the open panel */
body.hud-v2 #world-chat-panel[data-state='rest'] .wm-head,
body.hud-v2 #world-chat-panel[data-state='rest'] .wm-blocks { display: none; }

} /* end of @layer corners */