/* Chat dock — right-edge tab + full-height slide drawer */

.chat-dock {
  --chat-tab-w: 2.4rem;
  --chat-panel-w: min(38rem, 44vw);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  /* Never cover the site: only tab (+ panel when open) */
  width: var(--chat-tab-w);
  z-index: 60;
  pointer-events: none;
  font-family: Nunito, system-ui, sans-serif;
}
.chat-dock.is-open {
  width: calc(var(--chat-panel-w) + var(--chat-tab-w));
}

.chat-dock-rail {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  pointer-events: none;
  /* closed: only the tab peeks from the right edge */
  transform: translateX(var(--chat-panel-w));
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.chat-dock.is-open .chat-dock-rail {
  transform: translateX(0);
}

/* When open, hide the edge tab — close only via × so site clicks don't collapse chat */
.chat-dock.is-open .chat-dock-tab {
  visibility: hidden;
  pointer-events: none;
  width: 0;
  min-width: 0;
  flex-basis: 0;
  padding: 0;
  border: 0;
  margin: 0;
  overflow: hidden;
}
.chat-dock.is-open {
  width: var(--chat-panel-w);
}

.chat-dock-tab {
  pointer-events: auto;
  align-self: center;
  position: relative;
  flex: 0 0 var(--chat-tab-w);
  width: var(--chat-tab-w);
  min-height: 7.75rem;
  padding: .9rem .15rem;
  border: 3px solid #3d6c22;
  border-right: 0;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(180deg, #8fd36a 0%, #4e9a3a 100%);
  box-shadow: -3px 4px 0 #2a4f18, -6px 8px 16px rgba(40, 80, 30, .22);
  color: #14320f;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  transition: filter .15s ease;
  z-index: 2;
}

.chat-dock-tab:hover {
  filter: brightness(1.06);
}

.chat-dock-tab-icon {
  display: grid;
  place-items: center;
  line-height: 0;
}

.chat-dock-tab-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: Oxanium, Nunito, sans-serif;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.chat-dock-panel {
  width: var(--chat-panel-w);
  height: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(245,252,240,.78)),
    url("/assets/ui/mc/blocks/grass.png");
  background-size: auto, 48px 48px;
  border-left: 3px solid #3d6c22;
  box-shadow: -10px 0 28px rgba(30, 60, 20, .22);
  overflow: hidden;
}

.chat-dock:not(.is-open) .chat-dock-panel {
  pointer-events: none;
}

.chat-dock-badge {
  position: absolute;
  top: .3rem;
  left: -.4rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .28rem;
  border-radius: 999px;
  background: #c0392b;
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  display: inline-grid;
  place-items: center;
  border: 2px solid #fff;
  cursor: pointer;
  pointer-events: auto;
  z-index: 3;
}
.chat-dock-badge.inline {
  position: static;
  margin-left: auto;
  flex: 0 0 auto;
}
/* Plain unread messages sit next to mentions but must not shout like them. */
.chat-dock-badge.inline.is-plain {
  margin-left: 4px;
  background: #2d6cdf;
}
/* Same blue for the dock tab when there are only plain unread messages. */
.chat-dock-badge.is-plain {
  background: #2d6cdf;
}
.chat-dock-badge:hover {
  filter: brightness(1.08);
}
.chat-dock-unread-jump {
  flex: 0 0 auto;
  min-width: 1.55rem;
  height: 1.55rem;
  padding: 0 .4rem;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #c0392b;
  color: #fff;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(160, 40, 30, .35);
}
.chat-dock-unread-jump:hover {
  filter: brightness(1.08);
}

.chat-dock.is-shake .chat-dock-tab {
  animation: chat-shake .55s ease;
}

@keyframes chat-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

.chat-dock-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .8rem;
  background: linear-gradient(180deg, #6db84f, #3f8a30);
  color: #0f2810;
  border-bottom: 3px solid #2a4f18;
  flex-shrink: 0;
}

.chat-dock-head-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.chat-dock-head-main strong { line-height: 1.1; }
.chat-dock-back,
.chat-dock-close {
  border: 0;
  background: transparent;
  font-size: 1.35rem;
  cursor: pointer;
  color: inherit;
  line-height: 1;
  padding: .15rem .35rem;
}

.chat-dock-toast {
  margin: .4rem .65rem 0;
  padding: .55rem .7rem;
  background: rgba(20, 50, 15, .92);
  color: #e8ffe0;
  border-radius: 10px;
  font-size: .86rem;
  font-weight: 650;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(20, 40, 10, .28);
  opacity: 1;
  transition: opacity .85s ease;
}
.chat-dock-toast.is-fading {
  opacity: 0;
}

.chat-cmd-suggest button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  width: 100%;
  text-align: left;
}
.chat-cmd-suggest code {
  font-weight: 800;
  color: #1a5fb4;
}

.chat-dock-rooms {
  flex: 1;
  overflow: auto;
  padding: .55rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.chat-rules-gate {
  flex: 1;
  overflow: auto;
  padding: .85rem .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  background: linear-gradient(180deg, #fffaf0 0%, #f3efe4 100%);
  color: #1a2b3c;
}
.chat-rules-gate h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #3f9e3a;
}
.chat-rules-body {
  white-space: pre-wrap;
  font-size: .88rem;
  line-height: 1.45;
  flex: 1;
  overflow: auto;
  padding: .55rem .65rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(26, 43, 60, .12);
}
.chat-rules-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.chat-rules-gate .error {
  color: #c0392b;
  margin: 0;
}

.chat-room-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  text-align: left;
  padding: .55rem .65rem;
  border: 2px solid rgba(61, 108, 34, .35);
  border-radius: 10px;
  background: rgba(255,255,255,.72);
  cursor: pointer;
}
.chat-room-item-row {
  display: flex;
  align-items: stretch;
  gap: .35rem;
}
.chat-room-item-row .chat-room-item {
  flex: 1;
  min-width: 0;
}
.chat-notify-btn {
  flex: 0 0 auto;
  width: 2.4rem;
  border: 2px solid rgba(61, 108, 34, .35);
  border-radius: 10px;
  background: rgba(255,255,255,.72);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.chat-notify-btn:hover { background: rgba(255,255,255,.95); }
.chat-notify-btn.is-muted {
  background: rgba(0,0,0,.06);
  opacity: .85;
}
.chat-dock-head .chat-notify-btn {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
}
.chat-room-item:hover { background: rgba(255,255,255,.92); }
.chat-room-emoji {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1;
  border-radius: 10px;
  background: rgba(61, 108, 34, .12);
}
.chat-room-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: .05rem;
}
.chat-room-name { font-weight: 800; color: #1d3d16; }
.chat-room-meta { margin-left: 0; }
.chat-room-lock { opacity: .55; font-size: .85rem; flex: 0 0 auto; }

.chat-dock-thread {
  flex: 1;
  overflow: auto;
  padding: .55rem .65rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  background: rgba(255,255,255,.42);
}

.chat-load-more { align-self: center; margin-bottom: .25rem; }

.chat-day-sep {
  display: flex;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 3;
  margin: .2rem 0 .05rem;
  pointer-events: none;
}
.chat-day-sep span {
  background: rgba(26, 43, 60, .58);
  color: #fff;
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .01em;
  line-height: 1.2;
  padding: .22rem .72rem;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
}

.chat-msg {
  padding: .5rem .55rem;
  border-radius: 10px;
  background: rgba(255,255,255,.55);
  scroll-margin: 2rem;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.chat-msg-row {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding-bottom: .35rem; /* room for badge under the frame */
}
.chat-msg-main { min-width: 0; flex: 1; }
/* Keep frame + badge readable: do not squash the stage to a tiny box */
.chat-msg .avatar-stage.mini {
  width: auto;
  height: auto;
  flex: 0 0 auto;
  --frame-pad: 7px;
  --frame-radius: 10px;
  margin-top: .05rem;
}
.chat-msg .avatar-stage.mini .avatar-ring {
  width: 52px;
  height: 52px;
}
.chat-msg .avatar-stage.mini .avatar-fallback {
  font-size: .92rem;
}
.chat-msg .avatar-frame-badge.mini,
.chat-msg .avatar-stage.mini .avatar-frame-badge {
  right: 1px;
  bottom: -5px;
  min-height: 1.05rem;
  padding: .14rem .34rem .16rem;
  font-size: .42rem;
  border-radius: 4px;
  max-width: calc(100% - 4px);
  letter-spacing: .02em;
}
.chat-ctx-head .avatar-frame-badge.mini {
  right: 1px;
  bottom: -4px;
}
.chat-msg.is-selected {
  background: rgba(110, 180, 80, .28);
  box-shadow: inset 0 0 0 2px rgba(61, 108, 34, .45);
}
.chat-msg-check {
  flex: 0 0 auto;
  width: 1.1rem;
  text-align: center;
  color: #24501c;
  font-size: 1rem;
  line-height: 1.4;
  margin-top: .2rem;
}
.chat-msg-fwd {
  margin-bottom: .15rem;
  color: #3a6a8a;
  font-weight: 700;
}
.chat-msg-reply-quote {
  display: grid;
  gap: .05rem;
  width: 100%;
  text-align: left;
  margin: 0 0 .35rem;
  padding: .3rem .45rem;
  border: 0;
  border-left: 3px solid #4e9a3a;
  border-radius: 0 6px 6px 0;
  background: rgba(78, 154, 58, .12);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.chat-msg-reply-quote strong {
  color: #24501c;
  font-size: .78rem;
}
.chat-msg-reply-quote span {
  color: #3a5234;
  font-size: .78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-select-bar,
.chat-reply-bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .6rem;
  background: rgba(255,255,255,.82);
  border-top: 2px solid rgba(61, 108, 34, .28);
  flex-shrink: 0;
}
.chat-select-bar { justify-content: space-between; font-weight: 750; color: #1d3d16; }
.chat-edit-bar {
  border-top-color: rgba(196, 132, 22, .55);
  background: rgba(255, 248, 226, .92);
}
.chat-edit-bar .chat-reply-bar-text strong { color: #7a4c07; }
.chat-reply-bar-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .05rem;
}
.chat-reply-bar-text strong { color: #24501c; font-size: .85rem; }
.chat-forward-picker {
  position: fixed;
  z-index: 82;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(28rem, calc(100vh - 2rem));
  display: flex;
  flex-direction: column;
  padding: .45rem;
  border: 3px solid #3d6c22;
  border-radius: 12px;
  background: linear-gradient(180deg, #f7fff0, #e4f4d2);
  box-shadow: 0 12px 32px rgba(30, 60, 20, .35);
  pointer-events: auto;
}
.chat-forward-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .25rem .35rem .45rem;
  border-bottom: 1px solid rgba(61,108,34,.25);
  margin-bottom: .35rem;
  color: #1d3d16;
}
.chat-forward-picker-list {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .1rem;
}
.chat-ctx-head {
  padding-bottom: .7rem;
}
.chat-ctx-head .avatar-stage.mini {
  position: relative;
  overflow: visible;
}
.chat-msg.bot { background: rgba(230, 245, 255, .7); border-left: 3px solid #2a7ab8; }
.chat-msg.system { background: rgba(255, 248, 220, .75); }
.chat-msg.is-hl { outline: 2px solid #f0c040; animation: chat-hl 1.2s ease; }
.chat-msg.mentions-me { box-shadow: inset 0 0 0 1px rgba(192, 57, 43, .35); }

.chat-ctx-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(20, 40, 15, .18);
  pointer-events: auto;
}
.chat-ctx-menu {
  position: fixed;
  z-index: 81;
  min-width: 14.5rem;
  max-width: min(18rem, calc(100vw - 1rem));
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: .45rem;
  border: 3px solid #3d6c22;
  border-radius: 12px;
  background: linear-gradient(180deg, #f7fff0, #e4f4d2);
  box-shadow: 0 10px 28px rgba(30, 60, 20, .32);
  display: flex;
  flex-direction: column;
  gap: .2rem;
  pointer-events: auto;
}
.chat-ctx-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .35rem .4rem .55rem;
  border-bottom: 1px solid rgba(61,108,34,.28);
  margin-bottom: .2rem;
}
.chat-ctx-head .avatar-stage.mini {
  flex: 0 0 auto;
  --frame-pad: 6px;
}
.chat-ctx-head .avatar-stage.mini .avatar-ring {
  width: 44px;
  height: 44px;
}
.chat-ctx-head .avatar-stage.mini .avatar-fallback {
  font-size: .82rem;
}
.chat-ctx-head .avatar-frame-badge.mini {
  font-size: .5rem;
  min-height: 1.05rem;
  padding: .12rem .3rem;
}
.chat-ctx-head-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: .05rem;
}
.chat-ctx-head-text strong {
  color: #1d3d16;
  font-size: .95rem;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  max-width: 100%;
}
.chat-ctx-reacts {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: .2rem;
  padding: .15rem .2rem .45rem;
  border-bottom: 1px solid rgba(61,108,34,.22);
  margin-bottom: .15rem;
}
.chat-ctx-react {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  background: rgba(255,255,255,.45);
  border-radius: 8px;
  padding: .35rem .1rem;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.chat-ctx-react:hover {
  background: rgba(110, 180, 80, .35);
  transform: scale(1.08);
}
.chat-ctx-react.is-mine {
  background: rgba(110, 180, 80, .55);
  box-shadow: inset 0 0 0 1.5px rgba(45, 100, 30, .55);
}
.chat-msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: .28rem;
  margin-top: .4rem;
}
.chat-react-chip {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  border: 1px solid rgba(61,108,34,.28);
  background: rgba(255,255,255,.55);
  border-radius: 999px;
  padding: .12rem .4rem .12rem .32rem;
  font: inherit;
  font-size: .88rem;
  line-height: 1.2;
  color: #1d3d16;
  cursor: pointer;
}
.chat-react-chip:hover {
  background: rgba(110, 180, 80, .28);
}
.chat-react-chip.is-mine {
  background: rgba(110, 180, 80, .42);
  border-color: rgba(45, 100, 30, .55);
  font-weight: 750;
}
.chat-react-chip.is-readonly {
  cursor: default;
  opacity: .85;
  pointer-events: none;
}
.chat-react-chip.is-readonly:hover {
  background: rgba(255,255,255,.55);
}
.chat-react-count {
  font-size: .72rem;
  font-weight: 800;
  color: #3d5a32;
  min-width: .7rem;
}
.chat-ctx-item {
  border: 0;
  background: transparent;
  text-align: left;
  padding: .55rem .65rem;
  border-radius: 8px;
  font: inherit;
  font-weight: 750;
  color: #1d3d16;
  cursor: pointer;
}
.chat-ctx-item:hover:not(:disabled) { background: rgba(110, 180, 80, .28); }
.chat-ctx-item:disabled { opacity: .55; cursor: default; }
.chat-ctx-item.danger { color: #8b1e1e; }
.chat-ctx-item.danger:hover:not(:disabled) { background: rgba(192, 57, 43, .16); }
.chat-ctx-item.muted-action {
  color: #5a6e52;
  font-weight: 650;
  margin-top: .1rem;
}

@keyframes chat-hl {
  from { background: rgba(255, 230, 120, .85); }
  to { background: rgba(255,255,255,.55); }
}

.chat-msg-meta {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  margin-bottom: .15rem;
}
.chat-msg-author { font-weight: 800; color: #24501c; font-size: .88rem; }
.chat-bot-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: .08rem .32rem;
  border-radius: 4px;
  background: #2a7ab8;
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.2;
  vertical-align: middle;
  transform: translateY(-1px);
}
.chat-msg-body { font-size: .92rem; color: #1a2e14; word-break: break-word; line-height: 1.35; }
.chat-mention {
  color: #1a5fb4;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dashed rgba(26, 95, 180, .4);
}
a.chat-mention:hover {
  color: #0d47a1;
  border-bottom-style: solid;
}
a.chat-cmd {
  color: #1a5fb4;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dashed rgba(26, 95, 180, .45);
}
a.chat-cmd:hover {
  color: #0d47a1;
  border-bottom-style: solid;
}

.chat-inline-kb { display: flex; flex-direction: column; gap: .25rem; margin-top: .35rem; }
.chat-inline-row { display: flex; flex-wrap: wrap; gap: .25rem; }

.chat-dock-compose {
  display: flex;
  gap: .4rem;
  padding: .55rem .6rem;
  border-top: 2px solid rgba(61, 108, 34, .35);
  background: rgba(255,255,255,.7);
  align-items: center;
  flex-shrink: 0;
}
.chat-compose-tools {
  display: flex;
  align-items: center;
  gap: .2rem;
  flex: 0 0 auto;
}
.chat-compose-tool {
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: 2px solid rgba(61, 108, 34, .45);
  border-radius: 8px;
  background: rgba(255,255,255,.85);
  color: #1d3d16;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.chat-compose-tool:hover { background: rgba(110, 180, 80, .22); }
.chat-compose-wrap { flex: 1; position: relative; min-width: 0; }
.chat-input {
  width: 100%;
  resize: none;
  min-height: 2.6rem;
  max-height: 5.5rem;
  box-sizing: border-box;
}
.chat-dock-compose > .btn.primary {
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  min-width: 2.6rem;
  padding: 0;
  display: grid;
  place-items: center;
  align-self: center;
  line-height: 1;
  font-size: 1.15rem;
}
.chat-emoji-pop {
  position: absolute;
  left: 0;
  bottom: calc(100% + .35rem);
  z-index: 5;
  width: min(18rem, 100%);
  max-height: 11rem;
  overflow: auto;
  padding: .4rem;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .2rem;
  border: 2px solid #3d6c22;
  border-radius: 10px;
  background: #f4ffe8;
  box-shadow: 0 8px 18px rgba(30, 60, 20, .22);
}
.chat-emoji-pop button {
  border: 0;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 6px;
  padding: .2rem;
}
.chat-emoji-pop button:hover { background: rgba(110, 180, 80, .25); }
.chat-compose-preview {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .65rem;
  margin: .25rem .55rem 0;
  background: rgba(255,255,255,.82);
  border: 2px solid rgba(61,108,34,.28);
  border-radius: 12px;
}
.chat-compose-preview.is-loading {
  border-style: dashed;
}
.chat-compose-preview img {
  width: 4.2rem;
  height: 4.2rem;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgba(61,108,34,.35);
  flex: 0 0 auto;
}
.chat-compose-preview-meta {
  display: grid;
  gap: .12rem;
  min-width: 0;
  flex: 1;
}
.chat-compose-preview-meta strong {
  color: #1d3d16;
  font-size: .92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-compose-preview-spinner {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 2px solid rgba(61,108,34,.25);
  border-top-color: #3d6c22;
  animation: chat-spin .7s linear infinite;
  flex: 0 0 auto;
}
@keyframes chat-spin {
  to { transform: rotate(360deg); }
}
.chat-msg-image {
  margin: .35rem 0 .15rem;
  max-width: 100%;
}
.chat-msg-image-btn {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  max-width: 100%;
}
.chat-msg-image img {
  display: block;
  max-width: min(100%, 16rem);
  max-height: 14rem;
  border-radius: 10px;
  border: 2px solid rgba(61,108,34,.3);
}
.chat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(8, 14, 12, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  cursor: zoom-out;
  pointer-events: auto;
}
.chat-lightbox img {
  max-width: min(96vw, 1100px);
  max-height: 92vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  cursor: default;
  background: rgba(255,255,255,.04);
}
.chat-lightbox-close {
  position: absolute;
  top: .75rem;
  right: .85rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.chat-lightbox-close:hover {
  background: rgba(0,0,0,.65);
}
.chat-backup-card {
  margin-top: .4rem;
  padding: .55rem .65rem;
  border: 2px solid rgba(61, 108, 34, .35);
  border-radius: 10px;
  background: rgba(255,255,255,.78);
  display: grid;
  gap: .35rem;
}
.chat-backup-card strong { color: #1d3d16; }
.chat-file-card strong { word-break: break-word; }
.chat-file-bundle-open {
  display: grid;
  gap: .2rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.chat-file-select-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .15rem .35rem .35rem;
}
.chat-compose-files {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  padding: .25rem 0 .15rem;
}
.chat-share-progress {
  display: grid;
  gap: .35rem;
  padding: .45rem .55rem;
  margin: .15rem 0 .35rem;
  border: 2px solid rgba(61, 108, 34, .28);
  border-radius: 12px;
  background: rgba(255, 255, 255, .88);
}
.chat-share-progress-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  align-items: baseline;
  color: #1d3d16;
}
.chat-share-progress-bar {
  height: .55rem;
  border-radius: 999px;
  background: rgba(61, 108, 34, .12);
  overflow: hidden;
}
.chat-share-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5dbd3a, #3f9e3a);
  transition: width .2s ease;
}
.chat-share-progress-fill.indeterminate {
  width: 35%;
  animation: chat-share-indeterminate 1.1s ease-in-out infinite;
}
@keyframes chat-share-indeterminate {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
.chat-share-progress-foot {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.chat-compose-file-chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  max-width: 100%;
  padding: .2rem .45rem;
  border: 2px solid rgba(61, 108, 34, .3);
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  font-size: .82rem;
  font-weight: 700;
  color: #1d3d16;
}
.chat-compose-file-x {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 0 .1rem;
  color: #7a2a1c;
}
.chat-file-list-item,
.chat-file-row {
  cursor: default;
}
.chat-room-item.selected {
  border-color: #3f9e3a;
  background: rgba(93, 189, 58, .12);
}
.chat-room-item.attached {
  opacity: .92;
}
.chat-room-item.attached:not(.selected) {
  border-color: rgba(61, 108, 34, .35);
}
.chat-backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.chat-suggest {
  list-style: none;
  margin: 0;
  padding: .2rem;
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  background: #fff;
  border: 2px solid #3d6c22;
  border-radius: 8px;
  max-height: 8rem;
  overflow: auto;
  z-index: 2;
}
.chat-suggest button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: .35rem .45rem;
  cursor: pointer;
  font: inherit;
}
.chat-suggest button:hover { background: rgba(110, 180, 80, .2); }
.chat-readonly-hint { padding: .55rem .75rem; margin: 0; text-align: center; flex-shrink: 0; }

@media (max-width: 1100px) {
  .chat-dock {
    --chat-panel-w: min(32rem, 52vw);
  }
}

@media (max-width: 900px) {
  .chat-dock {
    --chat-panel-w: min(28rem, 78vw);
  }
  .chat-msg .avatar-stage.mini .avatar-ring {
    width: 46px;
    height: 46px;
  }
}

@media (max-width: 720px) {
  .chat-dock {
    --chat-panel-w: calc(100vw - var(--chat-tab-w));
  }
}

/* Floating message toasts — bottom-right */
.chat-msg-popups {
  position: fixed;
  right: 3.2rem;
  bottom: 1rem;
  z-index: 72;
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: .55rem;
  width: min(22rem, calc(100vw - 4.5rem));
  max-height: min(70vh, 28rem);
  overflow: hidden;
  pointer-events: none;
}
.chat-msg-popups.dock-open {
  right: calc(min(38rem, 44vw) + .75rem);
}
.chat-msg-popup {
  pointer-events: auto;
  width: 100%;
  margin: 0;
  border: 0;
  text-align: left;
  font: inherit;
  box-shadow: 0 10px 28px rgba(20, 40, 30, .22), 0 2px 6px rgba(20, 40, 30, .12);
  cursor: pointer;
  animation: chat-popup-in .38s cubic-bezier(.22, 1, .36, 1);
  opacity: 1;
  transition: opacity .4s ease, transform .4s ease;
}
.chat-msg-popup:hover {
  filter: brightness(1.03);
}
.chat-msg-popup.is-fading {
  opacity: 0;
  transform: translateY(10px) scale(.98);
}
.chat-msg-popup .chat-msg-body {
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-msg-popup .avatar-stage.mini .avatar-ring {
  width: 42px;
  height: 42px;
}
.chat-msg-popup .chat-msg-row {
  padding-bottom: .1rem;
}

@keyframes chat-popup-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 1100px) {
  .chat-msg-popups.dock-open {
    right: calc(min(32rem, 52vw) + .75rem);
  }
}
@media (max-width: 900px) {
  .chat-msg-popups.dock-open {
    right: calc(min(28rem, 78vw) + .75rem);
  }
}
@media (max-width: 720px) {
  .chat-msg-popups {
    right: .75rem;
    bottom: .75rem;
    width: min(22rem, calc(100vw - 1.5rem));
  }
  .chat-msg-popups.dock-open {
    right: .75rem;
    bottom: .75rem;
    /* keep above closed content; dock is full-bleed on mobile */
    max-width: calc(100vw - 1.5rem);
  }
}