@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f4f4f7; color: #1a1a1a; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.w-header {
  background: linear-gradient(135deg, #f77737 0%, #e1306c 55%, #a855f7 100%);
  color: #fff;
  padding: 1.25rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(225,48,108,0.25);
}
.w-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.w-logo { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; }
.w-logo span { font-weight: 400; opacity: 0.8; }
.w-tagline { font-size: 0.9rem; opacity: 0.85; margin-top: 0.25rem; font-weight: 500; }

/* Lang switcher — shared by walls.html and wall.html */
.w-lang-switcher { display: flex; gap: 0.2rem; }
.w-lang-btn { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.45); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.2rem 0.5rem; border-radius: 4px; cursor: pointer; transition: background 0.15s; }
.w-lang-btn:hover { background: rgba(255,255,255,0.32); }
.w-lang-btn.active { background: rgba(255,255,255,0.9); color: #c13584; border-color: transparent; }

/* Wall-specific header */
.w-wall-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 0.9rem 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.w-wall-header-left { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.w-back { font-size: 0.85rem; opacity: 0.85; white-space: nowrap; border: 1px solid rgba(255,255,255,0.4); border-radius: 6px; padding: 0.2rem 0.6rem; }
.w-back:hover { background: rgba(255,255,255,0.15); }
.w-wall-title { font-size: 1.1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.w-wall-header-right { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }

/* ── Countdown ────────────────────────────────────────────────────────────── */
.w-countdown-wrap {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.05rem;
}
.w-countdown-label {
  font-size: 0.62rem; font-weight: 600; opacity: 0.75;
  letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
}
.w-countdown {
  font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,0.2); border-radius: 8px; padding: 0.3rem 0.7rem;
  letter-spacing: 0.04em;
}
.w-countdown.urgent { background: rgba(220,38,38,0.7); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.w-badge {
  font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.55rem;
  border-radius: 99px; white-space: nowrap;
}
.w-badge-open    { background: #dcfce7; color: #15803d; }
.w-badge-private { background: #fef3c7; color: #92400e; }
.w-badge-global  { background: #dbeafe; color: #1e40af; }

/* ── Wall type cards ──────────────────────────────────────────────────────── */
.w-type-cards { display: flex; flex-direction: column; gap: 0.6rem; }
.w-type-card {
  display: flex; align-items: flex-start; gap: 0.9rem;
  padding: 0.9rem 1rem; border-radius: 10px;
  border: 2px solid #e5e7eb; background: #fafafa;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.w-type-card:hover { border-color: #a5b4fc; background: #f5f3ff; }
.w-type-card.selected { border-color: #6366f1; background: #eef2ff; }
.w-type-card input[type="radio"] { display: none; }
.w-type-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; padding-top: 0.1rem; }
.w-type-info { display: flex; flex-direction: column; gap: 0.2rem; }
.w-type-info strong { font-size: 0.9rem; font-weight: 700; color: #111827; }
.w-type-info span   { font-size: 0.8rem; color: #6b7280; line-height: 1.4; }
.w-type-card.selected .w-type-info strong { color: #4338ca; }

/* ── Old toggle styles (kept for safety) ─────────────────────────────────── */
.w-toggles { gap: 0.6rem !important; }
.w-toggle-label {
  display: flex; align-items: flex-start; gap: 0.55rem;
  font-size: 0.85rem; font-weight: 400; cursor: pointer; line-height: 1.4;
}
.w-toggle-label input[type="checkbox"] { margin-top: 0.15rem; flex-shrink: 0; cursor: pointer; }

/* Per-post options row (comments toggle) at bottom of composer */
.w-composer-options {
  justify-content: flex-start !important;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  margin-top: 0.25rem;
}
.w-composer-options .w-toggle-label {
  font-size: 0.85rem;
  color: #0369a1;
  font-weight: 600;
  gap: 0.5rem;
}
.w-composer-options input[type="checkbox"] {
  accent-color: #0369a1;
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Ad card styles (walls pages don't load style.css) ───────────────────── */
.ad-slot-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6c757d;
  margin-bottom: 0.4rem;
}

.ad-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ad-card {
  border: 1px solid #dee2e6;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: box-shadow 0.2s;
}

.ad-card:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

.ad-card-inner {
  padding: 0.7rem 0.75rem;
}

.ad-sponsored {
  font-size: 0.62rem;
  font-weight: 600;
  color: #adb5bd;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}

.ad-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: #212529;
  margin-bottom: 0.18rem;
}

.ad-tagline {
  font-size: 0.78rem;
  color: #495057;
  line-height: 1.3;
  margin-bottom: 0.3rem;
}

.ad-distance {
  font-size: 0.72rem;
  color: #6c757d;
}

/* ── Page layout: main content + right ad panel ─────────────────────────── */
.w-page-layout {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 0 1rem;
}

/* ── Main layout ──────────────────────────────────────────────────────────── */
.w-main {
  flex: 1; min-width: 0;
  max-width: none; margin: 0; padding: 2rem 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start;
}
@media (max-width: 640px) {
  .w-main { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.25rem 0; }
}

/* ── Desktop right ad panel ───────────────────────────────────────────────── */
.w-ad-panel-aside {
  width: 200px;
  min-width: 200px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  padding: 1rem;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: sticky;
  top: 1rem;
}

/* ── Mobile ad slot ───────────────────────────────────────────────────────── */
.w-ad-mobile-slot {
  margin: 1rem 0;
  display: none; /* shown on mobile via media query */
}

.w-ad-note {
  font-size: 0.7rem;
  color: #adb5bd;
  line-height: 1.4;
  border-top: 1px solid #e9ecef;
  padding-top: 0.6rem;
  margin: 0;
}
.w-ad-note a { color: #e1306c; text-decoration: none; }
.w-ad-note a:hover { text-decoration: underline; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .w-page-layout { padding: 0; flex-direction: column; gap: 0; }
  .w-ad-panel-aside { display: none; }
  .w-ad-mobile-slot { display: block; }
  .w-wall-content { padding: 1rem 1rem 3rem; }
  .w-main { padding: 1.25rem 1rem; }
}

@media (min-width: 769px) {
  .w-ad-mobile-slot { display: none; }
  .w-ad-panel-aside { display: flex; }
}


/* ── Create section ───────────────────────────────────────────────────────── */
.w-create-section h2, .w-nearby-section h2 {
  font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem;
}
.w-section-hint { font-size: 0.85rem; color: #6b7280; margin-bottom: 1rem; margin-top: -0.5rem; }

/* ── Form ─────────────────────────────────────────────────────────────────── */
.w-form { background: #fff; border-radius: 14px; padding: 1.5rem; box-shadow: 0 2px 12px rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 1.25rem; }
.w-form-group { display: flex; flex-direction: column; gap: 0.35rem; }
.w-form-group label { font-size: 0.88rem; font-weight: 600; }
.w-form-group input[type="text"], .w-form-group input[type="url"] {
  padding: 0.55rem 0.8rem; border: 1.5px solid #e5e7eb; border-radius: 8px;
  font-size: 0.92rem; font-family: inherit; transition: border-color 0.15s;
}
.w-form-group input:focus { outline: none; border-color: #e1306c; }
.w-form-group small { font-size: 0.78rem; color: #9ca3af; }
.char-hint { font-size: 0.78rem; color: #9ca3af; }
.req { color: #e1306c; }
.w-error { background: #fef2f2; border: 2px solid #f87171; color: #b91c1c; border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.9rem; font-weight: 600; margin-top: 0.75rem; }
.w-error.w-error--shake { animation: w-shake 0.4s ease; }
@keyframes w-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

/* ── Radio groups ─────────────────────────────────────────────────────────── */
.w-radio-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.w-radio {
  display: flex; align-items: center; gap: 0.4rem;
  background: #f9fafb; border: 1.5px solid #e5e7eb; border-radius: 8px;
  padding: 0.45rem 0.8rem; font-size: 0.88rem; cursor: pointer; transition: all 0.15s;
}
.w-radio:has(input:checked) { border-color: #e1306c; background: #fff5f7; color: #e1306c; font-weight: 600; }
.w-radio input { display: none; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.w-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.6rem 1.3rem; border-radius: 8px; font-size: 0.92rem;
  font-weight: 700; cursor: pointer; border: none; transition: all 0.15s;
  font-family: inherit;
}
.w-btn-primary { background: linear-gradient(135deg, #f77737, #e1306c); color: #fff; }
.w-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.w-btn-primary:active { transform: none; }
.w-btn-primary:disabled { background: #d1d5db; color: #9ca3af; cursor: not-allowed; transform: none; opacity: 1; }
.w-btn-sm { padding: 0.4rem 0.9rem; font-size: 0.84rem; }
.w-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Walls grid (nearby) ──────────────────────────────────────────────────── */
.w-walls-grid { display: flex; flex-direction: column; gap: 0.75rem; }
.w-card {
  display: block; background: #fff; border: 1.5px solid #e5e7eb;
  border-radius: 12px; padding: 1rem 1.1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: all 0.15s;
}
.w-card:hover { border-color: #e1306c; box-shadow: 0 3px 12px rgba(225,48,108,0.12); transform: translateY(-1px); }
.w-card-urgent { border-color: #fca5a5; }
.w-card-soon   { border-color: #fcd34d; }
.w-card-title  { font-weight: 700; font-size: 0.98rem; margin-bottom: 0.5rem; }
.w-card-meta   { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.78rem; color: #6b7280; }
.w-timer       { font-weight: 600; }
.w-timer-urgent{ color: #dc2626; }
.w-posts-count { color: #9ca3af; }
.w-dist { color: #6b7280; font-size: 0.76rem; }
.w-loading, .w-empty { color: #9ca3af; font-size: 0.9rem; }

/* ── Location status ──────────────────────────────────────────────────────── */
.w-location-status {
  font-size: 0.82rem; padding: 0.5rem 0.75rem; border-radius: 8px;
  border: 1px solid #e5e7eb; background: #f9fafb; color: #6b7280;
}
.w-location-status.loc-ok  { background: #f0fdf4; border-color: #86efac; color: #166534; }
.w-location-status.loc-err { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }

/* ── Preview map (create form) ────────────────────────────────────────────── */
.w-loc-map {
  height: 200px; border-radius: 10px; border: 1px solid #e5e7eb;
  overflow: hidden; position: relative; z-index: 0;
}

/* ── Wall detail map ──────────────────────────────────────────────────────── */
.w-wall-map {
  width: 100%; height: 200px; position: relative; z-index: 0;
  border-bottom: 1px solid #e5e7eb;
}

/* ── Ghost sub-options ────────────────────────────────────────────────────── */
.w-ghost-sub {
  background: #f5f3ff; border: 1px solid #c4b5fd; border-radius: 8px;
  padding: 0.75rem 1rem; margin-top: -0.4rem;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.w-footer {
  text-align: center; padding: 1.5rem; font-size: 0.8rem; color: #9ca3af;
  border-top: 1px solid #e5e7eb; display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem; max-width: 720px; margin: 0 auto;
}
.w-footer a { color: #e1306c; }

/* ── Passcode gate ────────────────────────────────────────────────────────── */
.w-gate {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem;
}
.w-gate-box {
  background: #fff; border-radius: 16px; padding: 2.5rem 2rem;
  max-width: 360px; width: 100%; text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.2);
  display: flex; flex-direction: column; gap: 1rem;
}
.w-gate-icon { font-size: 2.5rem; }
.w-gate-box h2 { font-size: 1.3rem; }
.w-gate-box p  { color: #6b7280; font-size: 0.9rem; }
.w-gate-box input {
  padding: 0.65rem 1rem; border: 1.5px solid #e5e7eb; border-radius: 8px;
  font-size: 1.1rem; text-align: center; letter-spacing: 0.2em;
  font-family: inherit; width: 100%;
}
.w-gate-box input:focus { outline: none; border-color: #e1306c; }

/* ── Expired banner ───────────────────────────────────────────────────────── */
.w-expired-banner {
  background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b;
  border-radius: 10px; padding: 1rem 1.25rem; text-align: center;
  font-weight: 600; margin: 1rem;
}

/* ── Wall layout ──────────────────────────────────────────────────────────── */
.w-wall-content { flex: 1; min-width: 0; max-width: none; margin: 0; padding: 1rem 0 3rem; display: flex; flex-direction: column; gap: 1.25rem; }

/* ── Composer ─────────────────────────────────────────────────────────────── */
.w-composer {
  background: #fff; border-radius: 14px; padding: 1.1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07); display: flex; flex-direction: column; gap: 0.8rem;
}
.w-composer-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0 0.75rem;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
  color: #6b7280;
}
.w-composer-name label { white-space: nowrap; font-weight: 600; }
.w-name-input {
  flex: 1;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  max-width: 180px;
}
.w-name-input:focus { outline: none; border-color: #7c3aed; }

.w-composer-tabs { display: flex; gap: 0.4rem; border-bottom: 1px solid #f3f4f6; padding-bottom: 0.7rem; }
.w-ctab {
  background: none; border: none; cursor: pointer; font-size: 0.85rem;
  font-weight: 600; color: #9ca3af; padding: 0.3rem 0.7rem; border-radius: 6px;
  font-family: inherit; transition: all 0.15s;
}
.w-ctab:hover { color: #e1306c; background: #fff5f7; }
.w-ctab.active { color: #e1306c; background: #fff5f7; }
.w-ctab-panel { display: flex; flex-direction: column; gap: 0.6rem; }
.w-composer textarea, .w-composer input[type="text"], .w-composer input[type="url"] {
  width: 100%; padding: 0.6rem 0.8rem; border: 1.5px solid #e5e7eb; border-radius: 8px;
  font-size: 0.9rem; font-family: inherit; resize: vertical; transition: border-color 0.15s;
}
.w-composer textarea { min-height: 80px; }
.w-composer textarea:focus, .w-composer input:focus { outline: none; border-color: #e1306c; }
.w-composer-footer { display: flex; justify-content: space-between; align-items: center; }
.w-link-input { margin-bottom: 0.4rem; }
.w-caption-input { flex: 1; margin-right: 0.5rem; }

/* ── Drop zone ────────────────────────────────────────────────────────────── */
.w-drop-zone {
  border: 2px dashed #e5e7eb; border-radius: 10px; padding: 1.5rem;
  text-align: center; cursor: pointer; color: #9ca3af; font-size: 0.9rem;
  position: relative; transition: border-color 0.15s;
}
.w-drop-zone:hover { border-color: #e1306c; color: #e1306c; }
.w-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
#img-preview-wrap { display: flex; align-items: flex-start; gap: 0.75rem; }
#img-preview { max-height: 160px; border-radius: 8px; border: 1px solid #e5e7eb; object-fit: cover; }
.w-paste-hint { font-size: 0.74rem; color: #9ca3af; margin: 0.25rem 0 0.5rem; }

/* ── Feed ─────────────────────────────────────────────────────────────────── */
.w-feed { display: flex; flex-direction: column; gap: 0.9rem; }
.w-post {
  background: #fff; border-radius: 12px; padding: 1rem 1.1rem;
  box-shadow: 0 1px 5px rgba(0,0,0,0.07);
  border-left: 3px solid #e1306c;
  animation: fadeIn 0.3s ease;
}
.w-post.fading { opacity: 0.45; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.w-post-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; gap: 0.5rem; }
.w-post-author { font-size: 0.78rem; font-weight: 700; color: #e1306c; }
.w-post-time   { font-size: 0.72rem; color: #9ca3af; }
.w-post-text   { font-size: 0.93rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.w-post-image  { margin-top: 0.6rem; }
.w-post-image img { max-width: 100%; border-radius: 8px; display: block; }
.w-post-caption { font-size: 0.82rem; color: #6b7280; margin-top: 0.35rem; }
.w-post-link a { font-size: 0.9rem; color: #2563eb; word-break: break-all; }
.w-post-link .link-desc { font-size: 0.82rem; color: #6b7280; margin-top: 0.2rem; }
/* ── Horizontal video (YouTube, Vimeo, direct MP4) — 16:9 ── */
.w-post-video {
  margin-top: 0.6rem;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}
.w-post-video iframe,
.w-post-video video {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
  border-radius: 8px;
}

/* ── Vertical video (YouTube Shorts) — 9:16 ── */
.w-post-video--vertical {
  aspect-ratio: 9 / 16;
  height: auto;
  padding-bottom: 0;
  max-width: 315px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 480px) {
  .w-post-video--vertical {
    max-width: min(315px, 100%);
  }
}

/* ── TikTok — dedicated class, fixed container so SDK can't escape it ── */
.w-post-video--tiktok {
  /* Reset inheritance from w-post-video */
  aspect-ratio: unset;
  height: 560px;
  max-width: 325px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
/* The iframe must fill the container regardless of what TikTok SDK injects */
.w-post-video--tiktok iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: 12px !important;
}
@media (max-width: 480px) {
  .w-post-video--tiktok {
    height: calc(100vw * 16 / 9);  /* true 9:16 based on screen width */
    max-width: 100%;
  }
}

/* ── Facebook vertical video — 9:16, white background ── */
.w-post-video--fb {
  background: #fff;
  max-width: 315px;
}
.w-post-video--fb iframe {
  border-radius: 0;
}
@media (max-width: 480px) {
  .w-post-video--fb {
    max-width: 100%;
  }
}

/* Twitter / X embed — auto-height since Twitter's widget resizes itself */
.w-embed-tweet { margin-top: 0.6rem; width: 100%; max-width: 550px; border-radius: 12px; overflow: hidden; }
.w-embed-tweet iframe { width: 100%; min-height: 200px; height: 300px; border: none; border-radius: 12px; }
@media (max-width: 480px) {
  .w-embed-tweet { max-width: 100%; }
  .w-embed-tweet iframe { height: 250px; }
}

/* Instagram embed */
.w-embed-ig { margin-top: 0.6rem; width: 100%; max-width: 500px; border-radius: 12px; overflow: hidden; }
.w-embed-ig iframe { width: 100%; height: 620px; border: none; border-radius: 12px; }

/* Generic link card (TikTok short-links, Facebook short-links) */
.w-embed-card { margin-top: 0.6rem; display: inline-block; }
.w-embed-card a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 8px; text-decoration: none; color: #374151; font-size: 0.9rem; font-weight: 500; }
.w-embed-card a:hover { background: #e9ecef; }

/* Instagram rich tap-to-open card */
.w-embed-ig-card { margin-top: 0.6rem; max-width: 340px; border-radius: 12px; overflow: hidden; border: 1px solid #e5e7eb; background: #fff; }
.w-ig-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.w-ig-link:hover .w-ig-thumb-wrap { filter: brightness(0.92); }
.w-ig-thumb-wrap { position: relative; width: 100%; aspect-ratio: 9/16; max-height: 320px; background: linear-gradient(135deg, #f77737, #e1306c, #833ab4); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.w-ig-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w-ig-play-overlay { position: absolute; width: 48px; height: 48px; background: rgba(0,0,0,.5); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.3rem; z-index: 2; }
.w-ig-logo { position: absolute; bottom: 8px; right: 8px; font-size: 1.4rem; z-index: 2; }
.w-ig-info { padding: 0.6rem 0.8rem; display: flex; justify-content: space-between; align-items: center; background: #fff; }
.w-ig-label { font-size: 0.82rem; font-weight: 600; color: #374151; }
.w-ig-open { font-size: 0.75rem; color: #e1306c; font-weight: 600; }

/* GIF via URL */
.w-post-link-gif { margin-top: 0.5rem; }
.w-post-link-gif img { max-width: 100%; border-radius: 8px; display: block; }

/* Video uploaded from device */
.w-post-video-native { margin-top: 0.5rem; }
.w-post-video-native video { max-width: 100%; border-radius: 8px; display: block; max-height: 480px; }

/* ── Unified composer ──────────────────────────────────────────────────────── */
.w-compose-area { display: flex; flex-direction: column; gap: 0.5rem; }
#post-text { width: 100%; min-height: 80px; padding: 0.65rem 0.75rem; border: 1.5px solid #e5e7eb; border-radius: 10px; font-size: 0.9rem; resize: vertical; line-height: 1.5; font-family: inherit; transition: border-color 0.15s; box-sizing: border-box; }
#post-text:focus { border-color: #e1306c; outline: none; }

/* Live link preview box */
.w-link-preview-wrap { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid #e5e7eb; background: #f8f9fa; }
.w-link-preview-clear { position: absolute; top: 6px; right: 6px; z-index: 5; background: rgba(0,0,0,0.55); color: #fff; border: none; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-size: 0.85rem; line-height: 1; }
.w-link-preview-wrap .w-post-video, .w-link-preview-wrap .w-embed-tweet,
.w-link-preview-wrap .w-embed-ig, .w-link-preview-wrap .w-post-video--vertical { margin-top: 0; border-radius: 0; }

/* Attached file preview */
.w-file-preview-wrap { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem; background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 10px; }
.w-file-preview-wrap img { max-height: 200px; max-width: calc(100% - 40px); border-radius: 8px; object-fit: contain; }
.w-file-preview-wrap video { max-height: 200px; max-width: calc(100% - 40px); border-radius: 8px; }

/* Compose footer */
.w-compose-footer { display: flex; align-items: center; gap: 0.5rem; }
.w-attach-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: #f0f0f0; cursor: pointer; font-size: 1.15rem; flex-shrink: 0; transition: background 0.15s; }
.w-attach-btn:hover { background: #e0e0e0; }

/* Compose hint */
.w-compose-hint { font-size: 0.71rem; color: #b0b8c1; margin-top: 0.25rem; line-height: 1.5; }

/* ── Allow-comments checkbox in composer ───────────────────────────────────── */
.w-allow-comments-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: #6b7280; cursor: pointer; padding: 0.4rem 0 0.1rem; }
.w-allow-comments-label input[type="checkbox"] { accent-color: #6366f1; width: 15px; height: 15px; cursor: pointer; }

/* ── Comment thread ─────────────────────────────────────────────────────────── */
.w-post-footer { margin-top: 0.5rem; }
.w-comment-toggle { background: none; border: none; color: #6b7280; font-size: 0.8rem; cursor: pointer; padding: 0.2rem 0; }
.w-comment-toggle:hover { color: #374151; }
.w-comment-thread { margin-top: 0.5rem; border-top: 1px solid #f3f4f6; padding-top: 0.5rem; }
.w-comment { display: flex; gap: 0.4rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.35rem; font-size: 0.82rem; }
.w-comment-author { font-weight: 700; flex-shrink: 0; }
.w-comment-text { color: #374151; flex: 1; }
.w-comment-time { color: #9ca3af; font-size: 0.75rem; white-space: nowrap; }
.w-comment-compose { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.w-comment-input { flex: 1; border: 1px solid #e5e7eb; border-radius: 6px; padding: 0.3rem 0.6rem; font-size: 0.82rem; }
.w-comment-input:focus { outline: none; border-color: #a5b4fc; }
.w-comment-err { color: #b91c1c; font-size: 0.78rem; margin-top: 0.25rem; }
.w-btn-sm { padding: 0.25rem 0.6rem; font-size: 0.82rem; }
.w-no-comments-badge { font-size: 0.78rem; color: #9ca3af; }