/* Jamyvo 1.8: Home, uncluttered. The picture fills the screen; one rail on the right holds every
   one-tap action (like, comment, repost, save, share); everything else lives in the ⋯ menu. */

/* Top bar: Live · Following / For you · subjects · search. No chips or words over the picture. */
.feed-page .feed-top { padding: calc(var(--safe-t) + 2px) 6px 14px; background: linear-gradient(#0008, #0000); }
.feed-page .feed-top .feed-tabs { gap: 20px; }
.feed-page .feed-top .feed-tabs a { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: #ffffffa6; }
.feed-page .feed-top .feed-tabs a.active { color: #fff; }
.feed-page .feed-top .feed-tabs a.active::after { width: 22px; margin-left: -11px; height: 2.5px; bottom: 2px; }
.feed-page .feed-top-right { gap: 0; }
.feed-page .feed-top .icon-btn.ghost svg.i { width: 25px; height: 25px; filter: drop-shadow(0 1px 3px #0009); }
.feed-page .home-focus-button { position: relative; top: auto; left: auto; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; background: none; backdrop-filter: none; border-radius: 50%; max-width: none; }
.feed-page .home-focus-button svg { width: 24px; height: 24px; }
.feed-page .home-focus-button.has-focus::after { content: ""; position: absolute; top: 9px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #000; }
.focus-chip { position: absolute; z-index: 7; top: calc(var(--safe-t) + 48px); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 120px); min-height: 32px; padding: 0 10px 0 12px; border-radius: 16px; background: #000a; border: 1px solid #ffffff26; color: #fff; font-size: 12px; font-weight: 600; backdrop-filter: blur(12px); }
.focus-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-chip svg.i { width: 13px; height: 13px; opacity: .8; }

/* Caption: name, one or two lines of text, and the sound. */
.feed-page .caption { left: max(12px, env(safe-area-inset-left)); right: 82px; bottom: 18px; gap: 4px; }
.feed-page .cap-byline { gap: 6px; }
.feed-page .cap-author { font-size: 15px; font-weight: 700; min-height: 28px; letter-spacing: -.01em; }
.feed-page .library-label { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 4px; background: #0000005c; border: 1px solid #ffffff2e; color: #f2f2f2; font-size: 10px; font-weight: 600; letter-spacing: .02em; text-shadow: none; }
.feed-page .library-label svg.i { width: 10px; height: 10px; }
.feed-page .cap-details { min-height: 22px; padding: 0; }
.feed-page .cap-title { font-size: 14px; font-weight: 450; line-height: 1.35; -webkit-line-clamp: 2; color: #f4f4f4; }
.feed-page .details-label { display: none; }
.feed-page .reposted-by { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #e8e8e8; }
.feed-page .reposted-by svg.i { width: 13px; height: 13px; }
.feed-page .lesson-link { min-height: 30px; padding: 0 11px; margin-top: 2px; border-radius: 15px; background: #ffffff2b; backdrop-filter: blur(10px); font-size: 12px; text-shadow: none; }
.cap-sound { display: flex; align-items: center; gap: 6px; max-width: 72%; min-height: 26px; color: #fff; font-size: 13px; font-weight: 500; overflow: hidden; }
.cap-sound svg.i { width: 14px; height: 14px; flex: none; }
.cap-sound-track { overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
.cap-sound-track span { display: inline-block; padding-right: 32px; }
.reel.is-active:not(.paused) .cap-sound-track span { animation: cap-marquee 9s linear 1.2s infinite; }
@keyframes cap-marquee { 0%, 8% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.home-keep { display: none; }

/* The rail. */
.feed-page .actions { right: max(4px, env(safe-area-inset-right)); bottom: 16px; gap: 6px; }
.feed-page .act-author { margin-bottom: 14px; }
.feed-page .act-avatar .avatar { --s: 46px; border-width: 1.5px; }
.feed-page .follow-dot { width: 22px; height: 22px; margin-left: -11px; bottom: -10px; box-shadow: 0 2px 6px #0006; }
.feed-page .act { min-width: 52px; min-height: 52px; gap: 1px; font-size: 12px; font-weight: 650; }
.feed-page .act svg.i { width: 31px; height: 31px; stroke-width: 1.9; }
.feed-page .act span.zero { display: none; }
.feed-page .act.reposted svg.i { stroke: #2fd17c; }
.feed-page .act.reposted { color: #fff; }
.feed-page .act.act-off svg.i { opacity: .5; }
.feed-page .act.act-more { min-height: 40px; }
.feed-page .act.act-more svg.i { width: 26px; height: 26px; stroke-width: 2.6; }
.sound-disc { display: grid; place-items: center; width: 44px; height: 44px; margin-top: 6px; border-radius: 50%; background: radial-gradient(circle, #333 0 38%, #111 40% 100%); border: 7px solid #1c1c1c; box-shadow: 0 0 0 1px #ffffff1f, 0 4px 12px #0007; overflow: hidden; }
.sound-disc .avatar { --s: 26px; border: 0; }
.sound-disc .disc-note svg.i { width: 16px; height: 16px; }
.reel.is-active:not(.paused) .sound-disc { animation: disc-spin 5s linear infinite; }
@keyframes disc-spin { to { transform: rotate(360deg); } }

/* Phones: no tool buttons over the picture. Viewer controls are in the ⋯ menu. */
@media (max-width: 767px) {
  .feed-page .stage-tools { display: none; }
  .feed-page .stage { -webkit-touch-callout: none; }
  .feed-page .stage::after { height: 34%; background: linear-gradient(transparent, #000a); }
  .feed-page .sound-hint { top: calc(var(--safe-t) + 60px); }
}
@media (max-width: 767px) and (max-height: 700px) {
  .feed-page .actions { gap: 2px; bottom: 12px; }
  .feed-page .act-author { margin-bottom: 10px; }
  .feed-page .act { min-height: 46px; }
  .feed-page .act svg.i { width: 28px; height: 28px; }
  .sound-disc { width: 38px; height: 38px; border-width: 6px; }
}
@media (max-width: 767px) and (max-height: 600px) { .sound-disc { display: none; } }
@media (max-width: 767px) and (max-height: 500px) and (orientation: landscape) {
  .feed-page .actions { flex-direction: row; gap: 2px; }
  .feed-page .act.act-more { min-height: 46px; }
  .sound-disc { display: none; }
  .feed-page .caption { right: 392px; }
}
@media (max-width: 359px) { .feed-page .feed-top .feed-tabs { gap: 12px; } .feed-page .feed-top .feed-tabs a { font-size: 14px; } }

/* Clear view: nothing but the picture, and one way back. */
.feed-page .clear-control { top: calc(var(--safe-t) + 6px); right: 10px; left: auto; display: inline-flex; align-items: center; gap: 6px; }
.feed-page .clear-control[hidden] { display: none; }
.feed-page .clear-control svg.i { width: 16px; height: 16px; }
.feed-page.clear-view .focus-chip, .feed-page.clear-view .home-focus-button { visibility: hidden; pointer-events: none; }

/* Options menu. */
.reel-menu { gap: 18px; }
.reel-menu-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; }
.reel-menu-quick button { display: grid; justify-items: center; gap: 7px; padding: 4px 0; min-height: 76px; color: #eee; font-size: 11px; }
.reel-menu-quick button > span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: #222; }
.reel-menu-quick svg.i { width: 22px; height: 22px; }
.reel-menu .home-form-actions { flex-wrap: wrap; }
.reel-menu .speed-choices { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.reel-menu .speed-choices button { min-height: 40px; border-radius: 20px; font-size: 12px; }
.reel-menu .home-form-actions .btn { min-height: 44px; font-size: 13px; }

/* Bottom bar: a bolder Create. */
.tabbar .tab-create { width: 46px; height: 32px; border-radius: 10px; background: linear-gradient(120deg, #ff3d6e, #fe2c55 45%, #ff7a3d); box-shadow: 0 4px 14px #fe2c5559; }
.tabbar .tab-create svg.i { width: 22px; height: 22px; stroke-width: 2.8; }

/* Wide screens keep their play, time, sound, fit and full-size controls. */
@media (min-width: 768px) {
  .feed-page .stage-tools [data-act="fit"], .feed-page .stage-tools [data-act="expand"] { display: inline-grid; }
  .feed-page .caption { right: 16px; }
  .feed-page .act svg.i { width: 50px; height: 50px; padding: 12px; }
  .feed-page .act.act-more svg.i { width: 50px; height: 50px; padding: 13px; }
  .focus-chip { top: 58px; }
  .sound-disc { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .reel.is-active:not(.paused) .cap-sound-track span, .reel.is-active:not(.paused) .sound-disc { animation: none; }
}

/* Jamyvo: a thought gets the same stage as a photo or video. */
.feed-page .feed-tabs{min-width:0;overflow-x:auto;scrollbar-width:none;align-items:center;flex:1;justify-content:center}.feed-page .feed-tabs a{white-space:nowrap;flex:none}.feed-page .feed-top>.icon-btn,.feed-page .feed-top-right{flex:none}.feed-page .feed-top-right{min-width:0}.feed-page .text-media-slot{pointer-events:none}.text-reel .stage::after{height:34%;background:linear-gradient(transparent,#080b1599)}
.text-reel-art{position:absolute;inset:0;overflow:hidden;background:#131829}.text-reel-art::after{content:"";position:absolute;width:80%;aspect-ratio:1;right:-40%;top:12%;border:1px solid #ffffff14;border-radius:50%}.text-reel-art i{position:absolute;inset:-20%;background:radial-gradient(ellipse at 0 0,#87956035,transparent 62%),radial-gradient(ellipse at 100% 100%,#b0c18720,transparent 58%)}.text-reel-art>b{position:absolute;left:18px;top:9%;font:250px Georgia,serif;color:#ffffff06;line-height:1}.text-reel-art.tone-1{background:#202018}.text-reel-art.tone-1 i{background:radial-gradient(ellipse at 100% 0,#d7b56732,transparent 65%),radial-gradient(ellipse at 0 100%,#9e6c8830,transparent 58%)}.text-reel-art.tone-2{background:#231821}.text-reel-art.tone-2 i{background:radial-gradient(ellipse at 5% 0,#b7679730,transparent 65%),radial-gradient(ellipse at 100% 100%,#e0a37b18,transparent 60%)}.text-reel-art.tone-3{background:#132224}.text-reel-art.tone-3 i{background:radial-gradient(ellipse at 100% 0,#7cc5b62a,transparent 62%),radial-gradient(ellipse at 0 100%,#7d9ac326,transparent 58%)}
.text-reel-main{position:absolute;inset:calc(var(--safe-t) + 84px) 82px 122px 24px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:20px;z-index:2;pointer-events:none;min-height:0}.text-reel-kicker{font-size:10px;font-weight:750;letter-spacing:.16em;color:#c4c9a8;line-height:1.6}.text-reel-body{font-family:ui-rounded,"Segoe UI",system-ui,sans-serif;font-weight:650;letter-spacing:-.035em;line-height:1.22;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:10;overflow:hidden;color:#faf8f0}.text-reel-body.text-short{font-size:clamp(30px,8.2vw,46px)}.text-reel-body.text-medium{font-size:clamp(25px,6.8vw,36px)}.text-reel-body.text-long{font-size:clamp(20px,5.5vw,27px);line-height:1.36;-webkit-line-clamp:11;font-weight:550;letter-spacing:-.015em}.text-reel-footer{display:flex;flex-wrap:wrap;gap:10px;pointer-events:auto}.text-reel-footer button,.text-parent-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 13px;border-radius:24px;border:1px solid #ffffff30;color:#eeefe3;background:#ffffff09;font-size:12px;font-weight:650;pointer-events:auto}.text-reel-footer button:first-child{background:#e6efc6;color:#1b241e;border-color:#e6efc6}.text-reel-footer svg,.text-parent-link svg{width:15px;height:15px;flex:none}.text-parent-link{max-width:100%;background:#0002;font-size:11px;padding-inline:10px;line-height:1.4}.text-reel .cap-title{font-size:12px;color:#d8ddcc}.text-reel .stage-tools{display:none}.clear-view .text-reel-footer,.clear-view .text-parent-link{visibility:hidden;pointer-events:none}.text-post-menu{display:grid;gap:12px}
@media(min-width:768px){.text-reel-main{inset:55px 25px 115px}.text-reel-body.text-short{font-size:clamp(28px,3vw,44px)}.text-reel-body.text-medium{font-size:clamp(23px,2.5vw,34px)}.text-reel-body.text-long{font-size:clamp(20px,2vw,26px)}.text-reel .caption{right:20px}.text-reel-kicker{font-size:9px}}
@media(max-width:359px){.feed-page .feed-tabs{justify-content:flex-start;gap:12px}.feed-page .feed-top .feed-tabs a{font-size:12px}.feed-page #home-focus{width:36px;min-width:36px}.text-reel-main{left:18px;right:68px;gap:14px}.text-reel-body.text-short{font-size:30px}.text-reel-body.text-long{font-size:19px}.text-reel-footer{gap:6px}.text-reel-footer button{font-size:11px;padding-inline:10px}}
@media(max-height:650px){.text-reel-main{top:68px;bottom:106px;gap:12px}.text-reel-body{-webkit-line-clamp:7}.text-reel-body.text-long{-webkit-line-clamp:9;font-size:20px}.text-reel-kicker{font-size:8px}.text-reel-footer button{min-height:40px}.text-reel .actions{gap:2px}.text-reel .act{min-height:42px}.text-reel .act-author{margin-bottom:8px}}
@media(max-height:500px) and (orientation:landscape){.text-reel-main{inset:54px 20px 82px;gap:8px}.text-reel-body.text-short{font-size:25px;-webkit-line-clamp:4}.text-reel-body.text-medium,.text-reel-body.text-long{font-size:19px;-webkit-line-clamp:5}.text-reel-kicker{display:none}.text-reel-footer{position:absolute;right:0;bottom:0}.text-reel-footer button{min-height:36px;font-size:11px}.text-reel .caption{right:360px}.text-reel .text-parent-link{display:none}}