:root{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color-scheme:light dark;--bg:#f3f5f4;--surface:#fff;--text:#16241f;--muted:#6d8078;--green:#087e61;--bubble:#d6f6df;--border:#e0e9e4}body.dark{--bg:#0b1411;--surface:#15221d;--text:#e9f5ef;--muted:#a0b2a8;--green:#28b88b;--bubble:#164e3b;--border:#30433a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}#app{max-width:640px;margin:auto;min-height:100dvh;background:var(--surface);display:flex;flex-direction:column}header{padding:18px 18px 12px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px}h1{font-size:23px;margin:0}h2{font-size:19px;margin:0}button,input,textarea,select{font:inherit}button{border:0;border-radius:12px;padding:11px 14px;background:var(--green);color:white;cursor:pointer}button.secondary{background:var(--bg);color:var(--text)}button.danger{background:#b43c3c}button:disabled{opacity:.5}main{padding:16px;flex:1}.row{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--border);cursor:pointer}.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#d8eee4;color:#176247;font-size:20px;font-weight:700;flex:none}.grow{flex:1;min-width:0}.muted{color:var(--muted);font-size:13px}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stack{display:grid;gap:12px}.field{display:grid;gap:5px}input,textarea,select{width:100%;border:1px solid var(--border);border-radius:11px;padding:12px;background:var(--surface);color:var(--text)}.center{display:grid;place-content:center;text-align:center;gap:15px;min-height:80dvh;padding:26px}.lockicon{font-size:64px}.messages{display:flex;flex-direction:column;gap:10px;background:var(--bg);padding:18px;overflow-y:auto;flex:1}.message{max-width:84%;padding:10px 12px;border-radius:14px;background:var(--surface);align-self:flex-start;overflow-wrap:anywhere;white-space:pre-wrap}.message.out{align-self:flex-end;background:var(--bubble)}.message img,.message video{max-width:100%;max-height:280px;border-radius:8px;display:block}.composer{padding:10px;display:grid;gap:8px;border-top:1px solid var(--border)}.inline{display:flex;gap:8px;align-items:center}.inline>*{min-width:0}.badge{font-size:11px;color:#fff;background:#ae7027;padding:4px 8px;border-radius:30px}.notice{padding:12px;background:var(--bg);border-radius:12px;color:var(--muted);font-size:13px}.toolbar{display:flex;gap:8px;flex-wrap:wrap}.empty{text-align:center;color:var(--muted);margin-top:55px}
/* v2 additions */
.avatar{object-fit:cover}.avatar.small{width:40px;height:40px;font-size:16px}.avatar.large{width:72px;height:72px;font-size:29px}.avatar.huge{width:112px;height:112px;font-size:42px}.profile-photo,.profile{display:grid;justify-items:center;gap:15px}.profile-photo{padding:8px}.chat-head{gap:8px;padding:10px}.chat-head .grow{flex:1}.clickprofile{display:flex;align-items:center;gap:9px;cursor:pointer;min-width:0}.clickprofile strong{display:block;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon{font-size:23px;padding:7px 10px}.messages{min-height:260px}.conversation-start{display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;text-align:center;padding:10px 4px 20px;font-size:13px}.message.call{align-self:center;background:var(--surface);max-width:95%;border:1px solid var(--border);text-align:center}.meta{text-align:right;margin-top:6px;font-size:11px}.side.active{background:var(--green);color:white}.side{font-size:13px;padding:9px}.composer .inline{width:100%}.composer textarea{flex:1;resize:none;min-height:44px}.composer input[type=datetime-local]{flex:1}.plus{border-radius:50%;font-size:25px;min-width:44px;height:44px;padding:0}.attach-menu{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px;background:var(--bg);border-radius:12px}.attach-menu button{font-size:13px}.slim{padding:6px 12px;font-size:11px;text-align:center}.profile h2{text-align:center}button{white-space:normal}

/* V4.1 iPhone safe-area: keep status bar, home indicator and composer clear. */
html{min-height:100%;background:var(--surface)}
body{min-height:100dvh}
#app{min-height:100dvh;min-height:100svh;padding-top:env(safe-area-inset-top, 0px);padding-bottom:env(safe-area-inset-bottom, 0px)}
header{flex-shrink:0}
.chat-head{min-height:58px}
.messages{min-height:0;overscroll-behavior:contain}
.composer{flex-shrink:0}
@media(max-width:420px){.chat-head .clickprofile strong{max-width:135px}.chat-head{padding:9px 8px}.chat-head .icon{padding:7px}}

/* V4.2 hikaye görünümü */
.tabs{display:flex;border-bottom:1px solid var(--border);gap:8px;padding:7px 12px}.tab{flex:1;background:transparent;color:var(--muted);padding:11px 8px}.tab.selected{background:var(--bubble);color:var(--text);font-weight:700}.story-row .avatar{outline:2px solid var(--green);outline-offset:3px}.story-circle{font-size:26px;color:var(--green)}.story-page{overflow-y:auto}.story-preview{min-height:110px;border:1px dashed var(--border);border-radius:14px;display:grid;place-items:center;padding:10px}.story-preview img,.story-preview video{max-height:260px;max-width:100%;border-radius:10px}.story-viewer{flex:1;min-height:0;display:flex;flex-direction:column;background:#101713;color:#fff;padding:12px;gap:16px}.story-top{display:flex;align-items:center;gap:12px}.story-top strong{flex:1}.story-media{max-width:100%;max-height:65dvh;object-fit:contain;align-self:center;border-radius:12px}.story-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:20px;text-align:center;margin:auto 0}.story-controls{display:flex;justify-content:space-between;gap:8px;margin-top:auto}.story-controls button{padding:10px}.story-viewer .secondary{background:#283a32;color:#fff}

/* V4.4 */
.my-story-box{display:grid;gap:12px;padding:15px;border:1px solid var(--border);border-radius:15px;margin:14px 0}.my-story-box .inline{gap:12px}.my-story-box button{width:100%}