:root { --ink:#f5f2f3; --muted:#c5bdc0; --rose:#ef7898; --cream:#18191a; --line:#414346; --card:#2b2d2f; }
* { box-sizing:border-box; }
html { scroll-padding-top:16px; }
body { margin:0; color:var(--ink); font-family:"DM Sans",sans-serif; background:radial-gradient(circle at 8% 10%,#33262b 0,transparent 30rem),radial-gradient(circle at 94% 88%,#302b24 0,transparent 31rem),var(--cream); min-height:100vh; overflow-x:hidden; }
.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; }
.shell { max-width:820px; min-height:100vh; padding:32px; margin:auto; }
.language-switcher { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:rgba(35,37,39,.97); box-shadow:0 10px 28px rgba(0,0,0,.2); }
.language-switcher-label { padding-left:3px; color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.language-buttons { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.language-button { min-width:88px; min-height:30px; padding:4px 12px; border:1px solid #4c4f52; border-radius:7px; background:#1f2123; color:#c9c2c5; font-size:.75rem; font-weight:700; transition:background .18s,border-color .18s,color .18s; }
.language-button:hover { border-color:#8a626f; color:#fff; }
.language-button[aria-pressed="true"] { border-color:var(--rose); background:var(--rose); color:#211c1e; box-shadow:0 3px 12px rgba(239,120,152,.24); }
.workspace { padding:24px; background:rgba(39,41,43,.96); border:1px solid var(--line); border-radius:20px; box-shadow:0 16px 42px rgba(0,0,0,.26); backdrop-filter:blur(14px); }
.composer { position:sticky; top:16px; z-index:5; }
.contact-settings { margin-bottom:14px; padding:11px 13px; border:1px solid var(--line); border-radius:12px; background:#222426; }.contact-settings > summary { cursor:pointer; color:#ece7e9; font-size:.84rem; font-weight:700; }.contact-settings > summary span { color:#aaa1a4; font-size:.76rem; font-weight:400; }.contact-settings-content { padding-top:15px; }.profile-manager { padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--line); }.person-picker label { display:block; margin-bottom:7px; font-size:.82rem; }.picker-row { display:flex; gap:8px; }.profile-manager select,.profile-manager input { width:100%; min-height:42px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:#1e2022; color:var(--ink); font:inherit; }.person-picker select { flex:1; }.primary-small,.secondary,.text-button { min-height:42px; white-space:nowrap; border-radius:10px; padding:0 13px; font-size:.84rem; }.primary-small { border:0; background:#f5f2f3; color:#202123; font-weight:700; }.primary-small:hover { background:var(--rose); color:#fff; }.secondary { border:1px solid var(--line); background:#333538; color:var(--ink); font-weight:700; }.text-button { border:0; background:transparent; color:#f09ab1; }.text-button:disabled { opacity:.5; cursor:not-allowed; }.profile-editor { margin-top:10px; }.profile-editor summary { width:max-content; color:#c7bdc0; cursor:pointer; font-size:.78rem; }.editor-row { display:flex; align-items:center; gap:8px; padding-top:9px; }.editor-row input { flex:1; }
.quick-profiles { margin:0 0 15px; }.quick-profiles-label { display:block; margin-bottom:7px; color:var(--muted); font-size:.74rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }.quick-profile-list { display:flex; gap:8px; min-width:0; }.quick-profile { display:flex; min-width:0; flex:1 1 0; align-items:center; gap:8px; min-height:44px; padding:7px 9px; border:1px solid var(--line); border-radius:12px; background:#202224; color:var(--ink); text-align:left; transition:.18s; }.quick-profile:hover { border-color:#80606a; background:#292629; }.quick-profile[aria-pressed="true"] { border-color:var(--rose); background:#3b2930; box-shadow:inset 0 0 0 1px rgba(239,120,152,.2); }.quick-avatar { display:grid; flex:0 0 30px; width:30px; height:30px; place-items:center; border-radius:50%; background:#3a3c3f; color:#fff; font-size:.78rem; font-weight:700; }.quick-profile[aria-pressed="true"] .quick-avatar { background:var(--rose); }.quick-profile-name { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; font-weight:700; }.quick-profile small { flex:0 0 auto; color:#aaa1a4; font-size:.66rem; font-weight:700; }
label { font-weight:700; font-size:.94rem; } textarea { width:100%; min-height:166px; resize:vertical; border-radius:14px; margin:12px 0 10px; padding:16px; border:1px solid var(--line); color:var(--ink); background:#1e2022; font:inherit; line-height:1.55; outline:none; } textarea::placeholder { color:#aaa3a5; } #message { min-height:108px; height:108px; } textarea:focus { border-color:var(--rose); box-shadow:0 0 0 3px #70384a; }
.optional { color:#aaa1a4; font-size:.75rem; font-weight:400; }.contact-notes { min-height:86px; font-size:.9rem; }
.profile { margin:4px 0 12px; }.profile summary { width:max-content; color:#d4cccf; cursor:pointer; font-size:.84rem; }.profile summary span { color:#aaa1a4; font-size:.75rem; }.profile label { display:block; margin-top:15px; font-size:.83rem; }.profile textarea { min-height:92px; margin-bottom:0; font-size:.9rem; }
.actions { display:flex; align-items:center; justify-content:space-between; gap:16px; } #count { color:var(--muted); font-size:.77rem; } button { font:inherit; cursor:pointer; } #generate { background:#f5f2f3; color:#202123; border:0; padding:12px 17px; border-radius:10px; font-weight:700; transition:.2s; } #generate:hover { background:var(--rose); color:#fff; transform:translateY(-1px); } #generate:disabled { opacity:.65; cursor:wait; transform:none; }.status { min-height:22px; margin:15px 0 0; color:var(--muted); font-size:.87rem; }
.results { margin-top:28px; padding:26px 24px; background:rgba(39,41,43,.94); border:1px solid var(--line); border-radius:20px; }.results-title { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; font-weight:700; }.results-title small,.card small { color:var(--muted); font-weight:400; font-size:.72rem; }.cards { display:grid; gap:10px; }.card { text-align:left; width:100%; padding:15px 16px; border:1px solid var(--line); background:var(--card); border-radius:12px; transition:.2s; }.card:hover { border-color:var(--rose); box-shadow:0 7px 18px rgba(0,0,0,.28); }.card span { color:var(--rose); font-weight:700; font-size:.78rem; }.card p { margin:7px 0 9px; line-height:1.45; color:#f0ebed; }.question { display:block; width:100%; margin-top:13px; padding:12px 14px; border:1px solid #67384a; text-align:left; border-radius:10px; background:#452b35; color:#ffd4df; font-size:.86rem; line-height:1.45; }.question:hover { background:#573440; }
.translation { margin-bottom:15px; padding:11px 13px; border-radius:10px; background:#36322d; color:#eadfd3; font-size:.86rem; line-height:1.45; }
.manual-reply { margin-top:13px; border:1px solid var(--line); border-radius:12px; background:#222426; }.manual-reply > summary { padding:13px 14px; cursor:pointer; color:#ece7e9; font-size:.86rem; font-weight:700; }.manual-reply > summary span { float:right; color:var(--rose); font-size:.75rem; font-weight:600; }.manual-reply-content { padding:3px 14px 14px; border-top:1px solid var(--line); }.manual-reply-content label { display:block; margin-top:13px; font-size:.84rem; }.manual-reply textarea { min-height:88px; margin:9px 0; font-size:.9rem; }.manual-reply-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }.manual-reply-actions > span { flex:0 0 auto; color:var(--muted); font-size:.76rem; }.manual-reply-button-group { display:flex; gap:8px; }.manual-reply-actions button { min-height:42px; padding:0 14px; border:0; border-radius:10px; background:#f5f2f3; color:#202123; font-weight:700; }.manual-reply-actions .idea-button { border:1px solid #77505d; background:#3b2930; color:#ffd5e0; }.manual-reply-actions button:hover { background:var(--rose); color:#fff; }.manual-reply-actions button:disabled { opacity:.62; cursor:wait; }.manual-reply-status { min-height:20px; margin:10px 0 0; color:var(--muted); font-size:.78rem; line-height:1.4; }.manual-reply-ideas { display:grid; gap:9px; margin-top:12px; }.manual-idea-card { width:100%; padding:13px 14px; border:1px solid #5f4650; border-radius:11px; background:#2d292b; color:var(--ink); text-align:left; }.manual-idea-card:hover { border-color:var(--rose); background:#352c30; }.manual-idea-card span { color:var(--rose); font-size:.76rem; font-weight:700; }.manual-idea-card p { margin:6px 0 8px; color:#f4eef0; font-size:.9rem; line-height:1.5; }.manual-idea-card small { color:var(--muted); font-size:.72rem; }
.starters { margin-top:20px; padding:12px 16px; border:1px solid var(--line); border-radius:14px; background:rgba(35,37,39,.97); box-shadow:0 10px 32px rgba(0,0,0,.28); }.starters summary { cursor:pointer; color:#ece7e9; font-size:.86rem; font-weight:700; }.starters summary span { color:#aaa1a4; font-size:.75rem; font-weight:400; }.starter-list { display:grid; gap:7px; padding-top:12px; }.starter { padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:#2c2e30; color:#f0ebed; text-align:left; font:inherit; font-size:.84rem; line-height:1.4; }.starter:hover { border-color:var(--rose); }
.logout-form { margin-top:12px; text-align:right; }
.panel-close { display:block; width:100%; min-height:44px; margin-top:14px; padding:10px 14px; border:1px solid #5b5e62; border-radius:10px; background:#333538; color:#f5f2f3; font-weight:700; }
.panel-close:hover { border-color:var(--rose); background:#3c3438; }
.clipboard-helper { position:fixed; left:-9999px; top:0; opacity:0; pointer-events:none; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline:3px solid #d4869b; outline-offset:3px; }

.login-page { display:grid; place-items:center; padding:20px; background:#242526; }
.login-shell { width:min(100%,360px); }
.login-card { padding:28px; border:1px solid #444648; border-radius:16px; background:#303234; box-shadow:0 18px 55px rgba(0,0,0,.28); }
.login-brand { margin:0 0 22px; color:#fff; text-align:center; font-size:1rem; font-weight:700; letter-spacing:.22em; }
.login-card input { width:100%; min-height:48px; padding:0 14px; border:1px solid #55585b; border-radius:10px; background:#242526; color:#fff; font:inherit; }
.login-card input::placeholder { color:#aeb0b2; }
.login-error { min-height:20px; margin:8px 0; color:#ff9eb1; font-size:.82rem; }
.login-button { width:100%; min-height:48px; border:0; border-radius:10px; background:#fff; color:#242526; font-weight:700; }
.login-button:hover { background:#e5e5e5; }
@media (max-width:760px) {
  body { font-size:17px; }
  .shell { min-height:100dvh; padding:12px max(12px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  .language-switcher { display:block; margin-bottom:8px; padding:7px; }
  .language-switcher-label { display:none; }
  .language-buttons { width:100%; }
  .language-button { min-width:0; min-height:34px; padding:5px 7px; font-size:.78rem; }
  .workspace,.results { padding:17px; border-radius:16px; }
  .composer { position:static; }
  .contact-settings,.starters { scroll-margin-top:12px; }
  .contact-settings { padding:13px 14px; }
  .contact-settings[open] { padding:18px; border-color:#5c5f63; }
  .contact-settings[open] .contact-settings-content { margin:14px -2px 0; padding:20px 16px 16px; border:1px solid #45484b; border-radius:14px; background:#292b2d; }
  .contact-settings[open] .profile-manager { padding-bottom:18px; margin-bottom:18px; }
  .quick-profiles { margin-bottom:17px; }
  .quick-profiles-label { font-size:.82rem; }
  .quick-profile-list { width:100%; overflow-x:auto; padding:1px 1px 5px; scrollbar-width:thin; scroll-snap-type:x proximity; }
  .quick-profile { min-width:min(72vw,220px); min-height:52px; flex:0 0 auto; padding:8px 10px; scroll-snap-align:start; }
  .quick-avatar { flex-basis:34px; width:34px; height:34px; font-size:.9rem; }
  .quick-profile-name { font-size:.96rem; }
  .quick-profile small { font-size:.78rem; }
  .contact-settings > summary,.starters summary { min-height:28px; font-size:1rem; line-height:1.45; }
  .contact-settings > summary span,.starters summary span { display:block; margin-top:2px; font-size:.86rem; line-height:1.35; }
  .contact-settings-content { padding-top:17px; }
  label,.person-picker label { font-size:1rem; }
  textarea,#message { min-height:132px; margin-top:10px; padding:14px; font-size:1rem; line-height:1.55; }
  .contact-notes { min-height:116px; font-size:1rem; }
  .picker-row { flex-direction:column; align-items:stretch; }
  .contact-settings[open] .person-picker label { margin-bottom:10px; font-size:1.05rem; }
  .profile-manager select,.profile-manager input { min-height:56px; padding:0 15px; font-size:1.05rem; }
  .contact-settings[open] .primary-small { min-height:54px; }
  .primary-small,.secondary,.text-button,#generate,.panel-close { min-height:48px; font-size:1rem; }
  .editor-row { flex-wrap:wrap; }
  .editor-row input { min-width:100%; }
  .editor-row .secondary,.editor-row .text-button { flex:1; }
  .profile-editor summary { padding:8px 0; font-size:.95rem; }
  .actions { align-items:center; }
  #count { font-size:.9rem; }
  #generate { padding:13px 18px; }
  .status { min-height:25px; font-size:.95rem; line-height:1.45; }
  .results { margin-top:16px; }
  .results-title { align-items:flex-start; font-size:1.05rem; }
  .results-title small { display:none; }
  .card { min-height:48px; padding:15px; }
  .card span { font-size:.9rem; }
  .card p { font-size:1rem; line-height:1.55; overflow-wrap:anywhere; }
  .card small { font-size:.84rem; line-height:1.4; }
  .question,.translation { font-size:.96rem; line-height:1.5; overflow-wrap:anywhere; }
  .manual-reply > summary { min-height:50px; padding:14px; font-size:1rem; line-height:1.4; }
  .manual-reply > summary span { display:block; float:none; margin-top:3px; font-size:.86rem; }
  .manual-reply-content { padding:3px 14px 15px; }
  .manual-reply-content label { font-size:1rem; }
  .manual-reply textarea { min-height:112px; font-size:1rem; }
  .manual-reply-actions span { font-size:.88rem; }
  .manual-reply-actions { align-items:flex-end; }
  .manual-reply-button-group { flex:1; justify-content:flex-end; }
  .manual-reply-actions button { min-height:48px; padding:0 12px; font-size:.95rem; }
  .manual-reply-status { font-size:.9rem; }
  .manual-idea-card { min-height:52px; padding:14px; }
  .manual-idea-card span { font-size:.87rem; }
  .manual-idea-card p { font-size:1rem; }
  .manual-idea-card small { font-size:.84rem; }
  .starters { position:static; margin-top:12px; padding:14px; }
  .starter-list { gap:9px; padding-top:14px; }
  .starter { min-height:48px; padding:13px 14px; font-size:1rem; line-height:1.5; overflow-wrap:anywhere; }
  .logout-form { text-align:left; }
}

@media (max-width:380px) {
  .shell { padding-left:8px; padding-right:8px; }
  .workspace,.results { padding:14px; }
  .actions { gap:10px; }
}