html, body {
    height: 100%;
    margin: 0;
}
html {
	overflow: hidden;
}
body {
	overflow: auto;
    display: flex;
    flex-direction: column;
    background: white;
}
.header {
    flex-shrink: 0;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    z-index: 20;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.main-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 80px; /* 调整以适应导航实际高度 */
}
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-around;
    padding: 0.5rem 0;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 50;
}
.card-shadow {
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border-radius: 1rem;
    background: white;
    padding: 1rem;
    margin-bottom: 1rem;
}
.btn-main {
    background: #f8b4c4; color: white; border-radius: 0.5rem; padding: 0.7rem 1rem; border: none; width: 100%; font-weight: 500;
    touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.btn-main:active { opacity: 0.8; }
.btn-gray {
    background: #f3f4f6; color: #374151; border-radius: 0.5rem; padding: 0.7rem 1rem; border: none; font-weight: 500;
    touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.btn-gray:active { opacity: 0.8; }
.input-field {
    border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0.7rem; width: 100%; font-size: 1rem; outline: none; background: white;
}
.input-field:focus { border-color: #f8b4c4; }
.nav-item {
    display: flex; flex-direction: column; align-items: center; font-size: 0.7rem; color: #94a3b8; padding: 0.25rem 0.5rem;
    cursor: pointer;
}
.nav-item.active { color: #f8b4c4; font-weight: 600; }
.nav-item i { font-size: 1.4rem; margin-bottom: 0.15rem; }
.sub-tabs { display: flex; overflow-x: auto; gap: 0.5rem; margin-bottom: 1rem; padding: 0.25rem 0; border-bottom: 1px solid #e2e8f0; }
.sub-tab { padding: 0.5rem 1rem; white-space: nowrap; font-size: 0.9rem; color: #64748b; cursor: pointer; border-radius: 0.5rem 0.5rem 0 0; }
.sub-tab.active { color: #f8b4c4; font-weight: 600; border-bottom: 2px solid #f8b4c4; }
.period-badge { background: #ede9fe; color: #7e22ce; padding: 0.15rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; white-space: nowrap; }
.time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 400px) {
    .main-scroll {
        padding-bottom: 70px;
    }
}
.list-item {
    display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important;
    background: #f8fafc; padding: 0.6rem 0.8rem; border-radius: 0.5rem; margin-bottom: 0.4rem; font-size: 0.9rem;
    gap: 0.5rem; list-style: none; min-width: 0; overflow: hidden;
}
.record-main { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.record-actions { flex-shrink: 0; display: flex !important; align-items: center; gap: 0.25rem; }
.interval-badge {
    background: #fce4ec; color: #c2185b; padding: 0.15rem 0.5rem; border-radius: 1rem; font-size: 0.75rem; white-space: nowrap;
    margin: 0 8px;
}
.ai-float-btn {
    position: fixed; z-index: 40; bottom: 80px; right: 16px; width: 56px; height: 56px; background: #f8b4c4;
    border-radius: 50%; box-shadow: 0 4px 15px rgba(248,180,196,0.4); display: flex; align-items: center; justify-content: center;
    color: white; font-size: 24px; cursor: pointer; transition: transform 0.2s;
}
.ai-float-btn:active { transform: scale(0.9); }
.ai-message { max-width: 85%; padding: 0.6rem 1rem; border-radius: 1rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.ai-message.user { background: #f8b4c4; color: white; align-self: flex-end; border-bottom-right-radius: 0.25rem; margin-left: auto; }
.ai-message.assistant { background: #f1f5f9; color: #1e293b; align-self: flex-start; border-bottom-left-radius: 0.25rem; }
.ai-message.system { background: #fee2e2; color: #991b1b; align-self: center; font-size: 0.8rem; }
.feed-list-item { justify-content: flex-start; }
.feed-list-item .record-main { flex: 1; }
.feed-list-item .interval-badge { flex: 0 0 auto; }
.feed-list-item .record-actions { flex: 0 0 auto; }
#aiLogContent .log-entry { background: #f8fafc; border-radius: 0.5rem; padding: 0.5rem; margin-bottom: 0.5rem; }
.log-entry .label { font-weight: 600; color: #475569; }
.log-entry .content { white-space: pre-wrap; word-break: break-all; margin-top: 0.25rem; }
.log-entry.success { border-left: 3px solid #4ade80; }
.log-entry.error { border-left: 3px solid #f87171; }
/* 维生素卡片 */
.vitamin-card {
    background: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
    border-left: 4px solid #c084fc;
    margin-bottom: 1rem;
}

/* 疫苗本 */
.vaccine-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    padding: 0.6rem 0.8rem;
    border-radius: 0.5rem;
    margin-bottom: 0.4rem;
    gap: 0.5rem;
}
.vaccine-info {
    flex: 1;
    min-width: 0;
}
.vaccine-name {
    font-weight: 500;
    font-size: 0.9rem;
}
.vaccine-meta {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.15rem;
}
.vaccine-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    accent-color: #4ade80;
    cursor: pointer;
}