/* Weird Twitter Time Machine — styled after twitter.com circa 2012-2014 */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #c0deed;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #333;
}

a { color: #0084b4; text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: #999; font-weight: normal; }

/* ---- top bar ---- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 40px;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid #cbd6db;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  z-index: 10;
}
.topbar-inner {
  max-width: 865px;
  margin: 0 auto;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.menu-btn { /* opens the sidebar drawer; only shown on small screens */
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: #555;
  padding: 8px 10px 8px 2px;
  cursor: pointer;
}
.topnav { display: flex; gap: 4px; flex: 1; }
.topnav a {
  color: #666;
  font-weight: bold;
  font-size: 13px;
  padding: 10px 12px;
  line-height: 20px;
}
.topnav a:hover, .topnav a.active { color: #333; text-decoration: none; }
.topnav a.active { border-bottom: 3px solid #55acee; }
.nav-ico { font-size: 14px; }
.bird { display: flex; align-items: center; padding: 0 14px; position: relative; z-index: 20; }
.bird img {
  height: 26px;
  width: auto;
  display: block;
  transition: transform 0.18s ease;
  transform-origin: 50% 0; /* grow downward out of the bar */
}
.bird:hover img { transform: scale(5.5); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.18)); }
.topsearch { flex: 1; display: flex; justify-content: flex-end; }
.topsearch input {
  width: 220px;
  padding: 5px 12px;
  border: 1px solid #cbd6db;
  border-radius: 15px;
  background: #f5f8fa;
  font-size: 12px;
  outline: none;
}

/* ---- layout ---- */
.page {
  max-width: 865px;
  margin: 54px auto 40px;
  display: flex;
  gap: 13px;
  padding: 0 10px;
  align-items: flex-start;
}
.sidebar {
  width: 302px;
  flex-shrink: 0;
  /* stay put while the stream scrolls; scroll internally if the viewport is short */
  position: sticky;
  top: 54px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.stream { flex: 1; min-width: 0; }

/* ---- sidebar modules ---- */
.module {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 10px;
}
.module h2 { font-size: 14px; color: #333; margin-bottom: 8px; }

.timemachine .tm-blurb { font-size: 12px; color: #666; margin-bottom: 6px; }
.tm-controls { display: flex; gap: 4px; }
.tm-controls input[type="date"] {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid #cbd6db;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
}
.tm-controls button, .tm-random {
  background: linear-gradient(#fff, #f0f0f0);
  border: 1px solid #cbd6db;
  border-radius: 4px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}
.tm-controls button:hover, .tm-random:hover { background: #f0f8fc; border-color: #a8c7d8; }
.tm-random { display: block; width: 100%; margin-top: 6px; padding: 6px; }
.tm-count { font-size: 12px; color: #999; margin-top: 8px; }
.tm-mode { font-size: 11px; color: #bbb; margin-top: 4px; }
.tm-autoscroll {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: #666;
  margin-top: 8px;
  cursor: pointer;
  user-select: none;
}
.tm-autoscroll[hidden] { display: none; } /* display:flex would beat the hidden attribute */

.likes .li-blurb { font-size: 12px; color: #666; margin-bottom: 8px; }
.likes .li-blurb code { background: #f0f4f5; border-radius: 3px; padding: 0 3px; }
.likes input[type="file"] { font-size: 12px; width: 100%; }
.li-status { font-size: 12px; color: #666; margin-top: 8px; }
.li-progress { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.li-progress[hidden] { display: none; }
.li-progress-track {
  flex: 1;
  height: 6px;
  background: #eef3f5;
  border-radius: 3px;
  overflow: hidden;
}
.li-progress-fill { height: 100%; background: #55acee; width: 0; transition: width 0.15s; }
.li-progress span { font-size: 11px; color: #999; }
.li-view {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: bold;
}
.state-box.likes-back { padding: 10px 12px; text-align: left; font-size: 13px; }
.state-box.likes-back a { font-weight: bold; }

.year-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 12px;
}
.year-list a { font-size: 13px; font-weight: bold; }
.year-list a.active {
  color: #333;
  border-bottom: 2px solid #55acee;
  text-decoration: none;
}

.trends ul { list-style: none; }
.trends li { padding: 3px 0; font-size: 13px; font-weight: bold; }

.module-footer { font-size: 11px; color: #999; padding: 0 12px; line-height: 1.6; }

/* ---- timeline ---- */
.stream-header {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #e8e8e8;
  border-radius: 6px 6px 0 0;
  padding: 10px 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.stream-header h1 { font-size: 14px; }
.stream-filter { margin-left: auto; font-size: 12px; color: #999; }
.stream-filter b { color: #333; }
.timeline {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: none;
  border-radius: 0 0 6px 6px;
}

.tweet {
  display: flex;
  gap: 9px;
  padding: 9px 12px;
  border-bottom: 1px solid #e8e8e8;
  cursor: default;
  scroll-margin-top: 48px; /* clear the fixed top bar when jumped to */
}
.tweet:last-child { border-bottom: none; }
.tweet:hover { background: #f6f9fb; }
.tweet .avatar { width: 48px; height: 48px; border-radius: 5px; flex-shrink: 0; }
.tweet-body { flex: 1; min-width: 0; }
.tweet.filtered-out { display: none; }
.tweet-head { display: flex; align-items: baseline; gap: 5px; }
.tweet-head .fullname { font-weight: bold; color: #333; font-size: 14px; }
.tweet-head .username { color: #999; font-size: 12px; }
.tweet-head .fullname, .tweet-head .username { cursor: pointer; }
.tweet-head .fullname:hover, .tweet-head .username:hover { text-decoration: underline; color: #0084b4; }
.tweet-head .verified {
  /* the old blue verified tick, worn by the news-of-the-day context accounts */
  flex-shrink: 0;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #4a99e9;
  color: #fff;
  font-size: 9px; line-height: 13px;
  text-align: center;
  align-self: center;
}
.tweet-head .act-block, .tweet-head .act-follow { visibility: hidden; font-size: 11px; font-weight: bold; color: #999; }
.tweet-head:hover .act-block, .tweet-head:hover .act-follow { visibility: visible; }
.tweet-head .act-block:hover { color: #d40d12; text-decoration: none; }
.tweet-head .act-follow:hover { color: #0084b4; text-decoration: none; }
.tweet-head .act-follow.following { visibility: visible; color: #3b88c3; }
.tweet-head .timestamp { margin-left: auto; color: #999; font-size: 12px; white-space: nowrap; }
.tweet-head .timestamp a { color: #999; }
.reply-context { font-size: 12px; color: #999; margin: 1px 0; }
.tweet-text {
  font-size: 14px;
  line-height: 1.35;
  color: #333;
  margin: 2px 0 4px;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.tweet-media img {
  max-width: 100%;
  max-height: 360px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  margin: 4px 0;
}

.tweet-actions {
  display: flex;
  align-items: baseline; /* the ↗ in "View original" has taller font metrics */
  gap: 18px;
  font-size: 12px;
  margin-top: 2px;
  visibility: hidden;
}
.tweet:hover .tweet-actions, .tweet-actions.pinned { visibility: visible; }
.tweet-actions a { color: #999; font-weight: bold; }
.tweet-actions a:hover { color: #0084b4; text-decoration: none; }
.tweet-stats { display: flex; gap: 14px; font-size: 12px; color: #999; margin-top: 3px; }
.tweet-stats b { color: #666; }
.star { color: #ffac33; }

/* ---- replies from the future ---- */
.future-replies {
  margin-top: 7px;
  border-left: 2px solid #dbe8ee;
  padding-left: 9px;
}
.future-reply { padding: 5px 0; font-size: 13px; }
.future-reply .fr-head { font-size: 11px; color: #999; margin-bottom: 1px; }
.future-reply .fr-head b { color: #666; }
.future-reply .fr-badge {
  background: #dbe8ee;
  color: #517a8c;
  border-radius: 3px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: bold;
}

.reply-composer { margin-top: 7px; }
.reply-composer textarea {
  width: 100%;
  height: 54px;
  padding: 6px 8px;
  border: 1px solid #a8c7d8;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  outline: none;
}
.reply-composer textarea:focus { border-color: #55acee; }
.rc-row { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.rc-row input {
  flex: 1;
  padding: 4px 8px;
  border: 1px solid #cbd6db;
  border-radius: 4px;
  font-size: 12px;
}
.rc-count { font-size: 11px; color: #999; }
.rc-count.over { color: #d40d12; font-weight: bold; }
.rc-row .rc-send {
  background: linear-gradient(#55acee, #3b88c3);
  border: 1px solid #3b88c3;
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 5px 14px;
  cursor: pointer;
}
.rc-send:disabled { opacity: 0.5; cursor: not-allowed; }
.rc-note { font-size: 11px; color: #999; margin-top: 3px; }
.rc-error { font-size: 11px; color: #d40d12; margin-top: 3px; }

/* ---- blocked accounts page ---- */
.blocked-row {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid #e8e8e8;
}
.blocked-row:last-child { border-bottom: none; }
.blocked-row:hover { background: #f6f9fb; }
.blocked-row .avatar { width: 48px; height: 48px; border-radius: 5px; flex-shrink: 0; }
.blocked-who { display: flex; flex-direction: column; min-width: 0; }
.blocked-who .fullname { font-weight: bold; color: #333; font-size: 14px; }
.blocked-who .username { color: #999; font-size: 12px; }
.bl-unblock {
  margin-left: auto;
  background: linear-gradient(#fff, #f0f0f0);
  border: 1px solid #cbd6db;
  border-radius: 4px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}
.bl-unblock:hover { background: #f0f8fc; border-color: #a8c7d8; }

/* ---- Phone Mode ----
   The stream sits inside .phone-frame > .phone-screen, which are inert
   plain divs until body.phone-mode is set. Each generation gets a ph-*
   class on the frame; --bezel/--side drive the chassis geometry. */

.phonemode .pm-toggle {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  user-select: none;
}
.phonemode .pm-sub { margin-top: 6px; padding-left: 18px; }

/* bathroom at work: the whole page becomes the stall floor, phone held
   over the tile (the floor stays put while the timeline scrolls) */
body.bathroom-mode {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body.bathroom-1 { background-image: url("../assets/floor1.jpg"); }
body.bathroom-2 { background-image: url("../assets/floor2.jpg"); }
body.phone-mode.bathroom-mode .stream { padding: 30px 0 24px; }
/* dim stall lighting at the viewport edges (under the topbar) */
body.bathroom-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.35);
  z-index: 5;
}
body.phone-mode.bathroom-mode .phone-caption {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  padding: 2px 10px;
  color: #444;
}
/* the floor shows through the sidebar too */
body.bathroom-mode .sidebar .module {
  background: rgba(255, 255, 255, 0.82);
}

.phone-earpiece, .phone-notch, .phone-statusbar,
.phone-home, .phone-homebar, .phone-caption { display: none; }

body.phone-mode .stream {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.phone-mode .phone-frame {
  --bezel: 64px;
  --side: 14px;
  --screen-w: 320px;
  --screen-h: 480px;
  position: relative;
  padding: var(--bezel) var(--side);
  border-radius: 42px;
  background: linear-gradient(#141618, #060708);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), 0 16px 36px rgba(0, 0, 0, 0.35);
}
body.phone-mode .phone-screen {
  position: relative;
  width: var(--screen-w);
  max-width: calc(100vw - 64px);
  height: min(var(--screen-h), max(380px, calc(100vh - 240px)));
  overflow-y: auto;
  scrollbar-width: none;
  background: #c0deed;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #000;
}
body.phone-mode .phone-screen::-webkit-scrollbar { display: none; }
body.phone-mode .stream-header,
body.phone-mode .timeline { border-left: none; border-right: none; border-radius: 0; }
body.phone-mode .tweet { scroll-margin-top: 26px; }
body.phone-mode .phone-caption {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: #666;
  text-align: center;
}

/* chassis furniture */
body.phone-mode .phone-earpiece {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--bezel);
}
.ph-speaker {
  width: 54px; height: 7px;
  border-radius: 4px;
  background: #17191c;
  box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ph-camera {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #101318;
  box-shadow: inset 0 0 2px 1px #010309, 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ph-2007 .ph-camera, .ph-3g .ph-camera { display: none; } /* no front camera yet */

body.phone-mode .phone-home {
  display: block;
  position: absolute;
  left: 50%;
  bottom: calc((var(--bezel) - 46px) / 2);
  transform: translateX(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2b2f34, #0a0c0e 70%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 1px rgba(255, 255, 255, 0.12);
}
body.phone-mode .phone-home::after { /* the rounded-square app glyph */
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 15px; height: 15px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
}

/* status bar (lives inside the screen, stays put while tweets scroll) */
body.phone-mode .phone-statusbar {
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 6;
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: bold;
}
.ph-cell, .ph-right { flex: 1; display: flex; align-items: center; gap: 4px; }
.ph-right { justify-content: flex-end; }
.ph-signal { font-style: normal; }
.ph-batt {
  display: inline-block;
  position: relative;
  width: 20px; height: 9px;
  padding: 1px;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.ph-batt::before {
  content: "";
  display: block;
  height: 100%;
  width: 80%;
  border-radius: 1px;
  background: currentColor;
}
.ph-batt::after { /* the little terminal nub */
  content: "";
  position: absolute;
  right: -3px; top: 2px;
  width: 2px; height: 3px;
  background: currentColor;
  border-radius: 0 1px 1px 0;
}

/* skeuomorphic status bar, iOS 1-6 (through 2012) */
body.phone-mode .ios-classic .phone-statusbar {
  background: linear-gradient(#697380, #3a424c 49%, #262c34 50%, #333b44);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}
body.phone-mode .ios-classic .ph-signal::before { content: "▁▃▄▆█"; font-size: 8px; letter-spacing: 0.5px; }
body.phone-mode .ios-classic .ph-batt::before { background: linear-gradient(#d4f0a2, #74c044 45%, #4e9a2e); }

/* flat status bar, iOS 7+ (2013 on) */
body.phone-mode .ios-flat .phone-statusbar {
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}
body.phone-mode .ios-flat .ph-signal::before { content: "●●●●○"; font-size: 7px; letter-spacing: 1px; }

/* ---- the generations ----
   Every selector carries body.phone-mode so it outranks the base
   .phone-frame / .phone-screen / chrome rules above. */

/* 2007 — the original: aluminum back peeking around a black face */
body.phone-mode .ph-2007 {
  --bezel: 66px;
  border: 4px solid #c6cacf;
  border-radius: 38px;
  background: linear-gradient(#17191b, #070808);
}

/* 2008-09 — 3G / 3GS: glossy black plastic, chrome bezel ring */
body.phone-mode .ph-3g {
  --bezel: 70px;
  border: 3px solid #dfe2e6;
  border-radius: 44px;
  background: linear-gradient(155deg, #2a2c30, #050607 60%);
}

/* 2010-11 — 4 / 4S: flat glass, steel antenna band, squarer corners */
body.phone-mode .ph-4 {
  --bezel: 60px;
  border: 4px solid #92979d;
  border-radius: 28px;
  background: linear-gradient(#121417, #060708);
}

/* 2012 — 5: taller 4-inch screen, black & slate */
body.phone-mode .ph-5, body.phone-mode .ph-5s { --bezel: 56px; --side: 11px; --screen-h: 568px; border-radius: 34px; }
body.phone-mode .ph-5 { background: linear-gradient(#2e3238, #111318); }

/* 2013 — 5s: silver & white, gold Touch ID ring */
body.phone-mode .ph-5s {
  background: linear-gradient(#fbfbfb, #e6e7e9);
  box-shadow: inset 0 0 0 1px #c7c9cc, 0 16px 36px rgba(0, 0, 0, 0.25);
}
body.phone-mode .ph-5s .ph-speaker { background: #d0d2d5; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
body.phone-mode .ph-5s .ph-camera { background: #3a3f46; box-shadow: none; }
body.phone-mode .ph-5s .phone-home {
  background: #f4f4f6;
  box-shadow: inset 0 0 0 2.5px #d9bd7f, inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* 2014-16 — 6 / 6s / 7: bigger, rounder */
body.phone-mode .ph-6, body.phone-mode .ph-6s, body.phone-mode .ph-7 {
  --bezel: 58px;
  --screen-w: 375px;
  --screen-h: 667px;
  border-radius: 48px;
}
body.phone-mode .ph-6 { background: linear-gradient(#41454b, #1d1f23); }
body.phone-mode .ph-6s { background: linear-gradient(#f7dcd2, #e3ac9d); } /* rose gold */
body.phone-mode .ph-6s .ph-speaker { background: #d8b3a7; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }
body.phone-mode .ph-6s .ph-camera { background: #4a3f3c; box-shadow: none; }
body.phone-mode .ph-6s .phone-home {
  background: #f9ece6;
  box-shadow: inset 0 0 0 2.5px #d99f8d, inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
body.phone-mode .ph-7 { background: linear-gradient(150deg, #33363b, #0a0b0d 65%); } /* jet black */
body.phone-mode .ph-6 .phone-home, body.phone-mode .ph-7 .phone-home {
  background: radial-gradient(circle at 35% 30%, #222529, #0b0d0f 70%);
  box-shadow: inset 0 0 0 2.5px #565b62, inset 0 1px 3px rgba(0, 0, 0, 0.8);
}
/* Touch ID: no glyph */
body.phone-mode .ph-5s .phone-home::after, body.phone-mode .ph-6 .phone-home::after,
body.phone-mode .ph-6s .phone-home::after, body.phone-mode .ph-7 .phone-home::after { content: none; }

/* 2017-21 — X through 13: all screen, notch, no home button */
body.phone-mode .ph-x, body.phone-mode .ph-12, body.phone-mode .ph-14 {
  --bezel: 13px;
  --side: 13px;
  --screen-w: 375px;
  --screen-h: 740px;
  border-radius: 46px;
  background: linear-gradient(#26282c, #0a0b0d);
}
body.phone-mode .ph-12, body.phone-mode .ph-14 { border-radius: 40px; } /* the flat-sided era */
body.phone-mode .ph-x .phone-screen, body.phone-mode .ph-12 .phone-screen,
body.phone-mode .ph-14 .phone-screen { border-radius: 32px; }
body.phone-mode .ph-x .phone-earpiece, body.phone-mode .ph-12 .phone-earpiece,
body.phone-mode .ph-14 .phone-earpiece, body.phone-mode .ph-x .phone-home,
body.phone-mode .ph-12 .phone-home, body.phone-mode .ph-14 .phone-home { display: none; }
body.phone-mode .ph-x .phone-notch, body.phone-mode .ph-12 .phone-notch {
  display: block;
  position: absolute;
  top: var(--bezel);
  left: 50%;
  transform: translateX(-50%);
  width: 150px; height: 24px;
  background: #000;
  border-radius: 0 0 16px 16px;
  z-index: 7;
}
body.phone-mode .ph-x .phone-homebar, body.phone-mode .ph-12 .phone-homebar,
body.phone-mode .ph-14 .phone-homebar {
  display: block;
  position: absolute;
  bottom: calc(var(--bezel) + 7px);
  left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.55);
  z-index: 7;
  pointer-events: none;
}

/* 2022+ — Dynamic Island */
body.phone-mode .ph-14 .phone-notch {
  display: block;
  position: absolute;
  top: calc(var(--bezel) + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 92px; height: 23px;
  background: #000;
  border-radius: 12px;
  z-index: 7;
}

/* notch-era status bar: clock left, radios right, room for the notch */
body.phone-mode .ph-x .phone-statusbar, body.phone-mode .ph-12 .phone-statusbar,
body.phone-mode .ph-14 .phone-statusbar {
  height: 34px;
  padding: 0 20px;
}
body.phone-mode .ph-x .ph-clock, body.phone-mode .ph-12 .ph-clock,
body.phone-mode .ph-14 .ph-clock { order: 0; flex: 1; }
body.phone-mode .ph-x .ph-cell, body.phone-mode .ph-12 .ph-cell,
body.phone-mode .ph-14 .ph-cell { order: 1; flex: 0 0 auto; }
body.phone-mode .ph-x .ph-right, body.phone-mode .ph-12 .ph-right,
body.phone-mode .ph-14 .ph-right { order: 2; flex: 0 0 auto; }
body.phone-mode .ph-x .ph-carrier, body.phone-mode .ph-12 .ph-carrier,
body.phone-mode .ph-14 .ph-carrier, body.phone-mode .ph-x .ph-ampm,
body.phone-mode .ph-12 .ph-ampm, body.phone-mode .ph-14 .ph-ampm { display: none; }

/* ---- empty / loading states ---- */
.state-box { padding: 28px 20px; text-align: center; color: #666; font-size: 14px; }
.state-box.search-status { padding: 12px; font-size: 12px; color: #999; border-bottom: 1px solid #e8e8e8; }
.search-stop {
  background: linear-gradient(#fff, #f0f0f0);
  border: 1px solid #cbd6db;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  margin-left: 6px;
}
.search-stop:hover { background: #f0f8fc; border-color: #a8c7d8; }
.state-box.filter-empty { padding: 14px; font-size: 13px; border-bottom: 1px solid #e8e8e8; }
.state-box .state-links { margin-top: 10px; font-size: 13px; }
.state-box .state-links a { margin: 0 8px; font-weight: bold; }

/* ---- mobile ---- */
.sidebar-backdrop {
  display: none;
  position: fixed;
  top: 40px; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 25;
}

@media (max-width: 700px) {
  .menu-btn { display: block; }

  /* icon tabs, like the old mobile apps; labels hide, icons stay */
  .topnav { gap: 0; flex: 0 0 auto; }
  .topnav a { font-size: 0; padding: 10px 9px; }
  .topnav a .nav-ico { font-size: 16px; }
  .bird { padding: 0 8px; }
  .topsearch { flex: 1 1 0; min-width: 0; }
  .topsearch input { width: 100%; min-width: 0; max-width: 200px; font-size: 16px; }

  .page { display: block; }
  .stream { width: 100%; }

  /* the sidebar becomes a drawer that slides in under the ☰ button */
  .sidebar {
    position: fixed;
    top: 40px; left: 0; bottom: 0;
    width: min(320px, 86vw);
    max-height: none;
    padding: 10px;
    background: #c0deed;
    box-shadow: 2px 0 14px rgba(0, 0, 0, 0.3);
    transform: translateX(-110%);
    transition: transform 0.22s ease;
    overflow-y: auto;
    z-index: 30;
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; }
  body.sidebar-open { overflow: hidden; }

  /* no hover on a touch screen: keep Reply / View original visible */
  .tweet-actions { visibility: visible; }

  /* long names truncate instead of shoving the timestamp offscreen */
  .tweet-head .fullname, .tweet-head .username {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .tweet-head .act-block { display: none; } /* hover-only; no hover on touch */
  .tweet-head .act-follow:not(.following) { display: none; }

  /* 16px inputs stop iOS Safari from zooming the page on focus */
  .tm-controls input[type="date"] { font-size: 16px; }
  .rc-row input, .reply-composer textarea { font-size: 16px; }

  .topaccount .ta-handle { display: none; } /* avatar only; the bar is tight */
}

/* ---- accounts ---- */
.topaccount { position: relative; margin-left: 8px; flex-shrink: 0; }
.ta-signin {
  background: linear-gradient(#55acee, #3b88c3);
  border: 1px solid #3b88c3;
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 4px 12px;
  cursor: pointer;
}
.ta-user {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  font: inherit;
}
.ta-avatar { width: 24px; height: 24px; border-radius: 4px; display: block; }
.ta-handle { font-size: 12px; font-weight: bold; color: #666; }
.ta-user:hover .ta-handle { color: #333; }
.ta-menu {
  position: absolute;
  top: 36px;
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid #cbd6db;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  padding: 4px 0;
  z-index: 40;
}
.ta-menu a {
  display: block;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: bold;
  color: #666;
}
.ta-menu a:hover { background: #f5f8fa; color: #333; text-decoration: none; }

/* sign-in / edit-profile modal */
.wm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.wm-box {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  padding: 20px;
  width: min(340px, 100%);
}
.wm-box h2 { font-size: 16px; color: #333; margin-bottom: 6px; }
.wm-blurb { font-size: 12px; color: #666; margin-bottom: 12px; line-height: 1.4; }
.wm-provider {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 8px;
  background: #f5f8fa;
  border: 1px solid #cbd6db;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}
.wm-provider:hover { background: #eaf2f7; border-color: #a8c7d8; }
.wm-divider { text-align: center; font-size: 11px; color: #999; margin: 10px 0; }
.wm-magic { display: flex; gap: 6px; }
.wm-magic input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #cbd6db;
  border-radius: 4px;
  font-size: 12px;
}
.wm-magic button, .wm-profile button {
  background: linear-gradient(#55acee, #3b88c3);
  border: 1px solid #3b88c3;
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.wm-profile label { display: block; font-size: 12px; color: #666; font-weight: bold; margin-bottom: 10px; }
.wm-profile input {
  display: block;
  width: 100%;
  margin-top: 3px;
  padding: 6px 8px;
  border: 1px solid #cbd6db;
  border-radius: 4px;
  font-size: 13px;
  font-weight: normal;
}
.wm-status { font-size: 12px; color: #666; margin-top: 10px; min-height: 1em; }

/* posts + replies from the present */
.rc-as { flex: 1; font-size: 12px; color: #999; }
.rc-as b { color: #666; }
.rc-signin { font-size: 12px; color: #666; margin-top: 7px; }
.rc-signin-btn {
  background: linear-gradient(#55acee, #3b88c3);
  border: 1px solid #3b88c3;
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
  font-size: 11px;
  padding: 3px 10px;
  cursor: pointer;
  margin-left: 4px;
}
.post-composer-wrap { padding: 10px 12px; border-bottom: 2px solid #dbe8ee; background: #f5f8fa; }
.post-composer-wrap .reply-composer { margin-top: 0; }
.present-note { padding: 6px 12px; font-size: 11px; color: #999; border-bottom: 1px solid #e8e8e8; }
.tweet.user-post { background: #fbfdfe; }
.tweet-head .up-badge { flex-shrink: 0; }
.tweet-actions .act-like.liked { color: #ffac33; }
.rc-suspended { color: #d40d12; }

/* ---- reporting + moderation ---- */
.fr-report { font-size: 10px; color: #bbb; margin-left: 4px; }
.fr-report:hover { color: #d40d12; text-decoration: none; }
.wm-quote {
  border-left: 2px solid #dbe8ee;
  padding: 4px 0 4px 9px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #333;
  max-height: 120px;
  overflow-y: auto;
  word-wrap: break-word;
}
.wm-report textarea {
  width: 100%;
  height: 54px;
  padding: 6px 8px;
  border: 1px solid #cbd6db;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  resize: vertical;
  outline: none;
  margin-bottom: 8px;
}
.wm-report textarea:focus { border-color: #55acee; }
.wm-report button {
  background: linear-gradient(#55acee, #3b88c3);
  border: 1px solid #3b88c3;
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
}
.mod-section-head {
  padding: 8px 12px;
  background: #f5f8fa;
  border-bottom: 1px solid #e8e8e8;
  font-size: 13px;
  font-weight: bold;
  color: #333;
}
.mod-report { padding: 9px 12px; border-bottom: 1px solid #e8e8e8; }
.mod-report:hover { background: #f6f9fb; }
.mod-head { font-size: 11px; color: #999; }
.mod-head b { color: #333; font-size: 12px; }
.mod-quote {
  border-left: 2px solid #dbe8ee;
  padding-left: 9px;
  margin: 5px 0;
  font-size: 13px;
  color: #333;
  word-wrap: break-word;
}
.mod-reason { font-size: 12px; color: #666; font-style: italic; margin-bottom: 5px; }
.mod-actions { display: flex; gap: 6px; margin-top: 6px; }
.mod-btn {
  background: linear-gradient(#fff, #f0f0f0);
  border: 1px solid #cbd6db;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}
.mod-btn:hover { background: #f0f8fc; border-color: #a8c7d8; }
.mod-btn:disabled { opacity: 0.5; cursor: wait; }
.mod-btn.mod-ban { color: #d40d12; }