.community-status { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
#community-mine { padding: 10px; margin-bottom: 12px; background: var(--surface-selected); border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.community-rank-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.community-rank-row button { text-align: left; overflow-wrap: anywhere; min-width: 0; min-height: 44px; padding: 4px; border: 0; background: none; color: var(--even); }
.community-rank-row span { white-space: nowrap; font-size: 12px; }
.community-rank-row .community-rank-clan { white-space: normal; overflow-wrap: anywhere; min-width: 0; }


/* 🏆 Sıralama: its own dock panel next to the chat, same docked-window skin (the shared selector lists in style.css / iso-theme*.css name it). */
#ranking-panel { position: fixed; left: 14px; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 66px); z-index: var(--z-chrome);
  width: min(580px, calc(100vw - 28px)); max-height: min(78dvh, 720px); display: flex; flex-direction: column; padding: 0; border-radius: 12px; overflow: hidden; }
@media (min-width: 761px) and (pointer: fine) { #ranking-panel { left: 70px; width: min(580px, calc(100vw - 86px)); } }
#ranking-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex: none; padding: var(--space-1) 8px; background: var(--surface-inset); border-bottom: 1px solid var(--line); }
#ranking-panel .ranking-heading { padding-left: 5px; font: 700 14px/1.2 var(--font-display); color: var(--ink); }
#ranking-panel > header button:enabled { margin: 0; min-width: var(--touch-target); min-height: var(--touch-target); padding: 2px 6px; border: 0; border-image: none; background: transparent; box-shadow: none; color: var(--ink); font-size: 13px; }
#ranking-content { flex: 1; overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 12px; background: var(--surface); }
#ranking-content h3, #ranking-content h4 { margin: 0 0 8px; }
#ranking-content button { min-height: 44px; }

/* The ranking tabs are the shared .ui-tabs strip: their look lives in community-ranking.css (and ui-modern-a-screens.css for the graphite skin). */

/* ---- One-stream chat (2026-11-03) -------------------------------------------------------------------------------------------
   Genel, Lonca and whispers in one list. #chat[data-chat-mode] is off | hidden (the 💬 pill) | compact | expanded.
   `hidden` on #chat only says "not an open sheet" (render-hud.js .sheet-open): the compact box is shown by the [data-chat-mode="compact"]
   rule below, which outranks the global [hidden] one. Selectors are doubled (#chat#chat) so they beat the theme layers' `html.iso :is(#chat…)`. */
#chat { --chat-line: 17.5px; --chat-lines: 6; --chat-clamp: 6; --chat-row-h: 34px; --chat-lonca: #2f7d4a; --chat-whisper: #b3366f; }
html.iso #chat { --chat-lonca: #8fe0a8; --chat-whisper: #ffb0d6; } /* >= 4.5:1 on the dark compact box even over a bright map (2026-11-03) */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1100px), (max-height: 500px) and (max-width: 1100px) { #chat { --chat-lines: 4; --chat-clamp: 3; --chat-line: 16px; } } /* phones: 13px / 16px, a log of 64 px of text (70 px box): three-four one-line messages, or two that wrap */
@media (pointer: coarse), (max-width: 760px) { #chat { --chat-row-h: 44px; } } /* touch targets of the input row: 44 px (test/responsive.playwright.mjs sweeps for 43.5) */

/* Top bar: [title] [grabber: drag up opens, down closes] [⌃] [–]. The grabber takes the space between the title and the buttons (nothing overlaps). */
#chat-bar { position: relative; display: flex; align-items: center; gap: 2px; flex: none; min-height: 30px; padding: 0 4px 0 8px; }
#chat-bar > #chat-grab:enabled { position: relative; flex: 1 1 auto; align-self: stretch; width: auto; min-width: 0; min-height: 0; padding: 0; border: 0; border-image: none; border-radius: 0; background: transparent; box-shadow: none; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
#chat-grab::before { content: ''; position: absolute; top: 5px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--muted); opacity: .55; }
#chat-grab:focus-visible { outline: 3px solid var(--even); outline-offset: -4px; }
#chat .chat-heading { position: relative; order: -1; display: none; padding-left: 5px; font: 700 14px/1.2 var(--font-display); pointer-events: none; }
#chat[data-chat-mode="expanded"] .chat-heading { display: block; }
#chat-bar :is(#chat-expand, #chat-close):enabled { position: relative; z-index: 1; flex: none; width: 34px; min-width: 0; height: 30px; min-height: 0; margin: 0; padding: 0; border: 0; border-image: none; border-radius: 6px; background: transparent; box-shadow: none; color: var(--ink); font-size: 17px; line-height: 1; }
#chat-bar #chat-expand:enabled { margin-left: auto; }
@media (pointer: coarse), (max-width: 760px) { #chat-bar { min-height: 36px; } #chat-bar :is(#chat-expand, #chat-close):enabled { width: 40px; height: 36px; } }

/* Geometry, chat view. Desktop: bottom-left beside the dock's icon column. */
#chat#chat:is([data-chat-mode="compact"], [data-chat-mode="expanded"]) {
  position: fixed; left: 70px; right: auto; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px) + 14px); width: min(360px, calc(100vw - 86px)); max-width: none;
  height: auto; margin: 0; transform: none; overflow: visible; border-radius: 12px; }
#chat#chat[data-chat-mode="compact"] { display: flex !important; max-height: none; border: 1px solid var(--border-soft); border-image: none;
  background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
#chat#chat[data-chat-mode="expanded"] { max-height: 40dvh; }
/* The on-screen keyboard (mobile-ui.js publishes --keyboard-inset / .keyboard-open on every width): the box sits on top of it. This used to live only in the phone block below, so at 761 px
   (a tablet in portrait, width past the phone threshold) the input stayed under the keyboard (2026-11-11: #chat-input bottom 657 with a 430 px visible viewport). */
.keyboard-open #chat#chat:is([data-chat-mode="compact"], [data-chat-mode="expanded"]) { bottom: calc(var(--keyboard-inset, 0px) + env(safe-area-inset-bottom, 0px)); max-height: calc(var(--visible-h, 100dvh) - 16px); }
#chat[data-chat-mode="compact"] :is(#chat-subbar, #chat-blocked-list) { display: none; }

/* The list: compact shows the last lines only (oldest fade out under the top edge); expanded scrolls. */
#chat#chat #chat-messages { gap: 1px; padding: 3px 8px; background: transparent; transition: opacity .4s; }
/* Compact: a fixed box of whole lines. chat-ui.js fitCompact() hides the rows that do not fit (no half-cut line, no name outside the box). */
#chat#chat[data-chat-mode="compact"] #chat-messages { flex: none; box-sizing: border-box; height: calc(var(--chat-lines) * var(--chat-line) + 6px); min-height: 0; gap: 0; overflow: hidden; justify-content: flex-end; }
#chat#chat .chat-msg.chat-clamp { max-height: calc(var(--chat-clamp) * var(--chat-line)); overflow: hidden; }
#chat#chat[data-chat-mode="expanded"] #chat-messages { flex: 1 1 auto; min-height: 60px; overflow-y: auto; }
#chat#chat.chat-faded #chat-messages { opacity: .35; }
#chat#chat:focus-within #chat-messages { opacity: 1; }
@media (hover: hover) { #chat#chat:hover #chat-messages { opacity: 1; } } /* touch: chat-ui.js wakes the log on tap */
@media (prefers-reduced-motion: reduce) { #chat#chat #chat-messages { transition: none; } }

/* One line per message: [Lonca] Name: text. Nothing but the colour and the prefix says which channel it is. */
#chat#chat .chat-msg:not(.chat-bubble-cini) { border: 0; border-radius: 0; box-shadow: none; }
#chat#chat .chat-msg { display: block; align-self: stretch; max-width: 100%; margin: 0; padding: 0 2px; background: transparent; font-size: 13px; line-height: var(--chat-line); overflow-wrap: anywhere; }
#chat#chat .chat-msg > :is(b, span, i) { display: inline; margin: 0; font-size: inherit; }
#chat#chat .chat-msg > b { font-weight: 700; }
#chat#chat .chat-msg > span::before { content: ': '; }
#chat#chat .chat-ch-ozel:not(.chat-own) > span::before { content: ' '; }
#chat#chat .chat-msg > small { display: inline; margin: 0 0 0 6px; text-align: left; font-size: 11px; }
#chat#chat .chat-msg > small.chat-title { margin: 0 4px; }
#chat#chat[data-chat-mode="compact"] .chat-msg > small:not(.chat-title) { display: none; }
/* The space itself is text (chat-ui.js marker()); the margin only widens it, because the row rule above zeroes inline margins at equal weight. */
#chat#chat .chat-msg > i.chat-pre { margin: 0 2px 0 0; font-style: normal; font-weight: 700; }
#chat#chat .chat-msg > i.chat-pre-from { margin: 0 3px 0 2px; }
#chat#chat .chat-ch-lonca :is(.chat-pre, span), #chat#chat .chat-ch-lonca > b:not([class*="chat-name-"]) { color: var(--chat-lonca); }
#chat#chat .chat-ch-ozel :is(.chat-pre, span), #chat#chat .chat-ch-ozel > b:not([class*="chat-name-"]) { color: var(--chat-whisper); }
#chat#chat .chat-ch-ozel > b:not([class*="chat-name-"]) { font-style: italic; }
#chat#chat .chat-msg .chat-actions { display: inline-flex; margin: 0 0 0 6px; }
#chat#chat .chat-name { cursor: var(--cursor-pointer, pointer); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media (hover: hover) { #chat#chat .chat-name:hover { text-decoration: underline; } }
#chat#chat .chat-name:focus-visible { outline: 2px solid var(--even); outline-offset: 1px; }
#chat#chat .chat-msg.chat-mentioned { background: var(--surface-selected); }
#chat#chat .chat-msg.chat-supporter > span { color: #775011; }
html.iso #chat#chat .chat-msg.chat-supporter > span { color: #e6bf62; }
#chat#chat .chat-msg.chat-supporter.chat-ch-lonca > span { color: var(--chat-lonca); }
#chat#chat .chat-msg.chat-supporter.chat-ch-ozel > span { color: var(--chat-whisper); }

/* Input row: [Genel ▾ | → Nick] [✕] [input] [➤]. The row takes the target's colour. */
#chat#chat #chat-form { display: flex; align-items: center; gap: 4px; padding: 4px; border-top: 1px solid var(--line); background: transparent; position: relative; }
#chat#chat #chat-channel:enabled { flex: none; max-width: 42%; min-width: 0; height: var(--chat-row-h); min-height: 0; padding: 0 9px; border: 1px solid var(--border-soft); border-image: none; border-radius: var(--radius-pill);
  background: var(--surface-raised); box-shadow: none; color: var(--ink); font: 700 12px/1 var(--font-body); white-space: nowrap; }
#chat-channel-label { display: block; overflow: hidden; text-overflow: ellipsis; }
#chat#chat[data-target="lonca"] #chat-channel:enabled { color: var(--chat-lonca); border-color: var(--chat-lonca); }
#chat#chat[data-target="ozel"] #chat-channel:enabled { color: var(--chat-whisper); border-color: var(--chat-whisper); }
#chat#chat #chat-target-clear:enabled { flex: none; width: var(--chat-row-h); min-width: 0; height: var(--chat-row-h); min-height: 0; margin-left: -2px; padding: 0; border: 0; border-image: none; border-radius: 50%;
  background: transparent; box-shadow: none; color: var(--muted); font-size: 13px; }
#chat#chat #chat-form input#chat-input { flex: 1 1 0; min-width: 0; height: var(--chat-row-h); min-height: 0; box-sizing: border-box; padding: 0 10px; }
#chat#chat[data-target="ozel"] #chat-form input#chat-input { border-color: var(--chat-whisper); }
#chat#chat #chat-send { flex: none; width: var(--chat-row-h); min-width: 0; height: var(--chat-row-h); min-height: 0; padding: 0; border-width: 4px; font-size: 14px; line-height: 1; }

/* Popovers over the input row: channel picker and the name menu (both text-only, built in chat-ui.js). */
#chat-form :is(#chat-picker, #chat-menu) { position: absolute; left: 4px; bottom: calc(100% + 4px); z-index: 3; display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; width: min(260px, calc(100% - 8px));
  max-height: min(280px, 40dvh); overflow-y: auto; overscroll-behavior: contain; padding: 4px; border: 1px solid var(--border-soft); border-radius: 10px; box-shadow: var(--shadow-panel);
  background: linear-gradient(var(--surface), var(--surface)) #14161a; } /* opaque: the themes' --surface can be translucent and the log must not show through */
.chat-picker-list { display: flex; flex-direction: column; gap: 2px; }
#chat-menu > strong { padding: 4px 10px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
:is(#chat-picker, #chat-menu) button:enabled { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; min-height: 36px; padding: 4px 10px; border: 0; border-image: none; border-radius: 8px;
  background: transparent; box-shadow: none; color: var(--ink); font-size: 13px; text-align: left; overflow-wrap: anywhere; }
#chat-picker button.on:enabled { background: var(--surface-selected); }
@media (hover: hover) { :is(#chat-picker, #chat-menu) button:enabled:hover { background: var(--surface-selected); } }
#chat-picker .chat-pick.online::before, #chat-picker .chat-pick.unread::after { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; }
#chat-picker .chat-pick.online::before { background: var(--good); }
#chat-picker .chat-pick.unread::after { margin-left: auto; background: #e5589c; } /* pink: whisper waiting */
#chat-picker-search { width: 100%; min-width: 0; min-height: 36px; box-sizing: border-box; padding: 4px 10px; font-size: 16px; }
.chat-picker-list:empty { display: none; }

/* The 🏆 ranking panel opens over the same corner (desktop: beside the dock, phone: a sheet): the compact box steps aside while it is open. */
body:has(#ranking-panel:not([hidden])) #chat#chat[data-chat-mode="compact"] { display: none !important; }

/* A docked window (#panel), the village-move picker (#pick), a target card (#nav's .row2.head: player, camp, oasis, pirate, guest) or the placement card steps the box
   aside on every screen size (desktop: the 560px panel reaches x 360-920, the box x 70-430). Plain "#nav:not([hidden])" would hide it for good: the city shows #nav always.
   Keep in step with COVER_SEL in chat-ui.js. */
body:has(:is(#panel, #pick):not([hidden]), #nav:not([hidden]) .row2.head) #chat#chat[data-chat-mode="compact"] { display: none !important; }
/* Expanded + a window open on desktop: the box moves to the left edge (the dock is hidden then, .sheet-open) and narrows so the panel stays clear. */
@media (min-width: 761px) { body:has(#panel:not([hidden])) #chat#chat[data-chat-mode="expanded"] { left: 14px; width: min(340px, calc(100vw - 28px)); } }
/* The panel's 💬 (.win-chat) carries the unread dot while the box itself is hidden. */
body:has(#chat-badge:not([hidden])) #panel .win-chat { position: relative; }
body:has(#chat-badge:not([hidden])) #panel .win-chat::after { content: ''; position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 50%; background: #e5589c; box-shadow: 0 0 0 2px var(--surface-inset, #fff); }

/* Desktop too (the phone block below has its own copy): a dock popover opens beside its button, right over the compact box in the same corner, so the box steps aside
   until it closes. The İlerleme panel (#quest-tracker.progress-dock) is at the right edge and does not count. The expanded box needs no rule: opening it closes the
   popovers (render-hud.js syncSheetState) and a dock press closes it (quick-dock.js). */
body:has(:is(#quest-tracker:not(.progress-dock), #alerts, #announce, #online-list, #dock-more).quick-open) #chat#chat[data-chat-mode="compact"] { display: none !important; }
/* Two dock popovers are not .quick-open panels: 📊 Durum (#status-pop opened from the dock; data-arrow="off", the HUD-anchored ones are "on" and sit under the resource bar) and the 📬 Posta inbox; the 🗺️ #layers-panel (main.js) is a standalone section beside the rail, same corner. */
body:has(:is(#status-pop[data-arrow="off"], #admin-inbox, #layers-panel):not([hidden])) #chat#chat[data-chat-mode="compact"] { display: none !important; }

/* The dock's 💬 is the pill of the HIDDEN state only; while the box is shown it is redundant (the box's – hides it again). */
body:has(#chat:is([data-chat-mode="compact"], [data-chat-mode="expanded"])) #quick-dock #chat-toggle { display: none !important; }

/* An unread whisper: pink dot on the 💬 pill (the count badge sits top right, the dock caption uses ::after). */
#chat-toggle.has-whisper::before { content: ''; position: absolute; top: 1px; left: 1px; width: 11px; height: 11px; border-radius: 50%; background: #e5589c; box-shadow: 0 0 0 2px var(--surface-raised, #fff); }

/* Expanded: the strips above the list come back; the list scrolls. */
#chat > :is(#chat-bar, #chat-subbar, #chat-blocked-list, #chat-form) { flex: none; }
#chat-blocked-list { max-height: 80px; overflow-y: auto; }
#chat #chat-blocked-list button { min-height: 40px; padding: 3px 8px; font-size: 12px; overflow-wrap: anywhere; }
#chat-subbar { display: flex; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 0 12px; border-bottom: 1px solid var(--line); }
#chat-lonca-open::before { content: '🤝 '; }
/* Kayıtlar › Lonca: davet satırı (invite-row.js) ve "Lonca kur" katlaması. */
/* Kod ve "Kodun:" tek satırda kalır; sığmazsa taşan taraf düğme metnidir (ikiye bölünebilir), kod değil. */
#panel .row.invite-row, #panel .row.lonca-find { flex-wrap: nowrap; } /* #panel .row wraps by default; here the button/field must stay on the row */
#panel .invite-row .grow b { white-space: nowrap; font-size: 15px; }
#panel .invite-row .invite-code { font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { #panel .invite-row { gap: 4px; } #panel .invite-row .ico { width: 22px; font-size: 18px; } #panel .invite-row button { min-width: 80px; padding-inline: 2px; } #panel .invite-row .grow small { overflow-wrap: anywhere; } } /* the line keeps the body size (15 px): it wraps at 320 px instead of shrinking to --text-xs */
#panel .invite-row button { flex: 0 1 auto; min-height: 44px; min-width: 88px; max-width: 100%; white-space: normal; }
#panel details.invite-fold { margin: var(--space-2) 0; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-inset); }
#panel details.invite-fold > summary { display: flex; align-items: center; min-height: 44px; padding: 4px 12px; cursor: var(--cursor-pointer, pointer); font-weight: 700; font-size: var(--text-sm); color: var(--ink); }
#panel .invite-fold-body { padding: 0 var(--space-2) var(--space-2); }
/* "➕ Lonca kur" arama alanıyla aynı satırda; düğme sığmazsa metni değil kutuyu daraltır (arama alanı küçülür). */
#panel .row .lonca-create-toggle { flex: none; min-height: 44px; white-space: nowrap; }
#panel .row #lonca-search { flex: 1 1 0; min-width: 0; width: auto; }
#panel #lonca-create-form[hidden] { display: none; }
#chat #chat-subbar button { flex: none; max-width: 50%; min-height: 32px; margin: 0 0 0 auto; padding: 2px 6px; border: 0; border-image: none; background: none; box-shadow: none; font-size: 12px; text-decoration: underline; color: var(--muted); overflow-wrap: anywhere; text-align: right; }
#chat #chat-subbar #chat-lonca-open { margin-left: 0; text-align: left; }
/* Touch: 44px targets (the box keeps its look: the compact corner buttons get an invisible 44x44 hit area). */
@media (pointer: coarse) {
  #chat #chat-subbar button { min-height: 44px; }
  #chat#chat[data-chat-mode="compact"] #chat-bar :is(#chat-expand, #chat-close):enabled { position: relative; }
  #chat#chat[data-chat-mode="compact"] #chat-bar :is(#chat-expand, #chat-close):enabled::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
}

/* Phones and touch tablets: the compact box rests on the action bar to the right of the dock's icons; expanded takes the full width
   (the dock is hidden then: .sheet-open). While the docked #panel is open the compact box steps aside. */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1100px), (max-height: 500px) and (max-width: 1100px) {
  /* 24px above the bar: the OSM attribution line (#attrib) sits right on it and must stay readable. */
  #chat#chat[data-chat-mode="compact"] { left: calc(var(--edge-left) + 56px); right: var(--edge-right); width: auto; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 24px);
    backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* No header row on phones: ⌃ and – float in the top-right corner over the log (the top line keeps a gutter for them). */
  #chat#chat[data-chat-mode="compact"] #chat-bar { position: absolute; top: 2px; right: 3px; z-index: 2; min-height: 0; padding: 0; gap: 1px; pointer-events: none; }
  #chat#chat[data-chat-mode="compact"] #chat-grab { display: none; }
  #chat#chat[data-chat-mode="compact"] #chat-bar :is(#chat-expand, #chat-close):enabled { width: 26px; height: 19px; pointer-events: auto; border-radius: 10px; font-size: 12px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
  #chat#chat[data-chat-mode="compact"] .chat-msg.chat-top { padding-right: 56px; }
  #chat#chat[data-chat-mode="expanded"] { left: var(--edge-left); right: var(--edge-right); width: auto; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
    max-height: min(40dvh, calc(var(--visible-h, 100dvh) - var(--top-h) - var(--bar-h) - 24px - env(safe-area-inset-top))); border-radius: 14px 14px 0 0; }
  /* The map-pack progress pill (iso-preload.css, bottom centre, z 6) would sit behind the compact box: it goes above it while it downloads. */
  body:has(#chat[data-chat-mode="compact"]) #iso-preload#iso-preload { bottom: calc(var(--bar-h, 72px) + env(safe-area-inset-bottom, 0px) + 24px + 126px); }
  .keyboard-open #chat#chat:is([data-chat-mode="compact"], [data-chat-mode="expanded"]) { bottom: calc(var(--keyboard-inset, 0px) + env(safe-area-inset-bottom)); left: var(--edge-left); }
  body:has(.action-card) #chat#chat[data-chat-mode="compact"] { display: none !important; } /* the placement card (placement-card.js) */
  /* ...and for the quick popovers (☷ grid, online list, announcements, alerts, quests): they open in the same corner and must take the taps. */
  body:has(:is(#quest-tracker, #alerts, #announce, #online-list, #dock-more).quick-open) #chat#chat[data-chat-mode="compact"] { display: none !important; }
  body:has(:is(#status-pop[data-arrow="off"], #admin-inbox, #layers-panel):not([hidden])) #chat#chat[data-chat-mode="compact"] { display: none !important; }
}

/* Cosmetic chat looks (Hatıra Pulu, stat-free). Colours hold >= 5:1 on every chat surface (own, mentioned, plain). */
:is(#chat, .shop-stage) .chat-msg .chat-name-lale { color: #a3121a; }
:is(#chat, .shop-stage) .chat-msg .chat-name-bogaz { color: #17508f; }
:is(#chat, .shop-stage) .chat-msg .chat-name-cinar { color: #2b5d24; }
:is(#chat, .shop-stage) .chat-msg .chat-name-carsi { color: #6a4500; text-shadow: 0 0 6px #e0b04a99; animation: chat-gold-shimmer 3.2s ease-in-out infinite; }
@keyframes chat-gold-shimmer { 50% { text-shadow: 0 0 10px #f0c75ecc, 0 0 2px #fff3c4; } }
/* A short landscape screen (844x390): the quick dock is a ROW at the bottom-left (style.css, max-height 500) where the portrait layout has a column, and the compact box (left of
   the column, 125 px tall) sat on its ☷ key (2026-11-11). The box steps up over the dock row (dock = bar-h + 10 px + 52 px, #dock-more's own +70 line) and keeps two log lines. */
@media (max-height: 500px) and (max-width: 1100px) {
  #chat { --chat-lines: 2; --chat-clamp: 2; }
  #chat#chat[data-chat-mode="compact"] { left: var(--edge-left); bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 72px); }
}
@media (prefers-reduced-motion: reduce) { :is(#chat, .shop-stage) .chat-msg .chat-name-carsi { animation: none; } }
/* Çini bubble: İznik-blue frame and a faint tile dot pattern; the text keeps its normal ink colour. */
:is(#chat, .shop-stage) .chat-msg.chat-bubble-cini { border: 2px solid #245f75; box-shadow: inset 0 0 0 2px #fffaf0, inset 0 0 0 3px #3b86a8;
  background-image: radial-gradient(circle at 50% 50%, #245f7522 0 2px, transparent 3px), radial-gradient(circle at 0 0, #3b86a822 0 2px, transparent 3px);
  background-size: 14px 14px; }