/* HeartSync: calm surfaces, a bounded chat viewport, and touch-first controls. */
[data-theme="paper"] {
  color-scheme: light;
  --app-bg: #f7f7f5;
  --panel-bg: #fff;
  --card-bg: #fff;
  --input-bg: #fff;
  --bar-veil: #fcfcfb;
  --chat-veil: #f5f5f3;
  --well-bg: #f1f1ef;
  --modal-bg: #fff;
  --soft-fill: #f3f3f1;
  --soft-fill-hover: #eaeae7;
  --scroll-thumb: #d7d7d2;
  --scroll-thumb-hover: #bfbfb9;
  --focus-ring: #b66576;
  --focus-glow: #c976851c;
  --accent-hover-bg: #f8e9ed;
  --rose-300: #b36677; --rose-400: #b96578; --rose-500: #b45e71; --rose-600: #a75366;
  --gold: #a4793c;
  --ink-1: #303633; --ink-2: #69716c; --ink-3: #7e8680;
  --stroke-1: #e9ebe6; --stroke-2: #daddd6;
  --bubble-user-bg: #ecd4d9;
  --bubble-user-shadow: none;
  --bubble-ai-bg: #fff;
  --bubble-ai-border: #e9ebe6;
  --bubble-ai-shadow: 0 2px 3px #30363303;
  --action-bg: transparent;
  --action-border: transparent;
  --action-ink: #878078;
  --tts-bg: #eeefec;
  --btn-glow: transparent;
  --lt-rose-ink: #a95669; --lt-amber-ink: #926627; --lt-violet-ink: #7b658f;
  --lt-surface: #fff; --lt-surface-deep: #f4f4f1; --lt-border: #e5e7e1; --lt-fill: #f1f2ee;
}
html, body { width: 100%; height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; }
body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; }
#app {
  position: fixed; top: var(--app-offset-top, 0px); left: 0; right: 0;
  width: 100%; height: var(--app-height, 100dvh); max-height: none; min-height: 0;
  isolation: isolate; margin: 0 auto; transition: none;
}
#app[class*="vibe-"] { background: var(--app-bg); transition: none; }
#app > *, .app-workspace, .main-chat, .chat-room, .message-stage { min-width: 0; min-height: 0; }
button, [role="button"], input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, [role="button"] { touch-action: manipulation; }
button { transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease, transform 150ms ease; }
button:active:not(:disabled) { transform: scale(.96); }
button:disabled { cursor: not-allowed; }
#app .btn-icon { width: 40px; height: 40px; border-color: transparent; border-radius: 12px; background: transparent; }
#app .btn-primary { background: var(--rose-500); box-shadow: none; }
#app .btn-primary:hover:not(:disabled) { box-shadow: none; }
#app .glass-panel,
#app .glass-card,
#app .bar-veil,
#app .bubble-ai,
#app .bubble-user { backdrop-filter: none; -webkit-backdrop-filter: none; }
#app .glass-card { box-shadow: 0 3px 16px #00000004; }
#app .glass-panel { box-shadow: none; }
#app .eyebrow { display: block; font-size: 10px; line-height: 1.8; letter-spacing: 2.1px; font-weight: 600; color: var(--rose-400); }
#app .app-header { min-height: 66px; padding: 12px 22px; gap: 12px; border-bottom: 1px solid var(--stroke-1); }
#app .brand-name { white-space: nowrap; }
#app .app-header > div { min-width: 0; }
#app .brand-name .bg-clip-text { background: none; color: var(--ink-1); letter-spacing: -.4px; }
#app .app-header .global-actions { gap: 4px; }
#app .app-header .global-actions > .pill { box-shadow: none; }
#app .app-workspace { position: relative; }
#app .main-chat { background: var(--chat-veil); }
#app .conversation-sidebar { border: 0; border-right: 1px solid var(--stroke-1); background: var(--panel-bg); }
#app .desktop-sidebar { position: relative; width: 304px; z-index: 20; transition: width 220ms ease; }
#app .desktop-sidebar.sidebar-collapsed { width: 72px; }
#app .sidebar-toggle { right: 8px; top: 18px; width: 28px; height: 28px; border: 0; box-shadow: none; backdrop-filter: none; }
#app .sidebar-collapsed .sidebar-toggle { right: 20px; }
#app .sidebar-collapsed > div { padding-top: 62px; }
#app .conversation-heading { padding: 25px 22px 18px; flex-shrink: 0; }
#app .conversation-heading h2 { color: var(--ink-1); font-size: 25px; font-weight: 650; letter-spacing: -.7px; margin: 4px 0 5px; }
#app .conversation-heading p { font-size: 12px; color: var(--ink-3); }
#app .conversation-count { font-size: 12px; margin-left: 10px; color: var(--ink-3); font-weight: 400; vertical-align: middle; letter-spacing: 0; }
#app .conversation-search { display: flex; align-items: center; gap: 9px; margin: 0 16px 10px; padding: 11px 12px; border-radius: 12px; color: var(--ink-3); background: var(--well-bg); }
#app .conversation-search input { min-width: 0; width: 100%; color: var(--ink-1); font-size: 13px; outline: none; background: transparent; }
#app .conversation-search:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
#app .conversation-search input:focus-visible { outline: none; }
#app .conversation-sidebar .tab-well { border: 0; border-radius: 11px; padding: 3px; }
#app .conversation-sidebar .tab-well button { min-height: 35px; box-shadow: none; background-image: none; }
#app .conversation-list { min-height: 0; overscroll-behavior: contain; padding: 0 12px 16px; }
#app .conversation-list > .justify-between { flex-wrap: wrap; gap: 5px; }
#app .conversation-list > .overflow-x-auto { margin: 5px 0 12px; scrollbar-width: none; }
#app .conversation-item { min-height: 89px; border-radius: 13px; padding: 13px 11px; border: 0; background: transparent; transition: background-color 150ms ease; }
#app .conversation-item:hover { background: var(--soft-fill); }
#app .conversation-item[aria-current="true"] { background: var(--accent-hover-bg); }
#app .conversation-item img { width: 47px; height: 47px; border-radius: 15px; border: 0; }
#app .conversation-item .font-semibold { font-size: 14px; }
#app .conversation-item p { margin-top: 4px; font-size: 11px; }
#app .search-empty { padding: 20px; color: var(--ink-3); text-align: center; font-size: 13px; }
#app .chat-room { flex: 1 1 0%; height: 100%; min-width: 0; min-height: 0; }
#app .chat-header-island { min-height: 52px; padding: 8px 20px; gap: 12px; position: relative; z-index: 20; background: var(--panel-bg); border-bottom: 1px solid var(--stroke-1); }
#app .companion-context-rail { width: 296px; background: var(--panel-bg); border-left: 1px solid var(--stroke-1); overscroll-behavior: contain; }
#app .chat-header-island img { width: 34px; height: 34px; border-radius: 12px; border: 0; }
#app .chat-header-island .font-bold { font-size: 14px; font-weight: 600; color: var(--ink-1); }
#app .contact-presence { margin-top: 2px; font-size: 11px; color: var(--ink-3); }
#app .presence-dot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: #78a88c; }
#app .presence-dot.away { background: #c6a06c; }
#app .message-stage { display: flex; flex: 1 1 0%; position: relative; overflow: hidden; }
#app .chat-messages { min-height: 0; min-width: 0; width: 100%; overscroll-behavior: contain; overflow-x: hidden; overflow-anchor: none; padding: 20px 24px; -webkit-overflow-scrolling: touch; }
#app .chat-day-label { color: var(--ink-3); font-size: 11px; text-align: center; margin-bottom: 30px; letter-spacing: .5px; }
#app .message-item { margin-top: 20px !important; }
#app .message-item .bubble-ai,
#app .message-item .bubble-user { width: fit-content; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; white-space: pre-line; font-size: 14px; line-height: 1.8; padding: 10px 16px; border-radius: 16px; }
#app .message-item .bubble-ai { border-top-left-radius: 4px; }
#app .message-item .bubble-user { border-top-right-radius: 4px; }
#app .message-item > .items-end { max-width: 85%; }
#app .message-item > .items-start { max-width: 85%; }
#app .message-item > .items-start > img,
#app .message-item .user-avatar { width: 36px; height: 36px; border-radius: 12px; border: 0; box-shadow: none; flex-shrink: 0; }
#app .message-item .action-banner { padding: 3px 0; font-size: 11px; background: none; border: none; }
#app .message-item .tts-bar { padding: 0; border: none; background: none; gap: 5px; opacity: .7; }
#app .message-item .tts-play { width: 26px; height: 26px; background: none; border: none; }
#app .message-item .msg-time { opacity: .55; }
#app .bubble-ai,
#app .bubble-user { animation: fadeIn 180ms ease both; }
#app .jump-latest { position: absolute; bottom: 18px; right: 24px; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 11px 15px; background: var(--panel-bg); color: var(--rose-400); border: 1px solid var(--stroke-1); border-radius: 24px; font-size: 12px; box-shadow: 0 4px 18px #00000009; }
#app .chat-tools { gap: 5px; padding: 10px 24px 0; background: var(--bar-veil); border-color: var(--stroke-1); overflow-x: auto; scrollbar-width: none; }
#app .chat-tools .skill-chip { padding: 8px 10px; border: 0; font-weight: 400; color: var(--ink-2); background: none; box-shadow: none; cursor: pointer; }
#app .chat-tools .skill-chip:hover { background: var(--soft-fill-hover); }
#app .chat-tools .skill-chip.bg-rose-600 { color: var(--rose-400); background: var(--accent-hover-bg); }
#app .composer-sa { flex: 0 0 auto; padding: 9px 24px 18px; background: var(--bar-veil); border-color: transparent; }
#app .context-suggestions { scrollbar-width: none; }
#app .context-suggestions button { border: 0; background: var(--soft-fill); color: var(--ink-2); box-shadow: none; padding: 6px 11px; }
#app .composer-row { align-items: flex-end; gap: 9px; }
#app .message-input { display: block; min-width: 0; min-height: 45px; max-height: 120px; border: 1px solid var(--stroke-1); border-radius: 13px; padding: 10px 13px; font-size: 15px; line-height: 24px; box-shadow: none; outline: none; }
#app .message-input:focus { box-shadow: none; border-color: var(--stroke-2); }
#app .composer-row .btn-icon { height: 45px; width: 38px; }
#app .composer-more { display: none; }
#app .send-button { height: 45px; min-width: 72px; border-radius: 12px; padding: 0 17px; font-size: 13px; }
#app .send-button:disabled { opacity: .4; }
#app .composer-status { font-size: 11px; color: var(--rose-400); display: flex; align-items: center; gap: 7px; padding: 3px 4px 9px; }
#app .bottom-nav-bar { display: none; }
#app .content-page { overscroll-behavior: contain; scroll-padding: 24px; padding-bottom: 36px; }
#app .content-page > * { flex-shrink: 0; }
#app .content-page:not(.page-landing):not(.page-me) { width: 100%; max-width: 1200px; margin-inline: auto; }
#app .page-intro { padding: 8px 0 12px; }
#app .page-intro h1 { font-size: 25px; font-weight: 650; letter-spacing: -.6px; margin: 8px 0; color: var(--ink-1); }
#app .page-intro p { font-size: 12px; line-height: 1.8; color: var(--ink-3); }
#app .studio-entry { display: flex; align-items: center; gap: 14px; width: 100%; padding: 20px; background: var(--panel-bg); border: 1px solid var(--stroke-1); border-radius: 18px; text-align: left; color: var(--rose-400); }
#app .studio-entry > span:not(.ic) { flex: 1; }
#app .studio-entry strong { font-size: 14px; color: var(--ink-1); display: block; }
#app .studio-entry small { font-size: 11px; color: var(--ink-3); display: block; margin-top: 5px; }
#app .chat-details-layer { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: #121b2461; }
#app .chat-details { width: 430px; max-height: calc(var(--app-height, 100dvh) - 48px); overflow: auto; background: var(--modal-bg); color: var(--ink-1); border: 1px solid var(--stroke-1); border-radius: 26px; padding: 24px; box-shadow: 0 20px 80px #00000020; overscroll-behavior: contain; }
#app .sheet-handle { display: none; }
#app .sheet-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
#app .sheet-heading h2 { font-size: 23px; font-weight: 600; margin-top: 4px; }
#app .details-contact { display: flex; align-items: center; gap: 13px; padding: 0 0 24px; }
#app .details-contact img { width: 52px; height: 52px; border-radius: 17px; object-fit: cover; }
#app .details-contact strong { font-size: 16px; }
#app .details-contact p { font-size: 11px; color: var(--ink-3); margin-top: 5px; }
#app .details-affection { margin-left: auto; display: flex; align-items: center; gap: 5px; color: var(--rose-400); font-size: 13px; background: var(--accent-hover-bg); padding: 6px 10px; border-radius: 20px; }
#app .details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
#app .details-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 90px; border: 1px solid var(--stroke-1); border-radius: 16px; color: var(--rose-400); background: var(--soft-fill); }
#app .details-grid button > span:last-child { font-size: 12px; color: var(--ink-2); }
#app .details-links button { display: flex; width: 100%; align-items: center; min-height: 56px; gap: 12px; border-top: 1px solid var(--stroke-1); text-align: left; font-size: 13px; color: var(--ink-2); }
#app .details-links button > span:nth-child(2) { flex: 1; }
#app .details-links small { font-size: 11px; color: var(--ink-3); }
#app .details-links .danger-link { color: var(--rose-400); margin-top: 12px; }
#app .sheet-enter-active,
#app .sheet-leave-active,
#app .veil-enter-active,
#app .veil-leave-active { transition: opacity 200ms ease; }
#app .sheet-enter-active .chat-details,
#app .sheet-leave-active .chat-details { transition: transform 240ms cubic-bezier(.2,.8,.2,1); }
#app .sheet-enter-from,
#app .sheet-leave-to,
#app .veil-enter-from,
#app .veil-leave-to { opacity: 0; }
#app .sheet-enter-from .chat-details,
#app .sheet-leave-to .chat-details { transform: translateY(24px); }
[data-theme="paper"] .bubble-user { color: #513942; border-color: transparent; }
[data-theme="paper"] .app-header { background: #fff; }
[data-theme="paper"] .tab-well button.text-white { color: var(--rose-600); background: white; }
[data-theme="paper"] .text-white:not(button):not(.btn):not(.bubble-user) { color: var(--ink-1); }
[data-theme="paper"] .bg-gradient-to-r.text-transparent,
[data-theme="paper"] .bg-gradient-to-br.text-transparent { color: var(--rose-500); background: none; }
[data-theme="paper"] .content-page .glass-card { border-color: var(--stroke-1); background: var(--card-bg); }
[data-theme="paper"] .content-page .shadow-2xl,
[data-theme="paper"] .content-page .shadow-xl { box-shadow: none; }
[data-theme="paper"] .content-page > .glass-card { background-image: none; }
[data-theme="paper"] .page-landing > div:first-child > div:first-child { box-shadow: none; background: #f3e7e9; color: var(--rose-400); border: none; }
[data-theme="paper"] .page-landing .btn-primary span { color: white; }
[data-theme="paper"] .page-landing .btn-primary { box-shadow: none; }
[data-theme="paper"] .page-landing .bg-black\/40 { background: var(--well-bg); }
[data-theme="paper"] .glass-input, [data-theme="paper"] textarea { color: var(--ink-1); }
@media (min-width: 768px) {
  #app { max-width: 1600px; padding: 20px; }
#app .app-header { border-radius: 20px 20px 0 0; }
#app .app-workspace { border: 1px solid var(--stroke-1); border-top: 0; border-radius: 0 0 20px 20px; }
#app .app-header > div:first-child > .hidden.lg\:flex { display: none; }
#app .bg-image-layer { inset: 20px; border-radius: 20px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  #app { padding: 10px; }
#app .app-header { padding-inline: 14px; }
#app .app-header .global-actions > button:first-child,
#app .app-header .global-actions > button:nth-child(2),
#app .app-header .global-actions > .relative { display: none; }
#app .app-header > div:first-child > .md\:flex { gap: 0; margin-left: 4px; }
#app .app-header > div:first-child > .md\:flex button { padding-inline: 8px; font-size: 11px; }
#app .app-header > div:first-child > .md\:flex button > span { display: none; }
#app .desktop-sidebar { width: 260px; }
#app .chat-header { padding-inline: 16px; }
#app .chat-header .btn-ghost { padding-inline: 8px; }
}
@media (max-width: 767px) {
  #app { padding: 0; }
#app .app-header { min-height: calc(62px + env(safe-area-inset-top, 0px)); padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px 10px; border: 0; border-bottom: 1px solid var(--stroke-1); }
#app .app-header > div:first-child { gap: 2px; }
#app .app-header > div:first-child > div > .w-9 { display: none; }
#app .brand-name .font-bold { font-size: 17px; }
#app .brand-name .text-\[10px\] { display: none; }
#app .app-header .global-actions > .relative,
#app .app-header .global-actions > button[title="个人中心"],
#app .app-header .global-actions > button:last-child { display: none; }
#app .global-actions > .pill { border: 0 !important; background: var(--soft-fill) !important; color: var(--ink-2) !important; padding: 8px 10px; }
#app .btn-icon { width: 44px; height: 44px; }
#app .app-header button.btn-icon { width: 44px !important; height: 44px !important; }
#app .drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: #121b2461; }
#app .conversation-sidebar.mobile-drawer { position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; width: min(88vw, 360px); height: 100%; border-radius: 0 24px 24px 0; transform: translate3d(-102%,0,0); transition: transform 250ms cubic-bezier(.2,.8,.2,1), visibility 250ms; visibility: hidden; overflow: hidden; box-shadow: 12px 0 50px #00000012; padding-top: env(safe-area-inset-top, 0px); }
#app .conversation-sidebar.mobile-drawer.drawer-open { visibility: visible; transform: translate3d(0,0,0); }
#app .conversation-heading { padding: 25px 20px 18px; }
#app .conversation-heading h2 { font-size: 28px; }
#app .conversation-list { padding-inline: 10px; }
#app .conversation-search input { font-size: 16px; }
#app .conversation-sidebar .tab-well button { min-height: 40px; }
#app .conversation-list > .justify-between > span { font-size: 11px; letter-spacing: .5px; }
#app .conversation-list > .justify-between button { min-height: 34px; }
#app .conversation-list > .overflow-x-auto button { min-height: 30px; padding-inline: 10px; }
#app .conversation-item { min-height: 91px; }
#app .conversation-item .font-semibold { font-size: 15px; }
#app .conversation-sidebar > .border-t { padding: 14px 18px; }
#app .conversation-sidebar > .border-t button { min-height: 38px; }
#app .drawer-navigation { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--stroke-1); padding: 12px 10px max(16px, env(safe-area-inset-bottom, 0px)); }
#app .drawer-navigation button { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--ink-2); font-size: 11px; padding: 5px 0; }
#app .chat-header { min-height: calc(66px + env(safe-area-inset-top, 0px)); padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px 6px; gap: 4px; }
#app .chat-header > div:first-child { gap: 7px; }
#app .chat-header img { width: 37px; height: 37px; border-radius: 12px; }
#app .chat-header .font-bold { font-size: 16px; }
#app .chat-header .contact-presence { font-size: 10px; }
#app .chat-header .room-wallet,
#app .chat-header .btn-ghost { display: none; }
#app .chat-header .btn-icon { border: none; width: 42px; height: 44px; }
#app .chat-messages { padding: 22px 16px 24px; }
#app .chat-day-label { font-size: 10px; margin-bottom: 23px; }
#app .message-item { margin-top: 21px !important; }
#app .message-item > .items-start { gap: 9px; max-width: 94%; }
#app .message-item > .items-end { max-width: 84%; }
#app .message-item > .items-start > img { width: 32px; height: 32px; border-radius: 11px; }
#app .message-item .bubble-ai,
#app .message-item .bubble-user { font-size: 15px; line-height: 1.75; padding: 10px 13px; border-radius: 15px; }
#app .message-item .bubble-ai { border-top-left-radius: 4px; }
#app .message-item .bubble-user { border-top-right-radius: 4px; }
#app .message-item .msg-time { display: none; }
#app .message-item .tts-play { width: 32px; height: 32px; }
#app .message-item .tts-bar { margin-top: 1px !important; }
#app .conversation-welcome { padding: 28px 16px; margin: 16px auto; }
#app .conversation-welcome img { width: 64px; height: 64px; box-shadow: none; border: none; }
#app .jump-latest { right: 15px; bottom: 14px; padding: 11px 14px; }
#app .composer-sa { padding: 10px 12px max(12px, env(safe-area-inset-bottom, 0px)); z-index: 5; border-top: 1px solid var(--stroke-1); }
#app .keyboard-open .composer-sa { padding-bottom: 8px; }
#app .composer-row { gap: 7px; }
#app .composer-upload { display: none !important; }
#app .composer-more { display: inline-flex; flex-shrink: 0; border: 0; width: 34px !important; }
#app .composer-more.active { color: var(--rose-400); background: var(--accent-hover-bg); border-radius: 12px; }
#app .message-input { padding: 10px 12px; font-size: 16px; border-radius: 12px; }
#app .send-button { min-width: 59px; width: 59px; padding: 0; border-radius: 12px; }
#app .send-button > .ic { display: none; }
#app .chat-tools { flex: 0 1 auto; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px 3px; max-height: min(270px, 36%); overflow-y: auto; overscroll-behavior: contain; padding: 13px 10px; background: var(--bar-veil); }
#app .chat-tools .skill-chip { min-width: 0; min-height: 70px; flex-direction: column; justify-content: center; gap: 8px; padding: 10px 3px; border: 0; border-radius: 14px; background: var(--soft-fill); font-size: 11px; }
#app .chat-tools .skill-chip > span:first-child { font-size: 22px; }
#app .chat-tools .ic { width: 22px !important; height: 22px !important; }
#app .context-suggestions { padding: 3px 0 6px; max-height: 43px; }
#app .context-suggestions button { min-height: 34px; }
#app .composer-sa > .space-y-2,
#app .composer-sa > template > .space-y-2 { max-height: 180px; overflow-y: auto; }
#app .bottom-nav-bar { display: grid; grid-template-columns: repeat(4, 1fr); flex-shrink: 0; padding: 5px 12px max(6px, env(safe-area-inset-bottom, 0px)); min-height: 65px; background: var(--panel-bg); backdrop-filter: none; border-top: 1px solid var(--stroke-1); }
#app .bottom-nav-bar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 51px; position: relative; color: var(--ink-3); font-size: 10px; }
#app .bottom-nav-bar button.active { color: var(--rose-400); font-weight: 600; }
#app .bottom-nav-bar button.active::before { content: ''; position: absolute; top: 3px; width: 44px; height: 28px; border-radius: 12px; background: var(--accent-hover-bg); z-index: -1; }
#app .nav-dot { position: absolute; width: 6px; height: 6px; right: calc(50% - 17px); top: 5px; background: var(--rose-500); border-radius: 50%; }
#app .content-page { padding: 22px 20px 28px; }
#app .content-page > .glass-card:first-child { padding: 23px; border: 1px solid var(--stroke-1); border-radius: 22px; }
#app .content-page h1,
#app .content-page h2 { letter-spacing: -.5px; }
#app .page-landing { gap: 38px; }
#app .page-landing > * { margin-top: 0 !important; }
#app .page-landing > div:first-child { padding-top: 14px; }
#app .page-landing h1 { font-size: 30px; line-height: 1.5; }
#app .page-landing > div:first-child > div:first-child { padding: 7px 11px; font-size: 10px; }
#app .page-landing > div:first-child > .grid { gap: 7px; padding-top: 14px; }
#app .page-landing > div:first-child > .grid > div { padding: 11px 7px; font-size: 10px; }
#app .page-discover > .glass-card:first-child > .absolute,
#app .page-studio > .glass-card:first-child > .absolute { display: none; }
#app .page-me > .glass-card:first-child { flex-wrap: wrap; row-gap: 18px; padding: 20px; }
#app .page-me > .glass-card:first-child > div:last-child { margin-left: auto; }
#app .modal-layer { top: var(--app-offset-top, 0px); height: var(--app-height, 100dvh); bottom: auto; }
#app .modal-layer.items-center > div { max-height: calc(var(--app-height, 100dvh) - max(16px, env(safe-area-inset-top, 0px))); padding-bottom: max(22px, env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
#app .modal-layer input,
#app .modal-layer textarea,
#app .modal-layer select,
#app .content-page input,
#app .content-page textarea { font-size: 16px !important; }
#app .modal-layer .modal-close { min-width: 42px; min-height: 42px; }
#app .chat-details-layer { align-items: flex-end; padding: 0; }
#app .chat-details { width: 100%; border: 0; max-height: calc(var(--app-height, 100dvh) - 18px); border-radius: 26px 26px 0 0; padding: 10px 23px max(24px, env(safe-area-inset-bottom, 0px)); }
#app .sheet-handle { display: block; width: 34px; height: 4px; background: var(--stroke-2); border-radius: 4px; margin: 0 auto 22px; }
#app .sheet-heading { margin-bottom: 24px; }
#app .sheet-enter-from .chat-details,
#app .sheet-leave-to .chat-details { transform: translateY(100%); }
}
@media (max-width: 359px) {
#app .chat-messages { padding-inline: 12px; }
#app .content-page { padding-inline: 15px; }
#app .chat-header { padding-right: 5px; }
#app .chat-header .font-bold { font-size: 15px; }
#app .composer-sa { padding-inline: 8px; }
#app .composer-row { gap: 5px; }
#app .conversation-heading { padding-inline: 16px; }
#app .conversation-list > .justify-between { padding-inline: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Panels animate only opacity/transform; viewport geometry updates without easing. */
#app .tools-enter-active, #app .tools-leave-active { transition: opacity 160ms ease, transform 160ms ease; }
#app .tools-enter-from, #app .tools-leave-to { opacity: 0; transform: translateY(8px); }
#app .chat-tools .skill-chip { color: var(--ink-2); }
#app .chat-tools .skill-chip:hover { color: var(--rose-400); }
#app .message-stage { background: linear-gradient(var(--vibe-wash, transparent), transparent 45%); }
#app.vibe-romantic { --vibe-wash: #c9768507; }
#app.vibe-intimate { --vibe-wash: #9478b009; }
#app.vibe-playful { --vibe-wash: #78a88c08; }
#app.vibe-melancholy { --vibe-wash: #709fc509; }
#app.vibe-jealous { --vibe-wash: #b3696909; }
@media (prefers-reduced-motion: reduce) {
  #app .tools-enter-active, #app .tools-leave-active { transition: none; }
}

/* Text on photographs needs contrast even in a light theme. */
[data-theme="paper"] #app .relative > .absolute .text-white,
[data-theme="paper"] #app .relative > .absolute.text-white { color: #fff; }
[data-theme="paper"] #app .relative > .absolute .text-slate-300 { color: #e2e8f0 !important; }
[data-theme="paper"] #app .relative > .absolute .text-rose-300 { color: #f2c4ce !important; }
@media (max-width: 767px) {
  #app .chat-room { position: relative; overflow: hidden; }
  #app .chat-header-island {
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    height: 42px;
    min-height: 42px;
    border-radius: 9999px;
    padding: 4px 12px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 30;
  }
  #app .chat-tools .skill-chip { font-size: 11px; }
  #app .chat-tools .skill-chip > .ic { font-size: 22px !important; }
  #app .chat-messages { padding: 58px 12px 16px !important; }
  #app .jump-latest { right: 14px; bottom: 12px; }
}
[data-theme="paper"] #app .page-me .bg-black\/40 { background: var(--soft-fill); }
[data-theme="paper"] #app .page-me .bg-gradient-to-r { background-image: none; }
[data-theme="paper"] #app .page-discover .shadow-md { box-shadow: none; }
[data-theme="paper"] #app .page-discover .bg-rose-600 { background: var(--rose-500); }
[data-theme="paper"] #app .page-me button.bg-rose-600 { background: var(--rose-500); }

/* Tablet widths keep contact identity readable and navigation on one line. */
#app .app-header > div:first-child > .md\:flex button { white-space: nowrap; flex-shrink: 0; }
#app .app-header > div:first-child > div > .bg-gradient-to-tr { color: #fff; }
@media (min-width: 768px) and (max-width: 1023px) {
  #app .app-header .global-actions > .pill[title="Token 余额与充值"] { display: none; }
  #app .brand-name .text-\[10px\] { display: none; }
  #app .chat-header .btn-ghost { display: none; }
  #app .chat-header > div:first-child .hidden.sm\:inline { display: none; }
}