@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap');
:root { --ink:#171717; --muted:#77777d; --soft:#f7f7f8; --line:#e8e8eb; --accent:#e75d67; --accent-soft:#fff0f1; }
* { box-sizing:border-box; }
html, body { margin:0; min-width:320px; height:100%; }
body { color:var(--ink); background:#fff; font-family:'Hind Siliguri','Noto Sans Bengali',sans-serif; }
button,textarea,input { font:inherit; }
button { cursor:pointer; }
.chat-app { height:100dvh; display:flex; flex-direction:column; background:#fff; }
.chat-topbar { height:76px; display:flex; align-items:center; gap:16px; padding:0 28px; border-bottom:1px solid #f3f3f4; flex:0 0 auto; }
.icon-button { border:0; background:transparent; color:var(--ink); width:42px; height:42px; display:grid; place-items:center; border-radius:50%; }
.icon-button:hover { background:var(--soft); }
.menu-button { gap:4px; align-content:center; }
.menu-button span { display:block; width:21px; height:2px; background:currentColor; border-radius:3px; }
.compose-button { margin-left:auto; font-size:24px; transform:rotate(-35deg); }
.chat-title-wrap { min-width:0; }
.chat-title { font-size:20px; font-weight:600; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-subtitle { color:var(--muted); font-size:11px; margin-top:2px; }
.chat-scroll { flex:1; overflow-y:auto; padding:36px max(24px, calc((100% - 750px) / 2)) 24px; scroll-behavior:smooth; }
.welcome-state { max-width:680px; margin:clamp(50px,13vh,150px) auto 0; text-align:left; }
.welcome-logo { width:47px; height:47px; display:grid; place-items:center; border-radius:16px 16px 16px 6px; background:var(--ink); color:#fff; font-size:27px; box-shadow:5px 5px 0 #ffdce0; transform:rotate(-8deg); margin-bottom:25px; }
.welcome-state h1 { margin:0; font-size:clamp(37px,6vw,57px); letter-spacing:-2px; line-height:1.08; font-weight:600; }
.welcome-state h1 em { color:var(--accent); font-style:normal; }
.welcome-state p { max-width:510px; color:var(--muted); line-height:1.75; font-size:15px; margin:20px 0; }
.welcome-hints { display:flex; gap:8px; flex-wrap:wrap; }
.welcome-hints span { padding:7px 13px; border-radius:99px; color:#a66b71; background:var(--accent-soft); font-size:12px; }
.is-hidden { display:none!important; }

.history-section, .results-section { max-width:750px; margin:0 auto 26px; }
.history-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; margin-bottom:13px; }
.step-label { color:var(--accent); font-size:11px; letter-spacing:.7px; font-weight:600; }
h2 { margin:2px 0 0; font-size:21px; line-height:1.25; }
.history-count { color:#aaaab0; font-size:11px; padding-top:10px; }
.history-list { display:grid; gap:12px; }
.history-item { max-width:83%; margin-left:auto; background:#f1f1f3; border-radius:22px 22px 5px 22px; padding:12px 16px; }
.history-item p { margin:0; font-size:16px; line-height:1.6; }
.history-item span { display:block; color:#a2a2a8; font-size:10px; margin-top:4px; }
.assistant-label { display:flex; align-items:center; gap:9px; font-weight:600; font-size:16px; }
.assistant-dot { width:27px; height:27px; display:grid; place-items:center; border-radius:9px; background:var(--ink); color:#fff; font-size:14px; }
.results-intro { color:#76767c; margin:10px 0 13px 36px; font-size:14px; line-height:1.7; }
.result-grid { display:grid; gap:14px; margin-left:36px; }
.result-card { border-left:2px dotted #bebec2; padding:3px 0 3px 18px; animation:appear .3s both; }
.result-card:nth-child(2) { animation-delay:.07s; }.result-card:nth-child(3) { animation-delay:.14s; }
.result-top { display:flex; align-items:center; gap:7px; }
.tone-icon { display:none; }.tone-label { font-size:15px; font-weight:600; color:#343438; }
.result-card blockquote { margin:5px 0 10px; font-size:17px; line-height:1.75; color:#1f1f23; }
.copy-button { border:0; border-radius:99px; color:#9a5d63; background:var(--accent-soft); padding:6px 11px; font-size:11px; }
.copy-button:hover { background:#ffe0e3; }.copy-button.copied { color:#33704d; background:#eaf8ee; }
.tone-fun .tone-label::before { content:'১  '; color:var(--accent); }.tone-soft .tone-label::before { content:'২  '; color:var(--accent); }.tone-flirt .tone-label::before { content:'৩  '; color:var(--accent); }
.tone-hot .tone-label::before { content:'৪  '; color:#b94b61; }.tone-hot { border-left-color:#e8a4ad; }.tone-hot .tone-label { color:#9f4351; }

.composer-area { flex:0 0 auto; width:min(100%,820px); margin:0 auto; padding:0 24px 18px; background:#fff; }
.current-person { display:flex; align-items:center; gap:7px; color:#8e8e94; font-size:11px; margin:0 0 6px 12px; }
.online-dot { width:6px; height:6px; background:#75b88d; border-radius:50%; }
.composer-box { border:1px solid #e8e8eb; border-radius:25px; padding:10px 12px 8px 17px; box-shadow:0 5px 25px rgba(0,0,0,.05); }
.composer-box:focus-within { border-color:#e4a2a7; box-shadow:0 0 0 4px rgba(231,93,103,.08); }
textarea { width:100%; display:block; resize:none; min-height:39px; max-height:130px; border:0; outline:0; color:var(--ink); line-height:1.6; padding:3px 0; background:transparent; }
textarea::placeholder { color:#a2a2a8; }
.composer-bottom { display:flex; align-items:center; gap:10px; color:#aaaab0; font-size:10px; }
#charCount { margin-left:auto; }.send-button { flex:0 0 auto; width:34px; height:34px; border:0; border-radius:50%; color:#fff; background:var(--ink); font-size:20px; line-height:1; }
.send-button:hover { background:#e75d67; }.examples { display:flex; gap:7px; overflow-x:auto; padding:8px 0 2px; scrollbar-width:none; }.examples::-webkit-scrollbar {display:none;}
.mature-toggle { display:flex; align-items:center; gap:7px; margin:9px 4px 0; color:#a35e68; font-size:11px; cursor:pointer; }.mature-toggle input { accent-color:#d95668; }.mature-toggle b { font-weight:600; }
.style-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:8px 4px 0; color:#aaaab0; font-size:10px; }.style-chip { border:1px solid #ededf0; border-radius:99px; background:#fff; color:#85858b; padding:4px 9px; font-size:10px; }.style-chip.active { border-color:#e4afb4; color:#a0515a; background:#fff3f3; }
.example-chip { flex:0 0 auto; border:1px solid #ededf0; color:#77777d; border-radius:99px; background:#fff; padding:5px 10px; font-size:11px; }.example-chip:hover { border-color:#e8b3b7; color:#a45f66; }
.care-line { text-align:center; color:#b0adb1; font-size:10px; margin:8px 0 0; }

.drawer-overlay { display:none; position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.17); }
.side-drawer { position:fixed; z-index:21; left:0; top:0; bottom:0; width:min(320px,86vw); background:#fff; box-shadow:7px 0 25px rgba(0,0,0,.11); transform:translateX(-102%); transition:transform .25s ease; padding:23px 18px; }
.side-drawer.open { transform:translateX(0); }.drawer-overlay.open { display:block; }
.drawer-top { display:flex; align-items:center; justify-content:space-between; padding:3px 5px 29px; font-size:21px; }.drawer-top strong::before { content:'♥'; color:var(--accent); font-size:16px; margin-right:6px; }
.drawer-section-label { color:#99999f; font-size:11px; margin:0 6px 9px; }.person-row { display:flex; gap:6px; }.person-row input { min-width:0; flex:1; border:1px solid #e7e7ea; border-radius:12px; padding:10px 12px; outline:0; }.person-row input:focus { border-color:#e2a2a7; }.save-name { width:42px; border:0; border-radius:12px; color:#fff; background:var(--ink); font-size:24px; }.people-list { display:grid; gap:4px; margin-top:18px; overflow-y:auto; max-height:calc(100dvh - 210px); }.person-chip { display:flex; align-items:center; gap:10px; width:100%; border:0; border-radius:13px; text-align:left; color:#2a2a2e; background:#fff; padding:12px 10px; font-size:16px; }.person-chip:hover,.person-chip.active { background:#f4f4f5; }.person-chip.active { font-weight:600; }.person-chip span:first-child { color:var(--accent); }.person-count { color:#aaaab0; font-size:10px; margin-left:auto; font-weight:400; }.memory-empty { color:#aaaab0; font-size:12px; padding:8px 10px; }.drawer-note { color:#aaaab0; font-size:10px; margin:20px 6px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.toast { position:fixed; z-index:30; left:50%; bottom:100px; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#202024; color:#fff; border-radius:99px; padding:9px 15px; font-size:12px; transition:.25s; }.toast.show { opacity:1; transform:translate(-50%,0); }
@keyframes appear { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:600px) { .chat-topbar { height:65px; padding:0 14px; gap:9px; }.chat-scroll { padding:25px 16px 15px; }.welcome-state { margin-top:60px; }.welcome-state h1 { font-size:41px; }.welcome-state p { font-size:14px; }.composer-area { padding:0 12px 12px; }.result-grid { margin-left:14px; }.results-intro { margin-left:0; }.history-item { max-width:92%; }.chat-title { font-size:18px; } }