/* The feed reveals the handset artwork itself as it closes. No black panel
   covers the glass, so the screen and its edges keep exactly the same tone. */
.time-scene { container-type: inline-size; --time-radius: 110cqw; }
.time-content { position: absolute; inset: 11% 5% 12%; overflow: hidden; color: #eeeff2; }
.time-content p { margin: 0; }
.time-content svg { display: block; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.time-feed { position: absolute; inset: 0; font-family: Arial,Helvetica,sans-serif; mask-image: radial-gradient(circle at 50% 44%,#000 var(--time-radius),#000b calc(var(--time-radius) + 10cqw),transparent calc(var(--time-radius) + 30cqw)); }
.time-x-header { position: relative; display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 8px 6px; }
.time-x-profile { display: block; width: 29px; height: 29px; border-radius: 50%; overflow: hidden; }
.time-x-profile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.time-x-mark { position: absolute; left: 50%; top: 4px; translate: -50% 0; width: 25px; height: 25px; background: #f0f2f4; mask: url('/assets/reply-apps/x.svg') center / contain no-repeat; }
.time-x-header > svg { width: 18px; height: 18px; color: #aeb3b8; }
.time-x-tabs { display: flex; justify-content: space-around; height: 35px; border-bottom: 1px solid #ffffff20; color: #82878c; font-size: 12px; font-weight: 600; }
.time-x-tabs > span { position: relative; display: flex; align-items: center; gap: 4px; padding-inline: 14px; }
.time-x-tab-active svg { width: 11px; height: 11px; stroke-width: 1.5; }
.time-x-tabs .time-x-tab-active { color: #eff3f4; }
.time-x-tab-active::after { content: ''; position: absolute; bottom: 0; height: 3px; width: 43px; border-radius: 3px; background: #eff3f4; }
/* Native feed clipping meets a solid navigation divider: no decorative fade. */
.time-feed-window { position: absolute; top: 78px; left: 0; right: 0; bottom: 46px; overflow: hidden; }
.time-feed-track { position: relative; will-change: auto; }
.time-post { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: start; gap: 8px; padding: 12px 5px 0; border-bottom: 1px solid #2f3336; }
.time-post-body { min-width: 0; }
.time-post-header { display: flex; align-items: center; gap: 3px; min-height: 18px; font-size: clamp(10px,3.25cqw,12px); line-height: 1.35; white-space: nowrap; }
.time-post-header strong { min-width: 0; max-width: 50%; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.time-post-header .time-post-handle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #71767b; }
.time-post-header time { flex-shrink: 0; color: #71767b; font-size: .88em; }
.time-post-header > svg:last-child { margin-left: auto; width: 13px; height: 13px; flex-shrink: 0; color: #71767b; }
.time-post-header .time-verified { width: 12px; height: 12px; flex-shrink: 0; fill: #1d9bf0; stroke: none; }
.time-post-header .time-verified-check { fill: none; stroke: #070707; stroke-width: 2.4; }
.time-verified--government .time-verified { fill: #c7cacc; }
.time-verified--business .time-verified { fill: #e4b656; }
.time-post-avatar { display: block; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; }
.time-post-avatar--square { border-radius: 5px; }
.time-post-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.time-post .time-post-text { margin: 3px 0 10px; color: #e7e9ea; font-size: clamp(12px,3.9cqw,14px); line-height: 1.35; }
.time-show-more { color: #1d9bf0; white-space: nowrap; }
.time-post-photo { display: block; width: 100%; height: auto; border: 1px solid #2f3336; border-radius: 12px; }
.time-post-video { position: relative; }
.time-video-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: #0008; }
.time-video-play svg { width: 21px; height: 21px; fill: #fff; stroke: none; }
.time-video-duration { position: absolute; bottom: 7px; left: 7px; padding: 2px 5px; border-radius: 3px; background: #000b; color: #fff; font-size: 10px; font-variant-numeric: tabular-nums; }
.time-post-actions { display: flex; justify-content: space-between; align-items: center; gap: 5px; height: 35px; color: #71767b; }
.time-post-actions > span { display: flex; align-items: center; gap: 4px; font-size: 9px; }
.time-post-actions svg { width: 15px; height: 15px; flex-shrink: 0; stroke-width: 1.65; }
.time-x-nav { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; align-items: center; height: 46px; border-top: 1px solid #2f3336; }
.time-x-nav svg { width: 23px; height: 23px; stroke-width: 1.8; }
.time-x-nav .time-nav-home { fill: currentColor; stroke: none; }
.time-break { position: absolute; inset: 0; }
.time-orb { position: absolute; top: 44%; left: 50%; width: 42cqw; max-width: 152px; aspect-ratio: 1; margin: 0; translate: -50% -50%; opacity: 0; visibility: hidden; }
.time-orb img { display: block; width: 100%; height: 100%; animation: time-orb-breathe 4.6s ease-in-out 3 both paused; }
.time-scene[data-active="true"] .time-orb img { animation-play-state: running; }
.time-message { position: absolute; top: calc(44% + 23cqw); left: 3%; right: 3%; text-align: center; opacity: 0; visibility: hidden; }
.time-message p { font-size: clamp(17px,5.5cqw,21px); font-weight: 400; line-height: 1.4; letter-spacing: -.035em; }
.time-word { display: inline-block; opacity: 0; visibility: hidden; }
.time-message .time-break-invitation { margin-top: 12px; color: #a8afb5; font-size: clamp(14px,4.7cqw,18px); letter-spacing: -.02em; }
@keyframes time-orb-breathe { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.035); filter: brightness(1.12); } }
.time-reader-message { max-width: 340px; margin: 28px auto; text-align: center; }
.time-reader-message .reader-orb { width: 128px; margin: 0 auto 16px; }
.time-reader-message p { margin: 10px 0; }
.side-narrative .time-copy > .copy-detail { text-wrap: balance; }
.is-compact .time-content { bottom: 18%; }
.time-post-sources { color: #a5a6a8; font-size: 13px; }
.time-post-sources a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width:760px) {
  .time-x-header { height: 38px; }
  .time-x-mark { width: 23px; height: 23px; }
  .time-x-tabs { height: 32px; }
  .time-feed-window { top: 71px; }
  .time-post { grid-template-columns: 30px minmax(0,1fr); gap: 7px; padding-inline: 3px; }
  .time-post-avatar { width: 30px; height: 30px; }
  .time-post-header { gap: 3px; }
  .time-post-header time { font-size: .82em; }
  .time-post-actions { gap: 4px; }
  .time-post-actions > span { gap: 3px; }
  .time-post-actions svg { width: 14px; height: 14px; }
  .time-message { left: 1%; right: 1%; }
}
@media (prefers-reduced-motion: reduce) {
  .time-feed { mask-image: none; }
  .time-orb img { animation: none; }
}