/* ========================================== */
        /* 全局设计系统与变量                    */
        /* ========================================== */
        :root {
            --primary: #4FA8F9;
            --primary-hover: #388FE0;
            --primary-light: #EEF4FF;
            --primary-border: #A5DDFF;
            --bg-mica: rgba(255, 255, 255, 0.8);
            --border-light: #e5e5e5;
            --text-dark: #333333;
            --text-gray: #888888;
            --text-muted: #999999;
            
            /* 超级记忆变量 */
            --nebula-purple: #661682;
            --nebula-bg: #F2E5FF;
            --nebula-hover: #F5D6EA;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            -webkit-font-smoothing: btn-send-msg:hover;
        }

        body {
            background-color: #f4f5f6;
            height: 100vh;
            width: 100vw;
            display: flex;
            overflow: hidden;
            color: var(--text-dark);
            -webkit-font-smoothing: subpixel-antialiased !important; 
            -moz-osx-font-smoothing: auto !important;
            text-rendering: optimizeLegibility !important;
        }

        /* 三栏布局*/
        
        /* 最左侧极窄导航栏 */
        .global-sidebar {
            width: 68px;
            background-color: #ebebeb;
            border-right: 1px solid #dcdcdc;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 0;
            justify-content: space-between;
            z-index: 10;
        }

        .avatar-box {
            width: 44px !important;
            height: 44px !important;
            border-radius: 50% !important;
            border: 2px solid #fff !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
            cursor: pointer;
            transition: transform 0.2s;
            overflow: hidden !important; 
            will-change: transform;
        }
        
        .avatar-box:hover {
            transform: scale(1.05);
        }
        
        .avatar-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%; 
        }

        .global-menu {
            display: flex;
            flex-direction: column;
            gap: 25px;
            margin-top: -150px;
            align-items: center;
        }

        .menu-item {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            cursor: pointer;
            color: #555;
            transition: all 0.2s;
        }
        .menu-item.active {
            background-color: #dfdfdf;
            color: #111;
        }
        .menu-item:hover {
            background-color: #e5e5e5;
        }

        .global-bottom {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            width: 100%;
        }

        .settings-container {
            position: relative;
            cursor: pointer;
        }
        .settings-btn {
            background: transparent;
            border: none;
            cursor: pointer;
            color: #555;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .settings-btn:hover {
            color: #111;
        }
        .update-red-dot {
            position: absolute;
            width: 8px;
            height: 8px;
            background-color: #FF4D4F;
            border-radius: 50%;
            top: -2px;
            right: -2px;
            border: 1px solid #ebebeb;
            pointer-events: none;
        }

        /* 算粒小徽章 */
        .suanli-badge {
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            padding: 4px 8px;
            font-size: 11px;
            font-weight: bold;
            color: #444;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            cursor: pointer;
        }
        .suanli-badge:hover {
            transform: translateY(-1px);
        }
        .suanli-title-row {
            display: flex;
            align-items: center;
            gap: 2px;
            margin-bottom: 2px;
        }
        .suanli-text {
            font-size: 12px;
            font-weight: 600;
            color: #344557;
        }
        .suanli-value {
            font-size: 12px;
            font-weight: 600;
            color: #ff3b30;
        }

        /* 第2栏：历史对话列表 */
        .session-sidebar {
            width: 260px;
            background-color: rgba(248, 249, 250, 0.8);
            border-right: 1px solid var(--border-light);
            display: flex;
            flex-direction: column;
            z-index: 5;
            margin-top: 0;
            border-radius: 0;
            transform: translateZ(0);
            backface-visibility: hidden;
            perspective: 1000px;
        }

        .new-chat-wrapper {
            padding: 15px 15px 10px;
        }

        .btn-new-chat {
            width: 100%;
            height: 38px;
            background-color: var(--primary-light);
            border: 1px solid var(--primary-border);
            border-radius: 8px;
            color: var(--primary);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.25s;
        }
        .btn-new-chat:hover {
            background-color: var(--primary);
            border-color: var(--primary);
            color: white;
        }

        /* 折叠分割线 */
        .collapse-divider {
            padding: 0 12px;
            height: 30px;
            display: flex;
            align-items: center;
            cursor: pointer;
            background: #ddd;
        }
        .divider-line {
            flex: 1;
            height: 1px;
            background-color: rgba(0,0,0,0.08);
        }
        .divider-text {
            font-size: 11px;
            color: var(--text-muted);
            margin: 0 12px;
            transition: color 0.2s;
        }
        .collapse-divider:hover .divider-text {
            color: #666;
        }

        .session-list {
            flex: 1;
            overflow-y: auto;
            padding: 0;
        }
        .session-list::-webkit-scrollbar {
            width: 4px;
        }
        .session-list::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.15);
            border-radius: 2px;
        }

        .session-item {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            cursor: pointer;
            transition: background-color 0.25s;
            position: relative;
        }
        .session-item:hover {
            background-color: #F2F9FF;
        }
        .session-item.active {
            background-color: #dbe8fc !important;
        }
        .session-item.pinned {
            background-color: rgba(0, 0, 0, 0.03);
        }
        .session-item.pinned:hover {
            background-color: #EBF5FF;
        }

        .session-avatar {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0,0,0,0.15);
            margin-right: 12px;
            flex-shrink: 0;
        }
        .session-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .session-info {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
        }

        .session-title-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .session-title {
            font-size: 13px;
            font-weight: 600;
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            padding-right: 8px;
        }
        .session-item.active .session-title {
            color: #1A73E8;
        }

        .session-title-input {
            width: 100%;
            font-size: 13px;
            font-weight: 600;
            padding: 2px 4px;
            border: 1px solid var(--primary);
            border-radius: 4px;
            outline: none;
            display: none;
        }

        .session-time {
            font-size: 10px;
            color: var(--text-muted);
            flex-shrink: 0;
        }

        .session-preview {
            font-size: 13px;
            color: #888;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 4px;
        }

        /* 统一双边栏虚化底板 */
        .double-sidebar-glass {
            position: absolute;
            left: 68px;
            top: 0; 
            width: 260px;
            height: 100vh; 
            background: rgba(255, 255, 255, 0.8);
            border-right: 1px solid var(--border-light);
            z-index: 1;
            box-shadow: 0 -4px 15px rgba(0,0,0,0.08);
            pointer-events: none;
            transform: translateZ(0);
            backface-visibility: hidden;
            perspective: 1000px;
        }

        /* 右侧主聊天区 */
        .chat-main {
            flex: 1;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            position: relative;
            margin-top: 0;
            border-top-left-radius: 0 !important;
            background: rgba(255, 255, 255, 0.87);
            box-shadow: -8px 0 20px rgba(0,0,0,0.08);
            overflow: hidden;
            z-index: 2;
            transform: translateZ(0);
            backface-visibility: hidden;
            perspective: 1000px;
        }

        /* 顶部导航与模型下拉菜单*/
        .chat-header {
            height: 48px;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
            padding: 0 20px;
            justify-content: space-between;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .model-selector-btn {
            background: transparent;
            border: none;
            cursor: pointer;
            border-radius: 6px;
            padding: 6px 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: background-color 0.2s;
        }
        .model-selector-btn:hover {
            background-color: rgba(0,0,0,0.05);
        }
        .model-name {
            font-size: 14px;
            font-weight: bold;
            color: #333;
        }
        
        /* 已下架标签 */
        .offshelf-badge {
            background: linear-gradient(135deg, #B0B5BD 0%, #8A919D 100%);
            color: white;
            font-size: 10px;
            font-weight: bold;
            padding: 2px 8px;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .header-status-area {
            display: flex;
            align-items: center;
            gap: 6px;
            border-left: 1px solid #e8e8e8;
            padding-left: 12px;
        }
        .status-dot {
            width: 6px;
            height: 6px;
            background-color: #34c759;
            border-radius: 50%;
        }
        .suanli-cost-tip {
            font-size: 12px;
            color: #888;
        }

        /* 连接成功闪现Tip */
        .connection-tip {
            font-size: 12px;
            color: #999999;
            opacity: 0;
            transform: translateX(20px);
            transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .connection-tip.show {
            opacity: 1;
            transform: translateX(0);
        }

        
        .model-dropdown-panel {
            position: absolute;
            top: 48px;
            left: 20px;
            background: #ffffff;
            border: 1px solid #E5E5E5;
            border-radius: 16px; 
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            width: 440px !important; 
            max-height: 480px;
            padding: 8px 4px 8px 8px; 
            z-index: 1000;
            display: none;
            opacity: 0;
            transform: scale(0.95);
            transform-origin: top left;
            transition: opacity 0.15s, transform 0.15s;
            overflow: hidden; 
        }
        .model-dropdown-panel.show {
            display: block;
            opacity: 1;
            transform: scale(1);
        }

        .model-list-wrapper {
            max-height: 460px;
            overflow-y: auto;
            padding-right: 5px;
        }
        
        .model-list-wrapper::-webkit-scrollbar {
            width: 5px;
        }
        .model-list-wrapper::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.15);
            border-radius: 10px;
        }
        .model-list-wrapper::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.3);
        }
        .model-list-wrapper::-webkit-scrollbar-track {
            background: transparent;
        }

        /* 动态模型卡片 */
        .model-item-card {
            width: 100%;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 12px;
            padding: 12px;
            cursor: pointer;
            text-align: left;
            transition: all 0.15s ease;
            margin-bottom: 8px;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
        }
        .model-item-card:hover {
            background-color: #F5F7FA;
        }
        .model-item-card.active {
            background-color: #E8F2FF !important; 
        }

        .model-item-locked .model-item-main-content {
            opacity: 0.45; 
        }

        .model-item-header {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            width: 100%;
        }
        
        /* 头像容器 */
        .model-item-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #EAEAEA;
            background: #FAFAFA;
        }
        .model-item-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .model-item-meta {
            flex: 1;
            min-width: 0;
        }
        .model-item-title-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 4px;
        }
        .model-item-name {
            font-size: 15px;
            font-weight: bold;
            color: #333333;
        }
        
        /* 推荐胶囊 */
        .beco-badge {
            background: #FF5E2A; 
            color: white;
            font-size: 10px;
            font-weight: bold;
            padding: 2px 6px;
            border-radius: 4px;
            line-height: 1;
            display: inline-flex;
            align-items: center;
        }

        /* 标签胶囊 */
        .model-tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 6px;
        }
        .model-tag {
            background: #E8F4FF; 
            border: 1px solid #BCE0FD; 
            color: #1A73E8; 
            font-size: 11px;
            font-weight: 500;
            padding: 2px 8px;
            border-radius: 4px;
            line-height: 1;
            display: inline-flex;
            align-items: center;
        }

        .model-desc {
            font-size: 12.5px;
            color: #666666;
            margin: 8px 0 0 52px; 
            line-height: 1.5;
        }

        .unlock-capsule-btn-inline {
            width: calc(100% - 52px);
            margin: 10px 0 0 52px; 
            height: 32px;
            border-radius: 16px;
            border: none;
            font-size: 12px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all 0.2s ease;
            box-sizing: border-box;
            line-height: 1 !important;
        }
        
        /* 场景A：LockState == 0 (锁死，算粒不足) */
        .unlock-capsule-btn-inline.locked-disabled {
            background-color: #B0B5BD; 
            color: #FFFFFF;
            cursor: not-allowed;
        }
        
        /* 场景B：LockState == 2 (可点击解锁) */
        .unlock-capsule-btn-inline.can-unlock-active {
            background-color: var(--primary); 
            color: #FFFFFF;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(79, 168, 249, 0.3);
        }
        .unlock-capsule-btn-inline.can-unlock-active:hover {
            background-color: var(--primary-hover);
        }

        /* 聊天渲染区域 */
        .chat-body {
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 1;
            padding: 20px 20px 45px 20px;
        }

        .chat-welcome-state {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .welcome-title {
            font-size: 38px;
            font-weight: 800;
            color: #ebebeb;
            letter-spacing: 2px;
            margin-bottom: 8px;
        }
        .welcome-subtitle {
            font-size: 16px;
            color: #ccc;
            letter-spacing: 4px;
        }

        /* 底部输入及控制组件 */
        /* 容器整体定位 */
        .bottom-control-container {
            display: flex;
            flex-direction: column;
            position: relative;
            background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 30%);
            z-index: 10;
            margin-top: -20px !important;
        }

        .image-controller-panel {
            position: absolute !important;
            left: 14px !important;
            right: 14px !important;
            bottom: calc(100% + 4px) !important;
            background: #ffffff !important;
            box-shadow: 0 -4px 16px rgba(0, 122, 255, 0.08), 0 4px 16px rgba(0, 122, 255, 0.04) !important;
            border-radius: 14px !important;
            z-index: 15 !important;
            
            height: 0px !important;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateY(10px);
            display: flex !important;
            flex-flow: row wrap !important; 
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 8px 8px !important; 
            padding: 0 !important;
            grid-template-columns: none !important; 
            
            transition: height 0.2s ease, opacity 0.2s ease, transform 0.2s ease !important;
        }
        
        .panel-left-static {
            display: flex !important;
            align-items: center !important;
            flex-shrink: 0 !important;
            margin: 0 10px 0 0;
        }
        
        .panel-right-flow {
            display: flex !important;
            flex-wrap: wrap !important; 
            align-items: center !important;
            gap: 8px 10px !important;
            flex: 1 !important;
        }
        
        .image-controller-panel.active {
            height: auto !important;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
            border: 1px solid #d1e3ff !important;
            padding: 8px 10px !important;
            transform: translateY(0) !important;
            overflow: visible !important;
        }
        .image-controller-panel > * {
            flex-shrink: 0 !important;
            white-space: nowrap !important;
        }
        
        .image-controller-panel.active::-webkit-scrollbar {
            display: none;
        }

        .panel-left-tools {
            display: inline-flex !important;
            align-items: center !important;
            flex-shrink: 0 !important;
        }
        .panel-left-tools::-webkit-scrollbar {
            display: none;
        }
        
        .image-controller-panel .dropdown-wrapper,
        .image-controller-panel > .dropdown-wrapper {
            display: inline-flex !important;
        }
        
        .image-controller-panel {
            display: grid !important;
            grid-template-columns: auto 1fr !important;
            gap: 8px 10px !important;
        }

        .panel-title {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-weight: bold;
            color: #475467;
        }

        .tool-separator {
            width: 1px;
            height: 12px;
            background-color: #F2F4F7;
        }

        .gray-dropdown-btn {
            height: 30px;
            background: #FFFFFF;
            border: 1px solid #D0D5DD;
            border-radius: 6px;
            padding: 3px 8px 5px 8px;
            cursor: pointer;
            display: flex;
            align-items: center !important;
            gap: 6px;
            font-size: 12px;
            color: #344054;
            transition: all 0.15s;
            line-height: 3 !important;
            display: inline-flex !important;
        }
        .gray-dropdown-btn:hover {
            background-color: #F9FAFB;
            border-color: #98A2B3;
        }

        .aspect-preview-box {
            width: 16px !important;
            height: 16px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        .aspect-card-item .aspect-preview-box {
            width: 32px !important;
            height: 32px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-sizing: border-box !important;
        }

        .aspect-preview-border {
            border: 1.5px solid #475467 !important; 
            border-radius: 3px !important; 
            background-color: #F2F4F7 !important; 
            box-sizing: border-box !important;
            display: inline-block;
        }

        /* 去Ai水印文字链接 */
        .btn-remove-wm {
            background: transparent;
            border: none;
            cursor: pointer;
            font-size: 11px;
            color: #667085;
            padding: 2px 4px;
            transition: color 0.15s;
        }
        .btn-remove-wm:hover {
            color: #0EA5E9;
        }

        .dropdown-wrapper {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .upward-dropdown {
            position: absolute !important;
            bottom: calc(100% + 8px) !important; 
            top: auto !important;
            background: #ffffff !important;
            border: 1px solid #E5E7EB !important;
            border-radius: 12px !important;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
            display: none;
            z-index: 1000 !important;
        }
        .upward-dropdown {
            left: 0 !important;
            min-width: 110px !important;
            padding: 4px !important;
        }

        .dropdown-menu-item {
            width: 100%;
            padding: 8px 12px;
            font-size: 12.5px;
            color: #344054;
            background: transparent;
            border: none;
            border-radius: 6px;
            text-align: left;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: background-color 0.15s;
        }
        .dropdown-menu-item:hover {
            background-color: #F3F4F6;
            color: #111;
        }
        .dropdown-menu-item.active {
            background-color: #EEF2FF;
            color: #4F46E5;
            font-weight: 600;
        }

        /* 宽高比弹出面板 */
        .aspect-flyout-panel {
            position: absolute !important;
            bottom: calc(100% + 8px) !important; 
            top: auto !important; 
            background: #ffffff !important;
            border: 1px solid #E5E7EB !important;
            border-radius: 12px !important;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
            display: none;
            z-index: 1000 !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            width: 350px !important;
        }
        .aspect-flyout-header {
            border-bottom: 1px solid #F2F4F7;
            padding: 10px 12px;
            font-size: 12px;
            font-weight: bold;
            color: #1D2939;
        }

        .aspect-flyout-grid {
            display: grid !important;
            grid-template-columns: repeat(5, 1fr) !important;
            gap: 6px !important;
            padding: 8px 12px 8px 8px !important;
            max-height: 250px !important; 
            overflow-y: auto !important;
        }

        .aspect-flyout-grid::-webkit-scrollbar,
        .style-grid::-webkit-scrollbar {
            width: 4px !important; 
        }
        .aspect-flyout-grid::-webkit-scrollbar-thumb,
        .style-grid::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.1) !important; 
            border-radius: 2px !important;
        }
        .aspect-flyout-grid::-webkit-scrollbar-thumb:hover,
        .style-grid::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.25) !important;
        }
        .aspect-flyout-grid::-webkit-scrollbar-track,
        .style-grid::-webkit-scrollbar-track {
            background: transparent !important;
        }
        .aspect-card-item {
            width: 100% !important;
            height: 64px !important; 
            border-radius: 10px !important; 
            border: 1.5px solid transparent !important; 
            background: transparent !important;
            cursor: pointer;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 4px !important;
            transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
            box-sizing: border-box !important;
        }

        .aspect-card-item:hover {
            background-color: #F2F4F7 !important;
            transform: translateY(-1px) !important;
        }

        .aspect-card-item.active {
            background-color: #EEF2FF !important; 
            border-color: #8B93D6 !important;  
        }

        /* 5. 宽高比文字样式 */
        .aspect-card-item span {
            font-size: 11px !important;
            color: #475467 !important;
            font-weight: 500 !important;
            line-height: 1 !important;
        }
        .aspect-card-item.active span {
            color: #312E81 !important;
            font-weight: 700 !important;
        }


        /* 艺术风格选择面板 */
        .style-flyout-panel {
            position: absolute !important;
            bottom: calc(100% + 8px) !important;
            top: auto !important;
            background: #ffffff !important;
            border: 1px solid #E5E7EB !important;
            border-radius: 12px !important;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
            display: none;
            z-index: 1000 !important;
            right: 0 !important;
            left: auto !important;
            width: 390px !important; 
        }
        .style-flyout-header {
            border-bottom: 1px solid #F2F4F7;
            padding: 12px;
            font-size: 12.5px;
            font-weight: bold;
            color: #1D2939;
        }
        .style-grid {
            display: grid !important;
            grid-template-columns: repeat(4, 1fr) !important; 
            gap: 6px !important;
            padding: 8px 12px 8px 8px !important; 
            max-height: 260px !important; 
            overflow-y: auto !important;
        }
        .style-card-btn {
            width: 100% !important; 
            height: 110px !important;
            border-radius: 10px;
            border: 1px solid transparent;
            background: transparent;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 4px;
            gap: 6px;
            transition: background-color 0.15s ease, transform 0.15s ease !important;
            will-change: transform, background-color;
        }
        .style-card-btn:hover {
            background-color: #F9FAFB;
            border-color: #EAECF0;
            transform: scale(1.03) translateY(-1px);
        }
        .style-card-preview {
            width: 72px;
            height: 72px;
            border-radius: 8px;
            overflow: hidden;
        }
        .style-card-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .style-card-text {
            font-size: 11.5px;
            font-weight: 500;
            color: #344054;
        }
        
        /* 艺术风格卡片高亮 */
        .style-card-btn.active {
            background-color: #EEF2FF !important;
            border-color: #6366F1 !important;
        }
        .style-card-btn.active .style-card-text {
            color: #4F46E5 !important;
            font-weight: bold;
        }

        .style-custom-preview {
            width: 72px;
            height: 72px;
            border-radius: 8px;
            background: linear-gradient(135deg, #F1F5F9 0%, #CBD5E1 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
        }

        .style-custom-icon {
            width: 24px;
            height: 24px;
            fill: #64748B;
        }

        .input-card-wrapper {
            margin: 0 14px 14px 15px !important; 
            position: relative;
            z-index: 10;
            background-color: #ffffff !important;
            border: 1px solid #d1e3ff !important;
            border-radius: 18px !important;
            padding: 10px 16px !important;
            box-shadow: 0 4px 20px rgba(0, 122, 255, 0.06) !important;
            display: flex;
            flex-direction: column;
            max-height: 550px;
            transition: all 0.3s ease;
        }
        .input-card-wrapper:focus-within {
            border-color: #007aff !important;
            box-shadow: 0 4px 24px rgba(0, 122, 255, 0.12) !important;
        }

        .pending-attachments-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 0px;
            max-height: 220px;
            overflow-y: auto;
            transition: all 0.2s ease;
        }
        
        .pending-attachments-row:empty,
        .pending-attachments-row.is-empty {
            display: none !important;
            margin: 0 !important;
            padding: 0 !important;
            height: 0 !important;
            max-height: 0 !important;
        }

        /* 附件小胶囊 */
        .attachment-chip {
            position: relative !important;   
            overflow: hidden !important; 
            display: inline-flex;
            align-items: center;
            border-radius: 12px;             
            padding: 6px 12px;
            gap: 8px;
            max-width: 280px;                
            transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
            box-sizing: border-box;
            user-select: none;
            margin-bottom: 8px;
        }

        .input-card-wrapper .attachment-chip {
            background: #ffffff !important;             
            border: 1px solid #e2e8f0 !important;       
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04) !important; 
        }
        .input-card-wrapper .attachment-chip:hover {
            border-color: #cbd5e1 !important;
            background: #f8fafc !important;
        }

        .message-container .attachment-chip {
            background: #ffffff !important;
            border: 1px solid #e2e8f0 !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
        }
        .message-container .attachment-chip:hover {
            border-color: #007aff !important; 
            transform: translateY(-1.5px); 
            box-shadow: 0 6px 16px rgba(0, 122, 255, 0.12), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
        }

        /* 内部公共元素 */
        .chip-content {
            display: flex;
            align-items: center;
            width: 100%;
            z-index: 2;
            height: 100%;
        }

        /* 文件类型微型徽章 */
        .file-badge {
            border-radius: 6px;
            padding: 0 6px;
            height: 20px;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
            color: white;
            flex-shrink: 0;
            line-height: 1 !important;
        }

        .file-name-text {
            font-size: 12px;
            font-weight: 600;
            margin: 0 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            line-height: 1 !important;
            display: inline-flex !important;
            align-items: center;
            height: 100%;
            color: #334155 !important; 
        }

        /* 进度条 */
        .chip-progress-bar {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background-color: #D4EAF7;
            z-index: 1;
            transition: width 0.3s, opacity 0.5s ease-out;
            pointer-events: none;
        }

        /* 8. 删除按钮 (仅在输入框准备发送时显示，气泡中自动隐藏) */
        .chip-close-btn {
            background: transparent;
            border: none;
            color: #94a3b8;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            transition: all 0.2s;
        }
        .chip-close-btn:hover {
            background-color: #FFE0E0;
            color: #FF4A4A;
        }

        /* 🌟 核心机制：历史气泡中的附件不需要删除红叉 */
        .message-container .attachment-chip .chip-close-btn {
            display: none !important;
        }

        .chat-textarea {
            width: 100%;
            background: transparent;
            border: none;
            resize: none;
            outline: none;
            font-size: 15px;
            color: var(--text-dark);
            height: 34px;               /* 🌟 初始硬锁定一行半高度 (1.5 lines) */
            min-height: 34px;           /* 🌟 确保最小高度也是一行半 */
            max-height: 158px;          /* 7行文字最大高度 */
            line-height: 22px;          /* 完美的行高，确保字不贴顶 */
            padding: 0 0 0 6px !important;  /* 内部上下留白 */
            box-sizing: border-box;
            overflow-y: hidden;
            transition: none !important; /* 🌟 必须禁用过渡动画，防止打字时高度延迟闪烁 */
        }
        .chat-textarea::placeholder {
            color: #ccc;
        }

        /* 输入框底部工具栏 */
        .input-card-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 8px;
        }

        /* ========================================== */
        /* 🎨 6.3 匀称化工具栏（统32px高度轴，完美防抖，无缝垂直居中） */
        /* ========================================== */
        .bottom-left-group {
            display: flex;
            align-items: center; /* 强力锁死中线对齐 */
            gap: 8px !important; /* 舒适间距 */
        }

        /* 🌟 超级记忆按钮（绝对物理尺寸锁死，彻底解决位移） */
        .btn-supermemory-toggle {
            width: 108px !important;  /* 🌟 物理硬锁：100% 免疫任何微小字符宽度抖动 */
            height: 32px !important;  /* 锁死 32px 高度 */
            padding: 0 !important;    /* 🌟 设为0，靠 width + flex 完美平分定位，彻底掐灭布局挤压 */
            background: #ffffff !important;
            color: #667085 !important;
            border: 1px solid #D0E5F5 !important; /* 默认 1px 物理边框占位 */
            border-radius: 16px !important;
            font-size: 12.5px !important;
            font-weight: 600 !important;
            cursor: pointer;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            gap: 6px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
            line-height: 2 !important; /* 🌟 强制去除中文字体下沉空间，实现绝对垂直居中 */
            
            /* 丝滑过渡（涵盖 border-color） */
            transition: 
                background 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.15s ease !important;
            outline: none;
            opacity: 1 !important;
        }

        /* 基础状态 Hover / Active */
        .btn-supermemory-toggle:hover {
            background: #F8F0FF !important;
            border-color: #B54DFF !important;
            color: #B54DFF !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(181, 77, 255, 0.1) !important;
        }
        .btn-supermemory-toggle:active {
            transform: scale(0.96) !important;
        }

        /* 选中激活状态 */
        .btn-supermemory-toggle.checked {
            background: linear-gradient(108deg, #f27bff 0%, #ca76ff 45%, #7697ff 100%) !important;
            color: #ffffff !important;
            /* 维持 1px 物理空间，百分之百防止右侧按钮发生位移 */
            border: 1px solid transparent !important; 
            box-shadow: 0 2px 6px rgba(220, 118, 255, 0.35), 
                        0 1px 2px rgba(118, 151, 255, 0.2) !important;
        }
        .btn-supermemory-toggle.checked:hover {
            transform: scale(1.03) translateY(-1px) !important;
            box-shadow: 0 4px 12px rgba(220, 118, 255, 0.45), 
                        0 1px 3px rgba(118, 151, 255, 0.25) !important;
        }
        .btn-supermemory-toggle.checked:active {
            transform: scale(0.96) !important;
        }
        
        /* 超级记忆星阵 SVG */
        .nebula-svg {
            width: 18px;
            height: 18px;
            display: block; /* 移除内联空隙 */
        }

        /* 普通圆形工具按钮（32x32px 正圆） */
        .tool-toggle-btn {
            width: 44px !important;  /* 🌟 从 32px 拉宽至 44px，秒变精致短胶囊 */
            height: 32px !important; 
            border-radius: 16px !important; /* 维持 16px，两端完美润圆 */
            border: 1px solid #D0E5F5 !important;
            background: transparent;
            color: #555555;
            cursor: pointer;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .tool-toggle-btn:hover {
            background-color: #EDF6FF !important;
            border-color: var(--primary) !important;
            color: var(--primary) !important;
            transform: translateY(-1px);
        }
        .tool-toggle-btn:active {
            transform: scale(0.95) !important;
            background-color: #D8EDFF !important;
        }

        /* 附件大类上传按钮（32x32px 正圆） */
        .btn-attachment-master {
            width: 44px !important;  /* 🌟 从 32px 拉宽至 44px，保持一致 */
            height: 32px !important;
            border-radius: 16px !important; /* 维持 16px */
            border: 1px solid #D0E5F5 !important;
            background: transparent;
            color: #888888;
            cursor: pointer;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        .btn-attachment-master:hover {
            background-color: #EDF6FF !important;
            border-color: var(--primary) !important;
            color: var(--primary) !important;
            transform: translateY(-1px);
        }
        .btn-attachment-master:active {
            transform: scale(0.95) !important;
        }
                /* ========================================== */
        /* 🎨 底部小功能按钮：大一统高质感光晕激活态     */
        /* ========================================== */
        .tool-toggle-btn.checked,
        .btn-attachment-master.active,
        .btn-attachment-master#imageModelQuickBtn.linked-blue {
            background-color: #EFF6FF !important;       /* 极其温柔的晴空蓝底色 */
            border-color: #3B82F6 !important;           /* 经典科技蓝中线描边 */
            color: #1D4ED8 !important;                  /* 1:1 饱满度的深蓝图标色 */
            box-shadow: 0 0 12px rgba(59, 130, 246, 0.35) !important; /* 🌟 核心：外扩 12px 弥散蓝光 */
            font-weight: bold;
        }

        /* 统一激活状态下的悬浮（Hover）物理微动效 */
        .tool-toggle-btn.checked:hover,
        .btn-attachment-master.active:hover,
        .btn-attachment-master#imageModelQuickBtn.linked-blue:hover {
            background-color: #E0F0FF !important;
            box-shadow: 0 0 16px rgba(59, 130, 246, 0.48) !important; /* 悬浮时光晕稍微增强 */
            transform: translateY(-1px) !important;
        }

        /* 现代发送按钮：去掉 display 的 !important 限制 */
        .btn-send-msg {
            height: 32px !important; 
            padding: 0 16px !important;
            font-size: 12.5px !important;
            font-weight: 600 !important; 
            border-radius: 16px !important;
            cursor: pointer;
            display: inline-flex; /* 🌟 核心修改：去掉 !important */
            align-items: center;
            justify-content: center;
            gap: 6px;
            line-height: 1 !important; 
            background-color: #007AFF !important; 
            color: #ffffff !important;
            border: 1px solid transparent !important; 
            box-shadow: 0 2px 8px rgba(0, 122, 255, 0.16) !important;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        /* 现代 Hover：仅微弱提亮 + 微幅优雅缩放 */
        .btn-send-msg:hover {
            background-color: #1485ff !important;
            box-shadow: 0 4px 12px rgba(0, 122, 255, 0.28) !important;
            transform: translateY(-1px) scale(1.02) !important; 
        }
        .btn-send-msg:active {
            transform: scale(0.97) !important; /* 饱满的物理回弹反馈 */
            box-shadow: 0 1px 3px rgba(0, 122, 255, 0.1) !important;
        }
        
        /* 🌟 2. 现代化停止态：纯色警示红（通过 .sending 激活） */
        .btn-send-msg.sending {
            background-color: #FF3B30 !important; /* 苹果现代纯红 */
            box-shadow: 0 2px 8px rgba(255, 59, 48, 0.16) !important;
        }
        
        /* 停止态 Hover */
        .btn-send-msg.sending:hover {
            background-color: #ff453a !important;
            box-shadow: 0 4px 12px rgba(255, 59, 48, 0.28) !important;
        }

        /* 停止按钮：大一统高质感现代苹果红 */
        .btn-stop-msg {
            height: 32px !important; /* 锁死高度，确保中线绝对对齐 */
            padding: 0 16px !important;
            font-size: 12.5px !important;
            font-weight: 600 !important;
            border-radius: 16px !important;
            cursor: pointer;
            display: none; /* 默认由 JS 动态控制 */
            align-items: center;
            justify-content: center;
            gap: 6px;
            line-height: 1 !important;
            background-color: #FF3B30 !important; /* 现代纯正警示红 */
            color: #ffffff !important;
            border: 1px solid transparent !important;
            box-shadow: 0 2px 8px rgba(255, 59, 48, 0.16) !important;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .btn-stop-msg:hover {
            background-color: #ff453a !important;
            box-shadow: 0 4px 12px rgba(255, 59, 48, 0.28) !important;
            transform: translateY(-1px) scale(1.02) !important;
        }
        .btn-stop-msg:active {
            transform: scale(0.97) !important;
            box-shadow: 0 1px 3px rgba(255, 59, 48, 0.1) !important;
        }

                /* ========================================== */
        /* 🎨 7. 附件分类上传 Flyout 弹窗 (原版高质感-仅移动位置) */
        /* ========================================== */
        .attachment-flyout-panel {
            position: absolute;
            
            /* 🌟 唯一改动：只把 bottom 从 60px 提到 80px，留出绝对安全的呼吸间距 */
            bottom: 80px !important;
            left: 190px !important;
            
            /* 🔒 以下完全还原你最初高保真、高对比度的深黑晶样式，绝不偏色 */
            background: rgba(30, 30, 30, 0.92) !important;
            border: 1px solid rgba(255, 255, 255, 0.25) !important;
            border-radius: 12px !important;
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.38) !important;
            width: 300px !important;
            padding: 4px !important;
            
            display: none;
            z-index: 100;
        }
        
        /* 激活状态 */
        .attachment-flyout-panel.show {
            display: block;
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        .attachment-item-btn {
            width: 100%;
            background: transparent;
            border: none;
            border-radius: 8px;
            padding: 12px 10px;
            cursor: pointer;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: background-color 0.15s;
        }
        .attachment-item-btn:hover {
            background-color: rgba(255,255,255,0.15);
        }
        .attachment-btn-info {
            display: flex;
            flex-direction: column;
        }
        .attachment-btn-title {
            font-size: 13px;
            font-weight: bold;
            color: white;
        }
        .attachment-btn-desc {
            font-size: 11px;
            color: #999999;
            margin-top: 2px;
            line-height: 1.4;
        }

        /* ========================================== */
        /* 🎨 8. 生图子弹窗：关闭生图特殊反差按钮        */
        /* ========================================== */
        .btn-close-image-gen {
            background: #2D3139;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 10px 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: calc(100% - 16px);
            margin: 4px 8px;
            transition: background-color 0.15s;
        }
        .btn-close-image-gen:hover {
            background-color: #3F4450;
        }
        .btn-close-image-gen:active {
            background-color: #1F2228;
        }

        /* ========================================== */
        /* 🎨 9. 欠费视觉阻断与算粒不足蒙版             */
        /* ========================================== */
        .arrears-blur {
            filter: blur(5px);
            pointer-events: none;
        }
        .notick-overlay-mask {
            position: absolute;
            top: 48px;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.38);
            z-index: 999;
            display: none;
            align-items: center;
            justify-content: center;
        }
        .arrears-card {
            background: white;
            padding: 35px 40px;
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.25);
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 320px;
        }
        .arrears-title {
            font-size: 22px;
            font-weight: bold;
            color: #333;
            margin-bottom: 12px;
        }
        .arrears-desc {
            font-size: 14px;
            color: #666;
            margin-bottom: 25px;
            text-align: center;
            line-height: 1.5;
        }
        .btn-charge-suanli {
            width: 120px;
            height: 36px;
            background-color: #2B7AEF;
            color: white;
            font-size: 15px;
            font-weight: bold;
            border: none;
            border-radius: 18px;
            cursor: pointer;
            transition: all 0.25s ease-out;
        }
        .btn-charge-suanli:hover {
            background-color: #1A5ABF;
            transform: scale(1.03);
        }
        .btn-charge-suanli:active {
            transform: scale(0.95);
            background-color: #12408A;
        }

        /* ========================================== */
        /* 🎨 10. 全局拖拽附件弹出蒙版                 */
        /* ========================================== */
        .drag-overlay-mask {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.65);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }
        .drag-mask-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            color: white;
        }

        /* ========================================== */
        /* 🎨 11. 底部算力经验条                       */
        /* ========================================== */
        .bottom-ticks-progressbar {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background-color: rgba(43, 122, 239, 0.1);
            z-index: 1000;
        }
        .progressbar-fill {
            height: 100%;
            width: 71.17%;
            background: linear-gradient(90deg, #FF1BEE 0%, #FF1BEE 45%, #2B7AEF 100%);
            border-bottom-left-radius: 16px;
            border-bottom-right-radius: 16px;
            transition: width 0.5s ease;
        }

        /* ========================================== */
        /* 🎨 12. 会话右键上下文菜单样式                */
        /* ========================================== */
        .context-menu {
            position: fixed;
            background: white;
            border: 1px solid #E5E5E5;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
            padding: 4px;
            z-index: 10000;
            display: none;
            width: 120px;
        }
        .context-menu-item {
            padding: 8px 12px;
            font-size: 13px;
            color: #333;
            cursor: pointer;
            border-radius: 6px;
            transition: background-color 0.15s;
        }
        .context-menu-item:hover {
            background-color: #F2F8FF;
        }
        .context-menu-item.delete {
            color: #E53935;
        }
        
        
        /* 1. 算粒文字颜色：从亮红改为淡灰色 */
.session-ticks { /* 请对齐你代码中算粒的类名 */
    color: #a0a0a0 !important; /* 柔和的淡灰色 */
    font-size: 11px;
}

/* 2. 算粒这一行的容器，设置为弹性布局，方便放三点菜单 */
.session-ticks-row { /* 或者是包裹算粒文字的那个父级 div */
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    height: 20px;
}

/* 3. 三点菜单键样式（默认隐藏） */
.session-menu-btn {
    display: none; /* 默认隐藏 */
    cursor: pointer;
    color: #999;
    font-size: 16px;
    font-weight: bold;
    padding: 0px 6px 3px 6px;
    margin-top: 3px;
    border-radius: 4px;
    line-height: 1;
    transition: background-color 0.2s, color 0.2s;
    user-select: none;
}

.session-menu-btn {
    display: inline-block;
    opacity: 0.6; /* 移动端常驻显示时，稍微调淡一点，显得精致不抢戏 */
}

/* 💻 仅在支持鼠标悬浮的 PC 设备上，才启用“悬浮显隐”和“悬浮变色” */
@media (hover: hover) {
    /* PC端默认隐藏三点按钮 */
    .session-menu-btn {
        display: none;
        opacity: 1;
    }
    
    /* PC端悬浮时才显示 */
    .session-item:hover .session-menu-btn {
        display: inline-block;
    }
    
    /* PC端悬浮背景变色 */
    .session-item:hover {
        background-color: #F2F9FF;
    }
}

/* 5. 折叠置顶栏的背景色（比置顶块的灰色稍稍深/灰一些些） */
/* 假设你置顶块的背景色是 #f4f5f7 左右 */
.fold-pinned-bar { /* 请对齐你“折叠 12 条置顶”那一整条的类名 */
    background-color: #e9ebef !important; /* 稍微深一点点的雅致灰 */
    border-top: 1px solid #e1e3e8;
    border-bottom: 1px solid #e1e3e8;
}


/* 🌟 彻底修复：风格选择按钮内部元素垂直居中对齐 */
#styleSelectorBtn, .gray-dropdown-btn {
    display: inline-flex !important;
    align-items: center !important;      /* 强制所有子元素严格垂直居中 */
    justify-content: center !important;
    height: 30px !important;             /* 锁定 30px 高度 */
    padding: 0 8px !important;           /* 🌟 设为 0 彻底干掉导致偏高的默认上下 Padding，只留左右间距 */
    gap: 6px !important;                 /* 统一内部元素（图片、文字、箭头）的间距 */
    box-sizing: border-box !important;
}

/* 确保图片容器作为 inline-flex 参与对齐，消除 baseline 偏差 */
.style-btn-preview-container {
    display: inline-flex !important;     /* 🌟 从 flex 升级为 inline-flex，彻底消除行内对齐偏位 */
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    margin: 0 !important;                /* 清除所有意外的外边距干扰 */
}

/* 消除文字因行高引发的微小偏位 */
#activeStyleName {
    line-height: 1 !important;           /* 锁死单倍行高，防止文字自带的行间距把按钮撑歪 */
    display: inline-block;
}

/* 选中自由定义时的渐变背景（1:1 还原 XAML #94A3B8 -> #CBD5E1） */
.style-btn-preview-custom {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #94A3B8 0%, #CBD5E1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.style-btn-preview-custom svg {
    width: 10px;
    height: 10px;
    fill: #FFFFFF; /* 白色矢量画笔 */
}

/* 选中普通风格时的缩略小图 */
.style-btn-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


                /* ========================================== */
        /* 🎨 13. 网页版专属：双模登录面板与滑动验证       */
        /* ========================================== */
        .zone-login-overlay {
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100vw; 
            height: 100vh;
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            display: none; 
            align-items: center; 
            justify-content: center;
            z-index: 99999; /* 凌驾于所有元素之上 */
            opacity: 0;
            transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .zone-login-overlay.zone-active {
            opacity: 1;
        }
        .zone-login-modal {
            background: rgba(255, 255, 255, 0.98);
            width: 380px;
            border-radius: 24px;
            padding: 40px 30px;
            position: relative;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 
                0 4px 6px -1px rgba(0, 0, 0, 0.05),
                0 25px 50px -12px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            transform: scale(0.92) translateY(15px);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .zone-login-overlay.zone-active .zone-login-modal {
            transform: scale(1) translateY(0);
        }
        .zone-close-btn {
            position: absolute; top: 20px; right: 20px;
            background: none; border: none; font-size: 20px; color: #999;
            cursor: pointer; padding: 5px; line-height: 1; transition: color 0.2s;
        }
        .zone-close-btn:hover { color: #333; }
        .zone-logo-text {
            font-size: 44px; font-weight: 900;
            text-align: center; margin: 0; letter-spacing: 1px;
            background: linear-gradient(90deg, #FF00A0 0%, #8A2BE2 50%, #00BFFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .zone-subtitle {
            text-align: center; color: #888; font-size: 13px;
            margin: 8px 0 35px; letter-spacing: 1px;
        }
        .zone-form-group { margin-bottom: 22px; }
        .zone-label { display: block; font-size: 14px; color: #333; margin-bottom: 8px; font-weight: 600; }
        
        .zone-input {
            width: 100%; height: 50px; box-sizing: border-box; padding: 0 16px;
            border: 1px solid #e2e8f0; border-radius: 10px;
            font-size: 16px; /* 🌟 物理提至 16px，彻底阻止 iOS 登录聚焦自动放大的流氓行为 */
            color: #333; outline: none; transition: border 0.25s, box-shadow 0.25s;
            background: #fff;
        }
        
        .zone-code-input {
            flex: 1; min-width: 0; border: none; outline: none; 
            height: 100%; 
            font-size: 16px; /* 🌟 物理提至 16px */
            background: transparent;
            padding: 0; margin: 0;
        }
        
        .zone-code-wrapper {
            display: flex; align-items: center;
            border: 1px solid #e2e8f0; border-radius: 10px;
            padding: 0 16px; height: 50px; box-sizing: border-box;
            background: #fff; transition: border 0.25s, box-shadow 0.25s;
        }
        .zone-code-wrapper:focus-within { 
            border-color: var(--primary); 
            box-shadow: 0 0 0 3px rgba(79, 168, 249, 0.15);
        }
        .zone-code-input {
            flex: 1; min-width: 0; border: none; outline: none; 
            height: 100%; font-size: 15px; background: transparent;
            padding: 0; margin: 0;
        }
        .zone-divider { width: 1px; height: 18px; background: #e2e8f0; margin: 0 16px; flex-shrink: 0; }
        
        .zone-get-code {
            border: none; background: none; color: var(--primary); font-size: 14px;
            font-weight: 600; cursor: pointer; padding: 0; white-space: nowrap;
            flex-shrink: 0; transition: color 0.2s;
        }
        .zone-get-code:disabled {
            color: #94a3b8; cursor: not-allowed;
        }
        .zone-agreement {
            display: flex; align-items: center; justify-content: center;
            font-size: 12px; color: #666; margin-bottom: 24px;
        }
        .zone-agreement input[type="checkbox"] { margin-right: 8px; cursor: pointer; width: 14px; height: 14px; }
        .zone-agreement label { cursor: pointer; }
        .zone-agreement a { color: var(--primary); text-decoration: none; font-weight: 500; }
        .zone-agreement a:hover { text-decoration: underline; }
        
        .zone-submit-btn {
            width: 100%; height: 50px; background: var(--primary); color: #fff;
            border: none; border-radius: 12px; font-size: 16px; font-weight: 700;
            cursor: pointer; transition: background 0.2s, transform 0.1s;
            box-shadow: 0 4px 12px rgba(79, 168, 249, 0.3);
        }
        .zone-submit-btn:hover { background: var(--primary-hover); }
        .zone-submit-btn:active { transform: scale(0.98); }
        
        .zone-footer-tip {
            text-align: center; color: #999; font-size: 12px; margin-top: 18px;
        }

                /* =================================================== */
        /* 🎨 网页版滑块：高精度防滑出、像素级贴合样式               */
        /* =================================================== */
        .zone-slider-captcha {
            position: relative;
            width: 100%;
            height: 42px;
            background-color: #f3f3f3;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            margin: 18px 0;
            overflow: hidden;
            touch-action: none;
            
            /* 🌟 核心：强制所有浏览器统一使用标准怪异盒模型 */
            box-sizing: border-box !important;
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            user-select: none !important;
        }

        .zone-slider-captcha * {
            box-sizing: border-box !important; /* 内层元素全部对齐盒模型 */
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            user-select: none !important;
        }

        .zone-slider-bg {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 0px; 
            background-color: rgba(79, 168, 249, 0.15);
            z-index: 1;
            pointer-events: none;
        }

        .zone-slider-text {
            position: absolute;
            width: 100%;
            height: 100%;
            line-height: 40px; /* 垂直居中 */
            text-align: center;
            font-size: 13px;
            color: #64748b;
            z-index: 2;
            pointer-events: none;
        }

        .zone-slider-btn {
            position: absolute;
            left: 0;
            top: 0;
            width: 42px;
            /* 🌟 核心：高度设为 100%，让它完美贴合容器的内壁，上下绝不露缝 */
            height: 100% !important; 
            background-color: #fff;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 3;
            color: #64748b;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            transition: background-color 0.2s, border-color 0.2s;
            touch-action: none;
        }
        .zone-slider-btn:hover {
            color: var(--primary);
            border-color: var(--primary);
        }

        /* ========================================== */
        /* 🎨 生图模型专用选择弹窗（Flyout）与三色变色灯   */
        /* ========================================== */
        .image-model-dropdown-panel {
            position: absolute;
            bottom: 60px; /* 强行固定在底部输入框上方 */
            left: 140px;  /* 精准对准生图按钮的上方 */
            background: #ffffff;
            border: 1px solid #E5E5E5;
            border-radius: 16px;
            box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08), 0 10px 30px rgba(0, 0, 0, 0.05);
            width: 380px !important; /* 稍窄的精致尺寸 */
            max-height: 420px;
            padding: 8px 4px 8px 8px;
            z-index: 1000;
            display: none;
            opacity: 0;
            transform: translateY(15px) scale(0.95); /* 从下往上弹起 */
            transform-origin: bottom left;
            transition: opacity 0.18s cubic-bezier(0.25, 1, 0.5, 1), transform 0.18s cubic-bezier(0.25, 1, 0.5, 1);
            overflow: hidden;
        }
        .image-model-dropdown-panel.show {
            display: block;
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* 顶部黑底关闭生图功能按钮 */
        .btn-close-image-gen-dark {
            background: #1E2124 !important; /* 哑光黑炭背景 */
            color: #FFFFFF !important;
            border: none;
            border-radius: 10px;
            padding: 8px 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: calc(100% - 12px);
            margin: 0 4px 8px 4px;
            font-size: 12px;
            font-weight: bold;
            transition: background-color 0.2s ease, transform 0.1s ease;
            box-sizing: border-box;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            line-height: 1 !important;
        }
        .btn-close-image-gen-dark:hover {
            background-color: #2D3135 !important;
            transform: translateY(-1px);
        }
        .btn-close-image-gen-dark:active {
            transform: scale(0.97);
        }

        /* 🌟 生图快捷按钮的三色状态发光渐变机制 */
        .btn-attachment-master#imageModelQuickBtn {
            transition: background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.2s !important;
        }
        .btn-attachment-master#imageModelQuickBtn:not(.linking-amber):not(.linked-blue):not(.failed-red) svg {
            color: #333 !important; /* 默认状态下，图标呈现你想要的 #ccc 浅灰色 */
        }
        /* 连接中 (橙黄色) */
        .btn-attachment-master#imageModelQuickBtn.linking-amber {
            background-color: #FFFBEB !important;
            border-color: #F59E0B !important;
            color: #D97706 !important;
            box-shadow: 0 0 10px rgba(245, 158, 11, 0.25) !important;
        }
        /* 连接成功 (晴空蓝) */
        .btn-attachment-master#imageModelQuickBtn.linked-blue {
            background-color: #EFF6FF !important;
            border-color: #3B82F6 !important;
            color: #1D4ED8 !important;
            box-shadow: 0 0 12px rgba(59, 130, 246, 0.3) !important;
        }
        /* 连接失败 (警示红) */
        .btn-attachment-master#imageModelQuickBtn.failed-red {
            background-color: #FEF2F2 !important;
            border-color: #EF4444 !important;
            color: #B91C1C !important;
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.25) !important;
        }
        
        
                /* ========================================== */
        /* 💎 全局黑晶悬浮提示框 (Premium Glass Tooltip) */
        /* ========================================== */
        .premium-tooltip {
            position: fixed;
            background: rgba(30, 30, 30, 0.94);
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            color: #ffffff;
            padding: 12px 14px;
            
            /* 🌟 核心改进：自适应弹性宽度，彻底防止硬性挤压换行 */
            width: max-content;
            max-width: 280px;
            box-sizing: border-box; /* 锁死怪异盒模型 */
            
            z-index: 99999;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px) scale(0.96);
            transform-origin: bottom center;
            transition: opacity 0.12s cubic-bezier(0.25, 1, 0.5, 1), 
                        transform 0.12s cubic-bezier(0.25, 1, 0.5, 1);
        }
        /* 激活状态 */
        .premium-tooltip.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }
        /* 标题部分 */
        .premium-tooltip-title {
            font-size: 13px;
            font-weight: bold;
            color: #ffffff;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
        }
        /* 详细简介内容 */
        .premium-tooltip-desc {
            font-size: 11.5px;
            color: #b5b9c2; /* 优雅的灰白字色 */
            line-height: 1.5;
            white-space: pre-line; /* 极其关键：完美保留简介中的换行 */
        }
        
                /* =================================================== */
        /* 🎨 网页版设置面板：1:1 贴合整体高质感磨砂设计           */
        /* =================================================== */
        .zone-settings-overlay {
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100vw; 
            height: 100vh;
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            display: none; 
            align-items: center; 
            justify-content: center;
            z-index: 99998; /* 略低于登录弹窗 */
            opacity: 0;
            transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .zone-settings-overlay.active {
            opacity: 1;
        }
        .zone-settings-modal {
            background: rgba(255, 255, 255, 0.96);
            width: 460px;
            border-radius: 24px;
            padding: 30px 30px;
            position: relative;
            box-sizing: border-box;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 
                0 4px 30px rgba(0, 0, 0, 0.05),
                0 20px 40px rgba(0, 0, 0, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            transform: scale(0.94) translateY(10px);
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .zone-settings-overlay.active .zone-settings-modal {
            transform: scale(1) translateY(0);
        }
        .zone-settings-close-btn {
            position: absolute; top: 22px; right: 22px;
            background: none; border: none; font-size: 18px; color: #999;
            cursor: pointer; padding: 5px; line-height: 1; transition: color 0.2s;
        }
        .zone-settings-close-btn:hover { color: #333; }
        
        .zone-settings-title {
            font-size: 20px; font-weight: 800; color: #1a202c; margin: 0 0 6px;
        }
        .zone-settings-subtitle {
            color: #718096; font-size: 12.5px; margin-bottom: 24px;
        }

        .zone-settings-body {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-bottom: 26px;
        }

        /* 设置卡片组 */
        .settings-group-card {
            background: rgba(248, 250, 252, 0.7);
            border: 1px solid #edf2f7;
            border-radius: 14px;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .settings-meta-info {
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        .settings-item-label {
            font-size: 14px;
            font-weight: 700;
            color: #2d3748;
            margin-bottom: 4px;
        }
        .settings-item-desc {
            font-size: 11px;
            color: #718096;
            line-height: 1.4;
        }

        .settings-control-wrapper {
            flex-shrink: 0;
        }

        /* 极简高级下拉选择框 */
        .zone-settings-select {
            height: 36px;
            padding: 0 12px;
            border-radius: 8px;
            border: 1.5px solid #e2e8f0;
            background-color: #fff;
            color: #333;
            font-size: 13px;
            font-weight: 600;
            outline: none;
            cursor: pointer;
            min-width: 150px;
            transition: all 0.2s;
        }
        .zone-settings-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(79, 168, 249, 0.15);
        }

        /* 💎 极轻奢级 IOS 开关 */
        .premium-switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }
        .premium-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .premium-slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: #e2e8f0;
            transition: .3s;
            border-radius: 24px;
        }
        .premium-slider:before {
            position: absolute;
            content: "";
            height: 18px; width: 18px;
            left: 3px; bottom: 3px;
            background-color: white;
            transition: .3s;
            border-radius: 50%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.15);
        }
        input:checked + .premium-slider {
            background-color: var(--primary);
        }
        input:checked + .premium-slider:before {
            transform: translateX(20px);
        }

        /* 操作区按钮 */
        .zone-settings-footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            border-top: 1px solid #edf2f7;
            padding-top: 18px;
        }
        .settings-cancel-btn {
            height: 38px; padding: 0 16px; border: 1px solid #e2e8f0;
            background: #fff; color: #4a5568; font-size: 13.5px; font-weight: 600;
            border-radius: 10px; cursor: pointer; transition: background 0.2s;
        }
        .settings-cancel-btn:hover { background: #f7fafc; }

        .settings-save-btn {
            height: 38px; padding: 0 20px; border: none;
            background: var(--primary); color: #fff; font-size: 13.5px; font-weight: 700;
            border-radius: 10px; cursor: pointer; transition: all 0.2s;
            box-shadow: 0 4px 10px rgba(79, 168, 249, 0.2);
        }
        .settings-save-btn:hover { background: var(--primary-hover); }
        .settings-save-btn:disabled { background: #cbd5e1; cursor: not-allowed; box-shadow: none; }
        
        
                /* =================================================== */
        /* 🎨 网页版合规大弹窗：1:1 贴和高档黑晶/白瓷美学         */
        /* =================================================== */
        .zone-agreement-overlay {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 99999; /* 凌驾于设置层之上，安全守护 */
            opacity: 0;
            transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .zone-agreement-overlay.active {
            opacity: 1;
        }
        .zone-agreement-modal {
            background: rgba(255, 255, 255, 0.98);
            width: 620px; /* 拓宽尺度，营造阅读庄重感 */
            max-width: 90%;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 
                0 15px 50px rgba(0,0,0,0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(0, 0, 0, 0.08);
            transform: scale(0.95) translateY(10px);
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            flex-direction: column;
            max-height: 85vh;
        }
        .zone-agreement-overlay.active .zone-agreement-modal {
            transform: scale(1) translateY(0);
        }
        .zone-agreement-title {
            font-size: 17px;
            font-weight: 800;
            color: #1a202c;
            margin-bottom: 18px;
            text-align: center;
            letter-spacing: 0.5px;
        }
        .zone-agreement-content {
            font-size: 13px;
            color: #4a5568;
            line-height: 1.65;
            white-space: pre-wrap; /* 完美保留换行与空格 */
            background: #f7fafc;
            padding: 20px;
            border-radius: 12px;
            border: 1px solid #edf2f7;
            overflow-y: auto;
            max-height: 48vh;
            margin-bottom: 24px;
            text-align: justify;
        }
        /* 协议阅读框哑光极细滚动条 */
        .zone-agreement-content::-webkit-scrollbar {
            width: 5px;
        }
        .zone-agreement-content::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.12);
            border-radius: 10px;
        }
        .zone-agreement-content::-webkit-scrollbar-thumb:hover {
            background: rgba(0,0,0,0.25);
        }

        .zone-agreement-footer {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }
        .agreement-disagree-btn {
            height: 40px; padding: 0 24px; border: 1px solid #e2e8f0;
            background: #fff; color: #4a5568; font-size: 13.5px; font-weight: 600;
            border-radius: 10px; cursor: pointer; transition: background 0.2s;
        }
        .agreement-disagree-btn:hover { background: #f7fafc; }
        
        .agreement-agree-btn {
            height: 40px; padding: 0 24px; border: none;
            background: #ff3b30; color: #fff; font-size: 13.5px; font-weight: 700;
            border-radius: 10px; cursor: pointer; transition: all 0.2s;
            box-shadow: 0 4px 12px rgba(255, 59, 48, 0.22);
        }
        .agreement-agree-btn:hover { background: #e53127; }
        .agreement-agree-btn:disabled { background: #cbd5e1; cursor: not-allowed; box-shadow: none; }

        /* 🔒 灰锁态：当水印关闭后，开关永久置灰且不可点 */
        .premium-switch.disabled {
            opacity: 0.45;
            cursor: not-allowed;
            pointer-events: none; /* 彻底拦截所有点击事件 */
        }
        
        
        
        /* ========================================================= */
        /* 💎 核心对话视窗高保真混搭排版样式                          */
        /* ========================================================= */
        
        /* 1. 消息流基本布局 (采用现代 Flex 布局，防止浮动偏差) */
        .message-container {
            display: flex;
            width: 100%;
            margin-bottom: 24px;
            box-sizing: border-box;
            flex-direction: column; /* 🌟 核心：强制纵向堆叠，防止思考框与气泡并排 */
            position: relative;     /* 🌟 核心自愈：必须设为相对定位，将重发按钮锁死在气泡右下角！ */
        }
        
        /* 用户消息靠右，AI 消息靠左 */
        .message-container.user {
            justify-content: flex-end;
            align-items: flex-end; /* 🌟 用户消息与附件整体靠右对齐 */
        }
        .message-container.model {
            justify-content: flex-start;
            align-items: flex-start; /* 🌟 AI消息与思考框整体靠左对齐 */
        }
        
        /* 2. 核心气泡载体 */
        .message-bubble {
            box-sizing: border-box;
            word-wrap: break-word;
            overflow-wrap: break-word;
            position: relative;
        }

        /* 3. 极光冰雪蓝用户气泡 (100% 对齐老哥的设计稿属性) */
        .message-container.user .message-bubble {
            background-color: var(--primary);
            color: white;
            padding: 10px 14px;
            border-radius: 12px 0 12px 12px;
            max-width: 70%;
            font-size: 14.5px;
            box-shadow: 0 4px 12px rgba(79, 168, 249, 0.25);
        }

        .message-container.model .message-bubble {
            background-color: #F4F5F6;
            color: #222;
            padding: 10px 14px;
            border-radius: 0 12px 12px 12px;
            
            /* 🌟 核心改动：用 width 代替 max-width，锁死 85% 宽度 */
            width: 90%; 
            flex-shrink: 0; /* 确保在任何情况下都不会被挤压变形 */
            
            font-size: 14.5px;
            box-sizing: border-box; /* 确保 padding 包含在 85% 内部，不撑破布局 */
        }

        /*  定点替换：思考框与 AI 气泡完美对齐 */
        .message-container details {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 12px;        
            margin-bottom: 10px;        
            margin-top: 5px;
            width: 90% !important; 
            overflow: hidden;
        }
        
        .message-container summary {
            padding: 10px 14px;         /* 🌟 稍微加宽一点点内边距，呼应气泡的呼吸感 */
            color: #666;
            cursor: pointer;
            font-weight: bold;
            background: #eef1f5;
            border-radius: 12px 12px 0 0; /* 🌟 对应修改为 12px 圆角 */
            font-size: 13px;
            display: flex;
            align-items: center;
            outline: none;
            user-select: none;
        }
        .message-container summary:hover {
            background-color: #e2e6ea;
        }
        .timer-span {
            margin-left: 10px;
            font-weight: normal;
            color: #888;
            font-size: 12px;
            font-family: monospace;
        }
        .thinking-body {
            padding: 12px 14px;
            font-style: italic;
            color: #555;
            white-space: pre-wrap;
            font-size: 13px;
            border-top: 1px solid #dee2e6;
            background-color: #fafafa;
            border-radius: 0 0 12px 12px; /* 🌟 对应修改为 12px 圆角 */
            line-height: 1.5;
        }
        .thinking-body strong {
            font-weight: 700;
            color: #fff;
            font-style: normal;
        }

        /* 5. Markdown 渲染主题排版 */
        .answer-body {
            line-height: 1.7;
            font-size: 14.5px;
            color: #24292e;
            word-wrap: break-word;
        }
        .answer-body p {
            margin-bottom: 12px;
        }
        .answer-body h1, .answer-body h2, .answer-body h3, 
        .answer-body h4, .answer-body h5, .answer-body h6 {
            font-weight: bold !important;
            color: #1e293b;
            line-height: 1.4;
            margin-top: 1.4em;
            margin-bottom: 0.6em;
        }
        .answer-body h1 { font-size: 18px !important; }
        .answer-body h2 { font-size: 17px !important; }
        .answer-body h3 { font-size: 16px !important; }
        .answer-body h4, .answer-body h5, .answer-body h6 { font-size: 15px !important; }

        .answer-body ul, .answer-body ol {
            padding-left: 20px;
            margin-bottom: 12px;
        }
        .answer-body li {
            margin-bottom: 4px;
        }

        /* 6. 高阶代码块 UI 包装 */
        .code-wrapper {
            position: relative;
            margin: 16px 0;
            border-radius: 8px;
            overflow: clip !important;;              /* 关键！把 hidden 改成 clip */
            background: #282c34;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        
        .code-header {
            position: sticky;            /* 加上这个 */
            top: -22px;                      /* 粘在顶部 */
            z-index: 10;                 /* 确保盖住滚动上来的代码 */
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #21252b;
            padding: 8px 16px;
            border-bottom: 1px solid #181a1f;
        }
        .lang-label {
            color: #abb2bf;
            font-size: 12px;
            font-family: Consolas, monospace;
            font-weight: bold;
        }
        .copy-btn {
            position: sticky;
            top: 0 !important;
            background: transparent;
            border: 1px solid #3e4451;
            color: #abb2bf;
            border-radius: 4px;
            padding: 2px 6px 4px 6px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
            font-family: inherit;
            line-height: 14px !important;
        }
        
        .hasbottom{
            margin: 0 0 8px 0;
        }
        .copy-btn:hover {
            background: #3e4451;
            color: #fff;
        }
        .copy-btn.copied {
            background-color: #28a745 !important;
            color: white !important;
            border-color: #28a745 !important;
        }
        .code-wrapper pre {
            margin: 0;
            padding: 16px;
            overflow-x: auto;
            background-color: #282c34;
            border: none;
            border-radius: 0;
            scrollbar-width: thin !important;
            scrollbar-color: #4b5363 #21252b !important;
            color-scheme: dark !important;
        }
        .code-wrapper pre code {
            font-family: Consolas, Monaco, 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.5;
            background: transparent;
            color: #abb2bf;
            display: block;
        }
        
        .img-download-btn {
            /* 🌟 核心破局点 1：强制脱离全局 .copy-btn 的绝对定位，回归 Flex 正常并排队 */
            position: relative !important;
            top: auto !important;
            right: auto !important;
            /* 🌟 核心破局点 2：解除全局 .copy-btn 对宽高的死锁，防止文字被挤扁 */
            width: auto !important;
            height: auto !important;
            /* 🌟 核心破局点 3：强制文字不换行，彻底解决文字变竖向的问题 */
            white-space: nowrap !important;
            background-color: rgba(0, 0, 0, 0.5) !important;
            color: #ccc !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            border-radius: 8px !important;
            /* 🌟 配合 inline-flex，微调内边距，让小胶囊按钮精致美观 */
            padding: 4px 10px !important;
            font-size: 11px !important;
            font-family: 'Segoe UI', sans-serif !important;
            font-weight: normal !important;
            box-shadow: none !important;
            backdrop-filter: blur(4px);
            /* 🌟 开启 Flex 居中，确保按钮内部文字绝对居中 */
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            line-height: 1 !important; /* 抹平字体内置多余间距 */
            /* 默认隐藏逻辑 */
            opacity: 0 !important;
            visibility: hidden !important;
            transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
        }
        
        .aigen-media-wrapper {
            transform-origin: 0 0; 
            will-change: aspect-ratio, transform;
            /* 极致丝滑的尺寸过渡：当图片渲染，宽高比改变时，会像液体一样平滑拉伸 */
            transition: aspect-ratio 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
                        transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
        }
        
        /* === 🌟 魔法唤醒：当鼠标悬浮在图片外壳上时，显示按钮 === */
        .aigen-media-wrapper:hover .img-download-btn,
        .image-wrapper:hover .img-download-btn {
            opacity: 1 !important;
            visibility: visible !important;
        }
        
        /* === 鼠标悬浮在按钮自身时的交互反馈 === */
        .img-download-btn:hover {
            background-color: rgba(0, 0, 0, 0.8) !important;
            color: #fff !important;
            border-color: rgba(255, 255, 255, 0.5) !important;
        }
        
        /* === 下载成功后的状态 === */
        .img-download-btn.copied {
            background-color: #28a745 !important;
            color: white !important;
            border-color: #28a745 !important;
            backdrop-filter: none !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        /* ========================================================= */
        /* 🎨 7. Markdown 表格高级美化（支持底部防挤压横向滚动条 - 左置按钮版） */
        /* ========================================================= */
        .table-container {
            position: relative;
            margin: 18px 0;
            border-radius: 8px;
            /* 🌟 核心破局：X轴允许溢出滚动，Y轴强制隐藏防止上下重影 */
            overflow-x: auto !important;
            overflow-y: hidden !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
            background-color: #ffffff;
            
            /* 物理阻尼滚动：确保在移动端 Safari 和 微信 WebView 极度丝滑 */
            -webkit-overflow-scrolling: touch;
        }

        /* 🌟 左置防滑装甲：
           我们将动作栏牢牢锁在【左侧】。
           利用 position: sticky 和 left: 6px，哪怕表格往右滚得再远，
           左侧的两个高质感按钮也永远停留在屏幕左上角，绝对不会被滚出屏幕！
        */
        .table-actions {
            position: sticky !important;
            left: 6px !important; /* 🌟 钉死在左侧，留出 6 像素呼吸边距 */
            float: left; /* 🌟 改为左浮动 */
            margin-right: -170px; /* 🌟 负向右边距，防止按钮占用物理宽度而导致表格整体右移 */
            top: 3px;
            display: flex;
            gap: 6px;
            z-index: 50 !important; /* 🌟 提升层级，确保在表格内容最上层显示 */
            opacity: 0; 
            transform: translateY(-4px); 
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none; /* 隐藏时不可点击 */
        }

        /* 🌟 鼠标悬浮在表格上时，让左置工具栏平滑显现，并恢复点击 */
        .table-container:hover .table-actions {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto !important; /* 🌟 恢复点击 */;
        }

        /* 统一表格最小渲染宽度，列数多时强制表格向右展开，激发滚动条 */
        .table-container table {
            width: 100%;
            /* 🌟 如果列数极多，保证每列至少有 120px 宽度，防止挤成“麻花” */
            min-width: 600px; 
            border-collapse: collapse;
            margin: 0; 
            text-align: left;
            font-size: 14px;
            border-style: hidden;
        }

        /* 🌟 极致美学：为表格容器注入 3px 莫兰迪极细晶体滚动条，与你的全局设计系统完美同频 */
        .table-container::-webkit-scrollbar {
            height: 4px !important; /* 底部滚动条高度限制为 4px 极细 */
        }
        .table-container::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.15) !important;
            border-radius: 99px !important;
        }
        .table-container::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0, 0, 0, 0.3) !important; /* 悬浮时略微加深 */
        }
        .table-container::-webkit-scrollbar-track {
            background: transparent !important; /* 轨道完全透明，绝不抢戏 */
        }
        .table-container th, .table-container td {
            padding: 10px 14px;
            border: 1px solid #cbd5e1; 
        }
        .table-container th {
            font-weight: 600;
            background-color: #e2e8f0; 
            color: #1e293b; 
            position: relative;
            cursor: pointer; 
            transition: background-color 0.2s ease;
        }
        .table-container th:hover {
            background-color: #cbd5e1; 
        }
        .table-container tr:nth-child(2n) {
            background-color: #f8fafc;
        }
        .table-container tr:hover td {
            background-color: #e0f2fe;
        }
        
        /* 表格复制按钮与表头单列复制悬浮气泡 */
        .copy-table-btn {
            position: relative; /* 🌟 改为相对定位，使其在 Flex 容器中完美并排 */
            padding: 4px 10px;
            font-size: 12px;
            color: #64748b;
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(4px);
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            z-index: 10;
            line-height: 14px;
        }
        .copy-table-btn:hover {
            color: #0ea5e9;
            border-color: #0ea5e9;
            background-color: #f0f9ff;
        }
        .table-container th::after {
            content: '📋 复制此列';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            background-color: rgba(30, 41, 59, 0.95);
            color: #fff;
            padding: 6px 12px;
            font-size: 11px;
            font-weight: normal;
            border-radius: 6px;
            opacity: 0;
            pointer-events: none; 
            transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); 
            white-space: nowrap;
            z-index: 20;
            box-shadow: 0 4px 6px rgba(0,0,0,0.2);
            margin: 14px 0 0 0;
        }
        .table-container th:hover::after {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        .table-container th.copied::after {
            content: '已复制';
            background-color: rgba(16, 185, 129, 0.95);
        }
        
        /* 🎨 网页版：高质感 Excel 导出按钮样式 */
        .export-excel-btn {
            position: relative; /* 🌟 改为相对定位，与复制按钮在 Flex 容器中完美并排 */
            padding: 4px 10px;
            font-size: 12px;
            color: #64748b;
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(4px);
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            z-index: 10;
            line-height: 14px;
        }
        .export-excel-btn:hover {
            color: #10b981; /* 经典 Excel 环保绿 */
            border-color: #10b981;
            background-color: #ecfdf5;
        }
        .copy-table-btn, .export-excel-btn {
            pointer-events: auto !important; /* 🌟 确保按钮自身 100% 可被点击 */
        }

        /* 8. Mermaid 图表容器及下载按钮 */
        .mermaid {
            background: #fafafa;
            padding: 16px;
            border-radius: 8px;
            margin: 16px 0;
            text-align: center;
            overflow-x: auto;
            border: 1px solid #e9ecef;
        }
        .mermaid svg {
            max-width: 100%;
            height: auto;
        }
        .download-btn {
            background-color: #ffffff !important; 
            color: #424649 !important;
            border: 1px solid #d0d7de !important; 
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
            font-weight: 500;
        }
        .download-btn:hover {
            background-color: #f6f8fa !important;
            color: #0969da !important;
            border-color: #0969da !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
        }
        .download-btn.copied {
            background-color: #28a745 !important;
            color: white !important;
            border-color: #28a745 !important;
            box-shadow: none !important;
        }
        
        /* 隐藏原生的丑陋错误 SVG，改用高级虚线卡片 */
        .mermaid > svg[id^="dError"] {
            display: none !important;
        }
        .mermaid:has(svg[id^="dError"])::after {
            content: "🎨 AI 绘制的流程图遇到了一点语法小问题，暂时无法渲染";
            display: block;
            padding: 15px;
            margin: 10px 0;
            color: #adb5bd;
            font-size: 13px;
            text-align: center;
            background-color: transparent;
            border: 1px dashed #ced4da;
            border-radius: 8px;
            letter-spacing: 0.5px;
        }

        /* 9. 重发按钮 */
        .resend-btn {
            position: absolute;
            bottom: -22px; 
            right: 0;      
            font-size: 14px;
            color: #999;   
            cursor: pointer;
            user-select: none;
            transition: all 0.2s;
            line-height: 1;
            padding: 5px;  
        }
        .resend-btn:hover {
            color: #333;   
            transform: scale(1.1);
        }

                /* ========================================== */
        /* 🎨 10. 附件外部排版容器 (对齐气泡宽度，严防溢出) */
        /* ========================================== */
        .attachments-container {
            display: flex;
            flex-wrap: wrap; /* 🌟 核心：允许折行 */
            gap: 8px;
            margin-top: 8px;
            box-sizing: border-box;
        }

        /* 🌟 核心物理锁：让用户附件容器的最大宽度，与用户气泡（70%）完全对齐！ */
        .message-container.user .attachments-container {
            justify-content: flex-end; /* 靠右对齐 */
            max-width: 70% !important;  /* 👈 紧箍咒：绝对不许超过气泡的 70% 宽度！ */
        }

        /* 🌟 核心物理锁：让 AI 附件容器的最大宽度，与 AI 气泡（90%）完全对齐！ */
        .message-container.model .attachments-container {
            justify-content: flex-start; /* 靠左对齐 */
            max-width: 90% !important;  /* 👈 紧箍咒：绝对不许超过 AI 气泡的 90% 宽度！ */
        }
        

        /* 11. 自定义网页右键菜单 (用于选中代码、表格或气泡时复制) */
        #custom-context-menu {
            display: none; 
            position: fixed; 
            z-index: 99999; 
            background: white; 
            border: 1px solid #ccc; 
            box-shadow: 2px 2px 8px rgba(0,0,0,0.15); 
            border-radius: 6px; 
            padding: 4px 0; 
            min-width: 110px;
        }
        .context-menu-item-web {
            padding: 8px 15px; 
            cursor: pointer; 
            font-size: 13.5px; 
            color: #333; 
            transition: background 0.15s;
        }
        .context-menu-item-web:hover {
            background-color: #f0f0f0;
        }
        

/* 🌟 1. 从左上角舒展、放大的入场动画 */
@keyframes aigen-unfold {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 🌟 2. 纯粹的从左往右偏光扫掠（绝对不掺杂呼吸明暗闪烁） */
@keyframes aigen-shimmer {
    0% {
        background-position: 150% 0;
    }
    100% {
        background-position: -50% 0;
    }
}

/* 🌟 3. 菊花旋转 */
@keyframes aigen-spin {
    to {
        transform: rotate(360deg);
    }
}



        /* ========================================== */
        /* 🔄 11. 历史消息加载指示器 (Elegant History Loader) */
        /* ========================================== */
        #history-loader {
            display: none; /* 默认隐藏，由 JS 动态切换 */
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px; /* 圈圈和文字的黄金间距 */
            width: 100% !important;
            background: transparent !important; /* 彻底蒸发丑陋的灰色底色 */
            border: none !important;             /* 彻底切除死板的分割线 */
            padding: 24px 0 0 0 !important;     /* 稍微向下偏移，不顶着最顶部的 header */
            
            /* 🌟 物理绝杀：给底部锁死 32px 的超大安全边距，绝对不和下方气泡发生碰撞和重叠！ */
            margin-bottom: 32px !important;      
            
            color: #94a3b8 !important;          /* 采用质感莫兰迪石板灰 */
            font-size: 12px !important;
            font-weight: 600 !important;
            letter-spacing: 1.5px !important;    /* 字符间距微调，极具呼吸感 */
            user-select: none;
        }

        /* 💎 极细哑光旋转 Spinner */
        .history-spinner {
            width: 18px;
            height: 18px;
            border: 2px solid #e2e8f0;
            border-top-color: #3b82f6;          /* 科技蓝高光 */
            border-radius: 50%;
            animation: history-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }

        @keyframes history-spin {
            to { transform: rotate(360deg); }
        }

        /* 1. 用户圆形头像：层叠在气泡右上角直角上 */
        .user-avatar-badge-overlay {
            position: absolute;
            top: -10px;
            right: -10px;
            width: 26px;
            height: 26px;
            border-radius: 50% !important;
            border: 2px solid #ffffff !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
            background: #ffffff;
            z-index: 10;
            overflow: hidden !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .user-avatar-badge-overlay img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }
        
        /* 2. 历史无思考时的模型头像：层叠在气泡左上角 */
        .model-avatar-floating-overlay {
            position: absolute;
            top: -10px;
            left: -10px;
            width: 26px;
            height: 26px;
            border-radius: 50% !important;
            border: 2px solid #ffffff !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
            background: #ffffff;
            z-index: 10;
            overflow: hidden !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .model-avatar-floating-overlay img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }
        
        /* 3. 顶级胶囊式思考 Details/Summary 穿透覆写 */
        .message-bubble details {
            background: transparent !important;
            border: none !important;
            border-radius: 0 !important;
            margin: -4px -6px 10px -6px !important; 
            padding: 0 !important;
            width: auto !important;
            box-shadow: none !important;
            display: block !important;
            overflow: visible !important; /* 允许子元素向外溢出动画 */
        }
        .message-bubble details summary {
            display: flex !important; 
            align-items: center !important;
            background: #eef1f5 !important;
            border: 1px solid #e2e8f0 !important;
            border-radius: 9999px !important; /* 双侧半圆胶囊 */
            padding: 6px 14px 6px 8px !important;
            font-size: 12px !important;
            color: #4b5563 !important;
            cursor: pointer !important;
            outline: none !important;
            user-select: none !important;
            width: 100% !important; 
            min-width: 100% !important; 
            flex-grow: 1 !important;
            box-sizing: border-box !important; 
            gap: 8px !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            transition: background-color 0.2s;
            position: relative !important;
            z-index: 2 !important;
            line-height: 1px !important;
        }
        .message-bubble details summary:hover {
            background-color: #e2e8ea !important;
        }
        
        /* 4. 旋转发光圈 */
        .capsule-avatar-container {
            position: relative;
            width: 20px;
            height: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .capsule-avatar {
            width: 16px;
            height: 16px;
            border-radius: 50% !important;
            object-fit: cover !important;
            z-index: 2;
        }
        .capsule-glow-ring {
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 50%;
            border: 1.5px solid transparent;
            border-top-color: #3b82f6;
            border-right-color: #10b981;
            z-index: 1;
            display: none; 
        }
        .message-bubble details.active-thinking .capsule-glow-ring {
            display: block;
            animation: capsule-ring-spin 1.2s linear infinite;
        }
        @keyframes capsule-ring-spin {
            0% { transform: rotate(0deg); box-shadow: 0 0 3px rgba(59, 130, 246, 0.3); }
            50% { box-shadow: 0 0 6px rgba(16, 185, 129, 0.5); }
            100% { transform: rotate(360deg); box-shadow: 0 0 3px rgba(59, 130, 246, 0.3); }
        }
        
        /* 5. 🌟 极轻奢级黑夜科技背板（已移除蓝色条） */
        .message-bubble .thinking-body {
            padding: 14px 16px !important;
            font-style: italic !important;
            color: #f1f5f9 !important; /* 极清哑光白字 */
            background-color: #1e293b !important; /* 深蓝色黑夜背板 */
            white-space: pre-wrap !important;
            font-size: 13px !important;
            line-height: 1.6 !important;
            
            /* 🌟 移除左侧蓝边，恢复为 360° 均匀精致的深灰曜黑边框 */
            border: 1px solid #334155 !important; 
            border-radius: 10px !important;
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3) !important;
            
            /* 🌟 抽屉层叠定位与溢出隐藏（极其重要：支持滑出动效） */
            position: relative !important;
            z-index: 1 !important;
            overflow: hidden !important; 
            display: block !important; 
        }

        /* 6. 模型气泡：左上角强制圆角 */
        .message-container.model .message-bubble {
            border-radius: 12px !important;
        }
        
    /* ==========================================
   ✨ 发送按钮快捷键背部滑出动效（兄弟穿透版）
   ========================================== */
/* 1. 强力提拉按钮层级，利用实体背景100%挡住背后的提示 */
#sendBtn {
    position: relative !important;
    z-index: 2 !important; /* 🌟 坐在上层，遮挡一切 */
}

/* 2. 快捷键提示条：作为兄弟，静默躺在按钮正下方底层 */
.send-shortcut-tip {
    position: absolute;
    left: 50%;
    /* 🌟 起跑点：完全重合在按钮正后方，1px都不溢出 */
    bottom: 6px; 
    transform: translate(-50%, 0) scale(0.85); 
    
    opacity: 0;
    z-index: 1 !important; /* 🌟 坐在下层，完美被按钮实体挡住 */
    pointer-events: none; /* 彻底禁用鼠标事件防误触 */
    white-space: nowrap;
    
    /* 极高逼格的灰白偏冷质感 */
    font-size: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 500;
    color: rgba(120, 120, 120, 0.85); 
    background: rgba(248, 249, 250, 0.98); 
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    
    /* 300ms 黄金阻尼回弹曲线，飞出来时带极度舒适的弹性 */
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.18s ease;
}

/* 🌙 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
    .send-shortcut-tip {
        color: rgba(180, 180, 180, 0.75);
        background: rgba(30, 30, 30, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }
}

/* 3. 鼠标悬浮在保护套区域时，提示条平滑向下滑落出来 */
.send-btn-wrapper:hover .send-shortcut-tip {
    /* 🌟 精准下落到按钮下方 5px 的位置 */
    transform: translate(-50%, calc(100% + 5px)) scale(1); 
    opacity: 1;
}

.download-client-btn:hover {
    color: #111 !important;
}

/* ========================================== */
/* ⚡ 晶体自愈 1：给文本框主容器注入同频阻尼动画 */
/* ========================================== */
.bottom-control-container {
        position: relative !important;
        bottom: auto !important;
        background: transparent !important; /* 恢复原本高级虚化透明态 */
        transition: none !important; 
    }

/* 🌟 1. 聊天记录主容器：加入 padding-bottom 缓动动画，实现与输入框同频飘升 */
#chatBodyScroll {
    transition: padding-bottom 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    scrollbar-width: thin !important;
}

/* ========================================== */
/* ⚡ 1. 全局滚动条大绞杀：所有容器一律变为 3px 极细莫兰迪晶体条 */
/* ========================================== */
#chatBodyScroll::-webkit-scrollbar,
.session-list::-webkit-scrollbar,
.model-list-wrapper::-webkit-scrollbar,
.aspect-flyout-grid::-webkit-scrollbar,
.style-grid::-webkit-scrollbar {
    width: 3px !important;
    height: 3px !important;
}

#chatBodyScroll::-webkit-scrollbar-thumb,
.session-list::-webkit-scrollbar-thumb,
.model-list-wrapper::-webkit-scrollbar-thumb,
.aspect-flyout-grid::-webkit-scrollbar-thumb,
.style-grid::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15) !important;
    border-radius: 99px !important;
}

#chatBodyScroll::-webkit-scrollbar-track,
.session-list::-webkit-scrollbar-track,
.model-list-wrapper::-webkit-scrollbar-track,
.aspect-flyout-grid::-webkit-scrollbar-track,
.style-grid::-webkit-scrollbar-track {
    background: transparent !important;
}

.chat-inner-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 100%;
    will-change: transform;
    /* 启用 GPU 硬件加速，不重排 DOM，满帧丝滑平移 */
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important; 
}

/* ========================================== */
/* 💻 PC 端默认样式（电脑端隐藏返回按钮）       */
/* ========================================== */
.mobile-back-btn {
    display: none !important;
}

.mobile-tools-drawer {
    display: none !important;
}

.pull-to-refresh-header {
    display: none !important;
}

        .model-copy-container {
            display: flex !important;
            justify-content: flex-start !important;
            width: 90% !important; /* 与AI气泡宽度对齐 */
            margin-top: 6px !important;
            margin-bottom: 2px !important;
            padding-left: 10px !important;
            
            /* 🌟 核心破局点：开启相对定位，强行提升渲染层级，防止被气泡边缘或阴影裁剪 */
            position: relative !important;
            z-index: 10 !important; 
        }

        .model-copy-trigger {
            background: transparent !important;
            border: none !important;
            outline: none !important;
            cursor: pointer !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 5px !important;
            padding: 4px 8px !important;
            color: #555555 !important; /* 灰黑色 */
            font-size: 11.5px !important;
            transition: all 0.15s ease !important;
            user-select: none !important;
            border-radius: 6px !important;
        }

        .model-copy-trigger:hover {
            background-color: rgba(0, 0, 0, 0.05) !important;
            color: #111111 !important;
        }

        .model-copy-trigger:active {
            transform: scale(0.95) !important;
        }

        .model-copy-trigger.copied {
            color: #10b981 !important; /* 复制成功后呈现治愈绿 */
        }

/* ========================================== */
/* 📱 手机移动端自适应 (5大细节高精调校版)      */
/* ========================================== */
@media (max-width: 768px) {
    body {
        position: relative;
        overflow: hidden;
        width: 100vw;
        height: 100dvh !important; 
        background-color: #F4F5F6 !important; /* 🌟 新增：与 chat-main 底色完全一致，物理挡光 */
    }
     .session-sidebar {
        z-index: 5 !important; /* 从原本的 10 降到 5，彻底避让 */
    }
    
    /* ========================================== */
    /* ⚡ 1. 物理抹除移动端所有按钮点击时的流氓黑方块 */
    /* ========================================== */
    button, 
    .tool-toggle-btn, 
    .btn-attachment-master, 
    .gray-dropdown-btn,
    .session-item,
    .model-item-card {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* 1. 强力破局：将 AI 消息气泡的宽度限制从 90% 直接锁死在 100% 满屏 */
    .message-container.model .message-bubble {
        width: 100% !important; /* 强行铺满整个屏幕左右 */
        max-width: 100% !important;
        border-radius: 12px !important; /* 四角采用一致大圆角 */
        box-sizing: border-box !important;
    }

    /* 2. 用户气泡在手机端也适当拓宽比例，留出更多排版空间 */
    .message-container.user .message-bubble {
        max-width: 88% !important; /* 拓宽至 88% */
        font-size: 15.5px !important; /* 文字同步微调放大 */
    }

    /* 3. 提升聊天内容和思维链正文的整体字号，消除在手机端的阅读疲劳 */
    .answer-body {
        font-size: 15.5px !important; /* 💥 字体增大一丢，从 14.5px 提至 15.5px */
        line-height: 1.65 !important;
    }

    .thinking-body {
        font-size: 14px !important; /* 思维链文字等比例微调大一丢 */
        line-height: 1.55 !important;
    }

    /* 4. 调整聊天主体容器的边距，配合气泡 100% 铺满，让左右两边更紧凑大气 */
    .chat-body {
        padding: 16px 12px 45px 12px !important; /* 左右间距缩至 12px 黄金边界 */
    }

    /* -------------------------------------- */
    /* 1. 底部栏精调：设置按钮增大并加圆角灰框    */
    /* -------------------------------------- */
    .global-sidebar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        top: auto !important;
        width: 100vw !important;
        height: 64px !important; /* 略微拉高至64px，给手指留出安全呼吸带 */
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 0 10px !important;
        background-color: #ebebeb !important;
        border-right: none !important;
        border-top: 1px solid #dcdcdc !important;
        z-index: 15 !important;
    }

    .global-menu {
        margin-top: 0 !important;
        flex-direction: row !important;
        gap: 0 !important;
    }
    
    .global-bottom {
        flex-direction: row !important;
        width: auto !important;
        gap: 0 !important;
    }

    /* 将手机端底部的设置按钮包装成和聊天按钮一样的圆角灰框 */
    .settings-btn {
        width: 42px !important;
        height: 42px !important;
        background-color: #dfdfdf !important; /* 客户端同款灰框 */
        border-radius: 10px !important;       /* 优雅小圆角 */
        color: #111 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: background-color 0.2s !important;
    }
    .settings-btn:active {
        background-color: #d0d0d0 !important;
    }
    .settings-btn svg {
        width: 22px !important; /* 图标等比例稍微放大 */
        height: 22px !important;
    }

    /* 手机端隐藏客户端下载、算粒补充及虚底板 */
    .download-client-container,
    .suanli-badge,
    .double-sidebar-glass {
        display: none !important;
    }

    /* -------------------------------------- */
    /* 2. 取消会话主窗投影，防止渗入列表        */
    /* -------------------------------------- */
    .chat-main {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100% !important;
        z-index: 20 !important;
        transform: translateX(100vw) !important;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
        box-shadow: none !important; /* 💥 彻底干掉手机端左边缘阴影 */
    }
    
    .new-chat-wrapper {
        background-color: rgba(255, 255, 255, 0) !important; /* 🌟 按钮底板半透明 */
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        padding: 12px 15px !important;
        z-index: 110 !important; /* 层级高于刷新提示器，下拉时提示器会从底板下方滑出，质感拉满 */
        position: relative !important;
    }

    .session-sidebar {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: calc(100% - 64px) !important;
        z-index: 10 !important;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s !important;
        background-color: transparent !important; 
        border-right: none !important;
        
        /* 🌟 [新增定点防推钢钉]：锁死横向，哪怕浏览器想往右拉，也绝对不允许露出屏幕外的任何像素！ */
        overflow-x: hidden !important; 
        
        /* 🌟 [新增定点防推钢钉]：移除任何平滑滚动，防止弹性滚动带起页面位移 */
        scroll-behavior: auto !important; 
    }

    .session-item {
        padding: 16px 14px 16px 18px !important; /* 🌟 压缩右侧 padding (14px)，保留左侧呼吸感 (18px) */
    }
    
    .session-info {
        position: relative !important;
    }
    
   .session-menu-btn {
        position: absolute !important;
        right: -6px !important;
        bottom: -6px !important;
        font-size: 13px !important;
        letter-spacing: -1.2px !important;
        font-weight: 900 !important;
        line-height: 1.2 !important;
        padding: 4px 6px !important; /* 极度压缩热区 */
        margin: 0 !important;
        opacity: 0.55 !important;
        z-index: 5 !important;
    }
    
     .session-ticks-row {
        padding-right: 26px !important;
        box-sizing: border-box !important;
    }

    /* 放大头像尺寸 */
    .session-avatar {
        width: 44px !important;
        height: 44px !important;
        border-radius: 14px !important; /* 略微加大圆角 */
        margin-right: 14px !important;
    }

    /* 字体大小重构 */
    .session-title {
        font-size: 16px !important; /* 会话标题显著调大，突出层级 */
        font-weight: 700 !important;
        color: #222 !important;
    }
    
    .session-preview {
        font-size: 13.5px !important; /* 预览文本稍微调大 */
        margin-top: 6px !important;
    }

     .session-item {
        padding: 16px 14px 16px 18px !important;
    }

    .session-ticks {
        font-size: 12px !important; /* 算粒字号 */
    }
    
    .session-list {
        position: relative !important;
        height: calc(100% - 66px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        background-color: rgba(248, 249, 250, 0.45) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        z-index: 10 !important;
    }

    .btn-new-chat {
        height: 40px !important;
        background-color: #F8FAFC !important; /* 🌟 纯实体、不透明的干净白底座，绝不透底 */
        border: 1px solid #E2E8F0 !important; /* 极雅浅灰色微描边 */
        color: #334155 !important; /* 截图同款高档石板灰字 */
        border-radius: 999px !important; /* 完美药丸圆角 */
        font-size: 14px !important;
        font-weight: 600 !important;
        opacity: 1 !important; /* 🌟 物理硬锁不透明度 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        transition: all 0.2s ease !important;
    }
    
    /* 🌟 模拟截图“智能搜索”选中态的弥散温润光晕（Halo） */
    .btn-new-chat:active {
        background-color: #EFF6FF !important; /* 柔和晴空蓝 */
        border-color: rgba(59, 130, 246, 0.3) !important;
        color: #1D4ED8 !important; /* 纯正科技深蓝 */
        transform: scale(0.97) !important;
        box-shadow: 
            0 4px 16px rgba(59, 130, 246, 0.15), 
            inset 0 1px 2px rgba(255, 255, 255, 0.8) !important;
    }
    .btn-new-chat:hover, .btn-new-chat:active {
        background-color: rgba(224, 242, 254, 0.8) !important;
        border-color: rgba(29, 78, 216, 0.5) !important;
        box-shadow: 
            0 6px 16px rgba(29, 78, 216, 0.18), 
            inset 0 1.5px 2px rgba(255, 255, 255, 0.9) !important;
    }

    /* 激活滑动状态 */
    body.show-chat-window .session-sidebar {
        transform: translateX(-25vw) !important;
        opacity: 0.6 !important;
        pointer-events: none !important;
    }
    body.show-chat-window .chat-main {
        transform: translateX(0) !important;
    }

    /* 手机端激活返回箭头 */
    .mobile-back-btn {
        display: inline-flex !important;
        background: transparent !important;
        border: none !important;
        padding: 8px !important;
        margin-right: 6px !important;
        cursor: pointer !important;
        color: #555 !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
    }
    
    .chat-textarea {
        font-size: 16px !important;
    }
    
    /* -------------------------------------- */
    /* 3. 折叠条文字轻微放大一丢                */
    /* -------------------------------------- */
    .collapse-divider {
        height: 36px !important; /* 略微拉高，更舒展 */
    }
    .divider-text {
        font-size: 13px !important; /* 💥 从 11px 放大到 13px，看得更清楚 */
        font-weight: 600 !important;
    }
    
    .pull-to-refresh-header {
        position: absolute !important;
        top: 66px !important;
        left: 0 !important;
        width: 100% !important;
        height: 45px !important;
        display: flex !important; /* 🌟 仅在手机端强行启用 flex 显示 */
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        color: #1D4ED8 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        pointer-events: none !important;
        z-index: 99 !important;
        opacity: 0; 
        transform: translateY(-45px); 
        transition: opacity 0.2s ease;
    }

    .ptr-spinner {
        width: 15px;
        height: 15px;
        border: 2px solid rgba(29, 78, 216, 0.15);
        border-top-color: #1D4ED8;
        border-radius: 50%;
    }
    
    .ptr-spinner.spinning {
        animation: ptr-spin 0.6s linear infinite;
    }

    @keyframes ptr-spin {
        to { transform: rotate(360deg); }
    }
    
    
    /* 需求 1：会话窗背景彻底不透明（干掉原本的半透明和模糊） */
    .chat-main {
        background: #F4F5F6 !important; /* 苹果经典浅灰不透明底色 */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* 需求 2：顶部控制条与返回键微调 */
    .chat-header {
        padding: 0 10px !important; /* 压缩两侧留白，让按钮整体往左挪 */
        background: #FFFFFF !important;
        border-bottom: 1px solid #E5E5E5 !important;
    }
    .mobile-back-btn {
        margin-right: 2px !important; /* 压缩返回键右侧间距，往左逼退 */
        padding: 6px !important;
    }
    .header-left {
        gap: 4px !important; /* 紧凑排列，让模型名称自然靠左 */
    }

    .input-card-wrapper {
        margin: 8px 12px 8px 12px !important; /* 手机端取消抬高，改由 sticky 原地拼合 */
        position: relative !important;
        background: rgba(246, 246, 250, 0.88) !important;
        backdrop-filter: blur(20px) saturate(190%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
        
        /* 1px 极细白瓷晶莹边缘 */
        border: 1px solid rgba(255, 255, 255, 0.95) !important;
        box-shadow: 
            inset 0 1px 1px rgba(255, 255, 255, 1), 
            0 8px 28px rgba(79, 150, 255, 0.22),
            0 2px 4px rgba(0, 0, 0, 0.02) !important;
            
        border-radius: 24px !important;
        padding: 10px 14px !important;
        transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
    }

    .input-card-wrapper:focus-within {
        background: rgba(255, 255, 255, 0.96) !important;
        border-color: rgba(79, 168, 249, 0.45) !important;
        box-shadow: 
            inset 0 1px 1px rgba(255, 255, 255, 1),
            0 14px 36px rgba(79, 168, 249, 0.35), 
            0 3px 8px rgba(79, 168, 249, 0.1) !important;
    }


    .bottom-left-group {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    /* 隐藏所有不需要常驻的按钮，只留超级记忆 */
    .bottom-left-group .tool-toggle-btn,
    .bottom-left-group .btn-attachment-master:not(#imageModelQuickBtn) {
        display: none !important;
    }

    .btn-mobile-more-tools {
        margin-left: auto !important; 
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        background: rgba(255, 255, 255, 0.9) !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        padding: 0 !important;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        color: #555555 !important;
    }
    /* 加号内的 SVG 属性约束 */
    .btn-mobile-more-tools svg {
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .btn-mobile-more-tools:active {
        transform: scale(0.9) !important;
        background: #EFF6FF !important;
        border-color: rgba(59, 130, 246, 0.2) !important;
    }

    /* 需求 3：隐藏原发送与停止按钮 */
    .btn-send-msg, .btn-stop-msg, .send-btn-wrapper {
        display: none !important;
    }
    
    .btn-stop-msg {
        display: none; /* 由 JS 动态控制 inline-flex 显隐 */
        height: 32px !important;
        width: 32px !important; /* 强行 1:1 比例 */
        padding: 0 !important;   /* 彻底清除内边距，确保图标绝对居中 */
        border-radius: 50% !important; /* 变成完美正圆 */
        background-color: #FF3B30 !important; /* 苹果警示红 */
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 3px 10px rgba(255, 59, 48, 0.3) !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 10px !important; /* 与左侧的加号（+）保持 10px 完美间距 */
        flex-shrink: 0 !important;
    }

    /* 🌟 核心破局点：在手机端将“停止”文本彻底隐藏，不占任何物理空间 */
    .btn-stop-msg .stop-btn-text {
        display: none !important;
    }

    /* 确保 SVG 图标在手机端正圆内完美居中，不发生偏位 */
    .btn-stop-msg svg {
        width: 14px !important;  /* 🌟 从 12px 放大到 14px */
        height: 14px !important; /* 🌟 从 12px 放大到 14px */
        margin: 0 !important;
    }

    /* 🌟 手机端工具箱：拟物化微信风面板 */
    .mobile-tools-drawer {
        display: grid !important; /* 手机端强制启用网格布局 */
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 16px !important;
        padding: 20px 16px calc(20px + env(safe-area-inset-bottom)) 16px !important;
        position: fixed !important;
        bottom: -320px !important; /* 默认隐藏 */
        left: 0 !important;
        width: 100vw !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(25px) !important;
        -webkit-backdrop-filter: blur(25px) !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08) !important;
        transition: bottom 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
        z-index: 9999 !important; /* 盖在普通视窗上 */
        box-sizing: border-box !important;
    }

    .mobile-tools-drawer.active {
        bottom: 0 !important;
    }

    .drawer-tool-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        background: none !important;
        border: none !important;
        outline: none !important;
        cursor: pointer !important;
        gap: 8px !important;
        padding: 0 !important;
    }

    .drawer-tool-icon-wrapper {
        width: 52px !important;
        height: 52px !important;
        border-radius: 14px !important;
        background: #F2F4F7 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #475467 !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .drawer-tool-item span {
        font-size: 11.5px !important;
        color: #475467 !important;
        font-weight: 500 !important;
    }
    /* 开关激活态：温柔晴空蓝 + 弥散蓝光晕 */
    .drawer-tool-icon-wrapper.checked {
        background: #EFF6FF !important;
        color: #1D4ED8 !important;
        border: 1px solid #3B82F6 !important;
        box-shadow: 0 0 14px rgba(59, 130, 246, 0.28) !important;
    }
    #imageModelQuickBtn {
        display: inline-flex !important; /* 强制显示 */
        align-items: center !important;
        justify-content: center !important;
        height: 32px !important;
        width: auto !important; /* 释放 PC 端的 44px 限制，改为自适应宽度 */
        padding: 0 12px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.8) !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
    }
    /* 4. 在手机端，强行把加号按钮放出来，并推到最右侧 */
    .btn-mobile-more-tools {
        display: inline-flex !important;
        margin-left: auto !important; /* 物理隔绝，推至最右 */
    }
    .pc-only-tool {
        display: none !important;
    }
    
    .model-dropdown-panel {
        position: absolute !important;
        top: 48px !important; /* 紧挂在 header 48px 高度下方 */
        left: 20px !important;
        right: auto !important;
        bottom: auto !important;
        width: calc(100vw - 40px) !important; /* 宽度自适应屏幕，两边留 20px 空隙 */
        max-width: 360px !important;
        max-height: 60vh !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
        z-index: 1000 !important;
        
        /* 恢复 PC 端的优雅向下展开动效 */
        transform: translateY(5px) scale(0.98) !important;
        transform-origin: top left !important;
        opacity: 0;
        transition: opacity 0.15s ease, transform 0.15s ease !important;
    }
    .model-dropdown-panel.show {
        transform: translateY(0) scale(1) !important;
        opacity: 1 !important;
    }
    
    .image-model-dropdown-panel {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important; /* 强行铺满屏幕左右 */
        max-width: 100vw !important;
        max-height: 50vh !important; /* 限制高度，留出上半截呼吸空间 */
        border-radius: 20px 20px 0 0 !important; /* 优雅的头部圆边 */
        border: 1px solid rgba(255, 255, 255, 0.9) !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.12) !important;
        padding: 16px 12px calc(16px + env(safe-area-inset-bottom)) 12px !important;
        z-index: 99999 !important;
        
        /* 改为自下而上滑入动效 */
        transform: translateY(100%) !important;
        transform-origin: bottom center !important;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s !important;
    }

    .image-model-dropdown-panel.show {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }

    /* 内部滚动条高度限制 */
    .model-list-wrapper {
        max-height: calc(50vh - 60px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .image-controller-panel.active {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;       /* 允许超出的按钮自然换行 */
        align-items: center !important;   /* 强制所有行内的子项垂直中线对齐 */
        justify-content: flex-start !important;
        gap: 8px 6px !important;          /* 按钮之间横向 6px，纵向换行 8px 紧凑间距 */
        padding: 8px 10px !important;
        height: auto !important;          /* 高度随换行自伸缩，杜绝空白断层 */
        overflow: visible !important;
    }

    /* 🌟 核心魔法：让所有嵌套的阻碍性 Div 容器在布局上“蒸发” */
    .panel-left-tools,
    .panel-left-tools > div[style*="display: flex"], 
    .image-controller-panel > div[style*="display:flex"] {
        display: contents !important;     /* 消除层级阻碍，让内部所有按钮直接参与外层 Flex 换行 */
    }

    /* ========================================================= */
    /* 垂直居中对齐：让“设置”与按钮高度完全一致 */
    /* ========================================================= */
    .panel-title {
        display: inline-flex !important;
        align-items: center !important;
        height: 32px !important;          /* 锁定 32px 高度，与按钮平齐 */
        font-size: 12px !important;
        font-weight: bold !important;
        color: #475467 !important;
        flex-shrink: 0 !important;
    }

    /* 优化分隔线：手机端只保留“设置”右侧的第一根分隔线，其余全部隐藏，防止换行时分隔线落单 */
    .image-controller-panel .tool-separator {
        display: none !important; 
    }
    .panel-title + .tool-separator {
        display: inline-block !important;
        height: 14px !important;
        width: 1px !important;
        background-color: #F2F4F7 !important;
        margin: 0 4px !important;
        flex-shrink: 0 !important;
    }

    /* ========================================================= */
    /* 💎 按钮高度与对齐标准化：彻底消灭高矮不一和文字下沉 */
    /* ========================================================= */
    .gray-dropdown-btn,
    #styleSelectorBtn {
        height: 32px !important;          /* 物理高度严格锁死 */
        line-height: 1 !important;        /* 掐灭任何默认行高引发的文字偏位 */
        padding: 0 10px !important;       /* 均匀左右边距 */
        font-size: 12px !important;
        display: inline-flex !important;
        align-items: center !important;   /* 强力垂直居中 */
        justify-content: center !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
        border: 1px solid #D0D5DD !important;
        background: #FFFFFF !important;
        flex-shrink: 0 !important;
    }

    /* 风格选择按钮内部微缩图垂直居中微调 */
    .style-btn-preview-container {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 18px !important;
        height: 18px !important;
        margin-right: 6px !important;
        margin-top: 0 !important;
    }

    /* ========================================================= */
    /* 🛡️ 弹窗防溢出装甲：解除父级绑定，100% 贴紧大底盘左右边缘 */
    /* ========================================================= */
    .dropdown-wrapper {
        position: static !important;      /* 手机端解除相对定位，让弹窗参考大底座 */
    }

    .upward-dropdown,
    .aspect-flyout-panel,
    .style-flyout-panel {
        position: absolute !important;
        left: 10px !important;            /* 距离控制条大底盘左边留 10px 呼吸间距 */
        right: 10px !important;           /* 距离右边留 10px 呼吸间距 */
        width: auto !important;           /* 砍掉固定宽度 */
        max-width: none !important;
        transform: none !important;       /* 彻底清除平移偏差 */
        bottom: calc(100% + 6px) !important; /* 悬浮在输入框上方 6px 处 */
        border-radius: 12px !important;
        box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.12) !important;
        z-index: 1000 !important;
        box-sizing: border-box !important;
    }

    /* 优化弹窗内部 Grid 布局，使其在 100% 宽度下完美均分 */
    .style-grid {
        grid-template-columns: repeat(4, 1fr) !important; /* 精准 4 等分 */
        gap: 8px !important;
        padding: 10px !important;
    }

    /* 1. 🌟 强制把【外层弹窗外壳】拉宽，左右撑满，只留 16px 呼吸边距 */
    /* 注：这里把所有可能的容器类名都写上，确保 100% 覆盖 */
    .aspect-flyout,
    .aspect-popover,
    div:has(> .aspect-flyout-grid) {
        width: calc(100% - 32px) !important; /* 左右各留 16px，撑满屏幕 */
        max-width: 450px !important;         /* 限制最大宽度，防止大屏手机拉得过宽 */
        left: 16px !important;               /* 定位死锁 */
        right: 16px !important;
        margin: 0 auto !important;           /* 水平居中 */
        box-sizing: border-box !important;
    }

    /* 2. 🌟 锁死 3 行 5 列！强制 5 等分网格 */
    .aspect-flyout-grid {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important; /* 🎯 锁死 5 列 */
        gap: 6px !important;                 /* 紧凑而精致的格子间距 */
        padding: 10px !important;            /* 内边距 */
        max-height: none !important;         /* 彻底干掉内部滚动条 */
    }

    /* 3. 🌟 单个卡片微调：适配 5 列的高精排版 */
    .aspect-card-item {
        width: 100% !important;
        height: 56px !important;             /* 适当降低高度，让 3 行看起来更精致协调 */
        padding: 4px 2px !important;         /* 紧凑内边距，给文字和图标留出最大空间 */
        border-radius: 6px !important;       /* 稍微锐化一点的精致小圆角 */
        box-sizing: border-box !important;
    }

    /* 4. 🌟 文字微调，确保 16:9、21:9 这种长文本在 5 列下也绝对不折行 */
    .aspect-card-item span {
        font-size: 10px !important;          /* 稍微缩小字号 */
        transform: scale(0.95);              /* 微弱缩放，确保在极窄手机上也能完美单行显示 */
        display: block !important;
        white-space: nowrap !important;      /* 强行禁止换行 */
    }
    
    .welcome-title {
        font-size: 24px !important;       /* 从 38px 缩减至 24px，确保移动端单行完美容纳 */
        text-align: center !important;
        letter-spacing: 1px !important;
        white-space: nowrap !important;   /* 强力锁死单行，绝对不许换行 */
    }
    
    .welcome-subtitle {
        font-size: 13px !important;       /* 从 16px 缩减至 13px */
        text-align: center !important;
        letter-spacing: 2px !important;
        margin-top: 6px !important;
    }
    

    .model-copy-container {
        margin-top: -3px !important; 
        margin-bottom: 0px !important;
        padding-left: 4px !important;   
        position: relative !important;
        z-index: 10 !important; 
    }

    .model-copy-trigger {
        padding: 2px 6px !important;    
        font-size: 11px !important;     
        color: #667085 !important;      
    }

}
/* 🌟 全屏防误触拦截罩 */
.menu-backdrop-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: transparent !important; /* 完全透明，用户看不见 */
    z-index: 9998 !important; /* 刚好在三点菜单（通常为 9999）的下一层，但在会话列表（10~110）的极高层 */
    cursor: default;
}




/* ========================================================= */
/* 💎 运行沙盒：阴影无缝自愈系统（彻底干掉关闭时的边缘黑影）   */
/* ========================================================= */

.sandbox-drawer {
    position: fixed !important;
    top: 0 !important;
    
    /* 1. 物理出界锁：自身有多宽，就平移多远 */
    right: 0 !important;
    transform: translate3d(100%, 0, 0) !important;
    
    width: 500px; 
    height: 100vh;
    height: 100dvh;
    
    border-top-left-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
    background: rgba(15, 17, 23, 0.75) !important;
    backdrop-filter: blur(30px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(160%) !important;
    
    /*border-left: 1.5px solid rgba(255, 255, 255, 0.15) !important;*/
    border-top: none !important;
    border-bottom: none !important;
    border-right: none !important;
    
    /* 🌟 核心破局点：在关闭状态下，将阴影彻底抹去，并让不透明度归零，防止投影边缘漏光 */
    box-shadow: none !important;
    opacity: 0;
    
    z-index: 99995 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    
    /* 🌟 将 shadow 和 opacity 纳入阻尼动画，使其退场时与位移同步消融 */
    transition: 
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
        right 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
        width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s ease,
        opacity 0.35s ease !important;
    box-sizing: border-box;
}

/* 🌟 激活状态：平滑召回实体、不透明度、以及左侧质感弥散大投影 */
.sandbox-drawer.active {
    right: 0px !important;
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    /* 只有展开时，投影才优雅地探出左边缘 */
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.55) !important;
}

.sandbox-resizer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 6px !important; /* 6px 黄金热区，既不影响内部点击，又极易被鼠标捕捉 */
    height: 100% !important;
    cursor: ew-resize !important; /* 双向拉伸指针 */
    z-index: 99999 !important; /* 置于弹窗最上层 */
    background: transparent; /* 平时完全透明，无形中彰显高级感 */
    transition: background-color 0.2s ease;
}

/* 鼠标悬浮在手柄上，或者正在拖拽时，微微亮起一条极细的科技蓝极光线提示用户 */
.sandbox-resizer:hover,
.sandbox-drawer.resizing .sandbox-resizer {
    background-color: rgba(79, 168, 249, 0.35) !important;
}

/* 全屏时隐藏拖拽条 */
.sandbox-drawer.fullscreen .sandbox-resizer {
    display: none !important;
}

.sandbox-header {
    height: 52px;
    padding: 0 16px 0 20px; /* 左侧留出 20px 避开圆角和拖拽条 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.sandbox-title-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 呼吸绿灯：代表代码正在安全运行 */
.sandbox-pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 8px #10b981;
    animation: sandbox-pulse 1.8s infinite;
}

@keyframes sandbox-pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.sandbox-title {
    font-size: 13.5px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.5px;
}

.sandbox-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sandbox-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.2s;
}

.sandbox-action-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}

.sandbox-action-btn.close:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
}

/* 沙盒主体区域 */
.sandbox-body {
    flex: 1;
    background: #ffffff; /* 沙盒内部必须保持纯白网页底，确保运行页面不偏色 */
    overflow: hidden;
    position: relative;
}

#sandboxIframe {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    display: block;
}

/* ⚡ 全屏预览模式 */
.sandbox-drawer.fullscreen {
    width: 100vw !important;
    border-left: none !important;
}

/* --------------------------------------------------------- */
/* 💻 PC端代码块的“运行”按钮微调 */
/* --------------------------------------------------------- */
.code-header .run-code-btn {
    margin-right: 6px;
    border-color: #10b981;
    color: #10b981;
}

.code-header .run-code-btn:hover {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #10b981 !important;
}

/* ========================================================= */
/* 💎 七七空间 运行按钮（SVG 极客美学版）                     */
/* ========================================================= */

.code-header .run-code-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important; /* 图标与“运行”文字的黄金间距 */
    background: rgba(16, 185, 129, 0.04) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    color: #10b981 !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 🎯 SVG 图标默认微弱发光 */
.code-header .run-code-btn .run-svg-icon {
    filter: drop-shadow(0 0 2px rgba(16, 185, 129, 0.3));
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.2s ease !important;
}

/* 🌟 鼠标悬浮激活：按钮背景变亮，边框发光 */
.code-header .run-code-btn:hover {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important; /* 悬浮时变为更亮的极光绿 */
}

/* ⚡ 悬浮时，闪电图标向下并向右微调，模拟“注入能量”的动态反馈 */
.code-header .run-code-btn:hover .run-svg-icon {
    transform: translate(0.5px, 0.5px) scale(1.05) !important;
    filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.8)) !important;
    fill: rgba(16, 185, 129, 0.2); /* 悬浮时闪电中心隐约填充半透明绿色 */
}

/* 点击时的物理缩水触觉反馈 */
.code-header .run-code-btn:active {
    transform: scale(0.96) !important;
}

/* --------------------------------------------------------- */
/* 📱 移动H5自适应：100% 满屏覆盖 */
/* --------------------------------------------------------- */
@media (max-width: 768px) {
    .sandbox-drawer {
        width: 100vw !important;
        right: -100vw;
        border-left: none !important;
    }
    
    .sandbox-drawer.active {
        right: 0 !important;
    }
    
    #sandboxFullscreenBtn {
        display: none !important; /* 手机端强制全屏，隐藏无意义的全屏切换按钮 */
    }
}

/* ========================================================= */
/* 💎 沙盒 iframe 容器 —— 修复 iOS 微信高度塌陷              */
/* ========================================================= */

.sandbox-iframe-wrap {
    position: relative !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
}

#sandboxIframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    display: block !important;
    background: #ffffff !important;
}

/* ========================================================= */
/* 🌀 沙盒专属：极简高级感旋转加载器                          */
/* ========================================================= */

.sandbox-loader-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255, 255, 255, 0.85) !important; /* 浅色高透磨砂，适配白色沙盒底 */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99 !important; /* 刚好压在 iframe 之上 */
    opacity: 1;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none; /* 允许穿透点击 */
}

/* 渐隐动画类 */
.sandbox-loader-overlay.fade-out {
    opacity: 0 !important;
}

/* 旋转菊花 */
.sandbox-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(15, 23, 42, 0.08);
    border-top-color: #0f172a; /* 你的主题深色 */
    border-radius: 50%;
    animation: sandbox-spin 0.8s linear infinite;
}

/* 加载文字 */
.sandbox-loader-text {
    margin-top: 12px;
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    letter-spacing: 0.5px;
}

@keyframes sandbox-spin {
    to { transform: rotate(360deg); }
}


/* ========================================================= */
/* 🎨 修正：生图按钮在 PC 与手机端的精细响应式显隐与对齐      */
/* ========================================================= */

/* 1. 默认在网页 PC 端：隐藏“生图”汉字 */
.mobile-image-gen-text {
    display: none !important;
}

/* 2. 响应式：仅在 768px 以下的手机端激活文字显示与美化 */
@media (max-width: 768px) {
    /* 强制释放生图按钮，使其呈现为包含文字的精致小胶囊 */
    .btn-attachment-master#imageModelQuickBtn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;            /* 图标与文字之间的黄金呼吸间距 */
        padding: 0 10px !important;     /* 稍微拓宽左右内边距，使胶囊更加温润 */
        width: auto !important;         /* 强制解除 PC 端的 44px 锁死限制，自适应文字宽度 */
        height: 32px !important;        /* 维持 32px 物理高度轴对齐 */
    }

    /* 🎯 唤醒并格式化生图文字（默认状态下使用高质感曜石黑） */
    .btn-attachment-master#imageModelQuickBtn:not(.linking-amber):not(.linked-blue):not(.failed-red) .mobile-image-gen-text {
        color: #333333 !important;      /* 👈 默认状态下，“生图”文字呈现精致的深黑色 */
    }

    /* 统一文字的基础响应式样式 */
    .mobile-image-gen-text {
        display: inline-block !important; /* 手机端唤醒显示 */
        font-size: 12.5px !important;    /* 配合手机端视网膜屏的精致字号 */
        font-weight: 600 !important;     /* 稍微加粗，使其更具拟物化质感 */
        line-height: 1 !important;       /* 抹平默认偏位，确保与 SVG 绝对垂直居中 */
    }
}