.kingdom-chat-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; }
/* Unseen messages (owner, 2026-09-30): the button wears a bold red outline and the unread count
   sits as a small red pill on its top-right corner. The outline rides on box-shadow so it beats
   every theme's border rules and never shifts the layout; the pill's dark ring lifts it off the
   button. `!important` outranks the Classic / Willow `button` rules (see the Monarchy strip's
   theme trap in style.css). */
.kingdom-chat-button.has-unread { border-color: #e03131 !important;
  box-shadow: 0 0 0 2px #e03131, 0 0 .7rem #e0313180 !important; }
.kingdom-chat-badge { position: absolute; top: -.6rem; right: -.6rem; z-index: 1; display: inline-grid;
  place-items: center; min-width: 1.55rem; min-height: 1.55rem; padding: 0 .3rem; border: 2px solid var(--chrome-bg, #1c2028);
  border-radius: 1rem; color: #fff; background: #e03131; font: 700 .78rem/1.3 system-ui, sans-serif;
  box-shadow: 0 .1rem .35rem #0009; }
.kingdom-chat-badge[hidden] { display: none; }
/* The bottom bar's Throne tab wears a bold red filled dot in its upper-right corner while unseen
   kingdom-chat messages exist (owner, 2026-09-30). It sits inside the tab's own box (the bar
   clips overflow) with a dark ring so it reads on the active gold tab too. */
.realm-mobile-tabs button { position: relative; }
.kingdom-chat-dot { position: absolute; top: .3rem; right: .45rem; z-index: 1; width: .65rem; height: .65rem;
  border-radius: 50%; background: #e03131; box-shadow: 0 0 0 2px var(--chrome-bg, #1c2028), 0 0 .45rem #e03131aa; }
.kingdom-chat-dot[hidden] { display: none; }
body.kingdom-chat-open { overflow: hidden; }
#kingdom-chat-room { box-sizing: border-box; width: calc(100% - 1rem); max-width: 42rem; height: min(46rem, calc(100dvh - 1rem)); max-height: calc(100dvh - 1rem); padding: 0; border: 1px solid var(--chrome-border, #866d34); border-radius: .85rem; color: var(--text, #e4e6ee); background: var(--chrome-bg, #1c2028); box-shadow: 0 1rem 4rem #0009; }
#kingdom-chat-room[open] { display: flex; flex-direction: column; }
#kingdom-chat-room::backdrop { background: #000b; }
#kingdom-chat-room button { min-height: 44px; white-space: normal; }
#kingdom-chat-room .chat-heading { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .8rem 1rem .4rem; }
#kingdom-chat-room .chat-header-actions { display: flex; align-items: center; gap: .5rem; }
#kingdom-chat-room h2 { margin: .15rem 0; font-size: 1.2rem; }
#kingdom-chat-room .chat-heading span { color: var(--muted, #b0b6c5); font-size: .8rem; overflow-wrap: anywhere; }
#kingdom-chat-room .chat-status { margin: 0; padding: .25rem 1rem .65rem; font: .8rem/1.5 system-ui, sans-serif; }
#kingdom-chat-room .chat-roster { padding: .5rem 1rem; border-block: 1px solid var(--chrome-border, #866d34); }
#kingdom-chat-room summary { cursor: pointer; min-height: 32px; }
#kingdom-chat-room .chat-roster ul { max-height: 7rem; overflow: auto; display: flex; flex-wrap: wrap; gap: .35rem .8rem; padding: 0; margin: .4rem 0; list-style: none; }
#kingdom-chat-room .chat-history-controls { display: flex; justify-content: center; gap: .5rem; padding: .25rem; }
#kingdom-chat-room [hidden] { display: none; }
#kingdom-chat-room .chat-messages { flex: 1; min-height: 4rem; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: .75rem 1rem; list-style: none; font: .95rem/1.5 system-ui, sans-serif; }
#kingdom-chat-room .chat-date { margin: .6rem 0; text-align: center; color: var(--muted, #b0b6c5); font-size: .75rem; }
#kingdom-chat-room .chat-message { padding: .55rem .7rem; margin: .45rem 0; border: 1px solid #ffffff18; border-radius: .65rem; background: #ffffff06; }
#kingdom-chat-room .chat-own { border-left: 3px solid #c9a44c; }
#kingdom-chat-room .chat-message-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
#kingdom-chat-room .chat-message-meta b { overflow-wrap: anywhere; color: #e5c978; }
#kingdom-chat-room time { font-size: .7rem; color: var(--muted, #b0b6c5); }
#kingdom-chat-room .chat-delete { margin-left: auto; font-size: .7rem; padding: .2rem .5rem; }
#kingdom-chat-room .chat-message p { margin: .15rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#kingdom-chat-room .chat-compose { flex-shrink: 0; padding: .7rem 1rem max(.7rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--chrome-border, #866d34); }
#kingdom-chat-room .chat-compose label { display: block; margin-bottom: .3rem; font-size: .8rem; }
#kingdom-chat-room textarea { display: block; box-sizing: border-box; width: 100%; min-height: 3.25rem; max-height: 8rem; resize: vertical; font: 1rem/1.4 system-ui, sans-serif; }
#kingdom-chat-room .chat-compose > div { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .5rem; }
#kingdom-chat-room small { color: var(--muted, #b0b6c5); font: .7rem/1.4 system-ui, sans-serif; }
@media (max-width: 520px) { #kingdom-chat-room { margin: auto auto 0; width: 100%; height: 90dvh; max-height: 100dvh; border-radius: .85rem .85rem 0 0; } }