:root {
   --font-family: 'Inter', Verdana, Geneva, sans-serif;
   --background-color0: #f6f6ef;
   --background-color1: rgba(166, 110, 78, 0.06);
   --bg-off-white: #f6f6ef;
   --contrast-color: rgba(166, 110, 78, 0.75);
   --border: 1px solid rgba(166, 110, 78, 0.15);
   --border-thin: 1px solid rgba(166, 110, 78, 0.1);
   --border-line: 1px solid rgba(166, 110, 78, 0.15);
   --border-thick: 1px solid rgba(166, 110, 78, 0.2);
   --border-inset: 1px inset rgba(166, 110, 78, 0.15);
   --full-contrast-color: rgba(166, 110, 78, 1);
   --header-beige: #fafafa;
   --middle-beige: #f3f3f3;
   --table-bg: #f8f8f7;
   --table-bg-mobile: rgb(255, 255, 250);
   --visited-link: #828282;
 }
 .scroll-margin-base, .scroll-margin-with-image {
   scroll-margin-top: 100px;
 }
.newsletter-row {
  margin-bottom: 5px;
}
.notification:link {
  color: black !important;
}
.notification:visited {
  color: var(--visited-link) !important;
}
.comment-preview-anchor {
  color: black;
}
:target {
  animation: highlight 0.3s ease-out;
}

@keyframes highlight {
  from {
    box-shadow: 0 0 0 4px rgb(175, 192, 70, 0.5);
  }
  to {
    box-shadow: 0 0 0 2px rgb(175, 192, 70);
  }
}
.inverted-row {
  filter: invert(100%) brightness(2);
}
.inverted-row img {
  filter: brightness(60%) invert(100%);
}
.inverted-row .drawer-link {
  display: none;
}
.connect-button-wrapper {
  display: inline;
}
.redacted {
    -webkit-box-decoration-break: clone;
    filter: blur(2px);
}
.footer-table strong {
  display: inline-block;
  margin: 0 0 7px 0;
}
.footer-table a {
  display: inline-block;
  margin: 5px 0;
}
.footer-table a:hover {
  text-decoration: underline;
}
.drawer {
  border-top-left-radius: 2px !important;
  border-top-right-radius: 2px !important;
  background: #f6f6ef !important;
  border-top: 1px solid #828282 !important;
}

.vote-button-container:active,
.chat-bubble.interaction-element:active,
.feed-button-link:active,
.submit-button:active,
.bottom-nav > a:active,
.sidebar-toggle:active,
.sidebar a:active,
.bell-button:active {
  touch-action: manipulation;
  transform: scale(0.95);
  transition: transform 0.1s ease;
  cursor: pointer;
}
.comment-preview:active {
  touch-action: manipulation;
  cursor: pointer;
}
button, a, .interaction-element {
  touch-action: manipulation;
  user-select: none;
}

.chat-bubble-container,
.feed-button-link,
.vote-button-container,
.sidebar-toggle,
.sidebar > a:active,
.sidebar-div:active,
#nav-profile:active,
#nav-submit:active,
#nav-settings:active {
  -webkit-tap-highlight-color: transparent;
}

.chat-bubble-container {
  display: flex;
  align-self: stretch;
}
html {
  background-color: #f9f9f9;
  min-height: 100%;
}
body {
  min-height: 100dvh;
  background-color: #f9f9f9;
     margin: 0;
     font-family: var(--font-family);
     font-size:10pt;
     color:#828282;
     padding-top: env(safe-area-inset-top);
     padding-left: env(safe-area-inset-left);
     padding-right: env(safe-area-inset-right);
}
.story-link-container {
  display: inline;
}
.comment-text-link {
  color: black !important;
}
.comment-text-link:visited {
  color: var(--visited-link) !important;
}
.story-domain a:hover {
  text-decoration: underline;
}
.share-container {
   display: none;
}
.inverse-share-container {
  display: inline;
}
.tipsbuttoncontainer {
  display: inline;
}
@media screen and (max-width: 640px) {
  .share-container {
    display: inline;
  }
  .inverse-share-container {
    display: none;
  }
}
.hnname span:active, .votearrow:active {
  transform: scale(0.80);
  transition: transform 0.3s;
  display: inline-block;
}
.submit-button {
  box-sizing: border-box;
}
.submit-button:hover {
  outline: 2px solid black;
  background-color: white !important;
}
.submit-button svg:hover {
  color: black !important;
}
.submit-button:active {
  transform: scale(0.95);
  outline: 2px solid black;
}
.feed-button {
  box-sizing: border-box;
  cursor: pointer;
}
.feed-button:hover{
  background-color: rgba(0,0,0,0.2);
}
.feed-button:active {
  transform: scale(0.95);
}
.container {
  display: flex;
  justify-content: center;
}
 @keyframes pulsate {
   0% {
     transform: scale(1);
     opacity: 1;
   }
   50% {
     transform: scale(1.25);
     opacity: 0.5;
   }
   100% {
     transform: scale(1);
     opacity: 1;
   }
 }

 td {
     font-family: var(--font-family);
     font-size:10pt;
     color:#828282;
}
 .subtext td {
     font-family: var(--font-family);
     font-size: 7pt;
     color:#828282;
}
 .titleline span {
     font-size: 10pt;
}
 input {
     font-family:monospace;
     font-size:10pt;
}
 input[type=\"submit\"] {
     font-family: var(--font-family);
}
 textarea {
     font-family:monospace;
     font-size:10pt;
     resize:both;
}
 a:link {
     color:#000000;
     text-decoration:none;
}
 a:visited, .comment-preview-anchor:visited{
     color:var(--visited-link);
     text-decoration:none;
}
 .default {
     font-family: var(--font-family);
     font-size: 10pt;
     color:#828282;
}
 .title {
     display: table-row;
     font-family: var(--font-family);
     font-size: 13pt;
     color:#828282;
}
 .subtext {
     font-family: var(--font-family);
     font-size: 9pt;
     color:#828282;
}
 .pagetop {
     font-family: var(--font-family);
     font-size: 14pt;
     color:#222222;
     line-height:normal;
     margin: 3px 5px;
}
 .hnname {
     margin-right: 5px;
}
 #hnmain {
     min-width: 70ch;
}
 .title a {
     word-break: break-word;
}
 .pagetop a:visited {
     color:#000000;
}
 .topsel a:link, .topsel a:visited {
     color:#ffffff;
}
 .subtext a:link, .subtext a:visited {
     color:#828282;
}
 .subtext a:hover {
     text-decoration:underline;
}
 .comhead a:link, .subtext a:visited {
     color:#828282;
}
 .comhead a:hover {
     text-decoration:underline;
}
 .hnmore a:link, .hnmore a:visited {
     color:#828282;
}
 .hnmore {
     text-decoration:underline;
}
 .default p {
     margin-top: 8px;
     margin-bottom: 0px;
}
 .pagebreak {
    page-break-before:always
}
 pre {
     overflow: auto;
     padding: 2px;
     white-space: pre-wrap;
     overflow-wrap:anywhere;
}
 pre:hover {
     overflow:auto 
}
.votearrow {
  color: #828282;
  font-size: 1.5rem;
}
.heart-icon svg {
  width: 100%;
  height: 100%;
}
.like-notification .heart-icon svg {
  color: #000000;
}
.pulsate {
  animation: pulsate 1s infinite;
}
 table.padtab td {
     padding:0px 10px 
}
 .votearrow.rotate180 {
     -webkit-transform: rotate(180deg) scale(1.7,1.7);
    /* Chrome and other webkit browsers */
     -moz-transform: rotate(180deg) scale(1.7,1.7);
    /* FF */
     -o-transform: rotate(180deg) scale(1.7,1.7);
    /* Opera */
     -ms-transform: rotate(180deg) scale(1.7,1.7);
    /* IE9 */
     transform: rotate(180deg) scale(1.7,1.7);
    /* W3C complaint browsers */
    /* IE8 and below */
     -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand')";
}

/* Onoarding page styles */

.section {
    max-width: 800px; /* Adjust this to set the maximum width of the text */
    margin: 0 auto;
  }
  
  .flex-container {
    display: flex;
    align-items: flex-start; /* Align the top edges of the child elements */
  }
  
  .text-left,
  .text-right,
  .image {
    width: 50%;
  }
  
  .text-left {
    margin-right: 20px; /* Add right margin to create space between the text and image */
    text-align: left; 
  }

  .text-right {
    margin-left: 20px; /* Add right margin to create space between the text and image */
    text-align: right; 
  }

  .text-left h2, .text-right h2 {
    margin-top: 0;
    padding: 0;
    line-height: 1; /* Adjust as needed; this can bring the text closer to the top of the container */
}
  
  .image img {
    width: 100%;
    margin: 0;
  }

  .image-right img {
    width: 100%;
    margin: 0;
    text-align: right;  
  }

  .image-left img {
    width: 100%;
    margin: 0;
    text-align: left;  
  }

#button-onboarding:disabled,
#button-onboarding:disabled:hover {
  background-color: grey !important;
  outline: none;
  border: 1px solid grey !important;
  color: white !important;
}

@media (max-width: 640px) {
  #button-onboarding {
    font-size: 1rem;
  }
}
  
  #button-onboarding {
    border-radius: 2px;
    padding: 10px 15px;
    background-color: black;
    border: 1px solid black;
    color: white;
    cursor: pointer;
    width: 50%;
    display: inline-block;
  }
  #button-onboarding:hover svg {
    color: black !important;
  }
  .primary-action-button:hover,
  #button-onboarding:hover,
  .buy-button:hover,
  .friend-buy-button:hover {
    outline: 1px solid black;
    color: black !important;
    border-color: black !important;
    background-color: white !important;
  }
  .primary-action-button:active,
  #button-onboarding:active,
  .buy-button:active,
  .friend-buy-button:active {
    transform: scale(0.98);
    outline: 1px solid black;
    color: black !important;
    background-color: white !important;
    border-color: black !important;
    box-shadow: 0 0 5px black;
  }

  #button-onboarding.button-secondary{
    background-color: rgba(0,0,0,0);
    color: black;
  }
  #button-onboarding.button-secondary:hover{
    background-color: transparent !important;
  }

    #hnmain {
      border: var(--border);
      border-top: none;
      border-bottom: none;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
  
.canon-font {
  font-size: 11pt;
}
.canon-image {
  flex: 0 0 30%;
}
/* Unified row image preview */
.row-image-preview {
  display: block;
  width: 100%;
}

.row-image-preview img {
  width: 100%;
  height: auto;
}

@media (min-width: 641px) {
  .row-image-preview {
    margin: 0;
    margin-bottom: 0;
  }
  .row-image-preview img {
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: none;
    border-radius: 0;
    width: 100% !important;
    margin: 0 !important;
  }
}

@media (max-width: 640px) {
  .row-image-preview {
    margin: 0;
  }
  .row-image-preview img {
    border: none;
    border-radius: 0;
    width: 100% !important;
  }
  /* Ensure SSR placeholder shows mobile version to avoid swapping */
  /* On mobile, show the compact placeholder and hide desktop-sized */
  .comment-input-mobile-ssr { display: block !important; }
  .comment-input-desktop-ssr { display: none !important; }
  /* Reserve space for comment input React mount to avoid jump */
  .comment-input-host { 
    display: block; 
    min-height: 64px;
    position: relative;
  }
  /* Strong gutters for content rows */
  .content-row .mobile-information-row { padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box; }
  .content-row .story-link-container-wrapper { padding-right: 16px !important; }
  .content-row .story-link { padding-right: 16px !important; }
  .content-row .domain-text { padding-right: 12px !important; }
}

/* (dup guard) */

/* Tweet preview container - visible on all devices */
.tweet-preview-container {
  display: block;
  margin: 0; /* no margin */
  padding: 0; /* no padding */
  background: transparent;
  border-radius: 0;
  border: none;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Desktop defaults for SSR comment input placeholders */
@media (min-width: 641px) {
  .comment-input-mobile-ssr { display: none !important; }
  .comment-input-desktop-ssr { display: block !important; }
  /* Desktop: Reserve appropriate height when SSR placeholder is present */
  .comment-input-host:has(.comment-input-ssr-placeholder) {
    min-height: 380px;
  }
  /* Once React loads and hides the placeholder, reduce the min-height */
  body.react-loaded .comment-input-host {
    min-height: auto;
  }
}

/* Hide React comment input until React has mounted; SSR placeholder stays visible */
.comment-input-host nav-comment-input { 
  visibility: hidden; 
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
body.react-loaded .comment-input-host nav-comment-input { 
  visibility: visible; 
  position: static;
}

/* Hide SSR placeholder when React has loaded to prevent overlap */
body.react-loaded .comment-input-ssr-placeholder {
  display: none !important;
}

/* Farcaster preview container - visible on all devices */
.farcaster-preview-container {
  display: block;
  margin: 0; /* no margin */
  padding: 0; /* no padding */
  background: transparent;
  border-radius: 0;
  border: none;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Farcaster embed styles */
.farcaster-embed-container * {
  box-sizing: border-box;
}

.farcaster-embed-container {
  position: relative;
  padding: 20px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  border-radius: 0; /* no rounding */
  margin: 0;
  background: #ffffff; /* white background extends to edges */
  color: #12212b;
  border: none;
  border-bottom: 1px solid #e6e6df; /* same border as row */
  box-shadow: none; /* no shadow */
  max-width: 100%;
  box-sizing: border-box;
}

.farcaster-embed-metadata {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-gap: 0.75rem;
  align-items: center;
  line-height: 1.2;
  container: metadata / inline-size;
}

.farcaster-embed-timestamp {
  grid-column: 1 / -1;
  opacity: 0.5;
  font-size: 0.75rem;
  line-height: 1.25rem;
}

@container metadata (min-width: 260px) {
  .farcaster-embed-metadata {
    grid-template-columns: 40px 1.5fr 1fr;
  }

  .farcaster-embed-timestamp {
    grid-column: 3;
    text-align: right;
  }
}

.farcaster-embed-author-avatar-container {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.farcaster-embed-author-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.farcaster-embed-author p {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.farcaster-embed-author-display-name {
  color: #12212b;
  font-weight: 600;
}

.farcaster-embed-author-username {
  opacity: 0.7;
  color: #7c65c1;
}

.farcaster-embed-body {
  margin-top: 0.75rem;
}

.farcaster-embed-body p {
  font-size: 0.95rem;
  line-height: 1.5rem;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  color: #12212b;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

.farcaster-embed-stats {
  margin-top: 0.75rem !important;
  margin-bottom: -0.25rem !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  container: stats / inline-size;
}

.farcaster-embed-stats ul {
  display: flex;
  gap: 1rem;
  list-style-type: none;
}

.farcaster-embed-stats-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  opacity: 0.5;
  text-decoration: none;
  color: inherit;
}

.farcaster-embed-farcaster-icon {
  display: flex;
}

.farcaster-embed-farcaster-link {
  display: inline-block;
  transition: transform 0.15s ease-out;
  text-decoration: none;
}

.farcaster-embed-farcaster-link:hover {
  transform: scale(1.1);
}

/* Tweet embed styles */
.tweet-embed-container {
  position: relative;
  padding: 20px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  border-radius: 0; /* no rounding */
  margin: 0;
  background: #ffffff; /* white background extends to edges */
  color: #0f1419;
  border: none;
  border-bottom: 1px solid #e6e6df; /* same border as row */
  box-shadow: none; /* no shadow */
  max-width: 100%;
  box-sizing: border-box;
}

/* Ensure inner images inherit outer card clip and don’t create extra corners */
.tweet-preview-container img, .farcaster-preview-container img {
  border-radius: 0 !important;
}

.tweet-embed-header {
  margin-bottom: 0.75rem;
}

.tweet-embed-body {
  margin-top: 0.75rem !important;
}

.tweet-embed-body p {
  font-size: 0.95rem;
  line-height: 1.5rem;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  color: #0f1419;
  font-weight: 400;
}

/* Link styling inside preview bodies (make URLs useful but subtle) */
.tweet-embed-body a, .farcaster-embed-body a {
  color: #536471; /* Twitter-style link color */
  text-decoration: none;
  opacity: 1;
}

.tweet-embed-body a:hover, .farcaster-embed-body a:hover {
  text-decoration: underline;
}


/* mobile device */
@media only screen and (min-width : 300px) and (max-width : 640px) {
    .scroll-margin-base {
      scroll-margin-top: 140px;
    }
    .scroll-margin-with-image {
      scroll-margin-top: calc(50vw + 100px);
    }
    .contest-entries {
     display: none;
    }
    .last-edition-link {
     display: none;
    }
    .newsletter-row {
      margin-bottom: 20px;
    }
    .share-container {
      font-size: 10pt;
    }
    #hnmain > table {
      background-color: var(--table-bg-mobile);
    }
    .comment-preview-text {
      font-size: 10pt;
      line-height: 1.3;
    }
    /* Elevating rows already have their own padding set to 0 */
    /* Just set consistent padding for all story wrappers */
    .story-link-container-wrapper {
      padding-left: 0;
      padding-right: 8px;
      max-width: 100%;
      overflow: hidden;
    }
    .story-domain {
      font-size: 9pt;
    }
    .story-link {
      opacity: 0.9;
      font-size: 12pt !important;
      line-height: 1.15 !important;
      font-weight: 500;
      word-wrap: break-word;
      overflow-wrap: break-word;
      hyphens: auto;
    }
  .story-subtitle {
  opacity: 0.9;
  margin-top: 5px !important;
  font-size: 12px !important;
  padding-right: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.story-subtitle::-webkit-scrollbar {
  display: none;
}
.subtitle-flex {
  max-width: 100%;
}

/* Ensure consistent vertical alignment for subtitle items */
.meta-item {
  display: inline-flex;
  align-items: center;
  height: 18px;
  line-height: 18px;
}

/* Hide domain when analytics are shown to prevent overflow */
.story-subtitle.has-analytics .domain-hideable {
  display: none !important;
}

/* Fix domain text overflow on mobile */
.domain-text, .domain-flex {
  min-width: 0;
  overflow: visible;
}
.submitter-name {
  white-space: nowrap;
}

/* Normalize small favicon baseline in domain block */
.story-subtitle .domain-text img {
  vertical-align: middle;
  position: static !important;
}
    .elevating-comment-preview .interaction-element{
      padding-top: 2px !important;
      border: none !important;
      margin: 0 !important;
    }
    .comment-preview-no-mobile-image .interaction-element{
      padding-top: 2px !important;
      border: none !important;
      margin: 0 !important;
    }
    .with-comment-preview {
      border-bottom: none;
    }
    .content-row {
      border: 1px solid rgba(166, 110, 78, 0.15);
      margin: 0 11px;
      border-bottom: 1px solid rgba(166, 110, 78, 0.2) !important;
      background-color: #f6f6ef;
      -webkit-border-image: initial;
      -webkit-appearance: none;
      /* Create a local stacking context we can raise when menus are open */
      position: relative;
      z-index: 0;
    }
    #hnmain {
      border: none;
    }
    .gateway-container {
      padding: 0 5vw !important;
    }
    .gateway-container img, .gateway-banner {
      max-width: 80% !important;
    }
    .gateway-banner {
      margin-top: -20rem;
    }
    footer {
      padding-bottom: 100px;
    }
    .notification-bar {
      bottom: 51px !important;
    }
    .third-header, #bell {
      display: none;
    }
    .canon-image {
      flex: 0 0 45%;
    }
    .canon-font {
      font-size: 8pt;
    }
     #hnmain {
         width: 100%;
         min-width: 0;
    }
    #boxmain {
         width: 100%;
         min-width: 0;
    }
    body::-webkit-scrollbar {
      -webkit-appearance: none;
    }
    body {
         padding: 0;
         margin: 0;
         width: 100%;
         -webkit-text-size-adjust: none;
    }
     .title, .comment {
         font-size: inherit;
    }
     span.pagetop {
         display: block;
         margin: 3px 5px;
         font-size: 14px;
         line-height: normal 
    }
     span.pagetop b {
         display: block;
         font-size: 18px;
    }
     table.comment-tree .comment a {
         display: inline-block;
         max-width: 200px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         vertical-align:top;
    }
     .title {
         display: table-row;
         font-size: 13pt;
         line-height: 14pt;
    }
     .subtext {
         font-size: 9pt;
    }
     .votearrow.rotate180 {
         -webkit-transform: rotate(180deg) scale(1.7,1.7);
        /* Chrome and other webkit browsers */
         -moz-transform: rotate(180deg) scale(1.7,1.7);
        /* FF */
         -o-transform: rotate(180deg) scale(1.7,1.7);
        /* Opera */
         -ms-transform: rotate(180deg) scale(1.7,1.7);
        /* IE9 */
         transform: rotate(180deg) scale(1.7,1.7);
        /* W3C complaint browsers */
    }
     .votelinks {
         min-width: 18px;
    }
     .votelinks a {
         display: block;
         margin-bottom: 9px;
    }
     input[type='text'], input[type='number'], textarea {
         font-size: 16px;
         width: 90%;
    }
}
/* Comment section styles */

/* Navigation */
 #menu {
     padding-top: 10px;
}
 @media screen and (max-width: 600px) {
     .hide-on-mobile {
         display: none !important;
    }
}
 #content {
     flex: 1;
     padding: 20px;
}
 .kiwi-svg {
     height: auto;
     margin-bottom: 2em;
     max-width: 60%;
}
 .notification-text {
     font-size: 1.2em;
     max-width: 70%;
     margin: 0 auto;
}
 @media (min-width: 641px) {
     .feed-container {
         max-width: 60%;
         margin: 0 auto;
    }
     .kiwi-svg {
         max-width: 40%;
    }
}
 .sidebar {
     position: fixed;
    /* Fixed position for mobile */
     z-index: 11;
     top: 0;
     width: 75%;
     height: 100%;
     left: -75%;
     background-color: var(--header-beige);
     overflow-x: hidden;
     transition: 0.5s;
     border-right: none;
     padding-top: 35%;
}
/* Media query for medium screens */
 @media (min-width: 641px) {
    .gateway-container {
      padding: 0 5vw !important;
    }
    .gateway-container img, .gateway-banner {
      max-width: 55% !important;
    }
    .gateway-banner {
      margin-top: 5rem;
    }
    footer {
      padding-bottom: 100px;
    }
    .notification-bar {
      bottom: 51px !important;
    }
    .third-header, #bell {
      display: none;
    }
     .sidebar {
         width: 40%;
        /* modified width for medium screens */
         position: fixed;
        /* Static position for medium screens */
         padding-top: 15%;
    }
}
 #mySidebar > hr {
     border: none;
     border-top: 1px solid black;
}
 .sidebar-toggle {
     display: flex;
}
 .story-back-button {
     display: flex;
}
 .kn-banner-desk {
     display: none;
}
 .sidebar a[href="/submit"] {
     display: none;
}
 a[href="/submit"] {
     display: flex;
}
 .sidebar .kiwi-logo {
     display: none;
}
 #hnmain > table {
     width: 100%;
     background-color: var(--table-bg);
}

.submit-button {
  bottom: 4.5rem;
}

.bottom-nav {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px));
  transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.bottom-nav > a, .bottom-nav > .mobile-bell-container {
  transition: opacity 0.15s ease-out;
}

@media (display-mode: standalone) {
   .submit-button {
     bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
   }
   .bottom-nav {
     padding-bottom: calc(env(safe-area-inset-bottom, 0px));
   }
   .notification-bar {
     bottom: calc(51px + env(safe-area-inset-bottom, 51px)) !important;
   }
 }
.bottom-nav > a > svg,
.mobile-bell-container a > svg,
.mobile-bell-container svg {
  color: black;
  width: 1.65rem;
}
.mobile-bell-container {
  height: 100%;
  width: 100%;
  display: flex;
}

.mobile-bell {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.desktop-nav {
  display: none;
}

/* Media query for larger screens */
 @media (min-width: 641px) {
    /* Use mobile layout for rows on desktop */
    #hnmain > table {
      background-color: var(--table-bg-mobile);
    }
    /* Replicate mobile tile styles */
    .content-row {
      border: 1px solid rgba(166, 110, 78, 0.15);
      margin: 0 11px;
      border-bottom: 1px solid rgba(166, 110, 78, 0.2) !important;
      background-color: #f6f6ef;
      border-top: 1px solid rgba(166, 110, 78, 0.15) !important;
      -webkit-border-image: initial;
      -webkit-appearance: none;
    }
    /* Style comment preview for desktop tiles */
    .comment-preview {
      margin: 0 !important;
    }
    .comment-preview .interaction-element {
      border-radius: 0 0 2px 2px !important;
      margin: 0 !important;
      border-top: var(--border-thin);
    }
    .comment-preview-no-mobile-image .interaction-element {
      border-top: var(--border-thin) !important;
    }
    /* Fix alignment for elevating comment previews on desktop */
    .elevating-comment-preview {
      margin: 0 !important;
    }
    .elevating-comment-preview .interaction-element {
      margin: 0 !important;
      border-top: var(--border-thin);
      padding: 12px 16px;
      background-color: rgba(166, 110, 78, 0.03);
    }
    .mobile-center {
      display: none !important;
    }
    .header-bell {
      width: 20% !important;
      align-items: center;
    }
    .desktop-nav {
      width: 47%;
      display: flex;
      justify-content: space-between;
      margin-top: 5px;
      white-space: nowrap;
      gap: 20px;
    }
    .desktop-nav a, .desktop-nav span {
      flex-shrink: 0;
    }
    .sidebar {
      display: none;
    }
    .gateway-banner {
      max-width: 400px !important;
      margin-top: 5rem;
    }
    .gateway-container img {
      max-width: 45% !important;
    }
    .feed-button:hover {
      background-color: rgba(0,0,0,0.15) !important;
    }
    .story-link:not(.redacted):hover {
      text-decoration: underline;
    }
    /* Desktop alignment for subtitle items */
    .subtitle-flex { 
      align-items: baseline !important; 
      flex-wrap: nowrap !important;
      white-space: nowrap;
    }
    .subtitle-flex .meta-item { 
      height: 18px; 
      line-height: 18px;
      white-space: nowrap;
    }
    .subtitle-flex .domain-flex { 
      align-items: baseline;
      white-space: nowrap;
    }
    .notification-bar {
      bottom: 0px !important;
    }
    #hnmain {
      width: 70ch;
      border-radius: 2px;
      border-left: var(--border-thin);
      border-right: var(--border-thin);
    }
    #bell {
      display: block;
    }
    .third-header {
      display: table-row;
    }
    .bottom-nav {
      display: none !important;
    }
    #hnmain > table {
      width: 100%;
    }
    footer {
      border-top: var(--border);
      border-bottom: var(--border);
      padding-bottom: 1rem;
    }
    body {
      background-color: var(--background-color0);
    }
    .submit-button {
         display: none;
    }
     .sidebar a[href="/submit"] {
         display: block;
    }
     .container {
         display: flex;
         justify-content: center;
         align-items: stretch;
    }
     .pagetop {
         display: none 
    }
    .kn-banner-desk {
      width: 33%;
      margin-left: 1rem;
      display: block;
      color: black;
      font-size: 1.1rem;
      font-weight:600;
    }
     .sidebar .kiwi-logo {
         display: block;
         font-size: 1.9rem;
         margin: 14px 14px 14px 10px !important;
    }
     .sidebar {
         z-index: 6;
         overflow: hidden;
         background-color: rgb(246, 246, 239);
         min-width: 75px;
         height: 100vh;
         border-right: none;
         width: auto;
        /* modified width for large screens */
         position: sticky;
        /* Static position for large screens */
         top: 0;
         padding-top: 0;
         border-bottom-left-radius: 2px;
         margin-left:3vw;
    }
     .sidebar-toggle, .story-back-button {
         display: none;
    }
    #mySidebar {
      padding-right: 0.8rem;
      border-left: 1px solid rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      border-bottom-left-radius: 2px;
      background: #e6e6df;
    }
     #mySidebar > hr {
      display: none;
    }
    #hnmain {
      border-bottom-right-radius: 2px;
      border-right: var(--border);
    }
    .svg-container svg {
      width: 1.75rem;
    }
    .svg-container svg:hover{
      color: #36454F;
    }
    .svg-container {
      width: auto;
    }
    .svg-container + span {
      margin: 0 0.25rem 0 0.75rem;
      font-size: 1rem;
    }
    .sidebar a, .sidebar-div {
      font-size: 2em;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 1rem !important;
    }
    .sidebar a:not(.kiwi-logo):hover, #nav-disconnect:hover {
      background-color: rgba(0,0,0,0.1);
      border-radius: 2px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .sidebar .icon-svg {
      width: 36px;
      height: 36px;
    }
    .sidebar-div {
      font-size: 2em;
    }
}
 .sidebar a {
    padding: 0.3rem 0 0.3rem 0;
    margin: 0.3rem 0 0 0;
    font-size: 1.7rem;
    font-variant: small-caps;
    min-width: 140px;
}
 .svg-container {
     width: 19%;
     padding-left: 10px;
}
 .svg-container svg {
     width: 2rem;
}
 .sidebar .icon-svg {
     padding: 0 20px 0 5px;
}
 @media (min-width: 640px) {
     .sidebar a {
         font-size: 2em;
        /* Adjust to preferred size */
    }
     .sidebar .icon-svg {
         width: 36px;
         height: 36px;
    }
}
 .sidebar-div {
     padding: 0.3rem 0 0.3rem 0;
     margin: 0.3rem 10px 0 0;
     color: black;
     text-decoration: none;
     display: block;
     font-size: 1.7rem;
     cursor: pointer;
     min-width: 140px;
}
 @media (min-width: 640px) {
     .sidebar-div {
         font-size: 2em;
    }
}
 #overlay {
     display: none;
    /* Initially hidden */
     position: fixed;
    /* Full-screen positioning */
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black */
     z-index: 10;
    /* Overlay should be on top of everything else */
}
 .story-link {
     color: black;
     font-weight: 500;
}
.story-link { display: block; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
 .story-link:visited {
     color: var(--visited-link);
}
a.meta-link, span.meta-link {
  cursor: pointer;
  color: #828282;
  fill: #828282;
}
.meta-link {
  transition: opacity 0.3s ease-out;
}
a.meta-link:hover, span.meta-link:hover {
  text-decoration: underline;
}

.meta-link.primary-action {
  color: black;
  font-weight: 500;
}
.selectable-link {
  user-select: auto;
}
 a.caster-link {
     color: #828282;
     fill: #828282;
}
 a.caster-link:hover {
     color: #472a91;
     fill: #472a91;
     cursor: pointer;
}

.vote-button-container {
  min-height: 100%;
  display: flex;
  align-self: stretch;
}
.comment-preview .interaction-element:hover {
  cursor:pointer !important;
  background-color: rgba(0,0,0,0.08) !important;
}

.bell-button:hover{
  background-color: rgba(0, 0, 0, 0.2) !important;
}

@keyframes karma-float {
  0% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -30px);
  }
}

.karma-animation {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  font-size: 14px;
  pointer-events: none;
  z-index: 100;
  text-shadow: 0px 0px 2px white;
  animation: karma-float 0.7s ease-out forwards;
}
 
#top-bar {
  top: 0;
  left: 0;
  right: 0;
  background-color: #000000;
  padding: 1rem;
  display: flex;
  justify-content: space-between; // Updated this line
  align-items: center;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
#center-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1; // Added this line
}
#top-bar p {
  margin: 0;
  padding: 0;
  font-size: 14px;
}
#top-bar button {
  background-color: #3DC617;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-left: 10px;
}
#top-bar button:hover {
  background-color: #0056b3;
}
#close-button {
  cursor: pointer;
  padding: 5px;
  color: white;
}

.filter-tab:hover {
  background-color: rgba(0,0,0,0.035);
}

[contenteditable=true]:empty:before {
   content: attr(data-placeholder);
   color: #999;
}
@media only screen and (min-width: 641px) {
  .desktop-search {
    display: block !important;
  }
}
@media only screen and (max-width: 640px) {
  .desktop-search {
    display: none !important;
  }
  #static-desktop-search {
    display: none !important;
  }
}

/* Spinner overlay styles */
#spinner-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.7);
  z-index: 9999;
}
#spinner-overlay::after {
  content: "loading...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  color: black;
}

/* Leaderboard Preview Styles */
.leaderboard-preview-container {
  background-color: var(--table-bg);
  padding: 15px;
  border-top: var(--border);
  border-bottom: var(--border);
  margin-bottom: 20px;
}

.leaderboard-preview-container h2 {
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 10px;
  color: black;
}

.leaderboard-preview-container .leaderboard-list div {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}

.leaderboard-preview-container .leaderboard-list div div {
  color: black;
}

.leaderboard-preview-container a {
  color: #007bff; /* Oku's blue */
  text-decoration: none;
}

/* Safari-specific fixes for content row borders */
@supports (-webkit-appearance: none) {
  .content-row {
    border: 1px solid rgba(166, 110, 78, 0.15) !important;
    background-color: #f6f6ef !important;
  }
}

/* Removed dropdown UI; share button now copies link */
.share-button-container { position: relative; }

/* When a share dropdown is open, ensure the row sits above neighbors */
/* dropdown-open no longer used */

/* No dropdown to hide/show by viewport anymore */

/* Hide mobile spacer on desktop */
@media only screen and (min-width: 641px) {
  .mobile-only-spacer {
    display: none !important;
  }
}

/* Emoji reaction styles - Telegram-like subtle design */
.react-toggle-btn:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

.react-toggle-btn:active:not(:disabled) {
  transform: scale(0.95);
}

/* Emoji picker fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fix analytics overflow on mobile */
@media (max-width: 768px) {
  /* Only style analytics that are actually shown (not display: none) */
  .story-analytics:not([style*="display: none"]) {
    display: inline !important;
    margin-top: 0;
    width: auto;
    line-height: inherit;
    vertical-align: baseline;
  }
  
  /* When analytics are shown, ensure they don't overflow */
  .story-subtitle {
    flex-wrap: wrap;
  }
  
  /* Hide domain on mobile when analytics are shown */
  .story-analytics:not([style*="display: none"]) ~ .domain-text,
  .story-analytics:not([style*="display: none"]) ~ .domain-flex {
    display: none !important;
  }
}

/* Fix for emoji reaction container layout shift */
.reactions-container {
  min-height: 48px \!important; /* Prevent height change when React loads */
}

/* Styles for clicked/visited content rows - using grayscale for better visibility */
.clicked-content {
  filter: grayscale(50%) opacity(0.85);
}

.clicked-content .story-link-container a,
.clicked-content .story-title,
.clicked-link a {
  color: var(--visited-link) !important;
}

/* Disable hover effect on desktop for clicked content */
@media (min-width: 769px) {
  .clicked-content:hover {
    background-color: transparent !important;
    filter: grayscale(50%) opacity(0.85); /* Keep the same styling, no change on hover */
  }

  /* Also disable the hover background color that's applied inline or via other classes */
  .content-row.clicked-content:hover,
  .row-container.clicked-content:hover,
  div.clicked-content:hover,
  tr:has(.clicked-content):hover,
  td:has(.clicked-content):hover {
    background-color: transparent !important;
  }

  /* Prevent any background color changes on hover for clicked content */
  .clicked-content,
  .clicked-content * {
    transition: none !important;
  }
}

/* Override for inverted rows to maintain their style */
.inverted-row.clicked-content {
  filter: invert(100%) brightness(2) grayscale(50%);
  opacity: 0.85;
}

/* Last clicked item indicator - similar to :target */
.last-clicked {
  box-shadow: 0 0 0 2px rgb(175, 192, 70);
  animation: highlight 0.3s ease-out;
  position: relative;
  z-index: 100;
}

/* Don't apply gray filter to last-clicked content */
.last-clicked.clicked-content {
  filter: none;
}

/* Make the like button very prominent in last-clicked story */
.last-clicked .like-button-container {
  position: relative;
  filter: none !important; /* Override grayscale from parent */
}

.last-clicked .like-button-container .like-button {
  animation: sparkle 1.5s ease-in-out infinite;
  background: rgba(175, 192, 70, 0.15) !important;
  outline: 2px solid rgb(175, 192, 70) !important;
  box-shadow: 0 0 0 4px rgba(175, 192, 70, 0.2);
}

.last-clicked .like-button-container .like-button:hover {
  transform: scale(1.1);
}

@keyframes sparkle {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 4px rgba(175, 192, 70, 0.2);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 8px 6px rgba(175, 192, 70, 0.4), 0 0 0 4px rgba(175, 192, 70, 0.3);
  }
}

/* Add "Last clicked" badge-style label at start of subtitle */
.content-row.last-clicked .story-subtitle > .meta-item:first-child::before {
  content: "Last clicked";
  background: rgba(175, 192, 70, 0.15);
  color: rgb(175, 192, 70);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 6px;
  font-size: 11px;
}
