/* ======================================================================
 * 60 · AI 口语陪练 —— 「珊瑚薄荷 · 对话气泡」
 * 视觉：暖白底 + 珊瑚 / 薄荷双色气泡；聊天舞台居中，场景胶囊；
 *       与本批其余 10 页不共用配色与构图。
 * ====================================================================== */

.nx.sp {
    --bg: #f7f4f1;
    --bg2: #efeae5;
    --card: #ffffff;
    --card2: #f6f2ee;
    --card3: #ece5de;
    --ink: #26201c;
    --ink2: #4d453e;
    --muted: #857b72;
    --line: #dbd2c9;
    --line2: #e9e2da;
    --accent: #e2604f;          /* 珊瑚 */
    --accent-ink: #fff6f3;
    --accent-soft: #fadcd5;
    --accent2: #2ba184;         /* 薄荷 */
    --accent2-ink: #eefaf6;
    --accent2-soft: #d5efe6;
    --ok: #2c7a4b;
    --ok-bg: #e1f2e7;
    --warn: #8f6400;
    --warn-bg: #f8efd4;
    --bad: #a83a32;
    --bad-bg: #f9e5e1;
    --info: #1a6e84;
    --info-bg: #e0f0f4;
    --radius: 16px;
    --radius-sm: 12px;
    --head-weight: 790;
    --tracking: -.004em;

    background:
        radial-gradient(circle at 6% 0%, rgba(226, 96, 79, .06), transparent 34%),
        radial-gradient(circle at 96% 12%, rgba(43, 161, 132, .07), transparent 30%),
        var(--bg);
}
:root[data-theme="dark"] .nx.sp {
    --bg: #151210;
    --bg2: #1c1815;
    --card: #221d19;
    --card2: #292320;
    --card3: #332c27;
    --ink: #f2ece7;
    --ink2: #cbc2ba;
    --muted: #948a81;
    --line: #3c342e;
    --line2: #302923;
    --accent: #ee7f6c;
    --accent-ink: #200c08;
    --accent-soft: #3d1f18;
    --accent2: #54c3a8;
    --accent2-ink: #0a1a14;
    --accent2-soft: #17352b;
    --ok: #6cbb89;
    --ok-bg: #1c3526;
    --warn: #d5af5b;
    --warn-bg: #352b13;
    --bad: #e0827a;
    --bad-bg: #3c201c;
    --info: #5fb7d0;
    --info-bg: #143038;
    background:
        radial-gradient(circle at 6% 0%, rgba(238, 127, 108, .07), transparent 34%),
        radial-gradient(circle at 96% 12%, rgba(84, 195, 168, .08), transparent 30%),
        var(--bg);
}

/* ---------- 首屏 ---------- */
.sp-hero { margin: 22px 0 14px; }
.sp-kicker {
    font: 700 11px var(--font-mono);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 8px;
}
.sp-hero h1 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 12px; }
.sp-lede { font-size: 14.8px; line-height: 1.95; color: var(--ink2); margin: 0 0 18px; max-width: 60em; }
.sp-lede b { color: var(--accent2); border-bottom: 2px solid var(--accent2-soft); }

.sp-setup {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    padding: 18px 20px;
    display: grid;
    gap: 14px;
}
.sp-setup-row--2 { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr); gap: 14px; align-items: start; }
.sp-scenes button { padding: 9px 14px; }
.sp-phrases { display: flex; flex-wrap: wrap; gap: 7px; }
.sp-phrases button {
    appearance: none;
    border: 1px solid var(--accent2-soft);
    background: var(--accent2-soft);
    color: var(--accent2);
    border-radius: 999px;
    padding: 6px 12px;
    font: 600 12.5px var(--font-body);
    cursor: pointer;
    transition: transform .12s, filter .15s;
}
.sp-phrases button:hover { transform: translateY(-1px); filter: brightness(.97); }

/* ---------- 聊天舞台 ---------- */
.sp-stage {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.sp-chat-hd {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line2);
    background: var(--card2);
}
.sp-chat-hd b { font-size: 15px; }
.sp-chat-hd span { font-size: 12.5px; color: var(--muted); }
.sp-chat-acts { margin-left: auto; }

.sp-chat {
    height: 380px;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sp-empty { margin: auto; text-align: center; color: var(--muted); }
.sp-empty b { display: block; font-size: 15px; color: var(--ink2); margin-bottom: 6px; }
.sp-empty p { font-size: 13px; line-height: 1.8; max-width: 34em; }

.sp-bubble { max-width: 84%; }
.sp-bubble .who {
    display: block;
    font: 700 11px var(--font-mono);
    letter-spacing: .08em;
    margin-bottom: 4px;
}
.sp-bubble .body {
    border-radius: 14px;
    padding: 11px 15px;
    font-size: 14.5px;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
}
.sp-bubble.is-ai { align-self: flex-start; }
.sp-bubble.is-ai .who { color: var(--accent2); }
.sp-bubble.is-ai .body { background: var(--accent2-soft); color: var(--ink); border-bottom-left-radius: 4px; }
.sp-bubble.is-me { align-self: flex-end; text-align: right; }
.sp-bubble.is-me .who { color: var(--accent); }
.sp-bubble.is-me .body { background: var(--accent-soft); color: var(--ink); text-align: left; border-bottom-right-radius: 4px; }

.sp-extra {
    align-self: stretch;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 12.8px;
    line-height: 1.8;
    color: var(--ink2);
    background: var(--card2);
}
.sp-extra .k { font: 700 11px var(--font-mono); letter-spacing: .06em; }
.sp-extra .k.cn { color: var(--muted); }
.sp-extra .k.tip { color: var(--warn); }
.sp-extra .k.try { color: var(--accent2); }
.sp-extra .say-btn {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 999px;
    font: 600 12px var(--font-body);
    color: var(--accent2);
    padding: 4px 11px;
    margin-left: 8px;
    cursor: pointer;
}
.sp-extra .say-btn:hover { border-color: var(--accent2); }

.sp-input-row {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--line2);
    background: var(--card2);
}
.sp-input-row .nx-input { flex: 1; }
.sp-note { padding: 0 18px 14px; font-size: 11.8px; color: var(--muted); line-height: 1.7; }

/* ---------- 响应式 ---------- */
@media (max-width: 720px) {
    .sp-setup-row--2 { grid-template-columns: minmax(0, 1fr); }
    .sp-chat { height: 320px; padding: 12px; }
    .sp-bubble { max-width: 94%; }
}