/* ============================================================================
 * summary-config.css — 全自动总结配置抽屉
 *
 * 🔴 本文件的第一条纪律：**不要在这里发明第二套按钮系统。**
 *
 * 仓里已经有一个做对了的同类面板——「角色 · 聊天模型」（index.html 的
 * #modal-character-chat-model）。塔拉 8-10 明确要求总结配置与它对齐。它的惯例是：
 *
 *   · 行内按钮      <button class="btn-sec" style="flex:1; min-width:130px;">
 *                   —— 注意**只有 btn-sec、没有 btn**，所以压根不继承
 *                      `.btn { width:100%; padding:12px; margin-top:10px }`，
 *                      也就不需要每处手写 `width:auto` 去覆盖。
 *   · 图标按钮      <button class="btn-sec" style="width:auto; padding:8px 12px; margin:0;">
 *   · 分组小标题    <h4 style="color:var(--accent)">
 *   · 底部主操作    <button class="btn"> 整行，堆叠
 *
 * 施工时用的是 `class="btn btn-sec"` + 每个按钮内联 `width:auto; padding:6px 10px;
 * margin:0`（光这个抽屉 21 处），才需要处处覆盖。修法是回到既有惯例，不是加工具类——
 * 加工具类只会让这个仓库有两套行内按钮写法。
 *
 * 所以本文件**只剩两件事**：① 卡片式折叠分区（既有面板没有，内容多需要收起）；
 * ② 溢出防护。按钮尺寸/配色一律交给既有 .btn-sec，主题皮照常生效。
 *
 * ── ② 溢出防护为什么单独写（塔拉 8-10：「随着屏幕滑动出现字体滑出」）──────
 * flex 子项的 min-width 默认是 auto，**不是 0**：它不肯收缩到内容宽度以下。
 * 于是「输入框 + 不换行的按钮」并排时，各自的最小宽度一加就超过容器 ⇒ 横向溢出 ⇒
 * 滑动时文字滑出边界。这不是"没写 overflow"，是 flex 的默认值本身就会撑破容器。
 * 修法是给会被挤的 flex 子项显式 `min-width: 0`，并让按钮行 `flex-wrap: wrap`。
 *
 * 🔴 加载顺序即优先级（7-5 定的架构结论）：本文件排在 style.css 之后，
 *    不用 !important，也不靠堆选择器特异性。
 * ==========================================================================*/

/* ── 抽屉头 ─────────────────────────────────────────────────────────────── */
.sc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.sc-head-main {
    min-width: 0;
    /* ← 没有它，长角色名会把 × 挤出屏幕 */
    flex: 1;
}

.sc-head h3 {
    margin: 0 0 4px;
    font-size: 1.02rem;
}

.sc-head-sub {
    font-size: 0.78rem;
    opacity: 0.75;
    overflow-wrap: anywhere;
}

/* 状态徽章 */
.sc-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.71rem;
    font-weight: 600;
    border: 1px solid rgba(var(--accent-rgb, 90, 120, 140), 0.34);
    background: rgba(var(--accent-rgb, 90, 120, 140), 0.1);
    color: var(--accent);
    white-space: nowrap;
    flex: 0 0 auto;
}

.sc-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

/* 沿用全局 = 未专属配置，不该用强调色伪装成"已配置" */
.sc-pill.is-fallback {
    border-color: rgba(140, 140, 140, 0.34);
    background: rgba(140, 140, 140, 0.1);
    color: var(--text);
    opacity: 0.78;
}

/* ── 折叠分区卡片 ───────────────────────────────────────────────────────── */
.sc-card {
    border: 1px solid rgba(var(--accent-rgb, 90, 120, 140), 0.2);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}

.sc-card>summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--accent);
    background: rgba(var(--accent-rgb, 90, 120, 140), 0.09);
    list-style: none;
    user-select: none;
}

.sc-card>summary::-webkit-details-marker {
    display: none;
}

.sc-card[open]>summary {
    border-bottom: 1px solid rgba(var(--accent-rgb, 90, 120, 140), 0.18);
}

.sc-sum-text {
    flex: 1;
    min-width: 0;
}

.sc-sum-sub {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.7;
    margin-top: 2px;
}

.sc-caret {
    flex: 0 0 auto;
    font-size: 0.7rem;
    opacity: 0.65;
    transition: transform 0.18s ease;
}

.sc-card[open] .sc-caret {
    transform: rotate(180deg);
}

.sc-body {
    padding: 14px;
}

.sc-body>.input-group:last-child {
    margin-bottom: 0;
}

/* ── 溢出防护（塔拉「字体滑出」那条的真正修复） ─────────────────────────── */

/* 抽屉自身横向绝不滚动：任何漏网的宽元素都在这里被截住 */
#modal-summary-config .sheet {
    overflow-x: hidden;
}

/* 输入框 / 下拉与按钮并排时必须能收缩 —— flex 的 min-width:auto 默认值
   正是"撑破容器"的来源，这里逐个归零 */
.sc-body input,
.sc-body select,
.sc-body textarea {
    max-width: 100%;
    min-width: 0;
}

/* 按钮行：照聊天模型面板的写法（可换行 + 每个按钮有最小可读宽度），
   窄屏时整行换行，而不是把容器顶宽 */
.sc-btnrow {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.sc-btnrow>.btn-sec {
    flex: 1 1 130px;
    min-width: 130px;
    margin: 0;
}

/* 输入框 + 尾随图标按钮的一行 */
.sc-inputrow {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sc-inputrow>input,
.sc-inputrow>select {
    flex: 1 1 auto;
    min-width: 0;
    /* ← 关键：允许被压缩，否则和按钮加起来溢出 */
}

.sc-inputrow>.btn-sec {
    flex: 0 0 auto;
    margin: 0;
}

/* ── 小字说明 ───────────────────────────────────────────────────────────── */
.sc-hint {
    font-size: 0.7rem;
    opacity: 0.62;
    margin-top: 5px;
    line-height: 1.55;
    /* 长 URL / 代码不会顶宽容器 */
    overflow-wrap: anywhere;
}

.sc-hint code {
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(var(--accent-rgb, 90, 120, 140), 0.12);
    /* code 默认 white-space 不换行，长串会直接滑出去 */
    white-space: normal;
    overflow-wrap: anywhere;
}

/* 分组小标题：与聊天模型面板的 <h4 style="color:var(--accent)"> 同一视觉档 */
.sc-group {
    margin: 18px 0 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--accent-rgb, 90, 120, 140), 0.18);
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── 底部主操作：照聊天模型面板，整行堆叠 ───────────────────────────────── */
.sc-footer {
    margin-top: 16px;
}

.sc-footer .btn {
    margin-top: 10px;
}

.sc-footer .btn:first-child {
    margin-top: 0;
}