/* =====================================================================
 * 36 · 粤语方言词典 cantonese-dialect-dict.css —— 聊天对话气泡
 * 主色：荔枝红 + 奶茶米；母题：手机聊天界面 / 左右气泡
 * ===================================================================== */

.hc--chat {
    --hc-a: #c0504f;
    --hc-a-soft: #f9e9e7;
    --cdd-left: #ffffff;
    --cdd-right: #d9f2e5;
    --cdd-bg: #efe9df;
}
:root[data-theme="dark"] .hc--chat {
    --hc-a: #e08d8b;
    --hc-a-soft: #33211f;
    --cdd-left: #22282a;
    --cdd-right: #1d3329;
    --cdd-bg: #15191a;
}

/* ---------- 首屏 ---------- */
.cdd-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
    gap: 34px;
    align-items: center;
    padding-top: 26px;
}
.cdd-hero h1 { margin: 14px 0 12px; font-size: clamp(28px, 3.6vw, 42px); font-weight: 780; letter-spacing: -.02em; }

/* 预览聊天 */
.cdd-chat-preview {
    display: grid; gap: 10px; padding: 20px;
    background: var(--cdd-bg); border-radius: 18px; border: 1px solid var(--hc-line-2);
    max-width: 400px; justify-self: end;
}
.cdd-bubble {
    max-width: 86%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.7;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.cdd-bubble b { display: block; font-weight: 700; }
.cdd-bubble small { display: block; margin-top: 2px; color: var(--hc-muted); font-size: 11.5px; }
.cdd-bubble--left { background: var(--cdd-left); border-bottom-left-radius: 4px; justify-self: start; }
.cdd-bubble--right { background: var(--cdd-right); border-bottom-right-radius: 4px; justify-self: end; }

/* 词典聊天区 */
.cdd-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cdd-tab {
    padding: 8px 16px; border-radius: 999px; border: 1px solid var(--hc-line-2);
    background: var(--hc-card-2); color: var(--hc-ink-2);
    font-family: inherit; font-size: 14px; font-weight: 650; cursor: pointer; transition: all .16s;
}
.cdd-tab:hover { border-color: var(--hc-a); }
.cdd-tab.is-on { background: var(--hc-a); border-color: var(--hc-a); color: #fff; }

.cdd-filters { display: grid; grid-template-columns: 1fr 150px auto; gap: 12px; align-items: end; }
.cdd-count { font-size: 12.5px; color: var(--hc-muted); padding-bottom: 10px; }

.cdd-chat {
    display: grid; gap: 10px; margin-top: 16px; padding: 18px;
    background: var(--cdd-bg); border-radius: 16px; border: 1px solid var(--hc-line-2);
    max-height: 620px; overflow-y: auto;
}
.cdd-msg {
    max-width: 88%; padding: 10px 14px; border-radius: 14px; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .07); transition: transform .14s;
    border: 1px solid transparent;
}
.cdd-msg:hover { transform: translateY(-1px); border-color: var(--hc-a); }
.cdd-msg .w { font-size: 15.5px; font-weight: 750; }
.cdd-msg .p { font-family: Consolas, Menlo, monospace; font-size: 12px; color: var(--hc-a); margin-top: 2px; }
.cdd-msg .m { font-size: 13px; margin-top: 4px; color: var(--hc-ink-2); }
.cdd-msg .x { font-size: 12px; margin-top: 4px; color: var(--hc-muted); }
.cdd-msg .tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: var(--hc-a-soft); color: var(--hc-a); vertical-align: 2px; }
.cdd-msg--left { background: var(--cdd-left); border-bottom-left-radius: 4px; justify-self: start; }
.cdd-msg--right { background: var(--cdd-right); border-bottom-right-radius: 4px; justify-self: end; }
.cdd-chat .cdd-empty { color: var(--hc-muted); font-size: 13.5px; text-align: center; padding: 26px 0; }

/* 添加词条 */
.cdd-add-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
#hc-report-slot:empty { display: none; }

@media (max-width: 880px) {
    .cdd-hero { grid-template-columns: 1fr; }
    .cdd-chat-preview { justify-self: start; }
    .cdd-filters { grid-template-columns: 1fr; }
}