/* Values measured from x.com (Lights out theme) on 2026-09-02. */
@font-face { font-family: TwitterChirp; src: url("https://abs.twimg.com/responsive-web/client-web/Chirp-Regular.80fda27a.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: TwitterChirp; src: url("https://abs.twimg.com/responsive-web/client-web/Chirp-Medium.f8e2739a.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: TwitterChirp; src: url("https://abs.twimg.com/responsive-web/client-web/Chirp-Bold.ebb56aba.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: TwitterChirp; src: url("https://abs.twimg.com/responsive-web/client-web/Chirp-Heavy.f44ae4ea.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --bg: #000;
  --text: #e7e9ea;
  --dim: #71767b;
  --border: #2f3336;
  --hairline: 0.8px;
  --blue: #1d9bf0;
  --pink: #f91880;
  --green: #00ba7c;
  --hover: rgba(231, 233, 234, 0.1);
  --hover-soft: rgba(231, 233, 234, 0.03);
  --search-bg: #202327;
  --btn-light: #eff3f4;
  --btn-light-text: #0f1419;
  --overlay: rgba(91, 112, 131, 0.4);
  --font: TwitterChirp, -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 20px; font-synthesis: none; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { cursor: default; }
img { display: block; }
.ic { display: block; fill: currentColor; }
b, strong { font-weight: 700; }

/* ---------- shell ---------- */
.shell { display: flex; justify-content: center; min-height: 100vh; }
.col-nav { width: 335px; flex-shrink: 0; }
body:not(.started) .shell { visibility: hidden; }
.col-main { width: 600px; flex-shrink: 0; border-left: var(--hairline) solid var(--border); border-right: var(--hairline) solid var(--border); min-height: 100vh; }
.col-side { width: 350px; flex-shrink: 0; margin-left: 30px; }

/* left nav */
.nav { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 0 8px 12px; margin-left: auto; margin-right: 8px; width: 259px; }
.nav-top { display: flex; flex-direction: column; align-items: flex-start; }
.nav-logo { width: 50px; height: 50px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin: 2px 0 2px; }
.nav-logo:hover { background: var(--hover); }
.nav-logo .ic { width: 30px; height: 30px; }
.nav-item { display: flex; align-items: center; padding: 12px; border-radius: 9999px; font-size: 20px; line-height: 24px; margin: 2px 0; position: relative; }
.nav-item:hover { background: var(--hover); }
.nav-item .ic { width: 26.25px; height: 26.25px; }
.nav-item span { margin: 0 16px 0 20px; }
.nav-item.active { font-weight: 700; }
.nav-badge { position: absolute; top: 4px; left: 24px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9999px; background: var(--blue); color: #fff; font-size: 11px; line-height: 16px; font-weight: 700; text-align: center; border: 1px solid #000; }
.nav-dot { position: absolute; top: 10px; left: 26px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); border: 1px solid #000; }
.nav-post { width: 233px; height: 52px; border-radius: 9999px; background: var(--btn-light); color: var(--btn-light-text); font-size: 17px; font-weight: 700; margin-top: 16px; display: flex; align-items: center; justify-content: center; }
.nav-post:hover { background: #d7dbdc; }
.nav-post .ic { width: 24px; height: 24px; display: none; }
.nav-account { display: flex; align-items: center; padding: 12px; border-radius: 9999px; width: 100%; }
.nav-account:hover { background: var(--hover); }
.nav-account .avatar { width: 40px; height: 40px; }
.nav-account .who { margin-left: 12px; flex: 1; min-width: 0; text-align: left; }
.nav-account .who .n { font-weight: 700; display: flex; align-items: center; gap: 2px; }
.nav-account .who .h { color: var(--dim); }
.nav-account .ic { width: 18.75px; height: 18.75px; }

/* avatar */
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #333; }
.avatar.sm { width: 32px; height: 32px; }
.verified { width: 18.75px; height: 18.75px; fill: var(--blue); flex-shrink: 0; vertical-align: text-bottom; }
.verified.sm { width: 16px; height: 16px; }

/* center header */
.hdr { position: sticky; top: 0; z-index: 20; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hdr-row { height: 53px; display: flex; align-items: center; padding: 0 16px; }
.hdr-row h2 { font-size: 20px; line-height: 24px; font-weight: 700; flex: 1; }
.hdr-back { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 20px 0 -8px; }
.hdr-back:hover { background: var(--hover); }
.hdr-back .ic { width: 20px; height: 20px; }
.hdr-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: -8px; }
.hdr-icon:hover { background: var(--hover); }
.hdr-icon .ic { width: 20px; height: 20px; }
.tabs { display: flex; height: 53px; border-bottom: var(--hairline) solid var(--border); }
.tab { flex: 1; display: flex; justify-content: center; align-items: stretch; color: var(--dim); font-size: 15px; font-weight: 500; }
.tab:hover { background: var(--hover); }
.tab > div { display: flex; align-items: center; position: relative; padding: 0 4px; }
.tab.active { color: var(--text); font-weight: 700; }
.tab.active > div::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 9999px; background: var(--blue); }
.tab-add { flex: 0 0 53px; display: flex; align-items: center; justify-content: center; color: var(--text); font-size: 22px; font-weight: 300; }

/* toggle switch (onboarding) */
.switch { position: relative; width: 36px; height: 20px; border-radius: 9999px; background: #3e4144; transition: background .15s; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.switch.on { background: var(--blue); }
.switch.on::after { transform: translateX(16px); }

/* composer */
.composer { display: flex; padding: 4px 16px 0; border-bottom: var(--hairline) solid var(--border); }
.composer .avatar { margin-top: 8px; }
.composer .cbody { flex: 1; margin-left: 8px; min-width: 0; }
.composer textarea { width: 100%; background: none; border: 0; outline: none; color: var(--text); font-family: inherit; font-size: 20px; line-height: 24px; padding: 12px 0; resize: none; min-height: 48px; overflow: hidden; }
.composer textarea::placeholder { color: var(--dim); }
.ctools { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 8px; border-top: var(--hairline) solid transparent; }
.composer.focused .ctools { border-top-color: var(--border); }
.ctools .icons { display: flex; margin-left: -8px; }
.tool { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--blue); }
.tool:hover { background: rgba(29, 155, 240, 0.1); }
.tool .ic { width: 20px; height: 20px; }
.btn-post { height: 36px; padding: 0 16px; border-radius: 9999px; background: var(--btn-light); color: var(--btn-light-text); font-size: 15px; font-weight: 700; }
.btn-post:hover { background: #d7dbdc; }
.btn-post:disabled { opacity: .5; }
.btn-post:disabled:hover { background: var(--btn-light); }

/* new posts row */
.newrow { display: flex; align-items: center; justify-content: center; height: 48px; border-bottom: var(--hairline) solid var(--border); color: var(--blue); font-size: 15px; width: 100%; }
.newrow:hover { background: var(--hover-soft); }

/* tweet cell */
.cell { display: flex; padding: 12px 16px; border-bottom: var(--hairline) solid var(--border); cursor: pointer; }
.cell:hover { background: var(--hover-soft); }
.cell .avatar { margin-right: 8px; }
.cell .body { flex: 1; min-width: 0; }
.meta { display: flex; align-items: center; min-height: 20px; }
.meta .names { display: flex; align-items: center; min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; }
.meta .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.meta .verified { margin-left: 2px; }
.meta .handle { color: var(--dim); margin-left: 4px; overflow: hidden; text-overflow: ellipsis; }
.meta .time { color: var(--dim); white-space: nowrap; }
.meta .time::before { content: "·"; padding: 0 4px; }
.meta .caret { width: 34px; height: 34px; margin: -7px -8px -7px 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--dim); }
.meta .caret:hover { background: rgba(29,155,240,.1); color: var(--blue); }
.meta .caret .ic { width: 18.75px; height: 18.75px; }
.text { font-size: 15px; line-height: 20px; white-space: pre-wrap; word-wrap: break-word; margin-top: 2px; }
.text .mention { color: var(--blue); }
.mention:hover { text-decoration: underline; }
.replying { color: var(--dim); margin-top: 2px; }
.replying .mention { color: var(--blue); }

/* actions */
.actions { display: flex; justify-content: space-between; margin: 12px -8px -6px 0; max-width: 425px; color: var(--dim); }
.actions.wide { max-width: none; margin-right: 0; }
.act { display: flex; align-items: center; font-size: 13px; line-height: 16px; height: 34.75px; }
.act .icw { width: 34.75px; height: 34.75px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.act .ic { width: 18.75px; height: 18.75px; }
.act .n { padding: 0 4px; margin-left: -4px; min-width: 16px; font-variant-numeric: tabular-nums; }
.act.reply:hover { color: var(--blue); } .act.reply:hover .icw { background: rgba(29,155,240,.1); }
.act.repost:hover { color: var(--green); } .act.repost:hover .icw { background: rgba(0,186,124,.1); }
.act.like:hover { color: var(--pink); } .act.like:hover .icw { background: rgba(249,24,128,.1); }
.act.views:hover, .act.bookmark:hover, .act.share:hover { color: var(--blue); }
.act.views:hover .icw, .act.bookmark:hover .icw, .act.share:hover .icw { background: rgba(29,155,240,.1); }
.act.liked { color: var(--pink); }
/* like microinteraction: heart pops in, a ring expands, seven dots fly out */
.act.like .icw { position: relative; }
.act.like.pop .ic { animation: heartpop .45s cubic-bezier(.2, .9, .3, 1.35); }
@keyframes heartpop { 0% { transform: scale(0); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }
.burst { position: absolute; inset: 0; pointer-events: none; }
.burst::before { content: ''; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 50%; border: 2px solid var(--pink); transform: translate(-50%, -50%); animation: ring .45s ease-out forwards; }
@keyframes ring { 0% { width: 6px; height: 6px; opacity: .9; } 100% { width: 38px; height: 38px; opacity: 0; border-width: 1px; } }
.burst i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--c); transform: rotate(var(--a)) translateY(0); animation: dot .6s ease-out .05s forwards; }
@keyframes dot { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-4px) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-22px) scale(.3); } }
.act.reposted { color: var(--green); }
.act.bookmarked { color: var(--blue); }
.act-group { display: flex; }
.count-bump { animation: bump .25s ease; }
@keyframes bump { 40% { transform: scale(1.15); } }

/* status (focused post) */
.focus { padding: 12px 16px 0; }
.focus .fhead { display: flex; align-items: center; }
.focus .fhead .avatar { margin-right: 12px; }
.focus .fnames { flex: 1; min-width: 0; }
.focus .fnames .name { font-weight: 700; display: flex; align-items: center; gap: 2px; }
.focus .fnames .handle { color: var(--dim); }
.focus .ftext { font-size: 17px; line-height: 24px; margin-top: 12px; white-space: pre-wrap; word-wrap: break-word; }
.focus .ftext .mention { color: var(--blue); }
.focus .qcard { margin-top: 12px; }
.cell .media { display: block; margin-top: 12px; max-width: 100%; max-height: 420px; border-radius: 16px; border: var(--hairline) solid var(--border); background: var(--hover-soft); }
.notif, .cell, .qcard { cursor: pointer; }
.focus .ftime { color: var(--dim); margin: 16px 0; }
.focus .ftime b { color: var(--text); }
.focus .factions { display: flex; justify-content: space-between; border-top: var(--hairline) solid var(--border); border-bottom: var(--hairline) solid var(--border); height: 48px; align-items: center; padding: 0 4px; color: var(--dim); }
.focus .factions .act { height: 48px; }
.focus .factions .act .ic { width: 22.5px; height: 22.5px; }
.focus .factions .act .icw { width: 38.5px; height: 38.5px; }
.sortrow { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: var(--hairline) solid var(--border); font-size: 15px; }
.sortrow .sort { display: flex; align-items: center; gap: 2px; }
.sortrow .sort .ic { width: 18.75px; height: 18.75px; }
.sortrow .quotes { display: flex; align-items: center; color: var(--text); }
.sortrow .quotes .ic { width: 18.75px; height: 18.75px; color: var(--dim); }
.replybox { display: flex; align-items: flex-start; padding: 12px 16px; border-bottom: var(--hairline) solid var(--border); }
.replybox .ph { flex: 1; color: var(--dim); font-size: 20px; line-height: 24px; padding: 8px 0 0 12px; }
.replybox .btn-post { margin-left: 12px; }
.reply-cell .actions { max-width: none; margin-right: 0; }

/* right column */
.side { position: sticky; top: 0; padding-bottom: 64px; }
.search { position: sticky; top: 0; z-index: 10; background: var(--bg); padding: 5px 0 1px; }
.search .box { height: 44px; border-radius: 9999px; background: var(--search-bg); border: 1px solid transparent; display: flex; align-items: center; padding: 0 16px; color: var(--dim); }
.search .box .ic { width: 18px; height: 18px; margin-right: 12px; }
.search .box input { background: none; border: 0; outline: none; color: var(--text); font-family: inherit; font-size: 15px; flex: 1; }
.search .box input::placeholder { color: var(--dim); }
.module { border: var(--hairline) solid var(--border); border-radius: 16px; margin-top: 16px; overflow: hidden; }
.module h3 { font-size: 20px; line-height: 24px; font-weight: 800; padding: 12px 16px; }
.trend { display: flex; justify-content: space-between; min-height: 62px; padding: 12px 16px; cursor: pointer; }
.trend:hover { background: var(--hover-soft); }
.trend .tmeta { color: var(--dim); font-size: 13px; line-height: 16px; }
.trend .tname { font-weight: 700; margin-top: 2px; }
.trend .twith { color: var(--dim); font-size: 13px; line-height: 16px; margin-top: 2px; }
.trend .twith a { color: var(--blue); }
.trend .caret { width: 34px; height: 34px; margin: -8px -8px 0 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--dim); }
.trend .caret .ic { width: 18.75px; height: 18.75px; }
.trend .caret:hover { background: rgba(29,155,240,.1); color: var(--blue); }
.showmore { display: block; width: 100%; text-align: left; padding: 16px; color: var(--blue); font-size: 15px; }
.showmore:hover { background: var(--hover-soft); }
.wtf { display: flex; align-items: center; padding: 12px 16px; cursor: pointer; }
.wtf:hover { background: var(--hover-soft); }
.wtf .who { flex: 1; min-width: 0; margin-left: 8px; }
.wtf .who .n { font-weight: 700; display: flex; align-items: center; gap: 2px; white-space: nowrap; overflow: hidden; }
.wtf .who .h { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-follow { height: 32px; padding: 0 16px; border-radius: 9999px; background: var(--btn-light); color: var(--btn-light-text); font-weight: 700; font-size: 14px; flex-shrink: 0; }
.btn-follow:hover { background: #d7dbdc; }
.btn-follow.following { background: none; color: var(--text); border: 1px solid #536471; }
.footer { padding: 16px; color: var(--dim); font-size: 13px; line-height: 16px; display: flex; flex-wrap: wrap; }
.footer a { margin-right: 12px; }
.footer a:hover { text-decoration: underline; }

/* notifications page */
.notif { display: flex; padding: 12px 16px; border-bottom: var(--hairline) solid var(--border); cursor: pointer; }
.notif:hover { background: var(--hover-soft); }
.notif .nicon { width: 30px; height: 30px; margin-right: 8px; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: center; }
.notif .nicon .ic { width: 30px; height: 30px; }
.notif .nicon.like { color: var(--pink); }
.notif .nicon.repost { color: var(--green); }
.notif .nicon.follow, .notif .nicon.person { color: var(--blue); }
.notif .nbody { flex: 1; min-width: 0; }
.notif .avatars { display: flex; gap: 6px; margin-bottom: 12px; }
.notif .ntext .time { color: var(--dim); }
.notif .ntext .time::before { content: " · "; }
.notif .npost { color: var(--dim); margin-top: 6px; white-space: pre-wrap; word-wrap: break-word; }
.notif.unread { background: rgba(29, 155, 240, 0.08); }
.empty { padding: 32px; text-align: center; color: var(--dim); }

/* toast */
.toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 100; background: var(--blue); color: #fff; font-size: 15px; font-weight: 400; padding: 12px 16px; border-radius: 4px; box-shadow: 0 0 15px rgba(0,0,0,.4); display: flex; gap: 16px; align-items: center; animation: toastin .2s ease; }
.toast a { font-weight: 700; color: #fff; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } }

/* onboarding modal */
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(29, 155, 240, 0.1); border: 1px solid rgba(29, 155, 240, 0.35); font-size: 14px; line-height: 18px; margin-bottom: 20px; }
.notice .ic { width: 18px; height: 18px; color: var(--blue); flex-shrink: 0; margin-top: 1px; }
.btn-x { width: 100%; height: 52px; border-radius: 9999px; background: var(--btn-light); color: var(--btn-light-text); font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-x .ic { width: 22px; height: 22px; }
.btn-x:hover { background: #d7dbdc; }
.btn-x:disabled { opacity: .6; }
.login-opt .od.center { text-align: center; margin-top: 10px; }
.login-opt.nudge { animation: nudge .45s ease; }
.login-opt.nudge .btn-x { box-shadow: 0 0 0 3px var(--blue); }
@keyframes nudge { 20% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 80% { transform: translateX(-3px); } }
.modal .skip { display: block; width: 100%; text-align: center; color: var(--dim); font-size: 14px; margin-top: 14px; }
.modal .skip:hover { text-decoration: underline; color: var(--text); }
.modal .skip[hidden] { display: none; }
/* slider showcase: a screenshot-style mini post */
.showcase { display: flex; gap: 14px; align-items: center; margin-top: 14px; }
.showcase .shot { flex: 0 0 250px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: #000; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.showcase .shead { display: flex; align-items: center; gap: 8px; }
.showcase .shead > .ic { width: 16px; height: 16px; color: var(--text); margin-left: auto; align-self: flex-start; }
.showcase .snames { min-width: 0; }
.showcase .snames .n { font-weight: 700; font-size: 14px; line-height: 18px; display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.showcase .snames .h { color: var(--dim); font-size: 13px; line-height: 16px; }
.showcase .stext { font-size: 15px; line-height: 20px; margin-top: 8px; white-space: pre-wrap; }
.showcase .stime { color: var(--dim); font-size: 12px; line-height: 16px; margin-top: 8px; }
.showcase .stime b { color: var(--text); }
.showcase .scap { flex: 1; min-width: 0; font-size: 13px; line-height: 17px; color: var(--dim); }
.showcase .scap b { display: block; color: var(--text); margin-bottom: 4px; }
@media (max-width: 705px) { .showcase { flex-direction: column; align-items: stretch; } .showcase .shot { flex-basis: auto; } }
.overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 200; display: flex; overflow-y: auto; padding: 16px 0; }
.modal { width: 600px; max-width: 100vw; min-height: 400px; background: var(--bg); border-radius: 16px; position: relative; padding: 0 0 32px; margin: auto; } /* margin:auto centres when short, scrolls when tall */
.modal .mhead { height: 53px; display: flex; align-items: center; justify-content: center; }
.modal .mhead .ic { width: 32px; height: 32px; }
.modal .mbody { padding: 0 80px; }
.modal h1 { font-size: 31px; line-height: 36px; font-weight: 700; margin: 20px 0 8px; }
.modal .sub { color: var(--dim); margin-bottom: 28px; }
.opt { padding: 16px 0; border-top: var(--hairline) solid var(--border); }
.opt:last-of-type { border-bottom: var(--hairline) solid var(--border); }
.opt .orow { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.opt .ol { font-weight: 700; }
.opt .od { color: var(--dim); font-size: 13px; line-height: 16px; margin-top: 2px; }
.opt .ov { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.opt input[type=range] { width: 100%; margin-top: 14px; accent-color: var(--blue); height: 4px; }
.modal .btn-next { width: 100%; height: 52px; border-radius: 9999px; background: var(--btn-light); color: var(--btn-light-text); font-size: 17px; font-weight: 700; margin-top: 28px; }
.modal .btn-next:hover { background: #d7dbdc; }
.modal .btn-next:disabled { opacity: .5; }
.modal .err { color: #f4212e; font-size: 13px; line-height: 16px; margin-top: 8px; }
.profile-chip { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.profile-chip .avatar { width: 32px; height: 32px; }
.profile-chip .who .n { font-weight: 700; font-size: 14px; line-height: 18px; display: flex; align-items: center; gap: 2px; }
.profile-chip .who .h { color: var(--dim); font-size: 13px; line-height: 16px; }
.linkish { color: var(--blue); font-size: 13px; }
.linkish:hover { text-decoration: underline; }

/* short viewports: tighten the nav so the account button stays above the bottom-left controls */
@media (max-height: 880px) { .nav-item { padding: 6px 12px; margin: 0; } .nav-post { margin-top: 8px; height: 44px; } .nav-logo { height: 44px; } }
/* responsive, matching x.com breakpoints */
@media (max-width: 1299px) {
  .col-nav { width: 88px; }
  .nav { width: 72px; margin: 0 8px; padding: 0 4px 12px; align-items: center; }
  .nav-top { align-items: center; }
  .nav-item span, .nav-account .who, .nav-account > .ic { display: none; }
  .nav-post { width: 52px; }
  .nav-post span { display: none; }
  .nav-post .ic { display: block; }
  .nav-account { width: auto; }
}
@media (max-width: 1019px) {
  .col-side { display: none; }
}

/* ---------- not-X labelling ---------- */
.notx { color: var(--dim); font-size: 11px; line-height: 12px; margin: -4px 0 6px 10px; letter-spacing: .01em; }
.disclaimer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--blue); color: #fff; font-size: 14px; line-height: 20px; padding: 10px 44px 10px 16px; text-align: center; }
.disclaimer a { color: #fff; font-weight: 700; text-decoration: underline; }
.disclaimer button { position: absolute; right: 12px; top: 8px; width: 24px; height: 24px; color: #fff; font-size: 14px; border-radius: 50%; }
.disclaimer button:hover { background: rgba(255,255,255,.2); }

/* ---------- bottom-left controls: mode switch + try a new post ---------- */
.controls { position: fixed; left: 16px; bottom: 16px; z-index: 95; display: flex; align-items: center; gap: 6px; }
body:not(.started) .controls { display: none; }
body:has(#disclaimer) .controls { bottom: 56px; }
.modes { display: flex; border: 1px solid var(--border); border-radius: 9999px; padding: 2px; gap: 2px; background: rgba(0,0,0,.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn-trynew { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 9999px; border: 1px solid var(--border); background: rgba(0,0,0,.85); color: var(--text); font-size: 12px; line-height: 16px; font-weight: 700; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn-trynew:hover { background: var(--hover); }
.btn-trynew .ic { width: 16px; height: 16px; }
.btn-ctl { display: flex; align-items: center; gap: 6px; height: 30px; min-width: 30px; padding: 0 8px; border-radius: 9999px; border: 1px solid var(--border); background: rgba(0,0,0,.85); color: var(--dim); font-size: 12px; line-height: 16px; font-weight: 700; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn-ctl:hover { background: var(--hover); color: var(--text); }
.btn-ctl .ic { width: 16px; height: 16px; }
.btn-ctl.on { color: var(--text); }
.btn-ctl.rec .ic { color: #f4212e; }
.btn-ctl.rec.on { border-color: #f4212e; color: #fff; }
.btn-ctl.rec.on .ic { animation: blink 1s steps(2) infinite; }
@keyframes blink { to { opacity: .2; } }
.btn-trynew:disabled, .btn-ctl:disabled { opacity: .5; cursor: default; }
body.started .nav { padding-bottom: 60px; }
body.started:has(#disclaimer) .nav { padding-bottom: 100px; }
@media (max-width: 1299px) { .controls { flex-wrap: wrap; width: 150px; gap: 6px; } .controls .modes { order: -1; } body.started .nav { padding-bottom: 150px; overflow-y: auto; scrollbar-width: none; } body.started:has(#disclaimer) .nav { padding-bottom: 190px; } }
.mode { font-size: 12px; line-height: 16px; padding: 3px 10px; border-radius: 9999px; color: var(--dim); font-weight: 500; }
.mode:hover { color: var(--text); background: var(--hover); }
.mode.on { background: var(--btn-light); color: var(--btn-light-text); font-weight: 700; }

/* ---------- hype ---------- */
.roll { animation: roll .28s cubic-bezier(.2,.8,.2,1); display: inline-block; }
@keyframes roll { from { transform: translateY(8px); opacity: 0; } }
#banners { position: fixed; top: 12px; right: 12px; z-index: 300; width: 360px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.banner { display: flex; align-items: center; gap: 12px; background: rgba(30, 30, 32, .92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 12px 14px; box-shadow: 0 8px 30px rgba(0,0,0,.5); color: #fff; animation: bannerin .35s cubic-bezier(.2,.9,.3,1.2); }
.banner.out { animation: bannerout .25s ease forwards; }
@keyframes bannerin { from { transform: translateX(40px); opacity: 0; } }
@keyframes bannerout { to { transform: translateX(40px); opacity: 0; } }
.banner .b-app { width: 38px; height: 38px; border-radius: 9px; background: #000; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.banner .b-app .ic { width: 22px; height: 22px; }
.banner .b-body { flex: 1; min-width: 0; }
.banner .b-title { font-size: 13px; line-height: 16px; font-weight: 700; display: flex; justify-content: space-between; }
.banner .b-title span { color: rgba(255,255,255,.5); font-weight: 400; }
.banner .b-text { font-size: 14px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif .nicon.milestone, .notif .nicon.quote { color: var(--blue); }
.notif .nicon.earnings { color: var(--green); }
.notif .nicon.quote { color: var(--green); }

/* quote card */
.qcard { border: 1px solid var(--border); border-radius: 16px; padding: 12px; margin-top: 12px; }
.qcard:hover { background: var(--hover-soft); }
.qcard .qhead { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; }
.qcard .avatar.xs { width: 20px; height: 20px; margin-right: 4px; }
.qcard .name { font-weight: 700; }
.qcard .handle, .qcard .time { color: var(--dim); }
.qcard .time::before { content: "·"; padding: 0 4px; }
.qcard .qtext { margin-top: 4px; white-space: pre-wrap; word-wrap: break-word; }

/* today's news */
.news { padding: 12px 16px 16px; }
.news .ntitle { font-weight: 700; }
.news .nmeta { color: var(--dim); font-size: 13px; line-height: 16px; margin-top: 4px; }

/* x.com uses a 290px right rail with a 20px gap below 1280px */
@media (max-width: 1279px) { .col-side { width: 290px; margin-left: 20px; } }
body:has(#disclaimer) .side { padding-bottom: 100px; }

/* live preview of the recording canvas */
.rec-preview { position: fixed; left: 16px; bottom: 60px; z-index: 95; width: 270px; height: 270px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 8px 30px rgba(0,0,0,.6); background: #000; }
body:has(#disclaimer) .rec-preview { bottom: 100px; }
.rec-preview canvas { display: block; width: 270px; height: 270px; }
.rec-preview .rec-live { position: absolute; top: 10px; left: 12px; color: #f4212e; font-size: 12px; font-weight: 700; letter-spacing: .06em; animation: blink 1s steps(2) infinite; }

/* mobile tab bar + FAB (hidden above 705px) */
.tabbar { display: none; }
@media (max-width: 705px) {
  :root { --tabbar: 53px; --chrome: var(--tabbar); }
  body:has(#disclaimer) { --chrome: calc(var(--tabbar) + 50px); } /* disclaimer wraps to two lines on phones */
  .col-nav { display: none; }
  .col-main { width: 100%; border: 0; padding-bottom: calc(var(--chrome) + 56px); }
  .modal .mbody { padding: 0 20px; }
  .modal h1 { font-size: 26px; line-height: 30px; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--tabbar); z-index: 96; display: flex; align-items: stretch; background: rgba(0,0,0,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: var(--hairline) solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
  .tb { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; color: var(--text); }
  .tb .ic { width: 26px; height: 26px; }
  .tb .nav-badge { left: calc(50% + 2px); top: 8px; }
  .tb .nav-dot { left: calc(50% + 4px); top: 12px; }
  .fab { position: fixed; right: 16px; bottom: calc(var(--chrome) + 16px); width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.5); z-index: 97; }
  .fab .ic { width: 24px; height: 24px; }
  /* disclaimer sits above the tab bar, compact */
  .disclaimer { bottom: var(--tabbar); font-size: 12px; line-height: 16px; padding: 9px 36px 9px 10px; z-index: 96; }
  .disclaimer button { top: 5px; right: 8px; }
  /* controls: single icon row above the chrome, left of the FAB */
  .controls, body:has(#disclaimer) .controls { left: 8px; bottom: calc(var(--chrome) + 12px); width: auto; flex-wrap: nowrap; gap: 6px; }
  .controls .lbl { display: none; }
  .btn-trynew, .btn-ctl { padding: 0 7px; }
  .toast { bottom: calc(var(--chrome) + 84px); left: 8px; right: 8px; transform: none; width: auto; justify-content: center; }
  @keyframes toastin { from { opacity: 0; transform: translateY(8px); } }
  /* push banners: one compact line across the top */
  #banners { left: 8px; right: 8px; top: 8px; width: auto; }
  .banner { padding: 8px 12px; border-radius: 14px; }
  .banner .b-app { width: 30px; height: 30px; }
  .banner .b-text { -webkit-line-clamp: 1; font-size: 13px; }
  .banner .avatar.sm { width: 28px; height: 28px; }
  .modal { border-radius: 0; min-height: 100vh; }
  .overlay { padding: 0; }
  /* action row must fit a 310px cell body */
  .rec-preview, body:has(#disclaimer) .rec-preview { left: 8px; bottom: calc(var(--chrome) + 52px); width: 180px; height: 180px; }
  .rec-preview canvas { width: 180px; height: 180px; }
  .actions { max-width: none; margin-right: 0; }
  .act { font-size: 12px; }
  .act .icw { width: 30px; height: 30px; }
  .act .n { padding: 0 2px; margin-left: -2px; min-width: 0; }
}

/* conversation fold: X shows a ranked block, then "Show more replies", then the probable-spam link */
.morerow { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; border-bottom: var(--hairline) solid var(--border); }
.btn-more { border: var(--hairline) solid var(--border); background: transparent; color: var(--blue); font-weight: 700; font-size: 15px; padding: 8px 16px; border-radius: 9999px; cursor: pointer; }
.btn-more:hover { background: rgba(29, 155, 240, .1); }
.spamfold { color: var(--dim); font-size: 15px; }
.banner.big .b-text { font-weight: 700; }

/* affiliate badge: org logo in a rounded square after the checkmark */
.affil { width: 16px; height: 16px; border-radius: 3px; margin-left: 2px; flex-shrink: 0; vertical-align: text-bottom; object-fit: cover; }
.affil.sm { width: 14px; height: 14px; }
/* profile hover card on the post page author */
.focus .fnames { position: relative; }
.hcard { position: absolute; left: -56px; top: 100%; margin-top: 8px; width: 300px; background: var(--bg, #000); color: var(--text); border-radius: 16px; padding: 12px 16px 16px; box-shadow: 0 0 15px rgba(255, 255, 255, .2), 0 0 3px 1px rgba(255, 255, 255, .15); z-index: 30; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .15s .4s, transform .15s .4s; font-size: 15px; }
.fnames:hover .hcard { opacity: 1; pointer-events: auto; transform: none; }
.hcard .avatar { width: 64px; height: 64px; margin-bottom: 8px; }
.hcard .hname { font-weight: 800; display: flex; align-items: center; gap: 2px; }
.hcard .hhandle { color: var(--dim); }
.hcard .hbio { margin-top: 8px; }
.hcard .hstats { display: flex; gap: 16px; margin-top: 10px; color: var(--dim); }
.hcard .hstats b { color: var(--text); font-weight: 700; }