/* 心动AI - 基础框架与布局 */

/* ===== ������ƣ���Ϊ�ǡ���Ϊ�ꡤ��Ϊ�飨ȫվ��һ��ʵԴ�� ===== */
:root {
  /* ��Ϊ�ǣ�����/AI�а�ť����ɫ���棨��ڴ�΢�ϵ��������ۣ� */
  --ink-900: #1A1A26;
  --ink-800: #2a2a2a;
  --ink-700: #444444;
  --bone: linear-gradient(135deg, #1A1A26, #252535);

  /* ��Ϊ�꣺Ʒ����ɫ/����̬/������ */
  --purple: #7B68EE;
  --purple-soft: #9370DB;
  --purple-deep: #534AB7;
  --soul: linear-gradient(135deg, #7B68EE, #D4537E);

  /* ��Ϊ�飺��е�׺/AI�����ǩ */
  --pink: #D4537E;
  --pink-pale: #ED93B1;

  /* dz���������ף������ʹ�ã� */
  --lavender: #FAF7FF;
  --lavender-border: #E8DFF9;

  /* ΢����Ӱ */
  --glow-purple: 0 6px 18px rgba(123,104,238,0.28);
  --glow-pink: 0 4px 14px rgba(212,83,126,0.22);
  --ring-purple: 0 0 0 3px rgba(123,104,238,0.18), 0 0 0 6px rgba(123,104,238,0.07);

  /* �ֺڣ�tab����/ѡ�бߣ���������߱����ϣ�����ײɫ�� */
  --ink-brown: #4a3b32;
  --ink-brown-soft: #635249;

  /* �Һڣ��û����ݣ�����ڸ��ᣬ�������ѹ�ָУ� */
  --ink-gray: #4f4f5c;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ҳ��������� - �����׵׷������ڶ��֣��������ף� */
html {
  width: 100%;
  height: 100%;
  /* ��1�㶵�ף�ǿ��dz�ϣ�!important ��ֹ������ */
  background: #f5f3ff !important;
  /* iOS PWA �ؼ���-webkit-fill-available �� html ���� PWA ���ÿռ� */
  min-height: -webkit-fill-available;
  min-height: 100vh;
  overscroll-behavior: none;
  overflow: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* ��2�㣺body ͬ��ǿ��dz�� */
  background: #f5f3ff !important;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  overflow-y: auto;
}

/* �ƶ��ˣ�body ��ȷ���� PWA �ӿڣ���ֹ�κι���й¶ */
@media (max-width: 420px) {
  body {
    overflow: hidden !important;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    height: -webkit-fill-available;
    min-height: unset;
    align-items: stretch;
    /* ǿ�� body �ڲ�������Ԫ�ز���� */
    contain: content;
  }
}

/* phoneFrame ���� */
.phone-frame {
  position: relative;
  display: block;
  width: min(90vw, 390px);
  min-height: 100vh;
  min-height: 100dvh;
  /* ��3�㣺phone-frame ����ɫƥ�����⣬���װ�ȫ���� */
  background-color: #f5f3ff;
  background-image: radial-gradient(rgba(123,104,238,0.045) 1px, transparent 1px);
  background-size: 20px 20px;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 4px 30px rgba(123,104,238,0.12);
  /* �ײ���ȫ������ margin-bottom ��ֹ���ݱ��������� padding������ dvh �ظ����㣩 */
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

/* С��Ļ�ֻ����������ȣ�ȥԲ�ǣ���ȷ�����ӿڸ߶� */
@media (max-width: 420px) {
  .phone-frame {
    width: 100vw;
    border-radius: 0;
    box-shadow: none;
    /* ��3����ǿ���ƶ����� -webkit-fill-available ��ȷ���� PWA ���ÿռ� */
    height: -webkit-fill-available;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    min-height: unset;
    margin-bottom: 0;
    /* �ײ���ȫ�����ڲ� padding ȷ�����ݲ��� Home Indicator �ڵ� */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    /* ��ȫ����ı���Ҳ������dz�� */
    background-color: #f5f3ff !important;
  }
}

/* ===== �?层：顶部标题�?+ 功能�?===== */
.top-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(123,104,238,0.06);
  padding-top: 0;
  padding-top: env(safe-area-inset-top, 0px);
}

/* 第一行：左菜�?+ 居中标题 + 右按�?*/
.top-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 10px 2px;
  position: relative;
}

/* 左上角汉堡菜�?*/
.top-hamburger-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: none;
  background: none;
  font-size: 22px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #555;
  transition: all 0.2s;
  flex-shrink: 0;
}
.top-hamburger-btn:hover, .top-hamburger-btn:active { background: #f5f0ff; }

/* 居中品牌标题 */
.top-brand-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.top-name { font-size: 16px; font-weight: 700; color: #333; }
.top-subtitle { font-size: 10px; color: #aaa; margin-top: -1px; }

/* 右侧操作�?*/
.top-right-actions {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}

/* 情感状态徽�?*/
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.status-badge.single { background: #F5F0FF; color: #7B68EE; }
.status-badge.dating { background: #FFF0F5; color: #D4537E; }
.status-badge.married { background: #E1F5EE; color: #1D9E75; }
.status-badge .badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.status-badge.single .badge-dot { background: #7B68EE; }
.status-badge.dating .badge-dot { background: #D4537E; }
.status-badge.married .badge-dot { background: #1D9E75; }

.top-logo {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--purple-soft));
  display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 15px; font-weight: 700;
}
.top-name { font-size: 17px; font-weight: 700; color: #333; }
.top-subtitle { font-size: 12px; color: #999; }
.top-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #f0edff;
  border: 1.5px solid #d4ccf0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer;
}

/* 功能�?*/
.function-island {
  display: flex;
  gap: 6px;
  padding: 1px 8px 5px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  background: rgba(123,104,238,0.06);
  border-bottom: 1px solid #f0edff;
}
.function-island::-webkit-scrollbar { display: none; }

.island-btn {
  padding: 9px 14px;
  border-radius: 14px 22px 22px 14px;
  border: 1.5px solid #ECE6F8;
  background: #fff;
  font-size: 14px;
  color: #555;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
  font-weight: 600;
  scroll-snap-align: start;
  box-shadow: 0 4px 12px rgba(123,104,238,0.08);
}
/* Tab ������ͳһ�ߴ磨��С�������ָ�ͻ���� */
.island-btn .ui-heart { font-size: 13px; }
.island-btn.active { font-size: 14px; }
.island-btn:hover { background: #F5F0FF; }
/* Tab δ���ձ꣨��ɫ����������ϵͳ�죩*/
.tab-unread {
  position: absolute; top: -6px; right: -6px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: #FFC93C; color: #3a2a00; font-size: 10px; font-weight: 800;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #fff; z-index: 2;
}
.island-btn { position: relative; }
.island-btn.active {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(26,26,38,0.12), inset 0 1px 0 rgba(255,255,255,0.18);
}
.island-btn:active { transform: scale(0.95); }

/* ===== �?层：中间对话区域 ===== */
.chat-area {
  position: absolute;
  top: 100px; top: calc(100px + env(safe-area-inset-top, 0px)); left: 0; right: 0;
  bottom: 160px;
  overflow-y: auto;
  overflow-x: visible;
  padding: 8px 12px;
  -webkit-overflow-scrolling: touch;
  transition: all 0.3s;
  z-index: 10;
}
.chat-area::-webkit-scrollbar { display: none; }

/* ===== ǩ��������Ķ��������ƣ�===== */
.signin-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 4px 0 12px; padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #7B68EE 0%, #D4537E 100%);
  color: #fff; box-shadow: 0 6px 18px rgba(123,104,238,0.25);
}
.signin-banner-left { font-size: 13px; line-height: 1.45; }
.signin-banner-left b { font-size: 15px; }
.signin-banner-sub { font-size: 11px; opacity: 0.9; }
.signin-banner-btn {
  flex-shrink: 0; border: none; border-radius: 20px;
  padding: 9px 16px; font-size: 14px; font-weight: 700;
  background: #fff; color: #7B68EE; cursor: pointer;
}
.signin-banner-btn:active { transform: scale(0.96); }

/* ===== ����ǩ����ť ===== */
.top-signin-btn {
  border: none; border-radius: 18px; padding: 5px 12px; font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, #7B68EE, #D4537E); color: #fff; cursor: pointer;
  display: flex; align-items: center; gap: 3px; line-height: 1;
}
.top-signin-btn:active { transform: scale(0.96); }
.top-signin-btn.signed { background: #E8DFF9; color: #9b8bc4; }

/* 对话气泡 */
.msg-row {
  display: flex;
  margin-bottom: 8px;
  align-items: flex-start;
  gap: 6px;
}
.msg-row.bot { flex-direction: row; }
.msg-row.user { flex-direction: row-reverse; }

.msg-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.msg-avatar.ai {
  background: linear-gradient(135deg, #7B68EE 0%, #A084FF 100%);
  border: 3px solid rgba(26,26,38,0.9);
  color: #fff; font-weight: 700; font-size: 13px;
}

/* ͳһ������ɫ �� �� AI ͷ��ͬɫϵ */
.ui-heart, .msg-heart {
  color: #7B68EE;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  transform: scaleY(1.18);
}
/* ��ӭ�������� �� �Ŵ����� */
.msg-heart-lg {
  color: #7B68EE;
  font-size: 1.4em;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  transform: scaleY(1.18);
}.msg-bubble {
  max-width: 96%; padding: 10px 13px;
  border-radius: 18px; font-size: 15px;
  line-height: 1.58; word-break: break-word;
}
.msg-row.bot .msg-bubble {
  background: var(--lavender);
  color: #333;
  border-bottom-left-radius: 4px;
  box-shadow: 0 6px 16px rgba(123,104,238,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
}
.msg-row.user .msg-bubble {
  background: #1a1a1a;
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 6px 16px rgba(26,26,38,0.18), inset 0 1px 0 rgba(255,255,255,0.10);
}

/* ����Ϣ�����ϸ� */
@keyframes msgIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg-row { animation: msgIn 0.26s var(--ease-smooth, cubic-bezier(0.34,1.56,0.64,1)) both; }

/* ===== ȫվ�ֺ�ͳһ����һ��ʵԴ������18px / ����15px�� ===== */
/* �����׼ = 18px��ͬ��ӭ��"Hi�������Ķ�AI"�� */
/* ���ݻ�׼ = 15px��ͬ��ӭ��"�������һ����Ϊ����ʲô"�� */

/* ����/�������ͳһ 18px��������/����ҳ��������ҳ����ͬ�� */
.section-title { font-size: 18px; font-weight: 700; color: #333; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.chatroom-section-header { font-size: 18px; }
.clone-status-label { font-size: 18px; }
.diary-entry-title { font-size: 18px; }

/* ��������ͳһ 15px��ԭ13/14pxȫ�������� */
.diary-entry-desc { font-size: 15px; }
.chatroom-empty-text { font-size: 15px; color: #786E90; }
.welcome-desc { font-size: 15px; }
.thermo-subtitle { font-size: 15px; }
.signin-banner-left { font-size: 14px; } /* ǩ�������С���� */
.clone-stat-label { font-size: 15px; } /* ����״̬=���ݻ�׼15px */
.clone-stat-sub { font-size: 12px; } /* ���ָ�������� */

/* �¶ȼƽ׶α�ǩ���� */
#thermometerContainer .thermometer-tube-wrapper > div:first-child { font-size: 13px !important; }
#thermometerContainer .thermo-stage-hot { font-size: 14px !important; font-weight: 800; }

/* --- pwaIn 动画 --- */
@keyframes pwaIn {
  from { opacity:0; transform:translateX(-50%) translateY(20px); }
  to { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* --- PWA 引导箭头弹跳动画 --- */
@keyframes pwaArrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* === 兼容 Token（原 styles.css，已合并�? base.css，全站单一令牌源） === */
:root {
  /* 主色 */
  --c-primary: #7B68EE;
  --c-primary-light: #A78BFA;
  --c-primary-dark: #5B4BD8;
  --c-primary-bg: #F5F0FF;
  --c-primary-border: #E0D8F8;

  /* 辅助�? */
  --c-pink: #D4537E;
  --c-pink-light: #F5C6D8;
  --c-pink-bg: #FFF0F5;
  --c-teal: #0BAFB0;  /* AI科技辅助�? */

  /* 中性色分层 */
  --c-text-primary: #1a1a2e;     /* 大标题深�? */
  --c-text-secondary: #4a4a6a;   /* 正文中灰 */
  --c-text-tertiary: #8888a8;    /* 辅助小字浅灰 */
  --c-text-hint: #bbbbd0;        /* 占位�? */

  /* 背景�? */
  --c-bg-page: #f7f5ff;          /* 页面底色 */
  --c-bg-card: rgba(255,255,255,0.82); /* 磨砂玻璃卡片 */
  --c-bg-card-solid: #ffffff;
  --c-bg-subtle: #faf8ff;        /* 极淡紫底 */

  /* 边框 */
  --c-border: rgba(123,104,238,0.12);
  --c-border-strong: rgba(123,104,238,0.22);

  /* 玻璃效果 */
  --glass-bg: rgba(255,255,255,0.72);
  --glass-blur: blur(12px);
  --glass-border: 1px solid rgba(255,255,255,0.6);
  --glass-shadow: 0 4px 24px rgba(123,104,238,0.10);

  /* 圆角规范 */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-full: 999px;

  /* 间距规范 */
  --space-page: 20px;   /* 页面左右边距 */
  --space-card: 16px;   /* 卡片内边�? */
  --space-item: 14px;   /* 列表项内边距 */
  --space-gap: 10px;    /* 同级元素间距 */

  /* 阴影规范 */
  --shadow-xs: 0 1px 4px rgba(123,104,238,0.08);
  --shadow-sm: 0 2px 12px rgba(123,104,238,0.10);
  --shadow-md: 0 4px 24px rgba(123,104,238,0.14);
  --shadow-lg: 0 8px 40px rgba(123,104,238,0.18);

  /* 动效 */
  --ease-smooth: cubic-bezier(0.34,1.56,0.64,1);
  --duration-fast: 0.15s;
  --duration-base: 0.25s;
}