*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#f5f6fa;color:#202124}a{color:#6d4aff;text-decoration:none}
.auth{min-height:100vh;display:grid;place-items:center;padding:20px}.card{background:#fff;border-radius:18px;box-shadow:0 10px 40px #0001}.auth-card{width:min(420px,100%);padding:32px}.auth-card h1{text-align:center;color:#6d4aff}
label{display:block;margin:14px 0;font-weight:600}input{width:100%;padding:12px 14px;border:1px solid #ddd;border-radius:10px;font:inherit;margin-top:6px}button{border:0;border-radius:10px;padding:11px 16px;background:#6d4aff;color:#fff;font:inherit;cursor:pointer}.error{padding:10px;background:#fee;color:#a00;border-radius:8px}
.app{height:100vh;display:grid;grid-template-columns:330px 1fr}.sidebar{background:#fff;border-right:1px solid #ddd;padding:18px;overflow:auto}.brand{font-size:25px;font-weight:800;color:#6d4aff;margin-bottom:18px}.me{display:flex;justify-content:space-between;gap:10px;margin-bottom:16px}.search{margin-bottom:14px}
.user{padding:12px;border-radius:12px;cursor:pointer}.user:hover{background:#f1efff}.chat{display:flex;flex-direction:column;min-width:0}.chat header{height:65px;padding:18px 22px;background:#fff;border-bottom:1px solid #ddd}.messages{flex:1;overflow:auto;padding:20px;background:linear-gradient(#f7f8fc,#eef1f7)}.empty{display:grid;place-items:center;height:100%;color:#777}.msg{max-width:70%;padding:9px 12px;margin:7px 0;border-radius:14px;background:#fff;box-shadow:0 2px 5px #0000000b}.msg.mine{margin-left:auto;background:#e9e2ff}.meta{font-size:11px;color:#777;margin-top:4px}.composer{display:flex;gap:8px;padding:12px;background:#fff;border-top:1px solid #ddd}.composer input[type=text],.composer #text{flex:1;margin:0}.composer button{white-space:nowrap}
@media(max-width:700px){.app{grid-template-columns:1fr}.sidebar{display:block;height:40vh;border-right:0;border-bottom:1px solid #ddd}.chat{height:60vh}.msg{max-width:85%}}
#preview img,#preview video{max-width:220px;max-height:140px;border-radius:10px;margin-right:8px;vertical-align:middle}.status{font-size:11px;margin-left:5px;color:#666}.status.read{color:#5a42d6}.call-modal{position:fixed;inset:0;background:#000b;display:grid;place-items:center;z-index:20}.call-modal[hidden]{display:none}.call-card{background:#fff;padding:18px;border-radius:16px;width:min(720px,94vw)}#remoteVideo{width:100%;max-height:60vh;background:#111;border-radius:10px}#localVideo{width:150px;max-height:120px;position:absolute;margin:-130px 0 0 -180px;border-radius:8px;background:#222}

.preview{padding:10px 12px;background:#fff;border-top:1px solid #eee}.preview img,.preview video{display:block;max-width:min(420px,70vw);max-height:260px;border-radius:10px;margin-top:7px}.preview-info{font-size:13px;color:#555}.preview-warning{color:#a55b00;font-size:13px;margin-top:5px}.upload-error{padding:10px 14px;background:#fff0f0;color:#a40000;border-top:1px solid #f3caca;font-size:14px}.composer button:disabled{opacity:.6;cursor:wait}

/* MissYou v1.6 mobile-safe media viewer */
.media-thumb{display:block;max-width:100%;width:auto;height:auto;max-height:240px;object-fit:contain;border-radius:12px;cursor:zoom-in}
.video-thumb{display:block;width:min(360px,100%);max-width:100%;height:auto;max-height:260px;object-fit:contain;border-radius:12px;background:#111}
.media-overlay{position:fixed;inset:0;width:100vw;height:100dvh;z-index:99999;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:52px 4px 46px;background:rgba(0,0,0,.94);overflow:hidden;overscroll-behavior:none}
.media-overlay[hidden]{display:none!important}
.media-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
.media-overlay img,.media-overlay video{display:block!important;box-sizing:border-box!important;max-width:96vw!important;max-height:calc(100dvh - 98px)!important;width:auto!important;height:auto!important;object-fit:contain!important;margin:0 auto!important}
.media-close{position:fixed;top:max(8px,env(safe-area-inset-top));right:10px;z-index:100001;width:44px;height:44px;border:0;border-radius:50%;padding:0;font-size:30px;line-height:44px;color:#fff;background:rgba(255,255,255,.18)}
.media-overlay .media-name{position:fixed;left:12px;right:60px;bottom:max(10px,env(safe-area-inset-bottom));z-index:100001;text-align:center;color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
@supports not (height:100dvh){.media-overlay{height:100vh}.media-overlay img,.media-overlay video{max-height:calc(100vh - 98px)!important}}

/* MissYou v1.7 WhatsApp-style media viewer */
.m7-viewer{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;z-index:2147483000!important;background:#000!important;overflow:hidden!important;box-sizing:border-box!important}
.m7-viewer[hidden]{display:none!important}
.m7-topbar{position:absolute;top:0;left:0;right:0;z-index:3;height:56px;padding-top:env(safe-area-inset-top);display:flex;align-items:center;box-sizing:content-box;background:linear-gradient(rgba(0,0,0,.7),transparent)}
.m7-back{width:48px;height:48px;border:0;background:transparent;color:#fff;font-size:34px;line-height:48px;padding:0;cursor:pointer}
.m7-title{flex:1;min-width:0;color:#fff;font-size:15px;margin-left:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m7-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:60px 3px 45px;box-sizing:border-box;overflow:hidden}
.m7-stage img,.m7-stage video{display:block!important;width:auto!important;height:auto!important;max-width:98vw!important;max-height:calc(100dvh - 105px)!important;object-fit:contain!important;margin:0!important;transform-origin:center center;touch-action:none;user-select:none;-webkit-user-drag:none}
.m7-hint{position:absolute;bottom:max(8px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;color:rgba(255,255,255,.7);font-size:11px;pointer-events:none}
@supports not (height:100dvh){.m7-viewer{height:100vh!important}.m7-stage img,.m7-stage video{max-height:calc(100vh - 105px)!important}}