/* Post navigation pills and buttons dark mode */
.post-date-pill {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  color: #333;
}

.post-nav-button {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  color: #333;
}

.post-image-frame {
  corner-shape: squircle !important;
  border-radius: 40px !important;
  background: #e7e3df;
}

body.dark-mode .post-date-pill {
  background: #444444;
  border: 1px solid #555555;
  color: #ffffff;
}

body.dark-mode .post-nav-button {
  background: #444444;
  border: 1px solid #555555;
  color: #ffffff;
}

body.dark-mode .post-image-frame {
  background: #1a1a1a;
}

/* Attachment Card Styles */
.attachment-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  background: #f8f9f8;
  border-radius: 12px;
  padding: 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  margin: 1rem 0;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.attachment-card:hover {
  border-color: #ff8200;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.attachment-details {
  flex: 1;
  z-index: 1;
  min-width: 0;
  padding-right: 120px;
}

.attachment-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
  color: #333;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.attachment-meta {
  font-size: 14px;
  color: #777;
}

.attachment-preview {
  position: absolute;
  bottom: -70px;
  right: 20px;
  transform: rotate(8deg);
  border: 1px solid #ccc;
  background: #fffbea;
  width: 100px;
  height: 130px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Video embed styles */
.video-embed {
  position: relative;
  margin: 1.5rem 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  background: #f8f9fa;
}

.video-embed video {
  width: 100%;
  height: auto;
  min-height: 200px;
  display: block;
  border-radius: 12px;
  background: #000;
}

.video-controls {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  opacity: 0;
  transform: scale(0.8);
}

.video-embed:hover .video-controls {
  opacity: 1;
  transform: scale(1);
}

.video-controls:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.video-controls i {
  color: white;
  font-size: 16px;
  margin-left: 2px;
  /* Slight offset for play icon visual balance */
}

.video-controls.paused i {
  margin-left: 2px;
}

.video-controls.playing i {
  margin-left: 0;
}

/* Video cover styles */
.video-cover {
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 2rem;
}

.video-cover video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.video-cover .video-controls {
  width: 60px;
  height: 60px;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.6);
}

.video-cover .video-controls i {
  font-size: 18px;
}

/* Dark mode video styles */
.dark-mode .video-embed {
  background: #2a2a2a;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.dark-mode .video-controls {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .video-controls:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .attachment-card {
    padding: 12px;
    margin: 0.75rem 0;
  }

  .attachment-details {
    padding-right: 90px;
  }

  .attachment-title {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .attachment-meta {
    font-size: 12px;
  }

  .attachment-preview {
    width: 80px;
    height: 100px;
    right: 10px;
    bottom: -50px;
  }

  /* Video responsive adjustments */
  .video-cover {
    height: 200px;
    margin-bottom: 1.5rem;
  }

  .video-controls {
    width: 40px;
    height: 40px;
    top: 10px;
    right: 10px;
  }

  .video-controls i {
    font-size: 14px;
  }

  .video-cover .video-controls {
    width: 50px;
    height: 50px;
    top: 15px;
    right: 15px;
  }

  .video-cover .video-controls i {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .attachment-card {
    padding: 10px;
  }

  .attachment-details {
    padding-right: 70px;
  }

  .attachment-title {
    font-size: 13px;
  }

  .attachment-meta {
    font-size: 11px;
  }

  .attachment-preview {
    width: 60px;
    height: 80px;
    right: 8px;
    bottom: -40px;
  }
}

/* Seek controls styling */
.seek-btn:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  transform: scale(1.1);
}

.seek-btn:active {
  transform: scale(0.95);
}

/* Dark mode seek controls */
.dark-mode .seek-btn {
  color: #bbb !important;
}

.dark-mode .seek-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .seek-btn.stop-btn {
  color: #f44336 !important;
}

/* Mobile responsive for seek controls */
@media (max-width: 768px) {
  .seek-controls {
    gap: 0.2rem !important;
  }

  .seek-btn {
    padding: 0.15rem !important;
  }

  .seek-btn i {
    font-size: 9px !important;
  }
}

.attachment-preview canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark mode styles for attachments */
body.dark-mode .attachment-card {
  background: #333333;
  border-color: transparent;
}

/* Author Profile Styles */
.author-avatar {
  transition: transform 0.2s ease;
}

.author-avatar:hover {
  transform: scale(1.05);
}

.author-info .author-name {
  transition: color 0.2s ease;
  cursor: pointer;
}

.author-info .author-name:hover {
  color: #ff8200 !important;
}

/* Dark mode author styles */
body.dark-mode .author-avatar {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .author-info .author-name {
  color: var(--text-dark, #ffffff) !important;
}

/* Responsive author layout */
@media (max-width: 768px) {
  .author-avatar {
    width: 30px !important;
    height: 30px !important;
  }

  .author-info .author-name {
    font-size: 13px !important;
  }
}

body.dark-mode .attachment-card:hover {
  border-color: #ff8200;
}

body.dark-mode .attachment-title {
  color: #ffffff;
}

body.dark-mode .attachment-meta {
  color: #aaaaaa;
}

body.dark-mode .attachment-preview {
  background: #444444;
  border-color: #555555;
}

/* Listen Component Styles */
.listen-pill {
  transition: all 0.2s ease;
}

.listen-pill:hover {
  background: rgba(255, 130, 0, 0.1) !important;
  transform: translateY(-1px);
}

.listen-pill.playing {
  background: rgba(255, 130, 0, 0.15) !important;
}

.listen-pill.playing .wave-bar {
  animation: none;
  /* Remove static animation, we'll use JavaScript */
}

.wave-bar {
  transition: height 0.2s ease, opacity 0.2s ease;
}

/* Remove static animation delays - we'll use dynamic JavaScript animation */

/* Dark mode styles for listen component */
body.dark-mode .listen-pill {
  background: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .listen-pill:hover {
  background: rgba(255, 130, 0, 0.2) !important;
}

body.dark-mode .listen-pill #listen-icon,
body.dark-mode .listen-pill #listen-duration {
  color: #ffffff !important;
}

body.dark-mode .listen-pill .wave-bar {
  background: #aaaaaa !important;
}

/* Code styling with JetBrains Mono */
code {
  font-family: 'JetBrains Mono', 'Consolas', 'Monaco', 'Courier New', monospace !important;
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-weight: 400;
}

/* Dark mode code styling */
body.dark-mode code {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}





/* Print styles for code */
@media print {
  code {
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', 'Courier New', monospace !important;
    background: #f5f5f5 !important;
    color: #333 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    font-size: 0.85em !important;
    page-break-inside: avoid;
  }

  /* Print styles for tables */
  .post-body table {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    overflow: visible !important;
    page-break-inside: auto !important;
  }

  .post-body table tr {
    page-break-inside: avoid !important;
  }

  .post-body table th,
  .post-body table td {
    border: 1px solid #333 !important;
    padding: 8px !important;
    text-align: left !important;
    white-space: normal !important;
    min-width: auto !important;
    word-break: break-word !important;
  }

  .post-body table th {
    background-color: #f5f5f5 !important;
    font-weight: bold !important;
    color: #333 !important;
  }

  .post-body table td {
    background-color: #ffffff !important;
    color: #333 !important;
  }
}

/* Table of Contents (right-side) */
.post-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}

.post-layout .post-body {
  flex: 1 1 0;
  max-width: 700px;
}

.post-toc {
  width: 260px;
  flex: 0 0 260px;
  position: sticky;
  top: 110px;
  align-self: flex-start;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  font-size: 14px;
  line-height: 1.5;
  /* Performance optimizations for sticky element */
  transform: translateZ(0);
  will-change: transform;
  contain: layout style paint;
}

.post-toc .toc {
  margin: 0;
  padding: 0;
}

.post-toc .toc h2 {
  font-size: 15px;
  margin: 0 0 8px 0;
  font-weight: 700;
}

.post-toc .toc ul {
  list-style: none;
  padding-left: 0.25rem;
  margin: 0;
}

.post-toc .toc li {
  margin: 6px 0;
}

.post-toc .toc a {
  color: var(--text, #333);
  text-decoration: none;
  font-size: 13px;
}

.post-toc .toc a:hover {
  color: var(--primary, #ff8200);
  text-decoration: underline;
}

/* Dark mode adjustments */
body.dark-mode .post-toc {
  background: #232323;
  border-color: #3a3a3a;
  color: #eaeaea;
}

body.dark-mode .post-toc .toc a {
  color: #dcdcdc;
}

/* TOC level indentation helpers generated by JS fallback */
.post-toc .toc .toc-level-2 {
  margin-left: 0;
}

.post-toc .toc .toc-level-3 {
  margin-left: 8px;
  font-size: 13px;
}

.post-toc .toc .toc-level-4 {
  margin-left: 16px;
  font-size: 13px;
}

/* Responsive: hide TOC on smaller screens */
@media (max-width: 980px) {
  .post-layout {
    display: block;
  }

  .post-toc {
    display: none;
  }
}

/* Site TOC rail + card */

.toc-mobile-toggle {
  display: none;
  position: absolute;
  right: 58px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text, #222);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 1201;
}

.toc-mobile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.toc-mobile-icon-close {
  display: none;
}

.toc-mobile-toggle[data-state="open"] .toc-mobile-icon-menu {
  display: none;
}

.toc-mobile-toggle[data-state="open"] .toc-mobile-icon-close {
  display: inline-flex;
}

.toc-mobile-toggle:focus {
  outline: none;
}

.toc-scroll-rail {
  position: fixed;
  right: 14px;
  top: clamp(72px, calc(50vh - 48px - var(--global-footer-offset, 0px)), calc(100vh - 116px));
  bottom: auto;
  transform: none;
  z-index: 1201;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 12px;
  padding: 0;
  background: transparent;
  transition:
    top 200ms ease-out,
    opacity 180ms ease,
    visibility 180ms ease;
  height: 96px;
  overflow-y: auto;
  overflow-x: hidden;
}

.toc-rail-line {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  flex: 0 0 auto;
  width: var(--toc-line-width, 22px);
  height: 2px;
  border: 0;
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.38);
  cursor: pointer;
  padding: 0;
  transition: background-color 140ms ease, width 140ms ease;
}

.toc-rail-line:hover {
  background: #6b6b6b;
}

.toc-rail-line.active {
  background: #111;
}

.site-toc-sidebar {
  position: fixed;
  right: 14px;
  left: auto;
  top: 50%;
  width: min(220px, calc(100vw - 176px));
  max-height: min(62dvh, 520px);
  max-height: min(62vh, 520px);
  transform: translate3d(8px, -50%, 0);
  opacity: 0;
  transition: transform 240ms ease, opacity 220ms ease;
  z-index: 1200;
  display: block;
  visibility: hidden;
  pointer-events: none;
  box-sizing: border-box;
  padding: 10px 10px 16px 10px;
  background-color: #ece6df;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 40px;
  corner-shape: squircle;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  overflow: auto;
  --toc-sheet-drag: 0px;
}

/* Prevent transition flash on page load - JS will remove this class after init */
.site-toc-sidebar.no-transition {
  transition: none !important;
}

/* Show sidebar only when JS has initialized it */
.site-toc-sidebar.toc-ready {
  visibility: hidden;
}

.site-toc-close {
  display: none !important;
}

.site-toc-sheet-handle {
  display: none;
}

.site-toc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.24);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms ease;
  z-index: 1190;
}

/* Desktop hover behavior */
body.toc-hover-open .site-toc-sidebar.toc-ready {
  transform: translate3d(0, -50%, 0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.toc-hover-open .toc-scroll-rail {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Mobile bottom-sheet behavior */
body.toc-sheet-open .site-toc-sidebar.toc-ready {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.toc-sheet-open .site-toc-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Dark mode */
/* Dark mode: match dark header color */
.dark .site-toc-sidebar,
body.dark-mode .site-toc-sidebar {
  background-color: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.06);
  color: #eaeaea;
}

.dark .toc-scroll-rail,
body.dark-mode .toc-scroll-rail {
  background: transparent;
}

.dark .toc-rail-line,
body.dark-mode .toc-rail-line {
  background: rgba(255, 255, 255, 0.62);
}

.dark .toc-rail-line:hover,
.dark .toc-rail-line.active,
body.dark-mode .toc-rail-line:hover,
body.dark-mode .toc-rail-line.active {
  background: #fff;
}

.toc-scroll-rail {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.toc-scroll-rail::-webkit-scrollbar {
  display: none;
}

@media (max-width: 700px) {
  .toc-mobile-toggle {
    right: 10px;
  }
}

/* Override inline/header fixed width on small screens to prevent forcing horizontal scroll */
@media (max-width: 980px) {

  .site-header,
  body.blog-layout .site-header {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
  }

  .toc-scroll-rail {
    display: none !important;
  }

  .toc-mobile-toggle {
    display: none;
  }

  .toc-mobile-toggle[data-has-toc="true"] {
    display: inline-flex;
  }

  .site-toc-sheet-handle {
    display: flex;
    width: calc(100% + 12px);
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text, #232323);
    margin: -6px -6px 8px;
    padding: 10px 0 12px;
    min-height: 56px;
    position: relative;
    cursor: ns-resize;
    touch-action: none;
  }

  .site-toc-sheet-handle:focus {
    outline: none;
  }

  .site-toc-sheet-handle:active {
    cursor: grabbing;
  }

  .site-toc-sheet-handle .sheet-handle-chevrons {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .site-toc-sheet-handle .sheet-handle-icon {
    display: inline-flex;
    font-size: 12px;
    line-height: 1;
    color: var(--text, #232323);
    opacity: 0.56;
    transition: opacity 140ms ease, transform 140ms ease;
  }

  .site-toc-sheet-handle .sheet-handle-icon.up {
    margin-bottom: -2px;
  }

  .site-toc-sheet-handle .sheet-handle-icon.down {
    margin-top: -2px;
  }

  .site-toc-sheet-handle[data-drag="up"] .sheet-handle-icon.up {
    opacity: 1;
    transform: translateY(-1px) scale(1.08);
  }

  .site-toc-sheet-handle[data-drag="up"] .sheet-handle-icon.down {
    opacity: 0.22;
  }

  .site-toc-sheet-handle[data-drag="down"] .sheet-handle-icon.down {
    opacity: 1;
    transform: translateY(1px) scale(1.08);
  }

  .site-toc-sheet-handle[data-drag="down"] .sheet-handle-icon.up {
    opacity: 0.22;
  }

  /* Mobile bottom sheet layout */
  .site-toc-sidebar {
    left: 5px !important;
    right: 5px !important;
    top: auto !important;
    bottom: 5px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(74dvh, 560px) !important;
    max-height: min(74vh, 560px) !important;
    border-radius: 40px !important;
    corner-shape: squircle;
    transform: translateY(calc(100% + 12px)) !important;
    padding: 8px 5px 5px 5px !important;
    background: #ece6df !important;
  }

  body.dark-mode .site-toc-sidebar,
  .dark .site-toc-sidebar {
    background: #1a1a1a !important;
  }

  body.dark-mode .site-toc-sheet-handle .sheet-handle-icon,
  .dark .site-toc-sheet-handle .sheet-handle-icon {
    color: rgba(255, 255, 255, 0.88);
  }

  body.toc-sheet-open .site-toc-sidebar.toc-ready {
    transform: translateY(var(--toc-sheet-drag, 0px)) !important;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 180ms ease,
      visibility 180ms ease;
  }

  body.toc-sheet-dragging .site-toc-sidebar.toc-ready {
    transition: none !important;
    will-change: transform;
  }

  /* Prevent post container from creating horizontal overflow */
  main.post-container,
  .post-layout {
    overflow-x: hidden !important;
  }
}

@media (max-width: 980px) and (min-width: 701px) {
  .site-header {
    padding-right: 114px !important;
  }

  .site-header .back-button {
    right: 74px !important;
    font-size: 1.05rem !important;
  }

  .toc-mobile-toggle[data-has-toc="true"] {
    right: 14px;
    width: 32px;
    height: 32px;
  }
}

/* Ensure the back/exit icon stays fully visible on small screens */
@media (max-width: 700px) {
  .site-header {
    padding-right: 96px !important;
    box-sizing: border-box;
    overflow: visible !important;
  }

  .site-header .back-button {
    position: absolute !important;
    right: 56px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1400 !important;
    font-size: 1rem !important;
  }
}

/* Hide scrollbars visually but keep scrolling functional */
.site-toc-sidebar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.site-toc-sidebar::-webkit-scrollbar {
  display: none;
}

.site-toc-sidebar *::-webkit-scrollbar {
  display: none;
}

.site-toc-sidebar * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Merge TOC into sidebar: remove card/container styling for TOC elements */
.site-toc-sidebar .post-toc,
.site-toc-sidebar .toc {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
}

/* When the .post-toc is placed inside the sidebar, disable sticky behavior and add bottom buffer */
.site-toc-sidebar>.post-toc {
  position: static !important;
  top: auto !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.site-toc-sidebar>.post-toc .toc,
.site-toc-sidebar>.post-toc ul {
  padding-bottom: 86px;
  margin-bottom: 0;
}

.site-toc-sidebar .toc h2 {
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 700;
}

.site-toc-sidebar .toc ul {
  padding-left: 0.25rem;
}

.site-toc-sidebar .toc a {
  color: var(--text, #222);
  display: block;
  padding: 8px 7px;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 8px;
}

.site-toc-sidebar .toc a:hover {
  color: #ff5400;
  text-decoration: none;
}

/* Active/Current TOC item */
.site-toc-sidebar .toc li {
  position: relative;
}

.site-toc-sidebar .toc a.active {
  color: #ff5400;
  font-weight: 600;
  background: transparent;
}

body.dark-mode .site-toc-sidebar .toc a.active,
.dark .site-toc-sidebar .toc a.active {
  color: #ff5400 !important;
}

.site-toc-sidebar .toc a.active::before {
  content: none;
}

.site-toc-sidebar .toc {
  font-size: 14px;
}

.site-toc-sidebar .toc h2 {
  font-size: 13px;
  margin-bottom: 6px;
}

.site-toc-sidebar .toc li {
  margin: 6px 0;
}

/* smooth transition when active changes */
.site-toc-sidebar .toc a {
  transition: color 160ms ease, background-color 160ms ease;
}

/* Slight indent for level markers */
.site-toc-sidebar .toc .toc-level-3 a {
  padding-left: 14px;
  font-size: 15px;
}

.site-toc-sidebar .toc .toc-level-4 a {
  padding-left: 20px;
  font-size: 14px;
}

/* Mobile-friendliness fixes: prevent long words/URLs from breaking viewport */
.post-body,
.post-body * {
  -webkit-overflow-scrolling: touch;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  hyphens: auto;
}

/* Prevent scroll chaining but allow browser navigation gestures */
html,
body {
  overscroll-behavior-y: contain;
}

@media (max-width: 980px) {
  @supports (height: 100dvh) {
    .site-toc-sidebar {
      max-height: min(76dvh, 640px) !important;
    }
  }
}

/* Ensure media and generated previews scale to container */
.post-body img,
.post-body video,
.post-body canvas,
.attachment-card,
.attachment-card * {
  max-width: 100% !important;
  height: auto !important;
}

/* Tables: allow horizontal scrolling on small screens without breaking layout */
.post-body table {
  width: 100%;
  max-width: 100%;
  display: block;
  overflow-x: auto;
  overflow-y: visible;
  border-collapse: collapse;
  min-width: min-content;
}

.post-body table th,
.post-body table td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ddd;
  white-space: nowrap;
  min-width: 150px;
}

.post-body table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* Dark mode table styles */
body.dark-mode .post-body table th {
  background-color: #1e1e1e;
  border-color: #333;
  color: #eeeeee;
}

body.dark-mode .post-body table td {
  border-color: #333;
  color: #cccccc;
}

body.dark-mode .post-body table th,
body.dark-mode .post-body table td {
  border: 1px solid #333;
}

/* Make the Syntax column (2nd column) wider */
.post-body table td:nth-child(2),
.post-body table th:nth-child(2) {
  min-width: 500px;
}

/* Instead of locking the whole document scroll while TOC is open,
   keep document scrolling enabled and rely on the sidebar's
   own scrolling (with overscroll containment) so only the area
   covered by the sidebar captures scrolling. */

.site-toc-sidebar {
  /* ensure sidebar scroll doesn't chain to the page behind */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* Pre/code: wrap long lines instead of creating horizontal overflow */
.post-body pre,
.post-body code {
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

/* Scroll performance optimizations */
.post-container,
.post-body,
.post-layout {
  /* Promote to compositing layer for smoother scrolling */
  will-change: auto;
  contain: layout style;
}

/* Prevent sticky TOC from causing layout recalculations during scroll */
.post-toc {
  will-change: auto;
  contain: layout style paint;
  backface-visibility: hidden;
}

/* Heading anchor links */
.post-body h1,
.post-body h2,
.post-body h3 {
  position: relative;
  scroll-margin-top: 80px;
}

.post-body h1:hover .heading-anchor,
.post-body h2:hover .heading-anchor,
.post-body h3:hover .heading-anchor {
  opacity: 1;
}

.heading-anchor {
  display: inline-block;
  margin-left: 10px;
  font-size: 0.65em;
  color: #ff8200;
  opacity: 0;
  transition: opacity 0.2s ease;
  text-decoration: none;
  padding: 4px 8px;
  cursor: pointer;
  vertical-align: middle;
}

.heading-anchor:hover {
  opacity: 1 !important;
  color: #e67300;
}

.heading-anchor i {
  font-weight: 400;
}

/* Mobile: always show anchor on tap-capable devices */
@media (hover: none) {
  .heading-anchor {
    opacity: 0.5;
  }
}

/* Toast notification for copied link */
.anchor-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.anchor-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.anchor-toast i {
  margin-right: 8px;
  color: #4CAF50;
}

/* Dark mode */
body.dark-mode .heading-anchor {
  color: #ff9933;
}

body.dark-mode .heading-anchor:hover {
  color: #ffaa55;
}

body.dark-mode .anchor-toast {
  background: rgba(50, 50, 50, 0.95);
}

/* Ensure smooth scrolling on the main document */
html {
  scroll-behavior: smooth;
  /* Contain overscroll but allow browser navigation gestures (back/forward swipe) */
  overscroll-behavior-x: auto;
  overscroll-behavior-y: contain;
}

body {
  /* Contain vertical overscroll, allow horizontal for browser back/forward gestures */
  overscroll-behavior-x: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* Disable smooth scroll for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}