/* iPhone preview of the 1Million Secrets iOS app. Built at real iOS point sizes (390 x 844)
   and scaled to fit; values mirror apps/ios (SwiftUI) in the app repository. */
.oms-sim{
  --s:.8;
  --tint:#665482;
  --label:#000;
  --secondary:rgba(60,60,67,.6);
  --tertiary:rgba(60,60,67,.3);
  --separator:rgba(60,60,67,.29);
  --card:rgba(175,82,222,.07);
  --red:#ff3b30;
  --green:#34c759;
  --orange:#ff9500;
  position:relative;
  width:calc(414px * var(--s));
  height:calc(868px * var(--s));
  margin:0 auto;
}
.oms-device{
  position:absolute; top:0; left:0;
  width:414px; height:868px;
  transform:scale(var(--s)); transform-origin:0 0;
  padding:12px; border-radius:67px; background:#1c1c1e;
  box-shadow:0 0 0 2px #3a3a3c, 0 30px 60px rgba(43,38,41,.3);
}
.oms-screen{
  position:relative; width:390px; height:844px; overflow:hidden; overflow:clip;
  border-radius:55px; background:#000;
  font-family:"Nunito", ui-rounded, system-ui, sans-serif; font-size:17px; line-height:1.3;
  color:var(--label); text-align:left;
  -webkit-user-select:none; user-select:none;
}
.oms-screen *{box-sizing:border-box}
:where(.oms-screen) button{font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; -webkit-tap-highlight-color:transparent}
:where(.oms-screen) button:disabled{cursor:default}
.oms-screen svg{display:block; flex:none}
.oms-island{position:absolute; z-index:60; top:11px; left:50%; width:124px; height:36px; margin-left:-62px; border-radius:20px; background:#000; pointer-events:none}
.oms-status{
  position:absolute; z-index:55; top:0; left:0; right:0; height:54px;
  display:flex; align-items:center; justify-content:space-between; padding:6px 34px 0 50px;
  font-family:-apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size:17px; font-weight:600; pointer-events:none;
  transition:color .3s;
}
.oms-status-icons{display:flex; gap:6px; align-items:center}
.oms-home-indicator{position:absolute; z-index:56; bottom:8px; left:50%; width:134px; height:5px; margin-left:-67px; border-radius:3px; background:#000; pointer-events:none}

/* App root (tabs). Scales back when the Write sheet is open, like iOS. */
.oms-app{
  position:absolute; inset:0; background:#fff; overflow:hidden; overflow:clip;
  transition:transform .42s cubic-bezier(.32,.72,0,1), border-radius .42s;
  transform-origin:50% 0;
}
.oms-screen.is-sheet .oms-app{transform:translateY(47px) scale(.915); border-radius:12px}
.oms-dim{position:absolute; inset:0; z-index:30; background:rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:opacity .42s}
.oms-screen.is-sheet .oms-dim{opacity:1; pointer-events:auto}
.oms-screen.is-sheet .oms-status{color:#fff}

.oms-tab{position:absolute; top:0; left:0; right:0; bottom:0; display:none; overflow:hidden; overflow:clip}
.oms-tab.is-active{display:block}
.oms-page{position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; background:#fff; scrollbar-width:none; transition:transform .38s cubic-bezier(.32,.72,0,1)}
.oms-page::-webkit-scrollbar{display:none}
.oms-page.is-detail{transform:translateX(100%); box-shadow:-8px 0 24px rgba(0,0,0,.08)}
.oms-tab.is-pushed .oms-page.is-detail{transform:none}
.oms-tab.is-pushed .oms-page.is-list{transform:translateX(-30%)}
.oms-page-inner{padding:74px 20px 120px}
.oms-logo{display:block; height:44px; width:100%; object-fit:contain; margin:0 auto}
.oms-title-row{display:flex; align-items:center; justify-content:space-between; margin-top:16px}
.oms-title{margin:0; font-size:22px; font-weight:700; line-height:1.2; color:var(--label)}
.oms-page-title{margin:16px 0 0}

/* Streak badge */
.oms-streak{display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; background:rgba(142,142,147,.15); font-size:17px; font-weight:600; color:var(--secondary)}
.oms-streak svg{width:15px; height:18px; fill:#8e8e93}
.oms-streak.is-active{background:rgba(255,149,0,.16); color:var(--label)}
.oms-streak.is-active svg{fill:url(#oms-flame)}

/* Message rows */
.oms-list{margin-top:8px}
.oms-row{display:flex; align-items:center; gap:12px; width:100%; padding:10px 0; text-align:left; border-radius:12px}
.oms-row:active{background:rgba(0,0,0,.04)}
.oms-avatar{width:48px; height:48px; border-radius:50%; background:var(--card); object-fit:cover; flex:none}
.oms-row-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.oms-row-msg{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:17px; line-height:1.3; font-weight:400}
.oms-row-msg.is-unread{font-weight:900}
.oms-caption{font-size:12px; color:var(--secondary)}

/* Detail pages */
.oms-back{display:inline-flex; align-items:center; gap:4px; margin-top:16px; color:var(--tint); font-size:17px; font-weight:600}
.oms-back svg{width:12px; height:20px}
.oms-detail-tools{display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-top:16px}
.oms-detail-tools button{color:var(--tint)}
.oms-received-box{margin-top:16px; border-radius:20px; background:var(--card); padding:20px 20px 16px}
.oms-received-box p{margin:0 0 8px; font-size:20px; line-height:1.35; -webkit-user-select:text; user-select:text}
.oms-letter{
  margin-top:16px; min-height:280px; padding:28px; border-radius:12px; background:#fff;
  display:flex; flex-direction:column; gap:24px;
  box-shadow:0 4px 12px rgba(0,0,0,.08), 0 0 0 .5px rgba(60,60,67,.15);
}
.oms-letter p{margin:0; flex:1; min-height:184px; font-size:20px; line-height:1.55; -webkit-user-select:text; user-select:text}
.oms-letter small{font-size:13px; font-style:italic; color:var(--secondary)}

/* Account */
.oms-credits{
  position:relative; overflow:hidden; margin-top:16px; padding:22px; border-radius:28px; color:#fff;
  background:linear-gradient(135deg, #5a4777, #7e6a9e); box-shadow:0 6px 14px rgba(90,71,119,.22);
  display:flex; flex-direction:column; gap:18px;
}
.oms-credits:before,.oms-credits:after{content:""; position:absolute; border-radius:50%; background:rgba(255,255,255,.07)}
.oms-credits:before{width:180px; height:180px; right:-35px; top:-110px}
.oms-credits:after{width:120px; height:120px; left:-60px; bottom:-60px; background:rgba(255,255,255,.05)}
.oms-credits-head{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700}
.oms-credits-head .oms-spark{display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.22)}
.oms-credits-balance{display:flex; justify-content:center; align-items:baseline; gap:6px}
.oms-credits-balance strong{font-size:64px; font-weight:900; line-height:1}
.oms-credits-balance span{font-size:20px; font-weight:600; opacity:.85}
.oms-credits-balance .ghost{visibility:hidden}
.oms-pill-row{display:flex; gap:10px}
.oms-pill{flex:1; min-height:50px; padding:0 10px; display:flex; align-items:center; justify-content:center; gap:6px; border-radius:999px; font-size:15px; font-weight:700; white-space:nowrap}
.oms-pill svg{width:16px; height:16px; fill:currentColor}
.oms-pill.filled{background:#fff; color:#5a4777}
.oms-pill.outline{background:rgba(255,255,255,.2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); color:#fff}
.oms-sync{display:flex; align-items:center; justify-content:center; gap:6px; font-size:13px; font-weight:600; opacity:.85; color:#fff}
.oms-sync svg{width:14px; height:14px}
.oms-tiles{display:flex; flex-direction:column; gap:10px; margin-top:16px}
.oms-tile{display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; border-radius:20px; background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); text-align:left}
.oms-tile-icon{display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; background:rgba(126,106,158,.15); color:#7e6a9e}
.oms-tile-icon svg{width:22px; height:22px}
.oms-tile-text{flex:1; min-width:0}
.oms-tile-text b{display:block; font-size:17px; font-weight:700}
.oms-tile-text span{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--secondary)}
.oms-dot{width:7px; height:7px; border-radius:50%; background:var(--green)}
.oms-chev{color:rgba(60,60,67,.3)}
.oms-chev svg{width:8px; height:14px}

/* Write button and tab bar */
.oms-write-fab{
  position:absolute; z-index:5; right:16px; bottom:104px;
  width:56px; height:56px; border-radius:50%; background:var(--tint); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 4px rgba(0,0,0,.2);
  transition:transform .15s;
}
.oms-write-fab:active{transform:scale(.94)}
.oms-write-fab svg{width:26px; height:26px}
/* iOS 26+ Liquid Glass tab bar: a floating frosted capsule; content scrolls underneath it. */
.oms-tabbar{
  position:absolute; z-index:6; left:21px; right:21px; bottom:25px; height:62px; padding:4px;
  display:flex; align-items:stretch; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(250,250,252,.66));
  backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%);
  box-shadow:0 8px 28px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.06), 0 0 0 .5px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.4);
}
.oms-tab-indicator{
  position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / 3); border-radius:999px;
  background:rgba(118,118,128,.13); box-shadow:inset 0 0 0 .5px rgba(255,255,255,.7);
  transition:transform .38s cubic-bezier(.32,.72,0,1);
}
.oms-tabbar button{position:relative; flex:1; display:flex; align-items:center; justify-content:center; border-radius:999px; color:#1c1c1e; transition:transform .15s}
.oms-tabbar button:active{transform:scale(.92)}
.oms-tabbar button.is-active{color:var(--tint)}
.oms-tabbar svg{width:27px; height:27px}
.oms-tabbar .on{display:none}
.oms-tabbar .is-active .on{display:block}
.oms-tabbar .is-active .off{display:none}
.oms-badge{position:absolute; top:5px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--red); color:#fff; font-size:13px; font-weight:600; line-height:18px; text-align:center; font-family:-apple-system, system-ui, sans-serif}

/* Write sheet */
.oms-sheet{
  position:absolute; z-index:40; left:0; right:0; bottom:0; top:59px;
  border-radius:12px 12px 0 0; background:#fff; overflow:hidden; overflow:clip;
  transform:translateY(105%); transition:transform .42s cubic-bezier(.32,.72,0,1);
}
.oms-screen.is-sheet .oms-sheet{transform:none}
.oms-sheet-inner{padding:20px; display:flex; flex-direction:column; gap:16px; height:100%; overflow-y:auto}
.oms-write-head{display:flex; align-items:center; gap:8px}
.oms-write-head .oms-info{color:var(--secondary)}
.oms-write-head .oms-info svg{width:22px; height:22px}
.oms-close{margin-left:auto; color:rgba(60,60,67,.6)}
.oms-close svg{width:30px; height:30px}
.oms-editor-wrap{position:relative; padding:8px; border-radius:10px; box-shadow:inset 0 0 0 1px rgba(60,60,67,.4)}
.oms-editor{
  height:152px; overflow-y:auto; padding:8px 0; outline:0;
  font-size:17px; line-height:22.6px; white-space:pre-wrap; overflow-wrap:anywhere;
  -webkit-user-select:text; user-select:text; caret-color:var(--tint); cursor:text;
}
.oms-editor:empty:before{content:attr(data-placeholder); color:rgba(60,60,67,.3); pointer-events:none}
.oms-editor b{color:var(--red); font-weight:700}
.oms-notice{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  display:flex; align-items:center; gap:12px; padding:8px 14px; border-radius:999px; white-space:nowrap;
  background:rgba(242,242,247,.92); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 2px 4px rgba(0,0,0,.12); font-size:15px;
  animation:oms-pop .2s ease-out;
}
.oms-notice button{color:var(--tint); font-weight:600}
.oms-tools{display:flex; align-items:center; gap:4px}
.oms-tool{display:flex; align-items:center; justify-content:center; width:32px; height:32px; color:var(--tint)}
.oms-tool:disabled{color:rgba(60,60,67,.3)}
.oms-tool svg{width:20px; height:20px}
.oms-counter{margin-left:auto; font-size:13px; color:var(--secondary)}
.oms-counter.is-over{color:var(--red)}
.oms-warn{margin:0; font-size:13px; font-weight:600; color:var(--red)}
.oms-send-row{display:flex; justify-content:center; padding-top:8px}
.oms-send{
  display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:7px 22px; border-radius:999px;
  background:var(--tint); color:#fff; font-size:17px; font-weight:700;
}
.oms-send svg{width:17px; height:17px; fill:currentColor}
.oms-send:disabled{background:rgba(118,118,128,.12); color:rgba(60,60,67,.3)}
.oms-next-free{margin:8px 0 0; text-align:center; font-size:15px; color:var(--secondary)}
.oms-buy-row{display:flex; gap:10px; padding-top:4px}
.oms-buy-row button{flex:1; min-height:50px; display:flex; align-items:center; justify-content:center; gap:6px; border-radius:999px; font-size:15px; font-weight:700}
.oms-buy-row svg{width:16px; height:16px; fill:currentColor}
.oms-buy-row .prominent{background:var(--tint); color:#fff}
.oms-buy-row .bordered{background:rgba(102,84,130,.15); color:var(--tint)}

/* Sending page (full-screen cover) */
.oms-cover{
  position:absolute; z-index:50; inset:0; background:#fff;
  transform:translateY(100%); transition:transform .42s cubic-bezier(.32,.72,0,1);
  display:flex; flex-direction:column; padding:74px 20px 54px;
}
.oms-screen.is-sending .oms-cover{transform:none}
.oms-screen.is-sending .oms-status{color:#000}
.oms-cover-body{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px}
.oms-cover-frame{width:350px; height:350px; border-radius:24px; object-fit:cover; background:#e9dcf3}
.oms-cover-success{width:350px; height:350px; object-fit:contain; animation:oms-pop .3s ease-out}
.oms-cover-label{font-size:17px; font-weight:600}

/* Confirmation dialog (action sheet), menu, popover, toast */
.oms-dialog{position:absolute; z-index:70; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:0 8px 42px; background:rgba(0,0,0,.25); animation:oms-fade .2s}
.oms-dialog-group{border-radius:14px; overflow:hidden; background:rgba(242,242,247,.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); text-align:center; animation:oms-up .3s cubic-bezier(.32,.72,0,1)}
.oms-dialog-head{padding:14px 16px; border-bottom:.5px solid var(--separator)}
.oms-dialog-head b{display:block; font-size:13px; font-weight:600; color:var(--secondary)}
.oms-dialog-head span{display:block; margin-top:2px; font-size:13px; color:var(--secondary)}
.oms-dialog button{display:block; width:100%; height:57px; font-size:20px; color:var(--tint)}
.oms-dialog-group button + button{border-top:.5px solid var(--separator)}
.oms-dialog button.destructive{color:var(--red)}
.oms-dialog .oms-dialog-cancel{margin-top:8px; border-radius:14px; background:#fff; font-weight:600; animation:oms-up .3s cubic-bezier(.32,.72,0,1)}
.oms-menu{
  position:absolute; z-index:70; width:250px; border-radius:13px; overflow:hidden;
  background:rgba(242,242,247,.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 10px 40px rgba(0,0,0,.2); animation:oms-pop .18s ease-out; transform-origin:top right;
}
.oms-menu button{display:flex; align-items:center; justify-content:space-between; width:100%; height:44px; padding:0 16px; font-size:17px}
.oms-menu button + button{border-top:.5px solid var(--separator)}
.oms-menu button.destructive{color:var(--red)}
.oms-menu button:disabled{color:var(--tertiary)}
.oms-menu svg{width:18px; height:18px}
.oms-popover{
  position:absolute; z-index:70; width:300px; padding:16px; border-radius:13px; background:#fff;
  box-shadow:0 8px 30px rgba(0,0,0,.18); animation:oms-pop .18s ease-out;
}
.oms-popover b{display:block; font-size:17px; font-weight:600; margin-bottom:8px}
.oms-popover p{margin:0; font-size:15px; line-height:1.35; color:var(--secondary); white-space:pre-line}
.oms-scrim{position:absolute; z-index:65; inset:0}
.oms-toast{
  position:absolute; z-index:80; left:16px; right:16px; bottom:100px; padding:16px; border-radius:14px;
  background:rgba(242,242,247,.9); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  font-size:17px; animation:oms-fade .2s; cursor:pointer;
}
@keyframes oms-fade{from{opacity:0}}
@keyframes oms-up{from{transform:translateY(100%)}}
@keyframes oms-pop{from{opacity:0; transform:scale(.95)}}
.oms-notice{animation-name:oms-fade}
@media (prefers-reduced-motion: reduce){
  .oms-app,.oms-page,.oms-sheet,.oms-cover,.oms-dim{transition:none}
}