html, body {margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100vw !important; height: 100% !important; min-width: 0 !important; overflow: hidden !important; font-family: "PingFang SC"; color: #1e293b; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; touch-action: manipulation;}
*, *::before, *::after {box-sizing: border-box;}
.fltrp-ai-app {position: relative; width: 100% !important; max-width: 100vw !important; height: 100vh; height: 100dvh; display: flex; overflow: hidden; background-color: #f7faff;}
.send-icon-img {width: 28px; height: 28px; display: block;}
.send-icon-svg {width: 26px; height: 26px; display: block;}
/* ==========================================================================
   2. Top-Right Language Switcher (Matching Design)
   ========================================================================== */
.lang-selector-wrap {position: absolute; top: 11px; right: 11px; z-index: 100;}
.lang-toggle-btn {display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; background: transparent; border: 1px solid transparent; border-radius: 8px; font-size: 16px; color: #222222; font-weight: 400; cursor: pointer; transition: all 0.15s ease; user-select: none; font-family: inherit;}
.lang-toggle-btn:hover,.lang-toggle-btn.open {color: #0f172a; background: rgba(255, 255, 255, 0.75); border-color: rgba(226, 232, 240, 0.8); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);}
.lang-toggle-btn .chevron-icon {width: 10px; height: 6px; color: #64748b; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s ease; flex-shrink: 0;}
.lang-toggle-btn.open .chevron-icon {transform: rotate(180deg); color: #2563eb;}
.lang-dropdown-menu {position: absolute; top: calc(100% + 6px); right: 0; background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.95); border-radius: 10px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04); min-width: 124px; padding: 5px; display: none; flex-direction: column; gap: 2px; z-index: 200; animation: fadeInDown 0.15s ease-out;}
.lang-dropdown-menu.show {display: flex;}
.lang-item {display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 13.5px; color: #334155; border-radius: 6px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease;}
.lang-item:hover {background: #f1f5f9; color: #2563eb;}
.lang-item.active {color: #2563eb; font-weight: 600; background: rgba(37, 99, 235, 0.07);}
.lang-check-icon {color: #2563eb; flex-shrink: 0; margin-left: 8px;}
/* ==========================================================================
   3. Sidebar Navigation (Zero-Jank 60FPS Performance & Mockup Colors)
   ========================================================================== */
.ai-sidebar {height: 100vh; background: #fafafa; border-right: 1px solid #e2e2e2; position: relative; z-index: 50; overflow: hidden; /* Smooth hardware-accelerated transition without blur repaint */ transition: width 0.25s cubic-bezier(0.2, 0, 0, 1), background-color 0.2s ease, border-color 0.2s ease; will-change: width; user-select: none; flex-shrink: 0;}
/* Collapsed State (Default on Home) */
.ai-sidebar.collapsed {width: 64px; background: #fafafa; border-right: 1px solid #e2e2e2;}
/* Expanded State (262px matching 对话.png) */
.ai-sidebar.expanded {width: 262px; background: #eff5ff; border-right: 0;}
/* In Chat Mode, the sidebar has cool slate-blue tint */
.in-chat-view .ai-sidebar {background: #eff5ff; border-right: 0;}
/* Collapsed Inner Content: fixed 64px, no wrapping reflow */
.sidebar-collapsed-content {position: absolute; top: 0; left: 0; width: 64px; height: 100%; padding: 10px 0 20px 0; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;}
.ai-sidebar.collapsed .sidebar-collapsed-content {opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto;}
.ai-sidebar.expanded .sidebar-collapsed-content {opacity: 0; visibility: hidden; transform: translateX(-12px); pointer-events: none;}
.collapsed-avatar {width: 46px; height: 46px; border-radius: 50%; overflow: hidden; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); transition: transform 0.15s ease; margin-bottom: 21px;}
.collapsed-avatar:hover {transform: scale(1.08);}
.collapsed-avatar img {width: 100%; height: 100%; object-fit: cover; display: block;}
.collapsed-nav {display: flex; flex-direction: column; align-items: center; gap: 13px; width: 100%;}
.collapsed-nav-btn {width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; border: none; transition: background 0.15s ease; position: relative;}
.collapsed-nav-btn:hover {background: #eaedf3;}
.collapsed-nav-btn.active {background: #e2eaf8;}
.collapsed-nav-btn img {width: 24px; height: 24px; display: block;}
/* Tooltip on collapsed buttons */
.collapsed-nav-btn::after {content: attr(data-tooltip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: #1e293b; color: #ffffff; padding: 4px 10px; border-radius: 6px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 100;}
.collapsed-nav-btn:hover::after {opacity: 1; transform: translateY(-50%) translateX(2px);}
/* Expanded Inner Content: fixed 262px, prevents text wrapping during transition */
.sidebar-expanded-content {position: absolute; top: 0; left: 0; width: 262px; height: 100%; padding: 15px 15px 20px 15px; display: flex; flex-direction: column; box-sizing: border-box; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;}
.ai-sidebar.collapsed .sidebar-expanded-content {opacity: 0; visibility: hidden; transform: translateX(-12px); pointer-events: none;}
.ai-sidebar.expanded .sidebar-expanded-content {opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto;}
.sidebar-header {display: flex; align-items: center; justify-content: space-between; margin-bottom: 21px; padding: 0;}
.header-user-avatar {width: 46px; height: 46px; border-radius: 50%; overflow: hidden; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); transition: transform 0.15s ease, box-shadow 0.15s ease; user-select: none;}
.header-user-avatar:hover {transform: scale(1.08); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.18);}
.header-user-avatar:active {transform: scale(0.96);}
.header-user-avatar img {width: 100%; height: 100%; object-fit: cover; display: block;}
.sidebar-actions {display: flex; align-items: center; gap: 8px;}
.icon-btn {background: transparent; border: none; cursor: pointer; padding: 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease;}
.icon-btn:hover {background: #d4e2f2;}
.icon-btn img {width: 24px; height: 24px; display: block;}
/* Search bar inside expanded sidebar */
.sidebar-search-wrap {margin-bottom: 14px; position: relative; display: none;}
.sidebar-search-wrap.active {display: block; animation: fadeInDown 0.15s ease-out;}
.sidebar-search-input {width: 100%; height: 34px; padding: 0 12px; background: #ffffff; border: 1px solid #c2d2e4; border-radius: 6px; font-size: 13px; color: #1e293b; outline: none; box-sizing: border-box;}
.sidebar-search-input:focus {border-color: #2563eb;}
/* History Section Title */
.history-section-title-wrap {display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 0;}
.history-heading {font-size: 16px; font-weight: 600; color: #334155;}
.btn-new-chat {display: none; align-items: center; gap: 5px; padding: 3.5px 10px; background: #ffffff; border: 1px solid #d0deec; border-radius: 6px; font-size: 12px; font-weight: 500; color: #334155; cursor: pointer; transition: all 0.15s ease; white-space: nowrap;}
.btn-new-chat i {font-size: 10.5px; color: #2563eb;}
.btn-new-chat:hover {background: #ffffff; border-color: #2563eb; color: #2563eb; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);}
.btn-new-chat:hover i {color: #2563eb;}
.btn-new-chat:active {transform: scale(0.96);}
/* History list */
.history-list {flex: 1; overflow-y: auto; overflow-x: hidden; list-style: none; margin: 0 0 14px 0; padding: 0;}
.history-list::-webkit-scrollbar {width: 4px;}
.history-list::-webkit-scrollbar-thumb {background: #b8cbe0; border-radius: 4px;}
.history-item {display: flex; align-items: center; justify-content: space-between; padding: 0; border-radius: 0; font-size: 14.5px; line-height: 24px; color: #202124; font-family: Arial, "Helvetica Neue", sans-serif; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; margin-bottom: 22px;}
.history-item:hover {background: #d8e5f5; color: #0f172a;}
.history-item.active {background: transparent; color: #202124; font-weight: 400;}
.history-item-title {font-family: "PingFang SC"; flex: 1; white-space: normal; overflow: visible; text-overflow: clip; margin-right: 6px;}
.history-item-actions {display: none; align-items: center;}
.history-item:hover .history-item-actions,.history-item.active .history-item-actions {display: flex;}
.history-del-btn {background: transparent; border: none; padding: 2px 4px; color: #7b92ad; cursor: pointer; font-size: 13px; border-radius: 4px; transition: color 0.12s ease;}
.history-del-btn:hover {color: #ef4444;}
.empty-history-tip {font-size: 13px; color: #7b92ad; text-align: center; padding: 30px 10px;}
/* Sidebar Bottom: Home Link */
.sidebar-bottom {border-top: 0; padding-top: 0;}
.sidebar-home-link {display: flex; align-items: center; gap: 10px; padding: 0; color: #55585f; text-decoration: none; font-size: 18px; line-height: 24px; font-weight: 400; border-radius: 6px; transition: all 0.15s ease; background: transparent; border: none; width: 100%; cursor: pointer; font-family: inherit; text-align: left;}
.sidebar-home-link:hover {background: #d8e5f5; color: #0f172a;}
.sidebar-home-link img {width: 24px; height: 24px; display: block;}
/* Mobile Backdrop & Top Bar */
.sidebar-backdrop {position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 1040; opacity: 0; pointer-events: none; transition: opacity 0.25s ease;}
.sidebar-backdrop.show {opacity: 1; pointer-events: auto;}
/* Mobile Top Navigation Bar (Active on <= 991px) */
.ai-mobile-top-bar {display: none; align-items: center; justify-content: space-between; height: 52px; padding: 0 12px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid #e2e8f0; position: absolute; top: 0; left: 0; right: 0; z-index: 35;}
.mobile-bar-btn {width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 8px; color: #475569; cursor: pointer; padding: 0; transition: all 0.15s ease;}
.mobile-bar-btn:active {background: #f1f5f9; color: #2563eb;}
.mobile-bar-title {font-size: 16px; font-weight: 600; color: #1e293b; text-align: center; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px;}
.mobile-bar-actions {display: flex; align-items: center; gap: 6px;}
/* ==========================================================================
   4. Main Content Layout
   ========================================================================== */
.ai-main-container {flex: 1; height: 100vh; height: 100dvh; position: relative; display: flex; flex-direction: column; overflow: hidden; min-width: 0;}
.view-panel {width: 100%; height: 100%; display: none;}
.view-panel.active {display: flex;}
/* ==========================================================================
   5. Landing / Welcome View (Matching AI虚拟问答.png)
   ========================================================================== */
.welcome-view {flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; position: relative; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; background-color: #f7faff; background-image: url('../../images/ai/assets/bg@2x.png'); background-repeat: no-repeat; background-position: center center; background-size: cover; box-sizing: border-box;}
.welcome-view::before,.welcome-view::after {display: none;}
/* Side-by-side Brand Header matching AI虚拟问答.png */
.hero-brand-header {display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 61px; max-width: 700px; width: 100%; position: relative; left: -33px; top: -24px;}
.hero-avatar-wrap {width: 98px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; /* avatar1@2x.png already contains the soft concentric circular rings and satellite dots */ background: transparent; box-shadow: none; animation: gentleFloat 5s ease-in-out infinite;}
.hero-avatar-img {width: 100%; height: 100%; object-fit: contain; display: block;}
.hero-text-wrap {display: flex; flex-direction: column; align-items: flex-start; position: relative; top: 0; left: 2px;}
.hero-title {font-size: 59.5px; font-weight: 700; letter-spacing: 0; line-height: 62px; font-family: Arial, "Helvetica Neue", sans-serif; margin: 0; /* Exact bright gradient sampled from AI虚拟问答.png */ background: linear-gradient(90deg, #30d2d3 0%, #2581f5 32%, #295cfb 55%, #6353f8 78%, #9850f6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.hero-subtitle {font-size: 20px; line-height: 24px; color: #666666; margin-top: 8px; font-weight: 600; letter-spacing: 0;}
.hero-subtitle .highlight {color: #1e40af; font-weight: 700;}
/* Floating Input Box with Exact Gradient Border matching mockup */
.hero-input-box {width: 100%; max-width: 700px; border-radius: 12px; padding: 2px; background: linear-gradient(90deg, #22d3ee 0%, #3b82f6 45%, #a855f7 100%); box-shadow: 0 6px 28px rgba(59, 130, 246, 0.16), 0 0 1px rgba(34, 211, 238, 0.5); margin-bottom: 40px; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; left: -32px; top: -24px;}
.hero-input-box:focus-within {transform: translateY(-1px); box-shadow: 0 10px 36px rgba(59, 130, 246, 0.22), 0 0 2px rgba(34, 211, 238, 0.7);}
.hero-input-inner {background: #ffffff; border-radius: 10px; display: flex; align-items: center; padding: 4px 16px 4px 22px; height: 64px;}
.hero-input {flex: 1; border: none; outline: none; font-size: 20px; color: #1e293b; background: transparent; font-family: inherit; padding: 0;}
.hero-input::placeholder {color: #94a3b8;}
.hero-send-btn {background: none; border: none; cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: transform 0.15s ease;}
.hero-send-btn:hover {transform: scale(1.12);}
.hero-send-btn img {width: 36px; height: 36px; display: block;}
/* Suggested Question Chips (Hero): 圆润、柔和半透明浅色卡片，精确贴合原型图与设计稿 */
.hero-suggestions-wrap {display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; max-width: 830px; width: 100%; position: relative; left: -32px; top: -24px;}
.hero-suggestion-chip {font-family: "PingFang SC"; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 8px; padding: 0 12px; font-size: 15px; line-height: 20px; color: #5b5b5b; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 14px rgba(70, 95, 150, 0.04); text-align: center; display: flex; align-items: center; justify-content: center; user-select: none; min-height: 40px; box-sizing: border-box;}
.hero-suggestion-chip:hover {background: rgba(255, 255, 255, 0.95); color: #1d4ed8; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(37, 99, 235, 0.1); border-color: rgba(147, 197, 253, 0.6);}
.hero-suggestion-chip:active {transform: translateY(0); background: rgba(240, 246, 255, 0.95);}
/* ==========================================================================
   6. Chat View Layout (Matching 对话.png with Clean White Background)
   ========================================================================== */
.chat-view {flex-direction: column; position: relative; overflow: hidden; background-color: #ffffff;}
.chat-scroll-area {flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 70px 0 145px 0; scroll-behavior: smooth; background-color: #ffffff;}
.chat-scroll-area::-webkit-scrollbar {width: 6px;}
.chat-scroll-area::-webkit-scrollbar-thumb {background: rgba(203, 213, 225, 0.6); border-radius: 4px;}
.chat-inner-column {font-family: "PingFang SC"; max-width: 700px; width: 100%; margin: 0 auto; padding: 0; display: flex; flex-direction: column; gap: 28px; position: relative; left: -31px;}
/* User Message: Right aligned lavender-blue pill matching 对话.png */
.chat-msg-row.user {display: flex; justify-content: flex-end; width: 100%; animation: fadeInUp 0.25s ease-out;}
.user-bubble {background: #edf3fc; color: #1f2228; padding: 9px 16px; border-radius: 8px; font-size: 19.2px; line-height: 26px; max-width: 80%; word-break: break-word; font-family: inherit;}
/* Assistant Message: Clean transparent text directly on white */
.chat-msg-row.assistant {display: flex; flex-direction: column; width: 100%; animation: fadeInUp 0.25s ease-out;}
.assistant-body {font-size: 18px; line-height: 29px; color: #202124; word-break: break-word; font-family: inherit;}
.assistant-body p {margin: 0 0 20px 0;}
.assistant-body p:last-child {margin-bottom: 0;}
.assistant-body ul, .assistant-body ol {margin: 8px 0 14px 22px; padding: 0;}
.assistant-body li {margin-bottom: 6px;}
.assistant-body code {background: rgba(0, 0, 0, 0.05); padding: 2px 6px; border-radius: 4px; font-family: Consolas, Monaco, monospace; font-size: 13.5px;}
.assistant-body pre {background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 16px; overflow-x: auto; margin: 12px 0; font-family: Consolas, Monaco, monospace;}
.assistant-body pre code {background: none; padding: 0;}
.assistant-body strong, .assistant-body b {font-weight: 600; color: #0f172a;}
.assistant-body blockquote {border-left: 3px solid #3b82f6; margin: 12px 0; padding: 6px 0 6px 14px; color: #64748b; background: rgba(59, 130, 246, 0.04); border-radius: 0 6px 6px 0;}
/* Inline references: 精致高质感微型上标药丸（小巧、优雅、不影响正文阅读） */
.citation-marker {display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; margin: 0 2px; padding: 0 4px; border: 1px solid rgba(59, 130, 246, 0.22); border-radius: 9px; background: rgba(59, 130, 246, 0.08); color: #2563eb; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 10px; font-weight: 600; line-height: 1; text-align: center; vertical-align: baseline; position: relative; top: -0.55em; cursor: pointer; user-select: none; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.05); transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);}
.citation-marker:hover,.citation-marker:focus-visible {color: #ffffff; background: #2563eb; border-color: #2563eb; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25); outline: none; transform: translateY(-1px);}
.citation-marker:active {transform: translateY(0);}
/* Reference Callout: 弱化呈现的提示栏，小一号字体，提示感风格，避免喧宾夺主 */
.answer-sources {width: 100%; margin-top: 10px; margin-bottom: 4px; padding: 7px 12px 9px 12px; border-radius: 8px; background: #f8fafc; border: 1px solid #edf2f7; box-sizing: border-box;}
.answer-sources-header {display: flex; align-items: center; min-height: 18px; margin-bottom: 6px; color: #64748b; font-size: 12px; /* 小一号字体，提示作用 */ line-height: 1.4; user-select: none;}
.answer-sources-icon {display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-right: 6px; color: #3b82f6; flex: 0 0 15px;}
.answer-sources-title {font-size: 12px; /* 小一号字体，提示作用 */ line-height: 1.2; font-weight: 500; color: #64748b; letter-spacing: 0.01em;}
.answer-sources-count {display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; margin-left: 5px; padding: 0 4px; border-radius: 8px; background: #e2e8f0; color: #475569; font-size: 10px; font-weight: 600; line-height: 1;}
.answer-sources-list {display: flex; flex-wrap: wrap; align-items: center; gap: 6px;}
/* 提示药丸：轻量小巧、单行省略、带有编号与名称，不是大卡片 */
.answer-source-card,.answer-source-pill {position: relative; display: inline-flex; align-items: center; max-width: 100%; min-height: 24px; padding: 2px 8px 2px 5px; border: 1px solid #e2e8f0; border-radius: 6px; background: #ffffff; color: #475569; text-decoration: none; font-size: 11.5px; /* 小一号字体 */ line-height: 1.35; box-sizing: border-box; transition: all 0.18s ease; cursor: pointer;}
.answer-source-card:hover,.answer-source-pill:hover {border-color: #93c5fd; background: #f0f7ff; color: #1d4ed8; box-shadow: 0 1px 4px rgba(37, 99, 235, 0.08); transform: translateY(-1px);}
.answer-source-card.is-highlighted,.answer-source-pill.is-highlighted {border-color: #3b82f6 !important; background: #eff6ff !important; color: #1d4ed8 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22) !important; animation: tipPulse 0.5s ease-out;}
.answer-source-number {display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin: 0 5px 0 0; border-radius: 4px; background: rgba(37, 99, 235, 0.08); color: #2563eb; flex: 0 0 15px; font-size: 9.5px; line-height: 1; font-weight: 700;}
.answer-source-name {color: #475569; font-size: 11.5px; /* 小一号字体，清晰提示 */ line-height: 1.3; font-weight: 500; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.answer-source-arrow {display: inline-block; margin-left: 4px; color: #94a3b8; font-size: 10px; line-height: 1; flex: 0 0 auto; transition: color 0.18s ease, transform 0.18s ease;}
.answer-source-card:hover .answer-source-arrow,.answer-source-pill:hover .answer-source-arrow {color: #2563eb; transform: translate(1px, -1px);}
@keyframes tipPulse {
  0% {transform: scale(0.97);}
  50% {transform: scale(1.03);}
  100% {transform: scale(1);}
}
/* Typing cursor animation */
.typing-cursor {display: inline-block; width: 2px; height: 16px; background: #2563eb; margin-left: 3px; vertical-align: middle; animation: blinkCursor 0.8s infinite;}
@keyframes blinkCursor {
  0%, 100% {opacity: 1;}
  50% {opacity: 0;}
}
/* Assistant Thinking Animation & Waiting Indicator */
.assistant-thinking {display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 20px; color: #64748b; font-size: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);}
.assistant-thinking .thinking-icon {display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #2563eb; animation: thinkingSpin 2s linear infinite;}
.assistant-thinking .thinking-text {font-weight: 500; color: #475569;}
.thinking-dots {display: inline-flex; align-items: center; gap: 4px;}
.thinking-dots span {width: 5px; height: 5px; background: #2563eb; border-radius: 50%; display: inline-block; animation: thinkingBounce 1.4s infinite ease-in-out both;}
.thinking-dots span:nth-child(1) {animation-delay: -0.32s;}
.thinking-dots span:nth-child(2) {animation-delay: -0.16s;}
.thinking-dots span:nth-child(3) {animation-delay: 0s;}
@keyframes thinkingBounce {
  0%, 80%, 100% {transform: scale(0.6); opacity: 0.35;}
  40% {transform: scale(1.2); opacity: 1;}
}
@keyframes thinkingSpin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
/* Assistant Message Action Toolbar */
.msg-action-toolbar {display: flex; align-items: center; gap: 14px; margin-top: 12px;}
.action-icon-btn {background: transparent; border: none; cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s ease; position: relative;}
.action-icon-btn:hover {background: rgba(0, 0, 0, 0.04); transform: scale(1.08);}
.action-icon-btn img {width: 16px; height: 16px; display: block;}
.action-icon-btn.active {background: rgba(37, 99, 235, 0.08);}
/* Follow-up question pills under bot message matching mockup */
.followup-questions-wrap {display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 27px;}
.followup-pill {background: #f3f6fc; color: #5b5b5b; font-size: 15px; line-height: 20px; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: all 0.15s ease; border: 1px solid transparent;}
.followup-pill:hover {background: #e2e8f0; color: #1e40af; transform: translateX(2px);}
/* 3D Standing Mascot Character in Bottom Right matching 对话.png */
.ai-mascot-figure {position: fixed; right: 16px; bottom: 40px; width: 100px; height: auto; z-index: 10; pointer-events: none; animation: characterFloat 5s ease-in-out infinite;}
@keyframes characterFloat {
  0%, 100% {transform: translateY(0);}
  50% {transform: translateY(-8px);}
}
@keyframes gentleFloat {
  0%, 100% {transform: translateY(0);}
  50% {transform: translateY(-6px);}
}
@keyframes fadeInUp {
  from {opacity: 0; transform: translateY(8px);}
  to {opacity: 1; transform: translateY(0);}
}
@keyframes fadeInDown {
  from {opacity: 0; transform: translateY(-6px);}
  to {opacity: 1; transform: translateY(0);}
}
/* Bottom Floating Input Bar */
.chat-bottom-input-bar {position: absolute; bottom: 0; left: 0; right: 0; padding: 4px 20px 5px 20px; display: flex; flex-direction: column; align-items: center; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 35%, #ffffff 100%); z-index: 25; pointer-events: none;}
.chat-input-box {max-width: 700px; width: 100%; border-radius: 12px; padding: 2px; background: linear-gradient(90deg, #22d3ee 0%, #3b82f6 45%, #a855f7 100%); box-shadow: 0 6px 28px rgba(59, 130, 246, 0.16), 0 0 1px rgba(34, 211, 238, 0.5); transition: transform 0.2s ease, box-shadow 0.2s ease; pointer-events: auto; position: relative; left: -31px;}
.chat-input-box:focus-within {transform: translateY(-1px); box-shadow: 0 10px 36px rgba(59, 130, 246, 0.22), 0 0 2px rgba(34, 211, 238, 0.7);}
.chat-input-inner {background: #ffffff; border-radius: 10px; display: flex; align-items: center; padding: 4px 16px 4px 22px; min-height: 64px;}
.chat-textarea {flex: 1; border: none; outline: none; resize: none; font-size: 20px; color: #1e293b; background: transparent; padding: 8px 0; font-family: inherit; line-height: 1.5; max-height: 120px; overflow-y: auto;}
.chat-textarea::placeholder {color: #94a3b8;}
.chat-actions-group {display: flex; align-items: center; gap: 8px; margin-left: 8px;}
.btn-stop-stream {display: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: #ef4444; border: none; cursor: pointer; color: #ffffff; font-size: 13px; transition: background 0.15s ease, transform 0.15s ease;}
.btn-stop-stream:hover {background: #dc2626; transform: scale(1.06);}
.btn-stop-stream.show {display: flex;}
.chat-send-btn {background: none; border: none; cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: transform 0.15s ease;}
.chat-send-btn:hover {transform: scale(1.12);}
.chat-send-btn img {width: 36px; height: 36px; display: block;}
.chat-disclaimer {font-size: 14px; line-height: 18px; color: #999999; margin-top: 17px; text-align: center; position: relative; left: -31px;}
/* ==========================================================================
   7. Toast Notification
   ========================================================================== */
.ai-toast-container {position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;}
.ai-toast {background: rgba(30, 41, 59, 0.92); color: #ffffff; padding: 9px 18px; border-radius: 20px; font-size: 13.5px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); animation: toastSlide 0.25s ease-out; pointer-events: auto;}
@keyframes toastSlide {
  from {opacity: 0; transform: translateY(-12px);}
  to {opacity: 1; transform: translateY(0);}
}
/* ==========================================================================
   7.1 Custom Confirmation Modal Dialog
   ========================================================================== */
.ai-modal-overlay {position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: 100vh !important; background: rgba(15, 23, 42, 0.45) !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; z-index: 999999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px; box-sizing: border-box; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease;}
.ai-modal-overlay.show {opacity: 1 !important; visibility: visible !important;}
.ai-modal-dialog {background: #ffffff !important; border-radius: 18px !important; box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.26), 0 8px 16px -6px rgba(0, 0, 0, 0.1) !important; width: 100% !important; max-width: 440px !important; margin: auto !important; position: relative !important; top: auto !important; left: auto !important; padding: 24px 26px 20px 26px; box-sizing: border-box; transform: scale(0.94) translateY(6px); transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);}
.ai-modal-overlay.show .ai-modal-dialog {transform: scale(1) translateY(0) !important;}
.ai-modal-header {display: flex; align-items: center; gap: 10px; margin-bottom: 12px;}
.ai-modal-icon-wrap {display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.ai-modal-icon {width: 22px; height: 22px; stroke: #18181b;}
.ai-modal-title {font-size: 18px; font-weight: 700; color: #18181b; line-height: 1.3;}
.ai-modal-body {font-size: 14px; color: #64748b; line-height: 1.65; padding-left: 32px; margin-bottom: 22px;}
.ai-modal-footer {display: flex; justify-content: flex-end; align-items: center; gap: 12px;}
.ai-modal-btn {font-size: 14px; font-weight: 500; border-radius: 8px; padding: 7px 18px; cursor: pointer; transition: all 0.15s ease; outline: none; font-family: inherit;}
.ai-modal-btn-cancel {background: #ffffff; border: 1px solid #e2e8f0; color: #1e293b;}
.ai-modal-btn-cancel:hover {background: #f8fafc; border-color: #cbd5e1; color: #0f172a;}
.ai-modal-btn-confirm {background: #1e293b; border: 1px solid #1e293b; color: #ffffff;}
.ai-modal-btn-confirm:hover {background: #09090b; border-color: #09090b;}
.ai-modal-btn:active {transform: scale(0.97);}
/* ==========================================================================
   8. Comprehensive Responsive Adaptations (Mobile / Tablet / Desktop)
   ========================================================================== */
/* 1. Large Screens & Laptops (Hide mascot only when it would collide with the input) */
@media (max-width: 1100px) {
  .ai-mascot-figure {display: none !important;}
}
/* 2. Tablets and Medium Devices (<= 991px) */
@media (max-width: 991px) {
  /* Show Mobile Header */
  .ai-mobile-top-bar {display: flex; padding-right: 96px;}
  /* Reposition language toggle inside top bar on the right */
  .lang-selector-wrap {top: 8px; right: 12px; z-index: 40;}
  .lang-toggle-btn {padding: 5px 10px; font-size: 13px; background: rgba(255, 255, 255, 0.9); border: 1px solid #e2e8f0;}
  /* Off-canvas smooth hardware-accelerated drawer sidebar */
  .ai-sidebar {position: fixed !important; top: 0; bottom: 0; left: 0; height: 100% !important; height: 100dvh !important; width: 280px !important; max-width: 84vw !important; z-index: 1050 !important; background: #eef4fb !important; border-right: 1px solid #d0deec; box-shadow: none; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; will-change: transform;}
  .ai-sidebar.expanded {transform: translateX(0) !important; box-shadow: 6px 0 32px rgba(15, 23, 42, 0.22) !important;}
  .ai-sidebar.collapsed {transform: translateX(-100%) !important; width: 280px !important;}
  .sidebar-collapsed-content {display: none !important;}
  .sidebar-expanded-content {display: flex !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; width: 100% !important;}
  .sidebar-backdrop {z-index: 1040;}
  /* Welcome View on Tablet */
  .welcome-view {justify-content: flex-start; padding: 72px 20px 40px 20px;}
  .hero-brand-header {margin-bottom: 24px; left: 0; top: 0;}
  .hero-input-box,.hero-suggestions-wrap {left: 0; top: 0;}
  /* Chat View on Tablets */
  .chat-scroll-area {padding: 68px 0 135px 0;}
  .chat-inner-column {padding: 0 18px; gap: 22px; left: 0;}
  .chat-input-box {width: 100%; max-width: 100%; left: 0;}
  .chat-disclaimer {left: 0;}
}
/* 3. Mobile Phones (<= 768px) and Short Height Devices */
@media (max-width: 768px) {
  /* Welcome View Stack on Mobile */
  .welcome-view {justify-content: flex-start; padding: 68px 16px 36px 16px;}
  .hero-brand-header {flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 20px;}
  .hero-avatar-wrap {width: 64px; height: 63px;}
  .hero-text-wrap {align-items: center; top: 0; left: 0;}
  .hero-title {font-size: clamp(26px, 7vw, 36px); text-align: center; letter-spacing: 0.5px; line-height: 1.05;}
  .hero-subtitle {font-size: 14px; margin-top: 4px; text-align: center;}
  .hero-input-box {width: 100%; margin-bottom: 18px;}
  .hero-input-inner {padding: 4px 10px 4px 16px; height: 48px; min-height: 48px;}
  .hero-input {font-size: 14.5px;}
  .hero-suggestions-wrap {flex-direction: column; width: 100%; gap: 8px;}
  .hero-suggestion-chip {font-size: 13.5px; padding: 11px 15px; text-align: left; width: 100%; border-radius: 12px;}
  /* Chat View on Mobile */
  .chat-scroll-area {padding: 64px 0 125px 0;}
  .chat-inner-column {width: 100%; padding: 0 12px; gap: 16px;}
  .user-bubble {font-size: 14px; max-width: 88%; padding: 10px 14px; border-radius: 14px;}
  .assistant-body {font-size: 14px; line-height: 1.7;}
  .assistant-body pre {padding: 10px 12px; font-size: 12.5px; margin: 10px 0;}
  .answer-sources {margin-top: 10px; padding: 6px 10px 8px 10px;}
  .answer-sources-list {display: flex; flex-wrap: wrap; gap: 5px;}
  .answer-source-card,.answer-source-pill {max-width: 100%; min-height: 24px; padding: 2px 7px 2px 4px;}
  .answer-source-name {max-width: 170px;}
  .followup-questions-wrap {width: 100%; gap: 6px;}
  .followup-pill {font-size: 13px; padding: 9px 12px; width: 100%; box-sizing: border-box;}
  /* Bottom Input Bar for Mobile & Safe Area */
  .chat-bottom-input-bar {padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px)) 10px;}
  .chat-input-box {width: 100%; border-radius: 14px;}
  .chat-input-inner {padding: 3px 8px 3px 12px; min-height: 46px;}
  .chat-textarea {font-size: 14.5px; padding: 6px 0;}
  .send-icon-img {width: 24px; height: 24px;}
  .chat-disclaimer {font-size: 11px; margin-top: 3px;}
  /* Modal on Mobile */
  .ai-modal-dialog {padding: 20px 20px 18px 20px; border-radius: 16px; max-width: 90vw;}
  .ai-modal-title {font-size: 17px;}
  .ai-modal-body {padding-left: 0; margin-top: 6px; margin-bottom: 20px; font-size: 13.5px;}
  .ai-modal-btn {padding: 8px 18px;}
}
/* 4. Short Viewports / Mobile Keyboard Opened */
@media (max-height: 720px) {
  .welcome-view {justify-content: flex-start; padding-top: 64px;}
  .hero-brand-header {margin-bottom: 16px;}
}