/* [claude code] 2026-10-19 v0.7 聊天 / 表情 / 好友 / 資訊卡 / 檢舉的版面 + 聊天列。顏色一律用 theme.css 的變數。 */

/* 聊天列:表情鈕 + 最新一則 + 未讀數 */
html[data-ui-skin] #game .chatbar { display: flex; align-items: stretch; gap: 0; padding: 0; border-top: 1px solid var(--border); background: var(--surface); }
html[data-ui-skin] #game .chatbar button { min-height: 40px; border: 0; border-radius: 0; background: transparent; }
html[data-ui-skin] #game .chat-emote { flex: none; width: 48px; padding: 4px; border-right: 1px solid var(--border); }
.chat-emote img { display: block; width: 28px; height: 28px; margin: 0 auto; }
html[data-ui-skin] #game .chat-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 12px; font-size: 11px; color: var(--mute); text-align: left; }
.chat-open #chat-last { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--up); color: var(--ink); font-size: 11px; font-style: normal; font-weight: 700; line-height: 18px; text-align: center; }
.badge[hidden] { display: none; }
.seg.tabs .badge { margin-left: 4px; }

/* 聊天面板:頁籤 / 訊息(自己捲)/ 輸入列(固定在下面) */
#panel-chat .sheet-content { overflow: hidden; }
.chat-body { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.msg { padding: 4px 8px; border-radius: 8px; background: var(--surface); cursor: pointer; }
.msg.mine { cursor: default; border-left: 3px solid var(--accent); }
.msg.phrase .msg-text { color: var(--accent-deep); font-weight: 700; }
.msg-head { display: flex; align-items: baseline; gap: 8px; }
.msg-head b { font-size: 13px; }
.msg-head small { font-size: 11px; color: var(--mute); }
.msg-text { margin: 0; font-size: 15px; word-break: break-word; }
.msg-menu { display: flex; gap: 4px; margin-top: 4px; }
html[data-ui-skin] .msg-menu button { flex: 1; min-width: 0; }
.chat-compose { display: flex; align-items: center; gap: 4px; }
.chat-compose input { flex: 1; min-width: 0; }
html[data-ui-skin] .chat-compose .emo-open { flex: none; width: 44px; padding: 4px; }
.emo-open img { display: block; width: 28px; height: 28px; margin: 0 auto; }
html[data-ui-skin] .chat-compose [data-send] { flex: none; min-width: 64px; }

/* 表情 / 快捷語 */
.emo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
html[data-ui-skin] .emo-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; background: var(--surface); }
.emo-btn img { width: 40px; height: 40px; }
.emo-btn small { font-size: 11px; color: var(--mute); }
.phrase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }

/* 資訊卡 / 好友 */
.card-head { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.card-head .look-dot { width: 56px; height: 56px; flex: none; }
.card-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-head b { font-size: 20px; }
.card-head small { font-size: 11px; color: var(--mute); }
.title-tag { align-self: flex-start; padding: 0 8px; border-radius: 999px; background: var(--gold); color: var(--gold-ink) !important; font-weight: 700; }
.card-team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.card-sp { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border-radius: 8px; background: var(--surface-2); }
.card-sp small { font-size: 11px; text-align: center; }
.row .look-dot { width: 32px; height: 32px; flex: none; }