/**
 * PersonaSettings minimal styles.
 *
 * Card 视觉复用 BotStore 的 `.wk-bot-card` 命名约定（颜色 / 圆角 / 阴影一致），
 * 但局部追加 `.wk-persona-*` 修饰类以承载 persona-only 的徽章 / footer。
 * 之所以不直接复用 BotStore 那个文件，是因为 PersonaSettings 的容器布局更宽
 * （PC 端要承担更长的元信息），共享 class 会让 BotStore 的横纵比变形。
 *
 * Round-2 review (lml2468 / Jerry-Xin)：DEVELOPMENT.md §「Token 使用规范」明确禁止
 * 在组件级写裸色 / 裸 spacing / 裸 radius —— 本文件已迁移到 `var(--wk-*)` token，
 * 个别仍以裸值兜底的 fallback 写法在每行注释里说明原因。
 *
 * Token 对照表（见 packages/dmworkbase/src/theme/semantic.css）：
 *   colors  : --wk-bg-base / --wk-bg-surface / --wk-bg-elevated
 *             --wk-text-primary / --wk-text-secondary / --wk-text-tertiary
 *             --wk-brand-primary / --wk-color-success / --wk-color-danger
 *             --wk-border-default
 *   spacing : --wk-sp-1 (4px) / --wk-sp-2 (8px) / --wk-sp-3 (12px) / --wk-sp-4 (16px) / --wk-sp-6 (24px) / --wk-sp-8 (32px)
 *   radius  : --wk-r-xs (3px) / --wk-r-sm (6px) / --wk-r-md (8px) / --wk-r-lg (16px)
 *   text    : --wk-text-size-sm / --wk-text-size-base / --wk-text-size-md / --wk-text-size-lg / --wk-text-size-2xl
 *   weight  : --wk-font-medium / --wk-font-semibold
 */

.wk-persona-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--wk-bg-base);
    padding: var(--wk-sp-3);
    box-sizing: border-box;
    overflow-y: auto;
}

.wk-persona-actions {
    margin-bottom: var(--wk-sp-3);
}

.wk-persona-add-btn {
    width: 100%;
    padding: var(--wk-sp-2) var(--wk-sp-3);
    border-radius: var(--wk-r-md);
    background: var(--wk-brand-primary);
    color: var(--wk-text-on-brand);
    font-size: var(--wk-text-size-md);
    font-weight: var(--wk-font-medium);
    cursor: pointer;
    border: none;
    transition: opacity 0.2s;
}

.wk-persona-add-btn:hover {
    opacity: 0.9;
}

.wk-persona-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wk-persona-list {
    display: flex;
    flex-direction: column;
    gap: var(--wk-sp-3);
}

/* Card — visual contract mirrors BotStore .wk-bot-card. */
.wk-persona-card {
    display: flex;
    flex-direction: column;
    padding: var(--wk-sp-3);
    background: var(--wk-bg-surface);
    border-radius: var(--wk-r-md);
    border: 1px solid var(--wk-border-default);
    cursor: pointer;
    transition: transform 0.15s;
}

.wk-persona-card:hover {
    transform: translateY(-1px);
}

.wk-persona-card-header {
    display: flex;
    align-items: center;
}

/*
 * 头像渐变沿用 BotStore 的紫色品牌渐变。--wk-brand-gradient 当前主题等同
 * 纯色 brand-primary，不具备渐变层次，因此这里使用 `--wk-color-accent`
 * 单色铺底，让 persona 头像与品牌 accent（紫）保持一致；不再写死 #667eea。
 */
.wk-persona-card-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--wk-r-md);
    background: var(--wk-color-accent);
    color: var(--wk-color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wk-text-size-2xl);
    font-weight: var(--wk-font-semibold);
    flex-shrink: 0;
}

.wk-persona-card-info {
    flex: 1;
    margin-left: var(--wk-sp-3);
    min-width: 0;
}

.wk-persona-card-name {
    font-size: var(--wk-text-size-lg);
    font-weight: var(--wk-font-semibold);
    color: var(--wk-text-primary);
    display: flex;
    align-items: center;
    gap: var(--wk-sp-1-5);
}

.wk-persona-card-name-badge {
    font-size: var(--wk-text-size-tiny);
    padding: var(--wk-sp-0-5) var(--wk-sp-1-5);
    border-radius: var(--wk-r-xs);
    background: var(--wk-brand-tint-08);
    color: var(--wk-color-accent);
    font-weight: var(--wk-font-medium);
}

.wk-persona-card-sub {
    font-size: var(--wk-text-size-sm);
    color: var(--wk-text-tertiary);
    margin-top: var(--wk-sp-0-5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-persona-card-status {
    margin-left: var(--wk-sp-2);
    font-size: var(--wk-text-size-sm);
    color: var(--wk-text-tertiary);
}

.wk-persona-card-status.on {
    color: var(--wk-color-success);
}

.wk-persona-card-status.off {
    color: var(--wk-color-danger);
}

/*
 * v2 (octo-web#73) PersonaCard active toggle 容器。Semi <Switch> 在裸 flex 子项
 * 位置同样会被父行的 flex 算法压扁（与 PersonaEdit row-control 同样根因），
 * 这里给它一个固定 container：
 *   - flex-shrink: 0 锁定容器不被 .wk-persona-card-info 的 flex:1 抢占；
 *   - 阻断 pointer cursor 继承（外层卡片有 cursor: pointer），让 Switch
 *     视觉上明确是「可点的开关」而非「卡片本身」；
 *   - 自身的 click 在 JSX 里 stopPropagation，不会触发卡片 onClick → 跳进 Edit。
 */
.wk-persona-card-toggle {
    flex: 0 0 auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-left: var(--wk-sp-3);
    min-width: 44px;
    cursor: default;
    overflow: visible;
}

/*
 * v2: active 卡片高亮（左侧描边 + 略微凸起），其余 dimmed 卡片降低 opacity。
 * 这是「同一时刻只有一个生效」mutex 语义最直观的视觉映射 —— 用户一眼能看出
 * 「现在是哪个分身在替我回」。
 */
.wk-persona-card-active {
    border-color: var(--wk-brand-primary);
    box-shadow: 0 0 0 1px var(--wk-brand-primary) inset;
}

.wk-persona-card-dimmed {
    opacity: 0.55;
}

.wk-persona-card-dimmed:hover {
    opacity: 0.85;
}

.wk-persona-empty {
    padding: var(--wk-sp-8) 0;
    text-align: center;
    color: var(--wk-text-tertiary);
    font-size: var(--wk-text-size-base);
    line-height: 1.6;
}

.wk-persona-error {
    padding: var(--wk-sp-6) 0;
    text-align: center;
    color: var(--wk-text-tertiary);
    font-size: var(--wk-text-size-base);
}

.wk-persona-error-retry {
    margin-top: var(--wk-sp-2);
    color: var(--wk-color-accent);
    cursor: pointer;
    text-decoration: underline;
}

.wk-persona-loading {
    padding: var(--wk-sp-6);
    text-align: center;
    color: var(--wk-text-tertiary);
}

/* PersonaEdit subpage */
.wk-persona-edit {
    display: flex;
    flex-direction: column;
    /*
     * YUJ-1435 (2026-05-20): 改用 min-height 而非 height —— 嵌入模式下
     * (parent RouteContext) PersonaEdit 直接 push 到 MeInfo 的 stack，
     * 父容器是 WKViewQueue 的滑动容器；用 height: 100% 会强制本组件等于父高，
     * 但 width 没显式设置，flex 子项默认 shrink，可能让内部 section 变窄。
     * 显式 width: 100% + box-sizing 兜底；overflow-y: auto 仍由本容器承担滚动。
     */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: var(--wk-bg-base);
    overflow-y: auto;
}

.wk-persona-edit-section {
    background: var(--wk-bg-surface);
    margin: var(--wk-sp-3);
    border-radius: var(--wk-r-md);
    /*
     * YUJ-1435 Bug 2 (2026-05-20)：原本 overflow: hidden 是为了让 border-radius
     * 切掉子行的右下角。但 PersonaEdit 是 `display: flex; flex-direction: column`
     * 容器，flex 子项默认 `flex-shrink: 1`，当 scope rows 较多导致总内容高度超过
     * 父容器时，**所有 section 会被等比例压扁**，紧接着 `overflow: hidden` 把
     * 「全局开关」行的下半部分（含 Semi UI Switch 的实际像素高度 ≈ 28px）整体
     * 裁掉 → 用户看到「文字被截，右侧 Switch 完全消失」的 P1 视觉 bug。
     *
     * 修复双管齐下：
     *   1. `flex-shrink: 0` 让 section 保持自然高度，不被 flex 算法压缩；
     *      多出的高度交给 `.wk-persona-edit` 的 `overflow-y: auto` 滚动承接。
     *   2. 仍保留 `overflow: hidden` 维持圆角对 row border-bottom 的视觉裁切，
     *      因为 (1) 已经避免了垂直压缩 → 不会再裁掉 Switch。
     */
    flex-shrink: 0;
    overflow: hidden;
}

.wk-persona-edit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--wk-sp-3) var(--wk-sp-4);
    border-bottom: 1px solid var(--wk-border-default);
    /*
     * YUJ-1435 Bug 2 (2026-05-20)：显式 min-height 给 Switch 等控件留出垂直空间，
     * 即使父级出现任何意外的高度约束也能保证 Switch 完整可见。Semi UI Switch
     * 默认尺寸约 28×16，加 12px 上下 padding 后理论 52px 即可容纳；这里取 56px
     * 与 RoutePage header 同高，视觉节奏更一致。
     *
     * 同时 `box-sizing: border-box` 保证 padding 不会把 min-height 顶到 80px。
     */
    box-sizing: border-box;
    min-height: 56px;
}

.wk-persona-edit-row:last-child {
    border-bottom: none;
}

.wk-persona-edit-row-title {
    font-size: var(--wk-text-size-md);
    color: var(--wk-text-primary);
    /*
     * YUJ-1435 Bug 2 (2026-05-20)：min-width: 0 + flex: 1 让 title 在长 bot 名/
     * 长 channel id 场景下可以收缩 + 省略号，而不是把右侧的 Switch / 值文本
     * 挤出可见区域。配合 .wk-persona-edit-row-value 的 ellipsis 实现完整截断。
     */
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wk-persona-edit-row-value {
    font-size: var(--wk-text-size-base);
    color: var(--wk-text-tertiary);
    /* 右侧值文本：不抢占 title 的伸缩，但自身也允许长内容截断。 */
    margin-left: var(--wk-sp-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

/*
 * YUJ-1444 Bug 2 (2026-05-20)：Switch 等右侧控件的稳定容器。
 *
 * Semi UI <Switch> 在裸 flex 子项位置时，浏览器默认 `flex: 0 1 auto`，
 * `flex-shrink: 1` 让它可能被压缩到不可见。PR #69 仅在外层 row / section
 * 加了 flex-shrink: 0，但 Switch 本身仍可能被父行的 flex 算法挤压（尤其
 * 当 title 用 `flex: 1` 抢占空间时）—— 表现为「关闭态时 Switch 显示一半」。
 *
 * 这里给 Switch 包一层固定 container：
 *   - flex-shrink: 0 锁定容器不被压缩
 *   - flex-basis: auto 让自然宽度生效
 *   - display: flex + align-items: center 垂直居中（与 row 的 56px min-height 对齐）
 *   - margin-left: var(--wk-sp-3) 与 row-value 同款，给 title 留呼吸感
 *   - min-width 给 Semi Switch 的默认尺寸（44px 轨道 + 安全裕量）留底，
 *     即便外层 row 因 ancestor overflow:hidden 出现错算也不会塌成 0
 */
.wk-persona-edit-row-control {
    flex: 0 0 auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-left: var(--wk-sp-3);
    min-width: 44px;
    /* 允许 Switch 的内部 ripple / focus ring 略微溢出而不被裁切。 */
    overflow: visible;
}

/*
 * v2 (octo-web#73)：persona_prompt textarea 行用 column 布局而不是 row 默认的
 * 「左标题右值」横排，因为 textarea 高度大于一行，横排会挤压标题宽度。
 * 行内仍保留 padding 与 border-bottom 节奏，只是把 flex-direction 翻成 column。
 */
.wk-persona-edit-row-column {
    flex-direction: column;
    align-items: stretch;
    /* min-height 给 textarea + 标题留出垂直呼吸空间，覆盖默认 56px */
    min-height: auto;
    gap: var(--wk-sp-2);
    padding-top: var(--wk-sp-3);
    padding-bottom: var(--wk-sp-3);
}

.wk-persona-edit-prompt {
    width: 100%;
    box-sizing: border-box;
    padding: var(--wk-sp-2) var(--wk-sp-3);
    border-radius: var(--wk-r-sm);
    border: 1px solid var(--wk-border-default);
    background: var(--wk-bg-base);
    color: var(--wk-text-primary);
    font-size: var(--wk-text-size-base);
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
}

.wk-persona-edit-prompt:focus {
    outline: none;
    border-color: var(--wk-brand-primary);
}

.wk-persona-edit-save-btn {
    flex: 1;
    width: 100%;
    padding: var(--wk-sp-2) var(--wk-sp-3);
    border-radius: var(--wk-r-md);
    background: var(--wk-brand-primary);
    color: var(--wk-text-on-brand);
    font-size: var(--wk-text-size-md);
    font-weight: var(--wk-font-medium);
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.wk-persona-edit-save-btn:hover {
    opacity: 0.9;
}

.wk-persona-edit-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.wk-persona-edit-scope-list {
    display: flex;
    flex-direction: column;
}

.wk-persona-edit-scope-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--wk-sp-2) var(--wk-sp-4);
    border-bottom: 1px solid var(--wk-border-default);
    font-size: var(--wk-text-size-base);
    color: var(--wk-text-primary);
}

.wk-persona-edit-scope-row:last-child {
    border-bottom: none;
}

.wk-persona-edit-scope-remove {
    cursor: pointer;
    color: var(--wk-color-danger);
    font-size: var(--wk-text-size-sm);
}

.wk-persona-edit-scope-empty {
    padding: var(--wk-sp-4);
    text-align: center;
    color: var(--wk-text-tertiary);
    font-size: var(--wk-text-size-base);
}

.wk-persona-edit-danger {
    margin: var(--wk-sp-6) var(--wk-sp-3) var(--wk-sp-3);
    padding: var(--wk-sp-3);
    text-align: center;
    background: var(--wk-bg-surface);
    color: var(--wk-color-danger);
    border-radius: var(--wk-r-md);
    cursor: pointer;
    font-size: var(--wk-text-size-md);
    font-weight: var(--wk-font-medium);
}

/* PersonaCreate — bot picker */
.wk-persona-create {
    display: flex;
    flex-direction: column;
    padding: var(--wk-sp-3);
    gap: var(--wk-sp-2);
    height: 100%;
    overflow-y: auto;
}

.wk-persona-create-row {
    display: flex;
    align-items: center;
    padding: var(--wk-sp-3);
    border-radius: var(--wk-r-md);
    background: var(--wk-bg-surface);
    cursor: pointer;
    border: 1px solid var(--wk-border-default);
}

.wk-persona-create-row:hover {
    border-color: var(--wk-brand-primary);
}

/*
 * v2 (octo-web#73)：PersonaCreate 改成「选 bot → 展开 prompt 表单 → 提交」两步流程。
 * 选中的 bot 行用边框 + 浅色背景标识，与未选中行视觉区分清晰；下方表单区域留出
 * 间距承接 prompt textarea + 提交按钮。
 */
.wk-persona-create-row-selected {
    border-color: var(--wk-brand-primary);
    background: var(--wk-brand-tint-08);
}

.wk-persona-create-form {
    display: flex;
    flex-direction: column;
    gap: var(--wk-sp-2);
    margin-top: var(--wk-sp-2);
    padding: var(--wk-sp-3);
    border-radius: var(--wk-r-md);
    background: var(--wk-bg-surface);
    border: 1px solid var(--wk-border-default);
}

.wk-persona-create-form-label {
    font-size: var(--wk-text-size-sm);
    color: var(--wk-text-secondary);
    font-weight: var(--wk-font-medium);
}

.wk-persona-create-prompt {
    width: 100%;
    box-sizing: border-box;
    padding: var(--wk-sp-2) var(--wk-sp-3);
    border-radius: var(--wk-r-sm);
    border: 1px solid var(--wk-border-default);
    background: var(--wk-bg-base);
    color: var(--wk-text-primary);
    font-size: var(--wk-text-size-base);
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
}

.wk-persona-create-prompt:focus {
    outline: none;
    border-color: var(--wk-brand-primary);
}

.wk-persona-create-row-name {
    font-size: var(--wk-text-size-md);
    font-weight: var(--wk-font-medium);
    color: var(--wk-text-primary);
}

.wk-persona-create-row-sub {
    font-size: var(--wk-text-size-sm);
    color: var(--wk-text-tertiary);
    margin-top: var(--wk-sp-0-5);
}
