@keyframes lv5shimmer {
  0%   { background-position: 300% 50%; }
  100% { background-position: 0% 50%; }
}
        :root {
            --mist-silver: #e3e6e8;
            --brand-deep: #0c056d;
            --brand-purple: #590d82;
            --brand-magenta: #b61aae;
            --brand-pink: #ec4fc5;
            --brand-deeper: #060236;
            --mist-blue: #ec4fc5;
            --mist-deep-blue: #ec4fc5;
            --panel-bg: rgba(12, 5, 109, 0.85);
            --panel-text: #f0e6fc;
            --panel-accent: #ec4fc5;
            --page-bg: #0c056d;
            --msg-bg: #0c056d;
            --style-bg: #0c056d;
            --input-bg: #0c056d;
            --bot-bubble-img: none;
            --bot-bubble-bg: rgba(89, 13, 130, 0.7);
            --bot-bubble-pt: 10px;
            --bot-bubble-pr: 15px;
            --bot-bubble-pb: 10px;
            --bot-bubble-pl: 15px;
            --bot-text-color: #ffffff;
            --user-bubble-img: none;
            --user-bubble-bg: #b61aae;
            --user-bubble-pt: 10px;
            --user-bubble-pr: 15px;
            --user-bubble-pb: 10px;
            --user-bubble-pl: 15px;
            --user-text-color: #fff;
            --header-bg: rgba(6, 2, 54, 0.92);
            --nav-bg: rgba(6, 2, 54, 0.95);
            --card-bg: rgba(89, 13, 130, 0.5);
            --ui-blur: 0px;
            --text-color: #f0e6fc;
            --ui-header-bg: rgba(6, 2, 54, 0.92);
            --ui-nav-bg: rgba(6, 2, 54, 0.95);
            --ui-card-bg: rgba(89, 13, 130, 0.55);
            --ui-text-main: #f0e6fc;
            --ui-text-sub: #a89bbf;
            --ui-icon-size: 24px;
            --bot-min-h: 40px;
            --user-min-h: 40px;
            --page-bg-img: none;
            --input-fill: rgba(236, 79, 197, 0.15);
            --nav-active-color: #ec4fc5;
            --chat-bg-brightness: 1;
            --bubble-opacity: 1;
            --chat-send-btn-img: none;
            --chat-more-btn-img: none;
            --chat-phone-btn-img: none;
            --chat-edit-btn-img: none;
            --chat-dot-btn-img: none;
            --nav-discover-img: none;
            --chat-input-bar-bg: none;
            --chat-header-bar-bg: none;
        }

        .more-trigger-btn {
            font-size: 1rem;
            letter-spacing: 2px;
            padding: 2px 10px;
            font-weight: bold;
        }

        #main-app {
            background-image: var(--page-bg-img) !important;
            background-size: cover !important;
            background-position: center !important;
            background-attachment: fixed;
        }

        .phone-container * {
            -webkit-user-select: none !important;
            user-select: none !important;
        }

        .tab-page,
        .content-area,
        #tab-msg,
        #tab-style,
        #tab-me {
            background: transparent !important;
        }

        .msg-cell-wrapper {
            background: transparent !important;
            position: relative;
            overflow: hidden;
            margin-bottom: 8px;
            width: 100%;
            display: flex;
        }

        .msg-cell-content {
            flex: 0 0 100%;
            height: 90px;
            position: relative;
            z-index: 10;
            background: var(--ui-card-bg, rgba(255, 255, 255, 0.2)) !important;
            backdrop-filter: blur(var(--ui-blur));
            -webkit-backdrop-filter: blur(var(--ui-blur));
            display: flex;
            align-items: center;
            padding: 0 20px !important;
            transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .msg-cell-actions {
            flex: 0 0 160px;
            display: flex;
            gap: 8px;
            padding-left: 10px;
            transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .swipe-btn {
            width: 70px;
            height: 90px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.85rem;
            font-weight: bold;
        }

        .btn-pin {
            background: rgba(243, 156, 18, 0.8) !important;
            backdrop-filter: blur(5px);
        }
        .btn-del {
            background: rgba(231, 76, 60, 0.8) !important;
            backdrop-filter: blur(5px);
        }

        .msg-cell-content::before {
            display: none;
        }

        .cell-content h3,
        .cell-content p,
        .settings-card span,
        .card-header,
        .field-label {
            color: var(--ui-text-main) !important;
        }

        .settings-card {
            background: rgba(89, 13, 130, 0.55) !important;
            padding: 0 20px;
            backdrop-filter: blur(var(--ui-blur));
            -webkit-backdrop-filter: blur(var(--ui-blur));
            border: 1px solid rgba(236, 79, 197, 0.25) !important;
            border-radius: 20px !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
        }

        .header,
        .bottom-nav {
            background: rgba(6, 2, 54, 0.92) !important;
            backdrop-filter: blur(var(--ui-blur)) saturate(150%);
            border: none !important;
            border-top: 1px solid rgba(236, 79, 197, 0.25) !important;
        }

        .tab-page,
        .content-area {
            background: transparent !important;
        }
        .bubble-bot {
            background-color: var(--bot-bubble-bg, #f0f0f0);
            background-image: var(--bot-bubble-img, none);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            border-radius: 18px 18px 18px 4px;
            border: none;
            padding-top: var(--bot-bubble-pt, 10px);
            padding-right: var(--bot-bubble-pr, 15px);
            padding-bottom: var(--bot-bubble-pb, 10px);
            padding-left: var(--bot-bubble-pl, 15px);
            display: inline-block;
            max-width: 70%;
            width: fit-content;
            word-wrap: break-word;
            color: var(--bot-text-color, #333);
            font-size: 0.95rem;
            line-height: 1.5;
            margin-left: 10px;
            opacity: var(--bubble-opacity);
            box-sizing: border-box;
        }

        .bubble-user {
            background-color: var(--user-bubble-bg, #ec4fc5);
            background-image: var(--user-bubble-img, none);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            border-radius: 18px 18px 4px 18px;
            border: none;
            padding-top: var(--user-bubble-pt, 10px);
            padding-right: var(--user-bubble-pr, 15px);
            padding-bottom: var(--user-bubble-pb, 10px);
            padding-left: var(--user-bubble-pl, 15px);
            display: inline-block;
            max-width: 70%;
            width: fit-content;
            word-wrap: break-word;
            color: var(--user-text-color, #fff);
            font-size: 0.95rem;
            line-height: 1.5;
            margin-right: 10px;
            opacity: var(--bubble-opacity);
            box-sizing: border-box;
        }

        body,
        .cell-content h3,
        .field-label,
        .card-header,
        .settings-card span {
            color: var(--ui-text-main, #f0e6fc) !important;
        }

        .ai-thought-box,
        .tb-thought {
            color: #cc5500 !important;
            text-shadow: none;
        }

        #mp-summon,
        #mp-event,
        #mp-user,
        #mp-slot,
        #mp-style {
            background: transparent !important;
        }

        .inner-card {
            background: rgba(255, 255, 255, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 16px;
            padding: 15px;
            margin-bottom: 15px;
            backdrop-filter: blur(5px);
        }

        .nav-item img {
            width: 48px !important;
            height: 48px !important;
            object-fit: contain;
            margin-bottom: -2px;
            transition: all 0.3s ease;
            -webkit-touch-callout: none;
        }

        .nav-item {
            color: #a89bbf !important;
        }
        .nav-item.active {
            color: var(--nav-active-color, #ec4fc5) !important;
        }

        .nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--ui-text-sub) !important;
            cursor: pointer;
            font-size: 0.7rem;
            gap: 0px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .nav-item.active {
            color: var(--nav-active-color, #ec4fc5) !important;
            transform: translateY(-2px);
        }

        .phone-app-page {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(89, 13, 130, 0.55);
            z-index: 100;
            display: none;
            transform: translateX(100%);
            transition: transform 0.3s ease;
            overflow-y: auto;
        }
        .phone-app-page.open {
            display: flex;
            flex-direction: column;
            transform: translateX(0);
        }

        * {
            box-sizing: border-box;
            outline: none;
            -webkit-tap-highlight-color: transparent;
        }
        input[type="text"],
        input[type="password"],
        textarea {
            border: 1px solid rgba(236, 79, 197, 0.25);
        }
        body,
        html {
            width: 100%;
            height: 100vh;
            height: 100dvh;
            overflow: hidden;
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
            background-color: #0c056d;
            color: #f0e6fc;
            margin: 0;
            padding: 0;
        }

        img {
            -webkit-touch-callout: none !important;
            -webkit-user-drag: none !important;
            user-select: none !important;
            pointer-events: auto;
        }

        #cover-page {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 999;
            background: radial-gradient(ellipse at center, #590d82 0%, #0c056d 60%, #060236 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: opacity 0.6s ease;
        }
        .brand-title {
            font-family: 'Pinyon Script', cursive;
            font-size: 6rem;
            background: linear-gradient(to right, #ec4fc5 0%, #ffffff 25%, #ec4fc5 50%, #b61aae 75%, #ec4fc5 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: shine 3s linear infinite;
            margin-bottom: 20px;
            filter: drop-shadow(0 0 12px rgba(236, 79, 197, 0.5)) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
            line-height: 1.2;
        }
        @keyframes shine {
            from {
                background-position: 200% center;
            }
            to {
                background-position: -200% center;
            }
        }
        .tap-hint {
            font-size: 0.75rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: #ec4fc5;
            opacity: 0.7;
            animation: pulse 2s infinite;
            text-shadow: 0 0 8px rgba(236, 79, 197, 0.6);
        }
        @keyframes pulse {
            0%,
            100% {
                opacity: 0.3;
            }
            50% {
                opacity: 0.8;
            }
        }

        #main-app {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            flex-direction: column;
            opacity: 0;
            transition: opacity 0.4s ease;
            overflow: hidden;
        }

        .header {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            background: rgba(6, 2, 54, 0.92);
            backdrop-filter: blur(var(--ui-blur)) saturate(180%);
            border-bottom: 1px solid rgba(236, 79, 197, 0.25);
            z-index: 10;
            flex-shrink: 0;
        }
        .header-title {
            font-weight: 700;
            font-size: 1.1rem;
            letter-spacing: 1px;
            text-align: center;
            flex: 1;
            color: var(--ui-text-main) !important;
        }
        .header-icon {
            cursor: pointer;
            color: #ec4fc5;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .content-area {
            flex: 1;
            overflow-y: auto;
            background: rgba(89, 13, 130, 0.5);
            position: relative;
            overflow-x: hidden;
        }
        .tab-page {
            display: none;
            padding-bottom: 100px;
            height: 100%;
        }
        .tab-page.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(5px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .bottom-nav {
            height: 70px;
            backdrop-filter: blur(var(--ui-blur)) saturate(150%);
            display: flex;
            padding-bottom: env(safe-area-inset-bottom);
            flex-shrink: 0;
            box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
        }

        .cell-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 15px;
            object-fit: cover;
            background: #eee;
            border: 1px solid rgba(236, 79, 197, 0.18);
            pointer-events: none;
        }
        .cell-content {
            pointer-events: none;
            flex: 1;
        }
        .cell-content h3 {
            font-size: 1rem;
            color: var(--ui-text-main) !important;
            margin-bottom: 4px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
        }
        .pin-icon {
            width: 14px;
            height: 14px;
            color: #f39c12;
            display: none;
        }
        .is-pinned .pin-icon {
            display: block;
        }
        .is-pinned .msg-cell-content::before {
            background: rgba(255, 252, 245, 0.9) !important;
        }
        .cell-content p {
            font-size: 0.85rem;
            color: #a89bbf;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 200px;
        }

        .card-header {
            padding: 15px 0 10px 0;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: bold;
            color: #a89bbf;
            border-bottom: 1px solid rgba(0, 0, 0, 0.03);
            margin-bottom: 10px;
        }
        .field-row {
            padding: 15px 0;
            border-bottom: 1px solid rgba(236, 79, 197, 0.18) !important;
        }
        .field-label {
            display: block;
            font-size: 0.7rem;
            color: #a89bbf;
            margin-bottom: 4px;
        }
        .input-group {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        .field-input {
            flex: 1;
            border: none;
            font-size: 0.95rem;
            background: transparent;
            padding: 8px 0;
            color: #f0e6fc;
            outline: none;
            width: 100%;
            min-width: 0;
        }
        .btn-mini {
            padding: 6px 12px;
            background: rgba(236, 79, 197, 0.2);
            color: #ec4fc5;
            font-size: 0.75rem;
            border-radius: 4px;
            border: 1px solid rgba(236, 79, 197, 0.3);
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
        }
        .btn-mini.success {
            background: rgba(39, 174, 96, 0.2);
            color: #6ddc9f;
            border-color: rgba(39, 174, 96, 0.4);
        }
        .model-list-pop {
            background: rgba(12, 5, 109, 0.95);
            border: 1px solid rgba(236, 79, 197, 0.25);
            border-radius: 6px;
            margin-top: 5px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            backdrop-filter: blur(var(--ui-blur));
        }
        .model-list-pop.show {
            max-height: 300px;
            overflow-y: auto;
            padding: 5px 0;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }
        .model-opt {
            padding: 8px 12px;
            font-size: 0.85rem;
            color: #bfa9d6;
            cursor: pointer;
            border-bottom: 1px solid rgba(236, 79, 197, 0.12);
        }
        .model-opt:hover {
            background: rgba(236, 79, 197, 0.15);
            color: #f0e6fc;
        }

        #agent-editor {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #0c056d;
            z-index: 400;
            display: none;
            flex-direction: column;
            overflow-y: auto;
            transform: translateY(100%);
            transition: transform 0.3s ease;
        }
        #agent-editor.open {
            transform: translateY(0);
        }
        .editor-nav {
            background: transparent !important;
            height: 0;
            display: block;
            padding: 0;
            border-bottom: none;
            position: sticky;
            top: 0;
            z-index: 30;
            color: #f0e6fc;
        }
        .editor-back-btn {
            position: absolute;
            top: 14px;
            left: 14px;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.28);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.18);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            transition: background 0.2s;
        }
        .editor-back-btn:active {
            background: rgba(0, 0, 0, 0.45);
        }

        .visual-editor {
            position: relative;
            width: 100%;
            height: 260px;
            background: rgba(89, 13, 130, 0.4);
            margin-bottom: 0;
        }
        .bg-upload-zone {
            width: 100%;
            height: 200px;
            background: rgba(89, 13, 130, 0.4);
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .bg-upload-zone img,
        .bg-upload-zone video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .avatar-upload-zone {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(89, 13, 130, 0.85);
            position: absolute;
            bottom: 10px;
            left: 20px;
            border: 3px solid #ec4fc5;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            overflow: hidden;
            z-index: 10;
        }
        .avatar-upload-zone img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .editor-form {
            padding: 15px 16px 50px;
            background: transparent;
        }
        .form-section {
            margin-bottom: 12px;
            position: relative;
            background: rgba(89, 13, 130, 0.55);
            border-radius: 20px;
            padding: 15px 18px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(236, 79, 197, 0.25);
        }
        .section-label {
            font-size: 0.78rem;
            font-weight: bold;
            color: #ec4fc5;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(236, 79, 197, 0.2);
            border-left: none;
            padding-left: 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .edit-input {
            width: 100%;
            padding: 10px 12px;
            background: rgba(12, 5, 109, 0.6);
            border: 1px solid rgba(236, 79, 197, 0.25);
            border-radius: 10px;
            font-size: 0.9rem;
            outline: none;
            color: #f0e6fc;
        }
        .edit-input::placeholder {
            color: #7d6f95;
        }
        .edit-area {
            width: 100%;
            padding: 10px 30px 10px 12px;
            background: rgba(12, 5, 109, 0.6);
            border: 1px solid rgba(236, 79, 197, 0.25);
            border-radius: 10px;
            font-size: 0.9rem;
            height: 100px;
            resize: none;
            outline: none;
            color: #f0e6fc;
        }
        .edit-area::placeholder {
            color: #7d6f95;
        }

        .textarea-wrapper {
            position: relative;
        }
        .expand-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            color: #a89bbf;
            cursor: pointer;
            z-index: 5;
            width: 24px;
            height: 24px;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e2e8f0;
        }

        #edit-gender {
            width: auto;
            flex: none;
            padding: 12px 20px;
            text-align: center;
        }
        .char-limit {
            text-align: right;
            font-size: 0.7rem;
            color: #a89bbf;
            margin-top: 2px;
        }

        #fullscreen-editor {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #1a0432;
            z-index: 500;
            display: none;
            flex-direction: column;
        }
        #fullscreen-editor.open {
            display: flex;
            animation: fadeIn 0.2s;
        }
        .fs-header {
            padding: 15px;
            border-bottom: 1px solid rgba(236, 79, 197, 0.18);
            display: flex;
            justify-content: flex-end;
        }
        .fs-done {
            color: #ec4fc5;
            font-weight: bold;
            cursor: pointer;
        }
        .fs-input {
            flex: 1;
            padding: 20px;
            border: none;
            font-size: 1rem;
            line-height: 1.6;
            resize: none;
            outline: none;
        }

        #chat-room {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 100%;
    background: #000;
    z-index: 300;
    display: flex;
    flex-direction: column;
    /* 覆盖 .panel 的 translateY/opacity，chat-room 只用 left 滑动，避免两套动画打架导致退出后顶/底栏位移 */
    transform: none !important;
    opacity: 1 !important;
    transition: left 0.3s;
}
#chat-room.open {
    left: 0;
}

        .chat-bg-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-size: cover !important;
            background-position: center !important;
            background-repeat: no-repeat;
            filter: brightness(var(--chat-bg-brightness));
        }

        .chat-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            background: rgba(0, 0, 0, 0.4);
            pointer-events: none;
        }
        .chat-header-trans {
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 8px;
            color: #fff;
            font-weight: bold;
            z-index: 10;
            background: rgba(6, 2, 54, 0.92);
            background-image: var(--chat-header-bar-bg);
            background-size: cover;
            background-position: center;
            border-bottom: 1px solid rgba(236, 79, 197, 0.2);
        }
        .chat-header-trans > #chat-title {
            flex: 1;
            text-align: center;
        }
        /* 左右两侧按钮：扩大命中区到 44x44，避免移动端误触 */
        .chat-header-trans > div:not(#chat-title) {
            min-width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            -webkit-tap-highlight-color: rgba(236, 79, 197, 0.25);
            touch-action: manipulation;
            user-select: none;
            -webkit-user-select: none;
        }
        .chat-back-btn, #chat-edit-btn {
            cursor: pointer;
            touch-action: manipulation;
        }
        .chat-back-btn:active, #chat-edit-btn:active {
            background: rgba(236, 79, 197, 0.18);
            border-radius: 50%;
        }
        .chat-main {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            z-index: 10;
            padding-bottom: 20px;
        }

        .chat-row {
            display: flex;
            flex-direction: column;
            margin-bottom: 5px;
        }
        .chat-row-inner {
            display: flex;
            align-items: flex-start;
            flex-wrap: nowrap;
        }
        .chat-row.bot .chat-row-inner {
            justify-content: flex-start;
        }
        .chat-row.user .chat-row-inner {
            justify-content: flex-end;
        }
        .chat-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .msg-actions {
            display: flex;
            align-items: center;
            gap: 0;
            margin-top: 4px;
            height: 26px;
            overflow: hidden;
        }
        .chat-row.bot .msg-actions {
            margin-left: 50px;
            justify-content: flex-start;
            align-items: center;
            height: 26px;
            overflow: hidden;
        }
        .chat-row.user .msg-actions {
            margin-right: 50px;
            justify-content: flex-end;
            align-items: center;
            height: 26px;
            overflow: hidden;
        }

        .action-btn {
            font-size: 0.65rem;
            color: rgba(255, 255, 255, 0.8);
            background: rgba(0, 0, 0, 0.4);
            padding: 2px 8px;
            border-radius: 8px;
            cursor: pointer;
            backdrop-filter: blur(4px);
            transition: background 0.2s;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .action-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            color: #fff;
        }

        .chat-footer {
            background-color: rgba(6, 2, 54, 0.92) !important;
            background-image: var(--chat-input-bar-bg) !important;
            background-size: cover !important;
            background-position: center !important;
            border-top: 1px solid rgba(236, 79, 197, 0.25) !important;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            z-index: 10;
            padding-bottom: max(10px, env(safe-area-inset-bottom));
            gap: 10px;
            position: relative;
        }
        #msg-in {
            background: rgba(236, 79, 197, 0.12) !important;
            color: #f0e6fc !important;
            flex: 1;
            border: none;
            padding: 10px 15px;
            border-radius: 20px;
            font-size: 0.95rem;
            height: 40px;
        }
        #msg-in::placeholder {
            color: #a89bbf !important;
        }
        .icon-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #a89bbf;
            transition: all 0.2s;
        }
        .icon-btn:active {
            color: #ec4fc5;
            transform: scale(0.9);
        }
        .icon-btn.send-btn {
            color: #ec4fc5;
        }

        .normal-save-container {
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 30px 0;
        }
                .btn-save {
            background: linear-gradient(135deg, #ec4fc5, #b61aae);
            color: #fff !important;
            padding: 12px 40px;
            border-radius: 30px;
            border: none;
            font-size: 0.95rem;
            font-weight: 600;
            box-shadow: 0 4px 16px rgba(236, 79, 197, 0.5);
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn-save:hover {
            box-shadow: 0 6px 20px rgba(236, 79, 197, 0.7);
        }

        #more-panel {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 85%;
            background: var(--page-bg, #0c056d) !important;
            backdrop-filter: none;
            border-radius: 20px 20px 0 0;
            z-index: 50;
            transform: translateY(100%);
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            flex-direction: column;
            padding-bottom: env(safe-area-inset-bottom);
            box-shadow: 0 -15px 50px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(236, 79, 197, 0.3);
        }
        #more-panel.open {
            transform: translateY(0);
        }
        .more-header {
            padding: 15px;
            text-align: center;
            border-bottom: 1px solid rgba(236, 79, 197, 0.25);
            position: relative;
            font-weight: bold;
            color: #f0e6fc;
            font-size: 1.1rem;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .more-close {
            position: absolute;
            right: 15px;
            top: 15px;
            color: #a89bbf;
            cursor: pointer;
        }

        .more-tabs {
            display: flex;
            border-bottom: 1px solid rgba(236, 79, 197, 0.18);
            overflow-x: auto;
            scroll-snap-type: x mandatory;
        }
        .more-tab {
            flex: 0 0 33.33%;
            text-align: center;
            padding: 12px 0;
            font-size: 0.9rem;
            color: var(--panel-accent);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            display: flex;
            justify-content: center;
            gap: 5px;
            align-items: center;
            white-space: nowrap;
            scroll-snap-align: start;
        }
        .more-tab.active {
            color: var(--mist-deep-blue);
            font-weight: bold;
            border-bottom-color: var(--mist-deep-blue);
        }
        .more-tab i {
            width: 16px;
            height: 16px;
        }

        .more-content {
            flex: 1;
            overflow-y: auto;
            padding: 0;
            display: none;
            background: transparent;
            touch-action: pan-y;
            position: relative;
        }
        .more-content.active {
            display: block;
        }
        .more-inner-pad {
            padding: 20px;
        }

        .slot-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 20px;
        }
        .save-slot {
            width: 100%;
            height: 60px;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            background: rgba(89, 13, 130, 0.55);
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            padding: 0 20px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.2s;
            gap: 15px;
        }
        .save-slot.active {
            border-color: #ff4d4d;
            background: #fff5f5;
        }
        .save-slot.active small {
            color: #333;
            font-weight: 600;
        }
        .save-slot i {
            color: #f0e6fc !important;
            opacity: 1 !important;
        }
        .save-slot.active i {
            color: #ff4d4d !important;
            opacity: 1 !important;
            filter: brightness(1.2);
        }
        .save-slot small {
            font-size: 1rem;
            color: #f0e6fc;
            font-weight: 500;
        }
        .slot-badge {
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            width: 8px;
            height: 8px;
            background: #ef4444;
            border-radius: 50%;
            opacity: 0;
        }
        .save-slot.has-data .slot-badge {
            opacity: 1;
        }

        .file-input {
            display: none;
        }
        .twitter-container {
            background: transparent !important;
            min-height: 100%;
            color: #f0e6fc !important;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            padding-bottom: 60px;
        }
        .tweet-card {
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding: 12px 16px;
            transition: background 0.2s;
        }
        .tweet-card:hover {
            background-color: rgba(255, 255, 255, 0.03);
        }
        .tweet-card span {
            color: var(--mist-deep-blue) !important;
        }
        .comment-item {
            padding: 12px 16px;
            border-bottom: 1px solid #2f3336;
            display: flex;
            gap: 12px;
        }
        .like-anim {
            animation: likeBounce 0.4s;
            color: #f91880 !important;
            fill: #f91880;
        }
        @keyframes likeBounce {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.3);
            }
            100% {
                transform: scale(1);
            }
        }

        .float-tweet-btn {
            position: sticky;
            bottom: 20px;
            right: 20px;
            background: #ec4fc5;
            color: #fff;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            z-index: 60;
            transition: transform 0.2s;
            margin-left: auto;
        }
        .float-tweet-btn:active {
            transform: scale(0.9);
        }

        #mp-google {
            background: #ffffff !important;
        }
        .google-container {
            min-height: 100%;
            padding-bottom: 60px;
            font-family: 'Google Sans', arial, sans-serif;
            color: #f0e6fc !important;
        }
        .google-header {
            padding: 16px;
            border-bottom: 1px solid #3c4043;
        }
        .fake-search-bar {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.4) !important;
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 9999px;
            padding: 10px 16px;
            gap: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
        }
        .fake-search-bar input {
            background: transparent;
            border: none;
            outline: none;
            flex: 1;
            color: var(--mist-deep-blue);
            font-size: 0.9rem;
        }
        .google-subheader {
            padding: 12px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #9aa0a6;
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        .search-item {
            padding: 12px 20px;
            display: flex;
            gap: 16px;
            align-items: flex-start;
            cursor: pointer;
            transition: background 0.2s;
            border-bottom: 1px solid #ebebeb;
        }
        .search-item:hover {
            background-color: rgba(0, 0, 0, 0.04);
        }
        .icon-circle {
            padding: 8px;
            border-radius: 50%;
            margin-top: 2px;
        }
        .bg-blue-dark {
            background: rgba(66, 133, 244, 0.2);
        }
        .text-blue-glow {
            color: #1a73e8;
        }
        .bg-purple-dark {
            background: rgba(161, 66, 244, 0.2);
        }
        .text-purple-glow {
            color: #8430ce;
        }
        .bg-green-dark {
            background: rgba(52, 168, 83, 0.2);
        }
        .text-green-glow {
            color: #1e8e3e;
        }
        .search-content {
            flex: 1;
        }
        .search-title {
            font-size: 0.95rem;
            font-weight: 500;
            color: #202124 !important;
            display: flex;
            justify-content: space-between;
        }
        .search-time {
            font-size: 0.75rem;
            color: #9aa0a6;
            margin-left: 10px;
            font-weight: normal;
        }
        .search-meta {
            font-size: 0.75rem;
            color: #9aa0a6;
            margin-top: 2px;
        }
        .ai-thought-box {
            margin-top: 6px;
            font-size: 0.75rem;
            color: #c5690a;
            display: flex;
            align-items: flex-start;
            gap: 6px;
        }

        .summon-box {
            background: rgba(44, 62, 80, 0.8);
            color: #ecf0f1;
            padding: 20px;
            border-radius: 16px;
            font-family: monospace;
            font-size: 0.9rem;
            min-height: 200px;
            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(52, 73, 94, 0.5);
            white-space: pre-wrap;
            line-height: 1.6;
            backdrop-filter: blur(5px);
        }

        #mp-taobao {
            background: #f4f4f4 !important;
        }
        .tb-orange {
            color: #ff5000;
        }
        .bg-tb-orange {
            background-color: #ff5000;
        }
        .tb-container {
            padding: 15px;
            padding-bottom: 80px;
            min-height: 100%;
            max-width: 480px;
            margin: 0 auto;
        }
        .taobao-header {
            background: rgba(255, 100, 0, 0.05);
            border: 1px solid rgba(255, 100, 0, 0.2);
            border-radius: 20px;
            padding: 10px 15px;
            margin-bottom: 15px;
        }
        .order-card {
            background: #ffffff;
            border: 1px solid #eeeeee;
            border-radius: 12px;
            padding: 10px;
            margin-bottom: 10px;
            color: #333333;
        }
        .order-card h2 {
            color: #222222;
        }
        .order-card .text-gray-400 { color: #888888 !important; }
        .order-card .text-gray-500 { color: #666666 !important; }
        .order-card .price {
            color: #ff5000;
            font-weight: bold;
        }
        .status-tag {
            color: #ff5000;
            font-size: 13px;
            font-weight: bold;
        }

        .mall-container {
            background: transparent !important;
        }
        .mall-item {
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 16px;
            overflow: hidden;
            transition: transform 0.2s;
        }
        .mall-item:active {
            transform: scale(0.98);
        }
        .mall-tab {
            padding: 6px 15px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.3);
            color: var(--mist-deep-blue);
            font-size: 0.8rem;
            display: inline-block;
            margin: 0 5px 10px 0;
            cursor: pointer;
        }
        .mall-tab.active {
            background: var(--mist-deep-blue);
            color: white;
        }

        #mp-about {
            padding: 30px;
            color: var(--mist-deep-blue);
            text-align: center;
        }
        .about-logo {
            filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
        }
        .version-tag {
            background: rgba(0, 0, 0, 0.05);
            padding: 2px 8px;
            border-radius: 4px;
            font-family: monospace;
            display: inline-block;
            margin-top: 10px;
        }

        .more-content::-webkit-scrollbar {
            width: 4px;
        }
        .more-content::-webkit-scrollbar-track {
            background: transparent;
        }
        .more-content::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        input,
        textarea {
            color: var(--ui-text-main) !important;
            background: var(--input-fill) !important;
        }

        #wechat-user-input {
            color: #f0e6fc !important;
            background: #fff !important;
        }

        .chat-main {
            color: #ffffff !important;
        }

        #tab-me .field-input {
            background: rgba(12, 5, 109, 0.5) !important;
            color: #f0e6fc !important;
            border: 1px solid rgba(236, 79, 197, 0.25) !important;
            border-radius: 10px;
            padding: 12px !important;
        }

        #tab-me {
            background: transparent !important;
        }

        #main-app[style*="--page-bg-img"] #tab-me .btn-mini {
            background: rgba(236, 79, 197, 0.2) !important;
            color: white !important;
            border: none !important;
        }

        .field-input,
        .edit-input,
        .edit-area {
            background: rgba(12, 5, 109, 0.55) !important;
            color: #f0e6fc !important;
            border: 1px solid rgba(236, 79, 197, 0.25) !important;
            border-radius: 8px;
        }

        .phone-container {
            width: 313px;
            height: 553px;
            margin: 0;
            background: radial-gradient(ellipse at center, #590d82 0%, #0c056d 60%, #060236 100%);
            border-radius: 29px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: column;
            pointer-events: auto;
                        transform: translateY(120%) scale(1.045);
            transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        #phone-drawer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 350;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 70px;
            background: rgba(0, 0, 0, 0);
            pointer-events: none;
            visibility: hidden;
            transition: visibility 0.3s, background 0.3s;
        }

        #phone-drawer.open {
            pointer-events: auto;
            visibility: visible;
            background: rgba(0, 0, 0, 0.2);
        }

                #phone-drawer.open .phone-container {
    transform: translateY(0) scale(1.045);
}

        .phone-drawer-header {
            display: none !important;
        }

        .phone-drawer-content {
            display: contents;
        }

        /* ===== 模块二：发现页 ===== */
        #tab-discover {
            padding: 0 !important;
            text-align: left !important;
        }
        .discover-tag-chip {
            padding: 6px 14px;
            border-radius: 16px;
            background: rgba(236, 79, 197, 0.18);
            color: #a89bbf;
            font-size: 0.8rem;
            cursor: pointer;
            flex-shrink: 0;
            transition: all 0.2s;
            border: 1px solid rgba(0,0,0,0.04);
        }
        .discover-tag-chip.active {
            background: linear-gradient(135deg,#ec4fc5,#b61aae);
            color: #fff;
            border-color: transparent;
        }
        .discover-card {
            background: var(--ui-card-bg);
            border-radius: 14px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            transition: transform 0.15s;
        }
        .discover-card:active {
            transform: scale(0.97);
        }
        .discover-user-row:active {
            background: rgba(236, 79, 197, 0.12);
        }
        .notif-filter-tab {
            padding: 5px 14px;
            border-radius: 14px;
            background: rgba(236, 79, 197, 0.18);
            color: #a89bbf;
            font-size: 0.8rem;
            cursor: pointer;
            flex-shrink: 0;
            transition: all 0.2s;
        }
        .notif-filter-tab.active {
            background: #ec4fc5;
            color: #fff;
        }
        .notif-item {
            display: flex;
            gap: 10px;
            padding: 12px 4px;
            border-bottom: 1px solid rgba(236, 79, 197, 0.15);
            cursor: pointer;
            align-items: flex-start;
        }
        .notif-item .notif-avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
            background: rgba(89, 13, 130, 0.5);
        }
        /* ===== 模块四：发布编辑器 ===== */
        .publish-section {
            margin-bottom: 18px;
        }
        .publish-section label {
            display: block;
            font-size: 0.82rem;
            font-weight: bold;
            color: #475569;
            margin-bottom: 8px;
        }
        .pub-input, .pub-textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid rgba(236, 79, 197, 0.25);
            border-radius: 10px;
            font-size: 0.9rem;
            outline: none;
            box-sizing: border-box;
            background: rgba(12, 5, 109, 0.5) !important;
            color: #f0e6fc !important;
            font-family: inherit;
        }
        .pub-textarea {
            resize: none;
        }
        .pub-tag-btn {
            padding: 6px 12px;
            border-radius: 14px;
            background: rgba(236, 79, 197, 0.15);
            color: #a89bbf;
            font-size: 0.8rem;
            cursor: pointer;
            border: 1px solid transparent;
            transition: all 0.2s;
        }
        .pub-tag-btn.selected {
            background: rgba(236, 79, 197, 0.3);
            color: #ec4fc5;
            border-color: #ec4fc5;
        }
        .template-option {
            cursor: pointer;
            padding: 6px;
            border-radius: 10px;
            border: 2px solid transparent;
            transition: all 0.2s;
        }
        .template-option.active {
            border-color: #ec4fc5;
        }

        #tab-discover {
            padding: 40px 20px;
            text-align: center;
            color: var(--ui-text-main);
        }

        .discover-header {
            margin-bottom: 40px;
        }

        .discoming-soon {
            opacity: 0.7;
            font-size: 0.9rem;
            line-height: 1.6;
            margin-top: 10px;
        }

        .echo-item {
            background: rgba(89, 13, 130, 0.4);
            border: 1px solid rgba(236, 79, 197, 0.25);
            border-radius: 12px;
            margin-bottom: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .echo-header {
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            background: rgba(89, 13, 130, 0.45);
        }

        .echo-title {
            font-weight: bold;
            color: var(--mist-deep-blue);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .echo-keywords {
            font-size: 0.75rem;
            color: #bfa9d6;
            margin-top: 4px;
        }

        .echo-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .echo-content.open {
            max-height: 2000px;
        }

        .echo-subitem {
            padding: 12px 15px;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            background: rgba(255, 255, 255, 0.3);
        }

        .echo-subtext {
            font-size: 0.9rem;
            line-height: 1.6;
            color: #f0e6fc;
            margin-bottom: 8px;
        }

        .echo-actions {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
        }

        .echo-btn {
            padding: 4px 12px;
            border-radius: 6px;
            font-size: 0.75rem;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }

        .echo-btn-edit {
            background: #e3f2fd;
            color: #1976d2;
        }

        .echo-btn-del {
            background: #ffebee;
            color: #c62828;
        }

        .echo-add-btn {
            position: fixed;
            bottom: 100px;
            right: 20px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, #b61aae 0%, #ec4fc5 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
            cursor: pointer;
            z-index: 100;
            transition: transform 0.2s;
        }

        .echo-add-btn:active {
            transform: scale(0.95);
        }

        .echo-editor-modal {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 15px;
            overflow-y: auto;
        }

        .echo-editor-modal.open {
            display: flex;
        }

        .echo-editor-content {
            background: white;
            border-radius: 20px;
            width: 100%;
            max-width: 100%;
            max-height: 85%;
            overflow-y: auto;
            padding: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        .echo-editor-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }

        .echo-editor-title {
            font-size: 1.2rem;
            font-weight: bold;
            color: var(--mist-deep-blue);
        }

        .echo-field {
            margin-bottom: 15px;
        }

        .echo-field label {
            display: block;
            font-size: 0.85rem;
            font-weight: 600;
            color: #555;
            margin-bottom: 6px;
        }

        .echo-field input,
        .echo-field textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 0.95rem;
            transition: border-color 0.2s;
        }

        .echo-field input:focus,
        .echo-field textarea:focus {
            border-color: #ec4fc5;
            outline: none;
        }

        .echo-subcontent-list {
            margin-top: 10px;
        }

        .echo-subcontent-item {
            background: rgba(89, 13, 130, 0.5);
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 10px;
            position: relative;
        }

        .echo-subcontent-textarea {
            width: 100%;
            min-height: 80px;
            border: 1px solid rgba(236, 79, 197, 0.25);
            border-radius: 8px;
            padding: 10px;
            font-size: 0.9rem;
            resize: vertical;
        }

        .echo-char-count {
            text-align: right;
            font-size: 0.75rem;
            color: #a89bbf;
            margin-top: 4px;
        }

        .echo-char-count.warning {
            color: #ff9800;
        }

        .echo-char-count.danger {
            color: #f44336;
            font-weight: bold;
        }

        .echo-total-warning {
            background: #fff3e0;
            border: 1px solid #ff9800;
            border-radius: 8px;
            padding: 10px;
            margin-bottom: 15px;
            font-size: 0.85rem;
            color: #e65100;
            display: none;
        }

        .echo-total-warning.show {
            display: block;
        }

        .echo-convert-btn {
            background: linear-gradient(135deg, #b61aae 0%, #ec4fc5 100%);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 0.85rem;
            cursor: pointer;
            margin-bottom: 15px;
            transition: transform 0.2s;
        }

        .echo-convert-btn:hover {
            transform: translateY(-2px);
        }

        .echo-convert-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .typing-dots span {
            display: inline-block;
            animation: dotBounce 1.2s infinite ease-in-out;
            font-size: 1.4rem;
            line-height: 1;
        }
        .typing-dots span:nth-child(2) {
            animation-delay: 0.2s;
        }
        .typing-dots span:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes dotBounce {
            0%,
            80%,
            100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-6px);
            }
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes slideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }

        @keyframes kaomojiBreathe {
            0%,
            100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.08);
            }
        }
        #island-kaomoji {
            display: inline-block;
            font-size: 0.85rem;
            letter-spacing: 1px;
            color: white;
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
        }

        .phone-bottom-nav {
            width: 100%;
            display: flex;
            justify-content: space-around;
            padding: 0 15px 5px;
            background: transparent;
            flex-shrink: 0;
        }
        .phone-nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            transition: transform 0.2s;
        }
        .phone-nav-item:active {
            transform: scale(0.9);
        }
        .phone-nav-item i {
            width: 24px;
            height: 24px;
            color: white;
        }
        .phone-nav-item span {
            font-size: 0.6rem;
            color: white;
            margin-top: 2px;
        }
        .panel {
            pointer-events: none;
            opacity: 0;
            transform: translateY(100%);
            transition: transform 0.3s, opacity 0.2s;
            z-index: 100;
        }
        .panel.open {
            pointer-events: auto;
            opacity: 1;
            transform: translateY(0);
            display: flex !important;
        }
        .auth-tab {
            font-weight: bold;
            color: #a89bbf;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            transition: all 0.2s;
        }
        .auth-tab.active {
            color: #ec4fc5;
            border-bottom: 2px solid #ec4fc5;
        }
        .chat-footer {
            position: relative;
            z-index: 999;
        }
        .chat-footer * {
            pointer-events: auto !important;
        }
        .coread-danmaku {
            position: absolute;
            right: -100%;
            display: flex;
            align-items: center;
            gap: 6px;
            pointer-events: auto;
            cursor: pointer;
            transition: opacity 0.3s;
            z-index: 10;
        }
        .coread-danmaku .dm-avatar {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .coread-danmaku .dm-bubble {
            background: rgba(20, 26, 46, 0.88);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(82, 183, 136, 0.3);
            border-radius: 14px 14px 14px 4px;
            padding: 6px 10px;
            font-size: 0.72rem;
            color: #c8ffd4;
            max-width: 200px;
            line-height: 1.4;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
            white-space: pre-wrap;
        }
        .coread-danmaku.user-danmaku .dm-bubble {
            background: rgba(20, 40, 46, 0.88);
            border-color: rgba(100, 180, 220, 0.3);
            color: #c8e8ff;
            border-radius: 14px 14px 4px 14px;
        }
        .coread-bookmark-pin {
            position: absolute;
            right: 4px;
            width: 20px;
            height: 24px;
            cursor: pointer;
            pointer-events: auto;
            z-index: 15;
            transition: transform 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
        }
        .coread-bookmark-pin:active {
            transform: scale(0.85);
        }
        #coread-book-scroll::-webkit-scrollbar {
            width: 3px;
        }
        #coread-book-scroll::-webkit-scrollbar-thumb {
            background: rgba(82, 183, 136, 0.3);
            border-radius: 3px;
        }
        .coread-anchor-reply {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: rgba(100, 180, 220, 0.15);
            border: 1px solid rgba(100, 180, 220, 0.25);
            border-radius: 10px;
            padding: 3px 8px;
            font-size: 0.68rem;
            color: #88c8e8;
            margin: 4px 0;
            cursor: default;
        }
        .coread-para {
            padding: 2px 0;
            transition: background 0.4s;
            border-radius: 4px;
        }
        .coread-para.reading-highlight {
            background: rgba(82, 183, 136, 0.06);
        }
        #coread-reply-bar.open {
            display: block !important;
            transform: translateY(0) !important;
        }
        @keyframes danmakuSlideIn {
            from {
                right: -100%;
                opacity: 0;
            }
            to {
                right: 8px;
                opacity: 1;
            }
        }
/* ===== 模板预览区样式 ===== */
.template-preview-frame {
    width: 100%;
    height: 70vh;
    border: 1px solid rgba(236, 79, 197, 0.25);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.template-thumb-bar {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 8px 0;
    scrollbar-width: none;
}
.template-thumb-bar::-webkit-scrollbar { display: none; }
.template-thumb {
    flex: 0 0 90px;
    height: 120px;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    overflow: hidden;
    position: relative;
    transition: all 0.2s;
}
.template-thumb.active {
    border-color: #ec4fc5;
    box-shadow: 0 0 12px rgba(236, 79, 197, 0.5);
}
.template-thumb-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 0.7rem;
    text-align: center;
    padding: 3px 0;
}
.visib-opt {
    padding: 11px 14px;
    background: rgba(89,13,130,0.5);
    border: 1px solid rgba(236,79,197,0.2);
    border-radius: 10px;
    font-size: 0.88rem;
    color: var(--ui-text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s;
}
.visib-opt.active {
    border-color: #ec4fc5;
    background: rgba(236,79,197,0.18);
    color: #ec4fc5;
    font-weight: bold;
}
.visib-opt.active::after { content: '✓'; }
.mycard-row-wrap, .blacklist-row-wrap {
    position: relative; overflow: hidden;
    border-radius: 10px; margin-bottom: 8px; display: flex;
}
.mycard-row, .blacklist-row {
    flex: 0 0 100%;
    background: rgba(89,13,130,0.55);
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1);
    box-sizing: border-box;
}
.row-del-btn {
    flex: 0 0 72px;
    background: rgba(231,76,60,0.85);
    color: #fff; font-size: 0.8rem; font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1);
    cursor: pointer;
}
/* ===== Voice 精品丝带标签 ===== */
.voice-ribbon {
    position: absolute;
    top: 9px;
    left: -30px;
    width: 110px;
    transform: rotate(-45deg);
    background: linear-gradient(135deg, #f59e0b, #ec4fc5, #b61aae);
    color: #fff;
    text-align: center;
    padding: 3px 0;
    font-family: 'Pinyon Script', cursive;
    font-size: 0.92rem;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(182,26,174,0.55);
    z-index: 5;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.voice-ribbon .ribbon-star {
    display: inline-block;
    width: 9px;
    height: 9px;
}
.voice-ribbon::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
    transform: skewX(-20deg);
    animation: ribbonShine 4s ease-in-out infinite;
}
@keyframes ribbonShine {
    0%   { left: -60%; }
    45%  { left: 130%; }
    100% { left: 130%; }
}
#custom-css-input {
    width: 100% !important;
    box-sizing: border-box !important;
}
    </style>
</head>
<body>
    <div id="pin-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:10000; align-items:center; justify-content:center; backdrop-filter:blur(8px);">
        <div style="background:rgba(12, 5, 109, 0.95); border-radius:20px; padding:30px 25px; width:85%; max-width:320px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.3);">
            <div style="margin-bottom:10px; display:flex; justify-content:center;">
                <i data-lucide="lock" style="width:40px;height:40px;color:#ec4fc5;"></i>
            </div>
            <div id="pin-title" style="font-size:1.1rem; font-weight:bold; color:#f0e6fc; margin-bottom:8px;">请设置PIN码</div>
            <div id="pin-subtitle" style="font-size:0.8rem; color:#a89bbf; margin-bottom:20px; line-height:1.5;">用于加密保护您的API密钥<br>请设置4位数字PIN码</div>
            <input type="password" id="pin-input" maxlength="4" inputmode="numeric" pattern="[0-9]*" style="width:180px; padding:14px; font-size:1.5rem; text-align:center; letter-spacing:10px; border:2px solid rgba(236, 79, 197, 0.3); border-radius:12px; outline:none; margin-bottom:10px; background:rgba(12, 5, 109, 0.6); color:#f0e6fc;" placeholder="····">
            <div id="pin-error" style="color:#ef4444; font-size:0.8rem; min-height:20px; margin-bottom:10px;"></div>
            <div style="display:flex; gap:10px;">
                <button id="pin-cancel-btn" onclick="cancelPinModal()" style="flex:1; padding:12px; background:rgba(89, 13, 130, 0.4); color:#bfa9d6; border:none; border-radius:10px; cursor:pointer; font-size:0.9rem; display:none;">取消</button>
                <button id="pin-confirm-btn" onclick="confirmPinModal()" style="flex:2; padding:12px; background:linear-gradient(135deg,#ec4fc5,#b61aae); color:white; border:none; border-radius:10px; cursor:pointer; font-size:0.9rem; font-weight:bold;">确认</button>
            </div>
            <div id="pin-forgot" onclick="forgotPin()" style="margin-top:15px; font-size:0.75rem; color:#a89bbf; cursor:pointer; text-decoration:underline; display:none;">忘记PIN码？</div>
        </div>
    </div>

    <!-- ===== 模块八：登录注册页 ===== -->
    <div id="auth-page" style="position:fixed; top:0; left:0; width:100%; height:100%; background:linear-gradient(135deg, #0c056d, #060236); z-index:1000; display:none; flex-direction:column; align-items:center; justify-content:center; padding:30px; transition:opacity 0.4s ease;">
        <div style="font-family:'Pinyon Script',cursive; font-size:4rem; background:linear-gradient(to right, #b61aae, #ec4fc5); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:30px;">MistCall</div>
        <div style="background:rgba(89, 13, 130, 0.55); border-radius:20px; padding:25px; width:100%; max-width:340px; box-shadow:0 10px 40px rgba(0,0,0,0.4); border:1px solid rgba(236, 79, 197, 0.25); backdrop-filter:blur(12px);">
            <div style="display:flex; margin-bottom:20px; border-bottom:2px solid rgba(236, 79, 197, 0.18);">
                <div id="auth-tab-login" class="auth-tab active" onclick="switchAuthTab('login')" style="flex:1; text-align:center; padding:10px; cursor:pointer;">登录</div>
                <div id="auth-tab-register" class="auth-tab" onclick="switchAuthTab('register')" style="flex:1; text-align:center; padding:10px; cursor:pointer;">注册</div>
            </div>
                        <div id="auth-form-login">
                <input type="email" id="login-account" placeholder="邮箱" autocomplete="email" style="width:100%; padding:12px; margin-bottom:10px; border:1px solid rgba(236, 79, 197, 0.3); border-radius:10px; box-sizing:border-box; outline:none; background:rgba(12, 5, 109, 0.6); color:#f0e6fc;">
                <input type="password" id="login-password" placeholder="密码" autocomplete="current-password" style="width:100%; padding:12px; margin-bottom:15px; border:1px solid rgba(236, 79, 197, 0.3); border-radius:10px; box-sizing:border-box; outline:none; background:rgba(12, 5, 109, 0.6); color:#f0e6fc;">
                <button onclick="doLogin()" id="login-submit-btn" style="width:100%; padding:12px; background:linear-gradient(135deg,#ec4fc5,#b61aae); color:white; border:none; border-radius:10px; font-weight:bold; cursor:pointer; box-shadow:0 4px 16px rgba(236, 79, 197, 0.4);">登录</button>
            </div>
                        <div id="auth-form-register" style="display:none;">
                <input type="email" id="reg-account" placeholder="邮箱" autocomplete="email" style="width:100%; padding:12px; margin-bottom:10px; border:1px solid rgba(236, 79, 197, 0.3); border-radius:10px; box-sizing:border-box; outline:none; background:rgba(12, 5, 109, 0.6); color:#f0e6fc;">
                <input type="text" id="reg-nickname" placeholder="昵称" maxlength="20" style="width:100%; padding:12px; margin-bottom:10px; border:1px solid rgba(236, 79, 197, 0.3); border-radius:10px; box-sizing:border-box; outline:none; background:rgba(12, 5, 109, 0.6); color:#f0e6fc;">
                <input type="password" id="reg-password" placeholder="密码(至少6位)" autocomplete="new-password" style="width:100%; padding:12px; margin-bottom:10px; border:1px solid rgba(236, 79, 197, 0.3); border-radius:10px; box-sizing:border-box; outline:none; background:rgba(12, 5, 109, 0.6); color:#f0e6fc;">
                <input type="password" id="reg-password2" placeholder="确认密码" autocomplete="new-password" style="width:100%; padding:12px; margin-bottom:10px; border:1px solid rgba(236, 79, 197, 0.3); border-radius:10px; box-sizing:border-box; outline:none; background:rgba(12, 5, 109, 0.6); color:#f0e6fc;">
                <input type="text" id="reg-invite-code" placeholder="邀请卡密(向作者获取)" autocomplete="off" style="width:100%; padding:12px; margin-bottom:12px; border:1px solid rgba(236, 79, 197, 0.3); border-radius:10px; box-sizing:border-box; outline:none; background:rgba(12, 5, 109, 0.6); color:#f0e6fc; letter-spacing:1px;">
                <label style="display:flex; align-items:flex-start; gap:8px; margin-bottom:15px; cursor:pointer; padding:0 2px; user-select:none;">
                    <input type="checkbox" id="reg-agree-terms" style="margin-top:3px; flex-shrink:0; accent-color:#ec4fc5;">
                    <span style="font-size:0.75rem; color:#bfa9d6; line-height:1.5;">
                        我已年满 18 周岁,已阅读并同意
                        <a onclick="event.preventDefault(); showTermsModal('agreement')" style="color:#ec4fc5; cursor:pointer; text-decoration:underline;">《用户协议》</a>
                        和
                        <a onclick="event.preventDefault(); showTermsModal('privacy')" style="color:#ec4fc5; cursor:pointer; text-decoration:underline;">《隐私政策》</a>
                    </span>
                </label>
                <button onclick="doRegister()" id="reg-submit-btn" style="width:100%; padding:12px; background:linear-gradient(135deg,#ec4fc5,#b61aae); color:white; border:none; border-radius:10px; font-weight:bold; cursor:pointer; box-shadow:0 4px 16px rgba(236, 79, 197, 0.4);">注册</button>
            </div>
            <div style="margin-top:15px; padding-top:15px; border-top:1px solid rgba(236, 79, 197, 0.18); text-align:center; font-size:0.7rem; color:#7d6f95;">
                本地演示账号系统 · 数据仅存于本机
            </div>
        </div>
    </div>

    <div id="cover-page" onclick="enterApp()">
        <div class="brand-title">MistCall</div>
        <div class="tap-hint">Tap to Start</div>
    </div>

    <div id="main-app">
        <div class="header">
            <div class="header-icon" id="header-bell" onclick="openNotificationPanel()" style="position:relative;">
                <i data-lucide="bell"></i>
                <span id="notification-badge" style="display:none; position:absolute; top:-2px; right:-2px; background:#ef4444; color:white; font-size:0.6rem; padding:1px 5px; border-radius:8px; min-width:16px; text-align:center; line-height:1.2;">0</span>
            </div>
            <div class="header-title" id="nav-title">消息</div>
            <div class="header-icon" id="header-plus" onclick="showAddMenu()"><i data-lucide="plus"></i></div>
            <div class="header-icon" id="header-right-space" style="display:none; opacity:0;"></div>
        </div>

        <div class="content-area">
            <div id="tab-msg" class="tab-page active">
                <div id="agent-list-container"></div>
            </div>
                        <div id="tab-moments" class="tab-page" style="padding:0; background:var(--page-bg);">
                <!-- 顶栏：透明，浮在封面上 -->
                <div style="padding:10px 14px; display:flex; align-items:center; gap:10px; position:absolute; top:0; left:0; right:0; z-index:20; background:linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);">
                    <div style="flex:1; font-weight:bold; color:#fff; font-size:0.95rem; text-shadow:0 1px 4px rgba(0,0,0,0.5);">动态</div>
                    <div onclick="openMomentEditor()" style="width:34px; height:34px; border-radius:9px; background:rgba(0,0,0,0.35); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; cursor:pointer;">
                        <i data-lucide="camera" style="width:18px;height:18px;color:white;"></i>
                    </div>
                </div>

                <!-- 封面区 -->
                <div id="moments-cover-wrap" style="position:relative; width:100%; height:260px; overflow:hidden; cursor:pointer;" onclick="changeMomentsCover()">
                    <div id="moments-cover-img" style="position:absolute; inset:0; background:linear-gradient(135deg, #1a0a4a 0%, #2d0b5e 50%, #4a0e7a 100%); background-size:cover; background-position:center;"></div>
                    <!-- 提示文字（无封面时显示） -->
                                        <div id="moments-cover-hint" style="position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); color:rgba(255,255,255,0.85); font-size:0.7rem; display:flex; align-items:center; gap:4px; text-shadow:0 1px 3px rgba(0,0,0,0.5); padding:8px 16px; background:rgba(0,0,0,0.25); border-radius:16px; backdrop-filter:blur(6px);">
                        <i data-lucide="image" style="width:11px;height:11px;"></i>
                        点击更换封面
                    </div>
                                    </div>

                <!-- 右下角：昵称 + 头像（移到封面外层，不被裁切） -->
                <div style="position:relative; height:0;">
                    <div style="position:absolute; right:14px; top:-44px; display:flex; align-items:flex-end; gap:10px; z-index:5;">
                        <div id="moments-cover-username" style="color:#fff; font-size:0.95rem; font-weight:bold; text-shadow:0 2px 6px rgba(0,0,0,0.6); padding-bottom:36px;">MistUser</div>
                                                <img id="moments-cover-avatar" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNlYzRmYzUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM1OTBkODIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNnKSIvPjx0ZXh0IHg9IjUwIiB5PSI2OCIgZm9udC1zaXplPSI1OCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IkFyaWFsLHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSI3MDAiIGZpbGw9IiNmZmYiPk08L3RleHQ+PC9zdmc+" style="width:64px; height:64px; border-radius:8px; border:3px solid #fff; background:#fff; object-fit:cover; flex-shrink:0;">
                    </div>
                </div>

                <input type="file" id="moments-cover-input" hidden accept="image/*" onchange="handleMomentsCoverChange(this)">

                <!-- 留出头像下沉空间 -->
                <div style="height:70px;"></div>

                <div id="moments-feed" style="padding:0 0 100px;"></div>
            
            </div>
            <div id="tab-discover" class="tab-page" style="padding:0;">
                <div style="padding:15px; background:var(--ui-card-bg); position:sticky; top:0; z-index:10;">
                    <div style="display:flex; gap:8px; align-items:center; background:rgba(12, 5, 109, 0.5); padding:8px 12px; border-radius:20px; border:1px solid rgba(236, 79, 197, 0.25);">
                        <i data-lucide="search" style="width:16px; height:16px; color:#a89bbf;"></i>
                        <input type="text" id="discover-search" placeholder="搜角色 / 玩家昵称 / ID..." oninput="onDiscoverSearch()" style="flex:1; border:none; background:transparent !important; outline:none; color:var(--ui-text-main); font-size:0.9rem;">
                    </div>
                </div>
                <div id="discover-tag-bar" style="padding:10px 15px; display:flex; gap:8px; overflow-x:auto; white-space:nowrap;">
                    <div class="discover-tag-chip active" data-tag="all">推荐</div>
                    <div class="discover-tag-chip" data-tag="hot">热门</div>
                    <div class="discover-tag-chip" data-tag="new">最新</div>
                    <div class="discover-tag-chip" data-tag="现代">现代</div>
                    <div class="discover-tag-chip" data-tag="古代">古代</div>
                    <div class="discover-tag-chip" data-tag="校园">校园</div>
                    <div class="discover-tag-chip" data-tag="仙侠">仙侠</div>
                    <div class="discover-tag-chip" data-tag="悬疑">悬疑</div>
                </div>
                <div id="discover-search-users" style="display:none;"></div>
                <div id="discover-grid" style="padding:0 12px 100px; display:grid; grid-template-columns:1fr 1fr; gap:10px;"></div>
            </div>
            <div id="tab-me" class="tab-page">
                <div class="settings-card" style="margin-top:15px; padding:24px 28px; position:relative; overflow:hidden;">
                    <div style="display:flex; align-items:center; gap:14px; position:relative; z-index:1;">
                        <img id="my-avatar" onclick="document.getElementById('my-avatar-input').click()" onerror="this.onerror=null; this.src=defaultAvatarFor(document.getElementById('my-name')?.value || 'M');" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIwIiB5MT0iMCIgeDI9IjEiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNlYzRmYzUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM1OTBkODIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNnKSIvPjx0ZXh0IHg9IjUwIiB5PSI2OCIgZm9udC1zaXplPSI1OCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IkFyaWFsLHNhbnMtc2VyaWYiIGZvbnQtd2VpZ2h0PSI3MDAiIGZpbGw9IiNmZmYiPk08L3RleHQ+PC9zdmc+" style="width:72px; height:72px; border-radius:50%; border:2px solid #ec4fc5; cursor: pointer; box-shadow:0 0 16px rgba(236, 79, 197, 0.5), 0 4px 12px rgba(0,0,0,0.3); flex-shrink:0;">
                        <input type="file" id="my-avatar-input" hidden accept="image/*" onchange="uploadMyAvatar(this)">
                        <div style="flex:1; min-width:0; overflow:hidden;">
                            <div style="display:flex; align-items:center; gap:6px;">
                                                                <input type="text" id="my-name" value="MistUser" maxlength="12" placeholder="昵称" oninput="adjustNameWidth(this)" onfocus="adjustNameWidth(this)" onblur="autoSyncMyNickname(this)" style="width:auto; min-width:60px; max-width:200px; border:none; font-size:1.2rem; font-weight:bold; color:var(--ui-text-main); background:transparent; padding:0; outline:none; letter-spacing:0.5px;">
                                <span id="my-level-badge" style="padding:2px 8px; border-radius:10px; background:rgba(236, 79, 197, 0.18); color:#ec4fc5; font-size:0.68rem; flex-shrink:0; cursor:default;">Lv.0</span>
                                <span id="my-name-cooldown" title="冷却中" style="display:none; align-items:center; gap:3px; padding:2px 7px; border-radius:10px; background:rgba(168, 155, 191, 0.18); color:#a89bbf; font-size:0.62rem; flex-shrink:0; cursor:help;"><i data-lucide="lock" style="width:10px; height:10px;"></i><span class="cooldown-days">0天</span></span>
                            </div>
                            <div id="my-user-id" style="font-size:0.7rem; color:#a89bbf; margin-top:4px; font-family:monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">ID: 未登录</div>
                        </div>
                    </div>
                    <div style="position:relative; margin-top:14px; z-index:1;">
                        <textarea id="my-bio" placeholder="写一句简介介绍自己吧～" maxlength="50" oninput="updateBioCount(this)" onblur="autoSyncMyBio(this)" style="width:100%; padding:12px 15px 22px 15px; border:1px solid rgba(236, 79, 197, 0.2); background:rgba(12, 5, 109, 0.45); border-radius:10px; font-size:0.9rem; color:var(--ui-text-main); resize:none; height:90px; outline:none; box-sizing:border-box; font-family:inherit; letter-spacing:0.5px; line-height:1.5;"></textarea>
                        <div id="my-bio-count" style="position:absolute; bottom:6px; right:12px; font-size:0.65rem; color:#a89bbf; letter-spacing:0.3px; pointer-events:none;">0 / 50</div>
                        <div id="my-bio-cooldown" title="冷却中" style="display:none; align-items:center; gap:4px; position:absolute; bottom:6px; left:12px; font-size:0.62rem; color:#a89bbf; pointer-events:none;"><i data-lucide="lock" style="width:10px; height:10px;"></i><span class="cooldown-days">0天后可改</span></div>
                    </div>
                    <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:20px; position:relative; z-index:1;">
                        <div onclick="openMyFollowingPanel()" style="cursor:pointer; padding:12px 4px; background:rgba(236, 79, 197, 0.18); border-radius:10px; text-align:center;">
                            <div id="my-following-count" style="font-size:1rem; font-weight:bold; color:var(--ui-text-main);">0</div>
                            <div style="font-size:0.68rem; color:#a89bbf; margin-top:2px;">关注</div>
                        </div>
                        <div onclick="openMyFollowersPanel()" style="cursor:pointer; padding:12px 4px; background:rgba(236, 79, 197, 0.18); border-radius:10px; text-align:center;">
                            <div id="my-follower-count" style="font-size:1rem; font-weight:bold; color:var(--ui-text-main);">0</div>
                            <div style="font-size:0.68rem; color:#a89bbf; margin-top:2px;">粉丝</div>
                        </div>
                        <div style="padding:12px 4px; background:rgba(236, 79, 197, 0.18); border-radius:10px; text-align:center;">
                            <div id="my-agent-count" style="font-size:1rem; font-weight:bold; color:var(--ui-text-main);">0</div>
                            <div style="font-size:0.68rem; color:#a89bbf; margin-top:2px;">角色</div>
                        </div>
                        <div style="padding:12px 4px; background:rgba(236, 79, 197, 0.18); border-radius:10px; text-align:center;">
                            <div id="my-interaction-count" style="font-size:1rem; font-weight:bold; color:var(--ui-text-main);">0</div>
                            <div style="font-size:0.68rem; color:#a89bbf; margin-top:2px;">互动</div>
                        </div>
                    </div>
                </div>
<!-- 我的角色卡 -->
<div class="settings-card collapsible-card" data-card-id="mycards" style="margin-top:0; padding:0;">
    <div class="card-header collapsible-header" onclick="toggleCollapsibleCard('mycards')" style="display:flex;align-items:center;gap:6px; padding:16px 20px; cursor:pointer; margin-bottom:0; border-bottom:none;">
        <i data-lucide="layout-grid" style="width:16px;height:16px;"></i>
        <span style="flex:1;">我的角色卡</span>
        <span id="mycards-count" style="font-size:0.72rem; color:#a89bbf; margin-right:4px;">0</span>
        <i data-lucide="chevron-down" class="collapsible-arrow" style="width:18px;height:18px;transition:transform 0.3s;"></i>
    </div>
    <div class="collapsible-body" style="max-height:0; overflow:hidden; transition:max-height 0.35s ease;">
        <div style="padding:0 16px 16px;">
            <div id="mycards-scroll-box" style="max-height:340px; overflow-y:auto; background:rgba(12,5,109,0.4); border-radius:12px; padding:8px; border:1px solid rgba(236,79,197,0.15);">
                <div id="mycards-list"></div>
            </div>
            <div style="display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:10px;">
                <div style="flex:1; font-size:0.7rem; color:#a89bbf; line-height:1.6;">仅展示已公开发布的角色卡。右滑卡片可删除。删除为软删除：已玩过的老玩家仍可继续，新玩家将无法发现或开始。</div>
                <span id="mycards-quota-hint" style="flex-shrink:0; font-size:0.68rem; color:#ec4fc5; background:rgba(236,79,197,0.18); padding:3px 10px; border-radius:10px; display:none; white-space:nowrap;">本周还可发布 1 张</span>
            </div>
        </div>
    </div>
</div>

<!-- 我的收藏 -->
<div class="settings-card collapsible-card" data-card-id="myfavorites" style="margin-top:0; padding:0;">
    <div class="card-header collapsible-header" onclick="toggleCollapsibleCard('myfavorites')" style="display:flex;align-items:center;gap:6px; padding:16px 20px; cursor:pointer; margin-bottom:0; border-bottom:none;">
        <i data-lucide="star" style="width:16px;height:16px;"></i>
        <span style="flex:1;">我的收藏</span>
        <span id="myfavorites-count" style="font-size:0.72rem; color:#a89bbf; margin-right:4px;">0</span>
        <i data-lucide="chevron-down" class="collapsible-arrow" style="width:18px;height:18px;transition:transform 0.3s;"></i>
    </div>
    <div class="collapsible-body" style="max-height:0; overflow:hidden; transition:max-height 0.35s ease;">
        <div style="padding:0 16px 16px;">
            <div id="myfavorites-scroll-box" style="max-height:340px; overflow-y:auto; background:rgba(12,5,109,0.4); border-radius:12px; padding:8px; border:1px solid rgba(236,79,197,0.15);">
                <div id="myfavorites-list"></div>
            </div>
            <div style="font-size:0.7rem; color:#a89bbf; line-height:1.6; margin-top:10px;">在卡片详情页点⭐即可收藏。点击卡片查看详情。</div>
        </div>
    </div>
</div>

<!-- 互动设置 -->
<div class="settings-card collapsible-card" data-card-id="interaction" style="margin-top:0; padding:0;">
    <div class="card-header collapsible-header" onclick="toggleCollapsibleCard('interaction')" style="display:flex;align-items:center;gap:6px; padding:16px 20px; cursor:pointer; margin-bottom:0; border-bottom:none;">
        <i data-lucide="sliders-horizontal" style="width:16px;height:16px;"></i>
        <span style="flex:1;">互动设置</span>
        <i data-lucide="chevron-down" class="collapsible-arrow" style="width:18px;height:18px;transition:transform 0.3s;"></i>
    </div>
    <div class="collapsible-body" style="max-height:0; overflow:hidden; transition:max-height 0.35s ease;">
        <div style="padding:0 20px 20px;">
            <div style="font-size:0.78rem; font-weight:bold; color:#ec4fc5; margin:6px 0 10px;">谁可以看我的主页</div>
            <div id="profile-visibility-options" style="display:flex; flex-direction:column; gap:8px;">
                <div class="visib-opt" data-val="all" onclick="setProfileVisibility('all')">所有人</div>
                <div class="visib-opt" data-val="followers" onclick="setProfileVisibility('followers')">关注我的人</div>
                <div class="visib-opt" data-val="mutual" onclick="setProfileVisibility('mutual')">互相关注的人</div>
                <div class="visib-opt" data-val="none" onclick="setProfileVisibility('none')">禁止任何人查看</div>
            </div>
            <div style="font-size:0.78rem; font-weight:bold; color:#ec4fc5; margin:18px 0 10px;">黑名单</div>
            <div id="blacklist-scroll-box" style="max-height:300px; overflow-y:auto; background:rgba(12,5,109,0.4); border-radius:12px; padding:8px; border:1px solid rgba(236,79,197,0.15);">
                <div id="blacklist-list"></div>
            </div>
            <div style="font-size:0.7rem; color:#a89bbf; line-height:1.6; margin-top:10px;">被拉黑的人无法查看你的主页与角色卡。最多展示5项，更多可上下滑动。</div>
        </div>
    </div>
</div>
                <div class="settings-card collapsible-card" data-card-id="security" style="margin-top:0; padding:0;">
                    <div class="card-header collapsible-header" onclick="toggleCollapsibleCard('security')" style="display:flex;align-items:center;gap:6px; padding:16px 20px; cursor:pointer; margin-bottom:0; border-bottom:none;">
                        <i data-lucide="shield-check" style="width:16px;height:16px;"></i>
                        <span style="flex:1;">安全设置</span>
                        <i data-lucide="chevron-down" class="collapsible-arrow" style="width:18px;height:18px;transition:transform 0.3s;"></i>
                    </div>
                    <div class="collapsible-body" style="max-height:0; overflow:hidden; transition:max-height 0.35s ease;">
                        <div style="padding:0 20px 20px;">
                            <button id="pin-action-btn" onclick="changePin()" style="width:100%; padding:12px; background:rgba(89, 13, 130, 0.55); color:#ec4fc5; border:none; border-radius:10px; cursor:pointer; font-size:0.85rem; font-weight:bold; margin-bottom:10px;">设置/修改PIN码</button>
                            <button id="admin-entry-btn" onclick="openAdminPanel()" style="display:none; width:100%; padding:12px; background:linear-gradient(135deg,#7c3aed,#590d82); color:#fff; border:1px solid rgba(236,79,197,0.4); border-radius:10px; cursor:pointer; font-size:0.85rem; font-weight:bold; margin-bottom:10px; box-shadow:0 4px 12px rgba(124,58,237,0.35);"><span style="display:inline-flex; align-items:center; gap:6px; justify-content:center;"><i data-lucide="shield" style="width:14px;height:14px;"></i> 管理后台</span></button>
                            <button onclick="logout()" style="width:100%; padding:12px; background:rgba(239, 68, 68, 0.15); color:#ff8d8d; border:1px solid rgba(239, 68, 68, 0.3); border-radius:10px; cursor:pointer; font-size:0.85rem; font-weight:bold; margin-bottom:10px;">退出登录</button>
                            <button onclick="openDeactivateDialog()" style="width:100%; padding:12px; background:linear-gradient(135deg,#dc2626,#991b1b); color:#fff; border:none; border-radius:10px; cursor:pointer; font-size:0.85rem; font-weight:bold; margin-bottom:10px; box-shadow:0 4px 12px rgba(220,38,38,0.3);">注销账号</button>
                            <div style="font-size:0.72rem; color:#a89bbf; line-height:1.6;">PIN码用于加密您的API密钥。忘记PIN码会导致已保存的密钥被清除。注销账号有3天冷静期，期间重新登录可取消。</div>
                        </div>
                    </div>
                </div>
                <div class="settings-card collapsible-card" data-card-id="model" style="padding:0;">
                    <div class="card-header collapsible-header" onclick="toggleCollapsibleCard('model')" style="display:flex;align-items:center;gap:6px; padding:16px 20px; cursor:pointer; margin-bottom:0; border-bottom:none;">
                        <i data-lucide="cpu" style="width:16px;height:16px;"></i>
                        <span style="flex:1;">模型设置</span>
                        <i data-lucide="chevron-down" class="collapsible-arrow" style="width:18px;height:18px;transition:transform 0.3s;"></i>
                    </div>
                    <div class="collapsible-body" style="max-height:0; overflow:hidden; transition:max-height 0.35s ease;">
                        <div style="padding:0 20px 20px;">
                            <div class="field-row">
                                <label class="field-label">API 地址</label>
                                <input type="text" id="api-url" class="field-input" placeholder="例如: api.deepseek.com 或 https://api.openai.com/v1">
                            </div>
                            <div class="field-row">
                                <label class="field-label">API 密钥</label>
                                <div class="input-group">
                                    <input type="password" id="api-key" class="field-input" placeholder="sk-...">
                                    <button class="btn-mini" id="conn-btn" onclick="fetchModels()">连接测试</button>
                                </div>
                            </div>
                            <div class="field-row">
                                <label class="field-label">当前模型</label>
                                <div class="input-group">
                                    <input type="text" id="model-id" class="field-input" placeholder="选择或输入...">
                                </div>
                                <div class="model-list-pop" id="model-pop">
                                    <input type="text" placeholder="搜索模型..." style="width:100%; padding:8px; border:none; border-bottom:1px solid rgba(236, 79, 197, 0.18);" onkeyup="filterModels(this.value)">
                                    <div id="model-list-ul"></div>
                                </div>
                            </div>
                            <div class="field-row">
                                <label class="field-label">回复长度上限</label>
                                <div class="input-group">
                                    <input type="number" id="max-tokens" class="field-input" placeholder="默认 2048" min="256" max="8192" step="128">
                                </div>
                                <div style="font-size:0.68rem; color:#a89bbf; line-height:1.5; margin-top:6px;">控制单次回复的最大长度（token）。回复被截断时调大此值，例如 3072 或 4096。中文约 1 字 ≈ 1.5~2 token。</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="settings-card collapsible-card" data-card-id="voice" style="padding:0;">
                    <div class="card-header collapsible-header" onclick="toggleCollapsibleCard('voice')" style="display:flex;align-items:center;gap:6px; padding:16px 20px; cursor:pointer; margin-bottom:0; border-bottom:none;">
                        <i data-lucide="mic" style="width:16px;height:16px;"></i>
                        <span style="flex:1;">MiniMax 语音</span>
                        <i data-lucide="chevron-down" class="collapsible-arrow" style="width:18px;height:18px;transition:transform 0.3s;"></i>
                    </div>
                    <div class="collapsible-body" style="max-height:0; overflow:hidden; transition:max-height 0.35s ease;">
                        <div style="padding:0 20px 20px;">
                            <div class="field-row">
                                <label class="field-label">Group ID</label>
                                <input type="text" id="mm-group" class="field-input" placeholder="Group ID">
                            </div>
                            <div class="field-row">
                                <label class="field-label">API Key</label>
                                <input type="password" id="mm-key" class="field-input" placeholder="API Key">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="settings-card collapsible-card" data-card-id="storage" style="margin-top:0; padding:0;">
                    <div class="card-header collapsible-header" onclick="toggleCollapsibleCard('storage')" style="display:flex;align-items:center;gap:6px; padding:16px 20px; cursor:pointer; margin-bottom:0; border-bottom:none;">
                        <i data-lucide="hard-drive" style="width:16px;height:16px;"></i>
                        <span style="flex:1;">存储管理</span>
                        <i data-lucide="chevron-down" class="collapsible-arrow" style="width:18px;height:18px;transition:transform 0.3s;"></i>
                    </div>
                    <div class="collapsible-body" style="max-height:0; overflow:hidden; transition:max-height 0.35s ease;">
                        <div style="padding:0 20px 20px;">
                            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;">
                                <span style="font-size:0.9rem; color:#bfa9d6;">已使用空间</span>
                                <span id="storage-info" style="font-size:1rem; font-weight:bold; color:#f0e6fc;">计算中...</span>
                            </div>
                            <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px;">
                                <button onclick="exportLocalBackup()" style="padding:12px 8px; background:rgba(236, 79, 197, 0.2); color:#ec4fc5; border:none; border-radius:10px; cursor:pointer; font-size:0.85rem; font-weight:bold;">导出备份</button>
                                <button onclick="document.getElementById('backup-import-input').click()" style="padding:12px 8px; background:rgba(89, 13, 130, 0.55); color:#ec4fc5; border:none; border-radius:10px; cursor:pointer; font-size:0.85rem; font-weight:bold;">导入备份</button>
                                <input type="file" id="backup-import-input" hidden accept=".json,application/json" onchange="importLocalBackup(this)">
                            </div>
                            <button onclick="cleanOrphanData()" style="width:100%; padding:10px; background:#fff3e0; color:#e65100; border:none; border-radius:10px; cursor:pointer; font-size:0.85rem;">清理垃圾</button>
                            <div style="margin-top:12px; padding:10px; background:rgba(89, 13, 130, 0.5); border-radius:8px; font-size:0.75rem; color:#a89bbf; line-height:1.6;">所有聊天记录、美化方案、app数据均存储在您的本机，导出备份后换设备可一键恢复。</div>
                        </div>
                    </div>
                </div>
                <div class="settings-card collapsible-card" data-card-id="legal" style="margin-top:0; padding:0;">
                    <div class="card-header collapsible-header" onclick="toggleCollapsibleCard('legal')" style="display:flex;align-items:center;gap:6px; padding:16px 20px; cursor:pointer; margin-bottom:0; border-bottom:none;">
                        <i data-lucide="file-text" style="width:16px;height:16px;"></i>
                        <span style="flex:1;">协议与隐私</span>
                        <i data-lucide="chevron-down" class="collapsible-arrow" style="width:18px;height:18px;transition:transform 0.3s;"></i>
                    </div>
                    <div class="collapsible-body" style="max-height:0; overflow:hidden; transition:max-height 0.35s ease;">
                        <div style="padding:0 20px 20px;">
                            <div onclick="showTermsModal('agreement')" style="display:flex; align-items:center; gap:8px; padding:12px 14px; background:rgba(12,5,109,0.45); border-radius:10px; cursor:pointer; margin-bottom:8px;">
                                <i data-lucide="file-text" style="width:16px; height:16px; color:#ec4fc5;"></i>
                                <span style="flex:1; font-size:0.88rem; color:#f0e6fc;">用户协议</span>
                                <i data-lucide="chevron-right" style="width:16px; height:16px; color:#a89bbf;"></i>
                            </div>
                            <div onclick="showTermsModal('privacy')" style="display:flex; align-items:center; gap:8px; padding:12px 14px; background:rgba(12,5,109,0.45); border-radius:10px; cursor:pointer;">
                                <i data-lucide="shield" style="width:16px; height:16px; color:#ec4fc5;"></i>
                                <span style="flex:1; font-size:0.88rem; color:#f0e6fc;">隐私政策</span>
                                <i data-lucide="chevron-right" style="width:16px; height:16px; color:#a89bbf;"></i>
                            </div>
                            <div style="margin-top:12px; padding:10px; background:rgba(89, 13, 130, 0.5); border-radius:8px; font-size:0.72rem; color:#a89bbf; line-height:1.6;">
                                如有疑问、举报、申诉,请邮件联系:<br>
                                <span style="color:#ec4fc5;">3206999176@qq.com</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="normal-save-container">
                    <button class="btn-save" onclick="saveGlobalSettings()">保存设置</button>
                </div>
            </div>
        </div>

        <div class="bottom-nav">
            <div class="nav-item" id="nav-discover" onclick="switchTab('discover', this)"><i data-lucide="compass"></i><span>发现</span></div>
            <div class="nav-item active" id="nav-msg" onclick="switchTab('msg', this)"><i data-lucide="message-circle"></i><span>消息</span></div>
            <div class="nav-item" id="nav-moments" onclick="switchTab('moments', this)" style="position:relative;"><i data-lucide="aperture"></i><span>动态</span><span id="moments-nav-badge" style="position:absolute; top:2px; right:50%; transform:translateX(22px); min-width:14px; height:14px; padding:0 4px; background:#ff4444; color:white; font-size:0.55rem; border-radius:7px; display:none; align-items:center; justify-content:center; box-shadow:0 0 6px rgba(255,68,68,0.6); font-weight:bold;">0</span></div>
            <div class="nav-item" id="nav-me" onclick="switchTab('me', this)"><i data-lucide="user"></i><span>我</span></div>
        </div>
    </div>

    <!-- ===== 模块一：通知面板 ===== -->
    <div id="notification-panel" class="panel" style="position:fixed; top:0; left:0; width:100%; height:100%; background:var(--page-bg, #0c056d); z-index:500; display:none; flex-direction:column;">
        <div style="height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; background:rgba(6, 2, 54, 0.92); backdrop-filter:blur(10px); border-bottom:1px solid rgba(236, 79, 197, 0.25);">
            <div onclick="closeNotificationPanel()" style="cursor:pointer; color:#ec4fc5;"><i data-lucide="chevron-left"></i></div>
            <div style="font-weight:bold; color:#f0e6fc;">通知</div>
            <div onclick="markAllNotificationsRead()" style="cursor:pointer; font-size:0.85rem; color:#ec4fc5;">全部已读</div>
        </div>
        <div id="notif-filter-bar" style="display:flex; padding:10px 15px; gap:8px; overflow-x:auto;">
            <div class="notif-filter-tab active" data-filter="all">全部</div>
            <div class="notif-filter-tab" data-filter="like">点赞</div>
            <div class="notif-filter-tab" data-filter="comment">评论</div>
            <div class="notif-filter-tab" data-filter="follow">关注</div>
        </div>
        <div id="notification-list" style="flex:1; overflow-y:auto; padding:0 15px 20px;"></div>
    </div>

    <!-- ===== 模块三：卡片详情页 ===== -->
    <div id="card-detail-panel" class="panel" style="position:fixed; top:0; left:0; width:100%; height:100%; background:#000; z-index:600; display:none; flex-direction:column;">
                <div style="height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; position:absolute; top:0; left:0; right:0; z-index:10; background:linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);">
            <div onclick="closeCardDetail()" style="cursor:pointer; color:white;"><i data-lucide="chevron-left"></i></div>
            <div></div>
        </div>
        <div id="card-detail-content" style="flex:1; overflow-y:auto; padding-bottom:80px;"></div>
        <div style="position:absolute; bottom:0; left:0; right:0; padding:15px 20px; padding-bottom:calc(15px + env(safe-area-inset-bottom)); background:rgba(20,20,30,0.95); backdrop-filter:blur(10px); display:flex; gap:10px; align-items:center;">
            <div onclick="viewAuthorProfile()" style="display:flex; align-items:center; gap:8px; cursor:pointer;">
                <img id="card-author-avatar" src="" style="width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.3); object-fit:cover; background:#444;">
                <div>
                    <div id="card-author-name" style="color:white; font-size:0.78rem;">作者名</div>
                    <div style="color:rgba(255,255,255,0.6); font-size:0.65rem;">查看主页 &gt;</div>
                </div>
            </div>
            <button onclick="importAndStartChat()" style="flex:1; padding:12px; background:linear-gradient(135deg,#ec4fc5,#b61aae); color:white; border:none; border-radius:24px; font-weight:bold; font-size:0.95rem; cursor:pointer; margin-left:auto;">开始对话</button>
        </div>
    </div>

    <!-- ===== 模块五：别人主页 ===== -->
    <div id="user-profile-panel" class="panel" style="position:fixed; top:0; left:0; width:100%; height:100%; background:var(--page-bg); z-index:700; display:none; flex-direction:column;">
        <div style="height:50px; padding:0 15px; display:flex; justify-content:space-between; align-items:center; background:rgba(6, 2, 54, 0.92); border-bottom:1px solid rgba(236, 79, 197, 0.25);">
            <div onclick="closeUserProfile()" style="cursor:pointer; color:#ec4fc5;"><i data-lucide="chevron-left"></i></div>
            <div style="font-weight:bold; color:#f0e6fc;" id="profile-user-nickname">用户主页</div>
            <div style="width:24px;"></div>
        </div>
        <div style="flex:1; overflow-y:auto; padding:15px 15px 80px;">
            <div class="settings-card" style="padding:20px; margin-bottom:15px;">
                <div style="display:flex; align-items:center; gap:15px; margin-bottom:14px;">
                    <img id="profile-user-avatar" src="" style="width:72px; height:72px; border-radius:50%; object-fit:cover; background:rgba(89, 13, 130, 0.5);">
                    <div style="flex:1; min-width:0;">
                        <div style="display:flex; align-items:center; gap:8px; margin-bottom:6px;">
                            <span id="profile-name" style="font-size:1.1rem; font-weight:bold;"></span>
                            <span id="profile-gender" style="padding:2px 8px; border-radius:10px; font-size:0.7rem;"></span>
                            <span id="profile-level" style="padding:2px 8px; border-radius:10px; background:rgba(236, 79, 197, 0.18); color:#ec4fc5; font-size:0.7rem;">Lv.1</span>
                        </div>
                        <div id="profile-display-id" style="font-size:0.7rem; color:#a89bbf; margin-bottom:4px; font-family:monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"></div>
                        <div id="profile-bio" style="font-size:0.78rem; opacity:0.75;"></div>
                    </div>
                </div>
                <div style="display:flex; gap:8px; margin-bottom:14px;">
    <button id="profile-follow-btn" onclick="toggleFollow()" style="flex:1; padding:10px; background:linear-gradient(135deg,#ec4fc5,#b61aae); color:white; border:none; border-radius:20px; font-weight:bold; cursor:pointer;">+ 关注</button>
    <button id="profile-block-btn" onclick="toggleBlock()" style="flex:1; padding:10px; background:rgba(239,68,68,0.15); color:#ff8d8d; border:1px solid rgba(239,68,68,0.3); border-radius:20px; font-weight:bold; cursor:pointer;">拉黑</button>
</div>
                <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding-top:14px; border-top:1px solid rgba(236, 79, 197, 0.2);">
                    <div style="text-align:center;">
                        <div id="profile-following" style="font-weight:bold;">0</div>
                        <div style="font-size:0.68rem; color:#a89bbf;">关注</div>
                    </div>
                    <div style="text-align:center;">
                        <div id="profile-followers" style="font-weight:bold;">0</div>
                        <div style="font-size:0.68rem; color:#a89bbf;">粉丝</div>
                    </div>
                    <div style="text-align:center;">
                        <div id="profile-roles" style="font-weight:bold;">0</div>
                        <div style="font-size:0.68rem; color:#a89bbf;">角色</div>
                    </div>
                    <div style="text-align:center;">
                        <div id="profile-interactions" style="font-weight:bold;">0</div>
                        <div style="font-size:0.68rem; color:#a89bbf;">互动量</div>
                    </div>
                </div>
            </div>
            <div style="font-size:0.85rem; font-weight:bold; color:var(--ui-text-main); margin-bottom:10px; display:flex; align-items:center; gap:6px;"><i data-lucide="layout-grid" style="width:16px; height:16px;"></i>Ta的角色卡</div>
            <div id="profile-cards-grid" style="display:grid; grid-template-columns:1fr 1fr; gap:10px;"></div>
        </div>
    </div>

    <!-- ===== 模块四：发布编辑器（改造版） ===== -->
<div id="publish-editor-panel" class="panel" style="position:fixed; top:0; left:0; width:100%; height:100%; background:var(--page-bg); z-index:550; display:none; flex-direction:column;">
    <div style="height:50px; padding:0 15px; display:flex; justify-content:space-between; align-items:center; background:rgba(6, 2, 54, 0.92); border-bottom:1px solid rgba(236, 79, 197, 0.25); flex-shrink:0;">
        <div onclick="closePublishEditor()" style="color:#ff8d8d; cursor:pointer;">取消</div>
        <div style="font-weight:bold; color:#f0e6fc;">发布卡片</div>
        <div onclick="confirmPublish()" style="color:#ec4fc5; font-weight:bold; cursor:pointer;">发布</div>
    </div>

    <div style="flex:1; overflow-y:auto; padding:15px;">
        <div style="margin-bottom:16px;">
            <label style="display:block; font-size:0.82rem; font-weight:bold; color:#ec4fc5; margin-bottom:8px;">标签（选3-5个）</label>
            <div id="pub-tag-picker" style="display:flex; flex-wrap:wrap; gap:6px;"></div>
        </div>

                <div style="margin-bottom:12px;">
            <label style="display:block; font-size:0.82rem; font-weight:bold; color:#ec4fc5; margin-bottom:8px;">封面/背景图 URL</label>
            <input id="pub-bg-url-input" type="text" placeholder="粘贴图片 URL（推荐用 imgbb、路过图床等）"
                style="width:100%; box-sizing:border-box; padding:9px 12px; background:rgba(12,5,109,0.6); border:1px solid rgba(236,79,197,0.35); border-radius:10px; color:#f0e6fc; font-size:0.8rem; outline:none;"
                oninput="onPubImageUrlChange()">
            <label style="display:block; font-size:0.82rem; font-weight:bold; color:#ec4fc5; margin:10px 0 8px;">头像 URL</label>
            <input id="pub-avatar-url-input" type="text" placeholder="粘贴头像 URL（留空则自动用封面图）"
                style="width:100%; box-sizing:border-box; padding:9px 12px; background:rgba(12,5,109,0.6); border:1px solid rgba(236,79,197,0.35); border-radius:10px; color:#f0e6fc; font-size:0.8rem; outline:none;"
                oninput="onPubImageUrlChange()">
            <div style="font-size:0.68rem; color:#a89bbf; margin-top:6px; line-height:1.6;">图片请先上传到图床获得 URL，不支持直接上传文件</div>
        </div>

        <div style="margin-bottom:12px;">
            <label style="display:block; font-size:0.82rem; font-weight:bold; color:#ec4fc5; margin-bottom:8px;">选择模板风格</label>
            <div id="template-thumb-bar" class="template-thumb-bar"></div>
        </div>

        <!-- 高级美化（自定义 CSS）—— 默认折叠，给会写代码的玩家 -->
        <div id="advanced-css-card" class="settings-card collapsible-card" data-card-id="advcss" style="margin:0 0 12px 0; padding:0; background:rgba(12, 5, 109, 0.45); border:1px solid rgba(236, 79, 197, 0.25);">
            <div class="card-header collapsible-header" onclick="toggleAdvancedCssCard()" style="display:flex; align-items:center; gap:8px; padding:12px 14px; cursor:pointer; margin-bottom:0; border-bottom:none;">
                <i data-lucide="code-2" style="width:16px; height:16px; color:#ec4fc5;"></i>
                <span style="flex:1; font-size:0.82rem; font-weight:bold; color:#ec4fc5;">高级美化（自定义 CSS）</span>
                <span style="font-size:0.65rem; color:#a89bbf; margin-right:6px;">写卡高手专用</span>
                <i data-lucide="chevron-down" class="collapsible-arrow" style="width:18px; height:18px; transition:transform 0.3s;"></i>
            </div>
            <div class="collapsible-body" style="max-height:0; overflow:hidden; transition:max-height 0.35s ease;">
                <div style="padding:0 8px 14px;">
                    <div style="font-size:0.7rem; color:#a89bbf; line-height:1.6; margin-bottom:8px; display:flex; align-items:flex-start; gap:6px;">
                        <i data-lucide="info" style="width:13px; height:13px; flex-shrink:0; margin-top:2px; color:#a89bbf;"></i>
                        <span>在所选模板基础上叠加自定义 CSS。可用选择器：<code style="color:#ec4fc5;">body</code>、<code style="color:#ec4fc5;">.cover</code>、<code style="color:#ec4fc5;">.title</code>、<code style="color:#ec4fc5;">.desc</code> 等模板里已有的 class。改完点"应用到预览"实时查看效果。</span>
                    </div>
                    <div style="font-size:0.7rem; color:#a89bbf; line-height:1.6; margin-bottom:8px; display:flex; align-items:flex-start; gap:6px;">
    <i data-lucide="info" style="width:13px; height:13px; flex-shrink:0; margin-top:2px; color:#a89bbf;"></i>
    <span id="custom-css-hint">在所选模板基础上叠加自定义 CSS。可用选择器：<code style="color:#ec4fc5;">body</code>、<code style="color:#ec4fc5;">.cover</code>、<code style="color:#ec4fc5;">.title</code>、<code style="color:#ec4fc5;">.desc</code> 等模板里已有的 class。改完点"应用到预览"实时查看效果。</span>
</div>

<!-- 模式切换 -->
<div style="display:flex; gap:6px; margin-bottom:8px;">
    <button id="mode-btn-overlay" onclick="setCssMode('overlay')"
        style="flex:1; padding:5px; border-radius:6px; border:1px solid rgba(236,79,197,0.5); background:#ec4fc5; color:#fff; font-size:0.7rem; cursor:pointer;">
        叠加模式（CSS）
    </button>
    <button id="mode-btn-free" onclick="setCssMode('free')"
        style="flex:1; padding:5px; border-radius:6px; border:1px solid rgba(236,79,197,0.3); background:transparent; color:#a89bbf; font-size:0.7rem; cursor:pointer;">
        自由模式（完整 HTML）
    </button>
</div>

<div style="position:relative; width:100%; box-sizing:border-box;">
    <button onclick="expandCssEditor()" title="放大编辑" style="position:absolute; top:6px; right:6px; z-index:10; padding:3px 7px; background:rgba(236,79,197,0.25); border:1px solid rgba(236,79,197,0.4); border-radius:5px; color:#ec4fc5; font-size:0.7rem; cursor:pointer; line-height:1;">⛶</button>
    <textarea id="custom-css-input" ...原来所有属性不动...></textarea>
</div>
                    <div style="display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:8px;">
                        <span id="custom-css-count" style="font-size:0.68rem; color:#a89bbf;">0 / 12000</span>
                        <div style="display:flex; gap:6px;">
                            <button onclick="resetCustomCss()" style="padding:6px 12px; background:rgba(168, 155, 191, 0.18); color:#a89bbf; border:none; border-radius:6px; cursor:pointer; font-size:0.72rem; display:inline-flex; align-items:center; gap:4px;">
                                <i data-lucide="rotate-ccw" style="width:12px; height:12px;"></i>重置
                            </button>
                            <button onclick="applyCustomCssToPreview()" style="padding:6px 12px; background:#ec4fc5; color:#ffffff; border:none; border-radius:6px; cursor:pointer; font-size:0.72rem; font-weight:bold; display:inline-flex; align-items:center; gap:4px;">
                                <i data-lucide="play" style="width:12px; height:12px;"></i>应用到预览
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div style="margin-bottom:12px;">
            <label style="display:block; font-size:0.82rem; font-weight:bold; color:#ec4fc5; margin-bottom:8px;">预览(点击文字可直接编辑)</label>
            <iframe id="template-preview-frame" class="template-preview-frame"></iframe>
        </div>
    </div>
</div>

    <div id="agent-editor" class="panel">
        <div class="editor-nav">
            <div onclick="closeAgentEditor()" class="editor-back-btn" title="返回">
                <i data-lucide="chevron-left" style="width:24px; height:24px; color:#fff;"></i>
            </div>
        </div>
        <div class="visual-editor">
            <div class="bg-upload-zone" onclick="document.getElementById('edit-bg-in').click()">
                <div class="plus-icon" id="bg-plus"><i data-lucide="image-plus" color="white" size="32"></i></div>
                <img id="bg-preview-img" style="display:none;">
                <video id="bg-preview-video" muted loop style="display:none;"></video>
            </div>
            <div class="avatar-upload-zone" onclick="document.getElementById('edit-avatar-in').click()">
                <div class="avatar-plus" id="av-plus"><i data-lucide="camera" color="#ccc"></i></div>
                <img id="av-preview-img" style="display:none;">
            </div>
            <input type="file" id="edit-bg-in" hidden accept="image/*,video/*" onchange="handleFilePreview(this, 'bg')">
            <input type="file" id="edit-avatar-in" hidden accept="image/*" onchange="handleFilePreview(this, 'avatar')">
        </div>
        <div class="editor-form">
            <div class="form-section">
                <div class="input-group">
                    <input type="text" id="edit-name" class="edit-input" placeholder="智能体名字" style="flex:2;">
                    <select id="edit-gender" class="edit-input">
                        <option value="male">男</option>
                        <option value="female">女</option>
                    </select>
                </div>
            </div>
            <div class="form-section">
    <div class="section-label">音色 ID</div>
    <input type="text" id="edit-voice" class="edit-input" placeholder="输入 Voice ID">
    <div style="font-size:0.7rem; color:#a89bbf; line-height:1.6; margin-top:8px;">
        发布卡片前，请在 MiniMax 后台将该音色设为<b style="color:#ec4fc5;">公开</b>，否则其他玩家用自己的密钥将无法播放声音。
    </div>
</div>
            <div class="form-section">
                <div class="section-label">Ta的设定</div>
                <div class="textarea-wrapper">
                    <div class="expand-btn" onclick="openFullscreen('edit-persona')"><i data-lucide="scan" size="14"></i></div>
                    <textarea id="edit-persona" class="edit-area" placeholder="性格、经历、背景..." oninput="updateCount('persona', 3000)"></textarea>
                </div>
                <div class="char-limit"><span id="c-persona">0</span>/3000</div>
            </div>
            <div class="form-section">
                <div class="section-label">世界观补充</div>
                <div class="textarea-wrapper">
                    <div class="expand-btn" onclick="openFullscreen('edit-worldview')"><i data-lucide="scan" size="14"></i></div>
                    <textarea id="edit-worldview" class="edit-area" placeholder="世界观、设定背景、势力关系、规则等（1000字以内）..." oninput="updateCount('worldview', 1000)"></textarea>
                </div>
                <div class="char-limit"><span id="c-worldview">0</span>/1000</div>
            </div>
            <div class="form-section">
                <div class="section-label">对话风格</div>
                <select id="edit-style-mode" class="edit-input" style="margin-bottom:10px;">
                    <option value="bracket">模式1：(动作描写) + 对话</option>
                    <option value="chat">模式2：纯聊天模式（无括号）</option>
                    <option value="novel">模式3：小说叙述模式</option>
                </select>
                <div class="textarea-wrapper">
                    <div class="expand-btn" onclick="openFullscreen('edit-style')"><i data-lucide="scan" size="14"></i></div>
                    <textarea id="edit-style" class="edit-area" placeholder="风格微调（1000字以内）..." oninput="updateCount('style', 1000)"></textarea>
                </div>
                <div class="char-limit"><span id="c-style">0</span>/1000</div>
                <label style="display:flex; align-items:center; gap:8px; margin-top:8px; cursor:pointer; user-select:none; padding:8px 4px;">
                    <input type="checkbox" id="edit-deai" style="width:18px; height:18px; accent-color:#ec4fc5; flex-shrink:0;">
                    <span style="font-size:0.82rem; color:#f0e6fc;">开启「去AI味」强化 v3（推荐）</span>
                </label>
                <div style="font-size:0.68rem; color:#a89bbf; line-height:1.5; padding:0 4px 2px;">v3 针对各家模型Ai强逐一调整。可与上面的自定义指令叠加。</div>
            </div>
            <div class="form-section">
                <div class="section-label">联动人物</div>
                <div class="textarea-wrapper">
                    <div class="expand-btn" onclick="openFullscreen('edit-relation')"><i data-lucide="scan" size="14"></i></div>
                    <textarea id="edit-relation" class="edit-area" placeholder="相关人物关系..." oninput="updateCount('relation', 2000)"></textarea>
                </div>
                <div class="char-limit"><span id="c-relation">0</span>/2000</div>
            </div>
            <div class="form-section">
                <div class="section-label">开场情景</div>
                <div class="textarea-wrapper">
                    <div class="expand-btn" onclick="openFullscreen('edit-scene')"><i data-lucide="scan" size="14"></i></div>
                    <textarea id="edit-scene" class="edit-area" placeholder="故事开始时的场景描写、时间地点氛围..." oninput="updateCount('scene', 1500)"></textarea>
                </div>
                <div class="char-limit"><span id="c-scene">0</span>/1500</div>
            </div>
            <div class="form-section">
                <div class="section-label">第一句话</div>
                <div class="textarea-wrapper">
                    <div class="expand-btn" onclick="openFullscreen('edit-opening')"><i data-lucide="scan" size="14"></i></div>
                    <textarea id="edit-opening" class="edit-area" placeholder="Ta对你说的第一句话..." oninput="updateCount('opening', 500)"></textarea>
                </div>
                <div class="char-limit"><span id="c-opening">0</span>/500</div>
            </div>
            <div style="padding:20px; display:flex; gap:10px;">
                                <button onclick="saveAgent()" style="flex:1; padding:12px; background:rgba(89, 13, 130, 0.7); color:#f0e6fc; border:1px solid rgba(236, 79, 197, 0.4); border-radius:24px; cursor:pointer; font-weight:bold;">仅保存到本地</button>
                <button onclick="saveAndPublish()" style="flex:1; padding:12px; background:linear-gradient(135deg,#ec4fc5,#b61aae); color:white; border:none; border-radius:24px; cursor:pointer;">保存并发布到广场</button>
            </div>
        </div>
    </div>

    <div id="fullscreen-editor" class="panel">
        <div class="fs-header">
            <div class="fs-done" onclick="closeFullscreen()">完成</div>
        </div>
        <textarea id="fs-input-area" class="fs-input" placeholder="在此输入..."></textarea>
    </div>

    <div id="chat-room" class="panel">
        <div class="chat-bg-layer" id="chat-bg-container"></div>
        <div class="chat-overlay"></div>
        <div class="chat-header-trans">
            <div class="chat-back-btn" onclick="closeChat()" style="padding:10px; width:44px; height:44px;"><i data-lucide="chevron-left" color="white"></i></div>
            <div id="chat-title">Chat</div>
            <div id="chat-edit-btn" onclick="editCurrentAgent()" style="padding:10px; width:44px; height:44px;"><i data-lucide="edit-3" color="white" size="18"></i></div>
        </div>
        <div class="chat-main" id="chat-box"></div>

        <div id="more-panel" class="panel">
            <div class="more-header">更多功能<div class="more-close" onclick="closePanel('more-panel')"><i data-lucide="x"></i></div></div>
                        <div class="more-tabs">
                <div class="more-tab active" onclick="jumpMoreTab('sticker')"><i data-lucide="image-plus"></i>表情包</div>
<div class="more-tab" onclick="jumpMoreTab('event')"><i data-lucide="book"></i>事件</div>
                <div class="more-tab" onclick="jumpMoreTab('user')"><i data-lucide="user-cog"></i>自设</div>
                <div class="more-tab" onclick="jumpMoreTab('slot')"><i data-lucide="save"></i>存档</div>
                <div class="more-tab" onclick="jumpMoreTab('style')"><i data-lucide="message-circle"></i>对话</div>
            </div>
             <div id="mp-sticker" class="more-content active">
    <div style="padding:12px;">
                <div style="font-size:0.8rem;color:#c084fc;font-weight:bold;margin-bottom:10px;">表情包管理（最多50个）</div>
        <div id="sticker-grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;"></div>
    </div>
</div>
<div id="mp-event" class="more-content">
                <div class="more-inner-pad">
                    <div class="inner-card">
                        <div class="textarea-wrapper">
                            <div class="expand-btn" onclick="openFullscreen('event-book')"><i data-lucide="scan" size="14"></i></div>
                            <textarea id="event-book" class="edit-area" style="height:200px;" placeholder="AI自动总结记忆区域..." oninput="updateMemoryData(this.value)"></textarea>
                        </div>
                        <div class="char-limit"><span id="c-event">0</span>/8000</div>
                        <p style="font-size:0.75rem; color:#a89bbf; margin-top:5px;">* AI会自动总结，超限将遗忘最旧记忆。</p>
                    </div>
                </div>
            </div>
            <div id="mp-user" class="more-content">
                <div class="more-inner-pad">
                    <div class="inner-card">
                        <div class="textarea-wrapper">
                            <div class="expand-btn" onclick="openFullscreen('user-persona')"><i data-lucide="scan" size="14"></i></div>
                            <textarea id="user-persona" class="edit-area" style="height:200px;" placeholder="在此设定您在这个故事中扮演的角色（请明确写出您的性别）..." oninput="onUserPersonaInput(this.value)"></textarea>
                        </div>
                        <div class="char-limit"><span id="c-userp">0</span>/2000</div>
                        <div style="margin-top:12px; display:flex; gap:10px; align-items:center;">
                            <button onclick="saveUserPersona()" style="flex:1; background:linear-gradient(135deg,#ec4fc5,#590d82); color:#fff; border:none; padding:10px 16px; border-radius:8px; font-size:0.9rem; cursor:pointer; font-weight:600;">保存自设</button>
                            <span id="user-persona-dirty" style="font-size:0.75rem; color:#ff9800; display:none;">● 有未保存改动</span>
                        </div>
                        <div style="margin-top:8px; font-size:0.7rem; color:#888; line-height:1.5;">提示：必须点"保存"才会生效。本社区面向言情爱好者，禁腐禁百，保存时系统会自动检测；切换存档/关闭面板时若有未保存改动会丢弃。</div>
                    </div>
                </div>
            </div>
            <div id="mp-slot" class="more-content">
                <div class="more-inner-pad">
                    <p style="text-align:center; color:#7f8c8d; font-size:0.9rem; margin-bottom:15px;">切换存档将重置当前聊天视图</p>
                    <div class="slot-container">
                        <div class="save-slot active" id="slot-0" onclick="switchSlot(0)"><i data-lucide="folder" size="24"></i><small>存档 1</small><div class="slot-badge"></div><button onclick="event.stopPropagation(); deleteSlot(0)" style="position:absolute; right:10px; background:#ff4d4d; color:white; border:none; padding:5px 10px; border-radius:5px; font-size:0.7rem;">清空</button></div>
                        <div class="save-slot" id="slot-1" onclick="switchSlot(1)"><i data-lucide="folder" size="24"></i><small>存档 2</small><div class="slot-badge"></div><button onclick="event.stopPropagation(); deleteSlot(1)" style="position:absolute; right:10px; background:#ff4d4d; color:white; border:none; padding:5px 10px; border-radius:5px; font-size:0.7rem;">清空</button></div>
                        <div class="save-slot" id="slot-2" onclick="switchSlot(2)"><i data-lucide="folder" size="24"></i><small>存档 3</small><div class="slot-badge"></div><button onclick="event.stopPropagation(); deleteSlot(2)" style="position:absolute; right:10px; background:#ff4d4d; color:white; border:none; padding:5px 10px; border-radius:5px; font-size:0.7rem;">清空</button></div>
                    </div>
                </div>
                    </div>
            <div id="mp-style" class="more-content">
                <div class="more-inner-pad">
                    <div class="inner-card">
                        <div style="font-size:0.85rem; color:#a89bbf; margin-bottom:14px; line-height:1.5;">选择你偏好的对话风格，会覆盖作者的预设。</div>
                        <div style="display:flex; flex-direction:column; gap:12px;">
                            <div onclick="setPlayerStyleMode('bracket')" id="player-style-bracket" style="display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:rgba(236,79,197,0.08); border:1px solid rgba(236,79,197,0.2); cursor:pointer;">
                                <span id="player-style-radio-bracket" style="width:18px; height:18px; border-radius:50%; border:2px solid #ec4fc5; flex-shrink:0; display:flex; align-items:center; justify-content:center;"></span>
                                <div>
                                    <div style="font-size:0.88rem; color:#f0e6fc; font-weight:600;">模式1：(动作描写) + 对话</div>
                                    <div style="font-size:0.75rem; color:#a89bbf; margin-top:2px;">角色用括号描述动作和神态</div>
                                </div>
                            </div>
                            <div onclick="setPlayerStyleMode('chat')" id="player-style-chat" style="display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:rgba(236,79,197,0.08); border:1px solid rgba(236,79,197,0.2); cursor:pointer;">
                                <span id="player-style-radio-chat" style="width:18px; height:18px; border-radius:50%; border:2px solid #ec4fc5; flex-shrink:0; display:flex; align-items:center; justify-content:center;"></span>
                                <div>
                                    <div style="font-size:0.88rem; color:#f0e6fc; font-weight:600;">模式2：纯聊天（无括号）</div>
                                    <div style="font-size:0.75rem; color:#a89bbf; margin-top:2px;">像真实聊天一样，不用动作描写</div>
                                </div>
                            </div>
                            <div onclick="setPlayerStyleMode('novel')" id="player-style-novel" style="display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:rgba(236,79,197,0.08); border:1px solid rgba(236,79,197,0.2); cursor:pointer;">
                                <span id="player-style-radio-novel" style="width:18px; height:18px; border-radius:50%; border:2px solid #ec4fc5; flex-shrink:0; display:flex; align-items:center; justify-content:center;"></span>
                                <div>
                                    <div style="font-size:0.88rem; color:#f0e6fc; font-weight:600;">模式3：小说叙述</div>
                                    <div style="font-size:0.75rem; color:#a89bbf; margin-top:2px;">第三人称小说风格描写</div>
                                </div>
                            </div>
                            <div onclick="setPlayerStyleMode('')" id="player-style-none" style="display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; background:rgba(236,79,197,0.08); border:1px solid rgba(236,79,197,0.2); cursor:pointer;">
                                <span id="player-style-radio-none" style="width:18px; height:18px; border-radius:50%; border:2px solid #ec4fc5; flex-shrink:0; display:flex; align-items:center; justify-content:center;"></span>
                                <div>
                                    <div style="font-size:0.88rem; color:#f0e6fc; font-weight:600;">跟随作者预设</div>
                                    <div style="font-size:0.75rem; color:#a89bbf; margin-top:2px;">不覆盖，使用角色卡原始设定</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="chat-footer">
            <div class="icon-btn" onclick="updateAppBadges(); openPanel('phone-drawer'); refreshHomeWidgets();" style="margin-right: 5px;"><i data-lucide="smartphone"></i></div>
            <input type="text" id="msg-in" placeholder="发送消息..." onkeypress="if(event.keyCode===13) sendMsg()">
            <div class="icon-btn send-btn" onclick="sendMsg()"><i data-lucide="send-horizontal"></i></div>
            <div class="icon-btn" onclick="openPanel('more-panel')"><i data-lucide="layout-grid"></i></div>
        </div>
    </div>

    <div id="phone-drawer" class="panel" onclick="closePanel('phone-drawer')">
        <div class="phone-container" onclick="event.stopPropagation()">
            <div style="height:32px; display:flex; align-items:center; justify-content:space-between; padding:10px 16px 4px; flex-shrink:0; position:relative; z-index:50;">
                <span id="phone-time" style="font-size:0.75rem; color:white; font-weight:bold;">12:00</span>
                <div style="background:#000; border-radius:13px; padding:5px 18px; display:flex; align-items:center; gap:6px;">
                    <span id="island-kaomoji" style="font-size:0.89rem; letter-spacing:1px; color:white;">(｡♥‿♥｡)</span>
                </div>
                <div style="display:flex; gap:4px; align-items:center;">
                    <i data-lucide="signal" style="width:12px;height:12px;color:white;"></i>
                    <i data-lucide="wifi" style="width:12px;height:12px;color:white;"></i>
                    <i data-lucide="battery" style="width:12px;height:12px;color:white;"></i>
                </div>
            </div>
            <div style="flex:1; position:relative; overflow:hidden; min-height:0; height:100%; display:flex; flex-direction:column;">
                <div style="padding:15px 18px; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:62px; gap:14px 12px; position:relative; z-index:10; flex-shrink:0;">
                    <!-- 行1-2 左：相册组件(2x2) -->
                    <div onclick="openPhotoWidgetPicker()" style="grid-column:span 2; grid-row:span 2; border-radius:18px; overflow:hidden; position:relative; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.25); background:rgba(255,255,255,0.18); backdrop-filter:blur(4px);">
                        <img id="photo-widget-img" src="" style="width:100%; height:100%; object-fit:cover; display:none;">
                        <div id="photo-widget-empty" style="width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:white; text-shadow:0 1px 3px rgba(0,0,0,0.6);">
                            <i data-lucide="image-plus" style="width:30px;height:30px;color:white;"></i>
                            <span style="font-size:0.62rem;">点击添加照片</span>
                        </div>
                    </div>
                    <!-- 行1-2 右：推特/谷歌/淘宝/微博 -->
                    <div onclick="openPhoneApp('twitter')" style="display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;">
                        <div style="width:52px; height:52px; flex-shrink:0; aspect-ratio:1/1; background:#000; border-radius:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.1);"><svg width="26" height="26" viewBox="0 0 24 24" fill="white"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.258 5.63L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z"/></svg></div>
                        <span style="font-size:0.6rem; color:white; text-shadow:0 1px 3px rgba(0,0,0,0.8);">X</span>
                    </div>
                    <div onclick="openPhoneApp('google')" style="display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;">
                        <div style="width:52px; height:52px; flex-shrink:0; aspect-ratio:1/1; background:#ffffff; border-radius:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.2);"><svg width="28" height="28" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg></div>
                        <span style="font-size:0.6rem; color:white; text-shadow:0 1px 3px rgba(0,0,0,0.8);">Google</span>
                    </div>
                    <div onclick="openPhoneApp('taobao')" style="display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; position:relative;">
                        <div style="width:52px; height:52px; flex-shrink:0; aspect-ratio:1/1; background:linear-gradient(135deg,#ff5000,#ff8000); border-radius:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(255,80,0,0.4);"><i data-lucide="shopping-bag" style="width:28px;height:28px;color:white;"></i></div>
                        <span id="tb-badge" style="position:absolute;top:0;right:6px;background:#ff4444;color:white;font-size:0.55rem;padding:1px 5px;border-radius:8px;display:none;min-width:16px;text-align:center;">0</span>
                        <span style="font-size:0.6rem; color:white; text-shadow:0 1px 3px rgba(0,0,0,0.8);">淘宝</span>
                    </div>
                    <div onclick="openPhoneApp('weibo')" style="display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;">
                        <div style="width:52px; height:52px; flex-shrink:0; aspect-ratio:1/1; background:linear-gradient(135deg,#ff8200,#e6550d); border-radius:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(255,130,0,0.4);"><i data-lucide="rss" style="width:28px;height:28px;color:white;"></i></div>
                        <span style="font-size:0.6rem; color:white; text-shadow:0 1px 3px rgba(0,0,0,0.8);">微博</span>
                    </div>

                    <!-- 行3-4 左：微信/备忘录/相册/阅读 -->
                    <div onclick="openPhoneApp('wechat')" style="display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;">
                        <div style="width:52px; height:52px; flex-shrink:0; aspect-ratio:1/1; background:linear-gradient(135deg,#07c160,#1db954); border-radius:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(7,193,96,0.4);"><i data-lucide="message-circle" style="width:28px;height:28px;color:white;"></i></div>
                        <span style="font-size:0.6rem; color:white; text-shadow:0 1px 3px rgba(0,0,0,0.8);">微信</span>
                    </div>
                    <div onclick="openPhoneApp('notes')" style="display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;">
                        <div style="width:52px; height:52px; flex-shrink:0; aspect-ratio:1/1; background:linear-gradient(135deg,#ffd60a,#ff9f0a); border-radius:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(255,214,10,0.4);"><i data-lucide="file-text" style="width:28px;height:28px;color:white;"></i></div>
                        <span style="font-size:0.6rem; color:white; text-shadow:0 1px 3px rgba(0,0,0,0.8);">备忘录</span>
                    </div>
                    <!-- 行3-4 右：纪念日组件(2x2) -->
                    <div onclick="openAnnivWidgetEditor()" style="grid-column:span 2; grid-row:span 2; border-radius:18px; overflow:hidden; position:relative; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,0.25); background:linear-gradient(135deg,rgba(236,79,197,0.55),rgba(124,58,237,0.55)); backdrop-filter:blur(4px); padding:14px; display:flex; flex-direction:column; justify-content:center;">
                        <div id="anniv-widget-content" style="width:100%;">
                            <div id="anniv-widget-empty" style="display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:white; text-shadow:0 1px 3px rgba(0,0,0,0.4);">
                                <i data-lucide="heart" style="width:28px;height:28px;color:white;"></i>
                                <span style="font-size:0.66rem;">暂无纪念日</span>
                                <span style="font-size:0.56rem; opacity:0.85;">点击设置</span>
                            </div>
                        </div>
                    </div>
                    <div onclick="openPhoneApp('photos')" style="display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;">
                        <div style="width:52px; height:52px; flex-shrink:0; aspect-ratio:1/1; background:linear-gradient(135deg,#5ac8fa,#007aff); border-radius:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(90,200,250,0.4);"><i data-lucide="image" style="width:28px;height:28px;color:white;"></i></div>
                        <span style="font-size:0.6rem; color:white; text-shadow:0 1px 3px rgba(0,0,0,0.8);">相册</span>
                    </div>
                    <div onclick="openPhoneApp('coread')" style="display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;">
                        <div style="width:52px; height:52px; flex-shrink:0; aspect-ratio:1/1; background:linear-gradient(135deg,#2d6a4f,#52b788); border-radius:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(45,106,79,0.4);"><i data-lucide="book-open" style="width:28px;height:28px;color:white;"></i></div>
                        <span style="font-size:0.6rem; color:white; text-shadow:0 1px 3px rgba(0,0,0,0.8);">阅读</span>
                    </div>
                </div>

                <!-- 底部 dock：设置/回响/档案 居中 + iOS 毛玻璃托盘（贴底） -->
                <div style="margin-top:auto; display:flex; justify-content:center; padding:0 0 14px; position:relative; z-index:10;">
                    <div style="display:flex; gap:18px; padding:12px 20px; border-radius:26px; background:rgba(255,255,255,0.18); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border:1px solid rgba(255,255,255,0.25); box-shadow:0 8px 28px rgba(0,0,0,0.22);">
                        <div onclick="openPhoneApp('settings')" style="display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;">
                            <div style="width:52px; height:52px; flex-shrink:0; aspect-ratio:1/1; background:linear-gradient(135deg,#8e8e93,#636366); border-radius:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(142,142,147,0.4);"><i data-lucide="settings" style="width:28px;height:28px;color:white;"></i></div>
                            <span style="font-size:0.6rem; color:white; text-shadow:0 1px 3px rgba(0,0,0,0.8);">设置</span>
                        </div>
                        <div onclick="openPhoneApp('echo')" style="display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;">
                            <div style="width:52px; height:52px; flex-shrink:0; aspect-ratio:1/1; background:linear-gradient(135deg,#ec4fc5,#b61aae); border-radius:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(102,126,234,0.4);"><i data-lucide="library" style="width:28px;height:28px;color:white;"></i></div>
                            <span style="font-size:0.6rem; color:white; text-shadow:0 1px 3px rgba(0,0,0,0.8);">回响</span>
                        </div>
                        <div onclick="openPhoneApp('archive')" style="display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; position:relative;">
                            <div style="width:52px; height:52px; flex-shrink:0; aspect-ratio:1/1; background:linear-gradient(135deg,#7c3aed,#4c1d95); border-radius:14px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(124,58,237,0.45);"><i data-lucide="folder-lock" style="width:28px;height:28px;color:white;"></i></div>
                            <span id="archive-badge" style="position:absolute;top:0;right:6px;background:#ff4444;color:white;font-size:0.55rem;padding:1px 5px;border-radius:8px;display:none;min-width:16px;text-align:center;">0</span>
                            <span style="font-size:0.6rem; color:white; text-shadow:0 1px 3px rgba(0,0,0,0.8);">档案</span>
                        </div>
                    </div>
                </div>
                <!-- 相册组件选图用隐藏input -->
                <input type="file" id="photo-widget-input" hidden accept="image/*" onchange="handlePhotoWidgetUpload(this)">
                <!-- 纪念日设置弹窗 -->
                <div id="anniv-editor-modal" style="position:absolute; inset:0; background:rgba(0,0,0,0.55); z-index:3000; display:none; align-items:center; justify-content:center; padding:24px;">
                    <div onclick="event.stopPropagation()" style="background:#1a0432; border-radius:18px; width:100%; max-width:300px; padding:20px; border:1px solid rgba(236,79,197,0.3); box-shadow:0 20px 60px rgba(0,0,0,0.5);">
                        <div style="font-weight:bold; color:#f0e6fc; font-size:0.95rem; margin-bottom:14px; display:flex; align-items:center; gap:6px;"><i data-lucide="heart" style="width:16px;height:16px;color:#ec4fc5;"></i><span>设置纪念日</span></div>
                        <label style="display:block; font-size:0.72rem; color:#bfa9d6; margin-bottom:4px;">名称</label>
                        <input type="text" id="anniv-name-input" placeholder="例如：在一起" maxlength="12" style="width:100%; padding:9px 10px; border-radius:8px; border:1px solid rgba(236,79,197,0.3); background:rgba(89,13,130,0.4); color:#f0e6fc; font-size:0.85rem; box-sizing:border-box; outline:none; margin-bottom:12px;">
                        <label style="display:block; font-size:0.72rem; color:#bfa9d6; margin-bottom:4px;">日期</label>
                        <input type="date" id="anniv-date-input" style="width:100%; padding:9px 10px; border-radius:8px; border:1px solid rgba(236,79,197,0.3); background:rgba(89,13,130,0.4); color:#f0e6fc; font-size:0.85rem; box-sizing:border-box; outline:none; margin-bottom:16px;">
                        <div style="display:flex; gap:8px;">
                            <button onclick="clearAnnivWidget()" style="flex:1; padding:9px; background:rgba(89,13,130,0.5); color:#bfa9d6; border:none; border-radius:8px; cursor:pointer; font-size:0.8rem;">清除</button>
                            <button onclick="saveAnnivWidget()" style="flex:2; padding:9px; background:linear-gradient(135deg,#ec4fc5,#b61aae); color:white; border:none; border-radius:8px; cursor:pointer; font-size:0.85rem; font-weight:bold;">保存</button>
                        </div>
                    </div>
                </div>

                <div id="mp-summon" class="phone-app-page" style="background:#ededed; flex-direction:column;">
                    <div style="background:#ededed; padding:12px 15px; display:flex; justify-content:center; align-items:center; border-bottom:1px solid #ddd; position:relative; text-align:center;">
                        <div style="font-size:0.85rem; font-weight:bold; color:#222222;"><span id="wechat-group-name" onclick="changeWeChatGroupName()">联动角色群聊</span>（<span id="wechat-member-count">1</span>人）</div>
                    </div>
                    <div id="wechat-chat-area" style="flex:1; overflow-y:auto; padding:15px; display:flex; flex-direction:column; gap:10px; background:#ededed;"><div style="opacity:0.5; text-align:center; padding:40px 0; color:#888888;">群里还没有消息...</div></div>
                    <div style="background:rgba(89, 13, 130, 0.4); padding:10px; border-top:1px solid #ddd; display:flex; gap:8px; align-items:center; flex-shrink:0;">
                        <input type="text" id="wechat-user-input" placeholder="发送消息..." style="flex:1; padding:8px 12px; border-radius:20px; border:1px solid rgba(236, 79, 197, 0.25); font-size:0.85rem; background:rgba(89, 13, 130, 0.55); color:#f0e6fc;">
                        <div onclick="sendWeChatUserMsg()" style="width:36px; height:36px; background:#07c160; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;"><i data-lucide="send" style="width:16px; height:16px; color:white;"></i></div>
                    </div>
                </div>

                <div id="mp-tweet" class="phone-app-page" style="background:#000; color:#fff; flex-direction:column;">
                    <div style="flex:1; overflow-y:auto; padding-bottom:60px;">
                        <div onclick="triggerTwitterImgUpload('banner')" style="height:80px; background:linear-gradient(135deg,#ec4fc5,#0d47a1); position:relative; flex-shrink:0; cursor:pointer;" id="tw-banner-zone"></div>
                        <div style="padding:0 16px 12px; position:relative; border-bottom:1px solid #2f3336;">
                            <div style="display:flex; justify-content:space-between; align-items:flex-end; margin-top:-30px; margin-bottom:10px;">
                                <div onclick="triggerTwitterImgUpload('avatar')" style="width:60px; height:60px; border-radius:50%; border:3px solid #000; overflow:hidden; background:#333; cursor:pointer;"><img id="tw-avatar" src="" style="width:100%; height:100%; object-fit:cover;"></div>
                                <button style="padding:6px 14px; border:1px solid #536471; border-radius:20px; background:transparent; color:#fff; font-size:0.8rem; cursor:pointer;">关注</button>
                            </div>
                            <div style="font-weight:bold; font-size:1rem; color:#fff;" id="tw-name">名字</div>
                            <div style="color:#536471; font-size:0.8rem;" id="tw-handle">@handle</div>
                            <div style="font-size:0.85rem; margin:8px 0; line-height:1.4; color:#e7e9ea;" id="tw-bio">简介加载中...</div>
                            <div style="display:flex; gap:16px; font-size:0.72rem; color:#536471;"><span><i data-lucide="map-pin" style="width:12px;height:12px;"></i> 加载中</span><span><i data-lucide="calendar" style="width:12px;height:12px;"></i> 2023年加入</span></div>
                        </div>
                        <div id="tweet-list-render"></div>
                    </div>
                </div>

                <div id="mp-google" class="phone-app-page" style="background:#ffffff; flex-direction:column;">
                    <div style="flex:1; overflow-y:auto; padding-bottom:60px;">
                        <div class="google-header" style="padding:16px; border-bottom:1px solid #e8eaed;">
                            <div class="fake-search-bar"><i data-lucide="search" style="width:16px;height:16px;color:#9aa0a6;flex-shrink:0;"></i><input type="text" placeholder="搜索..." style="background:transparent; border:none; outline:none; flex:1; color:#202124; font-size:0.9rem;"><i data-lucide="mic" style="width:16px;height:16px;color:#4285f4;flex-shrink:0;"></i></div>
                        </div>
                        <div style="padding:12px 20px; display:flex; justify-content:space-between; align-items:center; color:#5f6368; font-size:0.75rem; font-weight:500; letter-spacing:0.5px; text-transform:uppercase;"><span>最近搜索</span><span style="color:#4285f4; cursor:pointer;">全部清除</span></div>
                        <div id="browser-list-render"><div style="padding:40px; text-align:center; color:#5f6368; font-size:0.9rem;">暂无搜索记录</div></div>
                    </div>
                </div>

                <div id="mp-taobao" class="phone-app-page" style="background:#f4f4f4; flex-direction:column;">
                    <div style="flex:1; overflow-y:auto; padding:15px; padding-bottom:80px;">
                        <div class="taobao-header"><div style="display:flex; align-items:center; gap:8px;"><span style="font-size:1.1rem; font-weight:bold; color:#ff5000;">淘宝</span></div><div style="font-size:0.75rem; color:#888888; margin-top:4px;">Ta的购物车</div></div>
                        <div id="tb-list-render"><div style="padding:40px; text-align:center; color:#888888; font-size:0.9rem;">暂无新订单</div></div>
                    </div>
                </div>

                <div id="mp-weibo" class="phone-app-page" style="background:#f6f6f6; flex-direction:column;">
                    <div style="flex:1; overflow-y:auto; padding-bottom:80px;">
                        <div style="padding:12px 15px; border-bottom:1px solid #e6e6e6; display:flex; align-items:center; gap:10px; flex-shrink:0; background:#fff;"><span style="font-weight:bold; font-size:1rem; color:#ff8200;">微博</span></div>
                        <div id="weibo-main-post" style="padding:0; background:#fff;"><div style="text-align:center; color:#999; padding:40px 0; font-size:0.9rem;">暂无微博</div></div>
                        <div id="weibo-comments" style="padding:0 15px;"></div>
                    </div>
                </div>

                <div id="mp-notes" class="phone-app-page" style="background:#fef9e7; flex-direction:column;">
                    <div style="padding:15px; border-bottom:1px solid rgba(236, 79, 197, 0.18); flex-shrink:0; background:#fff8dc;">
                        <div style="font-weight:bold; font-size:1rem; color:#7a5c00; display:flex; align-items:center; gap:6px;"><i data-lucide="notebook-pen" style="width:18px;height:18px;"></i><span>Ta的备忘录</span></div>
                    </div>
                    <div style="flex:1; overflow-y:auto; padding:15px; padding-bottom:80px;"><div id="notes-list"><div style="text-align:center; color:#888888; padding:40px 0; font-size:0.9rem;">暂无备忘录</div></div></div>
                </div>

                <div id="mp-echo-phone" class="phone-app-page" style="background:#f6f6f6; flex-direction:column;">
                    <div style="padding:15px; border-bottom:1px solid #e5e5ea; background:#ffffff; display:flex; justify-content:space-between; align-items:center; flex-shrink:0;">
                        <div style="font-weight:bold; font-size:1rem; color:#333333; display:flex; align-items:center; gap:6px;"><i data-lucide="library" style="width:18px;height:18px;"></i><span>回响</span></div>
                        <div onclick="openEchoEditor()" style="width:32px; height:32px; background:linear-gradient(135deg,#ec4fc5,#b61aae); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;"><i data-lucide="plus" style="width:16px;height:16px;color:white;"></i></div>
                    </div>
                    <div id="echo-phone-list" style="flex:1; overflow-y:auto; padding:15px; padding-bottom:60px;"></div>
                    <div id="echo-editor-modal" style="position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:2000; display:none; align-items:center; justify-content:center; padding:10px; box-sizing:border-box;">
                        <div style="background:rgba(12, 5, 109, 0.95); border-radius:20px; width:100%; max-height:90%; overflow-y:auto; padding:20px; box-shadow:0 20px 60px rgba(0,0,0,0.3);">
                            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; padding-bottom:12px; border-bottom:2px solid #f0f0f0;">
                                <div id="echo-editor-title" style="font-size:1rem; font-weight:bold; color:#333333;">新建回响条目</div>
                                <div onclick="closeEchoEditor()" style="cursor:pointer; color:#999999; width:28px; height:28px; display:flex; align-items:center; justify-content:center; background:#f5f5f7; border-radius:50%; font-size:1rem;">✕</div>
                            </div>
                            <div style="margin-bottom:12px;"><label style="display:block; font-size:0.8rem; font-weight:600; color:#555; margin-bottom:5px;">条目标题</label><input type="text" id="echo-edit-title" placeholder="例如：基础性格" style="width:100%; padding:10px; border:2px solid rgba(236, 79, 197, 0.3); border-radius:8px; font-size:0.9rem; box-sizing:border-box; color:#333333; background:#ffffff; outline:none;"></div>
                            <div style="margin-bottom:12px;"><label style="display:block; font-size:0.8rem; font-weight:600; color:#555; margin-bottom:5px;">触发关键词（每行一个，空则始终注入）</label><textarea id="echo-edit-keywords" rows="3" placeholder="性格&#10;喜好" style="width:100%; padding:10px; border:2px solid rgba(236, 79, 197, 0.3); border-radius:8px; font-size:0.85rem; box-sizing:border-box; color:#333333; background:#ffffff; outline:none; resize:none;"></textarea></div>
                            <div style="margin-bottom:10px;">
                                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;"><label style="font-size:0.8rem; font-weight:600; color:#555;">子内容</label><button onclick="addEchoSubcontent()" style="padding:4px 10px; background:linear-gradient(135deg,#ec4fc5,#b61aae); color:white; border:none; border-radius:6px; font-size:0.72rem; cursor:pointer;">+ 添加</button></div>
                                <div id="echo-subcontent-list" style="display:flex; flex-direction:column; gap:8px;"></div>
                            </div>
                            <div style="display:flex; gap:8px; margin-top:15px;"><button onclick="closeEchoEditor()" style="flex:1; padding:10px; background:#f5f5f7; color:#666666; border:none; border-radius:8px; cursor:pointer; font-size:0.85rem;">取消</button><button onclick="saveEchoItem()" style="flex:2; padding:10px; background:linear-gradient(135deg,#ec4fc5,#b61aae); color:white; border:none; border-radius:8px; cursor:pointer; font-size:0.85rem; font-weight:bold;">保存</button></div>
                        </div>
                    </div>
                </div>

                <div id="mp-coread-phone" class="phone-app-page" style="background:#1a1a2e; flex-direction:column; overflow:hidden;">
                    <div id="coread-topbar" style="padding:10px 14px 8px; background:rgba(26,26,46,0.95); border-bottom:1px solid rgba(255,255,255,0.08); display:flex; justify-content:space-between; align-items:center; flex-shrink:0; position:relative; z-index:20;">
                        <div style="display:flex; align-items:center; gap:8px;">
                            <div id="coread-book-avatar" style="width:28px; height:28px; border-radius:6px; background:linear-gradient(135deg,#2d6a4f,#52b788); display:flex; align-items:center; justify-content:center; font-size:0.8rem;"></div>
                            <div><div id="coread-book-title" style="font-size:0.75rem; font-weight:bold; color:#e8e8f0; line-height:1.2;">尚未导入书籍</div><div id="coread-progress-text" style="font-size:0.6rem; color:#bfa9d6; margin-top:1px;">0%</div></div>
                        </div>
                        <div style="display:flex; gap:10px; align-items:center;">
                            <div onclick="triggerBookImport()" style="width:28px; height:28px; border-radius:50%; background:rgba(82,183,136,0.2); border:1px solid rgba(82,183,136,0.4); display:flex; align-items:center; justify-content:center; cursor:pointer;"><i data-lucide="folder-open" style="width:14px;height:14px;color:#52b788;"></i></div>
                            <div onclick="triggerManualComment()" id="coread-comment-btn" style="width:28px; height:28px; border-radius:50%; background:rgba(255,180,100,0.2); border:1px solid rgba(255,180,100,0.4); display:flex; align-items:center; justify-content:center; cursor:pointer;"><i data-lucide="message-circle" style="width:14px;height:14px;color:#ffb464;"></i></div>
                        </div>
                        <input type="file" id="book-import-input" accept=".txt,.epub" style="display:none;" onchange="handleBookImport(this)">
                    </div>
                    <div style="height:2px; background:rgba(255,255,255,0.05); flex-shrink:0; position:relative; z-index:20;"><div id="coread-progress-bar" style="height:100%; width:0%; background:linear-gradient(90deg,#2d6a4f,#52b788); transition:width 0.5s ease;"></div></div>
                    <div id="coread-reading-area" style="flex:1; position:relative; overflow:hidden;">
                        <div id="coread-book-scroll" style="height:100%; overflow-y:auto; padding:20px 18px; font-family:'Georgia','Songti SC',serif; font-size:0.88rem; line-height:2; color:#c8c8d8; letter-spacing:0.02em; background:transparent;" onscroll="onBookScroll(this)">
                            <div id="coread-empty-state" style="display:flex; flex-direction:column; align-items:center; justify-content:center; height:80%; text-align:center; color:#e6d9f7;">
                                <div style="font-size:2.5rem; margin-bottom:12px;"><i data-lucide="book-open" style="width:48px;height:48px;color:#bfa9d6;"></i></div>
                                <div style="font-size:0.9rem; font-weight:bold; color:#bfa9d6; margin-bottom:6px;">导入一本书</div>
                                <div style="font-size:0.75rem; color:#e6d9f7; line-height:1.6;">支持 .txt · .epub<br>和角色一起共读吧</div>
                                <div onclick="triggerBookImport()" style="margin-top:20px; padding:10px 24px; background:linear-gradient(135deg,#2d6a4f,#52b788); color:white; border-radius:20px; font-size:0.8rem; cursor:pointer; font-weight:bold;">选择文件</div>
                            </div>
                            <div id="coread-paragraphs"></div>
                        </div>
                        <div id="coread-danmaku-layer" style="position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:hidden; z-index:10;"></div>
                        <div id="coread-bookmark-layer" style="position:absolute; top:0; right:0; width:40px; height:100%; pointer-events:none; z-index:15;"></div>
                    </div>
                    <div id="coread-reply-bar" style="position:absolute; bottom:0; left:0; width:100%; background:rgba(20,20,36,0.95); border-top:1px solid rgba(82,183,136,0.3); padding:8px 12px; display:none; z-index:30; backdrop-filter:blur(10px); transform:translateY(100%); transition:transform 0.3s cubic-bezier(0.16,1,0.3,1);">
                        <div id="coread-reply-context" style="font-size:0.68rem; color:#52b788; margin-bottom:6px; display:flex; align-items:center; gap:6px;">
                            <div id="coread-reply-avatar" style="width:18px; height:18px; border-radius:50%; background:#2d6a4f; flex-shrink:0; overflow:hidden;"><img id="coread-reply-avatar-img" src="" style="width:100%;height:100%;object-fit:cover;"></div>
                            <span id="coread-reply-quote" style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:200px; color:#a89bbf; font-style:italic;"></span>
                        </div>
                        <div style="display:flex; gap:8px; align-items:center;">
                            <input type="text" id="coread-reply-input" placeholder="回复Ta..." style="flex:1; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); border-radius:16px; padding:7px 12px; font-size:0.82rem; color:#e8e8f0; outline:none;" onkeypress="if(event.keyCode===13) sendCoreadReply()">
                            <div onclick="sendCoreadReply()" style="width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#2d6a4f,#52b788); display:flex; align-items:center; justify-content:center; cursor:pointer; pointer-events:auto; flex-shrink:0;"><i data-lucide="send" style="width:14px;height:14px;color:white;"></i></div>
                            <div onclick="closeCoreadReplyBar()" style="width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; cursor:pointer; pointer-events:auto; flex-shrink:0;"><i data-lucide="x" style="width:14px;height:14px;color:#a89bbf;"></i></div>
                        </div>
                    </div>
                    <div id="coread-bookmark-popup" style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.8); background:linear-gradient(135deg,#fffef0,#fff9e0); border-radius:12px; padding:16px; width:240px; box-shadow:0 8px 32px rgba(0,0,0,0.4); display:none; z-index:50; pointer-events:auto; opacity:0; transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);">
                        <div id="bm-popup-agent-name" style="font-size:0.72rem; color:#8b6914; font-weight:bold; margin-bottom:6px;"></div>
                        <div id="bm-popup-content" style="font-size:0.85rem; color:#4a3800; line-height:1.6;"></div>
                        <div style="display:flex; justify-content:flex-end; margin-top:10px; gap:8px;"><div onclick="replyToBookmark()" style="padding:4px 12px; background:#8b6914; color:white; border-radius:8px; font-size:0.72rem; cursor:pointer; pointer-events:auto;">回复</div><div onclick="closeBookmarkPopup()" style="padding:4px 12px; background:rgba(89, 13, 130, 0.5); color:#bfa9d6; border-radius:8px; font-size:0.72rem; cursor:pointer; pointer-events:auto;">关闭</div></div>
                    </div>
                </div>

                <div id="mp-photos-phone" class="phone-app-page" style="background:#000; flex-direction:column;">
                    <div style="padding:15px; background:#111; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #333; flex-shrink:0;">
                        <div style="font-weight:bold; font-size:1rem; color:#fff; display:flex; align-items:center; gap:6px;"><i data-lucide="image" style="width:18px;height:18px;"></i><span>Ta的相册</span></div>
                    </div>
                    <div style="flex:1; overflow-y:auto; padding:10px; padding-bottom:80px;"><div id="photos-grid" style="display:grid; grid-template-columns:1fr 1fr; gap:8px;"></div></div>
                </div>

                <div id="mp-archive-phone" class="phone-app-page" style="background:linear-gradient(180deg,#1a0f2e 0%,#0d0820 100%); flex-direction:column;">
                    <div style="padding:15px; background:rgba(76,29,149,0.4); display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(167,139,250,0.25); flex-shrink:0; backdrop-filter:blur(10px);">
                        <div style="font-weight:bold; font-size:1rem; color:#e9d5ff; display:flex; align-items:center; gap:6px;"><i data-lucide="folder-lock" style="width:18px;height:18px;"></i><span>档案</span></div>
                        <div style="display:flex; gap:6px;">
                            <div onclick="archiveSwitchTab('history')" id="archive-tab-history" style="padding:5px 12px; font-size:0.7rem; color:#e9d5ff; background:rgba(124,58,237,0.5); border-radius:12px; cursor:pointer; font-weight:bold;">卡片</div>
                            <div onclick="archiveSwitchTab('editor')" id="archive-tab-editor" style="padding:5px 12px; font-size:0.7rem; color:#a78bfa; background:rgba(124,58,237,0.15); border-radius:12px; cursor:pointer;">编辑</div>
                            <div onclick="archiveSwitchTab('help')" id="archive-tab-help" style="padding:5px 12px; font-size:0.7rem; color:#a78bfa; background:rgba(124,58,237,0.15); border-radius:12px; cursor:pointer;">说明</div>
                        </div>
                    </div>
                    <!-- 自动生成开关条 -->
                    <div id="archive-switch-bar" style="padding:10px 15px; background:rgba(76,29,149,0.2); border-bottom:1px solid rgba(167,139,250,0.15); display:flex; justify-content:space-between; align-items:center; flex-shrink:0;">
                        <div style="display:flex; flex-direction:column; gap:2px;">
                            <div style="font-size:0.78rem; color:#e9d5ff; font-weight:bold;">每轮自动生成</div>
                            <div id="archive-switch-hint" style="font-size:0.62rem; color:#a78bfa;">开启后，每轮聊天结束自动生成一张档案卡</div>
                        </div>
                        <div onclick="archiveToggleEnabled()" id="archive-switch-btn" style="position:relative; width:46px; height:26px; background:#7c3aed; border-radius:13px; cursor:pointer; transition:background 0.2s; flex-shrink:0;">
                            <div id="archive-switch-knob" style="position:absolute; top:3px; left:23px; width:20px; height:20px; background:white; border-radius:50%; transition:left 0.2s; box-shadow:0 2px 4px rgba(0,0,0,0.3);"></div>
                        </div>
                    </div>
                    <div id="archive-view-history" style="flex:1; overflow-y:auto; padding:12px; padding-bottom:80px; display:block;">
                        <div id="archive-cards-list" style="display:flex; flex-direction:column; gap:12px;"></div>
                    </div>
                    <div id="archive-view-editor" style="flex:1; overflow-y:auto; padding:12px; padding-bottom:80px; display:none;">
                        <div style="font-size:0.7rem; color:#a78bfa; margin-bottom:8px; line-height:1.5;">在下方写入HTML/CSS模板，用 <code style="background:rgba(124,58,237,0.3);padding:1px 5px;border-radius:3px;color:#e9d5ff;">{{字段名}}</code> 占位。保存后，<b style="color:#fbbf24;">用上方开关</b>控制开启/关闭。</div>
                        <textarea id="archive-code-input" placeholder="例：&#10;<div style=&quot;background:linear-gradient(135deg,#1a0f2e,#2d1b4e);padding:16px;border:1px solid #8b5cf6;border-radius:8px;color:#e9d5ff;&quot;>&#10;  <div style=&quot;font-size:14px;color:#c4b5fd;margin-bottom:8px&quot;>⚡ {{境界}}</div>&#10;  <div>灵力：{{灵力值}}/100</div>&#10;  <div>心魔：{{心魔值}}/100</div>&#10;  <div style=&quot;margin-top:8px;font-style:italic;color:#a78bfa&quot;>{{内心独白}}</div>&#10;</div>" style="width:100%; min-height:280px; background:rgba(13,8,32,0.8); border:1px solid rgba(167,139,250,0.3); border-radius:8px; padding:10px; color:#e9d5ff; font-family:monospace; font-size:0.75rem; line-height:1.5; resize:vertical; box-sizing:border-box;"></textarea>
                        <div style="margin-top:12px; font-size:0.72rem; color:#c4b5fd; margin-bottom:6px;">字段说明（一行一个，告诉AI每个字段该写什么）：</div>
                        <textarea id="archive-fields-input" placeholder="例：&#10;境界：当前修为层级，如&quot;金丹中期&quot;&#10;灵力值：0-100的数字，根据消耗变化&#10;心魔值：0-100的数字，受情绪影响&#10;内心独白：一句话OS，符合角色性格" style="width:100%; min-height:120px; background:rgba(13,8,32,0.8); border:1px solid rgba(167,139,250,0.3); border-radius:8px; padding:10px; color:#e9d5ff; font-family:monospace; font-size:0.75rem; line-height:1.5; resize:vertical; box-sizing:border-box;"></textarea>
                        <div style="display:flex; gap:8px; margin-top:12px;">
                            <button onclick="archiveSaveCode()" style="flex:1; padding:10px; background:linear-gradient(135deg,#7c3aed,#4c1d95); color:white; border:none; border-radius:8px; font-size:0.85rem; cursor:pointer; font-weight:bold;">💾 保存</button>
                            <button onclick="archiveClearCode()" style="padding:10px 16px; background:rgba(239,68,68,0.2); color:#fca5a5; border:1px solid rgba(239,68,68,0.4); border-radius:8px; font-size:0.78rem; cursor:pointer;">清空</button>
                        </div>
                        <div style="margin-top:10px; font-size:0.65rem; color:#9ca3af; line-height:1.6;">⚠️ 安全限制：&lt;script&gt;、&lt;iframe&gt;、on事件、javascript: 链接会被自动过滤。CSS样式可随意写。</div>
                    </div>
                    <div id="archive-view-help" style="flex:1; overflow-y:auto; padding:14px; padding-bottom:80px; display:none; color:#e9d5ff; font-size:0.78rem; line-height:1.7;">
                        <div style="font-weight:bold; color:#c4b5fd; margin-bottom:8px; font-size:0.85rem;">📖 档案是什么</div>
                        <div style="margin-bottom:14px;">玩家自己写一段HTML卡片代码，每轮聊天结束后AI会按你定义的字段填入内容，生成一张卡片显示在"卡片"标签里。</div>
                        <div style="font-weight:bold; color:#c4b5fd; margin-bottom:8px; font-size:0.85rem;">🎯 怎么用</div>
                        <div style="margin-bottom:6px;">1. 切到"编辑"，写HTML，用 <code style="background:rgba(124,58,237,0.3);padding:1px 4px;border-radius:3px;">{{字段名}}</code> 占位</div>
                        <div style="margin-bottom:6px;">2. 在字段说明里告诉AI每个字段写什么</div>
                        <div style="margin-bottom:6px;">3. 点保存。之后每轮聊天会自动生成一张</div>
                        <div style="margin-bottom:14px;">4. 不想生成时，用上方开关一键关闭（代码会保留）</div>
                        <div style="font-weight:bold; color:#c4b5fd; margin-bottom:8px; font-size:0.85rem;">🧠 数值记忆</div>
                        <div style="margin-bottom:14px;">如果字段说明里写明"0-100的数字"或类似数值范围，AI会记住上张卡的数值，根据剧情让它增减变化。非数值字段每次重新生成。</div>
                        <div style="font-weight:bold; color:#c4b5fd; margin-bottom:8px; font-size:0.85rem;">💡 使用建议</div>
                        <div style="margin-bottom:6px;">• 仙侠：境界/灵力/心魔/道心</div>
                        <div style="margin-bottom:6px;">• 末世：辐射值/物资/感染度/求生欲</div>
                        <div style="margin-bottom:6px;">• 悬疑：线索数/嫌疑度/恐惧值</div>
                        <div style="margin-bottom:6px;">• 校园：好感/暧昧度/学业压力</div>
                    </div>
                </div>

                <div id="mp-settings-phone" class="phone-app-page" style="background:#f2f2f7; flex-direction:column; overflow-y:auto;">
                    <div style="padding:15px; background:#ffffff; border-bottom:1px solid #e5e5ea; font-weight:bold; font-size:1rem; color:#333333; flex-shrink:0; display:flex; align-items:center; gap:6px;"><i data-lucide="settings-2" style="width:18px;height:18px;"></i><span>聊天主题</span></div>
                    <div style="flex:1; overflow-y:auto; padding:15px; padding-bottom:80px;">
                        <div style="background:#ffffff; border-radius:12px; padding:15px; margin-bottom:12px;">
                            <div style="font-size:0.85rem; font-weight:bold; color:#333333; margin-bottom:10px; display:flex; align-items:center; gap:6px;"><i data-lucide="smartphone" style="width:16px;height:16px;"></i><span>手机壁纸</span></div>
                            <button onclick="changeWallpaperFromSettings()" style="width:100%; padding:10px; background:#007aff; color:white; border:none; border-radius:8px; font-size:0.85rem; cursor:pointer;">更换壁纸</button>
                        </div>
                        <div style="background:#ffffff; border-radius:12px; padding:15px; margin-bottom:12px;">
                            <div style="font-size:0.85rem; font-weight:bold; color:#333333; margin-bottom:12px; display:flex; align-items:center; gap:6px;"><i data-lucide="message-square" style="width:16px;height:16px;"></i><span>对话气泡</span></div>
                            <div style="margin-bottom:12px;">
                                <div style="font-size:0.8rem; color:#666666; margin-bottom:8px;">对方气泡</div>
                                <div style="display:flex; gap:8px; margin-bottom:8px;"><button id="bot-mode-color" onclick="switchBubbleMode('bot','color')" style="flex:1; padding:6px; font-size:0.72rem; border:2px solid #ec4fc5; border-radius:6px; background:#ec4fc5; color:#ffffff; cursor:pointer; font-weight:bold;">纯色</button><button id="bot-mode-image" onclick="switchBubbleMode('bot','image')" style="flex:1; padding:6px; font-size:0.72rem; border:2px solid #ddd; border-radius:6px; background:#f8f8f8; color:#999999; cursor:pointer;">图片气泡</button></div>
                                <div id="bot-color-panel">
                                    <div style="display:flex; gap:10px; align-items:center;">
                                        <div style="flex:1;"><div style="font-size:0.7rem; color:#999999; margin-bottom:4px;">背景色</div><input type="color" id="bot-bubble-color-picker" value="#f0f0f0" oninput="previewChatTheme()" style="width:100%; height:36px; border:none; border-radius:8px; cursor:pointer; padding:2px;"></div>
                                        <div style="flex:1;"><div style="font-size:0.7rem; color:#999999; margin-bottom:4px;">文字色</div><input type="color" id="bot-text-color-picker" value="#333333" oninput="previewChatTheme()" style="width:100%; height:36px; border:none; border-radius:8px; cursor:pointer; padding:2px;"></div>
                                    </div>
                                </div>
                                <div id="bot-image-panel" style="display:none;">
                                    <div id="bot-bubble-img-preview" onclick="triggerBubbleImgUpload('bot')" style="width:100%; height:55px; background:#f5f5f7; border:2px dashed #ddd; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:0.75rem; color:#999999; overflow:hidden;">点击上传气泡图片</div>
                                    <div id="bot-padding-sliders" style="display:none; margin-top:8px;">
                                        <div style="display:flex; gap:6px; flex-wrap:wrap;">
                                            <div style="flex:1;"><span style="font-size:0.65rem;">上</span><input type="range" id="bot-pt" min="0" max="50" value="10" oninput="updateBubblePadding('bot','pt',this.value)"><span id="bot-pt-val">10px</span></div>
                                            <div style="flex:1;"><span style="font-size:0.65rem;">右</span><input type="range" id="bot-pr" min="0" max="50" value="15" oninput="updateBubblePadding('bot','pr',this.value)"><span id="bot-pr-val">15px</span></div>
                                            <div style="flex:1;"><span style="font-size:0.65rem;">下</span><input type="range" id="bot-pb" min="0" max="50" value="10" oninput="updateBubblePadding('bot','pb',this.value)"><span id="bot-pb-val">10px</span></div>
                                            <div style="flex:1;"><span style="font-size:0.65rem;">左</span><input type="range" id="bot-pl" min="0" max="50" value="15" oninput="updateBubblePadding('bot','pl',this.value)"><span id="bot-pl-val">15px</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div style="padding-top:12px; border-top:1px solid #e5e5ea; margin-bottom:12px;">
                                <div style="font-size:0.8rem; color:#666666; margin-bottom:8px;">我的气泡</div>
                                <div style="display:flex; gap:8px; margin-bottom:8px;"><button id="user-mode-color" onclick="switchBubbleMode('user','color')" style="flex:1; padding:6px; font-size:0.72rem; border:2px solid #ec4fc5; border-radius:6px; background:#ec4fc5; color:#ffffff; cursor:pointer; font-weight:bold;">纯色</button><button id="user-mode-image" onclick="switchBubbleMode('user','image')" style="flex:1; padding:6px; font-size:0.72rem; border:2px solid #ddd; border-radius:6px; background:#f8f8f8; color:#999999; cursor:pointer;">图片气泡</button></div>
                                <div id="user-color-panel">
                                    <div style="display:flex; gap:10px; align-items:center;">
                                        <div style="flex:1;"><div style="font-size:0.7rem; color:#999999; margin-bottom:4px;">背景色</div><input type="color" id="user-bubble-color-picker" value="#ec4fc5" oninput="previewChatTheme()" style="width:100%; height:36px; border:none; border-radius:8px; cursor:pointer; padding:2px;"></div>
                                        <div style="flex:1;"><div style="font-size:0.7rem; color:#999999; margin-bottom:4px;">文字色</div><input type="color" id="user-text-color-picker" value="#ffffff" oninput="previewChatTheme()" style="width:100%; height:36px; border:none; border-radius:8px; cursor:pointer; padding:2px;"></div>
                                    </div>
                                </div>
                                <div id="user-image-panel" style="display:none;">
                                    <div id="user-bubble-img-preview" onclick="triggerBubbleImgUpload('user')" style="width:100%; height:55px; background:#f5f5f7; border:2px dashed #ddd; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:0.75rem; color:#999999; overflow:hidden;">点击上传气泡图片</div>
                                    <div id="user-padding-sliders" style="display:none; margin-top:8px;">
                                        <div style="display:flex; gap:6px; flex-wrap:wrap;">
                                            <div style="flex:1;"><span style="font-size:0.65rem;">上</span><input type="range" id="user-pt" min="0" max="50" value="10" oninput="updateBubblePadding('user','pt',this.value)"><span id="user-pt-val">10px</span></div>
                                            <div style="flex:1;"><span style="font-size:0.65rem;">右</span><input type="range" id="user-pr" min="0" max="50" value="15" oninput="updateBubblePadding('user','pr',this.value)"><span id="user-pr-val">15px</span></div>
                                            <div style="flex:1;"><span style="font-size:0.65rem;">下</span><input type="range" id="user-pb" min="0" max="50" value="10" oninput="updateBubblePadding('user','pb',this.value)"><span id="user-pb-val">10px</span></div>
                                            <div style="flex:1;"><span style="font-size:0.65rem;">左</span><input type="range" id="user-pl" min="0" max="50" value="15" oninput="updateBubblePadding('user','pl',this.value)"><span id="user-pl-val">15px</span></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <input type="file" id="bubble-img-input" hidden accept="image/*" onchange="handleBubbleImageUpload(this)">
                            <div style="background:#ec4fc522; border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:8px;">
                                <div style="display:flex; align-items:flex-start; gap:8px;"><div style="width:24px; height:24px; border-radius:50%; background:#ffffff; flex-shrink:0;"></div><div id="bot-bubble-preview" style="background:#f5f5f7; color:#333333; padding:7px 10px; border-radius:12px 12px 12px 3px; font-size:0.75rem; max-width:75%;">对方消息示例</div></div>
                                <div style="display:flex; align-items:flex-start; gap:8px; justify-content:flex-end;"><div id="user-bubble-preview" style="background:#ec4fc5; color:#fff; padding:7px 10px; border-radius:12px 12px 3px 12px; font-size:0.75rem; max-width:75%;">我的消息示例</div><div style="width:24px; height:24px; border-radius:50%; background:#ffffff; flex-shrink:0;"></div></div>
                            </div>
                        </div>
                        <div id="chat-button-icons-section" style="background:#ffffff; border-radius:12px; padding:15px; margin-bottom:12px;">
                            <div style="font-size:0.85rem; font-weight:bold; color:#333333; margin-bottom:12px; display:flex; align-items:center; gap:6px;"><i data-lucide="mouse-pointer-click" style="width:16px;height:16px;"></i><span>按钮图标（透明底素材）</span></div>
                            <div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;">
                                <div style="text-align:center;">
                                    <div id="preview-chatBackBtn" onclick="triggerThemeImgUpload('chatBackBtn')" style="width:52px; height:52px; border-radius:12px; background:#f5f5f7; border:2px dashed #ddd; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; margin:0 auto 4px;"><i data-lucide="chevron-left" style="width:22px;height:22px;color:#ccc;"></i></div>
                                    <div style="font-size:0.68rem; color:#666666;">返回按钮</div>
                                    <button onclick="clearThemeImage('chatBackBtn')" id="clear-chatBackBtn" style="display:none; margin-top:3px; padding:2px 6px; background:#fff0f0; color:#ef4444; border:none; border-radius:4px; font-size:0.6rem; cursor:pointer;">清除</button>
                                </div>
                                <div style="text-align:center;">
                                    <div id="preview-chatSendBtn" onclick="triggerThemeImgUpload('chatSendBtn')" style="width:52px; height:52px; border-radius:12px; background:#f5f5f7; border:2px dashed #ddd; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; margin:0 auto 4px;"><i data-lucide="send-horizontal" style="width:22px;height:22px;color:#ccc;"></i></div>
                                    <div style="font-size:0.68rem; color:#666666;">发送按钮</div>
                                    <button onclick="clearThemeImage('chatSendBtn')" id="clear-chatSendBtn" style="display:none; margin-top:3px; padding:2px 6px; background:#fff0f0; color:#ef4444; border:none; border-radius:4px; font-size:0.6rem; cursor:pointer;">清除</button>
                                </div>
                                <div style="text-align:center;">
                                    <div id="preview-chatMoreBtn" onclick="triggerThemeImgUpload('chatMoreBtn')" style="width:52px; height:52px; border-radius:12px; background:#f5f5f7; border:2px dashed #ddd; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; margin:0 auto 4px;"><i data-lucide="layout-grid" style="width:22px;height:22px;color:#ccc;"></i></div>
                                    <div style="font-size:0.68rem; color:#666666;">更多按钮</div>
                                    <button onclick="clearThemeImage('chatMoreBtn')" id="clear-chatMoreBtn" style="display:none; margin-top:3px; padding:2px 6px; background:#fff0f0; color:#ef4444; border:none; border-radius:4px; font-size:0.6rem; cursor:pointer;">清除</button>
                                </div>
                                <div style="text-align:center;">
                                    <div id="preview-chatPhoneBtn" onclick="triggerThemeImgUpload('chatPhoneBtn')" style="width:52px; height:52px; border-radius:12px; background:#f5f5f7; border:2px dashed #ddd; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; margin:0 auto 4px;"><i data-lucide="smartphone" style="width:22px;height:22px;color:#ccc;"></i></div>
                                    <div style="font-size:0.68rem; color:#666666;">小手机按钮</div>
                                    <button onclick="clearThemeImage('chatPhoneBtn')" id="clear-chatPhoneBtn" style="display:none; margin-top:3px; padding:2px 6px; background:#fff0f0; color:#ef4444; border:none; border-radius:4px; font-size:0.6rem; cursor:pointer;">清除</button>
                                </div>
                                <div style="text-align:center;">
                                    <div id="preview-chatEditBtn" onclick="triggerThemeImgUpload('chatEditBtn')" style="width:52px; height:52px; border-radius:12px; background:#f5f5f7; border:2px dashed #ddd; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; margin:0 auto 4px;"><i data-lucide="edit-3" style="width:22px;height:22px;color:#ccc;"></i></div>
                                    <div style="font-size:0.68rem; color:#666666;">编辑按钮</div>
                                    <button onclick="clearThemeImage('chatEditBtn')" id="clear-chatEditBtn" style="display:none; margin-top:3px; padding:2px 6px; background:#fff0f0; color:#ef4444; border:none; border-radius:4px; font-size:0.6rem; cursor:pointer;">清除</button>
                                </div>
                                <div style="text-align:center;">
                                    <div id="preview-chatDotBtn" onclick="triggerThemeImgUpload('chatDotBtn')" style="width:52px; height:52px; border-radius:12px; background:#f5f5f7; border:2px dashed #ddd; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; margin:0 auto 4px;"><span style="font-size:1rem; color:#ccc; font-weight:bold; letter-spacing:2px;">…</span></div>
                                    <div style="font-size:0.68rem; color:#666666;">气泡"…"按钮</div>
                                    <button onclick="clearThemeImage('chatDotBtn')" id="clear-chatDotBtn" style="display:none; margin-top:3px; padding:2px 6px; background:#fff0f0; color:#ef4444; border:none; border-radius:4px; font-size:0.6rem; cursor:pointer;">清除</button>
                                </div>
                            </div>
                            <div style="padding-top:12px; margin-top:12px; border-top:1px solid #e5e5ea;">
                                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
                                    <span style="font-size:0.78rem; color:#333;">按钮图标大小</span>
                                    <span id="chat-btn-size-val" style="font-size:0.75rem; color:#666666; font-weight:bold;">24px</span>
                                </div>
                                <input type="range" id="chat-btn-size-slider" min="14" max="40" step="1" value="24" oninput="updateChatBtnSize(this.value)" style="width:100%;">
                                <div style="display:flex; justify-content:space-between; font-size:0.62rem; color:#aaa; margin-top:2px;">
                                    <span>小</span><span>大</span>
                                </div>
                            </div>
                        </div>
                        <div style="background:#ffffff; border-radius:12px; padding:15px; margin-bottom:12px;">
                            <div style="font-size:0.85rem; font-weight:bold; color:#333333; margin-bottom:12px; display:flex; align-items:center; gap:6px;"><i data-lucide="layers" style="width:16px;height:16px;"></i><span>条状底图</span></div>
                            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
                                <div style="text-align:center;">
                                    <div id="preview-chatHeaderBar" onclick="triggerThemeImgUpload('chatHeaderBar')" style="width:100%; height:42px; border-radius:8px; background:#f5f5f7; border:2px dashed #ddd; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; margin:0 auto 4px; font-size:0.62rem; color:#aaa;">顶部标题栏</div>
                                    <div style="font-size:0.68rem; color:#666666;">智能体名字栏</div>
                                    <button onclick="clearThemeImage('chatHeaderBar')" id="clear-chatHeaderBar" style="display:none; margin-top:3px; padding:2px 6px; background:#fff0f0; color:#ef4444; border:none; border-radius:4px; font-size:0.6rem; cursor:pointer;">清除</button>
                                </div>
                                <div style="text-align:center;">
                                    <div id="preview-chatInputBar" onclick="triggerThemeImgUpload('chatInputBar')" style="width:100%; height:42px; border-radius:8px; background:#f5f5f7; border:2px dashed #ddd; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; margin:0 auto 4px; font-size:0.62rem; color:#aaa;">底部输入栏</div>
                                    <div style="font-size:0.68rem; color:#666666;">输入框背景</div>
                                    <button onclick="clearThemeImage('chatInputBar')" id="clear-chatInputBar" style="display:none; margin-top:3px; padding:2px 6px; background:#fff0f0; color:#ef4444; border:none; border-radius:4px; font-size:0.6rem; cursor:pointer;">清除</button>
                                </div>
                            </div>
                        </div>
                        <div style="background:#ffffff; border-radius:12px; padding:15px; margin-bottom:12px;">
                            <div style="font-size:0.85rem; font-weight:bold; color:#333333; margin-bottom:12px; display:flex; align-items:center; gap:6px;"><i data-lucide="sparkles" style="width:16px;height:16px;"></i><span>背景效果</span></div>
                            <div style="margin-bottom:10px;"><div style="display:flex; justify-content:space-between; font-size:0.78rem; color:#666666; margin-bottom:4px;"><span>背景亮度</span><span id="bg-brightness-val">100%</span></div><input type="range" id="bg-brightness-slider" min="0.3" max="1.5" step="0.05" value="1" oninput="updateBgBrightness(this.value)" style="width:100%;"></div>
                            <div style="margin-bottom:10px;"><div style="display:flex; justify-content:space-between; font-size:0.78rem; color:#666666; margin-bottom:4px;"><span>遮罩透明度</span><span id="overlay-opacity-val">40%</span></div><input type="range" id="overlay-opacity-slider" min="0" max="0.9" step="0.05" value="0.4" oninput="previewChatTheme()" style="width:100%;"></div>
                            <div><div style="display:flex; justify-content:space-between; font-size:0.78rem; color:#666666; margin-bottom:4px;"><span>气泡透明度</span><span id="bubble-opacity-val">100%</span></div><input type="range" id="bubble-opacity-slider" min="0.2" max="1" step="0.05" value="1" oninput="updateBubbleOpacity(this.value)" style="width:100%;"></div>
                        </div>
                        <div style="display:flex; gap:10px;"><button onclick="resetBrightness()" style="flex:1; padding:11px; background:#f5f5f7; color:#666666; border:none; border-radius:10px; cursor:pointer; font-size:0.82rem;">重置</button><button onclick="saveChatTheme()" style="flex:1; padding:11px; background:linear-gradient(135deg,#ec4fc5,#b61aae); color:white; border:none; border-radius:10px; cursor:pointer; font-size:0.85rem; font-weight:bold;">应用</button></div>
                    </div>
                </div>
            </div>
            <div style="height:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0;"><div style="width:80px; height:4px; background:rgba(6, 2, 54, 0.92); border-bottom:1px solid #e5e5ea; border-radius:2px;"></div></div>
        </div>
    </div>

    <div id="crop-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:9999; flex-direction:column;">
        <div style="padding:15px; display:flex; justify-content:space-between; align-items:center;"><div onclick="closeCrop()" style="color:#fff; cursor:pointer; font-size:0.9rem;">取消</div><div style="color:#fff; font-weight:bold;">移动和缩放</div><div onclick="confirmCrop()" style="color:#ec4fc5; cursor:pointer; font-weight:bold;">选取</div></div>
        <div id="crop-container" style="flex:1; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center;"><canvas id="crop-canvas" style="touch-action:none;"></canvas><div id="crop-mask" style="position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;"></div></div>
        <div style="padding:20px; text-align:center; color:rgba(255,255,255,0.5); font-size:0.8rem;">双指缩放 · 单指移动</div>
    </div>

    <div id="theme-editor-page" style="position:fixed; top:0; left:0; width:100%; height:100%; background:#ffffff; z-index:600; display:none; flex-direction:column;">
        <div style="height:50px; display:flex; justify-content:space-between; align-items:center; padding:0 15px; background:rgba(12, 5, 109, 0.95); border-bottom:1px solid #e5e5ea; position:sticky; top:0; z-index:10; flex-shrink:0;">
            <div onclick="closeThemeEditor()" style="color:#ff8d8d; cursor:pointer; font-size:0.9rem;">取消</div>
            <div id="theme-editor-title" style="font-weight:bold;">新建主题包</div>
            <div onclick="saveThemePackFromEditor()" style="color:#ec4fc5; font-weight:bold; cursor:pointer; font-size:0.9rem;">保存</div>
        </div>
        <div style="flex:1; overflow-y:auto; padding:20px; padding-bottom:60px;">
            <div style="background:rgba(12, 5, 109, 0.95); border-radius:16px; padding:20px; margin-bottom:15px;">
                <div style="font-size:0.85rem; font-weight:bold; color:#333333; margin-bottom:10px;">主题名称</div>
                <input type="text" id="theme-name-input" placeholder="给你的主题起个名字" maxlength="20" style="width:100%; padding:12px; border:2px solid #eee; border-radius:10px; font-size:0.95rem; outline:none; box-sizing:border-box;">
            </div>
            <div style="background:rgba(12, 5, 109, 0.95); border-radius:16px; padding:20px; margin-bottom:15px;">
                <div style="font-size:0.85rem; font-weight:bold; color:#333333; margin-bottom:12px;">效果预览</div>
                <div id="theme-preview-box" style="border-radius:12px; overflow:hidden; border:1px solid #e5e5ea; height:140px; position:relative; background: linear-gradient(135deg, #0c056d, #060236);">
                    <div id="preview-header" style="height:44px; background:rgba(255,255,255,0.8); display:flex; align-items:center; padding:0 12px; font-size:0.8rem; font-weight:bold;"><span id="preview-title-text" style="color:#333333;">消息</span></div>
                    <div style="padding:10px 12px; display:flex; flex-direction:column; gap:8px;">
                        <div id="preview-card-1" style="background:rgba(255,255,255,0.8); border-radius:10px; padding:8px 12px; display:flex; align-items:center; gap:8px;"><div style="width:28px;height:28px;border-radius:50%;background:#ffffff;flex-shrink:0;"></div><div><div id="preview-name-text" style="font-size:0.72rem; font-weight:bold; color:#333333;">智能体名字</div><div style="font-size:0.65rem; color:#999999; margin-top:2px;">最后一条消息...</div></div></div>
                        <div id="preview-card-2" style="background:rgba(255,255,255,0.8); border-radius:10px; padding:8px 12px; display:flex; align-items:center; gap:8px; opacity:0.6;"><div style="width:28px;height:28px;border-radius:50%;background:#ffffff;flex-shrink:0;"></div><div style="font-size:0.72rem; color:#333333;">另一个角色</div></div>
                    </div>
                    <div id="preview-nav" style="position:absolute; bottom:0; width:100%; height:36px; background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:space-around; border-top:1px solid rgba(0,0,0,0.05);">
                        <div style="display:flex;flex-direction:column;align-items:center;gap:1px;"><div id="preview-nav-dot" style="width:14px;height:14px;border-radius:3px;background:#ec4fc5;"></div><div style="font-size:0.5rem;color:#ec4fc5;">消息</div></div>
                        <div style="display:flex;flex-direction:column;align-items:center;gap:1px;"><div style="width:14px;height:14px;border-radius:3px;background:#999999;"></div><div style="font-size:0.5rem;color:#999999;">美化</div></div>
                        <div style="display:flex;flex-direction:column;align-items:center;gap:1px;"><div style="width:14px;height:14px;border-radius:3px;background:#999999;"></div><div style="font-size:0.5rem;color:#999999;">我</div></div>
                    </div>
                </div>
            </div>
            <div style="background:rgba(12, 5, 109, 0.95); border-radius:16px; padding:20px; margin-bottom:15px;">
                <div style="font-size:0.85rem; font-weight:bold; color:#333333; margin-bottom:15px;">颜色配置</div>
                <div style="display:flex; flex-direction:column; gap:15px;">
                    <div style="display:flex; align-items:center; justify-content:space-between;"><div><div style="font-size:0.9rem; color:#333333;">主文字颜色</div><div style="font-size:0.72rem; color:#999999; margin-top:2px;">标题、名字、正文</div></div><input type="color" id="tc-textMain" value="#333333" oninput="previewThemePack()" style="width:44px;height:44px;border:none;border-radius:10px;cursor:pointer;padding:2px;"></div>
                    <div style="height:1px;background:#f5f5f7;"></div>
                    <div style="display:flex; align-items:center; justify-content:space-between;"><div><div style="font-size:0.9rem; color:#333333;">强调色</div><div style="font-size:0.72rem; color:#999999; margin-top:2px;">导航激活、按钮</div></div><input type="color" id="tc-navActive" value="#ec4fc5" oninput="previewThemePack()" style="width:44px;height:44px;border:none;border-radius:10px;cursor:pointer;padding:2px;"></div>
                    <div style="height:1px;background:#f5f5f7;"></div>
                    <div><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;"><div><div style="font-size:0.9rem; color:#333333;">卡片背景透明度</div><div style="font-size:0.72rem; color:#999999; margin-top:2px;">消息列表卡片透明度</div></div><span id="tc-cardOpacity-val" style="font-size:0.85rem;color:#666666;font-weight:bold;">80%</span></div><input type="range" id="tc-cardOpacity" min="0" max="100" value="80" oninput="previewThemePack()" style="width:100%;"></div>
                    <div style="height:1px;background:#f5f5f7;"></div>
                    <div><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;"><div><div style="font-size:0.9rem; color:#333333;">磨砂玻璃效果</div><div style="font-size:0.72rem; color:#999999; margin-top:2px;">背景模糊强度（需有背景图）</div></div><span id="tc-blur-val" style="font-size:0.85rem;color:#666666;font-weight:bold;">0px</span></div><input type="range" id="tc-blur" min="0" max="20" value="0" oninput="previewThemePack()" style="width:100%;"></div>
                </div>
            </div>
            <div style="background:rgba(12, 5, 109, 0.95); border-radius:12px; padding:15px; margin-bottom:15px;">
                <div style="font-size:0.85rem; font-weight:bold; color:#333333; margin-bottom:12px;">各页面独立背景</div>
                <div style="font-size:0.75rem; color:#999999; margin-bottom:12px;"></div>
                <div style="display:flex; gap:10px; align-items:center; margin-bottom:12px;"><div id="preview-msgTabBg" onclick="triggerThemeImgUpload('msgTabBg')" style="width:60px; height:42px; border-radius:8px; background:#f5f5f7; border:2px dashed #ddd; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; flex-shrink:0; font-size:0.62rem; color:#aaa; text-align:center;">消息页</div><div style="flex:1; font-size:0.75rem; color:#333333;">消息</div><button onclick="clearThemeImage('msgTabBg')" id="clear-msgTabBg" style="display:none; margin-top:3px; padding:2px 6px; background:#fff0f0; color:#ef4444; border:none; border-radius:5px; font-size:0.65rem; cursor:pointer;">清除</button></div>
                <div style="display:flex; gap:10px; align-items:center; margin-bottom:12px;"><div id="preview-styleTabBg" onclick="triggerThemeImgUpload('styleTabBg')" style="width:60px; height:42px; border-radius:8px; background:#f5f5f7; border:2px dashed #ddd; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; flex-shrink:0; font-size:0.62rem; color:#aaa; text-align:center;">美化页</div><div style="flex:1; font-size:0.75rem; color:#333333;">美化</div><button onclick="clearThemeImage('styleTabBg')" id="clear-styleTabBg" style="display:none; margin-top:3px; padding:2px 6px; background:#fff0f0; color:#ef4444; border:none; border-radius:5px; font-size:0.65rem; cursor:pointer;">清除</button></div>
                <div style="display:flex; gap:10px; align-items:center; margin-bottom:12px;"><div id="preview-discoverTabBg" onclick="triggerThemeImgUpload('discoverTabBg')" style="width:60px; height:42px; border-radius:8px; background:#f5f5f7; border:2px dashed #ddd; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; flex-shrink:0; font-size:0.62rem; color:#aaa; text-align:center;">发现页</div><div style="flex:1; font-size:0.75rem; color:#333333;">发现</div><button onclick="clearThemeImage('discoverTabBg')" id="clear-discoverTabBg" style="display:none; margin-top:3px; padding:2px 6px; background:#fff0f0; color:#ef4444; border:none; border-radius:5px; font-size:0.65rem; cursor:pointer;">清除</button></div>
                <div style="display:flex; gap:10px; align-items:center;"><div id="preview-meTabBg" onclick="triggerThemeImgUpload('meTabBg')" style="width:60px; height:42px; border-radius:8px; background:#f5f5f7; border:2px dashed #ddd; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; flex-shrink:0; font-size:0.62rem; color:#aaa; text-align:center;">我的页</div><div style="flex:1; font-size:0.75rem; color:#333333;">我的</div><button onclick="clearThemeImage('meTabBg')" id="clear-meTabBg" style="display:none; margin-top:3px; padding:2px 6px; background:#fff0f0; color:#ef4444; border:none; border-radius:5px; font-size:0.65rem; cursor:pointer;">清除</button></div>
            </div>
            <div style="background:rgba(12, 5, 109, 0.95); border-radius:12px; padding:15px; margin-bottom:15px;">
                <div style="font-size:0.85rem; font-weight:bold; color:#333333; margin-bottom:12px; display:flex; align-items:center; gap:6px;">
                    <i data-lucide="navigation" style="width:16px;height:16px;"></i>
                    <span>导航栏图标</span>
                </div>
                <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;">
                    <div style="text-align:center;">
                        <div id="preview-navIconMsg" onclick="triggerThemeImgUpload('navIconMsg')" style="width:52px; height:52px; border-radius:12px; background:#f5f5f7; border:2px dashed #ddd; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; margin:0 auto 4px;">
                            <i data-lucide="message-circle" style="width:22px;height:22px;color:#ccc;"></i>
                        </div>
                        <div style="font-size:0.68rem; color:#666666;">消息</div>
                        <button onclick="clearThemeImage('navIconMsg')" id="clear-navIconMsg" style="display:none; margin-top:3px; padding:2px 6px; background:#fff0f0; color:#ef4444; border:none; border-radius:4px; font-size:0.6rem; cursor:pointer;">清除</button>
                    </div>
                    <div style="text-align:center;">
                        <div id="preview-navIconStyle" onclick="triggerThemeImgUpload('navIconStyle')" style="width:52px; height:52px; border-radius:12px; background:#f5f5f7; border:2px dashed #ddd; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; margin:0 auto 4px;">
                            <i data-lucide="palette" style="width:22px;height:22px;color:#ccc;"></i>
                        </div>
                        <div style="font-size:0.68rem; color:#666666;">美化</div>
                        <button onclick="clearThemeImage('navIconStyle')" id="clear-navIconStyle" style="display:none; margin-top:3px; padding:2px 6px; background:#fff0f0; color:#ef4444; border:none; border-radius:4px; font-size:0.6rem; cursor:pointer;">清除</button>
                    </div>
                    <div style="text-align:center;">
                        <div id="preview-navIconDiscover" onclick="triggerThemeImgUpload('navIconDiscover')" style="width:52px; height:52px; border-radius:12px; background:#f5f5f7; border:2px dashed #ddd; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; margin:0 auto 4px;">
                            <i data-lucide="compass" style="width:22px;height:22px;color:#ccc;"></i>
                        </div>
                        <div style="font-size:0.68rem; color:#666666;">发现</div>
                        <button onclick="clearThemeImage('navIconDiscover')" id="clear-navIconDiscover" style="display:none; margin-top:3px; padding:2px 6px; background:#fff0f0; color:#ef4444; border:none; border-radius:4px; font-size:0.6rem; cursor:pointer;">清除</button>
                    </div>
                    <div style="text-align:center;">
                        <div id="preview-navIconMe" onclick="triggerThemeImgUpload('navIconMe')" style="width:52px; height:52px; border-radius:12px; background:#f5f5f7; border:2px dashed #ddd; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; margin:0 auto 4px;">
                            <i data-lucide="user" style="width:22px;height:22px;color:#ccc;"></i>
                        </div>
                        <div style="font-size:0.68rem; color:#666666;">我</div>
                        <button onclick="clearThemeImage('navIconMe')" id="clear-navIconMe" style="display:none; margin-top:3px; padding:2px 6px; background:#fff0f0; color:#ef4444; border:none; border-radius:4px; font-size:0.6rem; cursor:pointer;">清除</button>
                    </div>
                </div>
                <div style="margin-top:8px;">
                    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
                        <span style="font-size:0.78rem; color:#555;">图标大小</span>
                        <span id="nav-icon-size-val" style="font-size:0.75rem; color:#666666; font-weight:bold;">48px</span>
                    </div>
                    <input type="range" id="nav-icon-size-slider" min="24" max="64" step="1" value="48" oninput="updateNavIconSize(this.value)" style="width:100%;">
                </div>
            </div>
            <input type="file" id="theme-img-input" hidden accept="image/*" onchange="handleThemeImageUpload(this)">
        </div>
    </div>

    <!-- ===== 朋友圈：发布编辑器 ===== -->
    <div id="moment-editor-panel" class="panel" style="position:fixed; top:0; left:0; width:100%; height:100%; background:var(--page-bg, #0c056d); z-index:700; display:none; flex-direction:column;">
        <div style="height:50px; padding:0 15px; display:flex; justify-content:space-between; align-items:center; background:rgba(6, 2, 54, 0.92); backdrop-filter:blur(10px); border-bottom:1px solid rgba(236, 79, 197, 0.25); flex-shrink:0;">
            <div onclick="closeMomentEditor()" style="color:#ff8d8d; cursor:pointer; font-size:0.9rem;">取消</div>
            <div style="font-weight:bold; color:#f0e6fc;">发表动态</div>
            <div onclick="publishMoment()" style="color:#ec4fc5; font-weight:bold; cursor:pointer; font-size:0.9rem;">发布</div>
        </div>
        <div style="flex:1; overflow-y:auto; padding:16px;">
            <textarea id="moment-text-input" placeholder="这一刻的想法..." maxlength="500" style="width:100%; min-height:120px; padding:10px; border:none; outline:none; font-size:0.95rem; line-height:1.6; resize:none; background:transparent; color:var(--ui-text-main); box-sizing:border-box;"></textarea>
            <div id="moment-img-grid" style="display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-top:12px;"></div>
            <div style="margin-top:14px; font-size:0.72rem; color:#a89bbf;">
                <i data-lucide="info" style="width:11px;height:11px;display:inline;vertical-align:-1px;"></i>
                每个角色会独立点赞和评论你的动态，互不影响。
            </div>
        </div>
        <input type="file" id="moment-img-input" hidden accept="image/*" multiple onchange="handleMomentImageUpload(this)">
    </div>

    <!-- ===== 朋友圈：图片大图查看 ===== -->
    <div id="moment-img-viewer" onclick="closeMomentImgViewer()" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.95); z-index:9998; align-items:center; justify-content:center; padding:20px; box-sizing:border-box;">
        <img id="moment-img-viewer-img" src="" style="max-width:100%; max-height:100%; object-fit:contain;">
    </div>

    <div id="add-menu-overlay" onclick="closeAddMenu()" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:800; align-items:flex-end; justify-content:center;">
        <div onclick="event.stopPropagation()" style="background:rgba(12, 5, 109, 0.95); border-radius:20px 20px 0 0; width:100%; padding:20px 20px calc(20px + env(safe-area-inset-bottom)); animation: slideUp 0.3s ease;">
            <div style="width:40px;height:4px;background:rgba(236, 79, 197, 0.4);border-radius:2px;margin:0 auto 20px;"></div>
            <div style="font-weight:bold;font-size:1rem;color:#f0e6fc;margin-bottom:16px;">添加智能体</div>
            <div onclick="closeAddMenu(); openAgentEditor(-1);" style="display:flex; align-items:center; gap:15px; padding:16px; border-radius:14px; background:rgba(89, 13, 130, 0.5); margin-bottom:10px; cursor:pointer;">
                <div style="width:44px;height:44px;background:linear-gradient(135deg,#ec4fc5,#b61aae); border-radius:12px;display:flex;align-items:center;justify-content:center;"><i data-lucide="plus" style="width:24px;height:24px;color:white;"></i></div>
                <div><div style="font-weight:bold;color:#f0e6fc;">从零创建</div><div style="font-size:0.78rem;color:#a89bbf;margin-top:2px;">手动填写角色设定</div></div>
            </div>
            <div onclick="triggerCharaImport()" style="display:flex; align-items:center; gap:15px; padding:16px; border-radius:14px; background:rgba(89, 13, 130, 0.5); margin-bottom:10px; cursor:pointer;">
                <div style="width:44px;height:44px;background:linear-gradient(135deg,#f093fb,#f5576c); border-radius:12px;display:flex;align-items:center;justify-content:center;"><i data-lucide="download" style="width:24px;height:24px;color:white;"></i></div>
                <div><div style="font-weight:bold;color:#f0e6fc;">导入角色卡</div><div style="font-size:0.78rem;color:#a89bbf;margin-top:2px;">支持 .png / .json 格式</div></div>
            </div>
            <input type="file" id="chara-import-input" accept=".png,.json,image/png,application/json" style="display:none;" onchange="handleCharaImport(this)">
        </div>
    </div>
<script>
// ===== 第1段 =====
// ==================================================================
// ===== 卡片发布模板库 =====
// 机能灰绿 = 头像;其他3套 = 底图
// ==================================================================
// 给所有模板自动注入：禁止横向滚动、防止内容撑爆
// 给所有模板自动注入：禁止横向滚动、防止内容撑爆
function _injectViewportFix(html) {
    return html.replace(
        '</head>',
        `<style>
        html, body { 
            overflow-x: hidden !important; 
            max-width: 100% !important; 
            width: 100% !important;
            -webkit-text-size-adjust: 100%;
        }
        body { padding-left: 0 !important; padding-right: 0 !important; }
        /* 只对正文容器限宽，不影响内部元素 */
        .wrap, .main-wrapper { 
            max-width: 100% !important; 
            width: 100% !important; 
            box-sizing: border-box !important;
        }
        /* 内容元素只防止横向溢出，不强制 max-width */
        p, div, span, h1, h2, h3, h4 { box-sizing: border-box; word-wrap: break-word; word-break: break-word; }
        img { max-width: 100%; height: auto; }
        /* 双列网格在小屏幕下保持紧凑 */
        .grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
        .card { padding: 10px !important; min-width: 0 !important; }
        .card-title { font-size: 14px !important; word-break: break-all; }
        .card-desc { font-size: 12px !important; }