/* ============================================================
   css/chat/chat-sentence-note.css — 聊天里的「句子小卡」（sc-）
   第 7 窗口（2028-09）。
   为什么住 css/chat/ 而不是外文那一份：它是一条**聊天消息**，
   必须随聊天样式一起加载（外文面板的样式只有进外文时才有，落不到聊天页）。
   规矩：只用主题变量、不用 emoji、不摆系统默认控件；
   窄屏 <370 与 400+ 大屏都不许横向溢出；触碰有动画反馈。
   层级口径（与「参考说法」小卡完全一致）：
     一行外语是主角 → 字号最大、近黑；中文意思第二层 → 略小、偏灰；
     出处与按钮第三层 → 最小、最淡。
   ============================================================ */

/* 外壳：外层透明（气泡本身已经有一层纸，避免「双层纸」） */
.bubble.sc-shell { background: transparent; padding: 0; max-width: 100%; box-shadow: none; }

.sc-card {
    border: 1px solid rgba(201, 168, 168, 0.26);
    background: var(--surface-solid, #fff);
    border-radius: 14px;
    padding: 12px 13px 10px;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(120, 90, 90, 0.04);
    animation: scIn .26s ease both;
}
@keyframes scIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sc-card.is-mine { border-color: rgba(201, 168, 168, 0.32); }

.sc-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.sc-en {
    font-family: var(--font-display, Georgia, serif);
    font-style: italic; font-size: 12.5px; letter-spacing: .02em;
    color: var(--rose, #c9a8a8);
    white-space: nowrap;
}
.sc-from {
    font-family: var(--font-body);
    font-size: 10.5px; color: var(--text-muted);
    border: 1px solid rgba(201, 168, 168, 0.3);
    border-radius: 999px; padding: 1px 7px;
    margin-left: auto;                        /* 出处靠右沿，长标题也不挤花字 */
    max-width: 62%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 主角：那一句外语 */
.sc-text {
    font-family: var(--font-body);
    font-size: 15px; line-height: 1.72; font-weight: 500;
    color: var(--text-primary, #2c2622);
    word-break: break-word;
}
.sc-zh {
    margin-top: 6px;
    font-family: var(--font-display, Georgia, serif);
    font-size: 12.5px; line-height: 1.7; color: var(--text-secondary, #7a6f68);
    word-break: break-word;
}
.sc-note {
    margin-top: 7px; padding-top: 7px;
    border-top: 1px dashed rgba(201, 168, 168, 0.3);
    font-size: 11.5px; line-height: 1.7; color: var(--text-muted);
    word-break: break-word;
}

.sc-foot {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    margin-top: 10px; padding-top: 9px;
    border-top: 1px solid rgba(201, 168, 168, 0.18);
}
.sc-act {
    min-height: 28px; padding: 3px 11px;
    border: 1px solid rgba(201, 168, 168, 0.3);
    border-radius: 999px; background: none;
    color: var(--text-secondary, #7a6f68);
    font-family: var(--font-body); font-size: 11.5px;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, transform .16s ease;
}
.sc-act:hover { color: var(--rose-deep, #a57c7c); border-color: rgba(201, 168, 168, 0.55); }
.sc-act:active { transform: scale(0.95); }
.sc-go { margin-left: auto; color: var(--rose-deep, #a57c7c); }

@media (max-width: 369px) {
    .sc-card { padding: 10px 10px 9px; }
    .sc-text { font-size: 14px; }
    .sc-act { padding: 3px 9px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .sc-card { animation: none; }
    .sc-act { transition: none; }
}