/* ================================================================
   AFRAWbeats Custom Theme Overrides: Hand-Drawn Pencil Sketch System
   Aesthetics: Deep dark graphite/black paper background, wobbly light 
   pencil outlines, white pencil strokes, and warm yellow highlights.
   ================================================================ */

:root {
  --bg-dark: #07070a; /* Textured deep dark graphite/black paper */
  --bg-panel: #111116;
  --bg-hover: #1b1b22;
  
  --comic-yellow: #FFE600; /* Flat yellow highlight */
  --comic-ochre: #FFD600;
  --comic-ink: #FAF9F5; /* Cream/white graphite pencil ink */
  --comic-accent: #FFE600;
  
  --text-main: #FAF9F5;
  --text-mute: #8c8c9e;
  
  --comic-border: 2px solid #FAF9F5;
  --comic-border-thick: 3.5px dashed #FAF9F5;
  --comic-shadow: 4px 4px 0 #FAF9F5;
  
  /* Custom AfrawSketch (primary UI typeface) */
  --font-family-title: 'AfrawSketch', Arial, Helvetica, sans-serif;
  --font-family-body: 'AfrawSketch', Arial, Helvetica, sans-serif;
  --font-comic-title: 'AfrawSketch', Arial, Helvetica, sans-serif;
  --font-comic-body: 'AfrawSketch', Arial, Helvetica, sans-serif;
}

/* Base Body styling */
body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-family-body);
  font-size: 1.15rem;
}

/* Wobbly border keyframes for interactive sketch effects */
@keyframes wobblySketch {
  0% { border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; }
  50% { border-radius: 240px 20px 240px 10px/20px 240px 10px 240px; }
  100% { border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; }
}

/* Invert all black-on-white sprites to make them white-on-black sketch lines with transparent backgrounds */
.sketch-icon, .left-sidebar .nav-link img, #drum-pad-img {
  filter: invert(1) !important;
  mix-blend-mode: screen !important;
}

/* =====================================================================
   UNIFIED STYLE RULE — icons on a YELLOW background must have BLACK lines.
   Default sketch icons are white line-art (invert + screen blend) so they
   read on dark backgrounds. On yellow, white/screen-blended lines become
   invisible, so we MUST reset BOTH filter AND mix-blend-mode. Setting only
   `filter: none` is not enough — `mix-blend-mode: screen` turns black lines
   transparent over yellow. Add `.icon-on-yellow` to any icon (or place it
   inside a yellow button / active yellow highlight) to render solid black.
   ===================================================================== */
.icon-on-yellow,
button[style*="--comic-yellow"] .sketch-icon,
button[style*="comic-yellow"] .sketch-icon,
.btn-yellow .sketch-icon,
.left-sidebar .nav-link:hover .sketch-icon,
.left-sidebar .nav-link.active .sketch-icon,
.left-sidebar .nav-link:hover img,
.left-sidebar .nav-link.active img,
.mobile-bottom-nav .nav-item.active .sketch-icon,
.sketch-action-btn img {
  filter: none !important;
  mix-blend-mode: normal !important;
}
/* Font Awesome glyphs / text on yellow must be BLACK (never white/cream) */
.icon-on-yellow.fa-solid,
.icon-on-yellow.fa-regular,
.btn-yellow i,
button[style*="comic-yellow"] i,
.comic-starburst,
.feed-verified-stamp .comic-starburst,
.badge-on-yellow {
  color: #000 !important;
}

/* Real user avatar photos must NEVER be inverted or screen-blended (only decorative
   sketch line-art gets inverted). Keep them as normal colored photos. */
.fc-avatar,
.f-avatar,
.sketch-avatar-frame img,
#profile-view-avatar,
#public-profile-avatar,
#avatar-img-preview,
#story-viewer-avatar,
#sidebar-my-avatar {
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Apply hand-drawn card aesthetics to panels & feeds */
.comic-panel, .feed-card, .chat-messages, .ver-panel, .launcher-card, .contract-container, .analysis-loading-wrapper {
  background: var(--bg-panel) !important;
  /* frames owned by sketch-system.css border-image */
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform 0.2s ease;
}

.comic-panel:hover, .feed-card:hover, .launcher-card:hover {
  transform: translate(-1px, -1px);
}

/* Feed Cards */
.feed-card {
  padding: 20px;
  margin-bottom: 25px;
  background: var(--bg-panel);
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Post information is anchored over the media. Comments open in their own
   sheet, so the post itself never becomes an inner scrolling region. */
.feed-bottom {
  position: absolute !important;
  bottom: 0;
  left: 0;
  width: calc(100% - 64px); /* leave room for the vertical action buttons */
  z-index: 2;
  display: flex;
  flex-direction: column;
  max-height: none;
  overflow: visible;
}
.feed-bottom .feed-card-info {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  width: 100% !important;
  padding: 2rem 1rem 0.75rem !important;
}
.fc-header {
  border-bottom: 2px dashed var(--comic-ink);
  padding: 0 0 10px 0;
  margin-bottom: 15px;
}
.fc-avatar {
  border: var(--comic-border) !important;
  border-radius: 50% !important;
  filter: none !important; /* Keep avatar as colored/unmodified */
}
.fc-body {
  padding: 0;
  font-size: 1.25rem;
  line-height: 1.4;
}
.fc-footer {
  border-top: 2px dashed var(--comic-ink);
  padding: 10px 0 0 0;
  margin-top: 15px;
  display: flex;
  gap: 20px;
}

/* Sidebars and Navigation */
.left-sidebar, .right-sidebar {
  background: var(--bg-dark);
  border: none;
}
.left-sidebar {
  border-right: 3px solid var(--comic-ink) !important;
}
.right-sidebar {
  border-left: 3px solid var(--comic-ink) !important;
}

/* Sidebar Nav Links */
.left-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 18px;
  color: var(--text-main) !important;
  font-family: var(--font-family-title);
  font-size: 1.4rem;
  border-radius: 12px;
  transition: all 0.2s;
  cursor: pointer;
}
.left-sidebar .nav-link:hover,
.left-sidebar .nav-link.active {
  background: var(--comic-yellow) !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #000 !important;
}
.left-sidebar .nav-link:hover img,
.left-sidebar .nav-link.active img,
.left-sidebar .nav-link:hover .sketch-icon,
.left-sidebar .nav-link.active .sketch-icon {
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Sketched Icon Styles - VISUALLY LARGER */
.sketch-icon {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain;
  vertical-align: middle;
  transition: transform 0.2s ease;
}
.left-sidebar .nav-link:hover .sketch-icon, .left-sidebar .nav-link.active .sketch-icon {
  transform: rotate(-5deg) scale(1.15) !important;
}

.sketch-action-btn {
  background: var(--comic-yellow) !important;
  border: var(--comic-border) !important;
  box-shadow: 2px 2px 0 var(--comic-ink) !important;
  border-radius: 5px !important;
  color: #000 !important;
  cursor: pointer;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family-body);
  font-size: 1.05rem;
  transition: transform 0.2s;
}
.sketch-action-btn img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
  filter: none !important;
  mix-blend-mode: normal !important;
}
.sketch-action-btn:hover {
  transform: scale(1.1) rotate(3deg);
}
.sketch-action-btn.liked {
  transform: scale(1.05);
}

/* Custom Buttons with Pencil Outlines */
button, .phone-btn {
  font-family: var(--font-family-title);
  font-size: 1.25rem;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
  border: 2px solid var(--comic-ink) !important;
  box-shadow: 4px 4px 0 var(--comic-ink) !important;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-panel);
  color: var(--text-main);
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}
button:hover, .phone-btn:hover {
  background: var(--comic-yellow) !important;
  color: #000 !important;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--comic-ink) !important;
}
button:active, .phone-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--comic-ink) !important;
}

.phone-btn.primary {
  background: var(--comic-yellow) !important;
  color: #000 !important;
}
.phone-btn.secondary {
  background: var(--bg-surface) !important;
  color: var(--text-main) !important;
}

/* Interactive chat bubbles resembling hand-drawn notes */
.chat-messages {
  background: transparent;
}
.msg-bubble {
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
  padding: 12px 18px;
  font-size: 1.15rem;
  border: 2px solid var(--comic-ink) !important;
  box-shadow: 3px 3px 0 var(--comic-ink) !important;
  max-width: 80%;
  font-family: var(--font-family-body);
}
.msg-self {
  justify-content: flex-end;
}
.msg-self .msg-bubble {
  background: var(--comic-yellow) !important;
  color: #000;
}
.msg-other {
  justify-content: flex-start;
}
.msg-other .msg-bubble {
  background: var(--bg-panel) !important;
  color: var(--text-main) !important;
}

/* Hand-Drawn Inputs */
input[type="text"], input[type="email"], input[type="password"] {
  background: var(--bg-panel);
  border: 2px solid var(--comic-ink) !important;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
  color: var(--text-main);
  padding: 12px 18px;
  font-family: var(--font-family-body);
  font-size: 1.15rem;
  outline: none;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {
  background: var(--bg-hover);
  border-color: var(--comic-yellow) !important;
  box-shadow: var(--comic-shadow) !important;
}

/* Visual verification progress bar */
.confidence-bar-bg {
  background: var(--bg-hover);
  border: 2px solid var(--comic-ink);
  height: 16px;
  border-radius: 8px;
  overflow: hidden;
}
.confidence-bar-fill {
  background: var(--comic-yellow) !important;
  height: 100%;
}
.forensic-logs {
  background: var(--bg-panel);
  border: 2px solid var(--comic-ink);
  border-radius: 8px;
  font-family: 'AfrawSketch', Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  color: #00ff66 !important; /* Green glowing font for scans */
}

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
  background: var(--bg-panel) !important;
  border-top: 3px solid var(--comic-ink) !important;
}
.mobile-bottom-nav .nav-item {
  color: var(--text-mute) !important;
}
.mobile-bottom-nav .nav-item.active {
  color: var(--comic-yellow) !important;
}
.mobile-bottom-nav .nav-item.active img {
  filter: none !important; /* No invert inside yellow highlight */
}

/* Align and center direct message icons */
.chat-overlay-input button, .chat-input-area button {
  border: 2px solid var(--comic-ink) !important;
  box-shadow: none !important;
  transition: transform 0.1s ease;
}
.chat-overlay-input button:active, .chat-input-area button:active {
  transform: scale(0.9);
}

/* Feed-style preview tiles on profile walls — sketch frames owned by sketch-system */
.wall-preview {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  background: #111116;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform 0.2s ease;
}
.wall-preview:hover {
  transform: translate(-1px, -1px);
  box-shadow: none !important;
}
.wall-preview-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none; /* clicks go to the tile в†’ openPostViewerModal, never stories */
}
.wall-preview-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  z-index: 2;
}
.wall-preview-badge i { color: #fff !important; }
.wall-preview-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.35) 70%, transparent 100%);
  z-index: 1;
}
.wall-preview-title {
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-comic-body);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
}
.wall-preview-stats {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.72rem;
  margin-top: 3px;
  font-family: var(--font-comic-body);
  font-weight: 700;
}
.wall-preview-stats i { color: rgba(255, 255, 255, 0.85) !important; }
.wall-play-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(0,0,0,0.35) 0%, transparent 65%);
}
.wall-play-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 3px solid var(--comic-ink) !important;
  background: rgba(0,0,0,0.75) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0 var(--comic-ink);
}
.wall-play-btn i {
  color: var(--comic-yellow) !important;
  font-size: 1.2rem;
  margin-left: 3px;
}
.wall-preview {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Wall items sketch overrides */
.wall-item {
  background: var(--bg-panel) !important;
  border: 2px solid var(--comic-ink) !important;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
  box-shadow: 2px 2px 0 var(--comic-ink) !important;
  color: var(--text-main) !important;
  transition: transform 0.2s ease;
}
.wall-item:hover {
  transform: scale(1.05) rotate(1deg);
}
.wall-item .wi-title, .wall-item div {
  color: var(--text-main) !important;
}
.wall-item .wi-stats, .wall-item span {
  color: var(--comic-yellow) !important;
}
.wall-item i {
  color: var(--comic-yellow) !important;
}

/* Play button overlay styles */
.sketch-play-btn {
  transition: transform 0.1s ease, background-color 0.1s ease !important;
}
.sketch-play-btn:hover {
  transform: scale(1.1) rotate(2deg) !important;
  background: var(--comic-yellow) !important;
  border-color: var(--comic-yellow) !important;
}
.sketch-play-btn:hover i {
  color: #000 !important;
}
.sketch-play-btn:active {
  transform: scale(0.9) !important;
}


/* Inbox List — uniform card size regardless of preview text length */
.inbox-list {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inbox-item {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 92px;
  min-height: 92px;
  max-height: 92px;
  box-sizing: border-box;
  background: var(--bg-panel) !important;
  border: 2px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}

.inbox-item:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: none !important;
}

.inbox-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--comic-ink);
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.2rem;
  flex-shrink: 0;
  overflow: hidden;
}

.inbox-avatar i {
  color: #fff !important;
}

.inbox-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.inbox-avatar-initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--comic-yellow);
  color: var(--comic-ink, #000);
  font-family: var(--font-comic-title);
  font-size: 1.15rem;
  font-weight: 700;
}

.inbox-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.inbox-name {
  font-family: var(--font-comic-title);
  font-size: 1.1rem;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-preview {
  font-family: var(--font-comic-body);
  font-size: 0.9rem;
  color: var(--text-mute);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: none;
  width: 100%;
}

/* Style for unread conversations */
.inbox-item.unread {
  border-color: rgba(255, 45, 85, 0.55) !important;
}
.inbox-item.unread .inbox-name {
  color: #fff;
}

/* ================================================================
   AI Vision Challenge — hand strip + scanner guy composition
   ================================================================ */
.challenge-visual-container {
  position: relative;
  width: 100%;
  height: clamp(230px, 34vh, 310px);
  min-height: 230px;
  max-height: 310px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 70%, rgba(255, 230, 0, 0.06), transparent 55%),
    rgba(0, 0, 0, 0.35);
  border: 2px dashed var(--comic-ink);
  border-radius: 12px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

/* 5-frame horizontal strip: each cell = 100% of element width */
.hand-challenge-visual {
  position: absolute;
  left: clamp(8px, 3vw, 24px);
  bottom: -34px;
  width: clamp(136px, 31vw, 158px);
  height: clamp(204px, 46.5vw, 237px);
  background-image: url("assets/counting-hands-strip.png");
  background-repeat: no-repeat;
  background-size: 500% 100%;
  background-position: 0% 0%;
  z-index: 4;
  filter:
    brightness(0)
    saturate(100%)
    invert(18%)
    sepia(99%)
    saturate(7200%)
    hue-rotate(356deg)
    brightness(104%)
    contrast(122%)
    drop-shadow(0 0 10px rgba(255, 28, 38, 0.62)) !important;
  image-rendering: auto;
}

/* Big scanner guy — ~2× original, but panel stays usable for camera below */
.scanner-guy-sprite {
  position: absolute;
  right: clamp(-18px, -2vw, -6px);
  bottom: -30px;
  width: clamp(250px, 68vw, 340px);
  height: clamp(250px, 68vw, 340px);
  background: url("assets/scanner-guy.png") center / contain no-repeat;
  z-index: 2;
  filter: none !important;
}

.verification-hear-again {
  min-height: 44px;
  margin: 0.45rem auto 0;
  padding: 0.45rem 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 2px solid var(--comic-ink);
  border-radius: 999px;
  background: #ffe000;
  color: #151515;
  box-shadow: 2px 2px 0 var(--comic-ink);
  font: 700 0.95rem/1 var(--font-comic-title);
  cursor: pointer;
  touch-action: manipulation;
}

.verification-hear-again:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--comic-ink);
}

.verification-voice-status,
.verification-skip-countdown,
.verification-camera-help {
  margin-top: 0.35rem;
  color: var(--text-mute);
  text-align: center;
  line-height: 1.35;
}

.verification-camera-help {
  margin-bottom: 0;
  font: 700 0.78rem/1.35 var(--font-comic-body);
}

.verification-switch-camera {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

.verification-switch-camera:disabled {
  opacity: 0.55;
}

.verification-voice-status.is-error {
  color: var(--comic-ochre);
}

.verification-beta-fallback {
  padding: 0.7rem;
  border: 2px dashed #ffe000;
  border-radius: 10px;
  background: rgba(255, 224, 0, 0.08);
  text-align: center;
}

.verification-beta-fallback[hidden] {
  display: none !important;
}

.verification-beta-fallback p {
  margin: 0 0 0.55rem;
  color: var(--comic-ink);
  font: 700 0.9rem/1.35 var(--font-comic-body);
}

.verification-beta-fallback .phone-btn {
  width: 100%;
  min-height: 46px;
  justify-content: center;
}

@keyframes handWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(-5deg) translateY(-5px) scale(1.03); }
}

@keyframes guyLean {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(-8px, 4px) rotate(-2deg) scale(1.02); }
}

.hand-wiggle-anim {
  animation: handWiggle 2.5s infinite ease-in-out alternate;
  transform-origin: bottom center;
}

.guy-lean-anim {
  animation: guyLean 3.2s infinite ease-in-out alternate;
  transform-origin: 70% 80%;
}

/* While camera is live: keep the requested hand large in the lower-left corner. */
#ver-panel-camera.ver-camera-live .challenge-visual-container {
  height: 200px;
  min-height: 200px;
  max-height: 200px;
  margin-bottom: 6px;
}
#ver-panel-camera.ver-camera-live .scanner-guy-sprite {
  width: 210px;
  height: 210px;
  right: -8px;
  bottom: -38px;
  opacity: 0.42;
  animation: none;
}
#ver-panel-camera.ver-camera-live .hand-challenge-visual {
  width: 142px;
  height: 213px;
  left: 8px;
  bottom: -30px;
  z-index: 4;
  animation: none;
}
#ver-panel-camera.ver-camera-live .pattern-trace-container {
  width: min(92vw, 320px) !important;
  height: min(92vw, 320px) !important;
  max-width: 100%;
}

@media (max-width: 640px) {
  .challenge-visual-container {
    height: clamp(220px, 31vh, 270px);
    min-height: 220px;
  }
  .hand-challenge-visual {
    width: 142px;
    height: 213px;
    left: 8px;
    bottom: -30px;
    z-index: 4;
  }
  .scanner-guy-sprite {
    width: min(78vw, 300px);
    height: min(78vw, 300px);
    right: -12px;
    bottom: -28px;
    z-index: 2;
  }
  @keyframes guyLean {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    50% { transform: translate(-3px, 3px) rotate(-1deg) scale(1.01); }
  }
  .verification-card {
    max-height: min(94dvh, 94vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.25rem 1rem !important;
  }
}

@media (max-width: 400px) {
  .challenge-visual-container { height: 220px; min-height: 220px; }
  .hand-challenge-visual { width: 132px; height: 198px; left: 6px; bottom: -26px; }
  .scanner-guy-sprite { width: 270px; height: 270px; right: -22px; bottom: -26px; }
}

/* =====================================================================
   SIDEBAR + PROFILE POLISH — clean circular avatars, logical spacing
   Replaces the old oversized "ghost person" sketch-frame avatars that
   wrapped a tiny inset photo. Now every avatar is a clean comic circle.
   ===================================================================== */

/* --- Left sidebar structure --- */
.left-sidebar {
  padding: 0.75rem 0 0;
  gap: 0;
  overflow: hidden;
  min-height: 0 !important;
  max-height: 100% !important;
}
.sidebar-nav { gap: 0.35rem; }
.nav-link { position: relative; }
.nav-link .sketch-icon { width: 44px; height: 44px; flex-shrink: 0; }

/* Hover/active yellow fill only — sketch-system owns capsule border-image */
.left-sidebar .nav-link,
.left-sidebar .nav-link:focus {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
}
.left-sidebar .nav-link:hover,
.left-sidebar .nav-link.active,
.left-sidebar .nav-link:hover:focus,
.left-sidebar .nav-link.active:focus {
  background: var(--comic-yellow) !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #000 !important;
}
.left-sidebar .nav-link.active::before { display: none !important; }

/* Search sketch icon — big & visible (≈2.5–3× old 22px lupа) */
.sidebar-search .sidebar-search-icon {
  width: 58px !important;
  height: 58px !important;
  margin: 0 4px 0 2px !important;
  flex-shrink: 0;
  pointer-events: none;
  object-fit: contain;
}

/* Bigger inbox unread counter */
.sidebar-inbox-badge,
#sidebar-inbox-badge {
  display: none;
  background: var(--comic-pink) !important;
  color: #fff !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  min-width: 1.55rem;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  margin-left: 10px;
  font-weight: 800 !important;
  font-family: var(--font-comic-title), sans-serif;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  vertical-align: middle;
}
.left-sidebar .nav-link:hover .sidebar-inbox-badge,
.left-sidebar .nav-link.active .sidebar-inbox-badge,
.left-sidebar .nav-link:hover #sidebar-inbox-badge,
.left-sidebar .nav-link.active #sidebar-inbox-badge {
  border-color: #000;
  color: #fff !important;
}

/* Profile card + follow rows: yellow highlight, never gray wash */
.follow-item {
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 14px;
  transition: background 0.15s ease;
}
.sidebar-user-profile:hover,
.follow-item:hover {
  background: var(--comic-yellow) !important;
  color: #000 !important;
  border-radius: 14px;
}
.sidebar-user-profile:hover .f-name,
.sidebar-user-profile:hover .f-sub,
.sidebar-user-profile:hover .su-chevron,
.follow-item:hover .f-name,
.follow-item:hover .f-sub {
  color: #000 !important;
}

/* Verified badge on yellow: always black lettering */
.comic-starburst,
.feed-verified-stamp .comic-starburst {
  background: var(--comic-yellow) !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  font-weight: 700;
}

/* Modals must not inherit comic-panel hover transform (it breaks fixed centering) */
.comic-panel.modal-safe,
#story-recorder-modal,
#post-viewer-modal,
#comments-modal,
#trending-modal,
#top-artists-modal {
  animation: none !important;
}
.comic-panel.modal-safe:hover,
#story-recorder-modal:hover,
#post-viewer-modal:hover,
#comments-modal:hover {
  transform: translate(-50%, -50%) !important;
  box-shadow: var(--comic-shadow) !important;
  animation: none !important;
}

/* --- Bottom "my profile" card (absolute pin owned by sketch-system) --- */
.sidebar-user-profile {
  margin-top: 0 !important;
  border-top: none !important;
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.sidebar-user-profile:hover {
  background: var(--comic-yellow) !important;
  color: #000 !important;
}
.su-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--comic-ink);
  box-shadow: 2px 2px 0 var(--comic-ink);
  background: var(--comic-yellow);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.su-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.su-avatar-fallback,
.su-avatar span {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-comic-title);
  font-size: 1.5rem; font-weight: bold;
  color: #000; background: var(--comic-yellow);
}
.su-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.su-info .f-name {
  font-family: var(--font-comic-title);
  font-size: 1.25rem; font-weight: bold; color: var(--text-main);
  line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.su-info .f-sub {
  font-size: 0.9rem; color: var(--comic-yellow); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.su-chevron { color: var(--text-mute); font-size: 0.9rem; flex-shrink: 0; }

/* --- Profile avatar: red = live, yellow = active story (24h) --- */
.profile-avatar-ring {
  width: 104px;
  height: 104px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.28);
  box-shadow: none;
  background: #111;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.profile-avatar-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.profile-avatar-ring.has-story {
  border-color: var(--comic-yellow) !important;
  box-shadow: 0 0 0 2px rgba(255, 230, 0, 0.2), 0 0 14px rgba(255, 230, 0, 0.45) !important;
}
.profile-avatar-ring.is-live {
  border-color: #ff2d55 !important;
  box-shadow: 0 0 0 2px rgba(255, 45, 85, 0.35), 0 0 16px rgba(255, 45, 85, 0.7) !important;
  animation: profileLivePulse 1.15s ease-in-out infinite alternate;
}
.profile-avatar-ring.is-live,
.profile-avatar-ring.has-story {
  cursor: pointer;
}
@keyframes profileLivePulse {
  from { box-shadow: 0 0 0 2px rgba(255, 45, 85, 0.25), 0 0 10px rgba(255, 45, 85, 0.45); }
  to { box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.45), 0 0 20px rgba(255, 45, 85, 0.85); }
}

/* Profile actions — compact row (override index.css .phone-btn { width:100% }) */
.profile-bio-section {
  max-width: 720px;
  padding-left: 15px;
  padding-right: 15px;
}
.profile-header-info {
  max-width: 720px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
.profile-action-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-top: 0.85rem !important;
  align-items: center !important;
  width: 100%;
  max-width: 720px;
}
.profile-action-row > .phone-btn,
.profile-bio-section .profile-action-row .phone-btn {
  width: auto !important;
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  min-height: auto !important;
  padding: 0.45rem 1rem !important;
  font-size: 1rem !important;
  justify-content: center;
}
/* Unified sketch colors — kill index.css green/danger overrides on profile */
.profile-action-row .phone-btn.primary,
.profile-action-row .phone-btn.primary.is-following,
#btn-follow-user.is-following {
  background: var(--comic-yellow) !important;
  color: #000 !important;
}
.profile-action-row .phone-btn.primary,
.profile-action-row .phone-btn.primary *,
.profile-action-row .phone-btn.primary i,
.profile-action-row .phone-btn.primary .fa-solid,
.profile-action-row .phone-btn.primary .fa-solid::before,
#btn-follow-user.is-following,
#btn-follow-user.is-following *,
#btn-follow-user.is-following i,
#btn-follow-user.is-following .fa-solid,
#btn-follow-user.is-following .fa-solid::before,
#btn-follow-user.is-following #follow-btn-text {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}
.profile-action-row .phone-btn.secondary {
  background: #000 !important;
  color: #fff !important;
}
.profile-action-row .phone-btn.secondary i,
.profile-action-row .phone-btn.secondary .fa-solid {
  color: #fff !important;
}
/* Logout = icon-only, same height as siblings */
.profile-action-row .phone-btn[title="Log out"] {
  width: 2.6rem !important;
  min-width: 2.6rem !important;
  padding: 0.45rem !important;
}

/* Section headers — sketch type + ink, no FA candy */
.for-you-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0.85rem 0 0.35rem;
  padding: 0.15rem 0 0.55rem;
  position: relative;
  font-family: var(--font-comic-title);
  color: #fff;
  text-align: center;
}
.for-you-header::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 10px;
  background: var(--sketch-rule, url('assets/sketch-ui/rule.png')) center / 100% 100% no-repeat;
  opacity: 0.85;
  pointer-events: none;
}
.for-you-title {
  font-family: 'AfrawSketch', Arial, Helvetica, sans-serif !important;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: #fff !important;
  line-height: 1;
}
.for-you-star {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
  opacity: 0.95;
}

.live-chat-header {
  display: flex !important;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 1rem 0.85rem !important;
  font-family: 'AfrawSketch', Arial, Helvetica, sans-serif !important;
  color: #fff !important;
}
.live-chat-title,
#live-chat-room-label {
  font-family: 'AfrawSketch', Arial, Helvetica, sans-serif !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.03em;
  color: #fff !important;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-chat-header .live-dot {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  margin-right: 0 !important;
  background: #ff2d55;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 45, 85, 0.25);
  animation: pulse 1.2s infinite alternate;
}

/* Stories strip: red = live now; white = story available */
.story-live-badge {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff2d55;
  color: #fff !important;
  font-size: 0.55rem;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid #000;
  font-family: var(--font-comic-body);
  z-index: 2;
}
.story-ring.live-now-ring {
  border: 3px solid #ff2d55 !important;
  box-shadow: 0 0 12px rgba(255, 45, 85, 0.7) !important;
}
.story-ring.story-has-ring {
  border: 3px solid var(--comic-yellow) !important;
  box-shadow: 0 0 10px rgba(255, 230, 0, 0.35) !important;
}
#story-viewer-modal {
  display: none;
}
#story-viewer-modal[style*="display: flex"],
#story-viewer-modal[style*="display:flex"] {
  display: flex !important;
}

/* Profile stats: larger, even, readable — no one-color glow */
.profile-stats-container .profile-stat {
  gap: 0.15rem;
}
.profile-stats-container .profile-stat-num {
  color: #fff !important;
  text-shadow: none !important;
  font-family: var(--font-comic-title);
  font-size: 1.85rem !important;
  line-height: 1.1 !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.profile-stats-container .profile-stat-label {
  color: var(--text-mute) !important;
  text-shadow: none !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.04em;
}

.profile-setup-panel {
  margin: 1rem auto;
  padding: 1rem 1.1rem 1.25rem;
  max-width: 720px;
  max-height: calc(100% - 2rem);
  overflow-y: auto;
}
.profile-setup-title {
  font-family: var(--font-comic-title);
  color: #fff;
  text-align: center;
  margin: 0 0 1rem;
  font-size: 1.45rem;
  letter-spacing: 0.02em;
}
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
@media (max-width: 520px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

/* Edit Profile skill/genre chips — sketch, no pink/indigo wash */
#phone-profile-setup .genre-tags {
  justify-content: flex-start;
  gap: 0.45rem;
  margin: 0.35rem 0 0;
}
#phone-profile-setup .genre-tag {
  background: rgba(0, 0, 0, 0.55) !important;
  border: 2px solid rgba(255, 255, 255, 0.55) !important;
  color: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-comic-body);
  font-size: 0.9rem;
  padding: 0.35rem 0.7rem;
}
#phone-profile-setup .genre-tag.selected {
  background: var(--comic-yellow) !important;
  color: var(--comic-ink) !important;
  border-color: var(--comic-ink) !important;
  box-shadow: none !important;
}
#phone-profile-setup .genre-tag:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-color: #fff !important;
}
#phone-profile-setup .genre-tag.selected:hover {
  background: var(--comic-yellow) !important;
  color: var(--comic-ink) !important;
  border-color: var(--comic-ink) !important;
}
#phone-profile-setup .form-group > label {
  color: var(--text-mute);
  font-family: var(--font-comic-body);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-meta-line {
  color: var(--text-mute);
  font-family: var(--font-comic-body);
  font-size: 0.95rem;
  margin: 0 0 6px;
}
.profile-view-tags {
  justify-content: flex-start;
  margin: 0.35rem 0 0.15rem;
}
.profile-meta-tag {
  display: inline-block;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e8e8f0;
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  font-family: var(--font-comic-body);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: none;
  cursor: default;
}
.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.55rem 0 0.2rem;
}
.profile-link {
  color: #fff;
  text-decoration: none;
  font-family: var(--font-comic-body);
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.profile-link:hover {
  border-bottom-color: #fff;
}
.profile-extra {
  margin-top: 0.55rem;
  color: #c8c8d8;
  font-size: 0.88rem;
  line-height: 1.45;
  font-family: var(--font-comic-body);
}
.profile-extra-label {
  color: var(--text-mute);
  margin-right: 0.35rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.profile-activity-section {
  padding: 0.35rem 15px 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  max-width: 720px;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .profile-activity-section {
    grid-template-columns: 1fr;
  }
}
.profile-activity-block {
  min-width: 0;
  padding: 0.65rem 0.75rem 0.8rem;
  /* Frame owned by sketch-system border-image — no solid border */
  border: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.profile-activity-block .profile-wall-label,
#profile-activity .profile-wall-label,
#public-profile-activity .profile-wall-label {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute) !important;
  text-align: left;
  width: auto;
}
.profile-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  color: #fff;
  font-family: var(--font-comic-body);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.35rem 0.6rem;
  border-radius: 0;
  cursor: pointer;
  box-shadow: none;
}
.profile-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 12rem;
}
.profile-chip:hover {
  background: rgba(255, 255, 255, 0.06);
}
.profile-chip-role {
  flex-shrink: 0;
  color: var(--comic-yellow);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.profile-empty-chip {
  color: var(--text-mute);
  font-size: 0.85rem;
  font-family: var(--font-comic-body);
}


/* --- sketch-system owns frames (avoid fighting hollow border-image) --- */
.comic-panel, .feed-card, .chat-messages, .ver-panel, .launcher-card, .contract-container, .analysis-loading-wrapper {
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.comic-panel:hover, .feed-card:hover, .launcher-card:hover {
  box-shadow: none !important;
  animation: none !important;
}
.left-sidebar { border-right: none !important; }
.right-sidebar { border-left: none !important; }