:root { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; color: #111; background: #f5f5f7; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; }
button, input { font: inherit; }
.screen { min-height: 100dvh; }
.hidden { display: none !important; }
.join-screen { display: grid; place-items: center; padding: 24px; }
.card { width: min(100%, 390px); background: white; border-radius: 28px; padding: 32px 24px; box-shadow: 0 12px 40px #00000012; }
.logo { font-size: 42px; font-weight: 800; letter-spacing: -2px; }
.logo span { color: #087cff; }
.card p { color: #6e6e73; margin: 5px 0 28px; }
label { display: block; color: #6e6e73; font-size: 13px; margin-top: 14px; }
input { width: 100%; border: 1px solid #d2d2d7; background: #fafafa; border-radius: 12px; padding: 13px; margin-top: 6px; outline: none; }
input:focus { border-color: #087cff; background: white; }
.card button { width: 100%; border: 0; border-radius: 14px; padding: 14px; background: #087cff; color: white; font-weight: 650; margin-top: 18px; }
.card button.secondary { background: #eef5ff; color: #087cff; margin-top: 9px; }
.card small { display: block; color: #8e8e93; line-height: 1.4; margin-top: 22px; }
.install-help { color: #6e6e73; background: #f2f2f7; border-radius: 12px; padding: 11px; margin-top: 16px; font-size: 12px; line-height: 1.35; }
.chat-screen { display: grid; grid-template-rows: auto 1fr auto; background: white; max-width: 720px; margin: auto; }
header { height: 72px; padding: env(safe-area-inset-top) 14px 8px; display: grid; grid-template-columns: 60px 1fr 60px; align-items: end; border-bottom: 1px solid #e5e5ea; text-align: center; }
header strong, header small { display: block; }
header small { color: #8e8e93; font-size: 11px; margin-top: 2px; }
header button { background: none; border: 0; color: #087cff; padding: 8px 0; }
header .icon { font-size: 36px; text-align: left; line-height: .7; }
header .danger { font-size: 13px; text-align: right; color: #ff3b30; }
#messages { overflow-y: auto; padding: 18px 12px; display: flex; flex-direction: column; gap: 5px; }
.message { max-width: 76%; align-self: flex-start; }
.message.mine { align-self: flex-end; }
.sender { color: #8e8e93; font-size: 10px; margin: 0 8px 3px; }
.bubble { background: #e9e9eb; border-radius: 19px; padding: 9px 13px; line-height: 1.3; overflow-wrap: anywhere; }
.mine .bubble { background: #0b84ff; color: white; }
.bubble img { display: block; max-width: 100%; max-height: 360px; border-radius: 12px; }
.notice { align-self: center; color: #8e8e93; font-size: 12px; margin: 8px; text-align: center; }
#composer { display: grid; grid-template-columns: 34px 1fr 34px; gap: 8px; padding: 9px 10px calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid #e5e5ea; align-items: center; }
#composer input { margin: 0; padding: 9px 13px; border-radius: 19px; background: white; }
#composer button, .photo { width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; margin: 0; font-size: 22px; }
#composer button { background: #087cff; color: white; font-weight: 800; }
.photo { background: #e5e5ea; color: #636366; cursor: pointer; }
.notify { position: fixed; z-index: 5; top: calc(78px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); border: 0; border-radius: 18px; background: #111; color: white; padding: 10px 16px; box-shadow: 0 6px 20px #0003; }
body.privacy .chat-screen { filter: blur(18px); }
@media (min-width: 721px) { .chat-screen { min-height: calc(100dvh - 40px); margin-top: 20px; border-radius: 24px; overflow: hidden; box-shadow: 0 8px 40px #0001; } }