:root {
  color-scheme: light;
  --paper: #fff9f7;
  --paper-deep: #f8eefa;
  --ink: #463d55;
  --muted: #95889f;
  --line: rgba(113, 91, 131, 0.12);
  --coral: #f08e9d;
  --coral-soft: #ffe1e7;
  --lavender: #a98bd4;
  --lavender-soft: #eee5fb;
  --butter: #ffe6a7;
  --sage: #87a88e;
  --white: #fffefe;
  font-family: Inter, ui-rounded, "SF Pro Rounded", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, textarea, input { font: inherit; }
button { color: inherit; }

.shell { min-height: 100dvh; display: grid; grid-template-columns: 260px 1fr; }
.rail { min-height: 100dvh; padding: 24px 18px 18px; background: linear-gradient(180deg,#fff8fc 0%,#f9f1ff 52%,#fff9f4 100%); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.brand { display: flex; gap: 11px; align-items: center; padding: 0 8px; color: inherit; text-decoration: none; font-size: 18px; letter-spacing: -.02em; }
.brand > span { width: 36px; height: 36px; border-radius: 13px 13px 13px 5px; display: grid; place-items: center; color: var(--white); background: linear-gradient(145deg,var(--coral),#d68ed0); font-family: Georgia, serif; font-style: italic; box-shadow:0 7px 18px rgba(223,124,150,.22); }
.brand em{padding:3px 6px;border-radius:999px;background:var(--lavender-soft);color:#8f73b2;font-size:8px;font-style:normal;text-transform:uppercase}
.character-card{position:relative;margin:26px 0 12px;padding:14px;display:flex;align-items:center;gap:11px;border:1px solid rgba(174,142,211,.18);border-radius:18px;background:rgba(255,255,255,.72);box-shadow:0 10px 28px rgba(126,90,150,.07)}
.character-avatar{width:48px!important;height:48px!important}.character-card>div:nth-child(2){min-width:0;display:grid;gap:2px}.character-card small{color:var(--muted);font-size:9px}.character-card b{font-family:Georgia,"Songti SC",serif;font-size:17px}.character-card div span{color:#9b8ca3;font-size:9px}.character-card div span i{display:inline-block;width:5px;height:5px;margin-right:4px;border-radius:50%;background:#89b695}.character-card button{margin-left:auto;border:0;background:none;color:var(--muted);cursor:pointer}
.new-chat { margin: 0 0 22px; width: 100%; border: 0; border-radius: 15px; padding: 12px 14px; background: linear-gradient(135deg,#9c7bc8,#e58da9); color: var(--white); text-align: left; cursor: pointer; box-shadow:0 9px 22px rgba(174,124,191,.22); }
.new-chat span { margin-right: 7px; color: #fff; }
.threads { display: grid; gap: 5px; }
.threads p { padding: 0 10px; margin: 0 0 6px; color: var(--muted); font-size: 12px; }
.threads a { padding: 9px 10px; border-radius: 11px; color: #6f6478; text-decoration: none; font-size: 13px; overflow: hidden; display:flex;align-items:center;gap:8px;white-space: nowrap; }
.threads a>span:last-child{overflow:hidden;text-overflow:ellipsis}.thread-dot{width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;border-radius:8px 8px 8px 3px;background:color-mix(in srgb,var(--dot) 22%,white);color:var(--dot);font:10px Georgia,serif}
.threads a.active { background: rgba(255,255,255,.78); color: var(--ink); font-weight: 600; box-shadow:0 5px 16px rgba(111,80,136,.06); }
.profile-card { margin-top: auto; border: 0; border-top: 1px solid var(--line); background: none; padding: 17px 6px 0; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; }
.profile-card > span:nth-child(2) { display: grid; gap: 2px; }
.profile-card small { color: var(--muted); }
.profile-card .more { margin-left: auto; color: var(--muted); letter-spacing: 2px; }

.chat { position:relative;isolation:isolate;min-width: 0; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background: radial-gradient(circle at 84% 12%, rgba(226,207,250,.58), transparent 28%),radial-gradient(circle at 20% 92%,rgba(255,220,226,.55),transparent 32%),var(--paper); }
.chat::before,.chat::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(1px);pointer-events:none}.chat::before{width:120px;height:120px;right:6%;top:18%;background:rgba(255,231,171,.22)}.chat::after{width:74px;height:74px;left:8%;bottom:18%;background:rgba(202,181,237,.2)}
.topbar { height: 84px; padding: 0 30px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; background: rgba(255,250,251,.72); backdrop-filter: blur(18px); }
.kiyo-id { display: flex; align-items: center; gap: 12px; }
.kiyo-id > span:last-child { display: grid; gap: 3px; }
.kiyo-id small { color: var(--muted); font-size: 12px; }
.kiyo-id i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #6f9878; }
.avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #dfd1c3; color: #715f50; font-family: Georgia, "Songti SC", serif; }
.avatar.kiyo { color: #8a659e; background: linear-gradient(145deg, #fae0ec, #dfd0f5); box-shadow: inset 0 0 0 1px rgba(140,98,166,.1),0 6px 16px rgba(143,99,165,.12); }
.avatar.small { width: 34px; height: 34px; font-size: 13px; }
.day-chip{margin-left:auto;padding:8px 11px;display:grid;grid-template-columns:auto auto;gap:0 6px;align-items:center;border:1px solid rgba(238,190,92,.18);border-radius:13px;background:rgba(255,250,231,.72)}.day-chip>span{grid-row:1/3;color:#eab84f}.day-chip small{color:#ad9c7c;font-size:8px}.day-chip b{font-size:11px}
.relationship { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid rgba(232,143,164,.18); border-radius: 14px; background: rgba(255,247,250,.78); }
.relationship.bloom { animation: relationship-bloom .9s ease both; }
@keyframes relationship-bloom { 0%{transform:scale(1)} 35%{transform:scale(1.08);box-shadow:0 0 0 8px rgba(237,139,166,.12)} 100%{transform:scale(1);box-shadow:none} }
.relationship > span { color: var(--coral); font-size: 17px; }
.relationship div { display: grid; grid-template-columns: auto auto; gap: 1px 8px; align-items: baseline; }
.relationship small { color: var(--muted); font-size: 10px; }
.relationship b { grid-row: 1; grid-column: 2; font-size: 15px; color: #d56f83; }.relationship em{grid-column:1/3;width:72px;height:4px;overflow:hidden;border-radius:99px;background:#f5dce5}.relationship em i{display:block;width:10%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f5a0ad,#b68dd8);transition:width .3s}
.icon-button, .mobile-menu { border: 0; background: transparent; font-size: 22px; cursor: pointer; }
.mobile-menu { display: none; }
.mobile-scrim { display:none; }

.messages { width: min(790px, calc(100% - 48px)); margin: 0 auto; padding: 42px 0 30px; overflow: auto; }
.date-pill { width: max-content; margin: 0 auto 34px; padding: 6px 10px; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.5); font-size: 11px; }
.message { display: flex; gap: 12px; margin: 0 0 25px; align-items: flex-start; }
.message > div { max-width: 72%; }
.message p { margin: 0; padding: 13px 16px; border-radius: 8px 20px 20px 20px; line-height: 1.7; font-size: 15px; background: rgba(255,255,255,.92); box-shadow: 0 8px 25px rgba(92,65,111,.07); }
.message-image { display:block; width:min(320px,100%); max-height:360px; margin-bottom:7px; object-fit:cover; border-radius:15px; }
.message time { display: block; margin: 6px 5px 0; color: #a69e95; font-size: 10px; }
.user-message { justify-content: flex-end; }
.user-message p { color: #fff; background: linear-gradient(135deg,#a484cf,#e88fa8); border-radius: 20px 8px 20px 20px; box-shadow:0 8px 22px rgba(176,123,191,.18); }
.user-message time { text-align: right; }
.mood-note { width: max-content; margin: 7px 0 0 8px; padding: 5px 9px; border-radius: 999px; color: #b66d8e; background: rgba(248,220,236,.76); font-size: 10px; }
.mood-note.milestone { color:#8b559f; background:linear-gradient(135deg,#ffe3ee,#eee0ff); box-shadow:0 5px 15px rgba(169,139,212,.14); font-weight:650; }
.mood-note.down { color:#8c6673; background:rgba(226,218,226,.82); }

.composer-wrap { width: min(790px, calc(100% - 48px)); margin: 0 auto; padding: 0 0 24px; }
.event-card { margin-bottom: 12px; padding: 10px 13px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(201,111,97,.17); border-radius: 14px; background: rgba(255,253,249,.8); }
.event-card > span { color: var(--coral); }
.event-card div { display: grid; gap: 2px; }
.event-card b { font-size: 12px; }
.event-card small { color: var(--muted); font-size: 11px; }
.event-card button { margin-left: auto; border: 0; border-radius: 9px; padding: 7px 10px; background: var(--coral-soft); color: #9d584e; cursor: pointer; font-size: 11px; }
.composer { min-height: 58px; padding: 9px 10px 9px 14px; display: flex; align-items: flex-end; gap: 10px; border: 1px solid rgba(67,58,49,.14); border-radius: 19px; background: var(--white); box-shadow: 0 13px 35px rgba(65,50,38,.08); }
.composer button { width: 38px; height: 38px; flex: 0 0 auto; border: 0; border-radius: 12px; background: var(--paper-deep); cursor: pointer; }
.composer .send { color: #fff; background: var(--coral); font-size: 20px; }
.composer textarea { width: 100%; min-height: 38px; max-height: 130px; padding: 9px 2px; resize: none; border: 0; outline: 0; background: transparent; color: var(--ink); }
.composer textarea::placeholder { color: #aaa097; }
.hint { margin: 8px 0 0; text-align: center; color: #aaa097; font-size: 10px; }

@media (max-width: 760px) {
  .shell { display: block; }
  .rail { display: none; }
  .topbar { height: 70px; padding: 0 16px; }
  .mobile-menu { display: block; font-size: 18px; }
  .relationship div small { display: none; }
  .relationship { padding: 5px 9px; }
  .messages, .composer-wrap { width: calc(100% - 28px); }
  .messages { padding-top: 26px; }
  .message > div { max-width: 82%; }
  .event-card small { max-width: 190px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

[hidden] { display: none !important; }
.auth-page { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--paper); }
.auth-art { position: relative; overflow: hidden; padding: clamp(34px,6vw,84px); display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 14% 86%,rgba(255,233,172,.42),transparent 28%),linear-gradient(145deg,#a887d1,#e78fa7); color: #fffafc; }
.auth-art::before { content:""; position:absolute; width:420px; height:420px; right:-80px; top:-100px; border:1px dashed rgba(255,255,255,.2); border-radius:48% 52% 58% 42%; transform:rotate(18deg); }
.auth-art .brand { position:absolute; left:clamp(34px,6vw,84px); top:42px; padding:0; }
.brand.large > span { background:#fffaf6; color:var(--coral); }
.auth-art h1 { position:relative; z-index:1; margin:0; font-family:Georgia,"Songti SC",serif; font-size:clamp(42px,6vw,72px); font-weight:400; line-height:1.18; letter-spacing:-.05em; }
.auth-art > p { position:relative; max-width:460px; margin:24px 0; color:rgba(255,255,255,.72); font-size:15px; line-height:1.8; }
.auth-spark{position:absolute;color:rgba(255,255,255,.7)}.auth-spark.one{right:18%;top:20%;font-size:24px}.auth-spark.two{right:9%;bottom:22%;font-size:34px}
.auth-companion{position:relative;z-index:2;width:max-content;margin:0 0 26px;padding:11px 14px;display:flex;align-items:center;gap:11px;border:1px solid rgba(255,255,255,.22);border-radius:18px;background:rgba(255,255,255,.16);box-shadow:0 14px 38px rgba(91,64,116,.12);backdrop-filter:blur(12px)}.auth-companion>div{display:grid;gap:2px}.auth-companion small{color:rgba(255,255,255,.7);font-size:8px}.auth-companion b{font:500 18px Georgia,serif}.auth-companion em{font-size:9px;font-style:normal;color:rgba(255,255,255,.76)}.auth-companion em i{display:inline-block;width:5px;height:5px;margin-right:4px;border-radius:50%;background:#c8f0c8}.auth-companion>span:last-child{margin-left:8px;color:#ffe9a8}
.quote { position:absolute; left:clamp(34px,6vw,84px); bottom:48px; color:rgba(255,255,255,.7); font-family:Georgia,"Songti SC",serif; font-size:14px; }
.auth-panel { display:grid; place-items:center; padding:36px; }
.auth-card { width:min(390px,100%); display:grid; gap:17px; }
.eyebrow { margin:0; color:var(--coral); font-size:10px; font-weight:800; letter-spacing:.18em; }
.auth-card h2,.settings-drawer h2 { margin:0; font-family:Georgia,"Songti SC",serif; font-size:32px; font-weight:500; }
.auth-card .sub { margin:-8px 0 8px; color:var(--muted); font-size:13px; }
label { display:grid; gap:7px; color:#5b534c; font-size:12px; }
input,select { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; outline:0; background:var(--white); color:var(--ink); }
input:focus,select:focus { border-color:rgba(201,111,97,.62); box-shadow:0 0 0 3px rgba(201,111,97,.08); }
.primary { min-height:46px; border:0; border-radius:12px; background:var(--ink); color:#fff; cursor:pointer; font-weight:650; }
.link-button,.danger-link { border:0; background:none; color:var(--coral); cursor:pointer; font-size:12px; }
.danger-link { color:#9b5a53; margin-top:4px; }
.form-error { min-height:15px; margin:0; color:#b44f45; font-size:11px; }
.empty-chat { align-self:center; justify-self:center; width:min(620px,100%);margin:auto;padding:44px 30px;text-align:center; }
.hero-orbit{position:relative;width:108px;height:108px;margin:0 auto 14px;display:grid;place-items:center;border:1px dashed rgba(176,141,210,.34);border-radius:50%;background:rgba(255,255,255,.35)}.hero-orbit>span:first-child{position:absolute;left:-3px;top:14px;color:#e8b95d}.hero-orbit>i{position:absolute;right:-3px;bottom:15px;color:#ec93a6;font-style:normal}.hero-avatar { width:80px; height:80px; margin:0; font-size:29px; }
.hello-pill{width:max-content!important;margin:0 auto 12px!important;padding:5px 10px;border-radius:999px;background:var(--lavender-soft);color:#8b72ac!important;font-size:10px!important}
.empty-chat h2 { margin:0 0 10px; font-family:Georgia,"Songti SC",serif; font-size:32px; font-weight:500;letter-spacing:-.02em }
.empty-chat>p { margin:0 auto 22px; color:var(--muted); font-size:13px;line-height:1.7 }
.prompt-chips{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:22px}.prompt-chips button{padding:8px 11px;border:1px solid rgba(169,139,212,.18);border-radius:999px;background:rgba(255,255,255,.62);color:#756982;cursor:pointer;font-size:10px}.prompt-chips button:hover{background:var(--lavender-soft);transform:translateY(-1px)}
.empty-chat .start-button { padding:11px 17px;border:0;border-radius:13px;background:linear-gradient(135deg,#9877c4,#e28ca6);color:#fff;box-shadow:0 9px 22px rgba(172,122,188,.2);cursor:pointer}.start-button span{margin-left:8px}
.overlay { position:fixed; z-index:20; inset:0; display:flex; justify-content:flex-end; background:rgba(43,37,33,.28); backdrop-filter:blur(4px); }
.settings-drawer { width:min(460px,100%); height:100%; padding:30px; overflow:auto; background:var(--paper); box-shadow:-12px 0 40px rgba(39,31,26,.12); }
.settings-drawer header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:28px; }
.settings-drawer header div { display:grid; gap:8px; }
.close { width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:var(--white); cursor:pointer; font-size:20px; }
.settings-drawer form,.settings-drawer section { display:grid; gap:14px; }
.settings-drawer section { padding:18px 0 22px; border-top:1px solid var(--line); }
.settings-drawer h3 { margin:0 0 4px; font-size:13px; }
.settings-drawer section{margin-bottom:10px;padding:19px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.58)}
.switch-row { min-height:50px; grid-template-columns:1fr auto; align-items:center; }
.switch-row span { display:grid; gap:3px; }
.switch-row small { color:var(--muted); }
.switch-row input { width:42px; min-height:23px; accent-color:var(--coral); }
.token-note{padding:12px;display:flex;gap:10px;border-radius:13px;background:linear-gradient(135deg,#fff5d8,#f3eaff)}.token-note>span{font-size:18px}.token-note div{display:grid;gap:3px}.token-note b{font-size:11px}.token-note small{color:#8f8298;font-size:9px;line-height:1.5}
.identity-note{padding:12px;display:flex;gap:10px;border-radius:13px;background:linear-gradient(135deg,#ffeef2,#f2eafe)}.identity-note>span{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:rgba(255,255,255,.7);color:#bd7294}.identity-note div{display:grid;gap:3px}.identity-note b{font-size:11px}.identity-note small{color:#8f8298;font-size:9px;line-height:1.5}
.background-picker{display:grid;grid-template-columns:104px 1fr;gap:13px;align-items:center}.background-preview{width:104px;height:76px;display:grid;place-items:center;overflow:hidden;border:1px dashed rgba(169,139,212,.38);border-radius:14px;background:linear-gradient(135deg,#fff1f5,#eee5fb);color:#c185a4}.background-preview img{width:100%;height:100%;object-fit:cover}.background-picker>div:last-child{display:grid;grid-template-columns:1fr auto;gap:6px}.background-picker small{grid-column:1/3;color:var(--muted);font-size:9px}.soft-button,.quiet-button{min-height:36px;padding:8px 11px;border:1px solid rgba(169,139,212,.2);border-radius:10px;background:var(--lavender-soft);color:#765d98;cursor:pointer;font-size:10px}.quiet-button{background:transparent;color:var(--muted)}.soft-button:disabled{opacity:.55;cursor:wait}
.model-picker{display:grid;grid-template-columns:1fr auto;gap:7px}.model-picker .soft-button{white-space:nowrap}.model-status{color:var(--muted);font-size:9px;line-height:1.5}
.memory-note{padding:12px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;border-radius:13px;background:linear-gradient(135deg,#edf8f1,#f1eafd)}.memory-note>span{font-size:18px}.memory-note div{display:grid;gap:3px}.memory-note b{font-size:11px}.memory-note small{color:#7e7887;font-size:9px;line-height:1.45}.memory-note button{align-self:center}
.memory-drawer{width:min(560px,100%)}.memory-drawer textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:11px;resize:vertical;background:#fff;color:var(--ink);font:inherit;line-height:1.55}.memory-location{grid-template-columns:auto 1fr!important;align-items:center;background:linear-gradient(135deg,#f0f8f3,#f1ebfb)!important}.memory-location>span{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:#fff;color:#6f9279}.memory-location div{display:grid;gap:3px}.memory-location small,.memory-help,.memory-tools p{color:var(--muted);font-size:9px;line-height:1.55}.memory-privacy{padding:14px 16px;border:1px solid rgba(105,151,119,.16);border-radius:15px;background:#f5faf6}.memory-privacy b{font-size:11px;color:#587862}.memory-privacy p{margin:5px 0 0;color:#758078;font-size:9px;line-height:1.65}.memory-drawer #memoryUnlocked{display:grid;gap:0}.memory-drawer #memoryUnlocked[hidden]{display:none}.memory-drawer #memoryForm{padding-top:4px}.memory-list-header{margin:0!important}.memory-list-header small{color:var(--muted);font-size:9px}.memory-list{display:grid;gap:8px}.memory-item{padding:11px 12px;display:grid;grid-template-columns:1fr auto;gap:7px;border:1px solid var(--line);border-radius:13px;background:#fff}.memory-item p{grid-column:1/2;margin:0;font-size:11px;line-height:1.55}.memory-item small{grid-column:1/2;color:var(--muted);font-size:8px}.memory-item button{grid-column:2;grid-row:1/3;width:30px;height:30px;align-self:center;border:0;border-radius:50%;background:#f5eef2;color:#a06c82;cursor:pointer}.memory-empty{padding:22px;text-align:center;color:var(--muted);font-size:10px;border:1px dashed var(--line);border-radius:13px}.memory-tools>div{display:flex;gap:7px;flex-wrap:wrap}.memory-tools .danger-link{width:max-content;padding:7px 0}
.character-popover{position:fixed;z-index:30;left:274px;top:78px;width:min(340px,calc(100% - 30px));padding:20px;border:1px solid rgba(169,139,212,.2);border-radius:20px;background:rgba(255,252,255,.96);box-shadow:0 22px 65px rgba(90,62,111,.18);backdrop-filter:blur(18px)}.character-popover header{display:flex;justify-content:space-between;align-items:start;margin-bottom:15px}.character-popover h3{margin:5px 0 0;font:500 22px Georgia,"Songti SC",serif}.character-popover header button{width:30px;height:30px;border:0;border-radius:50%;background:var(--paper-deep);cursor:pointer}.character-popover #characterList{display:grid;gap:8px}.character-option,.coming-character{padding:12px;display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:15px;background:#fff;cursor:pointer}.character-option.active{border-color:rgba(231,143,167,.32);background:#fff6fa}.character-option>div{display:grid;gap:3px}.character-option small,.coming-character small{color:var(--muted);font-size:9px}.character-option>em{margin-left:auto;color:var(--coral);font-style:normal}.coming-character{margin-top:8px;border-style:dashed;background:var(--lavender-soft);cursor:default}.coming-character>span{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.7);color:#9b7abe}.coming-character div{display:grid;gap:3px}
.event-message { max-width:560px; margin:20px auto; padding:13px 16px; display:flex; gap:11px; border:1px dashed rgba(169,139,212,.28); border-radius:17px; background:linear-gradient(135deg,rgba(255,249,227,.9),rgba(247,235,255,.9));box-shadow:0 8px 24px rgba(119,89,139,.06) }
.event-message > span { color:#e9b951; }.event-message b{font-size:11px;color:#7d668d}.event-message p{margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.typing { width:max-content; margin:0 0 24px 54px; padding:13px 16px; border-radius:8px 18px 18px 18px; background:var(--white); }
.typing i { display:inline-block; width:5px; height:5px; margin:0 2px; border-radius:50%; background:#aaa097; animation:bounce 1s infinite alternate; }.typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s}@keyframes bounce{to{transform:translateY(-5px);opacity:.45}}
.image-preview { position:relative; width:max-content; margin:0 0 8px; }.image-preview img{width:84px;height:84px;object-fit:cover;border-radius:13px;border:2px solid var(--white);box-shadow:0 5px 20px rgba(45,38,32,.12)}.image-preview button{position:absolute;right:-6px;top:-6px;width:24px;height:24px;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer}
.toast { position:fixed; z-index:50; left:50%; bottom:28px; transform:translateX(-50%); padding:10px 14px; border-radius:10px; background:var(--ink); color:#fff; font-size:12px; box-shadow:0 9px 28px rgba(0,0,0,.18); }
.has-image { background-size:cover !important; background-position:center !important; }
body[data-background="dusk"] .chat { background:radial-gradient(circle at 80% 0,rgba(225,155,137,.32),transparent 36%),#f4eae5; }
body[data-background="forest"] .chat { background:radial-gradient(circle at 70% 10%,rgba(139,158,141,.25),transparent 36%),#eef0ea; }
body[data-background="night"] .chat { background:radial-gradient(circle at 70% 0,rgba(85,81,117,.28),transparent 40%),#292932;color:#eee9e3; }body[data-background="night"] .topbar{background:rgba(41,41,50,.78)}
body[data-background="custom"] .chat { background:linear-gradient(rgba(255,249,251,.32),rgba(255,249,251,.4)),var(--custom-chat-bg),var(--paper);background-size:cover;background-position:center;background-attachment:fixed; }
@media(max-width:760px){.auth-page{display:block}.auth-art{min-height:330px;padding:100px 28px 38px}.auth-art .brand{left:28px;top:28px}.auth-art h1{font-size:38px}.auth-art>p,.quote{display:none}.auth-companion{margin-bottom:20px}.auth-panel{padding:42px 24px}.mobile-scrim:not([hidden]){display:block;position:fixed;z-index:14;inset:0;border:0;background:rgba(49,38,57,.32);backdrop-filter:blur(2px)}.rail.mobile-open{display:flex;position:fixed;z-index:15;inset:0 20% 0 0;box-shadow:18px 0 48px rgba(56,42,68,.2)}.settings-drawer{padding:20px}.relationship>span{font-size:16px}.day-chip{display:none}.character-popover{left:15px;top:85px}}