/*!
 * editor.css：编辑器产品化皮肤
 * ------------------------------------------------------------
 * 作用范围：仅左侧编辑面板（.ed-* 系列）与页面框架（顶栏/背景），
 * 不涉及手机预览区（.phone* / .wechat-* / #element-to-record），
 * 核心聊天界面样式由 app.css 提供，保持不变。
 * 依赖顺序：ui-lite.css -> app.css -> wallet.css -> editor.css
 */

/* ===== 页面框架 ===== */
body {
    background: #eef0f3;
    -webkit-font-smoothing: antialiased
}

.ed-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .05)
}

.ed-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0
}

.ed-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover
}

.ed-brand h1 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #111
}

.ed-brand p {
    margin: 2px 0 0;
    font-size: 12px;
    color: #9aa0a6
}

.ed-topbar-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex: 1
}

.ed-main {
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px 24px 60px
}

.edit-content {
    align-items: flex-start;
    gap: 24px
}

.tab {
    margin-right: 0;
    min-width: 0
}

/* ===== 分段式标签页（位于顶栏中部；覆盖 ui-lite 的线条式标签页） ===== */
.nav-tabs.ed-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 0;
    background: #f2f3f5;
    border: 1px solid #e9ebef;
    border-radius: 12px;
    list-style: none;
    flex: none
}

.ed-tabs > li {
    margin-bottom: 0
}

.ed-tabs > li > a {
    display: block;
    padding: 8px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    cursor: pointer
}

.ed-tabs > li > a:hover {
    background: transparent;
    color: #07c160
}

.ed-tabs > li.active > a {
    background: #eafaf0;
    border: none;
    color: #07c160;
    font-weight: 600;
    cursor: default
}

/* ===== 卡片 ===== */
.ed-card {
    background: #fff;
    border: 1px solid #e9ebef;
    border-radius: 14px;
    padding: 16px 20px 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04)
}

.ed-card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #111
}

.ed-hint {
    font-size: 12px;
    font-weight: 400;
    color: #9aa0a6
}

/* ===== 表单字段 ===== */
.ed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 16px
}

.ed-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
    margin-top: 12px
}

.ed-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0
}

.ed-field-wide {
    grid-column: 1 / -1
}

.ed-label {
    font-size: 12px;
    color: #6b7280
}

.ed-control {
    width: 100%;
    height: 34px;
    padding: 5px 10px;
    font-size: 13px;
    color: #111;
    background: #fff;
    border: 1px solid #d9dce1;
    border-radius: 8px;
    outline: none
}

.ed-control:focus {
    border-color: #07c160;
    box-shadow: 0 0 0 3px rgba(7, 193, 96, .15)
}

.ed-w-sm {
    width: 64px;
    min-width: 64px
}

.ed-time-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px
}

.ed-time-line .ed-control {
    width: auto
}

.ed-time-sep {
    color: #9aa0a6
}

/* 是 / 否 二选一（分段开关样式） */
.ed-switch-group {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    background: #f2f3f5;
    border-radius: 8px;
    width: fit-content
}

.ed-opt {
    position: relative
}

.ed-opt input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer
}

.ed-opt span {
    display: block;
    padding: 4px 16px;
    font-size: 12px;
    color: #6b7280;
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s
}

.ed-opt input:checked + span {
    background: #fff;
    color: #07c160;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08)
}

/* 电量滑块 */
.ed-battery-row {
    display: flex;
    align-items: center;
    gap: 10px
}

.ed-range {
    flex: 1;
    accent-color: #07c160;
    cursor: pointer
}

.ed-battery-val {
    min-width: 42px;
    text-align: right;
    font-size: 13px;
    color: #111
}

/* 聊天背景选择 */
.ed-bg {
    position: relative;
    width: 132px;
    height: 88px;
    background: #f7f8fa;
    border: 1px dashed #cfd4da;
    border-radius: 10px;
    overflow: hidden
}

.ed-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* 未设置背景时隐藏空 src 的 img，露出占位文案 */
.ed-bg img[src=""] {
    display: none
}

.ed-bg-plus {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #9aa0a6
}

.ed-bg input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2
}

.ed-bg-del {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    width: 20px;
    height: 20px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 14px;
    cursor: pointer
}

.ed-bg-del:hover {
    background: #e34d59
}

/* ===== 用户管理 ===== */
.ed-users {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.ed-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #fafbfc;
    border: 1px solid #e9ebef;
    border-radius: 12px;
    transition: border-color .15s, background .15s
}

.ed-user-active {
    background: #f0fbf4;
    border-color: #07c160
}

.ed-user-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: #e5e7eb;
    flex: none;
    cursor: pointer
}

.ed-user-avatar i {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center
}

.ed-user-avatar input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer
}

.ed-user-name {
    width: 104px;
    height: 30px;
    padding: 0 8px;
    font-size: 13px;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    outline: none
}

.ed-user-name:focus {
    border-color: #07c160
}

.ed-user-ops {
    display: flex;
    align-items: center;
    gap: 6px
}

.ed-user-use {
    padding: 3px 10px;
    font-size: 12px;
    color: #6b7280;
    border: 1px solid #d9dce1;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap
}

.ed-user-use:hover {
    color: #07c160;
    border-color: #07c160
}

.ed-user-use-on {
    color: #07c160;
    border-color: #07c160;
    background: #eafaf0;
    font-weight: 600
}

.ed-user-del {
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    color: #9aa0a6;
    font-size: 14px;
    cursor: pointer
}

.ed-user-del:hover {
    color: #e34d59;
    background: #fdeef0
}

.ed-user-add {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    padding: 8px 14px;
    border: 1px dashed #c8cdd4;
    border-radius: 12px;
    color: #6b7280;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none
}

.ed-user-add:hover {
    color: #07c160;
    border-color: #07c160;
    background: #f0fbf4
}

/* ===== 对话内容编辑 ===== */
.ed-textarea {
    width: 100%;
    min-height: 88px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #111;
    border: 1px solid #d9dce1;
    border-radius: 10px;
    resize: vertical;
    outline: none
}

.ed-textarea:focus {
    border-color: #07c160;
    box-shadow: 0 0 0 3px rgba(7, 193, 96, .15)
}

/* 添加对话按钮组 */
.ed-add-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px
}

.ed-add {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    background: #f6f7f9;
    border: 1px solid #e9ebef;
    border-radius: 10px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    overflow: hidden;
    transition: all .15s
}

.ed-add svg {
    width: 16px;
    height: 16px;
    flex: none
}

.ed-add:hover {
    border-color: #07c160;
    color: #07c160;
    background: #f0fbf4
}

.ed-add input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer
}

/* ===== 导出作品 ===== */
.ed-export {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px
}

.ed-btn {
    padding: 9px 22px;
    font-size: 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s
}

.ed-btn-primary {
    background: #07c160;
    color: #fff
}

.ed-btn-primary:hover {
    background: #06ad56
}

.ed-btn-ghost {
    background: #fff;
    border-color: #d9dce1;
    color: #333
}

.ed-btn-ghost:hover {
    color: #07c160;
    border-color: #07c160
}

.ed-btn-rec-start {
    background: #e34d59;
    color: #fff
}

.ed-btn-rec-start:hover {
    background: #d43a46
}

.ed-btn-rec-stop {
    background: #374151;
    color: #fff
}

.ed-btn-rec-stop:disabled {
    opacity: .45;
    cursor: not-allowed
}

.ed-btn-danger-ghost {
    margin-left: auto;
    background: #fff;
    border-color: #f1c2c4;
    color: #e34d59
}

.ed-btn-danger-ghost:hover {
    background: #fdeef0
}

.ed-rec-group {
    display: flex;
    gap: 8px
}

.ed-tip {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: #9aa0a6
}

/* 录制完成的视频预览 */
.ed-video-wrap {
    margin-top: 14px
}

.ed-video-wrap video {
    max-width: 380px;
    width: 100%;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 4px 16px rgba(16, 24, 40, .15)
}

/* ===== 手机预览舞台 =====
 * 白色卡片与灰色页面背景区隔开，避免 #ededed 的手机融进灰底；
 * 吸顶跟随滚动，编辑左侧面板时预览始终可见。
 * 仅是外层视觉容器，不影响 #element-to-record 的截图/录制。
 */
.ed-stage {
    position: sticky;
    top: 86px;
    flex: none;
    background: #fff;
    border: 1px solid #e9ebef;
    border-radius: 16px;
    padding: 18px 18px 22px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 16px 40px rgba(16, 24, 40, .1)
}

.ed-stage-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    color: #111
}

.ed-stage-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #07c160;
    box-shadow: 0 0 0 3px rgba(7, 193, 96, .18)
}

/* 手机外圈描边 + 投影：让手机在白色舞台上轮廊清晰。
 * 宽高不写死：.phone-wrap 的尺寸由 app-bootstrap.js 按机型内联写入
 * （默认 292.5×633.36），框体用 fit-content 始终贴合手机，避免留白。
 */
.ed-stage-frame {
    width: fit-content;
    border-radius: 8px;
    background: #ededed;
    box-shadow: 0 0 0 1px #d9dce1, 0 12px 28px rgba(16, 24, 40, .16);
    overflow: hidden
}

/* ===== 响应式 =====
 * 手机预览区的视觉尺寸由 app-bootstrap.js 按机型内联写入（292.5×633.36），
 * 各断点只调整编辑面板与页面框架，不干预 .phone* / .phone-wrap 内联样式。
 */
@media (max-width: 1280px) {
    .ed-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 1024px) {
    /* 编辑区改为上下堆叠（配合 app.css 的 column），舞台居中、取消吸顶 */
    .ed-main {
        padding: 16px
    }

    .ed-stage {
        position: static;
        align-self: center;
        max-width: 100%
    }

    /* 顶栏收窄：隐藏副标题，保证中部标签页不挤 */
    .ed-brand p {
        display: none
    }
}

@media (max-width: 820px) {
    /* 顶栏折两行：品牌 + 按钮一行，标签页独占一行的整宽分段控件 */
    .ed-topbar {
        flex-wrap: wrap;
        padding: 10px 16px
    }

    .ed-tabs {
        order: 3;
        display: flex;
        width: 100%;
        margin-top: 10px
    }

    .ed-tabs > li {
        flex: 1;
        text-align: center
    }

    .ed-tabs > li > a {
        padding: 8px 0
    }

    .ed-logo {
        width: 34px;
        height: 34px
    }

    .ed-brand h1 {
        font-size: 16px
    }
}

@media (max-width: 640px) {
    .ed-main {
        padding: 12px
    }

    .ed-card {
        padding: 14px 14px 16px
    }

    /* 单列表单：窄屏下控件有足够宽度 */
    .ed-grid,
    .ed-row {
        grid-template-columns: 1fr
    }

    .ed-add-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .ed-user-name {
        width: 84px
    }

    /* 导出按钮改为两行大按钮：主操作占满一行，其余对半 */
    .ed-export {
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }

    .ed-btn-primary {
        grid-column: 1 / -1
    }

    .ed-btn-danger-ghost {
        margin-left: 0
    }

    .ed-topbar-actions .ed-btn {
        padding: 8px 14px;
        font-size: 13px
    }

    /* 视频预览不超出屏幕 */
    .ed-video-wrap video {
        max-width: 100%
    }
}