/* The chat: Telegram-style feed, send bar, top-right buttons, options sheet, announce banner. Used by the poker table and the hub (js/chat.js). */
:root { color-scheme: dark; }
#opts, #mode-toast, #swipe-hint, #chat-mode, #opts-btn { font: 500 16px/1.2 var(--font); text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }

button { font: inherit; color: inherit; text-shadow: inherit; }
[hidden] { display: none !important; }
/* chunky panel */
.box {
  background: var(--panel);
  border: 2px solid var(--edge);
  border-radius: 10px;
  box-shadow: 0 4px 0 var(--drop);
}

#chat-mode {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); right: 12px; z-index: 35;
  width: 46px; height: 36px; padding: 0; color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
#mode-icon { display: grid; }
#opts-btn {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); right: 66px; z-index: 35;
  width: 46px; height: 36px; padding: 0; color: #fff; cursor: pointer; display: grid; place-items: center;
}
#unread {
  position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 6px; background: var(--red); color: #fff; font-size: 12px; line-height: 20px; text-align: center;
  box-shadow: 0 2px 0 var(--red-d);
}
#mode-toast {
  position: fixed; top: calc(52px + env(safe-area-inset-top)); right: 12px; z-index: 36;
  padding: 5px 10px; border-radius: 8px;
  background: var(--panel); border: 2px solid var(--edge); box-shadow: 0 3px 0 var(--drop);
  font-size: 15px; animation: pop-in .3s cubic-bezier(.3, 1.6, .5, 1);
}
#swipe-hint {
  position: fixed; top: calc(52px + env(safe-area-inset-top)); right: 12px; z-index: 36; cursor: pointer;
  padding: 5px 10px; color: inherit; font-family: inherit; border-radius: 8px;
  background: var(--panel); border: 2px solid var(--edge); box-shadow: 0 3px 0 var(--drop);
  font-size: 15px; animation: pop-in .3s cubic-bezier(.3, 1.6, .5, 1);
}
#swipe-hint i { display: inline-block; font-style: normal; color: var(--gold); animation: nudge-l 1.2s ease-in-out infinite; }
#swipe-hint[data-dir="close"] i { animation-name: nudge-r; }
body[data-chat="overlay"] #swipe-hint, body[data-chat="overlay"] #mode-toast { top: calc(var(--top-h, 54px) + 6px); }
@keyframes nudge-l { 50% { translate: -5px 0; } }
@keyframes nudge-r { 50% { translate: 5px 0; } }
/* chat views */
#chat {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--top-h, 54px); z-index: 30;
  font: 15px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-shadow: none; -webkit-user-select: text; user-select: text;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);
  background: linear-gradient(to bottom, rgba(6, 12, 18, .25), rgba(6, 12, 18, .72) 40%, rgba(6, 12, 18, .9));
}
#feed { grid-row: 3; }
#say-slot { grid-row: 4; }
#chat-view { grid-row: 1; }
/* messages: Telegram Android 12.10, darkblue theme (assets/darkblue.attheme, ChatMessageCell) */
#feed {
  --in-bubble: #232e3b; --out-bubble: #2b86e5; --in-time: rgba(128, 145, 160, .85); --link: #79c4fc;
  list-style: none; margin: 0; padding: 40px 6px 8px; overflow-y: auto; overscroll-behavior: contain; background: none; touch-action: pan-y;
  display: flex; flex-direction: column; position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 56px); mask-image: linear-gradient(to bottom, transparent, #000 56px);
}
#feed::before { content: ""; flex: 1 1 auto; } /* short chats sit at the bottom, like Telegram */
#feed li { display: flex; align-items: flex-end; gap: 8px; margin-top: 2px; flex: none; }
#feed li.first { margin-top: 6px; }
#feed li.gone { opacity: 0; transition: opacity .25s ease; }
#feed .av { width: 42px; height: 42px; font-size: 17px; visibility: hidden; }
#feed li.last .av { visibility: visible; }
#feed li.own { flex-direction: row-reverse; }
#feed li.own .av { display: none; }

#feed .bubble {
  --bg: var(--in-bubble);
  position: relative; max-width: calc(100% - 62px); min-width: 64px;
  padding: 6px 11px 7px; border-radius: 17px; background: var(--bg);
  color: #fafafa; font-size: 16px; line-height: 1.35;
}
#feed li.own .bubble { --bg: var(--out-bubble); max-width: 82%; margin-right: 2px; }
#feed li:not(.first) .bubble { border-top-left-radius: 6px; }
#feed li:not(.last) .bubble, #feed li.last .bubble { border-bottom-left-radius: 6px; }
#feed li.own .bubble { border-radius: 17px; }
#feed li.own:not(.first) .bubble { border-top-right-radius: 6px; }
#feed li.own .bubble { border-bottom-right-radius: 6px; }
#feed .tail { display: none; }

#feed .n { display: flex; align-items: baseline; gap: 12px; font-weight: 500; font-size: 14px; line-height: 1.3; margin-bottom: 2px; }
#feed .n > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#feed li:not(.first) .n { display: none; }
#feed .tag { margin-left: auto; flex: none; font-size: 13px; font-weight: 400; color: #c0c6cb; white-space: nowrap; }
#feed .tag.admin, #feed .tag.creator { padding: 1px 6px; border-radius: 8px; }
#feed .tag.admin { color: #40a920; background: rgba(64, 169, 32, .12); }
#feed .tag.creator { color: #955cdb; background: rgba(149, 92, 219, .12); }
#feed .reply {
  --c: var(--link);
  display: flex; flex-direction: column; margin: 3px 0 5px; padding: 4px 8px 5px 10px;
  border-radius: 6px; background: color-mix(in srgb, var(--c) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--c);
  font-size: 14px; line-height: 1.3; min-width: 0;
}
#feed .reply b { color: var(--c); font-weight: 500; }
#feed .reply span { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#feed li.own .reply { --c: #fff !important; }
#feed .t { white-space: pre-wrap; word-wrap: break-word; }
#feed .pad { visibility: hidden; font-size: 12px; padding-left: 12px; white-space: nowrap; }
#feed .time {
  position: absolute; right: 11px; bottom: 6px; font-size: 12px; line-height: 1;
  color: var(--in-time); white-space: nowrap; pointer-events: none;
}
#feed li.own .time { color: rgba(255, 255, 255, .7); }

/* media inside bubbles */
#feed .media { display: block; margin: 2px -7px 4px; }
#feed .bubble.has-media .media { margin-top: 4px; }
#feed .media img, #feed .media video { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; border-radius: 12px; background: #0b1119; }
#feed .bubble.bare { padding: 3px; }
#feed .bubble.bare .n { padding: 3px 8px 2px; }
#feed .bubble.bare .media { margin: 0; }
#feed .bubble.bare .media img, #feed .bubble.bare .media video { border-radius: 14px; }
#feed .bubble.bare .time, #feed .bubble.sticker .time {
  right: 8px; bottom: 8px; padding: 3px 6px; border-radius: 9px;
  background: rgba(0, 0, 0, .45); color: #fff;
}
#feed .bubble.sticker { background: none; padding: 0; min-width: 0; }
#feed .bubble.sticker .media { margin: 0; }
#feed .bubble.sticker img, #feed .bubble.sticker video, #feed .bubble.sticker .lottie { width: 160px; height: 160px; object-fit: contain; background: none; border-radius: 0; }
#feed .media.video { position: relative; }
#feed .media.video::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; color: #fff; text-shadow: 0 1px 8px #000; pointer-events: none; }
#feed .media.video.playing::after { content: none; }

/* service messages (table events): chat_serviceBackground */
#feed li.svc { justify-content: center; margin: 8px 0; }
#feed li.svc span { padding: 4px 10px; border-radius: 12px; background: rgba(53, 66, 81, .75); color: #fff; font-size: 14px; }
#feed li.svc span.gold { color: var(--gold); }

#chat-jump {
  grid-row: 3; align-self: end; justify-self: end; margin: 0 10px 10px; position: relative; z-index: 2;
  width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: #212d3b; color: rgba(255, 255, 255, .7); box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  animation: pop-in .2s cubic-bezier(.3, 1.6, .5, 1);
}
/* Telegram's unread badge over the chevron */
#jump-count {
  position: absolute; top: -8px; left: 50%; translate: -50% 0; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: #3e88f7; color: #fff; font: 600 12px/22px Roboto, system-ui, sans-serif; text-align: center;
}

/* send bar: Telegram Android 12 floating pill (ChatActivityEnterView, DEFAULT_HEIGHT 44) */
#say-slot { position: relative; display: flex; flex-direction: column; font: 16px/1.3125 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; text-shadow: none; }
#say {
  display: flex; align-items: flex-end;
  padding: 4px 8px calc(8px + env(safe-area-inset-bottom));
  --panel: #212d3b; --icon: rgba(255, 255, 255, .63); --hint: rgba(219, 239, 255, .43); --send: #229af0;
}
#say .rows-wrapper {
  position: relative; flex: 1; min-width: 0; z-index: 1;
  display: flex; align-items: flex-end;
  min-height: 44px; padding: 0 26px 0 0; margin-right: -22px;
  background: var(--panel); border-radius: 22px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .26);
}
#say .bubble-tail { display: none; }
#say .btn-icon, #say-as {
  position: relative; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; padding: 0;
  background: none; color: var(--icon); display: grid; place-items: center; cursor: pointer;
}
#say .btn-icon:active { background: rgba(255, 255, 255, .06); }
#say .btn-icon .mask { width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
#say-emoji .lot { width: 26px; height: 26px; }
.lot svg [fill]:not([fill="none"]) { fill: currentColor; }
.lot svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
#say-as { width: 40px; margin-left: 2px; }
#say-as .av { width: 32px; height: 32px; font-size: 14px; }
#say-text {
  flex: 1; min-width: 0; height: 44px; max-height: 132px;
  padding: 11px 2px 11px 0; margin: 0;
  border: 0; outline: none; resize: none; background: none;
  color: #fff; font: inherit; font-size: 16px; line-height: 22px; caret-color: var(--send);
  overflow-y: auto; scrollbar-width: none;
}
#say-text::placeholder { color: var(--hint); }
.btn-send {
  position: relative; z-index: 2; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0;
  background: var(--send); color: #fff; cursor: pointer;
}
.btn-send > span { position: absolute; inset: 0; display: grid; place-items: center; visibility: hidden; }
.btn-send .lot { width: 26px; height: 26px; }
.btn-send.record .i-record, .btn-send.send .i-send { visibility: visible; animation: grow-icon .3s cubic-bezier(.2, .9, .3, 1.3); }
.btn-send .i-send svg { margin-left: 2px; }
@keyframes grow-icon { from { transform: scale(.2); opacity: 0; } }

/* avatars (feed, bar, menu): photo when we can get one, colored initial otherwise */
.av {
  flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; color: #fff; font-weight: 500;
}
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* emoji panel sits where the keyboard would, like Android */
#emoji-panel {
  order: 2; display: flex; flex-direction: column;
  height: 300px; padding-bottom: env(safe-area-inset-bottom);
  background: #1d2733; /* chat_emojiPanelBackground */
}
#say:has(~ #emoji-panel:not([hidden])) { padding-bottom: 6px; }
.ep-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ep-page[data-tab="emoji"] { display: grid; grid-template-columns: repeat(8, 1fr); padding: 8px 6px; }
.ep-page[data-tab="emoji"] > button { height: 44px; border: 0; background: none; font-size: 28px; border-radius: 8px; cursor: pointer; padding: 0; }
.ep-page[data-tab="emoji"] > button:active { background: rgba(255, 255, 255, .08); }
.ep-page[hidden] { display: none !important; }
.ep-tabs { flex: none; display: flex; justify-content: center; gap: 6px; padding: 6px 8px; border-top: 1px solid rgba(0, 0, 0, .2); }
.ep-tabs button {
  border: 0; background: none; color: #677687; /* chat_emojiPanelIcon */
  font: 500 14px Roboto, system-ui, sans-serif; padding: 6px 14px; border-radius: 16px; cursor: pointer;
}
.ep-tabs button.on { color: #64b5ef; background: rgba(100, 181, 239, .12); } /* chat_emojiPanelIconSelected */

.ep-note { padding: 12px 16px 4px; color: #7d8b99; font-size: 14px; line-height: 1.4; text-align: center; }
.ep-note p { margin: 0 0 8px; }
.ep-note button {
  border: 0; border-radius: 16px; padding: 7px 14px; cursor: pointer;
  background: rgba(34, 154, 240, .15); color: #64b5ef; font: 500 14px Roboto, system-ui, sans-serif;
}
.ep-page h4 { margin: 0; padding: 12px 12px 4px; font: 500 14px Roboto, system-ui, sans-serif; color: #7d8b99; }
.ep-grid { display: grid; gap: 4px; padding: 4px 6px 8px; }
.ep-grid.sticker { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.ep-grid.gif { grid-template-columns: repeat(2, 1fr); }
.ep-cell {
  position: relative; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 10px; overflow: hidden;
  transition: transform .15s;
}
.ep-cell.sticker { aspect-ratio: 1; padding: 4px; }
.ep-cell.gif { height: 110px; background: rgba(255, 255, 255, .04); }
.ep-cell:active { transform: scale(.92); }
.ep-cell.sent { animation: juice .4s ease; }
.ep-cell img, .ep-cell video, .ep-cell .ep-lottie { width: 100%; height: 100%; display: block; }
.ep-cell.sticker img, .ep-cell.sticker video { object-fit: contain; }
.ep-cell.gif video, .ep-cell.gif img { object-fit: cover; }
.ep-cell.broken { background: rgba(255, 255, 255, .03); }
.ep-search { padding: 8px 8px 4px; position: sticky; top: 0; background: #1d2733; z-index: 1; }
.ep-search input {
  width: 100%; height: 36px; padding: 0 14px; border: 0; border-radius: 18px; outline: none;
  background: rgba(205, 234, 255, .06); color: #fff; font: 16px Roboto, system-ui, sans-serif;
}
.ep-search input::placeholder { color: #7d8b99; }

/* options sheet */
#opts {
  position: fixed; inset: 0; z-index: 48; display: grid; align-items: end; justify-items: center;
  background: rgba(0, 0, 0, .5); animation: fade-in .18s ease;
}
@keyframes fade-in { from { opacity: 0; } }
.o-sheet {
  width: min(100%, 520px); max-height: 86vh; display: flex; flex-direction: column;
  border-radius: 14px 14px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom);
  animation: chat-in .22s ease;
}
.o-sheet header { display: flex; align-items: center; padding: 12px 10px 6px 16px; font-size: 20px; }
.o-close { margin-left: auto; width: 36px; height: 36px; border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.o-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 14px; }
.o-body h3 { margin: 14px 2px 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.o-row { display: flex; flex-direction: column; gap: 6px; padding: 8px 2px; border-top: 1px solid var(--line); }
.o-row > span { font-size: 15px; }
.o-seg { display: flex; gap: 4px; padding: 3px; border-radius: 9px; background: var(--drop); }
.o-seg button {
  flex: 1; min-width: 0; height: 34px; border: 0; border-radius: 7px; background: none; color: var(--muted);
  font-size: 14px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.o-seg button.on { background: var(--panel-2); color: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.o-reset { margin-top: 12px; width: 100%; height: 40px; border: 2px solid var(--edge); border-radius: 9px; background: none; color: var(--muted); cursor: pointer; }

/* chat */
body[data-o-sendbar="off"] #say-slot { display: none; }
body[data-o-chatbg="light"] #chat { background: linear-gradient(to bottom, rgba(6, 12, 18, .1), rgba(6, 12, 18, .4) 40%, rgba(6, 12, 18, .6)); }
body[data-o-chatbg="solid"] #chat { background: rgba(8, 14, 20, .97); }
body[data-o-feed="chat"] #feed li.svc { display: none; }
body[data-o-feed="table"] #feed li:not(.svc) { display: none; }
@keyframes chat-in { from { opacity: 0; transform: translateY(16px); } }

/* half layout: the chat docks to the top, full width, under the button row; the scene stays usable below.
   --chat-top / --chat-h follow the visual viewport (chat.js) so the send bar stays above the keyboard. */
body[data-o-chatlayout="half"] #chat {
  top: calc(var(--chat-top, 0px) + var(--top-h, 54px)); bottom: auto; left: 0; right: 0;
  height: var(--chat-h, 45dvh);
  border-radius: 0 0 16px 16px; overflow: hidden; border-bottom: 2px solid var(--edge);
  background: rgba(8, 14, 20, .9); box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}
body[data-o-chatlayout="half"][data-o-chatbg="light"] #chat { background: rgba(8, 14, 20, .6); }
body[data-o-chatlayout="half"][data-o-chatbg="solid"] #chat { background: rgba(8, 14, 20, .97); }
body[data-o-chatlayout="half"] #feed { padding-top: 12px; -webkit-mask-image: none; mask-image: none; }
body[data-o-chatlayout="half"] #emoji-panel { height: min(300px, 24dvh); }
body[data-o-chatlayout="half"] #swipe-hint { display: none; }
body[data-o-chatlayout="half"][data-chat="overlay"] #mode-toast {
  top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; right: auto; translate: -50% 0;
}


/* chat view switch: Dreamscape / SS group / Merged. Orange marks the active choice. */
#chat-view {
  display: flex; gap: 6px; padding: 8px 10px 4px; z-index: 3;
  font: 500 15px/1.2 var(--font); text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
}
#chat-view button {
  flex: 1; min-width: 0; height: 36px; padding: 0 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--muted); background: var(--panel); border: 2px solid var(--edge); border-radius: 10px; box-shadow: 0 3px 0 var(--drop);
}
#chat-view button.on { color: var(--ink); background: var(--orange); border-color: var(--orange-d); box-shadow: 0 3px 0 var(--orange-d); text-shadow: none; }
#chat-view button:active { translate: 0 2px; box-shadow: 0 1px 0 var(--drop); }
#chat-view button.on:active { box-shadow: 0 1px 0 var(--orange-d); }
body[data-o-chatlayout="half"] #chat-view { padding-top: 6px; }
body[data-o-chatlayout="half"] #chat-view button { height: 32px; }
/* hub: in the top row, left of the cog and the ✕ (chat.js sets chat-view-up when the page has no top line) */
body.chat-view-up #chat-view {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 10px; right: 122px;
  padding: 0; z-index: 36;
}
body.chat-view-up #chat-view { gap: 5px; font-size: 14px; }
body.chat-view-up #chat-view button { flex: 1 1 auto; height: 36px; padding: 0 5px; }
/* read-only hint in place of the send bar */
#say-ro {
  display: flex; align-items: center; gap: 10px; margin: 6px 8px calc(8px + env(safe-area-inset-bottom)); padding: 8px 10px;
  font: 500 15px/1.25 var(--font); text-shadow: 0 2px 0 rgba(0, 0, 0, .45); color: var(--muted);
  background: var(--panel); border: 2px solid var(--edge); border-radius: 10px; box-shadow: 0 3px 0 var(--drop);
}
#say-ro span { flex: 1; min-width: 0; }
#say-ro button { flex: none; height: 34px; padding: 0 10px; cursor: pointer; color: var(--ink); background: var(--orange); border: 2px solid var(--orange-d); border-radius: 8px; box-shadow: 0 3px 0 var(--orange-d); text-shadow: none; }
#say-ro button:active { translate: 0 2px; box-shadow: 0 1px 0 var(--orange-d); }
/* group messages in the merged view: marked, and never mistaken for Dreamscape ones */
#feed .grp { margin-left: auto; flex: none; padding: 0 6px; border-radius: 6px; font-size: 12px; font-weight: 500; color: var(--muted); background: var(--panel-2); }
#chat[data-view="both"] #feed li.ss .bubble { box-shadow: inset 3px 0 0 var(--edge); }
/* Dreamscape's own chat: nothing to attach, no bot, no GIFs or stickers, no "send as" */
body[data-dchat] #say-as, body[data-dchat] #say-bot, body[data-dchat] #say-attach, body[data-dchat] .ep-tabs { display: none; }

/* table moments banner (shared/announce.js) */#announce { position: fixed; left: 50%; top: calc(74px + env(safe-area-inset-top)); z-index: 30; pointer-events: none;
  transform: translateX(-50%); display: flex; justify-content: center; width: max-content; max-width: calc(100vw - 32px); }
#announce div {
  padding: 6px 12px 7px; border-radius: 8px; background: var(--ink, #120c24); border: 2px solid var(--gold, #ffcc4d);
  color: var(--gold, #ffcc4d); font: 700 14px/1.2 "Pixelify Sans", system-ui, sans-serif; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 0 #000; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
  animation: ann-in 0.3s cubic-bezier(.3, 1.6, .5, 1);
}
#announce div.out { animation: ann-out 0.3s forwards; }
@keyframes ann-in { from { transform: translateY(-10px) scale(0.8); opacity: 0; } }
@keyframes ann-out { to { transform: translateY(-8px); opacity: 0; } }