:root { color-scheme: dark; font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; background: #090a10; color: #f5f1ff; }
* { box-sizing: border-box; }
body { min-height: 100dvh; margin: 0; background: radial-gradient(75rem 48rem at 50% -14rem, #38224f 0%, #11111d 47%, #090a10 76%); }
.shell { width: min(46rem, calc(100% - 2rem)); min-height: 100dvh; margin: auto; display: flex; flex-direction: column; }
header { height: 5.2rem; display: flex; align-items: center; gap: .62rem; padding: 0 .35rem; }
h1 { margin: 0; font-size: 1rem; font-weight: 590; letter-spacing: .04em; }
.orb { width: .68rem; height: .68rem; border-radius: 50%; background: #e8baff; box-shadow: 0 0 1.2rem #cd83ff, 0 0 .2rem .08rem #fff; }
header button { margin-left: auto; border: 0; color: #a7a2b1; background: transparent; cursor: pointer; font: inherit; padding: .5rem; }
header button:hover { color: #f5f1ff; }
.thread { flex: 1; overflow-y: auto; padding: 3.2rem .4rem 2rem; display: flex; flex-direction: column; gap: .9rem; scroll-behavior: smooth; }
.message { display: flex; max-width: 84%; animation: arrive .24s ease-out both; }
.message p { margin: 0; white-space: pre-wrap; line-height: 1.72; font-size: 1rem; padding: .78rem 1rem; border-radius: 1.15rem; }
.message.lydia { align-self: flex-start; }.message.lydia p { background: rgba(255,255,255,.075); border-top-left-radius: .28rem; color: #f3edf9; }
.message.user { align-self: flex-end; }.message.user p { background: #dac5f6; color: #211928; border-top-right-radius: .28rem; }
form { position: sticky; bottom: 0; display: flex; align-items: flex-end; gap: .6rem; padding: 1rem .35rem 1.25rem; background: linear-gradient(transparent, #090a10 24%); }
textarea { width: 100%; max-height: 10rem; resize: none; border: 1px solid rgba(255,255,255,.12); outline: 0; border-radius: 1.25rem; padding: .78rem 1rem; background: rgba(255,255,255,.07); color: inherit; font: inherit; line-height: 1.45; }
textarea:focus { border-color: rgba(230,180,255,.7); box-shadow: 0 0 0 .22rem rgba(190,123,241,.12); }
form button { min-width: 3.75rem; border: 0; cursor: pointer; border-radius: 1.1rem; padding: .78rem .8rem; background: #ead7ff; color: #20172a; font: inherit; font-weight: 650; }
form button:disabled { cursor: wait; opacity: .55; }
.notice { min-height: 1.2rem; margin: 0 1rem .7rem; color: #dba8a8; font-size: .82rem; }
@keyframes arrive { from { transform: translateY(.3rem); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 540px) { .shell { width: min(100% - 1.15rem, 46rem); }.thread { padding-top: 1.4rem; }.message { max-width: 90%; } }