:root {
  --sky: #f7eaf0;
  --panel: rgba(255,255,255,.92);
  --ink: #3f3038;
  --muted: #9b818d;
  --line: rgba(111,65,84,.11);
  --accent: #d78ca9;
  --accent-deep: #b85f83;
  --incoming: rgba(255,255,255,.96);
  --outgoing: #f8dce8;
  --shadow: 0 18px 55px rgba(103,55,75,.15);
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { color: var(--ink); background: #f0dde5; font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.chat-shell { height: 100dvh; }
.login-view { min-height: 100%; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 8%, #fff 0, transparent 33%), linear-gradient(145deg,#f2dbe5,#fbf3f6); }
.login-card { width: min(100%, 390px); padding: 38px 30px 32px; text-align: center; border: 1px solid rgba(255,255,255,.7); border-radius: 30px; background: rgba(255,255,255,.74); box-shadow: var(--shadow); backdrop-filter: blur(22px); }
.login-avatar { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: 50%; background: linear-gradient(145deg,#e5a1bb,#b85f83); color: white; font-size: 27px; box-shadow: 0 12px 26px rgba(184,95,131,.26); }
.login-card h1 { margin: 0 0 8px; font-size: 24px; font-weight: 650; }
.login-card > p { margin: 0 0 24px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.login-card form { display: grid; gap: 10px; }
.login-card input { min-height: 50px; padding: 0 16px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: rgba(255,255,255,.82); outline: none; }
.login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(215,140,169,.14); }
.login-card button, .save-settings { min-height: 50px; border: 0; border-radius: 15px; background: var(--accent-deep); color: #fff; cursor: pointer; font-weight: 650; }
.form-status { min-height: 20px; color: #b45e66 !important; font-size: 12px !important; margin: 10px 0 0 !important; }

.chat-app { height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; max-width: 900px; margin: auto; background: #fbf7f9; box-shadow: 0 0 70px rgba(93,49,68,.15); }
.chat-header { position: relative; z-index: 10; min-height: 72px; display: flex; align-items: center; gap: 11px; padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(20px); }
.round-button { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--accent-deep); background: transparent; text-decoration: none; cursor: pointer; font-size: 28px; line-height: 1; }
.round-button:hover { background: rgba(215,140,169,.11); }
.avatar { position: relative; overflow: hidden; flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#e4a0ba,#b96184); font-weight: 700; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.header-copy { min-width: 0; flex: 1; }
.header-copy h1 { margin: 0; font-size: 16px; font-weight: 680; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-copy p { display: flex; align-items: center; gap: 5px; margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: #62b888; box-shadow: 0 0 0 3px rgba(98,184,136,.12); }

.message-stage { position: relative; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: #f5e9ee; }
.message-wallpaper { position: fixed; z-index: 0; inset: 72px max(0px, calc((100vw - 900px)/2)) 76px; background: radial-gradient(circle at 15px 15px, rgba(177,92,126,.07) 2px, transparent 2.5px) 0 0/30px 30px, linear-gradient(160deg,#fbf4f7,#f1e2e9); background-size: cover; background-position: center; }
.message-wallpaper::after { content: ""; position: absolute; inset: 0; background: rgba(247,235,240,var(--wallpaper-wash,.25)); }
.message-list { position: relative; z-index: 1; width: min(100%, 760px); min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; margin: 0 auto; padding: 28px 18px 22px; }
.empty-chat { align-self: center; max-width: 320px; margin: auto; padding: 12px 18px; border-radius: 18px; color: #657784; background: rgba(255,255,255,.75); backdrop-filter: blur(10px); text-align: center; font-size: 13px; line-height: 1.65; box-shadow: 0 8px 24px rgba(34,59,76,.08); }
.message-row { display: flex; align-items: flex-end; gap: 8px; max-width: 82%; animation: messageIn .18s ease both; }
.message-row.user { align-self: flex-end; flex-direction: row-reverse; }
.message-row.assistant { align-self: flex-start; }
.message-row .avatar { width: 30px; height: 30px; font-size: 11px; margin-bottom: 2px; }
.message-bubble { min-width: 72px; padding: 9px 12px 7px; border-radius: 18px; background: var(--incoming); box-shadow: 0 2px 9px rgba(40,65,83,.08); line-height: 1.5; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-media { display: block; max-width: min(330px, 62vw); margin: 0 0 7px; border-radius: 13px; }
img.message-media { max-height: 420px; object-fit: cover; cursor: zoom-in; }
audio.message-media { width: min(280px, 60vw); height: 38px; }
.user .message-bubble { background: var(--outgoing); border-bottom-right-radius: 5px; }
.assistant .message-bubble { border-bottom-left-radius: 5px; }
.message-time { display: block; margin-top: 3px; color: #94a2ab; font-size: 9px; text-align: right; }
.typing-row { animation-duration: .25s; }
.typing-bubble { min-width: 58px; height: 38px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px 13px; }
.typing-bubble span { width: 6px; height: 6px; border-radius: 50%; background: #c08aa0; animation: typingDot 1.15s infinite ease-in-out; }
.typing-bubble span:nth-child(2) { animation-delay: .15s; }
.typing-bubble span:nth-child(3) { animation-delay: .3s; }
@keyframes messageIn { from { opacity: 0; transform: translateY(5px) scale(.98); } }
@keyframes typingDot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.composer { position: relative; z-index: 10; min-height: 70px; display: flex; align-items: flex-end; gap: 8px; padding: 10px max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(20px); }
.composer textarea { flex: 1; max-height: 130px; min-height: 46px; resize: none; padding: 12px 16px; border: 1px solid var(--line); border-radius: 23px; color: var(--ink); background: #fff; line-height: 1.45; outline: none; }
.composer textarea:focus { border-color: rgba(184,95,131,.55); }
.composer-button { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--accent-deep); background: rgba(215,140,169,.12); cursor: pointer; font-size: 24px; user-select: none; list-style: none; }
.composer-button::-webkit-details-marker { display: none; }
.media-picker { position: relative; flex: 0 0 auto; }
.media-picker[open] .composer-button { background: rgba(215,140,169,.25); }
.media-menu { position: absolute; left: 0; bottom: 52px; width: 112px; padding: 7px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.98); box-shadow: 0 12px 32px rgba(83,45,62,.18); }
.media-menu label { display: block; padding: 10px 12px; border-radius: 10px; cursor: pointer; font-size: 13px; }
.media-menu label:hover { background: #f9edf2; }
.media-menu input { display: none; }
.mic-button { font-size: 14px; color: #c1698b; }
.mic-button.recording { color: #fff; background: #d85a6b; animation: recordingPulse 1.1s infinite; }
.recording-text { position: absolute; right: 76px; bottom: calc(100% + 5px); padding: 5px 9px; border-radius: 10px; color: #a24c6e; background: rgba(255,255,255,.94); box-shadow: 0 4px 14px rgba(83,45,62,.1); font-size: 11px; }
.recording-text:empty { display: none; }
.send-button { flex: 0 0 auto; width: 46px; height: 46px; border: 0; border-radius: 50%; color: #fff; background: var(--accent-deep); cursor: pointer; font-size: 19px; padding: 0 2px 1px 0; box-shadow: 0 7px 18px rgba(184,95,131,.24); }
.send-button:disabled { opacity: .45; }
@keyframes recordingPulse { 50% { transform: scale(.92); box-shadow: 0 0 0 7px rgba(216,90,107,.12); } }

.settings-backdrop { position: fixed; z-index: 30; inset: 0; opacity: 0; pointer-events: none; background: rgba(66,37,50,.30); transition: opacity .22s; }
.settings-backdrop.visible { opacity: 1; pointer-events: auto; }
.settings-sheet { position: fixed; z-index: 40; top: 0; right: 0; width: min(92vw, 410px); height: 100dvh; overflow-y: auto; padding: max(26px, env(safe-area-inset-top)) 22px max(26px, env(safe-area-inset-bottom)); border-left: 1px solid var(--line); background: #fcf8fa; box-shadow: -18px 0 60px rgba(83,45,62,.17); transform: translateX(105%); transition: transform .25s ease; }
.settings-sheet.visible { transform: none; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.sheet-head span { color: var(--accent-deep); letter-spacing: .14em; font-size: 10px; font-weight: 700; }
.sheet-head h2 { margin: 5px 0 0; font-size: 20px; }
.sheet-head button { border: 0; background: transparent; color: var(--muted); font-size: 26px; cursor: pointer; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.profile-field { display: grid; justify-items: center; gap: 5px; padding: 18px 8px; border: 1px solid var(--line); border-radius: 20px; background: #fff; cursor: pointer; }
.profile-field input, .background-picker input { display: none; }
.avatar.large { width: 72px; height: 72px; margin-bottom: 5px; font-size: 20px; }
.profile-field b { font-size: 13px; }
.profile-field small, .background-picker small { color: var(--muted); font-size: 10px; }
.name-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.name-grid label { color: var(--muted); font-size: 11px; }
.name-grid input { width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); outline: none; }
.background-picker { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; }
.background-picker > span:first-child { display: grid; gap: 4px; }
.picker-action { color: var(--accent-deep); font-size: 12px; font-weight: 650; white-space: nowrap; }
.remove-background { width: 100%; border: 0; padding: 10px; color: var(--muted); background: transparent; cursor: pointer; font-size: 12px; }
.save-settings { width: 100%; margin-top: 5px; }
.privacy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.privacy-actions button { min-height: 42px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--muted); cursor: pointer; font-size: 12px; }
.privacy-actions #newSessionButton { grid-column: 1 / -1; color: var(--accent-deep); font-weight: 650; }
.privacy-actions p { grid-column: 1 / -1; margin: -2px 0 7px; color: var(--muted); font-size: 11px; text-align: center; }
.privacy-actions #clearMessages { color: #b45e66; }

@media (max-width: 600px) {
  .chat-app { max-width: none; }
  .chat-header { min-height: 66px; }
  .message-wallpaper { inset: 66px 0 70px; }
  .message-list { padding: 18px 10px 16px; }
  .message-row { max-width: 89%; }
  .message-row .avatar { width: 28px; height: 28px; }
  .composer { gap: 6px; }
  .composer-button { width: 38px; height: 38px; }
}