/* ══ CONTENT, NOT ONLY VIDEOS (14 Sep 2026) ═════════════════════════════
   Samuel: "same videos tab but it becomes content, and under it tiktok, ig
   and fb, and under the one opened the videos, stories, posts, carousels."

   The rail already owns WHICH ROOM he is in, so the platform row here is
   the same three marks in the same order - tapping one switches the room,
   it never shows another room's posts inside this one. Under it, the
   formats of the room he is in. Everything is drawn in her hand (the marks
   come from window.DALIA_PLAT, the same inkPlat the rail and the calendar
   use); nothing here is a font glyph. */

.ct-bar{display:flex;flex-direction:column;gap:8px;margin:2px 0 10px}
.ct-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* the three rooms */
.ct-plat{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;
  border-radius:9px;background:transparent;border:none;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--ink-soft,#6b6357);line-height:1;
  position:relative;transition:color .15s}
.ct-plat svg.pl{width:15px;height:15px;display:block;flex:0 0 auto}
.ct-plat:hover{color:var(--ink,#191510)}
.ct-plat.on{color:var(--ink,#191510);background:var(--lav-soft,rgba(175,105,238,.10))}
.ct-plat .ct-n{font-size:11px;opacity:.65}
.ct-plat.off{opacity:.45}
.ct-plat.off .ct-n{display:none}

/* the formats of the room he is standing in */
.ct-fmt{display:inline-flex;align-items:baseline;gap:5px;padding:4px 9px;
  border-radius:8px;background:transparent;border:none;cursor:pointer;
  font:inherit;font-size:12px;color:var(--ink-soft,#6b6357);line-height:1.1;
  position:relative;transition:color .15s}
.ct-fmt:hover{color:var(--ink,#191510)}
.ct-fmt.on{color:var(--ink,#191510)}
.ct-fmt.on > svg.ctink{opacity:1}
.ct-fmt > svg.ctink{position:absolute;left:2px;right:2px;bottom:-2px;height:7px;
  width:calc(100% - 4px);opacity:0;pointer-events:none;overflow:visible}
.ct-fmt .ct-n{font-size:10.5px;opacity:.6}
.ct-fmt[disabled]{opacity:.35;cursor:default}

/* a photo post's card: the slide count in her hand, on the thumb */
.sh-card .ct-slides{position:absolute;right:4px;bottom:4px;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;border-radius:5px;
  background:rgba(25,21,15,.62);color:#fff;font-size:10.5px;line-height:17px;
  letter-spacing:.2px}
.sh-card.ct-story .sh-thumb{border-color:#E0A93C}
.sh-card[data-fmt="photo"] .sh-thumb img,
.sh-card[data-fmt="carousel"] .sh-thumb img{object-position:center top}

/* the slide strip when he opens a photo post */
.ct-lb{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:rgba(18,15,11,.82);
  backdrop-filter:blur(3px);padding:24px 16px}
.ct-lb .ct-close{position:absolute;top:14px;right:16px;width:34px;height:34px;
  border:none;background:transparent;cursor:pointer}
.ct-lb .ct-close svg{width:34px;height:34px;display:block}
.ct-lb .ct-stage{max-height:76vh;max-width:min(92vw,520px);display:block;
  border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.ct-lb .ct-strip{display:flex;gap:6px;margin-top:12px;max-width:min(92vw,560px);
  overflow-x:auto;padding:3px 1px 6px}
.ct-lb .ct-strip img{height:54px;width:auto;border-radius:5px;cursor:pointer;
  opacity:.55;transition:opacity .12s;flex:0 0 auto}
.ct-lb .ct-strip img.on{opacity:1;outline:2px solid #AF69EE;outline-offset:1px}
.ct-lb .ct-cap{color:rgba(255,255,255,.86);font-size:12.5px;margin-top:8px;
  max-width:min(92vw,520px);text-align:center;line-height:1.45}
.ct-lb .ct-cap b{color:#fff;font-weight:600}

/* THE MARKS WERE 338px WIDE (15 Sep 2026, the first real paint in the page):
   the right column has html[data-ia="threads"] #side svg[viewbox]{width:100%;
   height:auto} for its drawings, and an id beats a class - so the three room
   marks and the format underline took the whole column. That rule carries
   three :not(.x) and wins on weight, so these two sizes are !important. */
#side .ct-plat svg.pl{width:15px!important;height:15px!important}
#side .ct-fmt > svg.ctink{width:calc(100% - 4px)!important;height:7px!important}

@media (max-width:760px){
  .ct-plat{padding:5px 8px 5px 7px;font-size:12px}
  .ct-fmt{font-size:11.5px;padding:4px 7px}
  .ct-lb .ct-stage{max-height:68vh}
}