/* ============================================================
   css/chat/chat-grammar-note.css — 聊天里的「参考说法」小卡（gn-）
   第 6 窗口（2028-09）。
   为什么住 css/chat/ 而不是外文那一份：它是一条**聊天消息**，
   必须随聊天样式一起加载（外文面板的样式只有进外文时才有，落不到聊天页）。
   规矩：只用主题变量、不用 emoji、不摆系统默认控件；
   窄屏 <370 与 400+ 大屏都不许横向溢出；触碰有动画反馈。
   ============================================================ */

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

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

.gn-head {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 7px;
}
.gn-en {
    font-family: var(--font-display, Georgia, serif);
    font-style: italic; font-size: 12.5px; letter-spacing: .02em;
    color: var(--rose, #c9a8a8);
}
.gn-kind {
    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; white-space: nowrap;
    margin-left: auto;                       /* 类别靠右沿，长标题也不挤花字 */
}

.gn-row {
    display: flex; align-items: flex-start; gap: 8px;
    font-family: var(--font-body);
    font-size: 13.5px; line-height: 1.55;
    margin-bottom: 4px;
}
.gn-tag {
    flex-shrink: 0; font-size: 10.5px; line-height: 1.7;
    color: var(--text-muted); min-width: 4.2em;
}
.gn-text { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.gn-wrong .gn-text { color: var(--text-secondary); text-decoration: line-through; text-decoration-color: rgba(201,168,168,.55); }
.gn-right .gn-text { color: var(--text-primary); font-weight: 500; }

.gn-why {
    font-family: var(--font-body);
    font-size: 11.5px; line-height: 1.6; color: var(--text-muted);
    margin: 6px 0 2px;
    overflow-wrap: anywhere;
}

.gn-foot {
    display: flex; align-items: center; gap: 8px;
    margin-top: 9px; padding-top: 8px;
    border-top: 1px solid rgba(201, 168, 168, 0.16);
}
.gn-store {
    flex: 1; min-width: 0;
    font-family: var(--font-body); font-size: 10.5px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gn-go {
    flex-shrink: 0;
    font-family: var(--font-body); font-size: 11.5px;
    color: var(--rose, #c9a8a8);
    background: transparent;
    border: 1px solid rgba(201, 168, 168, 0.34);
    border-radius: 999px; padding: 3px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background .16s ease, transform .1s ease;
}
.gn-go:hover { background: var(--rose-light, rgba(201,168,168,.12)); }
.gn-go:active { transform: scale(0.96); }
.gn-go:focus-visible { outline: 2px solid var(--rose, #c9a8a8); outline-offset: 2px; }

/* 窄屏（<370px）：标签块收窄、字号微降，绝不横向溢出 */
@media (max-width: 369px) {
    .gn-card { padding: 10px 10px 9px; }
    .gn-tag { min-width: 3.6em; font-size: 10px; }
    .gn-row { font-size: 13px; }
}

/* 减少动效：不位移、不淡入（长期规则：prefers-reduced-motion 必须有替代） */
@media (prefers-reduced-motion: reduce) {
    .gn-card { animation: none; }
    .gn-go { transition: none; }
}