/* ES Social — portal styles
 * Copyright (c) 2026, Enterprise Systems Australia and contributors
 */
:root {
  --es-comments-bg: #e7f3ff;      /* light blue comments panel */
  --es-bg: #f0f2f5;
  --es-card: #ffffff;
  --es-border: #e4e6eb;
  --es-text: #1c1e21;
  --es-muted: #65676b;
  --es-primary: #1877f2;
  --es-primary-dark: #166fe5;
  --es-accent: #0d7a6f;
  --es-radius: 12px;
  --es-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.es-social {
  max-width: 960px;
  margin: 0 auto;
  color: var(--es-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding-bottom: 60px;
}
.es-social a { color: inherit; text-decoration: none; }
.es-muted { color: var(--es-muted); font-size: 13px; }
.es-center { text-align: center; }
.es-pad { padding: 10px; }

/* topbar */
.es-topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 4px; margin-bottom: 16px;
  position: sticky; top: 0; background: var(--es-bg); z-index: 20;
}
.es-brand { font-weight: 800; font-size: 22px; color: var(--es-primary); letter-spacing: -.5px; }
.es-nav { margin-left: auto; display: flex; gap: 6px; }
.es-nav a { padding: 8px 14px; border-radius: 8px; font-weight: 600; color: var(--es-muted); }
.es-nav a:hover { background: var(--es-border); color: var(--es-text); }
.es-search { position: relative; flex: 1; max-width: 320px; }
.es-search input {
  width: 100%; padding: 9px 14px; border: none; border-radius: 20px;
  background: var(--es-border); font-size: 14px;
}
.es-search-results {
  position: absolute; top: 44px; left: 0; right: 0; background: var(--es-card);
  border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.18); overflow: hidden; z-index: 30;
}
.es-search-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.es-search-item:hover { background: var(--es-bg); }

/* layout */
.es-layout { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.es-layout-narrow { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
.es-aside { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 16px; }

/* cards */
.es-card {
  background: var(--es-card); border-radius: var(--es-radius);
  box-shadow: var(--es-shadow); padding: 16px; margin-bottom: 16px;
}
.es-card-title { font-weight: 700; margin-bottom: 10px; }

/* me card */
.es-me { text-align: center; }
.es-me-name { font-weight: 700; margin-top: 8px; }
.es-me-sub { color: var(--es-muted); font-size: 13px; }
.es-me-stats { display: flex; justify-content: center; gap: 18px; margin-top: 10px; font-size: 13px; color: var(--es-muted); }

/* avatars */
.es-avatar, .es-avatar-sm, .es-avatar-lg, .es-avatar-xl {
  border-radius: 50%; object-fit: cover; background: var(--es-border); display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; color: #fff; flex: none;
}
.es-avatar { width: 40px; height: 40px; }
.es-avatar-sm { width: 30px; height: 30px; font-size: 13px; }
.es-avatar-lg { width: 72px; height: 72px; font-size: 26px; }
.es-avatar-xl { width: 96px; height: 96px; font-size: 34px; border: 4px solid var(--es-card); }
.es-avatar-fallback { background: linear-gradient(135deg, var(--es-primary), var(--es-accent)); }

/* composer */
.es-composer textarea {
  width: 100%; border: none; resize: vertical; min-height: 60px; font-size: 15px;
  font-family: inherit; outline: none; background: var(--es-bg); border-radius: 10px; padding: 12px;
}
.es-composer-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.es-composer-row select { margin-left: auto; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--es-border); background: var(--es-card); }

/* buttons */
.es-btn {
  border: none; background: var(--es-border); color: var(--es-text);
  padding: 8px 16px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px;
}
.es-btn:hover { filter: brightness(.96); }
.es-btn-primary { background: var(--es-primary); color: #fff; }
.es-btn-primary:hover { background: var(--es-primary-dark); }
.es-btn:disabled { opacity: .6; cursor: default; }
.es-icon-btn { margin-left: auto; background: none; border: none; color: var(--es-muted); cursor: pointer; font-size: 15px; }

/* posts */
.es-post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.es-post-author { font-weight: 700; }
.es-post-meta { font-size: 12px; color: var(--es-muted); }
.es-post-content { font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.es-post-content img { max-width: 100%; border-radius: 8px; }

.es-media { display: grid; gap: 4px; margin-top: 10px; border-radius: 10px; overflow: hidden; }
.es-media img { width: 100%; height: 100%; object-fit: cover; max-height: 420px; }
.es-media-1 { grid-template-columns: 1fr; }
.es-media-2, .es-media-4 { grid-template-columns: 1fr 1fr; }
.es-media-3 { grid-template-columns: 1fr 1fr 1fr; }

.es-linkcard { display: block; border: 1px solid var(--es-border); border-radius: 10px; overflow: hidden; margin-top: 10px; }
.es-linkcard img { width: 100%; max-height: 260px; object-fit: cover; }
.es-linkcard-t { padding: 10px 12px; font-weight: 600; }

.es-shared { border: 1px solid var(--es-border); border-radius: 10px; padding: 12px; margin-top: 10px; }

.es-post-counts { font-size: 13px; color: var(--es-muted); margin: 12px 0 6px; }
.es-post-actions { display: flex; gap: 4px; border-top: 1px solid var(--es-border); padding-top: 6px; position: relative; }
.es-action {
  flex: 1; background: none; border: none; padding: 8px; border-radius: 8px;
  color: var(--es-muted); font-weight: 600; cursor: pointer; font-size: 14px;
}
.es-action:hover { background: var(--es-bg); }
.es-reacted { color: var(--es-primary); }
.es-react-tray {
  position: absolute; bottom: 44px; left: 0; display: none; gap: 4px;
  background: var(--es-card); border-radius: 24px; padding: 6px 10px; box-shadow: 0 4px 18px rgba(0,0,0,.2);
}
.es-react-tray.open { display: flex; }
.es-react-tray button { border: none; background: none; font-size: 24px; cursor: pointer; transition: transform .1s; }
.es-react-tray button:hover { transform: scale(1.3); }

/* comments */
/* comments: always expanded, light blue panel */
.es-comments {
  display: block; margin-top: 10px; padding: 10px 12px;
  background: var(--es-comments-bg); border-radius: 10px;
}
.es-comment { display: flex; gap: 8px; margin-bottom: 8px; }
.es-comment-body { background: #fff; border-radius: 14px; padding: 8px 12px; font-size: 14px; }
.es-comment-meta { font-size: 11px; color: var(--es-muted); margin-top: 2px; }
.es-comment-form { display: flex; gap: 8px; margin-top: 8px; }
.es-comment-input { flex: 1; border: 1px solid #cfe2f7; background: #fff; border-radius: 18px; padding: 9px 14px; font-size: 14px; outline: none; }

/* requests */
.es-req { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; }
.es-req span { flex: 1; }
.es-req .es-btn { padding: 5px 10px; font-size: 13px; }

/* profile / group head */
.es-profile-head { padding: 0; overflow: hidden; }
.es-cover { height: 200px; background: linear-gradient(135deg, var(--es-primary), var(--es-accent)); background-size: cover; background-position: center; }
.es-profile-id { display: flex; align-items: flex-end; gap: 16px; padding: 0 20px 16px; margin-top: -40px; }
.es-profile-id h2 { margin: 0; }
.es-profile-actions { margin-left: auto; align-self: center; }
.es-profile-bio { padding: 0 20px 18px; line-height: 1.5; }

/* group grid */
.es-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.es-group-card { background: var(--es-bg); border-radius: 10px; overflow: hidden; padding-bottom: 10px; }
.es-group-cover { height: 80px; background: linear-gradient(135deg, var(--es-primary), var(--es-accent)); background-size: cover; background-position: center; }
.es-group-name { font-weight: 700; padding: 8px 10px 2px; }
.es-group-card .es-muted { padding: 0 10px; }
.es-group-card .es-btn { margin: 8px 10px 0; }

/* friends grid */
.es-friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px; }
.es-friend { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 13px; font-weight: 600; }

@media (max-width: 780px) {
  .es-layout { grid-template-columns: 1fr; }
  .es-aside { display: none; }
  .es-nav a { padding: 8px; }
}

/* ---- photo upload ---- */
.es-photo-btn { background: var(--es-bg); }
.es-photo-btn:hover { filter: brightness(.96); }
.es-composer-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.es-composer-previews:empty { margin-top: 0; }
.es-prev { position: relative; width: 92px; height: 92px; border-radius: 8px; overflow: hidden; background: var(--es-bg); }
.es-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.es-prev-x {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none;
  border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 12px;
  line-height: 1; display: flex; align-items: center; justify-content: center;
}
.es-prev-x:hover { background: rgba(0,0,0,.85); }

.es-cover { position: relative; }
.es-cover-cam {
  position: absolute; right: 12px; bottom: 12px; border: none; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; padding: 7px 12px; border-radius: 8px;
  font-weight: 600; font-size: 13px;
}
.es-cover-cam:hover { background: rgba(0,0,0,.75); }

/* ---- photo gallery + lightbox ---- */
.es-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.es-photo-cell { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; background: var(--es-bg); }
.es-photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s ease; }
.es-photo-cell:hover img { transform: scale(1.06); }

.es-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.es-lb-stage { max-width: 92vw; max-height: 92vh; text-align: center; }
.es-lb-stage img { max-width: 92vw; max-height: 84vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.es-lb-cap { color: #fff; margin-top: 10px; font-size: 14px; }
.es-lb-count { color: rgba(255,255,255,.6); margin-top: 4px; font-size: 12px; }
.es-lb-close, .es-lb-prev, .es-lb-next {
  position: absolute; background: rgba(255,255,255,.15); color: #fff; border: none;
  cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.es-lb-close { top: 16px; right: 16px; width: 40px; height: 40px; font-size: 18px; }
.es-lb-prev, .es-lb-next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 30px; }
.es-lb-prev { left: 16px; }
.es-lb-next { right: 16px; }
.es-lb-close:hover, .es-lb-prev:hover, .es-lb-next:hover { background: rgba(255,255,255,.32); }

/* ---- albums ---- */
.es-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.es-card-head .es-card-title { margin-bottom: 0; }
.es-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.es-album-card { background: var(--es-bg); border-radius: 10px; overflow: hidden; padding-bottom: 10px; display: block; }
.es-album-card:hover { filter: brightness(.98); }
.es-album-cover {
  height: 110px; background: linear-gradient(135deg, var(--es-primary), var(--es-accent));
  background-size: cover; background-position: center;
}
.es-album-name { font-weight: 700; padding: 8px 10px 2px; }
.es-album-card .es-muted { padding: 0 10px; }

/* per-photo delete on album grid */
.es-photo-cell { position: relative; }
.es-photo-del {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; font-size: 12px;
  line-height: 1; display: none; align-items: center; justify-content: center;
}
.es-photo-cell:hover .es-photo-del { display: flex; }
.es-photo-del:hover { background: rgba(200,0,0,.85); }

/* ---- video ---- */
.es-video { position: relative; width: 100%; padding-bottom: 56.25%; margin-top: 10px; border-radius: 10px; overflow: hidden; background: #000; }
.es-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.es-video-btn { background: var(--es-bg); }

.es-prev-video { width: 140px; }
.es-prev-video iframe { width: 100%; height: 100%; border: 0; }
.es-prev-video span { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 28px; }

/* video cells in album grid */
.es-vidcell {
  width: 100%; height: 100%; background: linear-gradient(135deg, #1e2126, #2c3038);
  display: flex; align-items: center; justify-content: center;
}
.es-vidcell .es-play { color: #fff; font-size: 30px; opacity: .9; }

/* video in lightbox */
.es-lb-video { position: relative; width: 80vw; max-width: 1100px; padding-bottom: 45%; }
.es-lb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }

/* ---- layout v0.6.0 — full-width social area ---- */
/* head text must sit above the cover; album heads have no avatar to pull up */
.es-profile-id { position: relative; z-index: 1; flex-wrap: wrap; row-gap: 10px; }
.es-profile-id:not(:has(.es-avatar-xl)) { margin-top: 12px; align-items: center; }
.es-profile-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* full-width social area */
main.container:has(.es-social) { max-width: none; }
.es-social[data-page] { max-width: none; padding-left: 16px; padding-right: 16px; }
.es-layout:not(.es-layout-narrow) { grid-template-columns: 300px minmax(0, 1fr); }
.es-layout.es-layout-narrow { max-width: 1100px; }

/* keep the single-column collapse on phones */
@media (max-width: 780px) {
  .es-layout:not(.es-layout-narrow) { grid-template-columns: 1fr; }
}

/* ---- Guest browsing (v0.7) ------------------------------------------------ */
.es-social .es-block { display: block; width: 100%; text-align: center; margin-top: 8px; }
.es-social .es-nav-signup { padding: 4px 12px; color: #fff; }
.es-social .es-join-card p { margin: 6px 0 4px; font-size: 14px; }
.es-social .es-guest-banner { text-align: center; font-size: 14px; }
.es-social .es-comment-guest { font-size: 13px; color: #65676b; padding: 6px 2px; }
.es-btn-link { background: none; border: none; color: #65676b; cursor: pointer; }
.es-join-modal {
  position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.es-join-box {
  position: relative; background: #fff; border-radius: 12px; padding: 24px;
  width: 100%; max-width: 360px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.es-join-box h3 { margin: 0 0 6px; font-size: 20px; }
.es-join-box .es-block { display: block; width: 100%; text-align: center; margin-top: 10px; }
.es-join-x { position: absolute; top: 10px; right: 12px; border: none; background: none; font-size: 18px; cursor: pointer; color: #65676b; }

/* ---- Social sign-in (v0.8) ------------------------------------------------ */
.es-provider-btn {
  display: flex !important; align-items: center; justify-content: center; gap: 10px;
  background: #fff; border: 1px solid var(--es-border); color: var(--es-text); font-weight: 600;
}
.es-provider-btn:hover { background: var(--es-bg); text-decoration: none; }
.es-provider-btn img { width: 18px; height: 18px; }
.es-or { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; color: var(--es-muted); font-size: 12px; }
.es-or::before, .es-or::after { content: ""; flex: 1; border-top: 1px solid var(--es-border); }

/* ---- Comments panel (v0.8.1) ---------------------------------------------- */
.es-more-comments {
  background: none; border: none; padding: 0 0 8px; cursor: pointer;
  color: var(--es-primary); font-weight: 600; font-size: 13px;
}
.es-more-comments:hover { text-decoration: underline; }
.es-comment-list:empty { display: none; }
.es-social .es-comment-guest { color: var(--es-muted); }

/* ==== Roadmap phases 2-5 (v0.9) ============================================ */
/* modal + popover menu */
.es-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.es-modal-box { position: relative; background: #fff; border-radius: 12px; padding: 22px; width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.es-modal-wide { max-width: 560px; }
.es-modal-box h3 { margin: 0 0 12px; font-size: 19px; }
.es-modal-x { position: absolute; top: 10px; right: 12px; border: none; background: none; font-size: 18px; cursor: pointer; color: var(--es-muted); }
.es-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.es-label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.es-input { width: 100%; box-sizing: border-box; border: 1px solid var(--es-border); border-radius: 8px; padding: 8px 10px; font-size: 14px; background: #fff; }
.es-input:focus { outline: 2px solid #cfe2f7; border-color: var(--es-primary); }
.es-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .es-row2 { grid-template-columns: 1fr; } }
.es-check { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 14px; }
.es-right { float: right; }
.es-saved { outline: 2px solid #42b72a !important; transition: outline .2s; }
.es-popmenu { position: absolute; z-index: 2100; background: #fff; border: 1px solid var(--es-border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: 4px; min-width: 190px; }
.es-popmenu button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.es-popmenu button:hover { background: var(--es-bg); }
.es-popmenu button.danger { color: #c0392b; }
.es-btn-danger { color: #c0392b; border-color: #f0c4be; }
.es-btn-link { background: none; border: none; color: var(--es-primary); }

/* badges */
.es-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #e41e3f; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.es-badge-pill { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--es-bg); color: var(--es-muted); font-size: 12px; margin-left: 6px; white-space: nowrap; }
.es-badge-warn { background: #fff4d6; color: #8a6100; }
.es-verified { color: var(--es-primary); font-size: 13px; }
.es-pending { border-left: 3px solid #f0b400; }
.es-post-menu { margin-left: auto; font-size: 18px; letter-spacing: 1px; }

/* sort tabs + group tabs */
.es-sort-tabs, .es-tabs { display: flex; gap: 6px; margin: 4px 0 12px; }
.es-sort-tabs button, .es-tabs button { border: 1px solid var(--es-border); background: #fff; border-radius: 18px; padding: 6px 14px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--es-muted); }
.es-sort-tabs button.active, .es-tabs button.active { background: var(--es-primary); border-color: var(--es-primary); color: #fff; }

/* trending + upcoming */
.es-trend, .es-upc { padding: 8px 0; border-bottom: 1px solid var(--es-border); font-size: 13px; }
.es-trend:last-child, .es-upc:last-child { border-bottom: none; }
.es-trend-snip { font-weight: 600; margin-bottom: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* event card */
.es-event { display: flex; gap: 14px; border: 1px solid var(--es-border); border-radius: 10px; padding: 12px; margin: 10px 0; background: #fbfcfe; }
.es-event-date { flex: 0 0 56px; height: 60px; border-radius: 8px; background: #fff; border: 1px solid var(--es-border); text-align: center; overflow: hidden; }
.es-event-date span { display: block; background: #e41e3f; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 0; }
.es-event-date b { display: block; font-size: 24px; line-height: 36px; }
.es-event-body { flex: 1; min-width: 0; }
.es-event-title { font-weight: 700; font-size: 16px; margin-bottom: 2px; }
.es-event-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.es-rsvp { padding: 5px 12px; font-size: 13px; }
.es-rsvp.active { background: #e7f3ff; border-color: var(--es-primary); color: var(--es-primary); }

/* groups: rules, members, invites, admin */
.es-rules { margin: 8px 16px 12px; font-size: 14px; }
.es-rules summary { cursor: pointer; font-weight: 600; }
.es-member { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--es-border); flex-wrap: wrap; }
.es-member:last-child { border-bottom: none; }
.es-member-name { flex: 1; min-width: 120px; }
.es-member select { border: 1px solid var(--es-border); border-radius: 6px; padding: 4px; }
.es-member .es-btn { padding: 4px 10px; font-size: 13px; }
.es-invite { display: flex; gap: 8px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.es-invite .es-input { flex: 1; min-width: 220px; font-size: 12px; }
.es-pending-item { border-bottom: 1px dashed var(--es-border); padding-bottom: 10px; margin-bottom: 10px; }
.es-pending-item .es-post { box-shadow: none; border: 1px solid var(--es-border); margin-bottom: 6px; }
.es-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.es-album-card { color: inherit; text-decoration: none; }
.es-album-cover { aspect-ratio: 4 / 3; border-radius: 8px; background: var(--es-bg) center / cover; margin-bottom: 6px; }

/* album owner tools */
.es-photo-cell { position: relative; }
.es-photo-cover { position: absolute; left: 6px; top: 6px; border: none; border-radius: 50%; width: 26px; height: 26px; background: rgba(0,0,0,.55); color: #ffd54a; cursor: pointer; opacity: 0; transition: opacity .15s; }
.es-photo-cell:hover .es-photo-cover { opacity: 1; }
.es-photo-cell[draggable="true"] { cursor: grab; }
.es-dragging { opacity: .4; }
.es-hint { padding: 0 16px 12px; font-size: 12px; }

/* messages */
.es-dm { display: grid; grid-template-columns: 280px 1fr; min-height: 520px; padding: 0 !important; overflow: hidden; }
.es-dm-list { border-right: 1px solid var(--es-border); padding: 12px; overflow-y: auto; max-height: 70vh; }
.es-dm-conv { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; border: none; background: none; padding: 8px; border-radius: 8px; cursor: pointer; }
.es-dm-conv:hover, .es-dm-conv.active { background: var(--es-bg); }
.es-dm-conv .es-muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.es-dm-conv.unread b::after { content: " •"; color: var(--es-primary); }
.es-dm-thread { display: flex; flex-direction: column; min-width: 0; }
.es-dm-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--es-border); font-weight: 600; }
.es-dm-msgs { flex: 1; overflow-y: auto; padding: 16px; max-height: 60vh; display: flex; flex-direction: column; gap: 6px; }
.es-msg { align-self: flex-start; max-width: 75%; background: var(--es-comments-bg); padding: 8px 12px; border-radius: 16px; font-size: 14px; }
.es-msg.mine { align-self: flex-end; background: var(--es-primary); color: #fff; }
.es-msg-time { display: block; font-size: 10px; opacity: .7; margin-top: 2px; }
.es-msg.mine .es-msg-time a { color: #fff; }
.es-dm-compose { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--es-border); }
.es-dm-compose textarea { flex: 1; resize: none; border: 1px solid var(--es-border); border-radius: 18px; padding: 8px 14px; font: inherit; }
@media (max-width: 700px) { .es-dm { grid-template-columns: 1fr; } .es-dm-list { border-right: none; border-bottom: 1px solid var(--es-border); max-height: 220px; } }

/* pages */
.es-products { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 14px; }
.es-product { flex: 0 0 120px; text-decoration: none; color: inherit; font-size: 13px; }
.es-product img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 4px; }
.es-sub { margin-top: 12px; }
#es-page-search { margin-bottom: 12px; }

/* moderation */
.es-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 10px; }
.es-stat { background: var(--es-bg); border-radius: 10px; padding: 10px; text-align: center; }
.es-stat b { display: block; font-size: 22px; }
.es-stat span { font-size: 12px; color: var(--es-muted); }
.es-mod-item { border-bottom: 1px solid var(--es-border); padding: 12px 0; }
.es-mod-meta { font-size: 13px; margin-bottom: 4px; }
.es-mod-preview { background: var(--es-bg); border-radius: 8px; padding: 8px 10px; font-size: 14px; margin: 6px 0; white-space: pre-wrap; }
.es-mod-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.es-mod-actions .es-btn { padding: 4px 10px; font-size: 13px; }
.es-nav-msgs { position: relative; }

/* ==== Photo mosaic (v0.9.2) ================================================
 * Photos keep their real proportions: justified rows of equal height, each
 * tile's width set by its photo's aspect ratio (--ar, measured on load).
 * flex-grow ∝ ratio keeps every tile in a row the same height while the row
 * fills the width; the ::after filler stops the last row from stretching.
 */
.es-mosaic { display: flex; flex-wrap: wrap; gap: 4px; --row-h: 220px; }
.es-mosaic::after { content: ""; flex-grow: 999999; }
.es-mosaic .es-mosaic-tile,
.es-mosaic-tile {
  position: relative; display: block; overflow: hidden; border-radius: 6px;
  flex-grow: var(--ar); flex-basis: calc(var(--ar) * var(--row-h));
  aspect-ratio: var(--ar); min-width: 0; height: auto;
  background: var(--es-bg); cursor: zoom-in;
}
.es-mosaic-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity .25s ease, transform .15s ease; }
.es-mosaic-tile.es-loaded img, .es-mosaic-tile[data-fixed] img { opacity: 1; }
.es-mosaic-tile:hover img { transform: scale(1.03); }
.es-mosaic-tile .es-vidcell { position: absolute; inset: 0; }
.es-mosaic-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); color: #fff; font-size: 28px; font-weight: 700; pointer-events: none; }

/* feed posts: slightly shorter rows; corners like the old media block */
.es-media-mosaic { --row-h: 190px; margin-top: 10px; border-radius: 10px; overflow: hidden; }

/* a single photo in a post: actual size, uncropped, never enlarged */
.es-media-single { margin-top: 10px; text-align: center; background: var(--es-bg); border-radius: 10px; overflow: hidden; cursor: zoom-in; }
.es-media-single img { display: inline-block; max-width: 100%; height: auto; width: auto; max-height: 75vh; vertical-align: middle; }

/* album + photos pages use the mosaic instead of the square grid */
#es-album-grid.es-mosaic, #es-photo-grid.es-mosaic { display: flex; grid-template-columns: none; }

@media (max-width: 600px) {
  .es-mosaic { --row-h: 140px; gap: 3px; }
  .es-media-mosaic { --row-h: 130px; }
}
/* once the justified layout has run, tiles take exact sizes from JS */
.es-mosaic.es-justified::after { display: none; }
.es-mosaic.es-justified .es-mosaic-tile { flex: 0 0 auto; aspect-ratio: auto; }