:root{
	--bg:#000; /* enforce black */
	--panel:#0f162d;
	--card:#111a34;
	--muted:#8a98b3;
	--text:#e7ecf6;
	--primary:#6a8cff;
	--primary2:#7f6aff;
	--border:rgba(255,255,255,0.08);
	--accent:linear-gradient(135deg,var(--primary),var(--primary2));
	--beige:#e8d8b9;
	--title-blue:#a6c3ff;
	/* chat layout vars */
	--sidebar-width:260px;
	--chat-max-width:900px; /* 统一聊天区最大宽度 */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans","PingFang SC","Microsoft YaHei",sans-serif;
	background:#000;
	color:var(--text);
}
.app-shell{min-height:100%;display:flex;flex-direction:column}
.app-header{
	display:flex;align-items:center;justify-content:space-between;
	padding:14px 18px;border-bottom:1px solid var(--border);
	background:rgba(8,12,24,0.6);backdrop-filter:saturate(120%) blur(8px);
	position:sticky;top:0;z-index:1000
}
.brand{font-weight:700;letter-spacing:.5px}
.tabs{display:flex;gap:8px}
.tab{appearance:none;border:none;border-radius:10px;padding:8px 12px;cursor:pointer;color:var(--muted);background:transparent}
.tab.active{background:rgba(255,255,255,0.06);color:var(--text)}
.app-main{width:100%;max-width:none;margin:0;padding:0 20px;flex:1;display:flex;flex-direction:column;min-height:calc(100vh - 56px)}
.tab-panel{display:none}
.tab-panel.active{display:block}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px}
.prose{line-height:1.7;white-space:pre-wrap}
/* Normalize assistant rendered HTML blocks */
.msg.assistant .bubble,.msg.assistant .bubble *{font-size:14px;line-height:1.7}
.msg.assistant .bubble pre,.msg.assistant .bubble pre.prose{font-size:14px;line-height:1.7;margin:0;white-space:pre-wrap;background:transparent;border:none;padding:0}
.msg.assistant .bubble code{font-size:14px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;color:var(--muted);font-size:.9rem}
input,select,button{font:inherit}
input,select{background:#0b132b;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px}
.actions{display:flex;gap:10px;margin-top:6px}

/* 吉祥物完整卡片样式（图文结合，健康诊断结果在聊天页面展示） */
.auspicious-grid{
	display:flex;
	flex-direction:column;
	gap:1.2rem;
	margin-top:1rem;
}
.auspicious-card-full{
	background:var(--card);
	border-radius:12px;
	box-shadow:0 2px 8px rgba(0,0,0,0.2);
	border:1px solid var(--border);
	transition:all 0.3s;
	display:flex;
	overflow:hidden;
}
.auspicious-card-full:hover{
	transform:translateY(-3px);
	box-shadow:0 6px 16px rgba(106,140,255,0.3);
	border-color:var(--primary);
}
.auspicious-image-container{
	position:relative;
	flex-shrink:0;
	width:240px;
	background:var(--panel);
}
.auspicious-image-full{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.auspicious-number{
	position:absolute;
	top:12px;
	left:12px;
	background:rgba(106,140,255,0.9);
	color:#fff;
	width:36px;
	height:36px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:700;
	font-size:1.1rem;
	box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.auspicious-detail{
	flex:1;
	padding:1.5rem;
	display:flex;
	flex-direction:column;
	gap:0.75rem;
}
.auspicious-header{
	display:flex;
	align-items:center;
	gap:0.75rem;
	margin-bottom:0.5rem;
}
.auspicious-name-full{
	font-size:1.2rem;
	font-weight:700;
	color:var(--text);
}
.auspicious-id-badge{
	display:inline-block;
	background:var(--primary);
	color:#fff;
	padding:0.3rem 0.7rem;
	border-radius:8px;
	font-size:0.75rem;
	font-weight:600;
}
.auspicious-field{
	font-size:0.9rem;
	color:var(--muted);
	line-height:1.6;
}
.auspicious-field i{
	color:var(--primary);
	margin-right:0.5rem;
	width:16px;
}
.auspicious-field strong{
	color:var(--text);
}
@media (max-width: 768px) {
	.auspicious-card-full{
		flex-direction:column;
	}
	.auspicious-image-container{
		width:100%;
		height:200px;
	}
}
button{background:var(--accent);border:none;color:#fff;border-radius:12px;padding:10px 14px;cursor:pointer}
button.secondary{background:transparent;border:1px solid var(--border);color:var(--muted)}

/* Chat */
.msg{display:flex;gap:10px;margin:8px 0}
.msg .bubble{max-width:80%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);line-height:1.6}
.msg.assistant .bubble{background:#000}
.msg.user{justify-content:flex-end}
.msg.user .bubble{background:rgba(255,255,255,0.06)}
.thinking{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.thinking .dot{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1s infinite ease-in-out alternate}
.thinking .dot:nth-child(2){animation-delay:.2s}
.thinking .dot:nth-child(3){animation-delay:.4s}
@keyframes blink{from{opacity:.3}to{opacity:1}}
.composer.disabled{opacity:.6;pointer-events:none}
.code{background:#0a132c;border:1px solid var(--border);border-radius:10px;padding:10px;overflow:auto}
.chat-input{display:flex;gap:10px;margin-top:10px}
.chat-input input{flex:1}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{border:1px solid var(--border);border-radius:999px;padding:6px 10px;background:rgba(255,255,255,0.04);cursor:pointer}
.chip:hover{background:rgba(255,255,255,0.08)}
.selected .chip{background:rgba(127,106,255,0.15);border-color:#7f6aff}
.hint{color:var(--muted);font-size:.9rem}

.app-footer{color:var(--muted);text-align:center;padding:18px;border-top:1px solid var(--border)}

@media (max-width:720px){
	.form-grid{grid-template-columns:1fr}
	.msg .bubble{max-width:92%}
}

/* Gemini-like composer */
.composer{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:14px;padding:8px}
.composer .icon-btn{background:transparent;border:none;color:var(--muted);cursor:pointer;border-radius:10px;padding:8px}
.composer .icon-btn:hover{background:rgba(255,255,255,0.06)}
.composer textarea{flex:1;resize:none;min-height:38px;max-height:160px;background:transparent;border:none;outline:none;color:var(--text);padding:6px}
.send-btn{background:var(--accent);border:none;color:#fff;border-radius:10px;padding:10px 12px;cursor:pointer}

/* Avatars and timestamps (optional hooks) */
.msg .avatar{width:28px;height:28px;border-radius:50%;background:#1a2444}
.msg .meta{color:var(--muted);font-size:.8rem;margin-top:4px}

/* Searchable select */
.select{position:relative}
.select-input{width:100%;background:#0b132b;border:1px solid var(--border);border-radius:10px;padding:10px;color:var(--text)}
.select-menu{position:absolute;top:100%;left:0;right:0;background:var(--panel);border:1px solid var(--border);border-radius:12px;margin-top:6px;max-height:240px;overflow:auto;z-index:20;display:none}
.select-menu.open{display:block}
.option{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,0.04);cursor:pointer}
.option:hover{background:rgba(255,255,255,0.06)}
.option.disabled{opacity:.5;cursor:not-allowed}

.container{width:100%;max-width:860px;margin:0 auto;flex:1;display:flex;flex-direction:column;gap:18px}
.chat-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.center-panel{display:flex;flex-direction:column;gap:14px;align-items:center;min-height:calc(100vh - 140px);justify-content:center}
.center-panel .card{width:100%;max-width:860px;margin:0 auto}
.center-panel #index-result,.center-panel #health-result{width:100%;max-width:860px;margin:0 auto}

/* Chat layout sticky sidebar and single scroll pane */
.chat-layout{display:grid;grid-template-columns:260px 1fr;height:calc(100vh - 64px)}
.sidebar{background:#0f1424;border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:64px;height:calc(100vh - 64px)}
.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:1px solid var(--border)}
.sidebar-list{flex:1;overflow:auto;padding:8px}
.sidebar{overflow:hidden}
.sidebar .sidebar-list{overflow:auto}
.chat-topbar{display:none}

/* Scoped fixes for chat page height */
body[data-page="chat"] .app-shell{min-height:100vh; overflow: hidden;}
body[data-page="chat"] .app-header{position:sticky;top:0;z-index:1000}

.welcome-banner{position:absolute;top:28%;left:0;right:0;text-align:center;color:#8ab4ff;pointer-events:none}
.welcome-title{font-size:28px;font-weight:700;margin-bottom:8px}
.welcome-sub{font-size:14px;color:#9aa7c7}

/* Tool pages */
.tool-hero{max-width:900px;margin:24px auto 12px auto;padding:16px 18px;border-radius:14px;background:#000;border:1px solid var(--border);text-align:center}
.tool-hero h1{margin:0 0 8px 0;font-size:26px;letter-spacing:.5px;color:var(--title-blue)}
.tool-hero p{margin:0;color:#ffffffd0}

.tool-footer{max-width:900px;margin:14px auto;padding:14px;background:#000;border:1px solid var(--border);border-radius:12px}
.tool-footer h3{margin:0 0 8px 0;color:var(--beige)}
.tool-footer ul{margin:0 0 4px 20px}
.tool-footer li{color:#fff}

/* Forms on tool pages */
.center-panel .card{background:#000;border:1px solid var(--border)}
.field label{font-weight:600;color:var(--beige)}
.prose{color:#fff}

/* Keep inputs readable on black */
input,select{background:#0b132b;color:#fff;border:1px solid var(--border)}

/* Center widths to match hero */
.container,.center-panel .card,#index-result,#health-result{max-width:900px;margin-left:auto;margin-right:auto}

/* Sidebar conversations - progressive disclosure */
.conv-list{padding:6px}
.conv-item{position:relative;display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #222;border-radius:8px;cursor:pointer;transition:background-color .15s}
.conv-item:hover{background:rgba(255,255,255,0.06)}
.conv-item .title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e7ecf6}
.conv-item .actions-btn{background:rgba(255,255,255,0.06);border:1px solid var(--border);color:#e7ecf6;border-radius:8px;padding:6px 10px;cursor:pointer}
.conv-item .actions-btn:hover{background:rgba(255,255,255,0.12)}
.conv-item .actions-btn:hover{background:rgba(255,255,255,0.06)}
.conv-item .actions-menu{display:none;position:absolute;left:calc(100% + 8px);top:0;background:#151c31;border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:20;width:160px;padding:6px 0}
.conv-item .actions-menu.show{display:block}
.conv-item .menu-item{display:flex;align-items:center;gap:8px;padding:8px 12px;color:#e7ecf6;text-decoration:none}
.conv-item .menu-item:hover{background:rgba(255,255,255,0.06)}
.conv-item .menu-item.danger:hover{background:#5a1f1f}

/* Floating actions menu refinements */
.actions-menu.floating{background:transparent;border:none;padding:0;width:220px;box-shadow:0 12px 28px rgba(0,0,0,.55)}
.actions-menu.floating .menu-group{background:#0f162d;border:1px solid var(--border);border-radius:12px;margin:6px 0;overflow:hidden}
.actions-menu.floating .menu-group.danger{background:#1a1016;border-color:rgba(255,80,80,.25)}
.actions-menu .menu-item{display:flex;align-items:center;gap:8px;padding:10px 14px;color:#e7ecf6;text-decoration:none}
.actions-menu .menu-item:hover{background:rgba(255,255,255,0.06)}
.actions-menu .menu-item.danger:hover{background:#5a1f1f}

/* Full width sidebar button */
.full-btn{width:100%;background:var(--accent);border:none;color:#fff;border-radius:12px;padding:10px 12px;cursor:pointer;font-weight:600}
.full-btn:hover{filter:brightness(1.05)}

/* User status (top right) */
#user-status{margin-left:auto;display:flex;align-items:center;gap:8px}
.user-chip{border:1px solid var(--border);background:rgba(255,255,255,0.06);color:#fff;border-radius:999px;padding:6px 10px}
.link-btn{background:transparent;border:1px solid var(--border);color:#8a98b3;border-radius:10px;padding:6px 10px;cursor:pointer}
.link-btn:hover{background:rgba(255,255,255,0.08)}

/* Light UI (scoped) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

body[data-ui="light"]{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#f8f9fa;color:#212529;}
body[data-ui="light"] .app-header{display:flex;align-items:center;padding:0 2rem;height:64px;background:#fff;border-bottom:1px solid #ced4da}
body[data-ui="light"] .brand{font-size:1.25rem;font-weight:700;margin-right:2rem}
body[data-ui="light"] .tabs{display:flex;gap:1.5rem;margin-right:auto}
body[data-ui="light"] .tab{color:#495057;text-decoration:none;font-weight:500;transition:color .2s}
body[data-ui="light"] .tab:hover{color:#007AFF}
body[data-ui="light"] .app-main{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;padding:2rem}
body[data-ui="light"] .center-panel{width:100%}
body[data-ui="light"] .card{background:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.08);padding:2.5rem;border:1px solid #e7eaf3}
body[data-ui="light"] .card h2{margin:0 0 2rem;text-align:center;font-size:1.75rem;font-weight:700}
body[data-ui="light"] .card h3{margin:2rem 0 1rem;font-size:1.2rem;border-bottom:1px solid #ced4da;padding-bottom:.5rem}
body[data-ui="light"] .card hr{border:none;border-top:1px solid #ced4da;margin:2rem 0}
body[data-ui="light"] .form-grid{display:grid;gap:1.5rem}
body[data-ui="light"] .field{display:flex;flex-direction:column}
body[data-ui="light"] .field label{font-weight:500;margin-bottom:.5rem;color:#495057}
body[data-ui="light"] input[type="text"],
body[data-ui="light"] input[type="password"],
body[data-ui="light"] input[type="date"],
body[data-ui="light"] input[type="time"],
body[data-ui="light"] select{width:100%;padding:.75rem 1rem;font-size:1rem;border:1px solid #ced4da;border-radius:8px;transition:border-color .2s,box-shadow .2s;background:#fff;color:#212529}
body[data-ui="light"] input[readonly]{background:#f8f9fa;cursor:not-allowed}
body[data-ui="light"] input:focus,body[data-ui="light"] select:focus{outline:none;border-color:#007AFF;box-shadow:0 0 0 3px rgba(0,122,255,.15)}
body[data-ui="light"] .actions{display:flex;gap:1rem;margin-top:2rem;align-items:center}
body[data-ui="light"] button{display:inline-block;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s}
body[data-ui="light"] button[type="submit"],
body[data-ui="light"] .primary{background:#007AFF;color:#fff}
body[data-ui="light"] button[type="submit"]:hover,
body[data-ui="light"] .primary:hover{background:#0056b3}
body[data-ui="light"] button.secondary{background:#f0f0f0;color:#212529;border:1px solid #ced4da}
body[data-ui="light"] button.secondary:hover{background:#e0e0e0}
body[data-ui="light"] .hint{font-size:.875rem;color:#6c757d;margin-top:.5rem}
body[data-ui="light"] #reg-msg,body[data-ui="light"] #pf-msg{margin-top:1.5rem;text-align:center;min-height:1.2em;color:#dc3545;font-weight:500}

/* Sidebar Popover */
.conversation-list{list-style:none;margin:0;padding:0}
.conversation-item{position:relative;display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.06);cursor:pointer}
.conversation-item .item-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e7ecf6}
.options-trigger{background:transparent;border:none;color:#c5c5d2;cursor:pointer;padding:6px;border-radius:6px}
.options-trigger:hover{background:rgba(255,255,255,0.08)}
.popover-menu{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;background:#151c31;border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.5);width:160px;padding:6px 0;z-index:20;opacity:0;visibility:hidden;transition:opacity .15s ease, visibility .15s ease, transform .15s ease}
.popover-menu.visible{opacity:1;visibility:visible}
.menu-options{list-style:none;margin:0;padding:0}
.menu-options button{background:transparent;border:none;color:#e7ecf6;width:100%;text-align:left;padding:8px 12px;border-radius:6px;cursor:pointer}
.menu-options button:hover{background:rgba(255,255,255,0.08)}
.menu-options .danger{color:#ff6b6b}

/* Floating action card (anchored beside trigger) */
.floating-card{position:absolute;left:0;top:0;background:#2b2d31;border:1px solid rgba(255,255,255,.08);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.45);width:160px;padding:6px;z-index:1210;display:none}
.floating-card .action{display:block;width:100%;text-align:left;padding:8px 10px;border:none;border-radius:8px;background:transparent;color:#e7ecf6;cursor:pointer}
.floating-card .action:hover{background:rgba(255,255,255,.08)}
.floating-card .danger{color:#ff6b6b}

/* Register page: center both axes */
body[data-page="register"] .app-main{justify-content:center;align-items:center;min-height:calc(100vh - 64px)}
body[data-page="register"] .center-panel{max-width:480px;width:100%}
/* Equal-width action buttons */
.actions.equal button{flex:1}


/* =============================================================== */
/* =========== 新增和覆盖的样式 (Gemini Layout) ============ */
/* =============================================================== */

/* 1. 设置主聊天区域为 Flex 布局 */
.chat-main {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: center;    /* 水平居中（消息和输入框） */
    height: calc(100vh - 64px); /* 占满除头部外的所有高度 */
    overflow: hidden;
}

/* 2. 移除旧的、复杂的宽度和边距计算规则 */
/* 使用 !important 确保覆盖之前的样式 */
.chat-messages,
.composer {
	width: 100% !important;
	max-width: var(--chat-max-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 3. 设置聊天消息区域的样式 */
.chat-messages {
    flex-grow: 1;         /* 占据所有可用的垂直空间 */
    overflow-y: auto;     /* 内容超出时显示垂直滚动条 */
    padding: 16px;
    border: none;         /* 移除边框，使其更干净 */
    background: var(--bg) !important; /* 确保背景是纯黑 */
    border-radius: 0;
}

/* 4. 输入框容器样式 */
.composer-container {
    width: 100%;
    padding: 0 20px 20px 20px; /* 底部和两侧留出空间 */
    display: flex;
    justify-content: center;
}

/* 5. 输入框的具体样式调整 */
.composer {
    margin-top: 0; /* 移除顶部外边距 */
}

/* 6. 隐藏原有的 footer，因为我们已经把它的内容移走了 */
.composer-bar {
    display: none;
}

/* 7. 确保消息气泡背景色一致 */
.msg.assistant .bubble {
    background: #000 !important;
}

/* 8. 响应式调整：在小屏幕上，让聊天区域占据更多宽度 */
@media (max-width: 1200px) {
    .chat-messages,
    .composer {
        max-width: calc(100% - 40px) !important;
    }
}
/* =============================================================== */
/* =================== 自定义滚动条样式 =================== */
/* =============================================================== */

/* 针对 Webkit 核心的浏览器 (Chrome, Safari, Edge) */
.chat-messages::-webkit-scrollbar {
    width: 8px; /* 设置滚动条的宽度 */
}

/* 滚动条轨道（背景） */
.chat-messages::-webkit-scrollbar-track {
    background: transparent; /* 使轨道背景透明 */
}

/* 滚动条滑块（可以拖动的那个部分） */
.chat-messages::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2); /* 设置一个半透明的浅灰色，非常柔和 */
    border-radius: 10px; /* 设置圆角，看起来更现代 */
    border: 2px solid transparent; /* 制造一个“内边距”效果，让滑块看起来更细 */
    background-clip: content-box;
}

/* 鼠标悬停在滑块上时的样式 */
.chat-messages::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.4); /* 悬停时颜色加深一点，提供反馈 */
}