:root{--forest:#17231f;--forest-2:#22342d;--forest-3:#315044;--paper:#f5efe5;--sand:#d6b995;--copper:#c58b5b;--sage:#86a99b;--ink:#24302b;--muted:#7b8580;--danger:#b85d5d;--shadow:0 18px 55px rgba(15,28,23,.22);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overscroll-behavior:none}button,input,select,textarea{font:inherit}.hidden{display:none!important}
.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 15%,#3c594d 0,transparent 30%),radial-gradient(circle at 80% 80%,#583f32 0,transparent 32%),var(--forest);color:var(--paper)}
.auth-card{width:min(100%,430px);padding:34px;border:1px solid rgba(255,255,255,.13);border-radius:28px;background:rgba(245,239,229,.97);color:var(--ink);box-shadow:var(--shadow)}.setup-card{width:min(100%,680px)}
.brand-mark{width:72px;height:72px;margin:0 auto 16px;display:grid;place-items:center;border-radius:50%;background:var(--forest-2);color:#fff;font:700 24px Georgia,serif;box-shadow:0 8px 25px rgba(23,35,31,.28)}.brand-mark span{color:var(--copper);margin:0 2px}.eyebrow{text-align:center;color:var(--copper);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800}.auth-card h1{text-align:center;margin:4px 0 8px;font:700 clamp(1.8rem,7vw,2.4rem) Georgia,serif}.auth-card h2{margin:24px 0 12px;font:700 1.05rem Georgia,serif}.auth-intro,.privacy-note{text-align:center;color:var(--muted)}.privacy-note{font-size:.78rem;margin:20px 0 0}
.text-button{display:block;margin:16px auto 0;border:0;background:transparent;color:var(--forest-3);font-weight:750;text-align:center;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.pattern-grid{position:relative;width:260px;height:260px;margin:18px auto 8px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center;touch-action:none;user-select:none}.pattern-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.pattern-stroke{fill:none;stroke:var(--forest-3);stroke-width:8;stroke-linecap:round;stroke-linejoin:round;opacity:.72}.pattern-dot{position:relative;z-index:2;width:23px;height:23px;border:3px solid var(--forest-3);border-radius:50%;background:var(--paper);box-shadow:0 0 0 9px rgba(49,80,68,.08);transition:.12s}.pattern-dot.selected{background:var(--copper);border-color:var(--forest-2);transform:scale(1.18)}.pattern-dot.error{background:var(--danger);border-color:#7d3535}.pattern-hint{min-height:22px;margin:4px 0 0;text-align:center;color:var(--muted);font-size:.83rem}.pattern-hint.error{color:var(--danger);font-weight:700}
label{display:grid;gap:7px;margin:15px 0;font-size:.86rem;font-weight:700;color:#52605a}input,select{width:100%;min-height:50px;border:1px solid #d7d4ca;border-radius:13px;padding:0 14px;background:#fff;color:var(--ink);outline:none}input:focus,select:focus,textarea:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(134,169,155,.2)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.primary-button{border:0;border-radius:14px;padding:15px 20px;background:var(--forest-2);color:#fff;font-weight:800;cursor:pointer}.primary-button:hover{background:var(--forest-3)}.full{display:block;width:100%;text-align:center;text-decoration:none;margin-top:20px}.notice{padding:12px 14px;border-radius:12px;background:#e8ece9;margin:16px 0;font-size:.9rem}.notice.error{background:#f6dfdf;color:#873d3d}.notice.success{background:#e0eee7;color:#29563f}
.chat-page{height:100dvh;background:#dfe4df;color:var(--ink);overflow:hidden}.app-shell{height:100dvh;max-width:920px;margin:0 auto;display:grid;grid-template-rows:auto 1fr auto auto;background:linear-gradient(rgba(245,239,229,.94),rgba(245,239,229,.94)),radial-gradient(circle at 10% 20%,var(--sage) 0 1px,transparent 2px);background-size:auto,24px 24px;box-shadow:0 0 50px rgba(18,32,26,.14)}
.chat-header{z-index:3;display:flex;align-items:center;gap:12px;padding:max(12px,env(safe-area-inset-top)) 16px 12px;background:rgba(23,35,31,.97);color:#fff;box-shadow:0 4px 18px rgba(0,0,0,.16)}.person-avatar{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--avatar);font:700 1.25rem Georgia,serif;border:2px solid rgba(255,255,255,.6)}.person-info{min-width:0;flex:1}.person-info h1{font:700 1.2rem Georgia,serif;margin:0}.person-info p{font-size:.76rem;color:#bcd0c7;margin:3px 0 0}.icon-button{width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.09);color:#fff;text-decoration:none;font-size:1.25rem;cursor:pointer}
.messages{overflow-y:auto;padding:18px clamp(10px,3vw,28px) 24px;scroll-behavior:smooth}.loading,.empty-state{text-align:center;color:var(--muted);margin:25vh auto 0}.day-separator{display:flex;align-items:center;gap:10px;margin:20px 0;color:#7c837f;font-size:.72rem}.day-separator:before,.day-separator:after{content:"";height:1px;background:#d8d8d0;flex:1}.message-row{display:flex;margin:4px 0}.message-row.mine{justify-content:flex-end}.bubble{position:relative;max-width:min(76%,580px);padding:10px 12px 7px;border-radius:17px 17px 17px 5px;background:#fff;box-shadow:0 2px 7px rgba(24,38,32,.09);overflow:hidden}.mine .bubble{background:#dcece4;border-radius:17px 17px 5px 17px}.bubble-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.4}.message-media{display:block;max-width:100%;max-height:55vh;border-radius:11px;margin-bottom:7px;background:#111}.message-video{width:min(100%,520px)}.message-audio{width:min(100%,330px);height:42px}.file-card{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-width:210px;padding:7px}.file-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--forest-2);color:#fff;font-weight:800}.file-details{min-width:0}.file-details strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-details small{color:var(--muted)}.message-meta{display:flex;justify-content:flex-end;align-items:center;gap:5px;margin-top:4px;color:#818a85;font-size:.66rem}.read-mark.read{color:#3b8f76}.delete-button{border:0;background:transparent;color:inherit;padding:0 2px;cursor:pointer;font-size:.75rem}.deleted-text{font-style:italic;color:#8b928e}.typing-line{height:22px;padding:0 18px;color:#67766f;font-size:.75rem;background:rgba(245,239,229,.95)}
.composer{padding:8px 12px max(10px,env(safe-area-inset-bottom));background:rgba(245,239,229,.98);border-top:1px solid #dadad3}.composer-row{display:flex;align-items:flex-end;gap:8px}.composer textarea{flex:1;min-height:44px;max-height:125px;resize:none;border:1px solid #d4d5ce;border-radius:22px;padding:11px 15px;background:#fff;color:var(--ink);outline:none;line-height:1.35}.round-button,.send-button{width:44px;height:44px;flex:none;border:0;border-radius:50%;cursor:pointer}.round-button{background:#e4e6e0;color:var(--forest);font-size:1.3rem}.send-button{background:var(--forest-2);color:#fff;font-size:1.2rem}.round-button.recording{background:#f1d4d4;color:var(--danger);animation:pulse 1.1s infinite}.attachment-preview{padding:8px 10px;margin-bottom:7px;border-radius:10px;background:#e6e8e2;font-size:.8rem}.record-status{padding:6px 12px 0;color:var(--danger);font-size:.76rem}.upload-progress{height:5px;margin-top:7px;border-radius:8px;background:#d1d4cf;overflow:hidden}.upload-progress span{display:block;height:100%;background:var(--forest-3);transition:width .15s}.toast{position:fixed;z-index:20;left:50%;bottom:95px;transform:translateX(-50%);max-width:calc(100% - 30px);padding:11px 15px;border-radius:12px;background:#2d2423;color:#fff;box-shadow:var(--shadow);font-size:.85rem}
@keyframes pulse{50%{transform:scale(.91)}}
@media(max-width:600px){.auth-page{padding:14px}.auth-card{padding:27px 21px;border-radius:23px}.form-grid{grid-template-columns:1fr}.bubble{max-width:84%}.chat-header{padding-left:12px;padding-right:12px}.messages{padding-left:9px;padding-right:9px}.composer{padding-left:8px;padding-right:8px}.round-button,.send-button{width:42px;height:42px}.composer-row{gap:6px}}
@media(min-width:700px) and (orientation:portrait){.chat-header{padding:22px 28px}.person-avatar{width:58px;height:58px}.person-info h1{font-size:1.5rem}.messages{padding:24px 36px}.bubble{font-size:1.08rem}.composer{padding:14px 24px 20px}.composer textarea{min-height:54px;font-size:1.05rem;padding:14px 18px}.round-button,.send-button{width:54px;height:54px}}