/* ========================================
   移动端适配样式 — 独立文件
   所有样式限定在 @media (max-width: 768px) 内
   不会影响 PC 端（>768px）的任何布局
   ======================================== */

/* ==========================================
   1. 全局基础重置
   ========================================== */
@media (max-width: 768px) {
    body {
        font-size: 15px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        -webkit-tap-highlight-color: transparent;
    }

    /* 防止 iOS 输入框自动缩放：输入框字号 ≥16px */
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    /* 滚动条在移动端隐藏 */
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}

/* ==========================================
   2. 整体布局 — 纵向堆叠
   ========================================== */
@media (max-width: 768px) {
    .app-container {
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100vw !important;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 72px; /* 底部 Tab 栏占位 */
    }
}

/* ==========================================
   3. 侧边栏 → 抽屉式 Overlay
   ========================================== */
@media (max-width: 768px) {
    .sidebar {
        position: fixed !important;
        left: 0;
        top: 0;
        height: 100vh !important;
        width: 36vw !important;       /* 约手机1/3宽度 */
        max-width: 180px !important;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 展开状态 */
    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.55);
    }

    /* 抽屉内恢复文字显示 */
    body.sidebar-auto-hide .sidebar {
        width: 36vw !important;
        max-width: 180px !important;
        transform: translateX(-100%);
        position: fixed !important;
        left: 0;
        top: 0;
        height: 100vh !important;
        overflow-y: auto;
    }

    body.sidebar-auto-hide .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 28px rgba(0, 0, 0, 0.55);
    }

    body.sidebar-collapsed .sidebar {
        width: 36vw !important;
        max-width: 180px !important;
        transform: translateX(-100%);
        position: fixed !important;
        left: 0;
        top: 0;
        height: 100vh !important;
    }

    body.sidebar-collapsed .sidebar.mobile-open {
        transform: translateX(0);
    }

    /* 恢复抽屉内的文字和间距 */
    body.sidebar-auto-hide .logo-text,
    body.sidebar-auto-hide .nav-group-title,
    body.sidebar-auto-hide .nav-item span,
    body.sidebar-auto-hide .user-info,
    body.sidebar-auto-hide .user-auth-actions {
        opacity: 1 !important;
        visibility: visible !important;
        max-width: none !important;
        transform: none !important;
    }

    body.sidebar-collapsed .logo-text,
    body.sidebar-collapsed .nav-group-title,
    body.sidebar-collapsed .nav-item span,
    body.sidebar-collapsed .user-info,
    body.sidebar-collapsed .user-auth-actions {
        opacity: 1 !important;
        visibility: visible !important;
        max-width: none !important;
        transform: none !important;
    }

    body.sidebar-auto-hide .nav-menu,
    body.sidebar-collapsed .nav-menu {
        padding: 12px 16px !important;
    }

    body.sidebar-auto-hide .nav-item,
    body.sidebar-collapsed .nav-item {
        justify-content: flex-start !important;
        padding: 10px 12px !important;
        gap: 12px !important;
    }

    body.sidebar-auto-hide .sidebar-footer,
    body.sidebar-collapsed .sidebar-footer {
        padding: var(--space-md) !important;
    }

    body.sidebar-auto-hide .sidebar-pricing-entry,
    body.sidebar-collapsed .sidebar-pricing-entry {
        width: auto !important;
        min-height: auto !important;
        padding: 12px 16px !important;
        border-radius: 12px !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        border-color: var(--border-base) !important;
        background: rgba(255, 255, 255, 0.03) !important;
        box-shadow: none !important;
    }

    body.sidebar-auto-hide .sidebar-pricing-hot,
    body.sidebar-auto-hide .sidebar-pricing-copy,
    body.sidebar-collapsed .sidebar-pricing-hot,
    body.sidebar-collapsed .sidebar-pricing-copy {
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.sidebar-auto-hide .sidebar-pricing-icon-wrap,
    body.sidebar-collapsed .sidebar-pricing-icon-wrap {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.14) !important;
    }

    body.sidebar-auto-hide .user-profile,
    body.sidebar-collapsed .user-profile {
        justify-content: flex-start !important;
        padding: 8px !important;
        gap: 10px !important;
    }

    body.sidebar-auto-hide .sidebar-pricing-entry,
    body.sidebar-collapsed .sidebar-pricing-entry {
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }
}

/* ==========================================
   4. 遮罩层
   ========================================== */
.sidebar-overlay {
    display: none;
}

@media (max-width: 768px) {
    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 195;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
    }

    .sidebar-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ==========================================
   5. Header 简化
   ========================================== */
@media (max-width: 768px) {
    .header {
        padding: 0 12px;
        height: 52px;
        flex-shrink: 0;
        min-height: 52px;
    }

    .header-left {
        gap: 8px;
    }

    /* 汉堡菜单按钮 */
    .mobile-menu-btn {
        display: flex !important;
        width: 38px;
        height: 38px;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: #fff;
        cursor: pointer;
        border-radius: 8px;
        flex-shrink: 0;
        padding: 0;
    }

    .mobile-menu-btn svg {
        color: #fff;
    }

    .mobile-menu-btn:active {
        background: var(--bg-input);
    }

    /* 隐藏桌面端元素 */
    .header .search-bar {
        display: none !important;
    }

    .header .notification-btn {
        display: none !important;
    }

    .header-key-actions {
        display: none !important;
    }

    .header-key-btn {
        display: none !important;
    }

    #redeemExchangeTopBtn {
        display: none !important;
    }

    .page-title {
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 160px;
    }

    #userProfileMenu .user-info {
        display: flex; /* 保持可见，否则退出登录按钮会被隐藏 */
    }
    #userProfileMenu .user-entry-row {
        font-size: 12px;
    }
    #userProfileMenu .user-name {
        font-size: 12px;
    }
    #userLogoutBtn {
        font-size: 11px;
        padding: 2px 6px;
    }

    #userProfileMenu .avatar {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    .header-user-profile {
        padding: 4px;
        gap: 0;
    }

    .header-right {
        gap: 4px;
    }

    .mobile-recharge-btn {
        display: inline-flex !important;
        width: 34px;
        height: 34px;
        min-width: 34px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 999px;
        color: #ffffff;
        border: 1px solid rgba(255,255,255,0.18);
        background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
        box-shadow: 0 10px 24px rgba(239,68,68,0.28);
    }

    /* 返回按钮移动端适配 */
    .header-back {
        display: flex !important;
        width: 36px;
        height: 36px;
    }
}

/* 桌面端隐藏汉堡按钮（必须在 @media 之前，否则 !important 会覆盖移动端样式） */
@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none !important;
    }
}

/* ==========================================
   6. 底部 Tab 导航栏
   ========================================== */
.mobile-bottom-nav {
    display: none;
}

.mobile-user-center-modal {
    display: none;
}

.mobile-profile-label {
    display: none;
}

@media (min-width: 769px) {
    .mobile-recharge-btn {
        display: none !important;
    }
}

@media (max-width: 768px) {
    body.mobile-user-center-open {
        overflow: hidden;
    }

    .mobile-user-center-modal {
        position: fixed;
        inset: 0;
        z-index: 30000;
    }

    .mobile-user-center-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.58);
    }

    .mobile-user-center-sheet {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: min(82dvh, 680px);
        overflow-y: auto;
        padding: 10px 14px calc(18px + env(safe-area-inset-bottom));
        background: #101114;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: 0;
        border-radius: 8px 8px 0 0;
        box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.5);
        color: #f8fafc;
    }

    .mobile-user-center-handle {
        width: 42px;
        height: 4px;
        margin: 0 auto 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.22);
    }

    .mobile-user-center-header,
    .mobile-user-center-identity,
    .mobile-user-center-balance,
    .mobile-user-center-section-title,
    .mobile-user-record {
        display: flex;
        align-items: center;
    }

    .mobile-user-center-header {
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }

    .mobile-user-center-identity {
        min-width: 0;
        gap: 10px;
    }

    .mobile-user-center-avatar {
        display: flex;
        width: 42px;
        height: 42px;
        min-width: 42px;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #2563eb;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
    }

    .mobile-user-center-identity h3 {
        margin: 0 0 3px;
        font-size: 17px;
        line-height: 1.2;
    }

    .mobile-user-center-identity p {
        margin: 0;
        max-width: 220px;
        overflow: hidden;
        color: #9ca3af;
        font-size: 12px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-user-center-close {
        display: inline-flex;
        width: 34px;
        height: 34px;
        min-width: 34px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.06);
        color: #e5e7eb;
        cursor: pointer;
    }

    .mobile-user-center-balance {
        justify-content: space-between;
        gap: 10px;
        padding: 14px;
        border: 1px solid rgba(76, 133, 240, 0.32);
        border-radius: 8px;
        background: #171a22;
    }

    .mobile-user-center-balance span,
    .mobile-user-center-stats span {
        color: #9ca3af;
        font-size: 12px;
    }

    .mobile-user-center-balance strong {
        flex: 1;
        color: #f8fafc;
        font-size: 24px;
        line-height: 1;
        text-align: left;
    }

    .mobile-user-center-balance button,
    .mobile-user-center-section-title button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 34px;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 700;
    }

    .mobile-user-center-balance button {
        padding: 0 12px;
        background: #22c55e;
        color: #052e16;
    }

    .mobile-user-center-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 10px 0 14px;
    }

    .mobile-user-center-stats div {
        min-width: 0;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        background: #15161a;
    }

    .mobile-user-center-stats strong {
        display: block;
        margin-top: 5px;
        overflow-wrap: anywhere;
        color: #f8fafc;
        font-size: 14px;
        line-height: 1.25;
    }

    .mobile-user-center-records {
        padding: 12px 0 2px;
    }

    .mobile-user-center-section-title {
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
    }

    .mobile-user-center-section-title > span {
        font-size: 14px;
        font-weight: 700;
    }

    .mobile-user-center-section-title button {
        padding: 0 10px;
        background: rgba(76, 133, 240, 0.14);
        color: #93c5fd;
        font-size: 12px;
    }

    .mobile-user-center-record-list {
        display: grid;
        gap: 8px;
    }

    .mobile-user-record {
        justify-content: space-between;
        gap: 12px;
        min-height: 68px;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        background: #15161a;
    }

    .mobile-user-record div {
        min-width: 0;
    }

    .mobile-user-record strong,
    .mobile-user-record span,
    .mobile-user-record time {
        display: block;
    }

    .mobile-user-record strong {
        margin-bottom: 3px;
        color: #f8fafc;
        font-size: 13px;
        line-height: 1.25;
    }

    .mobile-user-record span,
    .mobile-user-record time {
        overflow: hidden;
        color: #9ca3af;
        font-size: 12px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-user-record b {
        min-width: 76px;
        text-align: right;
        font-size: 13px;
    }

    .mobile-user-record b.income {
        color: #34d399;
    }

    .mobile-user-record b.consume {
        color: #f87171;
    }

    .mobile-user-center-empty {
        padding: 18px 12px;
        border: 1px dashed rgba(255, 255, 255, 0.14);
        border-radius: 8px;
        color: #9ca3af;
        font-size: 13px;
        text-align: center;
    }

    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 62px;
        background: #121214;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        z-index: 150;
        justify-content: space-evenly;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45);
    }

    .mobile-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: #71717a;
        font-size: 11px;
        font-weight: 500;
        padding: 4px 6px;
        border-radius: 10px;
        transition: color 0.2s, background 0.2s;
        min-width: 52px;
        min-height: 48px;
        text-decoration: none;
        flex: 0 1 auto;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
    }

    .mobile-tab i {
        font-size: 22px;
        transition: transform 0.2s;
    }

    .mobile-tab span {
        white-space: nowrap;
    }

    .mobile-tab.active {
        color: #d4d4d8;
        background: rgba(255, 255, 255, 0.08);
    }

    .mobile-tab.active i {
        transform: scale(1.1);
    }

    .mobile-tab:active {
        background: rgba(255, 255, 255, 0.08);
    }
}

/* ==========================================
   7. Sections 内容区 + 卡片缩小（保持PC端布局结构）
   ========================================== */
@media (max-width: 768px) {
    /* 基础 section — 缩小 padding */
    .section {
        padding: 12px 8px !important;
    }

    .section-header {
        gap: 6px;
        margin-bottom: 12px;
    }

    .section-header h2 {
        font-size: 17px;
    }

    .section-header p {
        font-size: 12px;
    }

    /* ---- 通用卡片收紧 ---- */
    .card,
    .dashboard-card,
    .dashboard-account-card,
    .dashboard-credits-card,
    .featured-video-showcase,
    .featured-video-section,
    .pricing-card,
    .pricing-intro,
    .pricing-hero,
    .legal-doc-card,
    .replica-box,
    .chat-studio-card,
    .shortdrama-wizard-card {
        padding: 12px 10px !important;
        border-radius: 10px !important;
        margin-bottom: 10px !important;
    }

    /* ---- 首页 Dashboard / 积分管理 卡片缩小（字不能太小）---- */
    .dashboard-card {
        min-height: auto !important;
        padding: 10px 8px !important;
    }

    /* 卡片标题 */
    .dashboard-card h3,
    .card-header h3 {
        font-size: 15px !important;
        margin-bottom: 6px !important;
    }

    /* 数值 — 保持可读 */
    .dashboard-account-value,
    .dashboard-credits-value {
        font-size: 17px !important;
    }

    /* 账户指标：保持PC端排列，只缩小间距 */
    .dashboard-account-metrics {
        gap: 10px !important;
    }

    .dashboard-account-metric {
        padding: 8px 6px !important;
        min-height: auto !important;
    }

    .dashboard-account-label {
        font-size: 12px !important;
    }

    /* 积分管理 — 两排，每排三个，组件缩小 */
    .dashboard-credits-summary {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        padding: 0 12px 8px !important;
    }

    .dashboard-credits-item {
        padding: 6px 4px !important;
        min-height: auto !important;
        gap: 4px !important;
    }

    .dashboard-credits-label {
        font-size: 11px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dashboard-credits-value {
        font-size: 15px !important;
    }

    .dashboard-credits-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
        flex-shrink: 0 !important;
    }

    /* 积分管理搜索栏 */
    .dashboard-credits-search {
        padding: 12px 10px !important;
        gap: 8px !important;
        flex-wrap: wrap;
    }

    #creditsSearchInput {
        font-size: 13px !important;
        min-width: 0 !important;
        flex: 1;
    }

    /* ---- 网格间距统一缩小 ---- */
    #home .dashboard-grid,
    .dashboard-grid,
    .dashboard-grid-primary-four,
    .dashboard-board-grid,
    .templates-grid,
    .features-grid {
        gap: 10px !important;
    }

    /* ---- Hero 区缩小 ---- */
    .dashboard-hero {
        min-height: auto !important;
        margin-bottom: 14px !important;
    }

    .hero-content h1 {
        font-size: 20px !important;
    }

    .hero-content p {
        font-size: 12px !important;
        margin-bottom: 14px !important;
    }

    /* 轮播缩小 */
    .feature-carousel {
        min-height: 200px !important;
    }

    /* ---- 管理后台数值缩小 ---- */
    .admin-stats-grid {
        gap: 8px !important;
    }

    /* ---- 定价页缩小 ---- */
    .pricing-price {
        font-size: 24px !important;
    }

    .pricing-intro h2 {
        font-size: 20px !important;
    }

    .pricing-hero {
        padding: 14px 12px !important;
    }

    .pricing-grid {
        gap: 12px !important;
    }

    /* ---- 法律页缩小 ---- */
    .legal-page-hero h2 {
        font-size: 18px !important;
    }

    .legal-doc-block h3 {
        font-size: 15px !important;
    }

    .legal-page-wrapper,
    .legal-section-page {
        padding: 10px 8px !important;
    }

    /* ---- 大容器 ---- */
    .content-wrapper,
    .pricing-page-wrapper,
    .legal-page-wrapper,
    .shortdrama-page-shell {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Chat 和 Video section 保持 0 padding */
    #chat.section,
    #video.section {
        padding: 0 !important;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

/* 480px 极小屏：间距进一步缩小 */
@media (max-width: 480px) {
    .section {
        padding: 10px 6px !important;
    }
    .section-header h2 {
        font-size: 16px;
    }
}

/* ==========================================
   8. 模态框 / 弹窗
   ========================================== */
@media (max-width: 768px) {
    .modal-content {
        width: 92vw;
        max-width: none;
        margin: 16px;
        max-height: 85vh;
        overflow-y: auto;
        border-radius: 16px;
    }

    .modal-header {
        padding: 16px;
    }

    .modal-header h3 {
        font-size: 16px;
    }

    .modal-body {
        padding: 16px;
    }

    .modal-footer {
        padding: 16px;
        flex-direction: column;
        gap: 8px;
    }

    .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    .image-preview-content {
        max-width: 95vw;
        max-height: 80vh;
    }

    .image-preview-content img {
        max-height: 80vh;
    }
}

/* ==========================================
   9. 按钮 & 表单控件
   ========================================== */
@media (max-width: 768px) {
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 16px;
        font-size: 14px;
    }

    .btn-icon {
        width: 44px;
        height: 44px;
    }

    .btn-sm {
        min-height: 36px;
        padding: 6px 12px;
        font-size: 13px;
    }

    .form-control,
    .form-select {
        width: 100%;
        font-size: 16px !important;
        padding: 10px 14px;
        min-height: 44px;
    }

    textarea.form-control {
        min-height: 100px;
    }

    /* 标签选择类按钮换行 */
    .tag-group,
    .chip-group {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ==========================================
   10. 网格 / 分栏容器 — 保持排列，缩小间距
   ========================================== */
@media (max-width: 768px) {

    /* 视频复刻：保持左右排列，缩小间距和内边距 */
    .replica-container {
        gap: 12px !important;
    }
    .replica-box {
        padding: 14px 10px !important;
    }
    .replica-divider {
        font-size: 18px !important;
    }
    .replica-title {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }
    .upload-wrapper {
        min-height: 120px !important;
    }

    /* 视频参数面板 */
    .video-param-grid {
        gap: 8px !important;
    }
}

/* ==========================================
   11. 首页轮播 & Featured
   ========================================== */
@media (max-width: 768px) {
    .featured-video-slider-container {
        padding: 0 40px !important;
    }

    .btn-nav {
        width: 36px !important;
        height: 36px !important;
    }

    .btn-nav svg {
        width: 36px !important;
        height: 36px !important;
    }

    .btn-nav-prev {
        left: 0 !important;
    }

    .btn-nav-next {
        right: 0 !important;
    }

    .featured-video-grid.horizontal,
    .featured-video-grid.vertical {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px;
    }
}

/* 中屏手机：视频展示3列 */
@media (min-width: 481px) and (max-width: 768px) {
    .featured-video-grid.horizontal,
    .featured-video-grid.vertical {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px;
    }

    .featured-video-section {
        padding: 8px;
        border-radius: 14px;
    }

    .featured-video-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .featured-video-section-header h4 {
        font-size: 16px;
    }

    .featured-video-card {
        border-radius: 12px;
    }

    /* 首页 dashboard hero */
    .dashboard-hero {
        padding: 12px 0;
    }

    .home-carousel-viewer {
        border-radius: 14px;
        overflow: hidden;
    }
    .home-carousel-stage {
        height: 220px !important;
    }
    .guide-container {
        display: grid !important;
        grid-template-columns: 80px 1fr !important;
        gap: 12px !important;
        align-items: start;
    }
    .guide-nav {
        display: flex;
        gap: 2px !important;
        flex-direction: column;
        grid-column: 1;
    }
    .guide-sections {
        grid-column: 2;
    }
    .guide-link {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
}

/* ==========================================
   12. 聊天模块
   ========================================== */
.chat-mobile-welcome {
    display: none;
}

@media (max-width: 768px) {
    /* 卡片/容器全宽 */
    #chat .content-wrapper {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #chat.section {
        min-height: 100%;
        background:
            radial-gradient(circle at 74% 8%, rgba(60, 104, 255, 0.2), transparent 28%),
            radial-gradient(circle at 14% 16%, rgba(41, 151, 255, 0.12), transparent 34%),
            linear-gradient(180deg, #050b14 0%, #07111d 48%, #04080f 100%) !important;
    }

    .chat-studio-card {
        width: 100% !important;
        max-width: 100% !important;
        min-height: calc(100vh - 92px - env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 22px !important;
        padding: 0 !important;
        margin: 10px 12px 0 !important;
        border: 1px solid rgba(118, 143, 188, 0.24) !important;
        background: rgba(5, 13, 25, 0.64) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 48px rgba(0, 0, 0, 0.26) !important;
        backdrop-filter: blur(18px);
    }

    .chat-scroll-area {
        display: flex;
        flex-direction: column;
        padding: 0 14px 0 !important;
        min-height: 0;
    }

    /* 消息区 — 覆盖桌面 1400px 固定宽度 */
    #chatMessages.chat-messages {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: 1 1 auto;
        padding: 12px 0 8px !important;
    }

    .chat-mobile-welcome {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 212px;
        padding: 48px 14px 22px;
        text-align: center;
    }

    .chat-mobile-bot-mark {
        width: 52px;
        height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        border: 1px solid rgba(92, 105, 255, 0.7);
        background: linear-gradient(145deg, rgba(37, 47, 91, 0.92), rgba(17, 24, 50, 0.92));
        box-shadow: 0 12px 30px rgba(37, 99, 235, 0.2);
        color: #7ba3ff;
        font-size: 24px;
        margin-bottom: 22px;
    }

    .chat-mobile-welcome h2 {
        margin: 0;
        font-size: 25px;
        line-height: 1.25;
        font-weight: 760;
        color: rgba(248, 250, 252, 0.96);
        letter-spacing: 0;
    }

    .chat-mobile-welcome h2 span {
        color: #6f87ff;
    }

    .chat-mobile-welcome p {
        margin: 14px 0 0;
        font-size: 17px;
        line-height: 1.35;
        color: rgba(178, 187, 204, 0.88);
        font-weight: 600;
    }

    .chat-message-content {
        font-size: 13px !important;
        line-height: 1.5 !important;
        max-width: 88% !important;
        padding: 9px 11px !important;
    }

    .chat-suggestion-btn {
        font-size: 13px !important;
        padding: 0 14px !important;
    }

    #chat .chat-suggestion-list {
        width: 100% !important;
        max-width: 100% !important;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 0 auto 16px;
        padding: 0 4px;
    }

    #chat .chat-mobile-suggestion {
        min-height: 56px;
        border-radius: 16px;
        border: 1px solid rgba(118, 143, 188, 0.24);
        background: rgba(16, 25, 42, 0.78);
        color: rgba(238, 244, 255, 0.88);
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr) 14px;
        align-items: center;
        gap: 10px;
        text-align: left;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    #chat .chat-mobile-suggestion i:first-child {
        width: 24px;
        height: 24px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
    }

    #chat .chat-mobile-suggestion:nth-child(1) i:first-child {
        color: #f8b320;
        background: rgba(248, 179, 32, 0.13);
    }

    #chat .chat-mobile-suggestion:nth-child(2) i:first-child {
        color: #48e093;
        background: rgba(72, 224, 147, 0.12);
    }

    #chat .chat-mobile-suggestion:nth-child(3) i:first-child {
        color: #c678ff;
        background: rgba(198, 120, 255, 0.13);
    }

    #chat .chat-mobile-suggestion:nth-child(4) i:first-child {
        color: #4ea1ff;
        background: rgba(78, 161, 255, 0.13);
    }

    #chat .chat-mobile-suggestion span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 650;
    }

    #chat .chat-mobile-suggestion i:last-child {
        justify-self: end;
        color: rgba(204, 214, 232, 0.88);
    }

    /* 输入区域 */
    .chat-input-fixed {
        padding: 0 14px 14px !important;
        background: transparent !important;
    }

    .chat-composer-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 输入胶囊 — 全宽，圆角 */
    #chatMediaDrop {
        min-height: 146px;
        border-radius: 24px !important;
        padding: 22px 18px 16px !important;
        width: 100% !important;
        border: 1px solid rgba(118, 143, 188, 0.26) !important;
        background: rgba(20, 30, 49, 0.88) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 36px rgba(0, 0, 0, 0.28);
    }

    /* 输入框 — 不设死高度，让 rows="2" 自然生效 */
    #chatPromptInput {
        font-size: 15px !important;
        min-height: 62px !important;
        padding: 0 !important;
        width: 100% !important;
        color: rgba(236, 242, 255, 0.94) !important;
    }

    #chatPromptInput::placeholder {
        color: rgba(132, 145, 166, 0.86) !important;
    }

    /* 工具栏一行（覆盖900px的column） */
    .chat-toolbar {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
    }

    .chat-toolbar-left {
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .chat-toolbar-right {
        flex-direction: row !important;
        align-items: center !important;
    }

    .chat-icon-btn {
        width: 38px !important;
        height: 38px !important;
        border-color: rgba(132, 151, 184, 0.32) !important;
        background: rgba(16, 25, 42, 0.9) !important;
        color: rgba(226, 232, 240, 0.92) !important;
    }

    .chat-model-btn {
        font-size: 14px !important;
        height: 38px !important;
        padding: 0 16px !important;
        border: 0 !important;
        background: linear-gradient(135deg, #304bff, #2635a9) !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(49, 74, 255, 0.25);
    }

    #chatSendBtn.chat-send-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 17px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #8291ff, #5868ff) !important;
        color: #ffffff !important;
        box-shadow: 0 12px 26px rgba(99, 102, 241, 0.35);
    }

    .chat-media-preview-group {
        flex-direction: column !important;
        gap: 4px !important;
    }

    .chat-media-preview {
        max-width: 100% !important;
    }
}

/* ==========================================
   13. 视频模块 + 输入框可见性修复
   ========================================== */
@media (max-width: 768px) {
    /* --- 底部输入栏上移，避开底部 Tab（最关键）--- */
    #video .video-v2-bottom-bar {
        bottom: 60px !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0 8px 8px !important;
        z-index: 115 !important;
    }

    /* 主内容区留出空间给底部栏 + Tab */
    #video .video-v2-main {
        padding: 12px 8px 140px !important;
        margin-bottom: 0 !important;
    }

    /* 去掉动态扩展 margin（桌面 hover 效果） */
    #video:has(#videoComposerBlock:hover) .video-v2-main,
    #video:has(#videoComposerBlock:focus-within) .video-v2-main,
    #video:has(#videoComposerBlock.has-text) .video-v2-main {
        margin-bottom: 0 !important;
        padding-bottom: 260px !important;
    }

    /* 输入容器 */
    #video #videoMediaDrop.video-v2-chat-input-container {
        border-radius: 16px !important;
        padding: 8px 10px !important;
    }

    /* 输入框本身 — 确保始终可看到 */
    #video #videoPromptInput.video-v2-chat-input {
        min-height: 36px !important;
        max-height: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
        color: #c0c7d0 !important;
    }

    /* 展开状态 */
    #video #videoComposerBlock:hover #videoPromptInput.video-v2-chat-input,
    #video #videoComposerBlock:focus-within #videoPromptInput.video-v2-chat-input,
    #video #videoComposerBlock.has-text #videoPromptInput.video-v2-chat-input,
    body.video-workspace-mode #video #videoComposerBlock:hover #videoPromptInput.video-v2-chat-input,
    body.video-workspace-mode #video #videoComposerBlock:focus-within #videoPromptInput.video-v2-chat-input,
    body.video-workspace-mode #video #videoComposerBlock.has-text #videoPromptInput.video-v2-chat-input {
        min-height: 80px !important;
        max-height: 200px !important;
        line-height: 1.5 !important;
        padding: 8px 40px 8px 8px !important;
        color: #fff !important;
    }

    /* 展开状态容器也调整 */
    #video #videoComposerBlock:hover #videoMediaDrop.video-v2-chat-input-container,
    #video #videoComposerBlock:focus-within #videoMediaDrop.video-v2-chat-input-container,
    #video #videoComposerBlock.has-text #videoMediaDrop.video-v2-chat-input-container,
    body.video-workspace-mode #video #videoComposerBlock:hover #videoMediaDrop.video-v2-chat-input-container,
    body.video-workspace-mode #video #videoComposerBlock:focus-within #videoMediaDrop.video-v2-chat-input-container,
    body.video-workspace-mode #video #videoComposerBlock.has-text #videoMediaDrop.video-v2-chat-input-container {
        border-radius: 14px !important;
        padding: 10px !important;
    }

    /* 控制行 */
    #video .video-v2-controls-row {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 6px !important;
    }

    #video .video-v2-controls-actions {
        justify-content: flex-start;
    }

    /* 视频任务查询面板 */
    #video .video-task-query-panel {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 4px;
    }

    /* 聊天消息区 */
    #video .chat-scroll-area {
        padding: 8px 4px 0 !important;
    }

    #video .chat-composer-wrap {
        padding: 6px 4px 0 !important;
    }

    /* 历史面板 */
    .video-history-panel {
        width: 100%;
        margin: 8px 0 12px;
    }

    /* workspace mode header 保持隐藏 */
    body.video-workspace-mode .header-right .search-bar,
    body.video-workspace-mode .header-key-actions,
    body.video-workspace-mode .notification-btn {
        display: none !important;
    }

    /* 视频结果 */
    #video .chat-result-video-wrap {
        width: 100% !important;
    }

    #video .chat-result-video {
        max-height: 40vh !important;
    }
}

/* ==========================================
   14. 定价页
   ========================================== */
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .pricing-intro {
        padding: 16px;
    }

    .pricing-intro h2 {
        font-size: 20px;
    }

    .pricing-card {
        padding: 20px 16px;
    }

    .pricing-price {
        font-size: 30px;
    }
}

/* ==========================================
   15. 管理后台
   ========================================== */
@media (max-width: 768px) {
    /* 表格加横向滚动 */
    .admin-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-table {
        min-width: 600px;
    }

    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .admin-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   16. 短剧工坊
   ========================================== */
@media (max-width: 768px) {
    .shortdrama-page-shell {
        max-width: 100%;
    }

    .shortdrama-wizard-card {
        padding: 12px 8px !important;
        border-radius: 10px !important;
    }

    .shortdrama-stepbar {
        gap: 4px !important;
    }

    .shortdrama-step-item {
        padding: 6px 3px !important;
        border-radius: 8px !important;
        font-size: 10px !important;
    }

    /* 长剧/独立电影流程图：手机端隐藏 */
    .ld-step2-flow {
        display: none !important;
    }

    .shortdrama-step-item i {
        font-size: 13px !important;
    }

    .shortdrama-stage-badge {
        font-size: 10px !important;
        padding: 3px 8px !important;
    }

    .shortdrama-stage-desc {
        font-size: 12px !important;
    }
}

/* ==========================================
   17. 内容作弊器
   ========================================== */
@media (max-width: 768px) {
    .cheat-modules-grid {
        grid-template-columns: 1fr !important;
    }

    .cheat-workflow-cards {
        flex-direction: column !important;
    }

    .cheat-workflow-card {
        min-width: auto !important;
    }

    .cheat-status-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .cheat-file-tree {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================
   18. 电商工作室 补充
   ========================================== */
@media (max-width: 768px) {
    .est-steps-tabs {
        flex-direction: column;
        gap: 6px;
    }

    .est-step-tab {
        padding: 12px 16px;
        border-radius: 10px;
    }

    .est-step1-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ==========================================
   19. 独立电影
   ========================================== */
@media (max-width: 768px) {
    .film-layout,
    .film-two-col {
        flex-direction: column;
        gap: 16px;
    }

    .film-card {
        padding: 16px;
        border-radius: 14px;
    }
}

/* ==========================================
   20. 资产库 / IP库 / AI 作图
   ========================================== */
@media (max-width: 768px) {
    .assets-grid,
    .gallery-grid,
    .ip-library-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .assets-grid,
    .gallery-grid,
    .ip-library-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   21. Toast / 提示消息
   ========================================== */
@media (max-width: 768px) {
    .toast {
        left: 12px;
        right: 12px;
        bottom: 80px;
        width: auto;
        max-width: none;
        border-radius: 12px;
        font-size: 13px;
        padding: 12px 16px;
    }
}

/* ==========================================
   22. 小屏手机微调 (≤480px)
   ========================================== */
@media (max-width: 480px) {
    .section {
        padding: 12px 8px;
    }

    .header {
        padding: 0 8px;
    }

    .page-title {
        font-size: 15px;
        max-width: 120px;
    }

    .modal-content {
        width: 96vw;
        margin: 10px;
    }

    .sidebar {
        width: 40vw !important;
        max-width: 160px !important;
    }

    body.sidebar-auto-hide .sidebar,
    body.sidebar-collapsed .sidebar {
        width: 40vw !important;
        max-width: 160px !important;
    }

    .mobile-bottom-nav {
        height: 56px;
    }

    .mobile-tab {
        font-size: 10px;
        min-width: 40px;
        padding: 4px 4px;
    }

    .mobile-tab i {
        font-size: 18px;
    }

    .main-content {
        padding-bottom: 64px;
    }
}

/* ==========================================
   23. 平板横屏 (768px-1024px) 温和调整
   ========================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --sidebar-width: 200px;
    }

    .sidebar {
        width: 200px;
    }

    .section {
        padding: 20px;
    }

    .featured-video-grid.horizontal {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-video-grid.vertical {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {
    #mobileVideoFeed {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .app-container {
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }

    .sidebar {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100vw !important;
        min-width: 0;
        overflow-y: auto;
        padding-bottom: 72px;
    }

    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 62px;
        z-index: 150;
        justify-content: space-evenly;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .mobile-tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 52px;
        min-height: 48px;
        padding: 4px 6px;
        border-radius: 10px;
        color: #71717a;
        font-size: 11px;
        font-weight: 500;
        text-decoration: none;
    }

    .mobile-tab i {
        font-size: 22px;
    }

    .mobile-tab span {
        white-space: nowrap;
    }

    .mobile-tab.active {
        color: #d4d4d8;
        background: rgba(255, 255, 255, 0.08);
    }

    body.mobile-home-feed-active {
        overflow: hidden;
        background: #050507;
    }

    body.mobile-home-feed-active .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 0;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
        z-index: 170;
        pointer-events: none;
    }

    body.mobile-home-feed-active .header-left,
    body.mobile-home-feed-active .header-right > :not(#userProfileMenu):not(#mobileRechargeBtn) {
        display: none !important;
    }

    body.mobile-home-feed-active #mobileRechargeBtn {
        position: fixed;
        top: max(15px, calc(env(safe-area-inset-top) + 3px));
        right: 60px;
        z-index: 190;
        pointer-events: auto;
        display: inline-flex !important;
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    body.mobile-home-feed-active #userProfileMenu {
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        right: 12px;
        z-index: 190;
        pointer-events: auto;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    body.mobile-home-feed-active #userProfileMenu .user-info {
        display: none !important;
    }

    body.mobile-home-feed-active #userProfileMenu .avatar {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255,255,255,0.3);
        box-shadow: 0 10px 28px rgba(0,0,0,0.35);
    }

    body.mobile-home-feed-active .main-content {
        overflow: hidden;
        padding-bottom: 0 !important;
    }

    #home.section:has(#mobileVideoFeed) {
        padding: 0 !important;
        min-height: 100dvh;
        overflow: hidden;
        background: #050507;
    }

    #home.section:has(#mobileVideoFeed) > :not(#mobileVideoFeed) {
        display: none !important;
    }

    .mobile-video-feed {
        position: relative;
        width: 100vw;
        height: 100dvh;
        overflow-y: auto;
        overflow-x: hidden;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
        background: #050507;
        z-index: 20;
    }

    .mobile-feed-card {
        position: relative;
        width: 100vw;
        height: 100dvh;
        scroll-snap-align: start;
        overflow: hidden;
        background: #050507;
        isolation: isolate;
    }

    .mobile-feed-media,
    .mobile-feed-shade {
        position: absolute;
        inset: 0;
    }

    .mobile-feed-media {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #050507;
        overflow: hidden;
        z-index: 1;
    }

    .mobile-feed-card--horizontal .mobile-feed-media::before {
        content: "";
        position: absolute;
        inset: -28px;
        background: var(--mobile-feed-bg) center / cover no-repeat;
        filter: blur(26px);
        transform: scale(1.12);
        opacity: 0.44;
    }

    .mobile-feed-video {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 2;
        background: #050507;
    }

    .mobile-feed-card--horizontal .mobile-feed-video {
        width: calc(100vw - 24px);
        height: auto;
        max-height: 62vh;
        aspect-ratio: 16 / 9;
        object-fit: contain;
        border-radius: 12px;
        box-shadow: 0 16px 52px rgba(0,0,0,0.45);
    }

    .mobile-feed-shade {
        z-index: 3;
        pointer-events: none;
        background:
            linear-gradient(180deg, rgba(0,0,0,0.46) 0%, transparent 24%, transparent 58%, rgba(0,0,0,0.76) 100%),
            linear-gradient(90deg, rgba(0,0,0,0.28), transparent 38%);
    }

    .mobile-feed-sound {
        position: absolute;
        right: 16px;
        bottom: calc(142px + env(safe-area-inset-bottom));
        z-index: 8;
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255,255,255,0.18);
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: #ffffff;
        background: rgba(10,12,18,0.42);
        box-shadow: 0 12px 28px rgba(0,0,0,0.32);
        backdrop-filter: blur(16px);
        cursor: pointer;
    }

    .mobile-feed-sound[aria-pressed="true"] {
        background: rgba(34,211,238,0.9);
        border-color: rgba(255,255,255,0.28);
        box-shadow: 0 14px 30px rgba(34,211,238,0.24);
    }

    .mobile-feed-sound i {
        font-size: 16px;
        line-height: 1;
    }

    .mobile-feed-copy {
        position: absolute;
        left: 16px;
        right: 78px;
        bottom: calc(78px + env(safe-area-inset-bottom));
        z-index: 5;
        color: #fff;
        transition: transform 0.24s ease, opacity 0.24s ease;
    }

    .mobile-feed-title {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.25;
        text-shadow: 0 2px 12px rgba(0,0,0,0.55);
    }

    .mobile-feed-hint {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-top: 8px;
        padding: 7px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.16);
        background: rgba(255,255,255,0.14);
        color: rgba(255,255,255,0.86);
        font-size: 12px;
        backdrop-filter: blur(14px);
        cursor: pointer;
        pointer-events: auto;
    }

    .mobile-feed-prompt {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(82vw, 340px);
        z-index: 7;
        padding: calc(72px + env(safe-area-inset-top)) 18px calc(90px + env(safe-area-inset-bottom));
        overflow-y: auto;
        background: rgba(8, 10, 14, 0.88);
        color: #f8fafc;
        border-left: 1px solid rgba(255,255,255,0.12);
        backdrop-filter: blur(18px);
        transform: translateX(102%);
        transition: transform 0.24s ease;
    }

    .mobile-feed-card.show-prompt::after {
        content: '';
        position: absolute;
        inset: 0 min(82vw, 340px) 0 0;
        z-index: 6;
        background: rgba(0,0,0,0.12);
    }

    .mobile-feed-card.show-prompt .mobile-feed-prompt {
        transform: translateX(0);
    }

    .mobile-feed-card.show-prompt .mobile-feed-copy {
        transform: translateX(-18px);
        opacity: 0.45;
    }

    .mobile-feed-prompt-label {
        font-size: 12px;
        color: rgba(255,255,255,0.6);
        margin-bottom: 10px;
    }

    .mobile-feed-prompt p {
        margin: 0;
        font-size: 15px;
        line-height: 1.75;
        white-space: pre-wrap;
        word-break: break-word;
    }

    .mobile-novel-section,
    .mobile-novel-reader-section,
    .mobile-assets-section {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-top: 0 !important;
        padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-novel-wrapper,
    .mobile-reader-wrapper,
    .mobile-assets-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding: 0 !important;
    }

    .mobile-novel-shell,
    .mobile-reader-shell,
    .mobile-assets-shell {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        min-height: calc(100vh - 84px - env(safe-area-inset-bottom));
        background:
            radial-gradient(circle at top right, rgba(34, 211, 238, 0.12), transparent 28%),
            linear-gradient(180deg, #081016 0%, #05070b 100%);
        color: #e5eef7;
    }

    .mobile-novel-topbar,
    .mobile-reader-topbar {
        position: sticky;
        top: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
        background:
            linear-gradient(180deg, rgba(10, 16, 24, 0.96), rgba(7, 10, 15, 0.90));
        backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    }

    .mobile-novel-title {
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 0;
        flex: 1;
        text-align: center;
    }

    .mobile-novel-search,
    .mobile-novel-back,
    .mobile-reader-back {
        flex: 0 0 auto;
    }

    .mobile-novel-search,
    .mobile-novel-back {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: #f5fbff;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    }

    .mobile-reader-back {
        position: fixed;
        left: 16px;
        top: calc(78px + env(safe-area-inset-top));
        z-index: 80;
        min-width: 72px;
        width: auto;
        height: 34px;
        padding: 0 12px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        background: rgba(18, 26, 36, 0.86);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: #f5fbff;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(14px);
    }

    .mobile-reader-back::after {
        content: none;
    }

    .mobile-novel-search i,
    .mobile-novel-back i,
    .mobile-reader-back i {
        font-size: 14px;
    }

    .mobile-novel-filter-row {
        padding: 12px 12px 0;
    }

    .mobile-novel-mode-switch {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 12px 12px 0;
    }

    .mobile-novel-mode-btn {
        min-height: 42px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.10);
        background: rgba(255, 255, 255, 0.04);
        color: rgba(229, 238, 247, 0.78);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    }

    .mobile-novel-mode-btn.active {
        background: linear-gradient(135deg, rgba(34, 211, 238, 0.24), rgba(59, 130, 246, 0.18));
        border-color: rgba(34, 211, 238, 0.34);
        color: #f8feff;
    }

    .mobile-novel-mode-hint {
        padding: 10px 12px 0;
        color: rgba(229, 238, 247, 0.58);
        font-size: 11px;
        line-height: 1.5;
    }

    .mobile-novel-hero {
        margin: 12px 12px 0;
        padding: 18px;
        border-radius: 18px;
        background:
            linear-gradient(135deg, rgba(34, 211, 238, 0.20), rgba(59, 130, 246, 0.10)),
            rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.10);
        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    }

    .mobile-novel-hero-badge {
        display: inline-flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        font-size: 11px;
        color: rgba(229, 238, 247, 0.88);
        margin-bottom: 12px;
    }

    .mobile-novel-hero h2 {
        margin: 0;
        font-size: 20px;
        line-height: 1.25;
    }

    .mobile-novel-hero p {
        margin: 10px 0 0;
        color: rgba(229, 238, 247, 0.74);
        font-size: 13px;
        line-height: 1.7;
    }

    .mobile-novel-category-strip {
        display: flex;
        gap: 8px;
        padding: 14px 12px 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .mobile-novel-category-strip::-webkit-scrollbar {
        display: none;
    }

    .mobile-novel-cat {
        flex: 0 0 auto;
        padding: 8px 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        color: rgba(229, 238, 247, 0.76);
        font-size: 12px;
        white-space: nowrap;
    }

    .mobile-novel-category-select {
        width: 100%;
        min-height: 46px;
        padding: 0 46px 0 14px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.10);
        background:
            linear-gradient(180deg, rgba(14, 22, 30, 0.98), rgba(11, 17, 24, 0.98));
        color: #f4fbff;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        color-scheme: dark;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 10px 24px rgba(0, 0, 0, 0.18);
        background-image:
            linear-gradient(45deg, transparent 50%, rgba(229, 238, 247, 0.80) 50%),
            linear-gradient(135deg, rgba(229, 238, 247, 0.80) 50%, transparent 50%),
            linear-gradient(180deg, rgba(34, 211, 238, 0.12), rgba(34, 211, 238, 0.02));
        background-position:
            calc(100% - 18px) 18px,
            calc(100% - 12px) 18px,
            0 0;
        background-size:
            6px 6px,
            6px 6px,
            100% 100%;
        background-repeat: no-repeat;
        outline: none;
    }

    .mobile-novel-category-select option {
        background: #071118;
        color: #f4fbff;
    }

    .mobile-novel-category-select option:checked,
    .mobile-novel-category-select option:focus,
    .mobile-novel-category-select option:hover {
        background: #0d3b49;
        color: #ffffff;
    }

    .mobile-novel-category-select optgroup {
        background: #071118;
        color: #f4fbff;
    }

    .mobile-novel-category-select:focus {
        border-color: rgba(34, 211, 238, 0.42);
        box-shadow:
            0 0 0 3px rgba(34, 211, 238, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.05),
            0 10px 24px rgba(0, 0, 0, 0.18);
    }

    .mobile-novel-filter-row::before {
        content: var(--mobile-novel-category-label, "Category");
        display: block;
        margin: 0 0 8px 2px;
        color: rgba(229, 238, 247, 0.56);
        font-size: 11px;
        letter-spacing: 0;
    }

    .mobile-novel-cat.active {
        background: rgba(34, 211, 238, 0.18);
        border-color: rgba(34, 211, 238, 0.36);
        color: #f8feff;
    }

    .mobile-novel-list {
        display: grid;
        gap: 12px;
        padding: 14px 12px 0;
    }

    .mobile-novel-empty {
        margin: 12px;
        padding: 16px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: rgba(229, 238, 247, 0.82);
        font-size: 13px;
        line-height: 1.6;
    }

    .mobile-novel-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 14px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
    }

    .mobile-novel-cover {
        display: none;
    }

    .mobile-novel-cover--2 {
        display: none;
    }

    .mobile-novel-cover--3 {
        display: none;
    }

    .mobile-novel-card-copy {
        min-width: 0;
    }

    .mobile-novel-card-top,
    .mobile-novel-card-meta {
        color: rgba(229, 238, 247, 0.62);
        font-size: 11px;
    }

    .mobile-novel-card h3 {
        margin: 8px 0 6px;
        font-size: 16px;
        line-height: 1.35;
        color: #f8fbff;
    }

    .mobile-novel-card p {
        margin: 0;
        font-size: 13px;
        line-height: 1.65;
        color: rgba(229, 238, 247, 0.76);
    }

    .mobile-novel-card-meta {
        margin-top: 10px;
    }

    .mobile-storyboard-empty-stage {
        position: relative;
        min-height: calc(100vh - 220px);
        margin: 12px 12px 0;
        padding: 18px;
        border-radius: 18px;
        overflow: hidden;
        background:
            radial-gradient(circle at 18% 18%, rgba(56, 189, 248, 0.18), transparent 34%),
            radial-gradient(circle at 84% 22%, rgba(99, 102, 241, 0.18), transparent 30%),
            linear-gradient(180deg, rgba(9, 16, 24, 0.96), rgba(7, 12, 18, 0.98));
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
    }

    .mobile-storyboard-empty-stage::before,
    .mobile-storyboard-empty-stage::after {
        content: "";
        position: absolute;
        inset: auto;
        pointer-events: none;
    }

    .mobile-storyboard-empty-stage::before {
        left: -12%;
        top: 18%;
        width: 56%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.34), transparent);
        transform: rotate(-14deg);
    }

    .mobile-storyboard-empty-stage::after {
        right: -10%;
        bottom: 24%;
        width: 44%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.30), transparent);
        transform: rotate(18deg);
    }

    .mobile-storyboard-empty-shell {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 12px;
        align-content: center;
        min-height: calc(100vh - 268px);
        text-align: left;
    }

    .mobile-storyboard-empty-badge {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        padding: 5px 10px;
        border-radius: 999px;
        border: 1px solid rgba(125, 211, 252, 0.30);
        background: rgba(125, 211, 252, 0.10);
        color: #dff8ff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0;
    }

    .mobile-storyboard-empty-shell h3 {
        margin: 0;
        color: #f8fbff;
        font-size: 22px;
        line-height: 1.2;
    }

    .mobile-storyboard-empty-shell p {
        margin: 0;
        max-width: 26ch;
        color: rgba(229, 238, 247, 0.72);
        font-size: 13px;
        line-height: 1.7;
    }

    .mobile-storyboard-empty-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        margin-top: 14px;
    }

    .mobile-storyboard-empty-strip {
        height: 92px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
            rgba(255, 255, 255, 0.03);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 10px 22px rgba(0, 0, 0, 0.16);
        position: relative;
        overflow: hidden;
    }

    .mobile-storyboard-empty-strip::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg, transparent 28%, rgba(125, 211, 252, 0.10) 50%, transparent 72%);
        transform: translateX(-48%);
        opacity: 0.9;
    }

    .mobile-storyboard-list {
        display: grid;
        gap: 12px;
        padding: 12px;
    }

    .mobile-storyboard-card {
        padding: 14px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
    }

    .mobile-storyboard-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
    }

    .mobile-storyboard-project {
        min-width: 0;
        color: rgba(229, 238, 247, 0.68);
        font-size: 11px;
        line-height: 1.35;
    }

    .mobile-storyboard-card h3 {
        margin: 0;
        font-size: 16px;
        line-height: 1.35;
        color: #f8fbff;
    }

    .mobile-storyboard-card p {
        margin: 8px 0 0;
        font-size: 13px;
        line-height: 1.65;
        color: rgba(229, 238, 247, 0.76);
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .mobile-storyboard-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
        color: rgba(229, 238, 247, 0.60);
        font-size: 11px;
    }

    .mobile-storyboard-badge {
        flex: 0 0 auto;
        padding: 4px 8px;
        border-radius: 999px;
        font-size: 11px;
        line-height: 1;
        background: rgba(255, 255, 255, 0.06);
        color: rgba(229, 238, 247, 0.74);
    }

    .mobile-storyboard-badge--done {
        background: rgba(34, 197, 94, 0.16);
        color: #86efac;
        border: 1px solid rgba(34, 197, 94, 0.25);
    }

    .mobile-storyboard-badge--processing,
    .mobile-storyboard-badge--submitting {
        background: rgba(59, 130, 246, 0.16);
        color: #93c5fd;
        border: 1px solid rgba(59, 130, 246, 0.25);
    }

    .mobile-storyboard-badge--failed {
        background: rgba(248, 113, 113, 0.16);
        color: #fca5a5;
        border: 1px solid rgba(248, 113, 113, 0.25);
    }

    .mobile-storyboard-badge--pending,
    .mobile-storyboard-badge--idle {
        background: rgba(255, 255, 255, 0.06);
        color: rgba(229, 238, 247, 0.72);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-reader-chapters {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 46px 12px 12px;
        scrollbar-width: none;
    }

    .mobile-reader-page {
        padding: 16px 14px 120px;
    }

    .mobile-reader-page h2 {
        margin: 0 0 12px;
        font-size: 20px;
        line-height: 1.35;
        color: #f8fbff;
    }

    .mobile-reader-content {
        white-space: pre-wrap;
        word-break: break-word;
        color: rgba(229, 238, 247, 0.88);
        font-size: 15px;
        line-height: 1.8;
    }

    .mobile-reader-actionbar {
        position: fixed;
        right: 14px;
        bottom: calc(88px + env(safe-area-inset-bottom));
        z-index: 70;
        padding: 0;
        touch-action: none;
        user-select: none;
    }

    .mobile-reader-video-btn {
        min-width: 72px;
        height: 42px;
        border: 1px solid rgba(34, 211, 238, 0.32);
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 13px;
        color: #f8feff;
        background:
            linear-gradient(135deg, rgba(34, 211, 238, 0.88), rgba(59, 130, 246, 0.82));
        box-shadow: 0 12px 28px rgba(34, 211, 238, 0.24), 0 4px 14px rgba(0, 0, 0, 0.32);
        font-size: 13px;
        font-weight: 700;
        cursor: grab;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-reader-actionbar.is-dragging .mobile-reader-video-btn {
        cursor: grabbing;
        transform: scale(1.03);
        box-shadow: 0 16px 34px rgba(34, 211, 238, 0.30), 0 6px 18px rgba(0, 0, 0, 0.36);
    }

    .mobile-reader-video-btn i {
        font-size: 13px;
    }

    .mobile-reader-video-btn.is-loading {
        opacity: 0.82;
        cursor: grab;
    }

    .mobile-reader-video-btn.is-loading::after {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
    }

    .mobile-reader-chapters::-webkit-scrollbar {
        display: none;
    }

    .mobile-reader-chapter {
        flex: 0 0 auto;
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.04);
        color: rgba(229, 238, 247, 0.78);
        font-size: 12px;
    }

    .mobile-reader-chapter.active {
        background: rgba(34, 211, 238, 0.18);
        border-color: rgba(34, 211, 238, 0.38);
        color: #f8feff;
    }

    .mobile-reader-page {
        margin: 0 12px 12px;
        padding: 16px;
        border-radius: 16px;
        background: #20242b;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    }

    .mobile-reader-page h2 {
        margin: 0 0 12px;
        font-size: 18px;
        color: #f4f7fb;
    }

    .mobile-reader-content {
        font-size: 15px;
        line-height: 1.9;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-word;
        color: rgba(235, 241, 248, 0.88);
    }

    .mobile-bottom-nav {
        background: rgba(5,5,7,0.72);
        border-top-color: rgba(255,255,255,0.1);
        backdrop-filter: blur(18px);
    }

    .mobile-assets-topbar {
        position: sticky;
        top: 0;
        z-index: 8;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        align-items: center;
        gap: 10px;
        padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
        background: linear-gradient(180deg, rgba(7, 10, 15, 0.97), rgba(7, 10, 15, 0.90));
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(18px);
    }

    .mobile-assets-back,
    .mobile-assets-refresh {
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.07);
        color: #f8fbff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-assets-title {
        font-size: 17px;
        font-weight: 800;
        color: #f8fbff;
        line-height: 1.2;
        text-align: center;
    }

    .mobile-assets-subtitle {
        margin-top: 3px;
        font-size: 11px;
        color: rgba(229, 238, 247, 0.58);
        text-align: center;
    }

    .mobile-assets-panel-stack {
        display: grid;
        gap: 12px;
        min-width: 0;
        padding: 12px 12px 14px;
    }

    .mobile-assets-panel {
        position: relative;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 14px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.045);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
    }

    .mobile-assets-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
    }

    .mobile-assets-panel-head h2 {
        min-width: 0;
        margin: 0;
        color: #ffe45c;
        font-size: 20px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-assets-panel-head span {
        flex: 0 0 auto;
        padding: 5px 9px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.10);
        color: rgba(248, 251, 255, 0.74);
        font-size: 11px;
        font-weight: 800;
    }

    .mobile-assets-character-head {
        display: grid;
        grid-template-columns: minmax(0, auto) minmax(132px, 1fr);
        align-items: center;
        gap: 12px;
        min-width: 0;
    }

    .mobile-assets-character-head h2 {
        margin: 0;
        color: #ffe45c;
        font-size: 20px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .mobile-assets-gender-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        min-width: 0;
        padding: 3px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.055);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-assets-gender-prop-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mobile-assets-gender-tab {
        min-width: 0;
        height: 32px;
        padding: 0 7px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: rgba(248, 251, 255, 0.70);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-size: 12px;
        font-weight: 800;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-assets-gender-tab i,
    .mobile-assets-gender-tab span,
    .mobile-assets-gender-tab b {
        flex: 0 0 auto;
    }

    .mobile-assets-gender-tab span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-assets-gender-tab b {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.10);
        color: inherit;
        font-size: 10px;
        line-height: 18px;
        text-align: center;
    }

    .mobile-assets-gender-tab.active {
        background: rgba(255, 228, 92, 0.16);
        color: #ffe45c;
        box-shadow: inset 0 0 0 1px rgba(255, 228, 92, 0.26);
    }

    .mobile-assets-note {
        margin: 10px 0 12px;
        color: rgba(229, 238, 247, 0.66);
        font-size: 12px;
        line-height: 1.55;
    }

    .mobile-assets-strip {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: block;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 2px;
        margin: 0;
        scroll-behavior: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-y;
    }

    .mobile-assets-strip::-webkit-scrollbar {
        display: none;
    }

    .mobile-assets-strip-track {
        display: flex;
        align-items: stretch;
        gap: 0;
        width: max-content;
        min-width: max-content;
        will-change: transform;
        transform: translate3d(0, 0, 0);
    }

    .mobile-assets-strip-group {
        flex: 0 0 auto;
        display: flex;
        align-items: stretch;
        gap: 10px;
        min-width: max-content;
        padding-right: 10px;
    }

    .mobile-assets-strip.is-auto-looping .mobile-assets-strip-track {
        animation: mobileAssetsTrackLoop var(--mobile-assets-loop-duration, 36s) linear infinite;
        animation-delay: var(--mobile-assets-loop-delay, 0s);
    }

    .mobile-assets-strip--rtl.is-auto-looping .mobile-assets-strip-track {
        animation-direction: normal;
    }

    .mobile-assets-strip--ltr.is-auto-looping .mobile-assets-strip-track {
        animation-direction: reverse;
    }

    .mobile-assets-strip.is-user-paused .mobile-assets-strip-track {
        animation-play-state: paused;
    }

    .mobile-assets-strip.is-user-dragging .mobile-assets-strip-track {
        animation: none !important;
    }

    @keyframes mobileAssetsTrackLoop {
        from {
            transform: translate3d(0, 0, 0);
        }
        to {
            transform: translate3d(-50%, 0, 0);
        }
    }

    .mobile-assets-strip-item {
        flex: 0 0 118px;
        height: 138px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 8px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.06);
        color: #f8fbff;
        position: relative;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-assets-strip-item img,
    .mobile-assets-strip-item video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        background: #0b1118;
    }

    .mobile-assets-strip-item span {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 18px 8px 7px;
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
    }

    .mobile-assets-empty,
    .mobile-assets-error {
        margin: 0;
        padding: 16px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        color: rgba(229, 238, 247, 0.76);
        font-size: 13px;
        line-height: 1.6;
    }

    .mobile-assets-error {
        color: #fecaca;
        border-color: rgba(248, 113, 113, 0.28);
        background: rgba(127, 29, 29, 0.22);
    }

    .mobile-asset-modal {
        position: fixed;
        inset: 0;
        z-index: 2000;
        padding: calc(20px + env(safe-area-inset-top)) 14px calc(98px + env(safe-area-inset-bottom));
        background: rgba(0, 0, 0, 0.72);
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(12px);
    }

    .mobile-asset-modal-sheet {
        width: min(100%, 440px);
        max-height: 100%;
        border-radius: 10px;
        overflow: hidden;
        background: #0b1118;
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.46);
        display: flex;
        flex-direction: column;
    }

    .mobile-asset-modal-head {
        min-height: 48px;
        padding: 0 10px 0 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-asset-modal-head strong {
        min-width: 0;
        color: #f8fbff;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-asset-modal-head button {
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.07);
        color: #f8fbff;
    }

    .mobile-asset-modal-media {
        min-height: 220px;
        max-height: 62vh;
        background: #05070b;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: auto;
    }

    .mobile-asset-modal-media img,
    .mobile-asset-modal-media video {
        max-width: 100%;
        max-height: 62vh;
        display: block;
        object-fit: contain;
    }

    .mobile-asset-modal-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
    }

    .mobile-asset-modal-actions button {
        height: 42px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        background: rgba(255, 255, 255, 0.06);
        color: #f8fbff;
        font-size: 12px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .mobile-asset-modal-actions button:last-child {
        color: #fecaca;
        border-color: rgba(248, 113, 113, 0.24);
        background: rgba(127, 29, 29, 0.20);
    }

    .mobile-asset-collection-sheet {
        height: min(78vh, 680px);
    }

    .mobile-asset-collection-grid {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-content: start;
        gap: 10px;
        padding: 12px;
        background: #05070b;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-asset-collection-search {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        margin: 10px 12px 0;
        padding: 0 10px;
        min-height: 38px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.10);
        background: rgba(255, 255, 255, 0.06);
        color: rgba(248, 251, 255, 0.72);
    }

    .mobile-asset-collection-search input {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: none;
        background: transparent;
        color: #f8fbff;
        font-size: 13px;
        font-weight: 700;
    }

    .mobile-asset-collection-search input::placeholder {
        color: rgba(248, 251, 255, 0.42);
    }

    .mobile-asset-collection-card {
        min-width: 0;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: 8px;
        overflow: hidden;
        padding: 0;
        background: rgba(255, 255, 255, 0.055);
        color: #f8fbff;
        display: block;
        text-align: left;
    }

    .mobile-asset-collection-thumb {
        width: 100%;
        aspect-ratio: 1 / 1;
        background: #0b1118;
        overflow: hidden;
    }

    .mobile-asset-collection-thumb img,
    .mobile-asset-collection-thumb video {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .mobile-asset-collection-card span {
        display: block;
        padding: 7px 7px 8px;
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-asset-collection-pager {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        padding: 10px 12px 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        background: #0b1118;
    }

    .mobile-asset-collection-pager button {
        height: 36px;
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.06);
        color: #f8fbff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 800;
    }

    .mobile-asset-collection-pager button:disabled {
        opacity: 0.42;
    }

    .mobile-asset-collection-pager strong {
        color: rgba(248, 251, 255, 0.78);
        font-size: 12px;
        white-space: nowrap;
    }
}

/* ==========================================
   24. 安全区 & 设备适配
   ========================================== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .mobile-bottom-nav {
            padding-bottom: calc(8px + env(safe-area-inset-bottom));
            height: auto;
            min-height: 56px;
        }

        .main-content {
            padding-bottom: calc(72px + env(safe-area-inset-bottom));
        }
    }
}

/* ==========================================
   25. 各模块补充修复 (short.css / film_production / ai-image / admin)
   ========================================== */

/* --- 25a. 短剧工坊 (short.css) — 保持PC排列，字更大 --- */
@media (max-width: 768px) {
    /* 步骤条：保持原排列 */
    .td-stepbar {
        gap: 4px;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .td-stepbar .td-step-item {
        padding: 8px 4px;
        font-size: 11px;
    }
    .td-stepbar .td-step-item i {
        font-size: 13px;
    }

    /* 项目列表：改为2列，保证项目名至少显示5个字 */
    .td-project-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .td-project-tab-name {
        min-width: 55px !important;
    }
    .td-project-list .td-project-pill {
        padding: 6px 4px !important;
        font-size: 11px !important;
    }

    /* 详情切换器：保持5列一行 */
    .td-detail-switcher {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 3px !important;
    }
    .td-detail-switcher .td-detail-tab {
        padding: 6px 3px !important;
        font-size: 11px !important;
    }
    .td-detail-switcher .td-detail-tab i {
        font-size: 12px !important;
    }

    /* 映射网格：保持3列；单详情模式改为1列 */
    .td-mapping-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .td-mapping-grid.is-single-detail {
        grid-template-columns: 1fr !important;
    }

    /* 单详情模式卡片列表：1列，卡片填满 */
    .td-mapping-column.is-single-detail .td-mapping-card-list {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .td-mapping-column.is-single-detail .td-mapping-card {
        padding: 12px !important;
        border-radius: 12px !important;
        margin-bottom: 0 !important;
    }
    .td-mapping-column.is-single-detail .td-mapping-name {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }
    .td-mapping-column.is-single-detail .td-mapping-kind-badge {
        font-size: 12px !important;
        padding: 4px 8px !important;
        margin-bottom: 6px !important;
    }
    .td-mapping-column.is-single-detail .td-mapping-action-row {
        gap: 6px !important;
    }
    .td-mapping-column.is-single-detail .td-mapping-action-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* 资产生成网格：2列（两行） */
    .td-asset-gen-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    /* 资产生成按钮：手机端分行，避免横向穿出 */
    .td-section-action-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    .td-asset-flow-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
    }
    .td-asset-flow-btn {
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
        padding: 6px 5px !important;
        font-size: 11px !important;
        min-height: 40px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }
    .td-asset-flow-btn .td-asset-flow-step {
        font-size: 10px !important;
    }
    .td-asset-flow-btn .td-asset-flow-main {
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        line-height: 1.15 !important;
    }
    .td-asset-flow-btn:not(:last-child)::after {
        display: none !important;
    }
    .td-add-asset-btn {
        width: 100% !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        padding: 7px 8px !important;
        font-size: 12px !important;
        min-height: 36px !important;
        justify-content: center !important;
        white-space: normal !important;
    }

    /* 时间线：保持5列 */
    .td-timeline {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 3px !important;
        font-size: 11px !important;
    }

    /* 上传切换标签：保持2列 */
    .td-upload-tab-bar {
        gap: 4px;
    }
    .td-upload-tab-bar .td-upload-tab {
        font-size: 12px !important;
        padding: 8px 6px !important;
    }

    /* 第二阶段流程：保持原排列 */
    .td-step2-flow {
        gap: 4px !important;
    }
    .td-step2-flow .td-step2-arrow {
        width: 24px !important;
    }

    /* 项目编辑器：剧本/风格/年代并排 */
    .td-project-pill--editor {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
    .td-project-pill--editor .td-project-pill-segment--editor {
        padding: 10px 10px !important;
        min-height: 44px !important;
        gap: 6px !important;
    }
    .td-project-pill--editor .td-project-pill-label {
        font-size: 13px !important;
    }
    .td-project-pill--editor input,
    .td-project-pill--editor select {
        font-size: 14px !important;
    }
    .td-save-project-btn {
        min-height: 40px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
    .td-project-pill--split {
        gap: 4px !important;
    }

    /* 分镜卡片：缩小空白 */
    .td-storyboard-list {
        gap: 8px !important;
        margin-bottom: 10px !important;
    }
    .td-storyboard-card {
        padding: 10px !important;
        border-radius: 12px !important;
    }
    .td-storyboard-head {
        margin-bottom: 6px !important;
    }
    .td-storyboard-text {
        margin-bottom: 6px !important;
        padding: 4px 8px !important;
        border-radius: 8px !important;
        max-height: 200px !important;
        overflow-y: auto !important;
    }
    .td-storyboard-text:empty {
        display: none !important;
    }
    .td-storyboard-title {
        font-size: 15px !important;
    }
    .td-card-media-row {
        margin: 6px 0 !important;
        gap: 8px !important;
    }

    /* 卡片内边距 */
    .td-project-card,
    .td-project-pill,
    .td-stage3-hero,
    .td-wizard-card {
        padding: 10px 8px !important;
    }

    /* 上传分割 */
    .td-upload-split {
        gap: 4px !important;
    }

    /* 手动上传网格：2列 */
    .td-manual-upload-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
}

/* --- 25b. 独立电影 (film_production.css) --- */
@media (max-width: 768px) {
    /* 步骤条：4列→2列，分两行 */
    .fp-stepbar {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2px;
        margin-bottom: 14px;
    }
    .fp-step-item {
        padding: 10px 8px;
        font-size: 12px;
        gap: 6px;
    }
    .fp-step-item i {
        font-size: 13px;
    }
    /* 阶段1操作按钮缩小间距 */
    .fp-stage1-actions {
        gap: 6px;
    }

    /* 计划表格在移动端可横向滚动 */
    .fp-plan-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 分页控件：横向一排 */
    .fp-clip-nav {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }
    .fp-clip-nav-btn {
        padding: 0 10px !important;
        font-size: 12px !important;
        min-height: 32px !important;
        flex-shrink: 0 !important;
    }
    .fp-clip-select {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        font-size: 12px !important;
        min-height: 32px !important;
        padding: 0 10px !important;
    }
    .fp-clip-info {
        display: none !important;
    }
}

/* --- 25c. AI 作图 (ai-image.css) --- */
@media (max-width: 768px) {
    /* 固定底部输入栏上移，避免被底部 Tab 遮挡 */
    #ai-image #aiImageTopUsageNote {
        width: calc(100% - 24px) !important;
        margin-top: 8px !important;
        padding: 10px 12px !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    #ai-image #aiImageTopUsageNote > span {
        display: none !important;
    }

    #ai-image .video-v2-bottom-bar {
        bottom: 54px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 115 !important;
        padding: 0 8px 8px !important;
    }

    /* AI 作图输入框最小高度 */
    #ai-image #aiImagePromptInput.video-v2-chat-input {
        min-height: 36px !important;
        max-height: 160px !important;
        font-size: 14px !important;
        overflow-y: hidden !important;
    }

    /* 下拉框缩短 */
    #ai-image .ai-image-dropdowns {
        gap: 3px !important;
    }
    #ai-image .ai-image-select {
        max-width: 100px !important;
        padding: 4px 20px 4px 8px !important;
        font-size: 13px !important;
        height: auto !important;
        min-height: 30px !important;
    }

    /* 控制按钮：框包下字，字体清晰 */
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        gap: 6px !important;
        max-height: none !important;
    }
    #ai-image .video-option-btn {
        max-width: none !important;
        min-width: auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 32px !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        word-break: keep-all !important;
    }

    #ai-image #aiImageMediaDrop.video-v2-chat-input-container {
        padding: 12px 12px 10px !important;
        border-radius: 22px !important;
    }

    #ai-image .video-v2-input-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px !important;
        align-items: stretch !important;
    }

    #ai-image .video-v2-chat-input-wrapper {
        width: 100% !important;
        min-width: 0 !important;
    }

    #ai-image .ai-image-dropdowns {
        position: static !important;
        width: 100% !important;
        display: none !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px !important;
        order: 2;
        z-index: 1 !important;
    }

    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        display: grid !important;
    }

    #ai-image .ai-image-select {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 7px 24px 7px 9px !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        background-color: rgba(31, 36, 48, 0.96) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
        color: rgba(226, 232, 240, 0.9) !important;
    }

    #ai-image #aiImageComposerBlock:hover #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:focus-within #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock.has-text #aiImagePromptInput.video-v2-chat-input {
        min-height: 68px !important;
        max-height: 160px !important;
        padding: 8px 46px 8px 8px !important;
        overflow-y: auto !important;
    }

    #ai-image #aiImageComposerBlock:hover .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock.has-text .video-v2-chat-input-highlights {
        padding: 8px 46px 8px 8px !important;
    }

    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding: 8px 2px 0 !important;
        scrollbar-width: none;
    }

    #ai-image #aiImageComposerBlock .video-v2-controls-row::-webkit-scrollbar {
        display: none;
    }

    #ai-image .video-option-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    #ai-image .video-option-btn[data-ref-type="outfit"],
    #ai-image .video-option-btn[data-group="model"] {
        display: none !important;
    }

    #ai-image .video-option-btn[data-ref-type="outfit"] {
        display: inline-flex !important;
    }

    #ai-image .video-option-btn[data-ref-type="accessory"],
    #ai-image .video-option-btn[data-ref-type="free"],
    #ai-image .video-option-btn[data-group="model"] {
        display: none !important;
    }

    #ai-image .video-v2-bottom-bar {
        bottom: 54px !important;
        padding: 0 14px 18px !important;
    }

    #ai-image #aiImageComposerBlock {
        width: 100% !important;
        max-width: 100% !important;
    }

    #ai-image #aiImageMediaDrop.video-v2-chat-input-container {
        display: grid !important;
        grid-template-areas:
            "filters"
            "refs"
            "input";
        gap: 36px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        grid-area: filters;
        position: static !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    #ai-image .ai-image-select {
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 12px !important;
        border-radius: 0 !important;
        border: 3px solid #ff5361 !important;
        background: rgba(8, 12, 18, 0.82) !important;
        color: #ff5361 !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        text-align: center !important;
        text-align-last: center !important;
        appearance: none !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        grid-area: refs;
        display: grid !important;
        grid-template-columns: 106px 106px !important;
        justify-content: space-around !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #ai-image .video-option-btn[data-ref-type="character"],
    #ai-image .video-option-btn[data-ref-type="outfit"] {
        justify-content: center !important;
        align-items: center !important;
        width: 106px !important;
        min-width: 106px !important;
        height: 58px !important;
        min-height: 58px !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: 3px solid #ff5361 !important;
        background: rgba(8, 12, 18, 0.82) !important;
        color: #ff5361 !important;
        font-size: 22px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }

    #ai-image .video-option-btn[data-ref-type="character"].active,
    #ai-image .video-option-btn[data-ref-type="outfit"].active {
        background: rgba(255, 83, 97, 0.16) !important;
        color: #ff6b76 !important;
    }

    #ai-image .video-v2-input-row {
        grid-area: input;
        position: relative !important;
        display: block !important;
        width: 100% !important;
    }

    #ai-image .video-v2-chat-input-wrapper {
        width: 100% !important;
    }

    #ai-image #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:hover #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:focus-within #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock.has-text #aiImagePromptInput.video-v2-chat-input {
        width: 100% !important;
        min-height: 232px !important;
        height: 232px !important;
        max-height: 232px !important;
        padding: 14px 56px 54px 20px !important;
        border-radius: 22px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: rgba(28, 30, 35, 0.96) !important;
        color: rgba(235, 239, 245, 0.92) !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
        overflow-y: auto !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
    }

    #ai-image #aiImagePromptInput::placeholder {
        color: rgba(210, 216, 226, 0.48) !important;
    }

    #ai-image .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock:hover .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock.has-text .video-v2-chat-input-highlights {
        padding: 14px 56px 54px 20px !important;
        border-radius: 22px !important;
    }

    #ai-image .video-v2-send-btn,
    #ai-image #aiImageComposerBlock:hover .video-v2-send-btn,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-send-btn,
    #ai-image #aiImageComposerBlock.has-text .video-v2-send-btn {
        position: absolute !important;
        right: 14px !important;
        bottom: 58px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 50% !important;
        border: 0 !important;
        background: linear-gradient(135deg, #6f90ff, #4f6ce8) !important;
        color: #ffffff !important;
        box-shadow: 0 12px 26px rgba(79, 108, 232, 0.42) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    #ai-image .video-v2-input-row {
        grid-template-columns: minmax(0, 1fr) 40px !important;
        grid-template-areas:
            "prompt send";
        align-items: end !important;
    }

    #ai-image .video-v2-chat-input-wrapper {
        grid-area: prompt;
    }

    #ai-image .ai-image-dropdowns {
        position: fixed !important;
        left: 22px !important;
        right: 22px !important;
        bottom: 214px !important;
        width: auto !important;
        z-index: 130 !important;
        padding: 8px !important;
        border-radius: 16px !important;
        background: rgba(14, 18, 27, 0.92) !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34) !important;
        backdrop-filter: blur(16px);
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        margin: 0 !important;
    }

    #ai-image .video-v2-send-btn,
    #ai-image #aiImageComposerBlock:hover .video-v2-send-btn,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-send-btn,
    #ai-image #aiImageComposerBlock.has-text .video-v2-send-btn {
        grid-area: send;
        position: static !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        align-self: end;
        justify-self: end;
        font-size: 15px !important;
        border: 1px solid rgba(104, 137, 231, 0.85) !important;
        background: linear-gradient(135deg, #5f86f4, #365fd1) !important;
        box-shadow: 0 10px 22px rgba(54, 95, 209, 0.30) !important;
    }

    #ai-image #aiImageComposerBlock:hover #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:focus-within #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock.has-text #aiImagePromptInput.video-v2-chat-input {
        min-height: 52px !important;
        max-height: 160px !important;
        padding: 8px !important;
        overflow-y: auto !important;
    }

    #ai-image #aiImageComposerBlock:hover .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock.has-text .video-v2-chat-input-highlights {
        padding: 8px !important;
    }

    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        max-width: 100% !important;
        margin-top: 8px !important;
        padding: 8px 0 0 !important;
        padding-right: 0 !important;
    }

    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        position: static !important;
        grid-area: filters !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    #ai-image .video-v2-input-row {
        grid-area: input !important;
        position: relative !important;
        display: block !important;
        width: 100% !important;
    }

    #ai-image #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:hover #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:focus-within #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock.has-text #aiImagePromptInput.video-v2-chat-input {
        min-height: 232px !important;
        height: 232px !important;
        max-height: 232px !important;
        padding: 14px 56px 54px 20px !important;
        border-radius: 22px !important;
        overflow-y: auto !important;
    }

    #ai-image .video-v2-send-btn,
    #ai-image #aiImageComposerBlock:hover .video-v2-send-btn,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-send-btn,
    #ai-image #aiImageComposerBlock.has-text .video-v2-send-btn {
        position: absolute !important;
        right: 14px !important;
        bottom: 14px !important;
        grid-area: auto !important;
        border-radius: 50% !important;
        border: 0 !important;
        background: linear-gradient(135deg, #6f90ff, #4f6ce8) !important;
        box-shadow: 0 12px 26px rgba(79, 108, 232, 0.42) !important;
    }
}

/* --- 25d. 素材库 --- */
@media (max-width: 768px) {
    /* 筛选栏缩小 */
    #assetsFilterBar {
        padding: 12px 8px !important;
    }
    /* 顶部来源切换按钮 — 字体加大，与第二行有间距 */
    #assetsFilterBar > div:first-child {
        gap: 6px !important;
        margin-bottom: 16px !important;
        flex-wrap: nowrap !important;
    }
    #assetsFilterBar > div:first-child button {
        padding: 6px 8px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
    }
    #assetsFilterBar > div:first-child button i {
        font-size: 11px !important;
    }
    /* 分类筛选按钮缩小 */
    #assetsCategoryFilter {
        gap: 6px !important;
        margin-bottom: 12px !important;
    }
    #assetsCategoryFilter button {
        padding: 6px 12px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
    }
    /* 搜索行缩小 */
    #assetsProjectDropdownWrapper {
        min-width: 140px !important;
    }
    #assetsProjectDropdown {
        padding: 8px 28px 8px 10px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }
    #assetsSearchInput {
        padding: 8px 8px 8px 30px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }
    #assetsSearchInput + div,
    #assetsFilterBar button[onclick*="doAssetsSearch"],
    #assetsFilterBar button[onclick*="clearAssetsSearch"] {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    /* 网格缩小 */
    #assetsGrid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 8px !important;
        padding: 12px 8px !important;
    }
    /* 空状态/加载 */
    #assetsLoading,
    #assetsEmpty {
        padding: 24px 12px !important;
    }
    #assetsEmpty p {
        font-size: 13px !important;
    }
}

/* --- 25e. 管理后台表格 --- */
@media (max-width: 768px) {
    /* 确保表格容器可以横向滚动 */
    .admin-users-table-wrap,
    .admin-dashboard-table-wrap,
    .admin-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        -webkit-transform: translateZ(0); /* 强制 GPU 加速滚动 */
    }
}

/* ==========================================
   26. 全部模块统一缩小（保持布局，只缩尺寸）
   ========================================== */
@media (max-width: 768px) {

    /* ---- 26a. admin-dashboard & admin-users ---- */
    .admin-dashboard-hero h2,
    .admin-users-hero h2 {
        font-size: 18px !important;
    }
    .admin-dashboard-hero,
    .admin-users-hero {
        padding: 12px 10px !important;
        gap: 10px !important;
    }
    .admin-dashboard-stat strong,
    .admin-users-stat strong {
        font-size: 17px !important;
    }
    .admin-users-guard {
        padding: 12px 10px !important;
        gap: 8px !important;
    }
    .admin-dashboard-modal .modal-content,
    .admin-dashboard-modal {
        padding: 10px !important;
        max-width: 95vw !important;
    }
    .admin-dashboard-modal .modal-header,
    .admin-dashboard-modal .modal-body {
        padding: 10px 8px !important;
    }
    .admin-dashboard-modal h3 {
        font-size: 15px !important;
    }
    .admin-users-search {
        min-width: 0 !important;
        flex: 1 !important;
    }

    /* ---- 短剧/长剧 Step 2 流程头 ---- */
    .ld-stage3-hero,
    .td-stage3-hero {
        display: none !important;
    }

    /* ---- 26b. ecommerce-studio（批量生图）---- */
    .est-bottom-row-large {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .est-variables-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .est-header {
        margin-bottom: 12px !important;
        padding: 10px 8px !important;
        border-radius: 8px !important;
    }
    .est-header .est-title {
        font-size: 16px !important;
    }
    .est-header p {
        font-size: 12px !important;
    }
    .est-step1-layout {
        gap: 10px !important;
    }
    .est-step1-layout .est-left-panel,
    .est-step1-layout .est-right-panel {
        gap: 10px !important;
    }
    .est-generate-section {
        padding: 12px 8px !important;
    }
    .est-generate-btn {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }
    .est-results-grid {
        gap: 6px !important;
    }
    .est-steps-tabs {
        gap: 4px !important;
    }
    .est-step-tab {
        padding: 8px 10px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }
    .est-prompt-section,
    .est-script-section,
    .est-preview-section {
        padding: 10px 8px !important;
    }
    .est-seg-body {
        gap: 10px !important;
    }

    /* ---- 26c. film_production ---- */
    .fp-hero {
        padding: 14px 12px !important;
        gap: 10px !important;
    }
    .fp-card {
        padding: 12px 10px !important;
    }
    .fp-novel-input {
        min-height: 140px !important;
    }
    .fp-asset-stats strong {
        font-size: 15px !important;
    }
    .fp-preview-zone {
        min-height: 150px !important;
    }
    .fp-status-banner {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    /* ---- 26d. IP库 ---- */
    .ip-stat-card {
        padding: 12px 10px !important;
    }
    .ip-stat-number {
        font-size: 20px !important;
    }
    .ip-dist-card {
        padding: 10px 8px !important;
    }
    .ip-filter-bar {
        padding: 8px 10px !important;
        gap: 6px;
    }
    .ip-filter-bar input,
    .ip-filter-bar select {
        min-width: 0 !important;
    }
    .ip-loading,
    .ip-empty {
        padding: 20px 10px !important;
    }
    .ip-library-grid {
        gap: 8px !important;
    }

    /* ---- 26e. 兑换码 ---- */
    .redeem-stat-card {
        padding: 12px 10px !important;
    }
    .redeem-panel {
        padding: 12px 10px !important;
    }
    .redeem-result-panel {
        padding: 12px 10px !important;
    }

    /* ---- 26f. 音频 ---- */
    .audio-container {
        padding: 12px 10px !important;
    }
    .audio-container h1 {
        font-size: 18px !important;
    }
    .audio-container h2 {
        font-size: 15px !important;
    }
    .audio-input-section {
        padding: 12px 10px !important;
    }
    .audio-generate-btn {
        padding: 8px 18px !important;
        font-size: 13px !important;
    }
    .audio-history-section {
        padding: 12px 10px !important;
    }

    /* ---- 26g. 支付返回页 ---- */
    .payment-return-card {
        padding: 14px 10px !important;
    }
    .payment-return-card h3 {
        font-size: 15px !important;
    }

    /* ---- 26h. root_key ---- */
    .root-key-hero {
        padding: 12px 10px !important;
        border-radius: 10px !important;
    }
    .root-key-guard {
        padding: 12px 10px !important;
    }
    .root-key-large-textarea {
        min-height: 140px !important;
    }
    .root-key-model-list {
        max-height: calc(100vh - 180px) !important;
    }

    /* ---- 26i. test 测试页 ---- */
    .test-panel-body {
        gap: 10px !important;
    }
    .test-result-text {
        min-height: 150px !important;
        max-height: 280px !important;
    }

    /* ---- 26j. keai-image-test ---- */
    .kit-guard {
        min-height: 160px !important;
    }
    .kit-composer-block {
        border-radius: 14px !important;
    }
    .kit-model-select {
        min-width: 0 !important;
    }

    /* ---- 26k. 通用：所有模态框 ---- */
    .modal-content {
        width: 94vw !important;
        max-width: none !important;
        margin: 8px auto !important;
        border-radius: 12px !important;
    }
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 10px 8px !important;
    }
    .modal-header h3 {
        font-size: 15px !important;
    }

    /* ---- 26l. 通用：大按钮缩小 ---- */
    .btn-lg,
    .full-width.btn {
        padding: 10px 14px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }
}

/* 480px 极窄屏进一步缩小 */
@media (max-width: 480px) {
    .admin-dashboard-stat strong,
    .admin-users-stat strong,
    .ip-stat-number {
        font-size: 16px !important;
    }
    .est-header .est-title,
    .audio-container h1 {
        font-size: 16px !important;
    }
    .replica-container {
        gap: 8px !important;
    }
    .replica-box {
        padding: 10px 6px !important;
    }
}

@media (max-width: 768px) {
    #userProfileMenu.header-user-profile {
        width: 78px !important;
        min-width: 78px !important;
        max-width: 78px !important;
        flex: 0 0 78px !important;
        box-sizing: border-box !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        background: rgba(37, 99, 235, 0.92) !important;
        border: 1px solid rgba(147, 197, 253, 0.4) !important;
        box-shadow: 0 10px 24px rgba(37, 99, 235, 0.26) !important;
        cursor: pointer;
    }

    #userProfileMenu .avatar {
        display: none !important;
    }

    #userProfileMenu .user-info,
    body.mobile-home-feed-active #userProfileMenu .user-info {
        display: flex !important;
    }

    #userProfileMenu .user-entry-row {
        display: flex !important;
        align-items: center !important;
    }

    #userProfileMenu #userDisplayName {
        display: none !important;
    }

    #userProfileMenu .mobile-profile-label {
        display: inline-block !important;
        color: #ffffff;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    #userProfileMenu #userLogoutBtn {
        display: none !important;
    }

    #mobileRechargeBtn.mobile-recharge-btn,
    body.mobile-home-feed-active #mobileRechargeBtn {
        width: 78px !important;
        min-width: 78px !important;
        max-width: 78px !important;
        flex: 0 0 78px !important;
        box-sizing: border-box !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 0 !important;
        border-radius: 999px !important;
        background: #d97706 !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        box-shadow: 0 10px 24px rgba(217, 119, 6, 0.26) !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    #mobileRechargeBtn i {
        font-size: 13px !important;
    }

    body.mobile-home-feed-active #userProfileMenu {
        top: max(12px, env(safe-area-inset-top)) !important;
        right: 12px !important;
        background: rgba(37, 99, 235, 0.92) !important;
        border: 1px solid rgba(147, 197, 253, 0.4) !important;
    }

    body.mobile-home-feed-active #mobileRechargeBtn {
        top: max(12px, env(safe-area-inset-top)) !important;
        right: 98px !important;
    }

    .mobile-user-center-balance button {
        min-width: 82px;
    }

    .mobile-user-center-section-title button {
        min-width: 118px;
    }
}

/* Short drama mobile fit */
@media (max-width: 768px) {
    #testdrama.section {
        overflow-x: hidden !important;
        padding: 10px 8px calc(62px + env(safe-area-inset-bottom, 0px)) !important;
        background: #0b0d12 !important;
    }

    #testdrama .content-wrapper,
    #testdrama .td-page-shell {
        min-height: 0 !important;
        padding-bottom: 0 !important;
        background: #0b0d12 !important;
    }

    #testdrama .content-wrapper,
    #testdrama .td-page-shell,
    #testdrama .td-wizard-card,
    #testdrama .td-stage,
    #testdrama .td-detail-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #testdrama .td-wizard-card {
        min-height: 0 !important;
        padding: 14px 10px 18px !important;
        border-radius: 16px !important;
        background: linear-gradient(180deg, rgba(20,20,22,0.96), rgba(15,15,18,0.98)) !important;
        position: relative;
        overflow: visible;
    }

    #testdrama .td-wizard-card::after {
        content: "";
        position: absolute;
        left: -1px;
        right: -1px;
        top: calc(100% - 1px);
        height: calc(62px + env(safe-area-inset-bottom, 0px));
        background: rgba(15,15,18,0.98);
        border-left: 1px solid var(--border-base);
        border-right: 1px solid var(--border-base);
        pointer-events: none;
    }

    #testdrama .td-stage.active {
        min-height: 0 !important;
    }

    #testdrama .td-upload-tabs-wrap,
    #testdrama .td-upload-tab-bar {
        position: relative !important;
        z-index: 60 !important;
    }

    #testdrama .td-upload-tab {
        pointer-events: auto !important;
        touch-action: manipulation;
        min-height: 64px !important;
    }

    #testdrama #tdBatchResultBox {
        max-height: 46vh !important;
        overflow: hidden !important;
    }

    #testdrama #tdBatchResultContent {
        max-height: 34vh !important;
        overflow-y: auto !important;
    }

    #testdrama #tdBatchResultContent:empty {
        display: none !important;
    }

    #testdrama .td-batch-footer-bar {
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 10px !important;
        margin-top: 10px !important;
    }

    #testdrama .td-stage3-hero,
    #testdrama .td-step2-command {
        display: none !important;
    }

    #testdrama .td-detail-switcher {
        display: grid !important;
        grid-auto-flow: row !important;
        grid-auto-columns: unset !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        overflow: visible !important;
        margin: 0 0 18px !important;
        padding: 0 !important;
        scroll-snap-type: none;
    }

    #testdrama .td-detail-tab {
        min-width: 0 !important;
        min-height: 78px !important;
        scroll-snap-align: none;
        padding: 9px 8px 10px !important;
        border-radius: 12px !important;
        gap: 6px !important;
    }

    #testdrama .td-detail-tab-step {
        min-width: 42px !important;
        height: 18px !important;
        padding: 0 6px !important;
        font-size: 10px !important;
    }

    #testdrama .td-detail-tab-main {
        width: 100% !important;
        gap: 4px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        text-align: center !important;
        overflow-wrap: anywhere;
    }

    #testdrama .td-detail-tab-main i {
        flex: 0 0 auto;
        font-size: 12px !important;
    }

    #testdrama .td-detail-tab-sub {
        width: 100% !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #testdrama .td-step2-section-head {
        margin-bottom: 12px !important;
    }

    #testdrama .td-step2-section-head h4 {
        font-size: 20px !important;
        line-height: 1.25 !important;
    }

    #testdrama .td-storyboard-list {
        display: grid !important;
        gap: 12px !important;
        padding-bottom: 24px !important;
    }

    #testdrama .td-storyboard-card {
        width: 100% !important;
        min-height: 0 !important;
        padding: 12px 10px 12px 14px !important;
        border-radius: 12px !important;
        background: rgba(15, 23, 42, 0.78) !important;
        background-size: auto !important;
        box-shadow: 0 10px 22px rgba(2, 6, 23, 0.22) !important;
    }

    #testdrama .td-storyboard-card::before {
        width: 3px !important;
    }

    #testdrama .td-storyboard-head {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    #testdrama .td-storyboard-title-block {
        flex-basis: auto !important;
        width: 100% !important;
    }

    #testdrama .td-storyboard-title {
        font-size: 15px !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere;
    }

    #testdrama .td-storyboard-head-right {
        width: 100% !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 6px !important;
    }

    #testdrama .td-tag-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        min-width: 0 !important;
    }

    #testdrama .td-tag {
        max-width: 100% !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        padding: 4px 7px !important;
        overflow-wrap: anywhere;
    }

    #testdrama .td-storyboard-state {
        min-height: 26px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    #testdrama .td-storyboard-text {
        display: block !important;
        max-height: 120px !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 8px 9px !important;
        margin-bottom: 8px !important;
        line-height: 1.55 !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        background: rgba(2, 6, 23, 0.34) !important;
    }

    #testdrama .td-storyboard-text.is-expanded {
        max-height: 52vh !important;
        overflow-y: auto !important;
    }

    #testdrama .td-storyboard-text:empty {
        display: none !important;
    }

    #testdrama .td-storyboard-editor {
        min-height: 120px !important;
        max-height: 44vh !important;
        font-size: 13px !important;
    }

    #testdrama .td-card-actions,
    #testdrama .td-card-actions--inline,
    #testdrama .td-card-actions--asset-row,
    #testdrama .td-card-asset-bar {
        gap: 6px !important;
    }

    #testdrama .td-card-btn {
        min-height: 34px !important;
        padding: 7px 9px !important;
        font-size: 12px !important;
    }

    #testdrama .td-mapping-grid,
    #testdrama #tdMappingGrid.is-single-detail .td-mapping-column.is-single-detail .td-mapping-card-list {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 390px) {
    #testdrama .td-detail-switcher {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #testdrama .td-detail-tab {
        min-height: 72px !important;
        padding: 8px 6px 9px !important;
    }

    #testdrama .td-detail-tab-main {
        font-size: 11px !important;
    }

    .mobile-tab {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        padding-inline: 2px !important;
    }

    .mobile-tab span {
        font-size: 10px !important;
    }

    #ai-image .ai-image-dropdowns {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        bottom: 222px !important;
    }
}

@media (max-width: 768px) {
    .ai-image-mobile-select-overlay {
        position: fixed;
        inset: 0;
        z-index: 240;
    }

    .ai-image-mobile-select-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.46);
        backdrop-filter: blur(2px);
    }

    .ai-image-mobile-select-sheet {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: calc(76px + env(safe-area-inset-bottom));
        max-height: min(58vh, 430px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: 18px;
        background: #111827;
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
    }

    .ai-image-mobile-select-head {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        color: #f8fafc;
        font-size: 14px;
        font-weight: 800;
    }

    .ai-image-mobile-select-head button {
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        color: #e5e7eb;
        font-size: 20px;
        line-height: 1;
    }

    .ai-image-mobile-select-options {
        overflow-y: auto;
        padding: 8px;
    }

    .ai-image-mobile-select-option {
        width: 100%;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 10px 12px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: rgba(226, 232, 240, 0.92);
        font-size: 14px;
        font-weight: 700;
        text-align: left;
    }

    .ai-image-mobile-select-option.active {
        background: rgba(96, 165, 250, 0.18);
        color: #bfdbfe;
    }
}

@media (max-width: 768px) {
    #ai-image .video-v2-bottom-bar {
        left: 0 !important;
        right: 0 !important;
        bottom: calc(62px + env(safe-area-inset-bottom)) !important;
        padding: 0 20px 16px !important;
        z-index: 115 !important;
    }

    #ai-image #aiImageComposerBlock,
    #ai-image #aiImageMediaDrop.video-v2-chat-input-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    #ai-image #aiImageMediaDrop.video-v2-chat-input-container {
        display: grid !important;
        grid-template-areas:
            "filters"
            "refs"
            "input";
        gap: 18px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        grid-area: filters !important;
        position: static !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 92% !important;
        justify-self: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    #ai-image .ai-image-select {
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 28px 0 10px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 86, 104, 0.72) !important;
        background:
            linear-gradient(180deg, rgba(255, 86, 104, 0.10), rgba(255, 86, 104, 0.03)),
            rgba(12, 17, 25, 0.92) !important;
        color: #ff6476 !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        text-align: center !important;
        text-align-last: center !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 18px rgba(0, 0, 0, 0.16) !important;
        background-position: right 12px center !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        grid-area: refs !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 92% !important;
        max-width: 92% !important;
        justify-self: center !important;
        margin: 0 0 18px !important;
        padding: 0 !important;
        border: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        overflow: visible !important;
        max-height: none !important;
    }

    #ai-image .video-option-btn[data-ref-type="accessory"],
    #ai-image .video-option-btn[data-ref-type="free"],
    #ai-image .video-option-btn[data-group="model"] {
        display: none !important;
    }

    #ai-image .video-option-btn[data-ref-type="character"],
    #ai-image .video-option-btn[data-ref-type="outfit"] {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
        min-height: 46px !important;
        padding: 0 12px !important;
        border-radius: 13px !important;
        border: 1px solid rgba(255, 86, 104, 0.78) !important;
        background:
            linear-gradient(180deg, rgba(255, 86, 104, 0.12), rgba(255, 86, 104, 0.04)),
            rgba(10, 15, 23, 0.92) !important;
        color: #ff6476 !important;
        font-size: 17px !important;
        font-weight: 850 !important;
        letter-spacing: 0 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 9px 20px rgba(0, 0, 0, 0.18) !important;
        white-space: nowrap !important;
    }

    #ai-image .video-option-btn[data-ref-type="character"].active,
    #ai-image .video-option-btn[data-ref-type="outfit"].active {
        background:
            linear-gradient(180deg, rgba(255, 86, 104, 0.22), rgba(255, 86, 104, 0.08)),
            rgba(16, 20, 29, 0.96) !important;
        border-color: rgba(255, 112, 127, 0.94) !important;
        color: #ff7b88 !important;
    }

    #ai-image .video-v2-input-row {
        grid-area: input !important;
        position: relative !important;
        display: block !important;
        width: 100% !important;
    }

    #ai-image .video-v2-chat-input-wrapper {
        width: 100% !important;
        min-width: 0 !important;
    }

    #ai-image #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:hover #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:focus-within #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock.has-text #aiImagePromptInput.video-v2-chat-input {
        width: 100% !important;
        min-height: 230px !important;
        height: 230px !important;
        max-height: 230px !important;
        padding: 18px 58px 54px 18px !important;
        border-radius: 22px !important;
        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
            rgba(25, 28, 34, 0.96) !important;
        color: rgba(238, 242, 248, 0.94) !important;
        font-size: 15px !important;
        line-height: 1.48 !important;
        overflow-y: auto !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 42px rgba(0, 0, 0, 0.26) !important;
    }

    #ai-image #aiImagePromptInput::placeholder {
        color: rgba(218, 224, 234, 0.46) !important;
    }

    #ai-image .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock:hover .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock.has-text .video-v2-chat-input-highlights {
        padding: 18px 58px 54px 18px !important;
        border-radius: 22px !important;
    }

    #ai-image .video-v2-send-btn,
    #ai-image #aiImageComposerBlock:hover .video-v2-send-btn,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-send-btn,
    #ai-image #aiImageComposerBlock.has-text .video-v2-send-btn {
        position: absolute !important;
        right: 14px !important;
        bottom: 14px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 50% !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        background: linear-gradient(135deg, #7998ff, #526bea) !important;
        color: #fff !important;
        box-shadow: 0 14px 28px rgba(82, 107, 234, 0.42) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        z-index: 3 !important;
    }
}

@media (max-width: 390px) {
    #ai-image .ai-image-dropdowns {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #ai-image .ai-image-select {
        font-size: 14px !important;
        padding-left: 8px !important;
        padding-right: 24px !important;
    }
}

@media (max-width: 768px) {
    #ai-image #aiImageTopUsageNote {
        display: none !important;
    }

    #ai-image #aiImageMediaDrop.video-v2-chat-input-container {
        grid-template-areas: "input" !important;
        gap: 0 !important;
    }

    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        position: fixed !important;
        left: 9% !important;
        right: 9% !important;
        top: 112px !important;
        width: auto !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        z-index: 126 !important;
        pointer-events: auto !important;
    }

    #ai-image .ai-image-select {
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 22px 0 8px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 7px 14px rgba(0, 0, 0, 0.14) !important;
        background-position: right 9px center !important;
        background-size: 8px 5px !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        position: fixed !important;
        left: 15% !important;
        right: 15% !important;
        top: 152px !important;
        width: auto !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 !important;
        z-index: 126 !important;
        pointer-events: auto !important;
    }

    #ai-image .video-option-btn[data-ref-type="character"],
    #ai-image .video-option-btn[data-ref-type="outfit"] {
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 11px !important;
        font-size: 15px !important;
        padding: 0 10px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 7px 16px rgba(0, 0, 0, 0.16) !important;
    }
}

@media (max-width: 390px) {
    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        left: 7% !important;
        right: 7% !important;
        top: 108px !important;
        gap: 6px !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        left: 13% !important;
        right: 13% !important;
        top: 146px !important;
    }
}

@media (max-width: 768px) {
    #ai-image.section {
        background:
            radial-gradient(circle at 18% 10%, rgba(34, 211, 238, 0.12), transparent 32%),
            radial-gradient(circle at 86% 18%, rgba(99, 102, 241, 0.14), transparent 34%),
            linear-gradient(180deg, #070b12 0%, #080d14 48%, #05080d 100%) !important;
    }

    #ai-image .video-v2-main {
        background: transparent !important;
    }

    #ai-image #aiImageTopUsageNote {
        display: none !important;
    }

    #ai-image #aiImageMediaDrop.video-v2-chat-input-container {
        grid-template-areas: "input" !important;
        gap: 0 !important;
    }

    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        position: fixed !important;
        left: 8% !important;
        right: 8% !important;
        top: 112px !important;
        width: auto !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        z-index: 126 !important;
        padding: 8px !important;
        border-radius: 18px 18px 8px 8px !important;
        border: 1px solid rgba(125, 211, 252, 0.18) !important;
        border-bottom-color: rgba(255, 255, 255, 0.08) !important;
        background:
            linear-gradient(180deg, rgba(19, 31, 48, 0.92), rgba(10, 16, 26, 0.88)),
            rgba(8, 13, 21, 0.92) !important;
        box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
        backdrop-filter: blur(16px) !important;
        pointer-events: auto !important;
    }

    #ai-image .ai-image-select {
        height: 34px !important;
        min-height: 34px !important;
        min-width: 0 !important;
        padding: 0 22px 0 10px !important;
        border-radius: 11px !important;
        border: 1px solid rgba(148, 163, 184, 0.16) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
            rgba(15, 23, 42, 0.88) !important;
        color: #e7f5ff !important;
        font-size: 12px !important;
        font-weight: 750 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        text-align-last: center !important;
        box-shadow: none !important;
        background-position: right 9px center !important;
        background-size: 8px 5px !important;
    }

    #ai-image .ai-image-select:focus {
        border-color: rgba(96, 165, 250, 0.70) !important;
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.18) !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        position: fixed !important;
        left: 8% !important;
        right: 8% !important;
        top: 166px !important;
        width: auto !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 8px 8px !important;
        z-index: 126 !important;
        border-radius: 8px 8px 18px 18px !important;
        border: 1px solid rgba(125, 211, 252, 0.18) !important;
        border-top: 0 !important;
        background:
            linear-gradient(180deg, rgba(10, 16, 26, 0.90), rgba(8, 13, 21, 0.92)),
            rgba(8, 13, 21, 0.92) !important;
        box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34) !important;
        backdrop-filter: blur(16px) !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        overflow: visible !important;
        max-height: none !important;
    }

    #ai-image .video-option-btn[data-ref-type="accessory"],
    #ai-image .video-option-btn[data-ref-type="free"],
    #ai-image .video-option-btn[data-group="model"] {
        display: none !important;
    }

    #ai-image .video-option-btn[data-ref-type="character"],
    #ai-image .video-option-btn[data-ref-type="outfit"] {
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 10px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(96, 165, 250, 0.24) !important;
        background:
            linear-gradient(180deg, rgba(96, 165, 250, 0.13), rgba(96, 165, 250, 0.05)),
            rgba(15, 23, 42, 0.82) !important;
        color: #bfdbfe !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        box-shadow: none !important;
        white-space: nowrap !important;
    }

    #ai-image .video-option-btn[data-ref-type="character"].active,
    #ai-image .video-option-btn[data-ref-type="outfit"].active {
        background: linear-gradient(135deg, #38bdf8, #6366f1) !important;
        border-color: rgba(191, 219, 254, 0.55) !important;
        color: #ffffff !important;
        box-shadow: 0 10px 22px rgba(56, 189, 248, 0.24) !important;
    }

    #ai-image .video-v2-bottom-bar {
        bottom: calc(62px + env(safe-area-inset-bottom)) !important;
        padding: 0 24px 18px !important;
    }

    #ai-image #aiImageComposerBlock,
    #ai-image #aiImageMediaDrop.video-v2-chat-input-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    #ai-image .video-v2-input-row {
        grid-area: input !important;
        position: relative !important;
        display: block !important;
        width: 100% !important;
    }

    #ai-image .video-v2-chat-input-wrapper {
        width: 100% !important;
        min-width: 0 !important;
    }

    #ai-image #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:hover #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:focus-within #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock.has-text #aiImagePromptInput.video-v2-chat-input {
        width: 100% !important;
        min-height: 198px !important;
        height: 198px !important;
        max-height: 198px !important;
        padding: 18px 58px 52px 18px !important;
        border-radius: 20px !important;
        border: 1px solid rgba(125, 211, 252, 0.16) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
            rgba(15, 23, 42, 0.94) !important;
        color: rgba(241, 245, 249, 0.95) !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
        overflow-y: auto !important;
        box-shadow:
            0 18px 42px rgba(0, 0, 0, 0.32),
            0 0 0 1px rgba(255, 255, 255, 0.035) inset,
            0 -24px 54px rgba(56, 189, 248, 0.06) inset !important;
    }

    #ai-image #aiImagePromptInput::placeholder {
        color: rgba(203, 213, 225, 0.56) !important;
    }

    #ai-image .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock:hover .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock.has-text .video-v2-chat-input-highlights {
        padding: 18px 58px 52px 18px !important;
        border-radius: 20px !important;
    }

    #ai-image .video-v2-send-btn,
    #ai-image #aiImageComposerBlock:hover .video-v2-send-btn,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-send-btn,
    #ai-image #aiImageComposerBlock.has-text .video-v2-send-btn {
        position: absolute !important;
        right: 14px !important;
        bottom: 14px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 50% !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        background: linear-gradient(135deg, #22d3ee, #2563eb) !important;
        color: #fff !important;
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.36), 0 0 24px rgba(34, 211, 238, 0.18) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        z-index: 3 !important;
    }
}

@media (max-width: 390px) {
    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        left: 6% !important;
        right: 6% !important;
        top: 108px !important;
        padding: 7px !important;
        gap: 5px !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        left: 6% !important;
        right: 6% !important;
        top: 160px !important;
        padding: 0 7px 7px !important;
    }

    #ai-image .ai-image-select {
        height: 33px !important;
        min-height: 33px !important;
        padding-left: 8px !important;
        padding-right: 20px !important;
        font-size: 12px !important;
    }

    #ai-image .video-option-btn[data-ref-type="character"],
    #ai-image .video-option-btn[data-ref-type="outfit"] {
        height: 35px !important;
        min-height: 35px !important;
        font-size: 14px !important;
    }

    #ai-image .video-v2-bottom-bar {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #ai-image #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:hover #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:focus-within #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock.has-text #aiImagePromptInput.video-v2-chat-input {
        min-height: 188px !important;
        height: 188px !important;
        max-height: 188px !important;
    }
}

@media (max-width: 768px) {
    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        left: 50% !important;
        right: auto !important;
        width: min(86vw, 360px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 56px !important;
        transform: translateX(-50%) !important;
        align-items: center !important;
        align-content: center !important;
        overflow: visible !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        left: 50% !important;
        right: auto !important;
        width: min(34vw, 132px) !important;
        max-width: 132px !important;
        height: auto !important;
        min-height: 0 !important;
        transform: translateX(-50%) !important;
        align-items: center !important;
        align-content: center !important;
    }
}

@media (max-width: 390px) {
    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        width: min(88vw, 344px) !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        width: 122px !important;
        max-width: 122px !important;
    }
}

@media (max-width: 768px) {
    #ai-image.section {
        background:
            radial-gradient(circle at 12% 0%, rgba(20, 184, 166, 0.16), transparent 30%),
            radial-gradient(circle at 92% 12%, rgba(59, 130, 246, 0.16), transparent 34%),
            linear-gradient(180deg, #071016 0%, #070b12 46%, #05070b 100%) !important;
    }

    #ai-image .video-v2-main {
        padding-bottom: 300px !important;
        overflow-y: auto !important;
    }

    #ai-image .video-v2-bottom-bar {
        left: 0 !important;
        right: 0 !important;
        bottom: calc(58px + env(safe-area-inset-bottom)) !important;
        width: 100% !important;
        padding: 0 14px 14px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-end !important;
        background: linear-gradient(180deg, transparent, rgba(5, 7, 11, 0.78) 28%, rgba(5, 7, 11, 0.96)) !important;
        z-index: 124 !important;
    }

    #ai-image #aiImageComposerBlock {
        width: min(100%, 430px) !important;
        max-width: 430px !important;
        margin: 0 auto !important;
    }

    #ai-image #aiImageMediaDrop.video-v2-chat-input-container {
        display: grid !important;
        grid-template-areas:
            "filters"
            "refs"
            "input" !important;
        gap: 9px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        border: 1px solid rgba(148, 163, 184, 0.14) !important;
        border-radius: 22px !important;
        background:
            linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(10, 15, 24, 0.98)),
            #0a0f18 !important;
        box-shadow:
            0 -18px 48px rgba(0, 0, 0, 0.34),
            0 18px 42px rgba(0, 0, 0, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
        overflow: visible !important;
        backdrop-filter: blur(18px) !important;
    }

    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        grid-area: filters !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        transform: none !important;
        overflow: visible !important;
        z-index: auto !important;
    }

    #ai-image .ai-image-select {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 22px 0 10px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(148, 163, 184, 0.18) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
            rgba(2, 6, 23, 0.42) !important;
        color: #e2e8f0 !important;
        font-size: 12px !important;
        font-weight: 760 !important;
        text-align: center !important;
        text-align-last: center !important;
        box-shadow: none !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        grid-area: refs !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        padding: 3px !important;
        margin: 0 !important;
        border: 1px solid rgba(148, 163, 184, 0.12) !important;
        border-radius: 14px !important;
        background: rgba(2, 6, 23, 0.34) !important;
        box-shadow: none !important;
        transform: none !important;
        backdrop-filter: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: auto !important;
    }

    #ai-image .video-option-btn[data-ref-type="character"],
    #ai-image .video-option-btn[data-ref-type="outfit"] {
        height: 35px !important;
        min-height: 35px !important;
        border-radius: 11px !important;
        border: 0 !important;
        background: transparent !important;
        color: rgba(226, 232, 240, 0.76) !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    #ai-image .video-option-btn[data-ref-type="character"].active,
    #ai-image .video-option-btn[data-ref-type="outfit"].active {
        background: linear-gradient(135deg, rgba(45, 212, 191, 0.95), rgba(37, 99, 235, 0.95)) !important;
        color: #ffffff !important;
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28) !important;
    }

    #ai-image .video-v2-input-row {
        grid-area: input !important;
        position: relative !important;
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }

    #ai-image #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:hover #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:focus-within #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock.has-text #aiImagePromptInput.video-v2-chat-input {
        min-height: 148px !important;
        height: 148px !important;
        max-height: 148px !important;
        padding: 14px 54px 48px 14px !important;
        border-radius: 17px !important;
        border: 1px solid rgba(148, 163, 184, 0.14) !important;
        background: rgba(2, 6, 23, 0.34) !important;
        color: rgba(248, 250, 252, 0.94) !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
    }

    #ai-image .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock:hover .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock.has-text .video-v2-chat-input-highlights {
        padding: 14px 54px 48px 14px !important;
        border-radius: 17px !important;
    }

    #ai-image #aiImagePromptInput::placeholder {
        color: rgba(203, 213, 225, 0.50) !important;
    }

    #ai-image .video-v2-send-btn,
    #ai-image #aiImageComposerBlock:hover .video-v2-send-btn,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-send-btn,
    #ai-image #aiImageComposerBlock.has-text .video-v2-send-btn {
        right: 12px !important;
        bottom: 12px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        background: linear-gradient(135deg, #2dd4bf, #2563eb) !important;
        box-shadow: 0 12px 24px rgba(37, 99, 235, 0.32) !important;
    }
}

@media (max-width: 390px) {
    #ai-image .video-v2-bottom-bar {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #ai-image #aiImageMediaDrop.video-v2-chat-input-container {
        padding: 10px !important;
        border-radius: 20px !important;
    }

    #ai-image #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:hover #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:focus-within #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock.has-text #aiImagePromptInput.video-v2-chat-input {
        min-height: 140px !important;
        height: 140px !important;
        max-height: 140px !important;
    }
}

@media (max-width: 768px) {
    #ai-image.section {
        background:
            radial-gradient(circle at 18% 6%, rgba(34, 211, 238, 0.12), transparent 30%),
            radial-gradient(circle at 84% 12%, rgba(37, 99, 235, 0.14), transparent 32%),
            linear-gradient(180deg, #071016 0%, #070b12 48%, #05070b 100%) !important;
    }

    #ai-image .video-v2-main {
        padding-bottom: 235px !important;
        overflow-y: auto !important;
    }

    #ai-image .video-v2-bottom-bar {
        left: 0 !important;
        right: 0 !important;
        bottom: calc(60px + env(safe-area-inset-bottom)) !important;
        width: 100% !important;
        padding: 0 20px 16px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-end !important;
        background: linear-gradient(180deg, transparent, rgba(5, 7, 11, 0.68) 42%, rgba(5, 7, 11, 0.96)) !important;
        z-index: 116 !important;
    }

    #ai-image #aiImageComposerBlock {
        width: min(100%, 430px) !important;
        max-width: 430px !important;
        margin: 0 auto !important;
    }

    #ai-image #aiImageMediaDrop.video-v2-chat-input-container {
        display: grid !important;
        grid-template-areas: "input" !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        backdrop-filter: none !important;
    }

    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: 112px !important;
        width: min(86vw, 360px) !important;
        max-width: 360px !important;
        height: auto !important;
        max-height: 54px !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        padding: 8px 8px 5px !important;
        margin: 0 !important;
        border: 1px solid rgba(148, 163, 184, 0.16) !important;
        border-bottom: 0 !important;
        border-radius: 18px 18px 10px 10px !important;
        background:
            linear-gradient(180deg, rgba(17, 24, 39, 0.94), rgba(10, 15, 24, 0.92)),
            rgba(10, 15, 24, 0.92) !important;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
        backdrop-filter: blur(18px) !important;
        transform: translateX(-50%) !important;
        overflow: visible !important;
        z-index: 128 !important;
        pointer-events: auto !important;
    }

    #ai-image .ai-image-select {
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 22px 0 9px !important;
        border-radius: 11px !important;
        border: 1px solid rgba(148, 163, 184, 0.16) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
            rgba(2, 6, 23, 0.36) !important;
        color: #e5eefb !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        text-align: center !important;
        text-align-last: center !important;
        box-shadow: none !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: 159px !important;
        width: min(46vw, 184px) !important;
        max-width: 184px !important;
        height: auto !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 5px 8px 8px !important;
        margin: 0 !important;
        border: 1px solid rgba(148, 163, 184, 0.16) !important;
        border-top: 0 !important;
        border-radius: 10px 10px 18px 18px !important;
        background:
            linear-gradient(180deg, rgba(10, 15, 24, 0.91), rgba(8, 13, 21, 0.94)),
            rgba(8, 13, 21, 0.94) !important;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26) !important;
        transform: translateX(-50%) !important;
        backdrop-filter: blur(18px) !important;
        overflow: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 128 !important;
    }

    #ai-image .video-option-btn[data-ref-type="accessory"],
    #ai-image .video-option-btn[data-ref-type="free"],
    #ai-image .video-option-btn[data-group="model"] {
        display: none !important;
    }

    #ai-image .video-option-btn[data-ref-type="character"],
    #ai-image .video-option-btn[data-ref-type="outfit"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 35px !important;
        min-height: 35px !important;
        padding: 0 8px !important;
        border-radius: 11px !important;
        border: 1px solid rgba(96, 165, 250, 0.22) !important;
        background: rgba(15, 23, 42, 0.58) !important;
        color: #bfdbfe !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        box-shadow: none !important;
    }

    #ai-image .video-option-btn[data-ref-type="character"].active,
    #ai-image .video-option-btn[data-ref-type="outfit"].active {
        background: linear-gradient(135deg, #2dd4bf, #2563eb) !important;
        border-color: rgba(191, 219, 254, 0.46) !important;
        color: #ffffff !important;
        box-shadow: 0 10px 22px rgba(37, 99, 235, 0.30) !important;
    }

    #ai-image .video-v2-input-row {
        grid-area: input !important;
        position: relative !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    #ai-image #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:hover #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:focus-within #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock.has-text #aiImagePromptInput.video-v2-chat-input {
        min-height: 178px !important;
        height: 178px !important;
        max-height: 178px !important;
        padding: 17px 58px 52px 17px !important;
        border-radius: 21px !important;
        border: 1px solid rgba(148, 163, 184, 0.16) !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
            rgba(15, 23, 42, 0.92) !important;
        color: rgba(248, 250, 252, 0.94) !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    }

    #ai-image .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock:hover .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock.has-text .video-v2-chat-input-highlights {
        padding: 17px 58px 52px 17px !important;
        border-radius: 21px !important;
    }

    #ai-image .video-v2-send-btn,
    #ai-image #aiImageComposerBlock:hover .video-v2-send-btn,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-send-btn,
    #ai-image #aiImageComposerBlock.has-text .video-v2-send-btn {
        right: 14px !important;
        bottom: 14px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        background: linear-gradient(135deg, #2dd4bf, #2563eb) !important;
        box-shadow: 0 14px 28px rgba(37, 99, 235, 0.34) !important;
    }
}

@media (max-width: 390px) {
    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        top: 112px !important;
        width: min(86vw, 340px) !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        top: 159px !important;
        width: min(48vw, 176px) !important;
    }

    #ai-image .video-v2-bottom-bar {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    #ai-image #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:hover #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:focus-within #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock.has-text #aiImagePromptInput.video-v2-chat-input {
        min-height: 170px !important;
        height: 170px !important;
        max-height: 170px !important;
    }
}

@media (max-width: 768px) {
    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        top: 64px !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        top: 111px !important;
    }
}

@media (max-width: 390px) {
    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        top: 62px !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        top: 109px !important;
    }
}

@media (max-width: 768px) {
    #ai-image .video-v2-bottom-bar {
        bottom: calc(62px + env(safe-area-inset-bottom)) !important;
        padding: 0 28px 12px !important;
    }

    #ai-image #aiImageComposerBlock {
        width: min(100%, 390px) !important;
        max-width: 390px !important;
    }

    #ai-image #aiImageMediaDrop.video-v2-chat-input-container {
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #ai-image #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:hover #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:focus-within #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock.has-text #aiImagePromptInput.video-v2-chat-input {
        min-height: 96px !important;
        height: 96px !important;
        max-height: 96px !important;
        padding: 14px 52px 40px 16px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(118, 143, 188, 0.24) !important;
        background: rgba(20, 30, 49, 0.88) !important;
        color: rgba(236, 242, 255, 0.94) !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 12px 28px rgba(0, 0, 0, 0.24) !important;
    }

    #ai-image .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock:hover .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock.has-text .video-v2-chat-input-highlights {
        padding: 14px 52px 40px 16px !important;
        border-radius: 18px !important;
    }

    #ai-image #aiImagePromptInput::placeholder {
        color: rgba(132, 145, 166, 0.86) !important;
    }

    #ai-image .video-v2-send-btn,
    #ai-image #aiImageComposerBlock:hover .video-v2-send-btn,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-send-btn,
    #ai-image #aiImageComposerBlock.has-text .video-v2-send-btn {
        right: 10px !important;
        bottom: 10px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #8291ff, #5868ff) !important;
        color: #ffffff !important;
        box-shadow: 0 10px 22px rgba(99, 102, 241, 0.34) !important;
    }
}

@media (max-width: 390px) {
    #ai-image .video-v2-bottom-bar {
        padding-left: 26px !important;
        padding-right: 26px !important;
    }

    #ai-image #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:hover #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:focus-within #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock.has-text #aiImagePromptInput.video-v2-chat-input {
        min-height: 92px !important;
        height: 92px !important;
        max-height: 92px !important;
    }
}

@media (max-width: 768px) {
    #ai-image.section {
        padding: 0 !important;
        min-height: 100% !important;
        background:
            radial-gradient(circle at 74% 8%, rgba(60, 104, 255, 0.2), transparent 28%),
            radial-gradient(circle at 14% 16%, rgba(41, 151, 255, 0.12), transparent 34%),
            linear-gradient(180deg, #050b14 0%, #07111d 48%, #04080f 100%) !important;
    }

    #ai-image > .content-wrapper {
        max-width: 100% !important;
        width: 100% !important;
        min-height: calc(100vh - 82px - env(safe-area-inset-bottom, 0px)) !important;
        margin: 0 !important;
        padding: 10px 12px 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    #ai-image > .content-wrapper::before {
        content: "";
        position: fixed;
        left: 12px;
        right: 12px;
        top: 86px;
        bottom: calc(82px + env(safe-area-inset-bottom, 0px));
        border-radius: 22px;
        border: 1px solid rgba(118, 143, 188, 0.24);
        background: rgba(5, 13, 25, 0.64);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 48px rgba(0, 0, 0, 0.26);
        backdrop-filter: blur(18px);
        pointer-events: none;
        z-index: 1;
    }

    #ai-image .video-v2-main {
        position: relative !important;
        z-index: 2 !important;
        min-height: calc(100vh - 164px - env(safe-area-inset-bottom, 0px)) !important;
        padding: 176px 14px 156px !important;
        overflow-y: auto !important;
    }

    #ai-image #aiImageMessages.chat-messages {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        top: 112px !important;
        width: min(82vw, 344px) !important;
        max-width: 344px !important;
        padding: 7px !important;
        border: 1px solid rgba(118, 143, 188, 0.24) !important;
        border-radius: 16px !important;
        background: rgba(16, 25, 42, 0.78) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
        backdrop-filter: blur(16px) !important;
    }

    #ai-image .ai-image-select {
        height: 36px !important;
        min-height: 36px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(132, 151, 184, 0.22) !important;
        background: rgba(16, 25, 42, 0.9) !important;
        color: rgba(238, 244, 255, 0.90) !important;
        font-size: 12px !important;
        font-weight: 760 !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        top: 164px !important;
        width: min(54vw, 212px) !important;
        max-width: 212px !important;
        padding: 3px !important;
        gap: 4px !important;
        border: 1px solid rgba(118, 143, 188, 0.24) !important;
        border-radius: 16px !important;
        background: rgba(16, 25, 42, 0.78) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
        backdrop-filter: blur(16px) !important;
    }

    #ai-image .video-option-btn[data-ref-type="character"],
    #ai-image .video-option-btn[data-ref-type="outfit"] {
        height: 36px !important;
        min-height: 36px !important;
        border-radius: 13px !important;
        border: 0 !important;
        background: transparent !important;
        color: rgba(226, 232, 240, 0.86) !important;
        font-size: 14px !important;
        font-weight: 800 !important;
    }

    #ai-image .video-option-btn[data-ref-type="character"].active,
    #ai-image .video-option-btn[data-ref-type="outfit"].active {
        background: linear-gradient(135deg, #304bff, #2635a9) !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(49, 74, 255, 0.25) !important;
    }

    #ai-image .video-v2-bottom-bar {
        left: 12px !important;
        right: 12px !important;
        bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        padding: 0 14px 14px !important;
        background: transparent !important;
        z-index: 130 !important;
    }

    #ai-image #aiImageComposerBlock {
        width: 100% !important;
        max-width: 100% !important;
    }

    #ai-image #aiImageMediaDrop.video-v2-chat-input-container {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 120px !important;
        padding: 16px 14px 12px !important;
        border-radius: 24px !important;
        border: 1px solid rgba(118, 143, 188, 0.26) !important;
        background: rgba(20, 30, 49, 0.88) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 36px rgba(0, 0, 0, 0.28) !important;
        backdrop-filter: blur(16px) !important;
    }

    #ai-image #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:hover #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:focus-within #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock.has-text #aiImagePromptInput.video-v2-chat-input {
        min-height: 62px !important;
        height: 62px !important;
        max-height: 62px !important;
        padding: 0 50px 0 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: rgba(236, 242, 255, 0.94) !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    #ai-image .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock:hover .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-chat-input-highlights,
    #ai-image #aiImageComposerBlock.has-text .video-v2-chat-input-highlights {
        padding: 0 50px 0 0 !important;
        border-radius: 0 !important;
    }

    #ai-image .video-v2-send-btn,
    #ai-image #aiImageComposerBlock:hover .video-v2-send-btn,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-send-btn,
    #ai-image #aiImageComposerBlock.has-text .video-v2-send-btn {
        right: 14px !important;
        bottom: 12px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #8291ff, #5868ff) !important;
        color: #ffffff !important;
        box-shadow: 0 12px 26px rgba(99, 102, 241, 0.35) !important;
    }
}

@media (max-width: 390px) {
    #ai-image > .content-wrapper::before {
        top: 86px;
        bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    }

    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        top: 112px !important;
        width: min(82vw, 328px) !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        top: 164px !important;
        width: min(54vw, 204px) !important;
    }
}

@media (max-width: 768px) {
    #ai-image {
        position: relative !important;
    }

    #ai-image::before {
        content: "";
        position: fixed;
        left: 12px;
        right: 12px;
        top: 86px;
        bottom: calc(82px + env(safe-area-inset-bottom, 0px));
        border-radius: 22px;
        border: 1px solid rgba(118, 143, 188, 0.24);
        background: rgba(5, 13, 25, 0.64);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 48px rgba(0, 0, 0, 0.26);
        backdrop-filter: blur(18px);
        pointer-events: none;
        z-index: 1;
    }

    #ai-image .video-v2-main,
    #ai-image .video-v2-bottom-bar,
    #ai-image .ai-image-dropdowns,
    #ai-image .video-v2-controls-row {
        position: relative;
        z-index: 2;
    }

    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: 112px !important;
        width: min(82vw, 344px) !important;
        max-width: 344px !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        transform: translateX(-50%) !important;
        z-index: 132 !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: 164px !important;
        width: min(54vw, 212px) !important;
        max-width: 212px !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        transform: translateX(-50%) !important;
        z-index: 132 !important;
    }

    #ai-image .video-v2-bottom-bar {
        z-index: 132 !important;
    }
}

@media (max-width: 390px) {
    #ai-image::before {
        top: 86px;
        bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    }

    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        top: 112px !important;
        width: min(82vw, 328px) !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        top: 164px !important;
        width: min(54vw, 204px) !important;
    }
}

@media (max-width: 768px) {
    #ai-image #aiImageMediaDrop.video-v2-chat-input-container {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        bottom: auto !important;
        top: 112px !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        bottom: auto !important;
        top: 164px !important;
    }
}

@media (max-width: 768px) {
    #ai-image .video-v2-bottom-bar {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        height: auto !important;
        padding: 0 14px 14px !important;
        z-index: 132 !important;
        transform: none !important;
    }
}

@media (max-width: 768px) {
    #ai-image #aiImageMediaDrop.video-v2-chat-input-container {
        min-height: auto !important;
        height: auto !important;
        padding: 22px 18px 16px !important;
        transition: min-height 180ms ease, height 180ms ease !important;
    }

    #ai-image #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:hover #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock:focus-within #aiImagePromptInput.video-v2-chat-input,
    #ai-image #aiImageComposerBlock.has-text #aiImagePromptInput.video-v2-chat-input {
        min-height: 62px !important;
        height: auto;
        max-height: 210px !important;
        padding: 0 50px 0 0 !important;
        resize: none !important;
        overflow-y: hidden;
    }

    #ai-image #aiImageComposerBlock.has-text #aiImageMediaDrop.video-v2-chat-input-container {
        min-height: auto !important;
    }
}

@media (max-width: 768px) {
    #ai-image .video-option-btn[data-ref-type="outfit"],
    #ai-image .video-option-btn[data-ref-type="free"],
    #ai-image .video-option-btn[data-group="model"] {
        display: none !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(70vw, 280px) !important;
        max-width: 280px !important;
        gap: 8px !important;
    }

    #ai-image .video-option-btn[data-ref-type="character"],
    #ai-image .video-option-btn[data-ref-type="accessory"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
        min-height: 36px !important;
        border-radius: 13px !important;
        border: 1px solid rgba(96, 165, 250, 0.22) !important;
        background: rgba(15, 23, 42, 0.58) !important;
        color: #bfdbfe !important;
        font-size: 14px !important;
        font-weight: 850 !important;
        box-shadow: none !important;
    }

    #ai-image .video-option-btn[data-ref-type="character"].active,
    #ai-image .video-option-btn[data-ref-type="accessory"].active {
        background: linear-gradient(135deg, #304bff, #2635a9) !important;
        border-color: rgba(191, 219, 254, 0.46) !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(49, 74, 255, 0.25) !important;
    }
}

@media (max-width: 768px) {
    #ai-image .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:hover .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock:focus-within .ai-image-dropdowns,
    #ai-image #aiImageComposerBlock.has-text .ai-image-dropdowns {
        z-index: 220 !important;
    }

    #ai-image .ai-image-custom-select {
        position: relative !important;
        z-index: 1 !important;
    }

    #ai-image .ai-image-custom-select.open {
        z-index: 260 !important;
    }

    #ai-image .ai-image-custom-menu {
        top: calc(100% + 6px) !important;
        bottom: auto !important;
        z-index: 270 !important;
    }

    #ai-image .video-v2-controls-row,
    #ai-image #aiImageComposerBlock .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:hover .video-v2-controls-row,
    #ai-image #aiImageComposerBlock:focus-within .video-v2-controls-row,
    #ai-image #aiImageComposerBlock.has-text .video-v2-controls-row {
        z-index: 120 !important;
    }
}