/* =====================================================================
   Global Reset & Foundational Theme Tokens
   ===================================================================== */

*, *:before, *:after {
  box-sizing: border-box;
}

:root {
  /* Dimensions */
  --header-chrome-height: 60px;
  
  /* Palette: Warm Paper & Deep Ink */
  --bg-app: #fcfcfb;
  --header-bg: rgba(255, 255, 255, 0.92);
  --header-border: #edebe6;                     /* Replaced cold #eff3f4 */
  --header-muted: #656f77;                      /* Replaced #536471 */
  --header-accent: #4f46e5;                     /* Replaced Twitter blue #1d9bf0 */
  --text-main: #16181b;

  /* Post Actions & States */
  --action-heart: #f43f5e;                      /* Rich rose pink */
  --action-chat: #4f46e5;                       /* Brand indigo */
  --action-views: #0ea5e9;                      /* Vivid sky */
  --action-bookmark: #4f46e5;
  --action-translate: #4f46e5;
}

html, body {
  margin: 0;
  height: auto;
  overflow: visible;          
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--text-main);
  background: var(--bg-app);
}

body.modal-open {
  overflow: hidden;
}

body.dm-open {
  overflow: hidden;
  height: 100%;
}

/* =====================================================================
   Header Chrome
   ===================================================================== */

header-chrome {
  display: block;
  position: sticky;
  top: 0;
  z-index: 15;
  height: var(--header-chrome-height);
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--header-border);
}

#menuBar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  height: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

#brand {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--text-main);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

#brand:hover {
  opacity: 0.85;
}

/* Search Input */
#siteSearch {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 420px;
}

#siteSearch .icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--header-muted);
  pointer-events: none;
}

#siteSearch input {
  width: 100%;
  height: 40px;
  padding: 0 16px 0 40px;
  border: 1px solid transparent;
  border-radius: 12px;                          /* Modern rounded rect */
  background: #f2f0eb;                          /* Warm subtle pill */
  font: inherit;
  font-size: 0.95rem;
  color: var(--text-main);
  outline: none;
  transition: all 0.15s ease;
}

#siteSearch input:focus {
  background: #ffffff;
  border-color: var(--header-accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

#siteSearch input::-webkit-search-cancel-button { cursor: pointer; }

/* Menu Controls */
#menuControls {
  display: flex;
  align-items: center;
  gap: 8px;
}

#menuControls button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--header-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

#menuControls button:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-main);
}

#searchToggle { display: none; }

/* Unread Badge */
.unread-badge {
  display: none;
  position: absolute;
  top: 2px;
  left: 24px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}

.unread-badge.active { display: block; }

/* Back & Close Buttons */
.back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 10px;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.back-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.back-button::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: var(--text-main);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.414 13l5.043 5.04-1.414 1.42L3.586 12l7.457-7.46 1.414 1.42L7.414 11H21v2H7.414z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.414 13l5.043 5.04-1.414 1.42L3.586 12l7.457-7.46 1.414 1.42L7.414 11H21v2H7.414z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.close-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.close-btn .icon-close {
  width: 18px;
  height: 18px;
  background-color: currentColor;
}

.close-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.close-btn:focus-visible {
  outline: 2px solid var(--header-accent);
  outline-offset: 2px;
}

/* =====================================================================
   Post Action Bar & Engagement Counters
   ===================================================================== */

.post-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 460px;
  margin-top: 10px;
  margin-bottom: 6px;
}

.post-actions > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  cursor: pointer;
  color: var(--header-muted);
  transition: all 0.15s ease;
}

.post-actions > button .count {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

/* Generic Icon Mask Container */
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  transition: background-color 0.15s ease;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Search Icon */
.icon-search {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.25 3.75a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13zM1.75 10.25a8.5 8.5 0 1 1 15.17 5.26l5.04 5.03-1.42 1.42-5.03-5.04A8.5 8.5 0 0 1 1.75 10.25z'/%3E%3C/svg%3E");
  -webkit-mask: var(--i) no-repeat center / contain;
  mask: var(--i) no-repeat center / contain;
}

/* Close Icon */
.icon-close {
  --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z'/%3E%3C/svg%3E");
  -webkit-mask: var(--i) no-repeat center / contain;
  mask: var(--i) no-repeat center / contain;
}

/* Chat Action */
.icon-chat {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z'/%3E%3C/svg%3E");
}

.btn-chat:hover {
  color: var(--action-chat);
}

.btn-chat:hover .icon-chat {
  background-color: var(--action-chat);
}

/* Heart / Like Action */
.icon-heart {
  --heart-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.910-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.340 6.052-4.640 7.126-6.610 1.111-2.040 1.030-3.700.477-4.820-.561-1.130-1.666-1.840-2.908-1.910zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'/%3E%3C/svg%3E");
  --heart-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--heart-outline);
  mask-image: var(--heart-outline);
}

.btn-heart:hover {
  color: var(--action-heart);
}

.btn-heart:hover .icon-heart {
  background-color: var(--action-heart);
}

.btn-heart.active .icon-heart,
.btn-heart.liked .icon-heart {
  background-color: var(--action-heart);
  -webkit-mask-image: var(--heart-filled);
  mask-image: var(--heart-filled);
}

.btn-heart.liked .count { color: var(--action-heart); }

/* Views Action */
.icon-views {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z'/%3E%3C/svg%3E");
}

.btn-views:hover {
  color: var(--action-views);
}

.btn-views:hover .icon-views {
  background-color: var(--action-views);
}

/* Bookmark Action */
.icon-bookmark {
  --bookmark-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6 3h12a1 1 0 0 1 1 1v17l-7-4.5L5 21V4a1 1 0 0 1 1-1zm.5 1.5v13.75l5.5-3.53 5.5 3.53V4.5h-11z'/%3E%3C/svg%3E");
  --bookmark-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12a1 1 0 0 1 1 1v17l-7-4.5L5 21V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--bookmark-outline);
  mask-image: var(--bookmark-outline);
}

.btn-bookmark:hover,
.btn-bookmark[aria-pressed="true"] {
  color: var(--action-bookmark);
}

.btn-bookmark.bookmarked .icon-bookmark {
  -webkit-mask-image: var(--bookmark-filled);
  mask-image: var(--bookmark-filled);
  background-color: var(--action-bookmark);
}

/* Translate Action */
.icon-translate {
  --translate-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.2v1.4M2.2 6h8.6M9 7.6 3.4 12.4M4.4 7.6 10 12.4'/%3E%3Cpath d='M12.4 20.8 16.4 11.4l4 9.4M13.9 17.6h5'/%3E%3Cpath d='M19.4 1.8c.45 2 1.35 2.9 3.35 3.35-2 .45-2.9 1.35-3.35 3.35-.45-2-1.35-2.9-3.35-3.35 2-.45 2.9-1.35 3.35-3.35Z' fill='black' stroke='none'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--translate-icon);
  mask-image: var(--translate-icon);
}

.btn-translate:hover,
.btn-translate.translated {
  color: var(--action-translate);
}

.btn-translate:hover .icon-translate,
.btn-translate.translated .icon-translate {
  background-color: var(--action-translate);
}

.btn-translate.busy { opacity: 0.5; cursor: default; }

/* Floating Burst Animation for Likes */
.btn-heart {
  position: relative;  
}

@keyframes heartfade {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.4) translateY(-10px); }
}

.heart {
  position: absolute;
  z-index: 100010;
  pointer-events: none;  
  transform-origin: 28px 15px; 
  animation: heartfade 1.8s ease-out forwards;
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  height: 30px;
  width: 45px;
  border-radius: 15px 0 0 15px;
  background-color: var(--action-heart);
}

.heart::before { transform: rotate(45deg); }
.heart::after  { left: 10.5px; transform: rotate(135deg); }

/* =====================================================================
   Media Lightbox
   ===================================================================== */

media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100005;
  display: none;
}

media-lightbox.active {
  display: block;
}

media-lightbox .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 16, 0.94);
  backdrop-filter: blur(8px);
}

media-lightbox .content-container {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

media-lightbox .close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
}

media-lightbox .close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* YouTube Quiet Links */
a.yt-link {
  color: var(--header-accent);
  text-decoration: none;
  font-weight: 500;
  overflow-wrap: anywhere;
}

a.yt-link:hover,
a.yt-link:focus-visible {
  text-decoration: underline;
}

message-container.owner a.yt-link {
  color: inherit;
  text-decoration: underline;
}

/* Big Emoji Support */
@font-face {
  font-family: 'BigEmoji';
  src: local('Apple Color Emoji');
  unicode-range: U+1F300-1F9FF, U+2600-27BF, U+FE0F, U+200D;
  size-adjust: 125%;
}

feed-text {
  font-family: 'BigEmoji', 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

/* Responsive: Mobile */
@media (max-width: 700px) {
  #menuBar { grid-template-columns: auto 1fr auto; gap: 8px; }
  #siteSearch { display: none; }
  #searchToggle { display: inline-flex; padding: 0 10px; }
  #menuControls .label { display: none; }
  #menuControls button { padding: 0 10px; }

  #menuBar.searching #brand,
  #menuBar.searching #menuControls { display: none; }

  #menuBar.searching #siteSearch {
    display: block;
    grid-column: 1 / -1;
    max-width: none;
  }
}

#brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-main, #16181b);
  transition: opacity 0.15s ease;
}

#brand:hover {
  opacity: 0.9;
}

#brand .brand-mark {
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.28);
  border-radius: 8px;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

#brand:hover .brand-mark {
  transform: translateY(-1px) scale(1.04);
}

#brand .brand-text {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}


.nav-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 8px 16px 16px;
    font-size: 12px;
}

.nav-legal a {
    color: #6b7280;
    text-decoration: none;
}

.nav-legal a:hover {
    text-decoration: underline;
}

.brand {
    display: inline-flex;
    align-items: center;       /* Centers icon and text mathematically */
    gap: 0.1rem;               /* ~8px gap between icon and text */
    text-decoration: none;
    color: #0f172a;
}

.brand-mark {
    display: block;           
    width: 26px;
    height: 26px;
    flex-shrink: 0;            
}

.brand-text {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;            
}