/* * archive-kiosk.css * * 上海市流动人员人事档案咨询 · 公共自助终端「单会话 Kiosk 模式」专用样式。 * 仅在 上挂 data-archive-kiosk="1" 时生效（由 archive-kiosk.js 在 * URL ?kiosk=archive-assistant 时挂载）。普通访问完全不受影响。 * * 适配硬件：1080x1920 竖屏 / 1920x1080 横屏 自助一体机；字号采用 clamp + vmin * 自适应，远距离触屏可见、可点。 */ /* ============================================================ * 1. 隐藏左侧历史会话菜单 / 全局导航 / Agent 选择器 * 使用宽泛的选择器命中各类侧栏实现。仅在 kiosk 模式下生效。 * ============================================================ */ html[data-archive-kiosk="1"] aside, html[data-archive-kiosk="1"] nav[role="navigation"], html[data-archive-kiosk="1"] .ant-layout-sider, html[data-archive-kiosk="1"] [class*="ConversationList"], html[data-archive-kiosk="1"] [class*="conversation-list"], html[data-archive-kiosk="1"] [class*="conv-list"], html[data-archive-kiosk="1"] [class*="ConvList"], html[data-archive-kiosk="1"] [class*="SidebarLeft"], html[data-archive-kiosk="1"] [class*="sidebar-left"], html[data-archive-kiosk="1"] [class*="LeftSidebar"], html[data-archive-kiosk="1"] [class*="left-sider"], html[data-archive-kiosk="1"] [class*="LeftSider"], html[data-archive-kiosk="1"] [class*="HistoryList"], html[data-archive-kiosk="1"] [class*="history-list"], html[data-archive-kiosk="1"] [class*="AgentSelector"], html[data-archive-kiosk="1"] [class*="agent-selector"], html[data-archive-kiosk="1"] [class*="AgentSwitcher"], html[data-archive-kiosk="1"] [class*="agent-switcher"] { display: none !important; } html[data-archive-kiosk="1"] { --sidebar-width: 0px !important; --archive-kiosk-content-width: min(1120px, calc(100vw - 160px)); --archive-kiosk-input-width: min(1120px, calc(100vw - 160px)); --archive-kiosk-input-bottom: clamp(132px, 12vh, 220px); --archive-kiosk-keyboard-offset: 0px; } html[data-archive-kiosk="1"], html[data-archive-kiosk="1"] body, html[data-archive-kiosk="1"] #root { width: 100%; height: 100%; overflow: hidden !important; overscroll-behavior: none; background: #eef6ff; } html[data-archive-kiosk="1"] * { scrollbar-width: none; } html[data-archive-kiosk="1"] *::-webkit-scrollbar { width: 0; height: 0; } html[data-archive-kiosk="1"] .mobile-topbar-app-icon { width: 24px !important; height: 24px !important; border-radius: 8px !important; display: inline-grid !important; place-items: center !important; flex-shrink: 0 !important; font-size: 0 !important; background: radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.95) 0 2px, transparent 3px), radial-gradient(circle at 82% 76%, rgba(22, 119, 255, 0.82) 0 2px, transparent 3px), linear-gradient(135deg, #f7fbff 0%, #cde8ff 54%, #78baff 100%) !important; color: #07336f !important; box-shadow: 0 2px 8px rgba(33, 88, 150, 0.18), inset 0 1px 4px rgba(255, 255, 255, 0.75), inset 0 -3px 7px rgba(7, 51, 111, 0.12) !important; } html[data-archive-kiosk="1"] .mobile-topbar-app-icon::before { content: "AI"; font-size: 10px; font-weight: 950; letter-spacing: 0; line-height: 1; } /* ============================================================ * 2. 隐藏「主页」上与档案咨询无关的内容区块（咨询页只保留对话功能） * ============================================================ */ html[data-archive-kiosk="1"] .app-home-hero, html[data-archive-kiosk="1"] .home-quick-section, html[data-archive-kiosk="1"] .home-feature-section, html[data-archive-kiosk="1"] .home-recent-section, html[data-archive-kiosk="1"] [class*="MobilePicker"], html[data-archive-kiosk="1"] [class*="mobile-picker"] { display: none !important; } /* 隐藏 composer 中的 agent / 模型选择 chip（用户不需要切换，避免误触）*/ html[data-archive-kiosk="1"] .unified-composer-chip { display: none !important; } /* ============================================================ * 3. 进入咨询页后只保留与档案咨询相关的内容 * - 隐藏 .agent-skills-section：那是给开发者看的 skill 列表（archive-query / archive-search * 的英文标识 + 内部描述），对终端用户没意义反而困惑。 * - 保留 .agent-chat-ready-header（agent logo / 名称 / greeting / description） * - 保留 .agent-questions-section（"试试问我" + agent.json 里的 openingQuestions） * 这样引导问题列表完全由 React 原生渲染，永不会被重渲染冲掉。 * * 字体 / 尺寸适配策略：使用 clamp(min, X, max)，X 优先用 vh（垂直方向受限时优先缩小， * 避免溢出滚动），关键水平指标辅以 vmin 防止极宽屏过大。这样在 1080x1920 竖屏、 * 1920x1080 横屏、桌面 1024x600 等不同比例下均不会出现滚动条，且字号合理。 * ============================================================ */ html[data-archive-kiosk="1"] .agent-skills-section { display: none !important; } html[data-archive-kiosk="1"] .agent-chat-ready { min-height: 100dvh !important; background: linear-gradient(180deg, rgba(238, 246, 255, 0.96) 0%, #f8fbff 42%, #eef6ff 100%), linear-gradient(90deg, rgba(22, 119, 255, 0.05), transparent 16%, transparent 84%, rgba(22, 119, 255, 0.05)); overflow: hidden !important; } html[data-archive-kiosk="1"] .agent-chat-ready-content { width: var(--archive-kiosk-content-width) !important; max-width: none !important; box-sizing: border-box !important; margin: 0 auto !important; overflow: hidden !important; padding: clamp(122px, 9.2vh, 176px) 0 calc(var(--archive-kiosk-input-bottom) + var(--archive-kiosk-keyboard-offset) + clamp(220px, 16vh, 308px)) !important; } html[data-archive-kiosk="1"] .agent-chat-ready-header { gap: clamp(8px, 0.9vh, 14px) !important; margin-bottom: clamp(22px, 2.8vh, 44px) !important; padding-top: 0 !important; } html[data-archive-kiosk="1"] .agent-chat-ready-avatar-lg { display: none !important; } html[data-archive-kiosk="1"] .agent-chat-ready-header::before { content: "AI"; width: clamp(92px, 9.6vmin, 116px); height: clamp(92px, 9.6vmin, 116px); border-radius: clamp(24px, 2.5vmin, 32px); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.95) 0 5px, transparent 6px), radial-gradient(circle at 82% 76%, rgba(255, 255, 255, 0.78) 0 4px, transparent 5px), linear-gradient(135deg, #e9f5ff 0%, #b7ddff 42%, #5da8ff 100%); color: #07336f; font-size: clamp(38px, 4.2vmin, 52px); font-weight: 950; letter-spacing: -0.01em; line-height: 1; box-shadow: 0 16px 34px rgba(33, 88, 150, 0.18), 0 0 0 8px rgba(22, 119, 255, 0.11), 0 0 0 17px rgba(22, 119, 255, 0.045), inset 0 4px 16px rgba(255, 255, 255, 0.7), inset 0 -10px 20px rgba(7, 51, 111, 0.12); } html[data-archive-kiosk="1"] .agent-chat-ready-name { font-size: clamp(34px, 3.65vmin, 44px) !important; font-weight: 850 !important; letter-spacing: 0.06em; margin-top: clamp(12px, 1.2vh, 20px) !important; line-height: 1.22 !important; } html[data-archive-kiosk="1"] .agent-chat-ready-greeting { font-size: clamp(24px, 2.25vmin, 30px) !important; color: #324f72 !important; margin-top: clamp(2px, 0.4vh, 8px) !important; line-height: 1.52 !important; font-weight: 650 !important; opacity: 0.9 !important; } html[data-archive-kiosk="1"] .agent-chat-ready-desc { max-width: min(720px, 100%) !important; font-size: clamp(19px, 1.8vmin, 23px) !important; color: #6a7f98 !important; margin-top: clamp(4px, 0.8vh, 12px) !important; line-height: 1.62 !important; } html[data-archive-kiosk="1"] .agent-questions-section { width: 100% !important; max-width: none !important; margin-top: clamp(100px, 8.4vh, 162px) !important; } html[data-archive-kiosk="1"] .agent-questions-section .agent-skills-label { display: flex !important; align-items: center !important; gap: clamp(14px, 1.5vw, 24px) !important; font-size: 0 !important; color: #416184 !important; margin-bottom: clamp(18px, 2vh, 28px) !important; letter-spacing: 0; } html[data-archive-kiosk="1"] .agent-questions-section .agent-skills-label::before { content: "常见咨询"; flex: 0 0 auto; font-size: clamp(22px, 2.05vmin, 27px); font-weight: 800; letter-spacing: 0.02em; } html[data-archive-kiosk="1"] .agent-questions-section .agent-skills-label::after { content: ""; height: 2px; flex: 1 1 auto; background: linear-gradient(90deg, rgba(22, 119, 255, 0.24), rgba(22, 119, 255, 0)); } /* * 默认（窄屏 / 竖屏）单列；横屏宽屏自动 2 列，让 4 个问题压成 2x2， * 避免出现垂直滚动条。 */ html[data-archive-kiosk="1"] .agent-questions-list { display: grid !important; grid-template-columns: 1fr !important; gap: clamp(18px, 1.75vh, 24px) !important; } @media (orientation: landscape) and (min-width: 720px) { html[data-archive-kiosk="1"] .agent-questions-list { grid-template-columns: 1fr 1fr !important; } } html[data-archive-kiosk="1"] .agent-question-item { align-items: center !important; min-height: clamp(88px, 5.7vh, 108px) !important; padding: clamp(18px, 1.8vh, 25px) clamp(28px, 3vw, 40px) !important; border-radius: clamp(16px, 1.6vmin, 22px) !important; border: 2px solid rgba(22, 119, 255, 0.22) !important; background: rgba(255, 255, 255, 0.82) !important; font-size: clamp(22px, 2.08vmin, 27px) !important; font-weight: 650 !important; line-height: 1.45 !important; color: #24364c !important; box-shadow: 0 10px 24px rgba(31, 92, 161, 0.08) !important; transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease; } html[data-archive-kiosk="1"] .agent-question-item .anticon, html[data-archive-kiosk="1"] .agent-question-item svg { flex: 0 0 auto !important; font-size: clamp(24px, 2.35vmin, 30px) !important; color: #1677ff !important; } html[data-archive-kiosk="1"] .agent-question-item:hover { background: rgba(22, 119, 255, 0.1) !important; border-color: #1677ff !important; } html[data-archive-kiosk="1"] .agent-question-item:active { transform: scale(0.985); } /* ============================================================ * 4. 欢迎页（全屏覆盖）—— 重新设计的政务自助终端版 * 适配 1080x1920 竖屏 / 横屏，字号自适应 * ============================================================ */ .archive-kiosk-welcome { position: fixed; inset: 0; z-index: 99999; color: #fff; user-select: none; -webkit-user-select: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", Roboto, "Helvetica Neue", Arial, sans-serif; overflow: hidden; min-height: 100dvh; background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.12) 0%, transparent 60%), radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0.35) 0%, transparent 50%), linear-gradient(180deg, #0a3a8e 0%, #062a6c 50%, #04194a 100%); } /* 顶部品牌区（左上 logo + 机构名）*/ .archive-kiosk-welcome-brand { position: absolute; top: clamp(56px, 6.8vh, 132px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); color: rgba(255, 255, 255, 0.92); font-size: clamp(20px, 2vmin, 26px); letter-spacing: 0.18em; font-weight: 500; } .archive-kiosk-welcome-brand-bar { width: clamp(28px, 4vmin, 56px); height: 2px; background: rgba(255, 216, 107, 0.85); } /* 主卡片区 */ .archive-kiosk-welcome-card { position: absolute; top: 43%; left: 50%; transform: translate(-50%, -50%); text-align: center; max-width: min(760px, 74vw); padding: 0 clamp(20px, 4vw, 60px); width: 100%; } .archive-kiosk-welcome-logo { width: clamp(108px, 12.4vmin, 144px); height: clamp(108px, 12.4vmin, 144px); margin: 0 auto clamp(32px, 3.8vh, 58px); border-radius: clamp(30px, 3.2vmin, 42px); background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(183, 221, 255, 0.86)), linear-gradient(135deg, #e9f5ff 0%, #6bb5ff 100%); display: flex; align-items: center; justify-content: center; gap: clamp(8px, 0.8vmin, 11px); font-size: clamp(44px, 5vmin, 62px); font-weight: 950; line-height: 1; color: #062a6c; box-shadow: 0 16px 60px rgba(0, 0, 0, 0.4), 0 0 0 10px rgba(93, 168, 255, 0.15), inset 0 -8px 24px rgba(7, 51, 111, 0.16), inset 0 4px 16px rgba(255, 255, 255, 0.72); position: relative; } .archive-kiosk-welcome-logo::before, .archive-kiosk-welcome-logo::after { content: ""; position: absolute; inset: -9px; border: 1.5px solid rgba(183, 221, 255, 0.42); border-radius: clamp(36px, 3.8vmin, 52px); pointer-events: none; } .archive-kiosk-welcome-logo::after { inset: -18px; border-color: rgba(93, 168, 255, 0.18); border-radius: clamp(42px, 4.4vmin, 62px); box-shadow: 0 0 34px rgba(93, 168, 255, 0.18); } .archive-kiosk-welcome-logo-text { position: relative; z-index: 2; letter-spacing: -0.02em; text-shadow: 0 2px 12px rgba(255, 255, 255, 0.62); } .archive-kiosk-welcome-logo-node { width: clamp(10px, 1.1vmin, 15px); height: clamp(10px, 1.1vmin, 15px); border-radius: 50%; background: #1677ff; box-shadow: 0 0 0 5px rgba(22, 119, 255, 0.12), 0 0 18px rgba(22, 119, 255, 0.56); } /* 主标题（中文）*/ .archive-kiosk-welcome h1 { font-size: clamp(44px, 5.05vmin, 62px); font-weight: 850; margin: 0 0 clamp(10px, 1.4vh, 22px); letter-spacing: 0.06em; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); line-height: 1.28; } /* 副标题（英文 / 简介）*/ .archive-kiosk-welcome-en { font-size: clamp(16px, 1.65vmin, 22px); color: rgba(255, 216, 107, 0.85); letter-spacing: 0.32em; margin: 0 0 clamp(28px, 3.3vh, 50px); font-weight: 400; text-transform: uppercase; } /* 副说明文字 */ .archive-kiosk-welcome-sub { font-size: clamp(23px, 2.25vmin, 29px); color: rgba(255, 255, 255, 0.85); margin: 0 0 clamp(46px, 5.4vh, 88px); line-height: 1.82; max-width: 680px; margin-left: auto; margin-right: auto; } /* 大按钮 */ .archive-kiosk-start-btn { width: clamp(420px, 62vw, 680px); min-height: clamp(88px, 7.4vh, 128px); font-size: clamp(30px, 3.2vmin, 40px); font-weight: 700; letter-spacing: 0.5em; padding-left: 0.5em; padding-right: 0; padding-top: clamp(18px, 2.2vh, 28px); padding-bottom: clamp(18px, 2.2vh, 28px); border: none; border-radius: clamp(18px, 1.8vmin, 26px); background: linear-gradient(135deg, #fff 0%, #f5faff 100%); color: #062a6c; cursor: pointer; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 -4px 0 rgba(0, 0, 0, 0.06); transition: transform 0.18s ease, box-shadow 0.18s ease; font-family: inherit; } .archive-kiosk-start-btn:disabled { cursor: wait; opacity: 0.82; transform: none; } .archive-kiosk-start-btn:hover { transform: translateY(-3px); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42), 0 6px 18px rgba(0, 0, 0, 0.22), inset 0 -4px 0 rgba(0, 0, 0, 0.06); } .archive-kiosk-start-btn:active { transform: translateY(0); } .archive-kiosk-start-status { min-height: clamp(34px, 3.6vh, 52px); max-width: min(680px, 72vw); margin: clamp(24px, 3vh, 44px) auto 0; font-size: clamp(18px, 1.85vmin, 24px); line-height: 1.5; color: rgba(255, 255, 255, 0.86); } .archive-kiosk-start-status[data-tone="error"] { color: #fff2d9; font-weight: 600; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } /* 底部提示 */ .archive-kiosk-welcome-tip { position: absolute; bottom: clamp(78px, 8vh, 138px); left: 50%; transform: translateX(-50%); margin: 0; font-size: clamp(18px, 1.8vmin, 24px); color: rgba(255, 255, 255, 0.65); line-height: 1.8; text-align: center; letter-spacing: 0.04em; } .archive-kiosk-welcome-tip strong { color: rgba(255, 216, 107, 0.92); font-weight: 500; } /* ============================================================ * 5. 底部触摸操作台 * - 语音提示区就是大触摸按钮，按住收声，离手自动发送 * - "结束咨询"并入操作台右侧，适合大屏触摸 * ============================================================ */ html[data-archive-kiosk="1"] .unified-composer { position: relative !important; overflow: visible !important; min-height: clamp(136px, 11vh, 180px) !important; border-radius: clamp(18px, 1.8vmin, 24px) !important; padding: clamp(16px, 1.6vh, 24px) clamp(22px, 2.4vw, 34px) !important; border: 1px solid rgba(22, 119, 255, 0.16) !important; box-shadow: 0 22px 56px rgba(13, 46, 90, 0.16), 0 8px 22px rgba(22, 119, 255, 0.08) !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.96)) !important; } html[data-archive-kiosk="1"] .agent-chat-ready-composer-bar, html[data-archive-kiosk="1"] .chat-input-bar { padding-top: clamp(18px, 2.4vh, 44px) !important; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: calc(var(--archive-kiosk-input-bottom) + var(--archive-kiosk-keyboard-offset)) !important; background: transparent !important; box-shadow: none !important; } html[data-archive-kiosk="1"] .agent-chat-ready-input, html[data-archive-kiosk="1"] .chat-input-bar .unified-composer { width: var(--archive-kiosk-input-width) !important; } html[data-archive-kiosk="1"] .unified-composer-input-row { display: none !important; } html[data-archive-kiosk="1"] .unified-composer-toolbar-row { display: none !important; } html[data-archive-kiosk="1"] .unified-composer-textarea { font-size: clamp(24px, 2.25vmin, 30px) !important; line-height: 1.5 !important; min-height: clamp(58px, 4.6vh, 78px) !important; padding: clamp(8px, 0.8vh, 12px) 0 !important; color: #1f2f46 !important; font-weight: 550 !important; } html[data-archive-kiosk="1"] .unified-composer-textarea::placeholder { color: rgba(69, 90, 116, 0.58) !important; font-weight: 500 !important; } html[data-archive-kiosk="1"] .unified-composer-voice-status { width: 100% !important; min-height: clamp(104px, 8.2vh, 136px) !important; margin: 0 !important; padding: clamp(16px, 1.7vh, 24px) clamp(248px, 21vw, 322px) clamp(16px, 1.7vh, 24px) clamp(20px, 2.2vw, 32px) !important; border-radius: clamp(16px, 1.6vmin, 22px) !important; border: 2px solid rgba(22, 119, 255, 0.16) !important; background: linear-gradient(180deg, #f7fbff, #eef7ff) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.86) !important; } html[data-archive-kiosk="1"] .unified-composer-voice-status--recording { border-color: rgba(255, 77, 79, 0.32) !important; background: #fff2f0 !important; } html[data-archive-kiosk="1"] .unified-composer-voice-status--transcribing, html[data-archive-kiosk="1"] .unified-composer-voice-status--requesting { background: #e6f4ff !important; } html[data-archive-kiosk="1"] .unified-composer-voice-status-icon { width: clamp(44px, 4.4vmin, 58px) !important; height: clamp(44px, 4.4vmin, 58px) !important; border-radius: clamp(12px, 1.3vmin, 17px) !important; font-size: clamp(20px, 2vmin, 26px) !important; } html[data-archive-kiosk="1"] .unified-composer-voice-status-copy strong { font-size: clamp(28px, 2.65vmin, 38px) !important; line-height: 1.25 !important; } html[data-archive-kiosk="1"] .unified-composer-voice-status-copy span { font-size: clamp(20px, 1.95vmin, 28px) !important; line-height: 1.35 !important; color: rgba(31, 47, 70, 0.72) !important; } html[data-archive-kiosk="1"] .unified-composer-voice-status-meter { flex-basis: clamp(260px, 25vw, 360px) !important; gap: clamp(10px, 1.2vw, 16px) !important; } html[data-archive-kiosk="1"] .unified-composer-voice-status .unified-composer-voice-waveform { width: clamp(132px, 14vw, 210px) !important; height: clamp(34px, 3.8vmin, 48px) !important; } html[data-archive-kiosk="1"] .unified-composer-voice-duration { font-size: clamp(18px, 1.7vmin, 23px) !important; line-height: 1.2 !important; padding: clamp(7px, 0.8vh, 10px) clamp(10px, 1vw, 14px) !important; } html[data-archive-kiosk="1"] .ant-upload:has(.unified-composer-tool[title="附加文件"]), html[data-archive-kiosk="1"] .unified-composer-tool[title="附加文件"] { display: none !important; } html[data-archive-kiosk="1"] .unified-composer-tool { width: clamp(54px, 5vmin, 66px) !important; height: clamp(54px, 5vmin, 66px) !important; border-radius: clamp(14px, 1.4vmin, 18px) !important; font-size: clamp(22px, 2.2vmin, 28px) !important; } html[data-archive-kiosk="1"] .unified-composer-voice-tool { display: none !important; width: clamp(168px, 15.5vmin, 218px) !important; gap: clamp(8px, 1vw, 12px) !important; background: #e6f4ff !important; color: #0958d9 !important; border: 2px solid rgba(22, 119, 255, 0.18) !important; } html[data-archive-kiosk="1"] .unified-composer-voice-tool::after { content: "按住说话"; font-size: clamp(20px, 1.9vmin, 25px); font-weight: 700; line-height: 1; } html[data-archive-kiosk="1"] .unified-composer-voice-tool--recording::after { content: "松开发送"; } html[data-archive-kiosk="1"] .unified-composer-voice-tool--busy::after { content: "识别中"; } html[data-archive-kiosk="1"] .chat-send-btn { width: clamp(54px, 5vmin, 66px) !important; height: clamp(54px, 5vmin, 66px) !important; display: none !important; } html[data-archive-kiosk="1"] .chat-send-btn .anticon { font-size: clamp(20px, 2vmin, 26px) !important; } .archive-kiosk-end-btn { position: absolute; top: 50%; right: clamp(22px, 2.4vw, 34px); z-index: 10; display: inline-flex; align-items: center; justify-content: center; gap: clamp(6px, 0.7vw, 10px); width: clamp(188px, 16vw, 244px); min-height: clamp(68px, 6vh, 88px); padding: clamp(12px, 1.35vh, 18px) clamp(20px, 2.2vw, 30px); border: 1px solid rgba(255, 77, 79, 0.22); background: rgba(255, 247, 247, 0.78); color: #c92a2a; border-radius: clamp(14px, 1.5vmin, 20px); font-size: clamp(20px, 1.95vmin, 26px); font-weight: 700; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 8px 18px rgba(201, 42, 42, 0.06); transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease; font-family: inherit; letter-spacing: 0; transform: translateY(-50%); } .archive-kiosk-end-btn:hover { background: rgba(255, 241, 240, 0.92); border-color: rgba(255, 77, 79, 0.38); color: #b42318; transform: translateY(calc(-50% - 1px)); } .archive-kiosk-end-btn:focus-visible { outline: 4px solid rgba(255, 77, 79, 0.22); outline-offset: 4px; } .archive-kiosk-end-btn::before { content: "×"; display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: rgba(255, 77, 79, 0.1); font-weight: 700; } /* ============================================================ * 6. 闲置预警模态框 * ============================================================ */ .archive-kiosk-modal { position: fixed; inset: 0; z-index: 99998; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; font-family: inherit; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .archive-kiosk-modal-card { background: #fff; border-radius: clamp(12px, 1.6vmin, 20px); padding: clamp(28px, 4vh, 48px) clamp(28px, 4vw, 56px); min-width: min(560px, 82vw); max-width: min(720px, 88vw); text-align: center; box-shadow: 0 24px 72px rgba(0, 0, 0, 0.4); } .archive-kiosk-modal-card h3 { font-size: clamp(30px, 3vmin, 40px); font-weight: 700; margin: 0 0 clamp(10px, 1.4vh, 16px); color: #1f1f1f; } .archive-kiosk-modal-card p { font-size: clamp(22px, 2.2vmin, 28px); color: #666; margin: 0 0 clamp(20px, 3vh, 32px); line-height: 1.7; } .archive-kiosk-modal-card .archive-kiosk-countdown { color: #ff4d4f; font-weight: 700; font-size: 1.2em; } .archive-kiosk-modal-actions { display: flex; gap: clamp(10px, 1.6vw, 18px); justify-content: center; } .archive-kiosk-btn { min-height: clamp(64px, 5.8vh, 84px); padding: clamp(14px, 1.6vh, 22px) clamp(34px, 4vw, 52px); border-radius: clamp(14px, 1.5vmin, 20px); font-size: clamp(22px, 2.2vmin, 28px); font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; font-family: inherit; } .archive-kiosk-btn-primary { background: #1677ff; color: #fff; } .archive-kiosk-btn-primary:hover { background: #4096ff; } .archive-kiosk-btn-danger { background: #fff; color: #ff4d4f; border-color: #ff4d4f; } .archive-kiosk-btn-danger:hover { background: #ff4d4f; color: #fff; } html[data-archive-kiosk="1"] .msg-row { max-width: var(--archive-kiosk-content-width) !important; padding-top: clamp(12px, 1.1vh, 18px) !important; padding-bottom: clamp(12px, 1.1vh, 18px) !important; } html[data-archive-kiosk="1"] .msg-content { font-size: clamp(21px, 2.05vmin, 27px) !important; line-height: 1.82 !important; } html[data-archive-kiosk="1"] .msg-user-bubble { font-size: clamp(21px, 2.05vmin, 27px) !important; line-height: 1.72 !important; padding: clamp(14px, 1.35vh, 20px) clamp(18px, 2vw, 28px) !important; border-radius: clamp(18px, 1.7vmin, 24px) !important; } html[data-archive-kiosk="1"] .markdown-body { font-size: inherit !important; line-height: inherit !important; } html[data-archive-kiosk="1"] .markdown-body p, html[data-archive-kiosk="1"] .markdown-body li { margin-bottom: clamp(10px, 1vh, 16px) !important; } html[data-archive-kiosk="1"] .markdown-link-plain { color: #0958d9; font-weight: 650; word-break: break-all; } /* ============================================================ * 7. 防误触：在 kiosk 模式下禁用文本选中（避免长按选中后弹出系统菜单） * 但保留输入框可交互。 * ============================================================ */ html[data-archive-kiosk="1"] body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } html[data-archive-kiosk="1"] input, html[data-archive-kiosk="1"] textarea, html[data-archive-kiosk="1"] [contenteditable="true"] { -webkit-user-select: text; user-select: text; }