/* ========================================
   VERBARA — GLOBAL / SHARED STYLES
   Load this on EVERY page first.
   ======================================== */

/* ---- Design Tokens ---- */
:root {
  --primary: #6B21A8;
  --primary-light: #F3E8FF;
  --primary-dark: #581C87;
  --bg: #FAF8FC;
  --card: #FFFFFF;
  --line: #E5E7EB;
  --ink: #111827;
  --ink-soft: #6B7280;
  --radius: 12px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-body); background: var(--bg);
  color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased;
}

.mobile-only { display: none; }
@media (max-width: 768px) { .mobile-only { display: block; } }

.form-message {
  font-size: 0.9rem; padding: 0.75rem 1rem; border-radius: var(--radius-sm);
  margin-bottom: 1.25rem; background: var(--primary-light); color: var(--primary-dark);
}

.input, .select, textarea {
  font-family: var(--font-body); font-size: 0.92rem; padding: 0.6rem 0.75rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
  color: var(--ink); width: 100%; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus, .select:focus, textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light);
}
textarea { resize: vertical; min-height: 90px; }
.field-hint { font-size: 0.78rem; color: var(--ink-soft); margin: 0.35rem 0 0; }
.form-row { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; }
.form-row .form-field { flex: 1; }
.form-field { margin-bottom: 0.75rem; }
.form-field label { font-size: 0.82rem; font-weight: 500; display: block; margin-bottom: 0.35rem; }
.lang-input-row { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; }
.lang-input-row .input { flex: 2; }
.lang-input-row .select { flex: 1; }

.btn-save, .btn-cancel {
  font-family: var(--font-body); font-weight: 600; font-size: 0.85rem;
  padding: 0.5rem 1rem; border-radius: 10px; cursor: pointer; transition: all 0.15s;
}
.btn-save { background: var(--primary); color: #fff; border: 1.5px solid var(--primary); }
.btn-save:hover { filter: brightness(1.05); }
.btn-cancel { background: #fff; color: var(--ink-soft); border: 1.5px solid var(--line); }
.btn-cancel:hover { border-color: var(--primary); color: var(--primary); }

.edit-panel { display: none; }
.edit-panel.open { display: block; }
.view-panel.hidden { display: none; }

.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem;
  padding: 0.4rem 0.9rem; border-radius: var(--radius-full); background: var(--primary-light);
  color: var(--primary-dark); border: 1px solid var(--line);
}
.tag-level { font-weight: 600; font-size: 0.78rem; opacity: 0.85; }
.tag.interest { background: var(--bg); color: var(--ink-soft); }
.tag.certificate { background: #fff; color: var(--primary-dark); border: 1px solid var(--primary-light); }

.comment-item { display: flex; gap: 0.6rem; margin-bottom: 0.75rem; }
.comment-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--primary-light);
  color: var(--primary); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.78rem; flex-shrink: 0; overflow: hidden;
}
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-bubble { background: var(--bg); border-radius: var(--radius-md); padding: 0.5rem 0.75rem; flex: 1; }
.comment-author { font-size: 0.82rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.comment-author:hover { color: var(--primary); text-decoration: underline; }
.comment-text { font-size: 0.85rem; color: var(--ink); margin: 0.1rem 0 0; line-height: 1.4; }
.comment-actions-row { display: flex; gap: 0.9rem; margin-top: 0.35rem; }
.comment-action-btn {
  background: none; border: none; cursor: pointer; font-size: 0.78rem; font-weight: 600;
  color: var(--ink-soft); padding: 0; display: flex; align-items: center; gap: 0.25rem; transition: color 0.15s;
}
.comment-action-btn:hover { color: var(--primary); }
.comment-action-btn.liked { color: var(--primary); }
.comment-action-btn svg { width: 13px; height: 13px; }
.comment-action-btn.liked svg { fill: var(--primary); }
.comment-action-btn.delete-btn:hover { color: #B3261E; }

.reply-list { margin-top: 0.5rem; padding-left: 1rem; border-left: 2px solid var(--line); }
.reply-list .comment-item { margin-bottom: 0.6rem; }
.reply-list .comment-avatar { width: 26px; height: 26px; font-size: 0.75rem; }

.reply-input-row { display: none; gap: 0.5rem; margin-top: 0.5rem; padding-left: 1rem; }
.reply-input-row.open { display: flex; }
.reply-input { flex: 1; font-size: 0.82rem; padding: 0.4rem 0.65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; }
.reply-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.reply-send-btn { font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.85rem; border-radius: var(--radius-sm); border: none; background: var(--primary); color: #fff; cursor: pointer; flex-shrink: 0; }

.comment-input-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.comment-input { flex: 1; min-width: 0; font-family: var(--font-body); font-size: 0.85rem; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; }
.comment-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.comment-send-btn { font-size: 0.82rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: var(--radius-sm); border: none; background: var(--primary); color: #fff; cursor: pointer; flex-shrink: 0; }

.comment-mic-btn { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--ink-soft); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.comment-mic-btn svg { width: 16px; height: 16px; }
.comment-mic-btn.recording { background: #B3261E; border-color: #B3261E; color: #fff; animation: mic-pulse 1.2s infinite; }
@keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(179,38,30,0.4); } 50% { box-shadow: 0 0 0 6px rgba(179,38,30,0); } }

.voice-preview { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.voice-preview audio { height: 32px; flex: 1; }
.voice-preview-remove { width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--bg); color: var(--ink-soft); cursor: pointer; flex-shrink: 0; font-size: 0.9rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.voice-preview-remove:hover { background: #FDECEA; color: #B3261E; }
.comment-voice-audio { width: 100%; height: 34px; margin-top: 0.2rem; }

.post-actions { display: flex; border-top: 1px solid var(--line); }
.post-action-btn { display: flex; align-items: center; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); background: none; border: none; cursor: pointer; border-radius: var(--radius-sm); transition: all 0.15s; }
.post-action-btn:hover { background: var(--primary-light); color: var(--primary); }
.post-action-btn.liked { color: var(--primary); }
.post-action-btn svg { width: 18px; height: 18px; }
.post-action-btn.liked svg { fill: var(--primary); }

.more-options-wrap { position: relative; display: inline-block; }
.btn-more { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; }
.btn-more:hover { background: var(--primary-light); color: var(--primary); }
.more-options-menu { display: none; position: absolute; top: 110%; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); min-width: 150px; z-index: 10; overflow: hidden; }
.more-options-menu.open { display: block; }
.more-options-menu button { display: block; width: 100%; text-align: left; padding: 0.6rem 0.9rem; background: none; border: none; font-size: 0.85rem; color: var(--ink); cursor: pointer; font-family: inherit; }
.more-options-menu button:hover { background: var(--bg); }
.more-options-menu button.danger { color: #B3261E; }
.menu-separator { border-top: 1px solid var(--line); margin: 0.25rem 0.9rem; }

.verified-pill { display: inline-flex; align-items: center; gap: 0.3rem; background: #E6F4EA; color: #1E7A34; font-size: 0.78rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: var(--radius-full); margin: 0.4rem 0 0.7rem; }
.verified-badge { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; color: var(--primary); vertical-align: -2px; margin-left: 0.2rem; }
.verified-badge svg { width: 100%; height: 100%; }

.activity-filters { display: flex; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.activity-filter-btn { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; background: none; border: 1px solid var(--line); border-radius: var(--radius-full); padding: 0.35rem 1rem; cursor: pointer; color: var(--ink-soft); transition: all 0.15s; }
.activity-filter-btn:hover { background: var(--primary-light); color: var(--primary); }
.activity-filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.activity-item.hidden-by-filter { display: none !important; }

.show-all-wrap { margin-top: 1rem; text-align: center; border-top: 1px solid var(--line); padding-top: 1rem; }
.show-all-link { font-size: 0.9rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.show-all-link:hover { text-decoration: underline; }

.empty-state { color: var(--ink-soft); font-size: 0.9rem; }
.empty-feed { text-align: center; padding: 3rem 1.5rem; border: 1.5px dashed var(--line); border-radius: var(--radius-md); }

.post-body b, .post-body strong { font-weight: 700; }
.post-body i, .post-body em { font-style: italic; }

.profile-photo, .composer-avatar, .post-avatar, .li-activity-avatar { border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; overflow: hidden; flex-shrink: 0; }
.profile-photo img, .composer-avatar img, .post-avatar img, .li-activity-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }