/* =========================================================
 * chat.css - 对局内简易聊天样式
 *
 * 对应 chat.js。节点全部由 chat.js 现建，index.html 里没有对应标签。
 *   .chat-fab    棋盘右下角的圆形入口（与顶部图标按钮同款纸片）
 *   .chat-panel  浮起的面板：标题行 / 消息列表 / 输入行
 *   .chat-msg    气泡：自己 = 墨底白字，对手 = 暖白底墨字
 *   .chat-sys    系统行：居中小字，不抢气泡的视线
 *
 * 语汇全部沿用全站那套：白卡 + 4px 硬投影 + 大圆角，
 * 输入框借 .input-box 的凹槽底色（--bg-color），发送键借 .square-btn 的墨底。
 * 不新造颜色、不新造阴影、不加模糊。
 * ========================================================= */

/* ==================== 入口按钮 ====================
 * 贴在棋盘区右下角：那一块永远在，且不会被手牌区挤掉。
 * 44px 比顶部 38px 略大 —— 它单独漂在棋盘上，没有邻格可以「摸」到。
 * z-index 要压过 #board-container::after（暗角层，z-index:5）。 */
.chat-fab {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 44px;
    height: 44px;
    /* .btn.icon-btn 是 38px，这里连最小宽高一起改，否则会被压成椭圆 */
    min-width: 0;
    min-height: 0;
    padding: 0;
    z-index: 6;
    background: var(--piece-white);
    box-shadow: var(--shadow-btn);
    color: var(--text-main);
    cursor: pointer;
}

.chat-fab svg {
    display: block;
}

/* 未读数：挂右上角，墨底反白会跟按钮同色，所以用茜红（唯一「提示」色） */
.chat-unread {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--c-lady);
    color: #FFFFFF;
    font-size: 0.6rem;
    font-weight: 900;
    line-height: 17px;
    text-align: center;
    box-shadow: 2px 2px 0 var(--shadow-color);
}

.chat-unread[hidden] {
    display: none;
}

/* ==================== 面板 ====================
 * 锚在棋盘区右下角（跟着棋盘区的高度走，手牌拉高拉矮都不用管）。
 * --kb 是手机键盘吃掉的高度，由 chat.js 写；桌面恒为 0。
 * touch-action: pan-y 必须给 —— #board-container 是 none，
 * 不覆盖的话消息列表在手机上划不动。 */
.chat-panel {
    position: absolute;
    right: 12px;
    bottom: calc(12px + var(--kb, 0px));
    width: min(320px, calc(100% - 24px));
    /* 高度也要扣掉键盘：只抬 bottom 不缩高，面板顶会被棋盘区裁掉。
       180px 是下限 —— 再矮就没有「输入框 + 一行消息」了。 */
    height: min(380px, max(180px, calc(100% - 24px - var(--kb, 0px))));
    z-index: 7;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: #FFFFFF;
    /* 白卡压在白桌面上会糊成一片（弹窗有遮罩衬托，这里没有），
       所以补一道极浅的墨线 —— 与配色色片 .color-dot 同款，不新立规矩 */
    border: 1px solid rgba(56, 52, 49, 0.12);
    border-radius: var(--radius-lg);
    box-shadow: 4px 4px 0 var(--shadow-color);
    overflow: hidden;
    touch-action: pan-y;
    /* 棋盘区是 cursor:grab，光标扫过面板不该变成抓手 */
    cursor: default;
    /* 关着的时候只是「不可见 + 不可点」，节点留着，消息历史不会丢 */
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.chat-panel.active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* --- 标题行：标题 / 连接状态 / 关闭 --- */
.chat-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-title {
    font-size: 0.9rem;
    font-weight: 900;
    color: var(--text-main);
}

/* 连接状态：默认整块不显示 —— 没联机时摆一个「未联机」纯属废话。
   联机了才亮出「绿点 + 联机中」，因为那一刻它才真的说明「对面收得到」。 */
.chat-state {
    display: none;
    align-items: center;
    gap: 4px;
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--text-muted);
}

.chat-panel.online .chat-state {
    display: inline-flex;
}

.chat-state i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #CFC9BB;
    transition: background 0.2s ease;
}

.chat-panel.online .chat-state i {
    background: var(--c-hopper);
}

/* 关闭：比图标按钮小一号，不跟「发送」抢重量 */
.chat-close {
    margin-left: auto;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--bg-color);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.08s ease, background 0.12s ease;
}

.chat-close:active {
    transform: translate(1px, 1px);
    background: #EDE9DE;
}

/* --- 消息列表 --- */
.chat-list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 2px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: #DCD6C8 transparent;
}

.chat-list::-webkit-scrollbar {
    width: 4px;
}

.chat-list::-webkit-scrollbar-thumb {
    background: #DCD6C8;
    border-radius: 2px;
}

/* 气泡：自己靠右墨底，对手靠左暖白底。左右下角切平一格，指向说话人 */
.chat-msg {
    max-width: 84%;
    padding: 7px 11px;
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    line-height: 1.45;
    word-break: break-word;
    white-space: pre-wrap;
    animation: chat-in 0.16s ease;
}

.chat-msg.me {
    align-self: flex-end;
    background: var(--text-main);
    color: #FFFFFF;
    border-bottom-right-radius: 5px;
    box-shadow: 2px 2px 0 var(--shadow-color);
}

.chat-msg.them {
    align-self: flex-start;
    background: var(--bg-color);
    color: var(--text-main);
    border-bottom-left-radius: 5px;
}

/* 系统行：居中小字，谁也没说 —— 所以不做成气泡 */
.chat-sys {
    align-self: center;
    max-width: 90%;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-muted);
    text-align: center;
    animation: chat-in 0.16s ease;
}

/* 切语言重建整张列表时不要逐条重播进场动画 */
.chat-static .chat-msg,
.chat-static .chat-sys {
    animation: none;
}

@keyframes chat-in {
    from { opacity: 0; transform: translateY(5px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* --- 输入行：凹槽输入框 + 墨底方形发送键（与联机面板同款） --- */
.chat-form {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-input {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--bg-color);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    outline: none;
    cursor: text;
    /* 全站禁选，输入框必须例外，不然手机上长按唤不出复制 / 光标 */
    user-select: text;
    -webkit-user-select: text;
}

.chat-input::placeholder {
    color: var(--text-muted);
    font-weight: 600;
}

.chat-input:focus {
    box-shadow: inset 0 0 0 2px var(--shadow-color);
}

.chat-send {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: var(--piece-black);
    color: var(--piece-white);
    box-shadow: 2px 2px 0 var(--shadow-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.chat-send:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--shadow-color);
}

.chat-send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* 窄屏：面板贴边，高度再收一点，别把棋盘压没 */
@media (max-width: 420px) {
    .chat-panel {
        right: 8px;
        bottom: calc(8px + var(--kb, 0px));
        width: calc(100% - 16px);
        height: min(360px, max(180px, calc(100% - 16px - var(--kb, 0px))));
    }

    .chat-fab {
        right: 8px;
        bottom: 8px;
    }
}

/* 系统开了「减少动态效果」：只留淡入淡出，去掉位移 */
@media (prefers-reduced-motion: reduce) {
    .chat-panel,
    .chat-msg,
    .chat-sys {
        animation: none !important;
        transition: opacity 0.12s ease !important;
        transform: none !important;
    }
}