/* =====================================================================
   Voxbie modern chat skin  (assets/css/voxbie_chat_modern.css)
   ---------------------------------------------------------------------
   Pure CSS layer loaded after the platform's own stylesheets. It only restyles
   the existing markup - no HTML/JS/behaviour changes - so every chat
   feature (replies, threads, reactions, menus, mentions...) keeps working.
   Rollback: delete or rename this file (the <link> in
   layouts/chat_page/header.php is skipped when the file is missing).
   ===================================================================== */

:root {
  --vx-accent: #E91E63;
  --vx-accent-2: #C2185B;
  --vx-accent-soft: rgba(233, 30, 99, .14);
  --vx-chat-bg: #F3F4F7;
  --vx-bubble: #FFFFFF;
  --vx-bubble-text: #1B1F27;
  --vx-bubble-border: rgba(15, 23, 42, .06);
  --vx-own-bubble: linear-gradient(135deg, #E91E63 0%, #C2185B 100%);
  --vx-own-text: #FFFFFF;
  --vx-muted: #6B7280;
  --vx-hover: rgba(15, 23, 42, .035);
  --vx-quote-bg: rgba(15, 23, 42, .05);
  --vx-chip-bg: #FFFFFF;
  --vx-chip-border: rgba(15, 23, 42, .10);
  --vx-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .04);
  --vx-composer-bg: #FFFFFF;
  --vx-radius: 16px;
}
body.dark_mode {
  --vx-chat-bg: #0E1014;
  --vx-bubble: #1A1E26;
  --vx-bubble-text: #E8EAF0;
  --vx-bubble-border: rgba(255, 255, 255, .05);
  --vx-muted: #8A93A3;
  --vx-hover: rgba(255, 255, 255, .025);
  --vx-quote-bg: rgba(255, 255, 255, .05);
  --vx-chip-bg: #1F242D;
  --vx-chip-border: rgba(255, 255, 255, .08);
  --vx-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --vx-composer-bg: #161A21;
}

/* ---------- message list canvas ---------- */
body .main .chatbox > .contents > .chat_messages {
  background-color: var(--vx-chat-bg);
  background-image: radial-gradient(rgba(127, 127, 127, .07) 1px, transparent 1px);
  background-size: 22px 22px;
}
body .main .chatbox > .contents > .chat_messages > ul {
  padding-top: 6px;
  padding-bottom: 10px;
}

/* ---------- one message row ---------- */
body .main .chatbox > .contents > .chat_messages > ul > li.message {
  padding: 6px 18px 6px 14px;
  border: 0;
  border-radius: 0;
  transition: background-color .15s ease;
}
body .main .chatbox > .contents > .chat_messages > ul > li.message:hover {
  background-color: var(--vx-hover);
}

/* avatar */
body .main .chatbox > .contents > .chat_messages > ul > li.message > div > .left > .image > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--vx-chat-bg), 0 0 0 3px var(--vx-chip-border);
}

/* name + time row */
body .main .chatbox > .contents > .chat_messages > ul > li.message > div > .right > .header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  min-height: 20px;
}
body .main .chatbox > .contents > .chat_messages > ul > li.message > div > .right > .header > .send_by {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .1px;
}
body .main .chatbox > .contents > .chat_messages > ul > li.message > div > .right > .header > .tools > .timestamp {
  font-size: 11.5px;
  color: var(--vx-muted);
  opacity: .9;
}
body .main .chatbox > .contents > .chat_messages > ul > li.message > div > .right > .header > .tools > .options {
  opacity: 0;
  transition: opacity .15s ease;
}
body .main .chatbox > .contents > .chat_messages > ul > li.message:hover > div > .right > .header > .tools > .options,
body .main .chatbox > .contents > .chat_messages > ul > li.message > div > .right > .header > .tools.open > .options {
  opacity: 1;
}
@media (hover: none) {
  body .main .chatbox > .contents > .chat_messages > ul > li.message > div > .right > .header > .tools > .options { opacity: 1; }
}

/* ---------- the bubble ---------- */
/* Voxbie draws its bubble on .content > div; .content itself stays a plain wrapper */
body .main .chatbox > .contents > .chat_messages > ul > li.message > div > .right > .content {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}
body .main .chatbox > .contents > .chat_messages > ul > li.message > div > .right > .content > div {
  display: inline-block;
  max-width: min(680px, 100%);
  background: var(--vx-bubble);
  color: var(--vx-bubble-text);
  border: 1px solid var(--vx-bubble-border);
  border-radius: 4px var(--vx-radius) var(--vx-radius) var(--vx-radius);
  padding: 8px 12px;
  box-shadow: var(--vx-shadow);
  line-height: 1.5;
  font-size: 14.5px;
}
body .main .chatbox > .contents > .chat_messages > ul > li.message > div > .right > .content .message_content {
  color: inherit;
}

/* own messages: brand bubble, WhatsApp-style tail on the right */
body .main .chatbox > .contents > .chat_messages > ul > li.message.own_message > div > .right > .content > div,
body .main .chatbox > .contents > .chat_messages > ul > li.message.align_right > div > .right > .content > div {
  background: var(--vx-own-bubble);
  color: var(--vx-own-text);
  border-color: transparent;
  border-radius: var(--vx-radius) 4px var(--vx-radius) var(--vx-radius);
  text-align: left;
}
body .main .chatbox > .contents > .chat_messages > ul > li.message.own_message > div > .right > .content a,
body .main .chatbox > .contents > .chat_messages > ul > li.message.own_message > div > .right > .content .mention {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body .main .chatbox > .contents > .chat_messages > ul > li.message.align_right > div > .right {
  text-align: right;
}
body .main .chatbox > .contents > .chat_messages > ul > li.message.align_right > div > .right > .header {
  justify-content: flex-end;
}

/* @mentions as chips */
body .main .chatbox > .contents > .chat_messages > ul > li.message > div > .right > .content .message_content .get_info.mention {
  background: var(--vx-accent-soft);
  color: var(--vx-accent);
  padding: 0 5px;
  border-radius: 6px;
  font-weight: 600;
}

/* ---------- reply / quote preview ---------- */
/* .quote is Voxbie's click target (keeps "jump to message"); the visible card is .quote > div */
body .main .chatbox > .contents > .chat_messages > ul > li.message > div > .right > .content .quote {
  background: none;
  border: 0;
  padding: 0;
  margin: 2px 0 8px;
  max-width: 100%;
  box-shadow: none;
}
body .main .chatbox > .contents > .chat_messages > ul > li.message > div > .right > .content .quote > div {
  display: block;
  background: var(--vx-quote-bg);
  border: 0;
  border-left: 3px solid var(--vx-accent);
  border-radius: 8px;
  padding: 6px 10px;
  overflow: hidden;
}
body .main .chatbox > .contents > .chat_messages > ul > li.message > div > .right > .content .quote > div > .left {
  width: auto;
  max-width: 100%;
  min-width: 0;
  float: none;
}
body .main .chatbox > .contents > .chat_messages > ul > li.message > div > .right > .content .quote .send_by {
  color: var(--vx-accent);
  font-weight: 700;
  font-size: 12.5px;
  width: auto;
}
body .main .chatbox > .contents > .chat_messages > ul > li.message > div > .right > .content .quote .text {
  font-size: 12.5px;
  opacity: .8;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body .main .chatbox > .contents > .chat_messages > ul > li.message.own_message > div > .right > .content .quote > div,
body .main .chatbox > .contents > .chat_messages > ul > li.message.align_right > div > .right > .content .quote > div {
  background: rgba(255, 255, 255, .16);
  border-left-color: #FFFFFF;
}
body .main .chatbox > .contents > .chat_messages > ul > li.message.own_message > div > .right > .content .quote .send_by,
body .main .chatbox > .contents > .chat_messages > ul > li.message.align_right > div > .right > .content .quote .send_by { color: #FFFFFF; }

/* ---------- reactions as pills ---------- */
body .main .chatbox > .contents > .chat_messages .message_reactions:not(.d-none) {
  margin-top: 6px;
}
body .main .chatbox > .contents > .chat_messages .message_reactions > .reactions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--vx-chip-bg);
  border: 1px solid var(--vx-chip-border);
  border-radius: 999px;
  padding: 2px 9px 2px 6px;
  box-shadow: var(--vx-shadow);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
body .main .chatbox > .contents > .chat_messages .message_reactions > .reactions:hover {
  border-color: var(--vx-accent);
  transform: translateY(-1px);
}
body .main .chatbox > .contents > .chat_messages .message_reactions .total_reactions {
  font-size: 12px;
  font-weight: 600;
  color: var(--vx-muted);
}

/* ---------- thread replies (Discord-style) ---------- */
body .main .chatbox > .contents > .chat_messages .thread_replies_toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  color: var(--vx-accent);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}
body .main .chatbox > .contents > .chat_messages .thread_replies_toggle:hover {
  background: var(--vx-accent-soft);
}
body .main .chatbox > .contents > .chat_messages .thread_replies_list:not(.d-none) {
  margin: 6px 0 2px 6px;
  padding-left: 12px;
  border-left: 2px solid var(--vx-chip-border);
}

/* ---------- day separator ---------- */
body .main .chatbox > .contents > .chat_messages > ul > li > .date.show {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
}
body .main .chatbox > .contents > .chat_messages > ul > li > .date.show::before,
body .main .chatbox > .contents > .chat_messages > ul > li > .date.show::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--vx-chip-border);
}
body .main .chatbox > .contents > .chat_messages > ul > li > .date.show > span {
  background: var(--vx-chip-bg);
  border: 1px solid var(--vx-chip-border);
  color: var(--vx-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .3px;
  padding: 3px 12px;
  border-radius: 999px;
}

/* ---------- system notices (e.g. "Updated Group Info") ---------- */
body .main .chatbox > .contents > .chat_messages > ul > li.system_message > div > .right > .content,
body .main .chatbox > .contents > .chat_messages > ul > li.system_message > div {
  box-shadow: none;
}

/* ---------- composer ---------- */
body .main .chatbox > .footer,
body .main .chatbox .message_editor_container {
  background: var(--vx-chat-bg);
}
body .main .chatbox .editor textarea,
body .main .chatbox .editor .message_editor,
body .main .chatbox .editor [contenteditable="true"] {
  background: var(--vx-composer-bg);
  border: 1px solid var(--vx-chip-border);
  border-radius: 22px;
  padding-left: 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body .main .chatbox .editor textarea:focus,
body .main .chatbox .editor [contenteditable="true"]:focus {
  border-color: var(--vx-accent);
  box-shadow: 0 0 0 3px var(--vx-accent-soft);
  outline: none;
}

/* ---------- small screens ---------- */
@media (max-width: 767px) {
  body .main .chatbox > .contents > .chat_messages > ul > li.message { padding: 5px 10px; }
  body .main .chatbox > .contents > .chat_messages > ul > li.message > div > .left > .image > img { width: 34px; height: 34px; }
  body .main .chatbox > .contents > .chat_messages > ul > li.message > div > .right > .content > div { max-width: 100%; font-size: 14px; }
}

/* =====================================================================
   Side navigation menu (hamburger) - floating, modern panel
   ===================================================================== */
:root {
  --vx-nav-bg: rgba(255, 255, 255, .92);
  --vx-nav-border: rgba(15, 23, 42, .08);
  --vx-nav-text: #1F2430;
  --vx-nav-muted: #6B7280;
  --vx-nav-hover: rgba(15, 23, 42, .05);
  --vx-nav-icon-bg: rgba(15, 23, 42, .05);
  --vx-nav-shadow: 0 24px 60px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .08);
}
body.dark_mode {
  --vx-nav-bg: rgba(18, 21, 27, .94);
  --vx-nav-border: rgba(255, 255, 255, .07);
  --vx-nav-text: #E6E8EE;
  --vx-nav-muted: #8A93A3;
  --vx-nav-hover: rgba(255, 255, 255, .055);
  --vx-nav-icon-bg: rgba(255, 255, 255, .06);
  --vx-nav-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
}

/* the panel itself floats above the page with a soft dimmed backdrop (only while open) */
body .main .show_navigation > .side_navigation {
  top: 10px !important;
  left: 10px !important;
  bottom: 10px !important;
  height: auto !important;
  max-height: calc(100% - 20px) !important;
  width: 268px !important;
  min-width: 268px !important;
  max-width: 268px !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--vx-nav-bg) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  border: 1px solid var(--vx-nav-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--vx-nav-shadow), 0 0 0 100vmax rgba(0, 0, 0, .35) !important;
  overflow: hidden !important;
  z-index: 30 !important;
}

/* header: logo + close */
body .main .side_navigation > .top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 16px 12px 20px !important;
  border-bottom: 1px solid var(--vx-nav-border) !important;
  background: transparent !important;
  min-height: 0 !important;
  height: auto !important;
}
body .main .side_navigation > .top > .logo { width: auto !important; flex: 0 0 auto !important; padding: 0 !important; display: flex !important; align-items: center !important; }
body .main .side_navigation > .top > .logo img { height: 84px !important; max-height: 84px !important; width: auto !important; margin: -26px 0 -26px -14px !important; }
body .main .side_navigation > .top > .icon {
  width: 34px !important; height: 34px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 10px !important;
  transition: background-color .15s ease !important;
}
body .main .side_navigation > .top > .icon:hover { background: var(--vx-nav-hover) !important; }

body.dark_mode .main .side_navigation > .top > .logo img { filter: brightness(0) invert(1) !important; opacity: .92 !important; }

/* scrolling list */
body .main .side_navigation > .center {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding: 8px 10px 12px !important;
  scrollbar-width: thin !important;
}
body .main .side_navigation > .center::-webkit-scrollbar { width: 6px !important; }
body .main .side_navigation > .center::-webkit-scrollbar-thumb { background: var(--vx-nav-border) !important; border-radius: 6px !important; }

body .main .side_navigation .menu_items,
body .main .side_navigation .menu_items ul { padding: 0 !important; margin: 0 !important; }
body .main .side_navigation .menu_items li { list-style: none !important; width: 100% !important; max-width: 100% !important; }
body .main .side_navigation .menu_items a { text-decoration: none !important; color: inherit !important; }

/* every row - plain or link-wrapped, top level or nested */
body .main .side_navigation .menu_items li > .menu_item,
body .main .side_navigation .menu_items li > a > .menu_item,
body .main .side_navigation .menu_items > li:nth-child(2n) > a > .menu_item,
body .main .side_navigation .menu_items > li:nth-child(2n) > .menu_item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 42px !important;
  margin: 2px 0 !important;
  padding: 6px 10px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--vx-nav-text) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
  transition: background-color .15s ease, color .15s ease, transform .15s ease !important;
}
body .main .side_navigation .menu_items li:hover > .menu_item,
body .main .side_navigation .menu_items li:hover > a > .menu_item,
body .main .side_navigation .menu_items > li:nth-child(2n):hover > a > .menu_item {
  background: var(--vx-nav-hover) !important;
  color: var(--vx-nav-text) !important;
  border: 0 !important;
}

/* icon in a soft rounded tile */
body .main .side_navigation .menu_items li .menu_item > .icon {
  flex: 0 0 32px !important;
  width: 32px !important; height: 32px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 !important; padding: 0 !important;
  border-radius: 9px !important;
  background: var(--vx-nav-icon-bg) !important;
  color: var(--vx-nav-muted) !important;
  font-size: 16px !important;
  transition: background-color .15s ease, color .15s ease !important;
}
body .main .side_navigation .menu_items li .menu_item > .icon svg,
body .main .side_navigation .menu_items li .menu_item > .icon img { width: 17px !important; height: 17px !important; }
body .main .side_navigation .menu_items li:hover > .menu_item > .icon,
body .main .side_navigation .menu_items li:hover > a > .menu_item > .icon {
  background: var(--vx-accent-soft) !important;
  color: var(--vx-accent) !important;
}

/* label: never truncate to "Wall..", no underline, single weight */
body .main .side_navigation .menu_items li .menu_item > .title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* badges / counters / carets pushed to the right */
body .main .side_navigation .menu_items li .menu_item > .voxbie-wallet-nav-badge,
body .main .side_navigation .menu_items li .menu_item > .unread:not(:empty) {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
}
body .main .side_navigation .menu_items li .menu_item > .group_caret,
body .main .side_navigation .menu_items li .menu_item > .side_nav_recent_caret {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  color: var(--vx-nav-muted) !important;
  opacity: .8 !important;
  transition: transform .2s ease !important;
}

/* section groups (My Feed, Community, People, My Account, Admin) */
body .main .side_navigation .menu_items > li.has_child { margin-top: 6px !important; }
body .main .side_navigation .menu_items > li.has_child > .menu_item {
  font-weight: 600 !important;
}
body .main .side_navigation .menu_items li.has_child.show > .menu_item > .group_caret {
  transform: rotate(90deg) !important;
}
body .main .side_navigation .menu_items li.has_child > .child_menu {
  margin: 2px 0 6px 25px !important;
  padding-left: 10px !important;
  border-left: 1px solid var(--vx-nav-border) !important;
  background: transparent !important;
}
body .main .side_navigation .menu_items li.has_child > .child_menu li > .menu_item,
body .main .side_navigation .menu_items li.has_child > .child_menu li > a > .menu_item {
  min-height: 36px !important;
  padding: 4px 8px !important;
  font-size: 13.5px !important;
  color: var(--vx-nav-muted) !important;
}
body .main .side_navigation .menu_items li.has_child > .child_menu li:hover > .menu_item,
body .main .side_navigation .menu_items li.has_child > .child_menu li:hover > a > .menu_item {
  color: var(--vx-nav-text) !important;
}
body .main .side_navigation .menu_items li.has_child > .child_menu li .menu_item > .icon {
  flex-basis: 26px !important; width: 26px !important; height: 26px !important; border-radius: 8px !important; background: transparent !important;
}

body .main .side_navigation .child_menu > ul > li {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
body .main .side_navigation .child_menu .child_menu {
  margin: 2px 0 4px 18px !important;
  padding-left: 8px !important;
  border-left: 1px solid var(--vx-nav-border) !important;
}

/* footer: signed-in user as a card */
body .main .side_navigation > .bottom.side_navigation_footer {
  flex: 0 0 auto !important;
  margin: 0 10px 10px !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  border: 1px solid var(--vx-nav-border) !important;
  border-radius: 14px !important;
  background: var(--vx-nav-hover) !important;
}
body .main .side_navigation > .bottom.side_navigation_footer > .user_info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  cursor: pointer !important;
}
body .main .side_navigation > .bottom.side_navigation_footer > .user_info img.logged_in_user_avatar {
  width: 38px !important; height: 38px !important; border-radius: 50% !important; object-fit: cover !important;
}
body .main .side_navigation > .bottom.side_navigation_footer .sub_title {
  color: var(--vx-nav-muted) !important;
  font-size: 12px !important;
}

@media (max-width: 767px) {
  body .main .show_navigation > .side_navigation { width: min(300px, calc(100vw - 20px)) !important; min-width: min(300px, calc(100vw - 20px)) !important; max-width: min(300px, calc(100vw - 20px)) !important; }
}


/* Dark mode: keep every Voxbie logo on the chat pages white (header above the groups list, mobile header, side menu) */
body.dark_mode .main .logo img,
body.dark_mode .main .head .logo img { filter: brightness(0) invert(1) !important; opacity: .92 !important; }

/* =====================================================================
   Voxbie polish pass (2026-10-11): groups list, group info panel,
   community feed, feed page, post comments window.
   Scoped to existing class names only; no markup changes.
   Remove this block to revert.
   ===================================================================== */
:root {
  --vxp-accent: #EA580C;
  --vxp-accent-text: #C2410C;
  --vxp-row-hover: rgba(15, 23, 42, .045);
  --vxp-line: rgba(15, 23, 42, .08);
  --vxp-pill-border: rgba(15, 23, 42, .14);
  --vxp-pill-text: #475569;
  --vxp-muted: #64748B;
}
body.dark_mode {
  --vxp-accent-text: #FB923C;
  --vxp-row-hover: rgba(255, 255, 255, .04);
  --vxp-line: rgba(255, 255, 255, .07);
  --vxp-pill-border: #2C2C34;
  --vxp-pill-text: #A8A8B3;
  --vxp-muted: #7E8796;
}

/* ---------- left list: categories and groups ---------- */
.aside .site_records .list > li.site_record_item {
  margin: 1px 6px;
  padding: 7px 8px;
  border-radius: 10px;
  transition: background-color .12s ease;
}
.aside .site_records .list > li.site_record_item:hover {
  background: var(--vxp-row-hover);
}
.aside .site_records .list > li.site_record_item .left,
.aside .site_records .list > li.site_record_item .left img {
  border-radius: 10px;
}
.aside .site_records .list > li.site_record_item .center .title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
}
.aside .site_records .list > li.site_record_item .center .title .text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aside .site_records .list > li.site_record_item .center .subtitle {
  font-size: 12px;
  color: var(--vxp-muted);
}
@media (hover: hover) and (pointer: fine) {
  .aside .site_records .list > li.site_record_item .right .options {
    opacity: 0;
    transition: opacity .12s ease;
  }
  .aside .site_records .list > li.site_record_item:hover .right .options,
  .aside .site_records .list > li.site_record_item:focus-within .right .options,
  .aside .site_records .list > li.site_record_item .right .options.open {
    opacity: 1;
  }
}

/* ---------- right panel: group info ---------- */
.info_panel .coverpic {
  position: relative;
}
.info_panel .coverpic::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70px;
  background: linear-gradient(to bottom, transparent, rgb(22, 25, 30));
  pointer-events: none;
}
body:not(.dark_mode) .info_panel .coverpic::after {
  background: linear-gradient(to bottom, transparent, #fff);
}
.info_panel .content .field > .title {
  font-size: 13px;
  font-weight: 600;
  color: var(--vxp-muted);
  letter-spacing: 0;
}
/* share buttons: quiet until you reach for them */
.info_panel .icons.social_share_icons li.social_media_share img {
  width: 30px;
  height: 30px;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .15s ease, opacity .15s ease;
}
.info_panel .icons.social_share_icons li.social_media_share:hover img,
.info_panel .icons.social_share_icons li.social_media_share:focus-within img {
  filter: none;
  opacity: 1;
}

/* ---------- Community and Feed pages: drop the double frame ---------- */
.main .middle > .content > .custom_page > .page_content > div:has(> .voxbie-community-wrap),
.main .middle > .content > .custom_page > .page_content > div:has(> .voxbie-feed-wrap) {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* ---------- Community feed cards ---------- */
.voxbie-community-wrap .cf-card {
  overflow: hidden;
}
.voxbie-community-wrap .cf-visual {
  aspect-ratio: 16 / 9;
  max-height: 340px;
  overflow: hidden;
}
.voxbie-community-wrap .cf-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.voxbie-community-wrap .cf-title {
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -.01em;
}
.voxbie-community-wrap .cf-excerpt {
  line-height: 1.55;
}
.voxbie-community-wrap .cf-visual-link:hover .cf-title {
  color: var(--vxp-accent-text);
}

/* like and comment pills: same shape on both pages */
.voxbie-community-wrap .cf-like-btn,
.voxbie-community-wrap .cf-comment-btn,
.voxbie-feed-post .cf-comment-btn,
.voxbie-feed-post .voxbie-feed-like-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 13px;
  border: 1px solid var(--vxp-pill-border);
  border-radius: 999px;
  background: transparent;
  color: var(--vxp-pill-text);
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.voxbie-community-wrap .cf-like-btn:hover,
.voxbie-community-wrap .cf-comment-btn:hover,
.voxbie-feed-post .cf-comment-btn:hover,
.voxbie-feed-post .voxbie-feed-like-btn:hover {
  background: var(--vxp-row-hover);
  color: inherit;
}
.voxbie-feed-post .cf-comment-btn .cf-comment-icon,
.voxbie-feed-post .cf-comment-btn .cf-comment-count {
  color: inherit;
  background: none;
  border: 0;
}
.voxbie-feed-post .cf-comment-btn .cf-comment-icon {
  font-size: 13px;
  filter: grayscale(1);
  opacity: .8;
}
.voxbie-feed-post-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Feed page ---------- */
.voxbie-feed-composer-toggle {
  background: var(--vxp-accent);
  border: 0;
  color: #fff;
  font-weight: 600;
}
.voxbie-feed-composer-toggle:hover {
  background: #C2410C;
  color: #fff;
}
.voxbie-feed-post .voxbie-feed-content {
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- comments window: post header ---------- */
#ccCommentModal .cc-pp-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* keyboard focus stays visible on everything touched above */
.voxbie-community-wrap .cf-like-btn:focus-visible,
.voxbie-community-wrap .cf-comment-btn:focus-visible,
.voxbie-feed-post .cf-comment-btn:focus-visible,
.voxbie-feed-post .voxbie-feed-like-btn:focus-visible,
.voxbie-feed-composer-toggle:focus-visible,
.info_panel .icons.social_share_icons li.social_media_share:focus-within {
  outline: 2px solid var(--vxp-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .aside .site_records .list > li.site_record_item,
  .aside .site_records .list > li.site_record_item .right .options,
  .info_panel .icons.social_share_icons li.social_media_share img,
  .voxbie-community-wrap .cf-like-btn,
  .voxbie-community-wrap .cf-comment-btn,
  .voxbie-feed-post .cf-comment-btn,
  .voxbie-feed-post .voxbie-feed-like-btn {
    transition: none;
  }
}

/* =====================================================================
   Voxbie light bulb switch + light mode for Voxbie pages (2026-10-11).
   The Community and Feed pages were built dark-only; these rules give
   them a light version that only applies when dark mode is off.
   Remove this block to revert.
   ===================================================================== */
.vx-theme-bulb {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin: 0 6px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color .15s ease;
}
body.dark_mode .vx-theme-bulb { color: #C4C9D4; }
.vx-theme-bulb:hover { background: var(--vxp-row-hover); }
.vx-theme-bulb:focus-visible { outline: 2px solid var(--vxp-accent); outline-offset: 2px; }
.vx-theme-bulb svg { width: 21px; height: 21px; overflow: visible; display: block; }
.vx-theme-bulb .vx-bulb-glass,
.vx-theme-bulb .vx-bulb-base {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill .2s ease, stroke .2s ease;
}
.vx-theme-bulb .vx-bulb-rays {
  fill: none;
  stroke: #F59E0B;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity .2s ease;
}
body:not(.dark_mode) .vx-theme-bulb .vx-bulb-glass { fill: #FCD34D; stroke: #B45309; }
body:not(.dark_mode) .vx-theme-bulb .vx-bulb-rays { opacity: 1; }
.side_navigation .top .vx-theme-bulb { margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
  .vx-theme-bulb, .vx-theme-bulb * { transition: none; }
}

/* Community page in light mode: swap its colour tokens */
body:not(.dark_mode) .voxbie-community-wrap {
  --cfp-ink: #0F172A;
  --cfp-muted: #64748B;
  --cfp-line: #E2E8F0;
  --cfp-card: #FFFFFF;
  --cfp-card-alt: #F8FAFC;
  --cfp-accent-text: #C2410C;
  --cfp-ok: #047857;
  --cfp-err: #B91C1C;
}

/* Feed page in light mode */
body:not(.dark_mode) .voxbie-feed-card { background-color:#ffffff; border-color:#e5e7eb; color:#1f2937; }
body:not(.dark_mode) .voxbie-feed-loading { color:#4b5563; }
body:not(.dark_mode) .voxbie-feed-composer { background-color:#f4f5f7; }
body:not(.dark_mode) .voxbie-feed-textarea { background-color:#ffffff; border-color:#e5e7eb; color:#1f2937; }
body:not(.dark_mode) .voxbie-feed-input { background-color:#ffffff; border-color:#e5e7eb; color:#1f2937; }
body:not(.dark_mode) .voxbie-feed-select { background-color:#ffffff; border-color:#e5e7eb; color:#1f2937; }
body:not(.dark_mode) .voxbie-feed-image-name { color:#4b5563; }
body:not(.dark_mode) .voxbie-feed-error { color:#b91c1c; }
body:not(.dark_mode) .voxbie-feed-empty { color:#4b5563; }
body:not(.dark_mode) .voxbie-feed-post { background-color:#f4f5f7; }
body:not(.dark_mode) .voxbie-feed-avatar { background-color:#e5e7eb; }
body:not(.dark_mode) .voxbie-feed-avatar-fallback { background-color:#e5e7eb; color:#6d28d9; }
body:not(.dark_mode) .voxbie-feed-author { color:#111827; }
body:not(.dark_mode) .voxbie-feed-timemeta { color:#6b7280; }
body:not(.dark_mode) .voxbie-pill-friends { color:#6d28d9; }
body:not(.dark_mode) .voxbie-pill-listing { color:#15803d; }
body:not(.dark_mode) .voxbie-pill-offer { color:#1d4ed8; }
body:not(.dark_mode) .voxbie-feed-content { color:#1f2937; }
body:not(.dark_mode) .voxbie-feed-listing-box { background-color:#ffffff; border-color:#e5e7eb; }
body:not(.dark_mode) .voxbie-feed-listing-title { color:#111827; }
body:not(.dark_mode) .voxbie-feed-listing-price { color:#15803d; }
body:not(.dark_mode) .voxbie-feed-like-btn { border-color:#e5e7eb; color:#4b5563; }
body:not(.dark_mode) .voxbie-feed-like-btn.is-liked { color:#6d28d9; }
body:not(.dark_mode) .voxbie-feed-delete-btn { color:#6b7280; }
body:not(.dark_mode) .voxbie-feed-delete-btn:hover { color:#b91c1c; }
body:not(.dark_mode) .voxbie-feed-delete-confirm { background-color:#ffffff; border-color:#e5e7eb; }
body:not(.dark_mode) .voxbie-feed-delete-confirm p { color:#4b5563; }
body:not(.dark_mode) .voxbie-btn-secondary { background-color:#e5e7eb; color:#111827; }
body:not(.dark_mode) .voxbie-feed-composer-bar-text { color:#6b7280; }
body:not(.dark_mode) .voxbie-feed-modal-overlay { background-color:rgba(15, 23, 42, 0.45); }
body:not(.dark_mode) .voxbie-feed-modal { background-color:#ffffff; border-color:#e5e7eb; }
body:not(.dark_mode) .voxbie-feed-modal-header { border-bottom-color:#e5e7eb; color:#111827; }
body:not(.dark_mode) .voxbie-feed-modal-close { color:#6b7280; }
body:not(.dark_mode) .voxbie-feed-modal-label { color:#6b7280; }
body:not(.dark_mode) .voxbie-feed-modal-status { background-color:#f4f5f7; border-color:#e5e7eb; color:#1f2937; }
body:not(.dark_mode) .voxbie-feed-modal-balance { color:#6b7280; }
body:not(.dark_mode) .voxbie-feed-modal-footer { border-top-color:#e5e7eb; }

/* Voxbie Marketplace redesign (2026-10-11): light + dark, cards, filters. Styling only. Remove this block to revert. */
.main .voxbie-mkt-wrap{--mk-bg:transparent;--mk-surface:#FFFFFF;--mk-surface-2:#F6F7F9;--mk-line:#E6E8EC;--mk-line-strong:#D5D9E0;--mk-ink:#0F172A;--mk-ink-2:#334155;--mk-muted:#64748B;--mk-accent:#EA580C;--mk-accent-hover:#C2410C;--mk-accent-soft:#FFF1E8;--mk-accent-ink:#C2410C;--mk-offer-bg:#FEF3C7;--mk-offer-ink:#92400E;--mk-req-bg:#E0ECFF;--mk-req-ink:#1D4ED8;--mk-req-soft:#EEF4FF;--mk-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -12px rgba(15,23,42,.12);max-width:1080px;margin:0 auto;color:var(--mk-ink);}
body.dark_mode .main .voxbie-mkt-wrap{--mk-surface:#16191E;--mk-surface-2:#1D2128;--mk-line:#262B33;--mk-line-strong:#333A44;--mk-ink:#F1F5F9;--mk-ink-2:#CBD5E1;--mk-muted:#8B95A5;--mk-accent-soft:rgba(234,88,12,.14);--mk-accent-ink:#FB923C;--mk-offer-bg:rgba(245,158,11,.14);--mk-offer-ink:#FBBF24;--mk-req-bg:rgba(59,130,246,.16);--mk-req-ink:#93C5FD;--mk-req-soft:rgba(59,130,246,.10);--mk-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.6);}
.main .middle>.content>.custom_page>.page_content>div:has(>.voxbie-mkt-wrap){background:transparent;border:0;box-shadow:none;padding:0;}
.main .voxbie-mkt-wrap .voxbie-mkt-card{background:transparent;border:0;box-shadow:none;padding:28px 8px 40px;color:var(--mk-ink);}
.main .voxbie-mkt-wrap .voxbie-mkt-card h2{font-size:30px;line-height:1.15;font-weight:750;letter-spacing:-.025em;color:var(--mk-ink);margin:0 0 8px;}
.main .voxbie-mkt-wrap .voxbie-mkt-card p.voxbie-mkt-intro{max-width:62ch;font-size:15px;line-height:1.55;color:var(--mk-muted);margin:0 0 24px;}
.main .voxbie-mkt-wrap .voxbie-mkt-tabs{display:flex;gap:4px;border-bottom:1px solid var(--mk-line);margin:0 0 20px;overflow-x:auto;scrollbar-width:none;}
.main .voxbie-mkt-wrap .voxbie-mkt-tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 14px;font-size:14px;font-weight:600;color:var(--mk-muted);white-space:nowrap;cursor:pointer;}
.main .voxbie-mkt-wrap .voxbie-mkt-tab:hover{color:var(--mk-ink);}
.main .voxbie-mkt-wrap .voxbie-mkt-tab.voxbie-mkt-tab-active{color:var(--mk-ink);border-bottom-color:var(--mk-accent);}
.main .voxbie-mkt-wrap .voxbie-mkt-type-toggle{display:inline-flex;gap:2px;padding:3px;margin:0 0 16px;background:var(--mk-surface-2);border:1px solid var(--mk-line);border-radius:999px;}
.main .voxbie-mkt-wrap .voxbie-mkt-type-btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:7px 14px;background:transparent;color:var(--mk-muted);font-size:13.5px;font-weight:600;cursor:pointer;}
.main .voxbie-mkt-wrap .voxbie-mkt-type-btn:hover{color:var(--mk-ink);}
.main .voxbie-mkt-wrap .voxbie-mkt-type-btn[aria-pressed="true"],.main .voxbie-mkt-wrap .voxbie-mkt-type-btn.active,.main .voxbie-mkt-wrap .voxbie-mkt-type-btn.voxbie-mkt-type-btn-active{background:var(--mk-surface);color:var(--mk-ink);box-shadow:0 1px 3px rgba(15,23,42,.12);}
.main .voxbie-mkt-wrap .voxbie-mkt-type-count{font-variant-numeric:tabular-nums;color:var(--mk-muted);font-weight:500;}
.main .voxbie-mkt-wrap .voxbie-mkt-browse-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;margin:0 0 14px;background:var(--mk-surface);border:1px solid var(--mk-line);border-radius:14px;}
.main .voxbie-mkt-wrap .voxbie-mkt-browse-filters>input,.main .voxbie-mkt-wrap .voxbie-mkt-browse-filters>select{height:40px;margin:0;padding:0 12px;background:var(--mk-surface-2);border:1px solid transparent;border-radius:10px;color:var(--mk-ink);font:inherit;font-size:14px;min-width:0;}
.main .voxbie-mkt-wrap .voxbie-mkt-browse-filters>input::placeholder{color:var(--mk-muted);}
.main .voxbie-mkt-wrap .voxbie-mkt-browse-filters>input:focus,.main .voxbie-mkt-wrap .voxbie-mkt-browse-filters>select:focus{outline:none;border-color:var(--mk-accent);background:var(--mk-surface);box-shadow:0 0 0 3px var(--mk-accent-soft);}
.main .voxbie-mkt-wrap #voxbie_mkt_browse_search{flex:1 1 240px;}
.main .voxbie-mkt-wrap #voxbie_mkt_browse_category{flex:0 1 180px;}
.main .voxbie-mkt-wrap #voxbie_mkt_browse_sort{flex:0 1 150px;}
.main .voxbie-mkt-wrap #voxbie_mkt_browse_price_min,.main .voxbie-mkt-wrap #voxbie_mkt_browse_price_max{flex:0 0 96px;max-width:96px !important;font-variant-numeric:tabular-nums;}
.main .voxbie-mkt-wrap .voxbie-mkt-view-toggle{display:inline-flex;gap:2px;margin-left:auto;padding:3px;background:var(--mk-surface-2);border:0;border-radius:10px;}
.main .voxbie-mkt-wrap .voxbie-mkt-view-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:var(--mk-muted);cursor:pointer;}
.main .voxbie-mkt-wrap .voxbie-mkt-view-btn svg{width:17px;height:17px;}
.main .voxbie-mkt-wrap .voxbie-mkt-view-btn.voxbie-mkt-view-btn-active{background:var(--mk-surface);color:var(--mk-ink);box-shadow:0 1px 3px rgba(15,23,42,.12);}
.main .voxbie-mkt-wrap .voxbie-mkt-browse-count{font-size:13px;color:var(--mk-muted);margin:0 2px 12px;font-variant-numeric:tabular-nums;}
.main .voxbie-mkt-wrap .voxbie-mkt-browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding:18px;background:var(--mk-surface);border:1px solid var(--mk-line);border-radius:16px;box-shadow:none;color:var(--mk-ink);transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard:hover{border-color:var(--mk-line-strong);box-shadow:var(--mk-shadow);transform:translateY(-1px);}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-icon{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;font-size:22px;line-height:1;border:0;border-radius:12px;background:var(--mk-accent-soft);}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard:has(.voxbie-mkt-bcard-pill-request) .voxbie-mkt-bcard-icon{background:var(--mk-req-soft);}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border:0;border-radius:999px;font-size:11.5px;font-weight:650;letter-spacing:.01em;text-transform:none;}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-pill-offer{background:var(--mk-offer-bg);color:var(--mk-offer-ink);}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-pill-request{background:var(--mk-req-bg);color:var(--mk-req-ink);}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-body{display:flex;flex-direction:column;gap:14px;flex:1 1 auto;min-width:0;}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-main{min-width:0;}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-cat{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--mk-accent-ink);margin:0 0 4px;}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-title{font-size:16px;line-height:1.35;font-weight:650;letter-spacing:-.01em;color:var(--mk-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;margin:0 0 6px;}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-excerpt{font-size:13.5px;line-height:1.5;color:var(--mk-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-footer{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:auto;padding-top:14px;border-top:1px solid var(--mk-line);}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-price{font-size:18px;font-weight:750;letter-spacing:-.015em;color:var(--mk-ink);font-variant-numeric:tabular-nums;}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-seller{font-size:12.5px;color:var(--mk-muted);}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-seller a{color:var(--mk-ink-2);font-weight:600;text-decoration:none;}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-seller a:hover{color:var(--mk-accent-ink);text-decoration:underline;}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-actions{display:flex;align-items:center;gap:8px;}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-actions .voxbie-btn-primary{flex:1 1 auto;}
.main .voxbie-mkt-wrap .voxbie-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 16px;border-radius:10px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease;}
.main .voxbie-mkt-wrap .voxbie-btn-primary{background:var(--mk-accent);border:1px solid var(--mk-accent);color:#fff;}
.main .voxbie-mkt-wrap .voxbie-btn-primary:hover:not(:disabled){background:var(--mk-accent-hover);border-color:var(--mk-accent-hover);color:#fff;}
.main .voxbie-mkt-wrap .voxbie-btn-secondary{background:var(--mk-surface);border:1px solid var(--mk-line-strong);color:var(--mk-ink);}
.main .voxbie-mkt-wrap .voxbie-btn-secondary:hover:not(:disabled){background:var(--mk-surface-2);}
.main .voxbie-mkt-wrap .voxbie-btn-small{min-height:36px;padding:0 14px;font-size:13.5px;}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-link{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border:1px solid var(--mk-line-strong);border-radius:10px;color:var(--mk-ink);font-size:13.5px;font-weight:600;text-decoration:none;background:transparent;}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard-link:hover{background:var(--mk-surface-2);color:var(--mk-ink);}
.main .voxbie-mkt-wrap .voxbie-mkt-browse-grid.voxbie-mkt-view-list{grid-template-columns:1fr;gap:8px;}
.main .voxbie-mkt-wrap .voxbie-mkt-view-list .voxbie-mkt-bcard{flex-direction:row;align-items:center;gap:16px;padding:14px 16px;}
.main .voxbie-mkt-wrap .voxbie-mkt-view-list .voxbie-mkt-bcard-top{flex-direction:column;align-items:center;gap:6px;flex:0 0 76px;}
.main .voxbie-mkt-wrap .voxbie-mkt-view-list .voxbie-mkt-bcard-body{flex-direction:row;align-items:center;gap:16px;}
.main .voxbie-mkt-wrap .voxbie-mkt-view-list .voxbie-mkt-bcard-main{flex:1 1 auto;}
.main .voxbie-mkt-wrap .voxbie-mkt-view-list .voxbie-mkt-bcard-excerpt{-webkit-line-clamp:1;}
.main .voxbie-mkt-wrap .voxbie-mkt-view-list .voxbie-mkt-bcard-title{-webkit-line-clamp:1;margin-bottom:2px;}
.main .voxbie-mkt-wrap .voxbie-mkt-view-list .voxbie-mkt-bcard-footer{flex-direction:column;align-items:flex-end;flex:0 0 auto;margin:0;padding:0;border:0;text-align:right;}
.main .voxbie-mkt-wrap .voxbie-mkt-view-list .voxbie-mkt-bcard-price{font-size:16px;}
.main .voxbie-mkt-wrap .voxbie-mkt-view-list .voxbie-mkt-bcard-actions{flex:0 0 auto;}
.main .voxbie-mkt-wrap .voxbie-mkt-view-list .voxbie-mkt-bcard-actions .voxbie-btn-primary{flex:0 0 auto;}
@media (max-width:640px){.main .voxbie-mkt-wrap .voxbie-mkt-view-list .voxbie-mkt-bcard,.main .voxbie-mkt-wrap .voxbie-mkt-view-list .voxbie-mkt-bcard-body{flex-direction:column;align-items:stretch;}
.main .voxbie-mkt-wrap .voxbie-mkt-view-list .voxbie-mkt-bcard-top{flex-direction:row;justify-content:space-between;}
.main .voxbie-mkt-wrap .voxbie-mkt-view-list .voxbie-mkt-bcard-footer{flex-direction:row;align-items:baseline;text-align:left;}
.main .voxbie-mkt-wrap .voxbie-mkt-card{padding:18px 4px 32px;}
.main .voxbie-mkt-wrap .voxbie-mkt-card h2{font-size:25px;}
.main .voxbie-mkt-wrap .voxbie-mkt-view-toggle{margin-left:0;}
}
.main .voxbie-mkt-wrap .voxbie-mkt-listing{background:var(--mk-surface);border:1px solid var(--mk-line);border-radius:14px;color:var(--mk-ink);}
.main .voxbie-mkt-wrap .voxbie-mkt-listing-title{color:var(--mk-ink);font-weight:650;}
.main .voxbie-mkt-wrap .voxbie-mkt-listing-meta{color:var(--mk-muted);}
.main .voxbie-mkt-wrap .voxbie-mkt-listing-price{color:var(--mk-ink);font-weight:700;font-variant-numeric:tabular-nums;}
.main .voxbie-mkt-wrap .voxbie-mkt-badge{border-radius:999px;font-weight:600;text-transform:none;letter-spacing:0;}
.main .voxbie-mkt-wrap .voxbie-mkt-empty,.main .voxbie-mkt-wrap .voxbie-mkt-loading{color:var(--mk-muted);background:var(--mk-surface);border:1px dashed var(--mk-line-strong);border-radius:14px;padding:28px;text-align:center;}
.main .voxbie-mkt-wrap .voxbie-mkt-loading:empty{display:none;}
.main .voxbie-mkt-wrap .voxbie-mkt-load-more{margin-top:18px;text-align:center;}
.main .voxbie-mkt-wrap form#voxbie_mkt_create_form label>span{color:var(--mk-ink-2);font-size:13px;font-weight:600;}
.main .voxbie-mkt-wrap form#voxbie_mkt_create_form input[type="text"],.main .voxbie-mkt-wrap form#voxbie_mkt_create_form input[type="number"],.main .voxbie-mkt-wrap form#voxbie_mkt_create_form select,.main .voxbie-mkt-wrap form#voxbie_mkt_create_form textarea{background:var(--mk-surface);border:1px solid var(--mk-line-strong);border-radius:10px;color:var(--mk-ink);}
.main .voxbie-mkt-wrap form#voxbie_mkt_create_form input:focus,.main .voxbie-mkt-wrap form#voxbie_mkt_create_form select:focus,.main .voxbie-mkt-wrap form#voxbie_mkt_create_form textarea:focus{outline:none;border-color:var(--mk-accent);box-shadow:0 0 0 3px var(--mk-accent-soft);}
.main .voxbie-mkt-wrap .voxbie-btn:focus-visible,.main .voxbie-mkt-wrap .voxbie-mkt-bcard-link:focus-visible,.main .voxbie-mkt-wrap .voxbie-mkt-tab:focus-visible,.main .voxbie-mkt-wrap .voxbie-mkt-type-btn:focus-visible,.main .voxbie-mkt-wrap .voxbie-mkt-view-btn:focus-visible{outline:2px solid var(--mk-accent);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){.main .voxbie-mkt-wrap .voxbie-mkt-bcard{transition:none;}
.main .voxbie-mkt-wrap .voxbie-mkt-bcard:hover{transform:none;}
}



/* Voxbie page names (2026-10-12): show "Global Feed" and "Feed" from the first paint,
   so the old names never flash. Display only - page links and database are unchanged.
   Remove this block to revert. */
.main .custom_page:has(#voxbie_community_page) > .header .left .title,
#voxbie_community_page .cf-header h1,
#voxbie_feed_main > h2 { visibility: hidden; position: relative; }
.main .custom_page:has(#voxbie_community_page) > .header .left .title::after,
#voxbie_community_page .cf-header h1::after { content: "Global Feed"; }
#voxbie_feed_main > h2::after { content: "Feed"; }
.main .custom_page:has(#voxbie_community_page) > .header .left .title::after,
#voxbie_community_page .cf-header h1::after,
#voxbie_feed_main > h2::after { visibility: visible; position: absolute; left: 0; top: 0; white-space: nowrap; }

.main .custom_page:has(#voxbie_community_page) > .header .left .title::after { background-image: inherit; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: inherit; }

/* Voxbie group discovery (2026-10-13). Remove this block to revert. */
.main .custom_page > .header { position: relative; }
.vxg-browse {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(234, 88, 12, .35);
  background: #FFF1E8; color: #C2410C; font: 600 13px/1 inherit; cursor: pointer;
}
.vxg-browse:hover { background: #FFE4D2; }
.vxg-browse:focus-visible { outline: 2px solid #EA580C; outline-offset: 2px; }
body.dark_mode .vxg-browse { background: rgba(234, 88, 12, .14); color: #FB923C; border-color: rgba(251, 146, 60, .35); }
@media (max-width: 640px) { .vxg-browse span { display: none; } .vxg-browse { padding: 7px; } }

.vxg-strip {
  margin: 0 0 16px; padding: 16px; border-radius: 16px;
  background: #fff; border: 1px solid #EAE5DF;
}
body.dark_mode .vxg-strip { background: #16191E; border-color: #2A2F37; }
.vxg-strip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.vxg-strip-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: #1F2430; }
.vxg-strip-head p { margin: 2px 0 0; font-size: 13px; color: #6B7280; }
body.dark_mode .vxg-strip-head h3 { color: #F3F4F6; }
body.dark_mode .vxg-strip-head p { color: #9CA3AF; }
.vxg-all {
  flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid #EAE5DF;
  background: transparent; color: #C2410C; font-weight: 600; font-size: 13px; cursor: pointer;
}
body.dark_mode .vxg-all { border-color: #2A2F37; color: #FB923C; }
.vxg-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 148px; gap: 10px;
  overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.vxg-card {
  scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 12px; border-radius: 12px; border: 1px solid #EAE5DF; background: #FBF9F6;
  text-align: left; cursor: pointer; color: inherit; min-height: 150px;
}
.vxg-card:hover { border-color: rgba(234, 88, 12, .45); }
.vxg-card:focus-visible { outline: 2px solid #EA580C; outline-offset: 2px; }
body.dark_mode .vxg-card { background: #1C2027; border-color: #2A2F37; }
.vxg-card img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #EEE; margin-bottom: 4px; }
.vxg-name { font-weight: 700; font-size: 14px; line-height: 1.25; color: #1F2430;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.dark_mode .vxg-name { color: #F3F4F6; }
.vxg-sub { font-size: 12px; color: #6B7280; }
.vxg-open { margin-top: auto; font-size: 12px; font-weight: 600; color: #C2410C; }
body.dark_mode .vxg-open { color: #FB923C; }