/* My MSN visual layer. Native CSS; no design-system package or new font download.
   Radius: controls 12px, avatars 16px, surfaces 24px. Existing semantic status colors remain.
   Layers: chat chrome 2, notices 30, native dialog top layer (inherited). */
:root{color-scheme:light dark;--page:#f1f5fa;--surface:#fff;--soft:#f6f8fc;--ink:#22324a;--muted:#53647b;--line:#d7e0ec;--accent:#245fc7;--accent-text:#fff;--accent-soft:#eaf1ff;--success:#256442;--success-bg:#edf8f1;--danger:#a33145;--danger-bg:#fff0f2;--warning:#79521d;--warning-bg:#fff5e5;--shadow:0 16px 48px #243b5b0a;--focus:#245fc7}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--page:#111925;--surface:#1a2636;--soft:#202f43;--ink:#edf2fa;--muted:#b4c2d5;--line:#405269;--accent:#a5c6ff;--accent-text:#122746;--accent-soft:#293e60;--success:#a3dfb8;--success-bg:#203b30;--danger:#ffb6c3;--danger-bg:#482b35;--warning:#f0cd94;--warning-bg:#413523;--shadow:none;--focus:#a5c6ff}}
:root[data-theme=dark]{--page:#111925;--surface:#1a2636;--soft:#202f43;--ink:#edf2fa;--muted:#b4c2d5;--line:#405269;--accent:#a5c6ff;--accent-text:#122746;--accent-soft:#293e60;--success:#a3dfb8;--success-bg:#203b30;--danger:#ffb6c3;--danger-bg:#482b35;--warning:#f0cd94;--warning-bg:#413523;--shadow:none;--focus:#a5c6ff}
body{background:var(--page);color:var(--ink);font:16px/1.65 system-ui,-apple-system,"Segoe UI","Microsoft JhengHei",sans-serif;-webkit-text-size-adjust:100%}
button,a,input{touch-action:manipulation}button,a{ -webkit-tap-highlight-color:transparent}
button,input,a,summary{outline-offset:4px}button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--focus)}
button{transition:background-color .15s,color .15s,transform .15s}button:active:not(:disabled),a.button:active{transform:translateY(1px)}
input::placeholder{color:var(--muted);opacity:1}button:disabled{cursor:default}
.stage{max-width:1140px;padding-top:24px}.home-shell{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow)}
.home-top{padding:16px 24px;min-height:76px;border-color:var(--line);background:var(--surface)}
.home-wordmark{font-size:23px;letter-spacing:-.7px;white-space:nowrap}.home-wordmark .logo{width:40px;height:40px}
.call-button,.profile-edit,.quiet-button,.small-button{min-height:44px;border-radius:12px;font-size:14px;color:var(--accent)}
.call-button{background:var(--accent-soft);border:1px solid var(--line);padding:11px 16px}
.call-button.primary,#login-view #login{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:650}
.quiet-button{color:var(--muted);padding:10px 12px}.profile-edit{border-color:var(--line);background:var(--surface)}
.home-top-actions #logout{min-height:44px;font-size:13px;padding:8px}.home-top-actions{gap:8px}
.home-layout{grid-template-columns:260px minmax(0,1fr)}.my-profile{padding:26px 22px;background:var(--soft);border-color:var(--line)}
.profile-caption,.profile-info,.profile-info-value{color:var(--muted);font-size:13px;letter-spacing:0}.profile-divider{background:var(--line)}
.my-profile .profile-identity .profile-photo{border-radius:18px;background:var(--accent-soft);color:var(--accent)}
.my-profile .profile-identity h2{font-weight:650;color:var(--ink)}
.my-profile .profile-details .mood{color:var(--ink);line-height:1.7;font-size:14px}
.my-profile .profile-actions .my-status{color:var(--success);font-size:12px;font-weight:500}
.my-profile .profile-actions .profile-edit{color:var(--accent);font-size:13px;min-height:40px;text-align:left;padding:7px 0}
.profile-notifications{padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);gap:10px}
.profile-notifications p{font-size:12px!important;line-height:1.65;color:var(--muted)!important}
.profile-notifications button{font-size:13px;min-height:46px;border-color:var(--danger);background:var(--danger-bg);color:var(--danger);border-radius:12px;line-height:1.5}
.profile-notifications[data-state=ready] button{background:var(--success-bg);color:var(--success);border-color:var(--success)}
.profile-notifications[data-state=checking] button{background:var(--soft);color:var(--muted);border-color:var(--line)}
.home-main{padding:30px}.home-greeting h2{font-size:26px;font-weight:650;color:var(--ink)}.home-greeting p{font-size:15px;color:var(--muted)}
.home-section-head{gap:14px;margin:0 0 16px}.home-section-head h3,.circle-section h3{font-size:18px;color:var(--ink);font-weight:650}
.home-section-head small,.circle-section small{font-size:13px;color:var(--muted);margin-left:5px}
.search,.home-search{background:var(--soft);color:var(--muted);border:1px solid var(--line);border-radius:12px;min-height:48px}
.search input{color:var(--ink);font-size:16px;background:transparent}.home-search{max-width:290px}
.home-recent{border-top:0}.home-row{padding:16px 8px;gap:14px;border-color:var(--line);min-height:86px}.home-row:hover{background:var(--soft)}
.home-row .avatar{border-radius:16px;width:48px;height:48px;flex:0 0 48px}.avatar.blue{background:var(--accent-soft);color:var(--accent)}
.home-row b{font-size:16px;font-weight:650;line-height:1.5}.home-row p{font-size:14px;line-height:1.6;color:var(--muted);margin-top:4px}
.home-row .meta{font-size:12px;min-width:58px;color:var(--muted);gap:8px}
.home-row.unread{background:var(--accent-soft);border-left:3px solid var(--accent);padding-left:10px;border-radius:12px;margin-top:4px}
.home-row .unread-badge{font-size:12px;background:var(--accent);color:var(--accent-text);box-shadow:none;min-height:26px;padding:3px 8px}
.unread-badge:before{display:none}.friend-badge{font-size:13px;border-radius:10px;background:var(--accent-soft);color:var(--accent);padding:9px 10px}
.circle-section{border-color:var(--line);margin-top:28px;padding-top:24px}.circle-intro,#circle-empty,#no-contacts{font-size:14px;color:var(--muted)}
#friend-inbox,.join-help{background:var(--accent-soft);border-color:var(--line)}.join-help p,.join-help label,.join-help summary{color:var(--muted)}
.flow-card{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow);border-radius:24px;padding:28px}
.flow-card h2{font-size:27px;line-height:1.4;font-weight:650;letter-spacing:-.5px;margin:24px 0 14px;color:var(--ink)}
.flow-card p{font-size:15px;line-height:1.8;color:var(--muted)}.flow-card .flow-logo{color:var(--muted);font-size:15px;gap:10px}.flow-logo .logo{width:36px;height:36px}
.flow-note{color:var(--muted)!important;font-size:13px!important}.flow-card .full{min-height:48px;border-radius:12px;font-size:15px}
.flow-card input,.browser-help input,.join-help input,.profile-dialog input{border-color:var(--line);background:var(--soft);color:var(--ink);font-size:16px;border-radius:12px;min-height:48px}
.invite-nav{display:flex;align-items:center;gap:12px;margin-bottom:24px}.invite-nav .flow-logo{margin-left:auto}
#invite-back{display:flex;align-items:center;justify-content:center;gap:5px;margin:0;min-height:44px;padding:8px 10px;background:var(--soft);color:var(--ink);border:1px solid var(--line);font-size:14px}
#invite-status{font-size:14px;color:var(--muted);margin-top:24px}
.invite-app-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:20px 0 28px}
.invite-app{color:var(--ink);font-size:13px;padding:8px 0;gap:10px;border-radius:12px;min-height:94px}.invite-app:hover{background:var(--soft)}
.app-mark{width:56px;height:56px;border-radius:16px}.app-mark svg{width:40px;height:40px}
.invite-app[data-direct-share=WhatsApp]{display:none}
.invite-link-details{border-color:var(--line);font-size:14px;color:var(--accent);padding-top:20px;margin-top:24px}
.invite-link-details summary{min-height:44px;display:flex;align-items:center}.invite-link-details summary:before{content:'＋';font-size:20px;margin-right:8px}.invite-link-details[open] summary:before{content:'−'}
#login-view{padding:36px 30px;margin:32px auto;max-width:440px;border-radius:24px}
#login-view .msn-welcome-mark{width:112px;height:112px;margin:0 auto 26px}
#login-view h2{font-size:34px;font-weight:700;letter-spacing:-1px;margin-top:0;margin-bottom:14px}
#login-view>p:not(#login-message){font-size:17px;line-height:1.8;margin:0 0 28px;color:var(--muted)}
#login-view #login{min-height:52px;border-radius:12px;font-size:16px}
#login-view #login-message{font-size:13px;color:var(--muted);min-height:0;margin:18px 0 0;line-height:1.8}
#login-view:not(.is-signing-in) .msn-orbit,#login-view:not(.is-signing-in) .msn-welcome-mark:before,#login-view:not(.is-signing-in) .logo{animation:none}
.msn-orbit{border-color:var(--line)}#loading.msn-loading{background:var(--page);color:var(--ink)}.msn-loading>p{color:var(--muted)}
.profile-dialog{background:var(--surface);color:var(--ink);border-color:var(--line);padding:28px;border-radius:24px}
.profile-dialog h2{font-size:23px}.profile-dialog p,.profile-dialog label{color:var(--muted);font-size:14px}.profile-dialog::backdrop{background:#101e3380}
.permission-checks p{background:var(--soft)}.permission-checks [data-state=ready]{background:var(--success-bg);color:var(--success)}.permission-checks [data-state=attention]{background:var(--warning-bg);color:var(--warning)}
#profile-error,#member-error,#join-error{color:var(--danger)!important}
#chat-view,#chat-view .chat-head,#chat-view .composer{background:var(--surface);color:var(--ink);border-color:var(--line)}
#chat-view .chat-head{padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top));gap:12px}
#chat-name{font-size:17px}#chat-status{font-size:13px;color:var(--muted)}.small-button{background:var(--soft);color:var(--ink);width:44px;height:44px;flex:0 0 44px}
#message-scroll{background:var(--soft);padding:24px 20px}.date{color:var(--muted);font-size:12px}.date:before,.date:after{background:var(--line)}
.message .bubble{background:var(--surface);border:1px solid var(--line);color:var(--ink);font-size:16px;line-height:1.75;border-radius:18px 18px 18px 5px;padding:12px 16px;box-shadow:none}
.message.me .bubble{background:var(--accent-soft);color:var(--ink);border-color:var(--line);border-radius:18px 18px 5px 18px}
.message time,.message .time{color:var(--muted);font-size:12px}.message .delivery-state{color:var(--warning)}
.delivery-state button{background:var(--accent-soft);color:var(--accent)}.compose{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:6px;gap:6px}
.compose input{background:transparent;color:var(--ink);font-size:16px;min-width:0}.compose #emoji{background:transparent;color:var(--muted)}.compose .send{background:var(--accent);color:var(--accent-text);border-radius:12px;width:46px;height:46px}
#emoji-panel{background:var(--surface)}#emoji-panel .emoji-search,#emoji-panel .emoji-choice{background:var(--soft);color:var(--ink);border-color:var(--line)}
#emoji-panel .emoji-close,#emoji-panel .emoji-tab,#emoji-panel .emoji-result-label,#emoji-panel .emoji-empty{color:var(--muted)}#emoji-panel .emoji-tab[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}
#notice:not(:empty){background:var(--accent-soft);color:var(--ink);border:1px solid var(--line);padding:16px;border-radius:16px;font-size:14px}#notice button{color:var(--ink)}
#call-view{background:var(--surface);border-color:var(--line);color:var(--ink);box-shadow:var(--shadow)}.call-brand,#call-status,.timer,.call-view .caption{color:var(--muted)}
.call-control{color:var(--muted)}.call-control .circle{background:var(--soft);color:var(--ink);border-color:var(--line)}.call-control.on .circle{background:var(--accent);color:var(--accent-text)}
.call-control.end .circle{background:#bc354e;color:#fff;border-color:#bc354e}.incoming-actions .accept .circle{background:#256442;color:#fff;border-color:#256442}
#call-view #call-error{background:var(--warning-bg);border-color:var(--warning);color:var(--warning)}.camera-flip{background:var(--surface);color:var(--ink);border-color:var(--line)}
@media(max-width:600px){
 .stage{padding:0}.home-shell{border-radius:0;border:0;box-shadow:none}.home-layout{display:block}.home-top{padding:12px 16px;min-height:72px}
 .home-top .call-button{font-size:14px;padding:10px 12px}.home-top-actions{gap:4px}.home-top-actions #logout{font-size:12px;padding:6px}
 .my-profile{grid-template-columns:minmax(0,1fr) 112px;gap:14px;padding:20px 16px;align-items:center}
 .my-profile .profile-summary{grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center}.my-profile .profile-identity .profile-photo{width:56px;height:56px}
 .my-profile .profile-identity h2{font-size:15px}.my-profile .profile-details{padding-top:6px}.my-profile .profile-details .mood{font-size:14px}
 .profile-notifications{padding:0;background:transparent;border:0;gap:10px}.profile-notifications p{font-size:12px!important}.profile-notifications button{font-size:12px;padding:9px 6px}
 .home-main{padding:24px 16px}.home-section-head{align-items:center;gap:14px}.home-section-head h3{font-size:18px}.home-search{max-width:none;width:100%}
 .home-row{padding:16px 4px;gap:12px;min-height:86px}.home-row .meta{min-width:52px}.home-recent{padding-right:0}.friend-badge{font-size:12px;padding:8px}
 #login-view{margin:24px auto;padding:30px 24px}.flow-card{width:calc(100% - 32px);margin:20px auto;padding:24px}.flow-card h2{font-size:25px}
 #chat-view .chat-head .unified-call{padding:10px 12px;font-size:14px}#chat-view .chat-head .unified-call span{display:inline}
}
@media(max-width:359px){.home-wordmark{font-size:19px;gap:6px}.home-wordmark .logo{width:32px;height:32px}.home-top{padding:10px 12px;gap:4px}.home-top .call-button{padding:10px 8px;font-size:13px}.home-top-actions #logout{font-size:12px;padding:4px}.my-profile{padding:18px 12px;gap:10px;grid-template-columns:minmax(0,1fr) 96px}.my-profile .profile-summary{grid-template-columns:48px minmax(0,1fr);gap:8px}.my-profile .profile-identity .profile-photo{width:48px;height:48px}.app-mark{width:48px;height:48px}.invite-app{font-size:12px}.flow-card{padding:22px 18px}#chat-avatar{width:36px;height:36px}#chat-view .chat-head{gap:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.message>small{color:var(--muted);font-size:12px}
#return-call{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);left:50%;transform:translateX(-50%);z-index:100;box-shadow:0 3px 12px #0002}