/* game-kit: chat theme + skin packs (docs/standard-chat.md). Load AFTER css/kit.css.
   A skin is a set of CSS custom properties on  .cx-app[data-chat-skin="<id>"]  (set by ChatUI.setSkin / createChatEmbed).
   Tokens (all optional; an unset token keeps the kit.css default):
     --gfc-bg --gfc-header --gfc-header-text --gfc-text --gfc-meta --gfc-bar --gfc-chip --gfc-sys --gfc-sys-text
     --gfc-bubble-me --gfc-bubble-me-text --gfc-bubble-other --gfc-accent --gfc-radius
     --gfc-avatar-size --gfc-avatar-radius --gfc-ring-width --gfc-ring-style --gfc-font --gfc-font-size
     --gfc-bg-text (text on the talk background: list, notices) --gfc-panel --gfc-panel-text --gfc-panel-alt (sheets, ending card, viewer) --gfc-input --gfc-input-text --gfc-choice --gfc-choice-text --gfc-line
     --gfc-text-screen --gfc-text-screen-ink (intro / outro / title) --gfc-title-font
   The speaker colour ring/frame (rule C15) is the per-speaker --cx-c (characters.X.color) drawn with --gfc-ring-*.
   Add a skin: a game stylesheet with another  .cx-app[data-chat-skin="my-skin"] { --gfc-...: ... }  block, or
   registerSkin("my-skin", { tokens: {...}, css: "..." }) from js/chat-ext.js. Built-in: line-like (default), work-chat, bbs, dm-dark. */

.cx-app[data-chat-skin] {
  --cx-bg: var(--gfc-bg, #b9cbdc);
  --cx-head: var(--gfc-header, #2b3a4a);
  --cx-head-ink: var(--gfc-header-text, #fff);
  --cx-in: var(--gfc-bubble-other, #fff);
  --cx-in-ink: var(--gfc-text, #1d2328);
  --cx-out: var(--gfc-bubble-me, #85e070);
  --cx-out-ink: var(--gfc-bubble-me-text, #102010);
  --cx-meta: var(--gfc-meta, #4d5a66);
  --cx-sys: var(--gfc-sys, rgba(40, 52, 64, 0.45));
  --cx-sys-ink: var(--gfc-sys-text, #fff);
  --cx-bar: var(--gfc-bar, #fff);
  --cx-chip: var(--gfc-chip, #e3f7dc);
  --cx-accent: var(--gfc-accent, #2fae4a);
  --cx-radius: var(--gfc-radius, 18px);
  font-size: calc(var(--gfc-font-size, 15px) * var(--fs, 1));
  --cx-bg-ink: var(--gfc-bg-text, var(--gfc-text, #1d2328));
  --cx-panel: var(--gfc-panel, #fff); --cx-panel-ink: var(--gfc-panel-text, #1d2328); --cx-panel-alt: var(--gfc-panel-alt, #f4f5f2);
  --cx-input: var(--gfc-input, #f0f2f4); --cx-input-ink: var(--gfc-input-text, #9aa3aa); --cx-choice: var(--gfc-choice, #fff); --cx-choice-ink: var(--gfc-choice-text, #1d2328);
  --cx-line: var(--gfc-line, #b8b0a0); --cx-text-screen: var(--gfc-text-screen, #0d0f12); --cx-text-screen-ink: var(--gfc-text-screen-ink, #e9e6df);
  font-family: var(--gfc-font, 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', sans-serif);
}
.cx-app[data-chat-skin] .cx-av {
  width: var(--gfc-avatar-size, 36px); height: var(--gfc-avatar-size, 36px); border-radius: var(--gfc-avatar-radius, 50%);
  box-shadow: 0 0 0 var(--gfc-ring-width, 2px) var(--cx-c);
}
.cx-app[data-chat-skin] .cx-bubble, .cx-app[data-chat-skin] .cx-choice { border-radius: var(--cx-radius); }
.cx-app[data-chat-skin] .cx-name { color: var(--cx-c); }
.cx-app[data-chat-skin] .cx-after-when { color: var(--cx-accent); }
.cx-app[data-chat-skin] .cx-tabs { background: color-mix(in srgb, var(--cx-bg) 70%, transparent); }

/* line-like: kaidan's current look (the default) */
.cx-app[data-chat-skin="line-like"] {
  --gfc-bg: #b9cbdc; --gfc-header: #2b3a4a; --gfc-header-text: #fff; --gfc-bubble-me: #85e070; --gfc-bubble-other: #fff;
  --gfc-accent: #2fae4a; --gfc-chip: #e3f7dc; --gfc-radius: 18px; --gfc-avatar-size: 36px; --gfc-ring-width: 2px;
}
/* work-chat: office chat, flat rectangles, small square avatars, accent bar on the other person's bubble */
.cx-app[data-chat-skin="work-chat"] {
  --gfc-bg: #f4f5f7; --gfc-header: #fff; --gfc-header-text: #1f2933; --gfc-text: #1f2933; --gfc-meta: #616e7c;
  --gfc-bubble-me: #dbe9ff; --gfc-bubble-me-text: #14284b; --gfc-bubble-other: #fff; --gfc-bar: #fff; --gfc-chip: #eef3fb;
  --gfc-sys: rgba(0, 0, 0, 0.07); --gfc-sys-text: #3d4852; --gfc-accent: #2f6fde; --gfc-radius: 6px; --gfc-avatar-size: 32px; --gfc-avatar-radius: 6px; --gfc-ring-width: 0px;
}
.cx-app[data-chat-skin="work-chat"] .cx-head { border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.cx-app[data-chat-skin="work-chat"] .cx-bubble { border: 1px solid rgba(0, 0, 0, 0.1); border-left: 3px solid var(--cx-c); }
.cx-app[data-chat-skin="work-chat"] .cx-out .cx-bubble { border-left-width: 1px; }
.cx-app[data-chat-skin="work-chat"] .cx-first .cx-bubble { border-radius: var(--cx-radius); }
.cx-app[data-chat-skin="work-chat"] .cx-sys span, .cx-app[data-chat-skin="work-chat"] .cx-date span { border-radius: 4px; }
/* bbs: a board; the board channel type draws numbered posts, other channels get square, monochrome bubbles */
.cx-app[data-chat-skin="bbs"] {
  --gfc-bg: #efefe4; --gfc-header: #0a3d8f; --gfc-header-text: #fff; --gfc-text: #101010; --gfc-meta: #5a5a50;
  --gfc-bubble-me: #fff8c8; --gfc-bubble-me-text: #101010; --gfc-bubble-other: #fff; --gfc-bar: #e4e4d6; --gfc-chip: #ffffd8; --gfc-sys: rgba(0, 0, 0, 0.1); --gfc-sys-text: #333;
  --gfc-accent: #0a3d8f; --gfc-radius: 0px; --gfc-avatar-size: 28px; --gfc-avatar-radius: 0px; --gfc-ring-width: 1px; --gfc-font: 'MS PGothic', 'Meiryo', 'Yu Gothic UI', monospace, sans-serif;
}
.cx-app[data-chat-skin="bbs"] .cx-bubble { border: 1px solid #999; border-left: 4px solid var(--cx-c); }
.cx-app[data-chat-skin="bbs"] .cx-bubble { border-radius: 0; }
/* dm-dark: dark direct messages */
.cx-app[data-chat-skin="dm-dark"] {
  --gfc-bg: #101418; --gfc-header: #181d23; --gfc-header-text: #e8edf2; --gfc-text: #e8edf2; --gfc-meta: #8b97a4;
  --gfc-bubble-me: #3b5bdb; --gfc-bubble-me-text: #fff; --gfc-bubble-other: #1f2630; --gfc-bar: #181d23; --gfc-chip: #1f2630; --gfc-sys: rgba(255, 255, 255, 0.12); --gfc-sys-text: #c5ced8;
  --gfc-accent: #7c9cff; --gfc-radius: 20px; --gfc-avatar-size: 34px; --gfc-ring-width: 2px;
}
.cx-app[data-chat-skin="dm-dark"] .cx-choice { background: #1f2630; color: #e8edf2; border-color: var(--gfc-accent); }
.cx-app[data-chat-skin="dm-dark"] .cx-chip { color: #e8edf2; }
.cx-app[data-chat-skin="dm-dark"] .cx-bubble { border-left: 0; }
.cx-app[data-chat-skin="dm-dark"] .cx-tab.on { background: #2b3440; }

/* channel type: board (numbered posts) */
.cx-post { margin: 8px 0 0; padding: 6px 10px; background: var(--cx-in); color: var(--cx-in-ink); border: 1px solid rgba(0, 0, 0, 0.18); border-left: 4px solid var(--cx-c); border-radius: min(var(--cx-radius), 6px); animation: cx-in 0.22s ease-out; }
.cx-post-me { background: var(--cx-out); color: var(--cx-out-ink); }
.cx-post-h { display: flex; gap: 8px; align-items: baseline; font-size: 0.78em; color: var(--cx-meta); }
.cx-post-no { font-weight: 700; }
.cx-post-name { color: var(--cx-c); filter: brightness(0.85); }
.cx-post-b { margin-top: 3px; line-height: 1.6; overflow-wrap: anywhere; }
/* channel type: call (bar under the header; messages are what is said on the line) */
.cx-callbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #1c2a24; color: #fff; flex: none; }
.cx-callbar[hidden] { display: none; }
.cx-call-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #3b4a44; overflow: hidden; font-weight: 700; }
.cx-call-av img { width: 100%; height: 100%; object-fit: cover; }
.cx-call-name { flex: 1; font-weight: 700; }
.cx-call-state { font-size: 0.8em; opacity: 0.85; }
.cx-callbar[data-state="ring"] .cx-call-state { animation: cx-blink 1.2s infinite; }
.cx-callbar[data-state="end"] { background: #3a2424; }
.cx-app[data-ch-type="call"] .cx-bar { opacity: 0.85; }
/* stickers, widgets, ending photo */
.cx-sticker { width: 96px; height: 96px; object-fit: contain; }
.cx-wg-card, .cx-wg-vote { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; max-width: 260px; border-radius: 14px; background: var(--cx-in); color: var(--cx-in-ink); }
.cx-wg-card img { width: 100%; border-radius: 10px; }
.cx-wg-card span { font-size: 0.82em; color: var(--cx-meta); }
.cx-end-photo { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; margin-bottom: 10px; }
/* intro / outro text-only screens */
.cx-text { position: absolute; inset: 0; z-index: 20; overflow-y: auto; background: #0d0f12; color: #e9e6df; display: flex; justify-content: center; padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
.cx-text-in { width: 100%; max-width: 520px; margin: auto 0; display: flex; flex-direction: column; gap: 14px; line-height: 1.9; }
.cx-text-in p { margin: 0; }
.cx-text-photo { width: 100%; max-height: 38vh; object-fit: cover; border-radius: 8px; }
.cx-text-photo.cx-ph { height: 160px; background: #1d2126; }
.cx-text-place { font-size: 0.78em; letter-spacing: 0.08em; opacity: 0.7; }
.cx-text-btn { align-self: center; margin-top: 8px; }
/* embedded in a 3D game window (js/chat-embed.js) */
.cx-embed { width: 100%; height: 100%; min-height: 0; }
.cx-embed .cx-app { border-radius: inherit; }