/* ═══════════════════════════════════════════════════════════════════════════ */
/*  Social — Shared Styles                                                    */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.4) transparent }
*::-webkit-scrollbar { width: 8px; height: 8px }
*::-webkit-scrollbar-track { background: transparent; margin: 2px }
*::-webkit-scrollbar-thumb { background-color: rgba(100,116,139,.45); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; transition: background-color .2s }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(37,99,235,.7) }
.dark *::-webkit-scrollbar-thumb { background-color: rgba(148,163,184,.35) }
.dark *::-webkit-scrollbar-thumb:hover { background-color: rgba(59,130,246,.65) }
.dark * { scrollbar-color: rgba(148,163,184,.35) transparent }

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .animate-spin-slow { animation: none; } }

/* Modal overlay backdrop */
.modal-overlay { backdrop-filter: blur(2px); }

/* Dropdown menus */
.dropdown-content {
  box-shadow: 0 10px 30px rgba(0,0,0,.07);
}
.dark .dropdown-content {
  background: rgb(2 6 23);
  border-color: rgb(30 41 59);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}

/* User menu */
.user-menu-content {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  min-width: 14rem;
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: .75rem;
  padding: .35rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.07);
  z-index: 50;
}
.user-menu-content.open { display: block; }
.dark .user-menu-content {
  background: rgb(2 6 23);
  border-color: rgb(30 41 59);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .5rem .6rem;
  border-radius: .5rem;
  font-size: .875rem;
  color: rgb(51 65 85);
  transition: background .15s;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}
.menu-item:hover { background: rgb(248 250 252); }
.dark .menu-item { color: rgb(226 232 240); }
.dark .menu-item:hover { background: rgb(30 41 59); }
.menu-item.text-red-600 { color: rgb(220 38 38); }
.dark .menu-item.text-red-600 { color: rgb(248 113 113); }

/* Settings modal theme cards */
.theme-card {
  display: block;
  position: relative;
  cursor: pointer;
  border: 1px solid rgb(226 232 240);
  border-radius: .9rem;
  padding: .75rem .9rem;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.dark .theme-card { border-color: rgb(30 41 59); }
.theme-card:hover { background: rgba(148,163,184,.08); }
.dark .theme-card:hover { background: rgba(30,41,59,.6); }
.theme-card.is-selected {
  border-color: rgb(37 99 235);
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
  background: rgba(59,130,246,.06);
}
.dark .theme-card.is-selected {
  border-color: rgb(37 99 235);
  background: rgba(37,99,235,.15);
}
.theme-card-input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.theme-card-ui {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  font-size: .875rem;
  color: rgb(15 23 42);
}
.dark .theme-card-ui { color: rgb(226 232 240); }
.theme-card-sub {
  font-size: .75rem;
  color: rgb(100 116 139);
  margin-top: .15rem;
}
.dark .theme-card-sub { color: rgb(148 163 184); }

/* Delete mode */
.delete-mode .selectable-image { border: 2px solid #ef4444 !important; box-shadow: 0 0 5px rgba(239,68,68,0.5); }

/* Summernote overrides */
.note-editor { border: 1px solid #e2e8f0 !important; border-radius: .5rem !important; }
.note-toolbar { background: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; }
.dark .note-editor { border-color: rgb(51 65 85) !important; background: rgb(15 23 42) !important; }
.dark .note-toolbar { background: rgb(30 41 59) !important; border-bottom-color: rgb(51 65 85) !important; }
.dark .note-editable { background: rgb(15 23 42) !important; color: rgb(226 232 240) !important; }
.dark .note-btn { background: rgb(30 41 59) !important; border-color: rgb(51 65 85) !important; color: rgb(203 213 225) !important; }
.dark .note-btn:hover { background: rgb(51 65 85) !important; }
.dark .note-status-output { background: rgb(15 23 42) !important; color: rgb(148 163 184) !important; }