:root {
  --bg: #F0EBE4;
  --card: #FFFFFF;
  --ink: #2F2A26;
  --soft: #8A7B66;
  --accent: #C4A173;
  --user-bubble: #2F2A26;
  --sofia-bubble: #E7DFD2;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; overflow:hidden; overscroll-behavior:none; position:fixed; inset:0; width:100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); }

/* login */
#login-screen { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.login-card { background:var(--card); padding:40px 32px; border-radius:20px; width:300px; text-align:center; box-shadow:0 8px 30px rgba(47,42,38,.08); }
.logo-dot { width:56px; height:56px; border-radius:50%; background:var(--ink); margin:0 auto 14px; display:flex; align-items:center; justify-content:center; color:#F0EBE4; font-size:28px; font-weight:600; cursor:pointer; user-select:none; }
.login-card h1 { font-size:24px; font-weight:600; }
.subtitle { color:var(--soft); font-size:13px; margin-bottom:22px; }
.login-card input { width:100%; padding:12px; border:1px solid #ddd; border-radius:10px; font-size:16px; margin-bottom:12px; outline:none; }
.login-card button { width:100%; padding:12px; background:var(--ink); color:#F0EBE4; border:none; border-radius:10px; font-size:16px; cursor:pointer; }
.error { color:#c0392b; font-size:13px; margin-top:10px; min-height:16px; }

/* chat */
#chat-screen { position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; }
header { display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--card); border-bottom:1px solid rgba(0,0,0,.05); padding-top: calc(14px + env(safe-area-inset-top)); flex-shrink:0; }
.avatar-img { width:44px; height:44px; border-radius:50%; object-fit:cover; background:var(--ink); }
.who .name { font-weight:600; font-size:17px; }
.status { font-size:12px; color:var(--soft); }

/* только история скроллится */
#messages { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:16px 14px; display:flex; flex-direction:column; gap:8px; min-height:0; }
.msg { max-width:78%; padding:10px 14px; border-radius:16px; font-size:16px; line-height:1.4; word-wrap:break-word; white-space:pre-wrap; }
.msg.user { align-self:flex-end; background:var(--user-bubble); color:#F5F0E8; border-bottom-right-radius:4px; }
.msg.sofia { align-self:flex-start; background:var(--sofia-bubble); border-bottom-left-radius:4px; }
.msg .time { display:block; font-size:10px; opacity:.5; margin-top:4px; text-align:right; }

.typing { padding:2px 20px; color:var(--soft); font-size:13px; font-style:italic; flex-shrink:0; }

/* низ: поднимаем строку ввода над панелью Safari (две высоты строки) */
footer { display:flex; gap:6px; padding:10px 14px; background:var(--card); border-top:1px solid rgba(0,0,0,.05); flex-shrink:0;
  padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
#input { flex:1; padding:13px 16px; border:1px solid #ddd; border-radius:24px; font-size:16px; outline:none; background:#faf8f4; min-width:0; }
.round-btn { width:44px; height:44px; border-radius:50%; border:none; background:var(--ink); color:#F0EBE4; font-size:17px; cursor:pointer; flex-shrink:0; }
.round-btn.send { background:var(--ink); }
.att-img { max-width:220px; max-height:220px; border-radius:12px; display:block; margin-bottom:6px; }
.att-file { display:block; font-size:14px; margin-bottom:4px; color:inherit; text-decoration:none; opacity:.9; word-break:break-all; }

/* в режиме установленного приложения (PWA) панели Safari нет - отступ обычный */
@media (display-mode: standalone) {
  footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}