:root { --ink:#24232d; --soft-ink:#6d6b79; --hair:rgba(74,67,100,.13); --lilac:#e9e5f2; --lavender:#d9cdf3; --surface:rgba(255,255,255,.62); --glass:rgba(255,255,255,.72); --accent:#4c4260; --warm:#f5d5c5; --shadow:0 18px 45px rgba(82,75,104,.11), 0 2px 10px rgba(82,75,104,.05); --mono:"DM Mono",monospace; --sans:"Noto Sans SC","PingFang SC",sans-serif; --serif:"Noto Serif SC","Songti SC",serif; }
html[data-font="soft"] { --sans:"PingFang SC","Noto Sans SC",sans-serif; --serif:"PingFang SC","Noto Sans SC",sans-serif; } html[data-font="serif"] { --sans:"Noto Sans SC","PingFang SC",sans-serif; --serif:"Noto Serif SC","Songti SC",serif; } html[data-font="clean"] { --sans:"Manrope","Noto Sans SC",sans-serif; --serif:"Manrope","Noto Sans SC",sans-serif; }
* { box-sizing:border-box; } html,body { margin:0; min-height:100%; background:#f2f1f7; color:var(--ink); font-family:var(--sans); } body { overflow:hidden; background-image:radial-gradient(circle at 10% 8%,rgba(214,198,245,.8),transparent 25%),radial-gradient(circle at 90% 75%,rgba(255,210,192,.56),transparent 28%),linear-gradient(125deg,#f8f7fb,#eeedf5); } button,textarea { font:inherit; } button { cursor:pointer;color:inherit; } .app-shell { min-height:100vh; display:grid; grid-template-columns:246px minmax(470px,1fr) 310px; overflow:hidden; position:relative; }.drawer-scrim { display:none; }
.sidebar { z-index:3; padding:25px 14px 17px; display:flex; flex-direction:column; min-height:100vh; background:rgba(255,255,255,.42); border-right:1px solid rgba(255,255,255,.85); backdrop-filter:blur(28px) saturate(145%); }.brand { display:flex;align-items:center;gap:9px;color:#282630;font:600 20px var(--serif);text-decoration:none;margin:0 12px 31px;letter-spacing:-.05em; }.brand-mark { width:17px;height:17px;border:1.5px solid #5e536e;border-radius:50% 50% 50% 3px;transform:rotate(-45deg);box-shadow:0 0 14px rgba(154,135,200,.45); }.new-chat { border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.58);box-shadow:0 5px 15px rgba(84,73,106,.08),inset 0 1px rgba(255,255,255,.9);padding:12px 13px;border-radius:13px;text-align:left;color:#3a3548;font-size:12px;font-weight:600;transition:.3s; }.new-chat span { font-size:20px;line-height:10px;vertical-align:-2px;margin-right:8px;font-weight:400; }.new-chat:hover { transform:translateY(-2px);background:#fff; }.sidebar-label { font:10px var(--mono);color:#898491;letter-spacing:.09em;margin:31px 11px 10px; }.chat-list { display:grid;gap:3px; }.chat-row,.utility { border:0;background:transparent;width:100%;display:flex;align-items:center;color:#777382;text-align:left;padding:10px 11px;gap:9px;border-radius:9px;font-size:12px;transition:.25s; }.chat-row:hover,.utility:hover { background:rgba(255,255,255,.62);color:#51495c; }.chat-row.selected { color:#393340;background:rgba(255,255,255,.65);box-shadow:inset 0 1px rgba(255,255,255,.8); }.chat-row time { margin-left:auto;font:9px var(--mono);color:#96919e; }.chat-dot { width:6px;height:6px;border-radius:50%;background:#bf8d72;box-shadow:0 0 7px #edb9a1; }.chat-dot.dim { background:#b1acb9;box-shadow:none; }.utility-nav { border-top:1px solid var(--hair);padding-top:17px;margin-top:27px; }.utility { gap:11px; }.utility.active { color:#4a4158;background:rgba(255,255,255,.35); }.nav-icon { width:14px;text-align:center;font-size:17px;line-height:12px; }.profile { margin-top:auto;border:0;border-top:1px solid var(--hair);padding:16px 5px 0;background:transparent;display:flex;align-items:center;gap:9px;text-align:left; }.avatar { display:grid;place-items:center;width:37px;height:37px;background:linear-gradient(145deg,#e6d9f6,#baa9d3);border:1px solid rgba(255,255,255,.95);border-radius:50%;color:#51405d;font:500 15px var(--serif);box-shadow:0 4px 12px rgba(105,84,123,.15),inset 0 1px rgba(255,255,255,.8); }.avatar.small { width:27px;height:27px;background:linear-gradient(145deg,#f5ded1,#c9b4ca);font-size:11px; }.profile strong { display:block;font-size:11px;font-weight:600; }.profile small { display:block;color:#85808d;font-size:10px;margin-top:2px; }.more { margin-left:auto;color:#98939f;letter-spacing:1px; }
.conversation { z-index:1;display:flex;flex-direction:column;min-width:0;min-height:100vh;position:relative;background:rgba(255,255,255,.21); }.conversation-header { height:78px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.8);padding:0 27px;background:rgba(255,255,255,.42);backdrop-filter:blur(20px); }.person { display:flex;gap:11px;align-items:center;margin-right:auto; }.person strong { display:block;font-size:13px; }.person small { display:flex;align-items:center;gap:5px;margin-top:3px;color:#7c7786;font-size:10px; }.person i { display:block;width:5px;height:5px;background:#9d8abf;border-radius:50%;box-shadow:0 0 8px #b49bdf; }.header-actions { display:flex;gap:7px; }.icon-button { width:33px;height:33px;border:1px solid rgba(255,255,255,.72);border-radius:11px;background:rgba(255,255,255,.45);box-shadow:inset 0 1px rgba(255,255,255,.9),0 3px 8px rgba(73,61,91,.06);color:#777080;font-size:15px; }.icon-button:hover { background:#fff;color:#4a4253; }.menu-button { display:none;position:relative;margin-right:13px; }.menu-button span { position:absolute;width:13px;height:1.5px;background:#5d5666;left:9px;border-radius:2px; }.menu-button span:first-child { top:12px; }.menu-button span:last-child { top:18px;width:9px; }
.message-area { flex:1;overflow-y:auto;padding:clamp(32px,6vh,76px) clamp(22px,6vw,100px) 24px;scrollbar-width:thin;scrollbar-color:#cec8d6 transparent; }.arrival { position:relative;max-width:560px;margin:0 auto;min-height:450px;display:flex;flex-direction:column;justify-content:center;animation:arrive .8s cubic-bezier(.2,.8,.2,1) both; }.arrival-orb { position:absolute;right:-100px;top:2px;width:185px;height:185px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.96),rgba(219,207,244,.65) 25%,rgba(181,160,216,.18) 57%,transparent 70%);filter:blur(.2px); }.eyebrow { color:#867c96;font:10px var(--mono);letter-spacing:.1em;margin:0 0 18px;z-index:1; }.arrival h1 { font:400 clamp(35px,5vw,63px)/1.18 var(--serif);letter-spacing:-.07em;margin:0;max-width:560px;z-index:1; }.arrival h1 em { font-style:italic;color:#89779e; }.arrival-copy { color:#777281;font-size:13px;line-height:1.85;margin:18px 0 0;z-index:1; }.starter-grid { display:grid;grid-template-columns:repeat(3,1fr);grid-auto-flow:dense;gap:8px;margin-top:41px;z-index:1; }.starter-card { border:1px solid rgba(255,255,255,.85);border-radius:15px;background:rgba(255,255,255,.47);box-shadow:inset 0 1px rgba(255,255,255,.86),0 8px 18px rgba(88,77,108,.07);padding:15px;text-align:left;min-height:86px;overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),background .35s; }.starter-card:hover { transform:translateY(-4px) scale(1.01);background:rgba(255,255,255,.8); }.starter-card strong { display:block;font-size:11px;font-weight:600; }.starter-card small { display:block;margin-top:6px;color:#898390;font-size:10px; }.messages { max-width:680px;margin:0 auto;display:grid;gap:25px;padding-bottom:30px; }.message { display:flex;gap:10px;animation:slide-in .5s ease both; }.message.user { justify-content:flex-end; }.bubble { max-width:80%;padding:13px 15px;border-radius:7px 17px 17px;background:rgba(255,255,255,.76);box-shadow:inset 0 1px rgba(255,255,255,.95),0 7px 18px rgba(67,59,81,.07);color:#403947;font:400 14px/1.82 var(--serif); }.user .bubble { background:#696177;color:#fff;border-radius:17px 7px 17px 17px;font-family:var(--sans);font-size:13px;line-height:1.7;box-shadow:0 8px 17px rgba(73,64,87,.17); }.message-meta { color:#918b99;font:9px var(--mono);margin:6px 0 0 3px; }.user .message-meta { text-align:right;margin-right:3px; }.composer-wrap { padding:0 clamp(22px,6vw,100px) 18px;background:linear-gradient(0deg,rgba(244,243,248,.94) 75%,transparent); }.memory-notice { max-width:680px;margin:0 auto 9px;color:#817c88;font-size:10px;display:flex;align-items:center;gap:6px; }.memory-spark { width:5px;height:5px;border-radius:50%;background:#ad9cc9;box-shadow:0 0 9px #bba8dc; }.memory-notice button { border:0;border-bottom:1px solid #b5a8c7;background:transparent;padding:0;color:#695b7e;font-size:10px; }.composer { max-width:680px;margin:0 auto;display:flex;align-items:flex-end;gap:10px;padding:9px 9px 9px 13px;border:1px solid rgba(255,255,255,.92);border-radius:18px;background:rgba(255,255,255,.62);backdrop-filter:blur(24px) saturate(150%);box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.95);transition:.3s; }.composer:focus-within { border-color:#d6c8ea;box-shadow:0 15px 32px rgba(88,72,107,.14),inset 0 1px #fff; }.composer textarea { flex:1;resize:none;max-height:130px;outline:0;border:0;background:transparent;color:#393442;font-size:13px;line-height:1.55;padding:8px 0; }.composer textarea::placeholder { color:#98939f; }.attach,.send { width:30px;height:30px;border:0;border-radius:10px; }.attach { background:rgba(234,231,240,.73);color:#7d7588;font-size:20px;font-weight:300; }.send { background:#554b63;color:#fff;font-size:18px;line-height:20px;box-shadow:0 4px 9px rgba(65,55,76,.2);transition:transform .25s; }.send:hover { transform:translateY(-2px); }.composer-caption { max-width:680px;margin:8px auto 0;color:#9b96a2;font-size:9px;text-align:center; }
.context-panel { z-index:3;border-left:1px solid rgba(255,255,255,.82);background:rgba(255,255,255,.49);padding:25px 21px;backdrop-filter:blur(30px) saturate(145%);overflow-y:auto;transition:transform .45s cubic-bezier(.25,.8,.25,1),opacity .3s; }.context-header { display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;letter-spacing:.02em; }.close-context { display:none;background:none;border:0;color:#777;font-size:24px; }.presence-card { margin:25px 0 24px;padding:17px 16px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px rgba(255,255,255,.96),0 10px 24px rgba(97,80,119,.08);border-radius:17px;overflow:hidden;position:relative; }.presence-card:before { content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(220,196,237,.45),transparent 67%);right:-60px;top:-65px; }.presence-orbit { width:40px;height:40px;position:relative;margin-bottom:13px; }.presence-core { position:absolute;inset:12px;border-radius:50%;background:#b09bc9;box-shadow:0 0 17px #c7b0e5; }.orbit-dot { position:absolute;width:5px;height:5px;border-radius:50%;background:#e0a991; }.orbit-dot.one { left:4px;top:8px; }.orbit-dot.two { right:3px;bottom:6px; }.presence-status { color:#5a5065;font:12px var(--serif);margin:0 0 7px; }.presence-card > p:last-child { margin:0;color:#807988;font:11px/1.7 var(--serif); }.context-tabs { display:flex;gap:16px;border-bottom:1px solid var(--hair); }.context-tabs button { padding:0 0 10px;border:0;border-bottom:1px solid transparent;background:transparent;color:#89838f;font-size:10px; }.context-tabs button.active { color:#4a4253;border-color:#796b8d; }.context-view { display:none;padding-top:18px; }.context-view.active { display:block;animation:fade .4s ease; }.context-intro { color:#817b88;font:11px/1.7 var(--serif);margin:0 0 15px; }.memory-card { border-left:1px solid #a795bd;padding:0 0 0 11px;margin:0 0 19px; }.memory-card.muted { border-color:#c0bbc6; }.memory-card time,.timeline time { color:#827393;font:9px var(--mono); }.memory-card p { color:#57505f;font:11px/1.7 var(--serif);margin:6px 0; }.memory-card button,.text-action { padding:0;border:0;background:transparent;color:#736082;font-size:10px; }.text-action { margin-top:3px; }.text-action span { margin-left:4px; }.timeline { display:grid;gap:25px;border-left:1px solid #b7b1bc;margin:5px 0 0 4px;padding-left:14px; }.timeline div { position:relative; }.timeline div:before { content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#a998c1;left:-17px;top:3px; }.timeline p { margin:7px 0 0;color:#696270;font:11px/1.7 var(--serif); }.persona-list { margin:18px 0;display:grid;gap:15px; }.persona-list div { border-bottom:1px solid var(--hair);padding-bottom:11px; }.persona-list dt { color:#8a8490;font-size:9px;margin-bottom:5px; }.persona-list dd { margin:0;color:#5c5563;font:11px/1.65 var(--serif); }.is-hidden { display:none !important; } @keyframes arrive { from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none} } @keyframes slide-in { from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none} } @keyframes fade { from{opacity:0}to{opacity:1} }
.settings-sheet { position:fixed;inset:0;z-index:10;display:grid;place-items:end center;visibility:hidden;pointer-events:none; }.settings-sheet.open { visibility:visible;pointer-events:auto; }.sheet-scrim { position:absolute;inset:0;border:0;background:rgba(40,35,49,.18);backdrop-filter:blur(3px);opacity:0;transition:.3s; }.settings-sheet.open .sheet-scrim { opacity:1; }.settings-card { position:relative;width:min(100%,500px);padding:12px 19px 26px;background:rgba(253,253,255,.91);border:1px solid rgba(255,255,255,.9);border-radius:25px 25px 0 0;box-shadow:0 -16px 46px rgba(59,50,70,.15),inset 0 1px #fff;backdrop-filter:blur(30px) saturate(150%);transform:translateY(105%);transition:transform .45s cubic-bezier(.25,.8,.25,1); }.settings-sheet.open .settings-card { transform:none; }.sheet-handle { width:36px;height:4px;border-radius:4px;background:#d3d0da;margin:0 auto 18px; }.settings-card header { display:flex;justify-content:space-between;align-items:center;margin-bottom:17px; }.settings-card header p { color:#8a8492;font-size:10px;margin:0 0 2px; }.settings-card h2 { font:500 19px var(--serif);letter-spacing:-.04em;margin:0; }.settings-card header button { width:30px;height:30px;border:0;border-radius:50%;background:#eeedf2;color:#746e7b;font-size:20px; }.font-options { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;grid-auto-flow:dense; }.font-option { border:1px solid #e5e2e9;border-radius:15px;background:rgba(255,255,255,.62);padding:13px 9px;text-align:left;transition:.25s; }.font-option:hover,.font-option.selected { border-color:#b5a6cc;background:#f5f0fb;box-shadow:0 5px 12px rgba(98,77,119,.1); }.font-preview { display:block;color:#665b72;font-size:26px;line-height:1;margin-bottom:13px; }.soft-preview { font-family:"PingFang SC",sans-serif; }.serif-preview { font-family:"Noto Serif SC",serif; }.clean-preview { font-family:Manrope,sans-serif; }.font-option strong { display:block;color:#443d4d;font-size:10px; }.font-option small { display:block;color:#8e8895;font-size:9px;line-height:1.45;margin-top:4px; }
@media (max-width:1060px) { .app-shell { grid-template-columns:226px minmax(430px,1fr); }.context-panel { position:fixed;top:0;right:0;bottom:0;width:310px;box-shadow:-20px 0 40px rgba(75,66,92,.11); }.context-panel.closed { transform:translateX(103%);opacity:0;pointer-events:none; }.close-context { display:block; }.conversation-header { padding:0 22px; } }
@media (max-width:720px) { body { overflow:hidden; }.app-shell { display:block;min-height:100dvh; }.sidebar { position:fixed;left:0;top:0;bottom:0;width:min(82vw,324px);transform:translateX(-105%);box-shadow:18px 0 42px rgba(62,54,76,.16);transition:transform .45s cubic-bezier(.25,.8,.25,1); }.app-shell.sidebar-open .sidebar { transform:none; }.drawer-scrim { position:fixed;inset:0;z-index:2;border:0;background:rgba(45,40,56,.19);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.3s;display:block; }.app-shell.sidebar-open .drawer-scrim { opacity:1;pointer-events:auto; }.conversation { min-height:100dvh;background:transparent; }.conversation-header { height:69px;padding:0 16px;border-bottom-color:rgba(255,255,255,.85); }.menu-button { display:block; }.person { gap:9px; }.person .avatar { width:34px;height:34px; }.header-actions .icon-button:last-child { display:none; }.message-area { padding:25px 17px 18px; }.arrival { min-height:390px;justify-content:center; }.arrival-orb { width:150px;height:150px;right:-52px;top:5px; }.arrival h1 { font-size:clamp(33px,9.6vw,47px);line-height:1.22; }.arrival-copy { margin-top:14px; }.starter-grid { grid-template-columns:1fr 1fr;gap:8px;margin-top:32px; }.starter-card { min-height:78px;padding:13px; }.starter-card:last-child { grid-column:span 2; }.composer-wrap { padding:0 12px 14px; }.memory-notice { padding-left:4px; }.composer { border-radius:17px; }.composer-caption { display:none; }.context-panel { display:block;width:min(88vw,360px);padding:23px 19px; }.bubble { max-width:87%; }.profile { padding-bottom:8px; } }

.message > div { min-width: 0; max-width: 80%; display: flex; flex-direction: column; align-items: flex-start; }
.message.user > div { align-items: flex-end; }
.bubble { display: inline-block; width: fit-content; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width:720px) { .message > div { max-width: 87%; } }
@media (display-mode: standalone) and (max-width:720px) {
  .conversation-header { height: calc(69px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .composer-wrap { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}


@media (max-width:720px) {
  html, body { height: 100%; min-height: 100%; }
  body { min-height: 100vh; min-height: -webkit-fill-available; background-attachment: fixed; }
  .app-shell { height: 100vh; min-height: -webkit-fill-available; background: transparent; }
  .conversation { height: 100%; min-height: 100%; background: transparent; }
}
@media (display-mode: standalone) and (max-width:720px) {
  .conversation-header { box-sizing: content-box; height: 69px; padding: max(48px, calc(env(safe-area-inset-top) + 8px)) 16px 10px; }
  .composer-wrap { padding-bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px)); }
}
@media (max-width:720px) {
  .conversation-header { box-sizing: content-box; height: 69px; padding: max(48px, calc(env(safe-area-inset-top) + 8px)) 16px 10px; }
  .composer-wrap { padding-bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px)); }
}
@media (max-width:720px) {
  .sidebar { padding: max(48px, calc(env(safe-area-inset-top) + 8px)) 14px 17px; }
  .context-panel { padding: max(48px, calc(env(safe-area-inset-top) + 8px)) 19px 23px; }
}
.composer { width: 90%; border-radius: 999px; }
@media (max-width:720px) { .composer { width: 90%; border-radius: 999px; } }
html, body, .app-shell, .conversation, .message-area { width: 100%; max-width: 100%; overflow-x: clip; overscroll-behavior-x: none; }
@media (max-width:720px) { .arrival { overflow: hidden; } }

@media (max-width: 720px) {
  .conversation-header {
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .message-area {
    min-height: 0;
    background: transparent;
  }

  .composer-wrap {
    flex: 0 0 auto;
  }

  .arrival {
    display: none;
  }
}

.app-shell,
.app-shell * {
  font-size: 18px !important;
}

@media (max-width: 720px) {
  .conversation {
    height: 100dvh;
    min-height: 100dvh;
  }

  .composer-wrap {
    position: fixed;
    z-index: 12;
    right: 0;
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 0;
    padding: 0 12px;
    background: linear-gradient(0deg, rgba(244, 243, 248, 0.94) 78%, transparent);
  }

  .message-area {
    padding-bottom: 184px;
  }
}