/* BraveMeet member V1.1 final visual precision layer.
   Loaded after every legacy member stylesheet so border and spacing decisions
   remain deterministic across Meet, Plans, Circles, Inbox and You. */

body.member-mode .sidebar nav .nav-item {
  position: relative !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.member-mode .sidebar nav .nav-item.active,
body.member-mode .sidebar nav .nav-item:hover {
  background: transparent !important;
  color: var(--bm-color-action) !important;
}

body.member-mode .sidebar nav .nav-item.active::after {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: -1px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: var(--bm-color-action) !important;
}

body.member-mode .sidebar nav .nav-item.active span:first-child,
body.member-mode .sidebar nav .nav-item:hover span:first-child {
  background: transparent !important;
  color: inherit !important;
}

/* Meet: one outline, one photo/story divider, one action rail. */
body.member-mode #discover .member-discover-layout {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.member-mode #discover .member-discover-layout > .people-grid {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

body.member-mode #discover .member-meet-reference-layout {
  width: 100% !important;
  overflow: hidden !important;
  border: 1px solid var(--bm-color-line) !important;
  border-radius: var(--bm-radius-panel) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-card-stage,
body.member-mode #discover .member-meet-reference-layout .member-meet-profile-card {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-profile-panel {
  border-left: 1px solid var(--bm-color-line) !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-starter {
  border: 1px solid var(--bm-color-line) !important;
  border-left: 3px solid var(--bm-color-action) !important;
  border-radius: var(--bm-radius-row) !important;
  background: #fff !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-interest-tile {
  border: 1px solid var(--bm-color-line) !important;
  border-radius: var(--bm-radius-row) !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-availability {
  border: 0 !important;
  border-top: 1px solid var(--bm-color-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-action-rail {
  border: 0 !important;
  border-top: 1px solid var(--bm-color-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-action + .member-meet-action {
  border-left: 1px solid var(--bm-color-line) !important;
}

body.member-mode #discover .member-meet-reference-layout .member-meet-action-primary {
  border-left: 0 !important;
}

body.member-mode #discover .member-meet-filterbar {
  overflow: hidden !important;
  border: 1px solid var(--bm-color-line) !important;
  border-radius: var(--bm-radius-row) !important;
  background: #fff !important;
}

body.member-mode #discover .member-meet-filterbar .member-meet-filter-choice {
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #discover .member-meet-filterbar .member-meet-filter-choice + .member-meet-filter-choice {
  border-left: 1px solid var(--bm-color-line) !important;
}

body.member-mode #discover .member-meet-filterbar .member-meet-filter-choice.active {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--bm-color-selected) !important;
  color: var(--bm-color-action) !important;
  box-shadow: inset 0 -2px 0 var(--bm-color-action) !important;
}

/* Plans and Circles share a quiet list anatomy with a single contextual rail. */
body.member-mode #plans .member-plans-studio,
body.member-mode #tools.member-circle-reference-layout {
  overflow: hidden !important;
  border: 1px solid var(--bm-color-line) !important;
  border-radius: var(--bm-radius-panel) !important;
  background: #fff !important;
}

body.member-mode #plans .member-plan-mine,
body.member-mode #tools.member-circle-reference-layout .member-circle-my-rail {
  border-left: 1px solid var(--bm-color-line) !important;
  background: #fff !important;
}

body.member-mode #plans .member-plan-studio-row,
body.member-mode #plans .member-plan-mine-row,
body.member-mode #tools.member-circle-reference-layout #circle-list > .member-circle-room-card {
  border: 0 !important;
  border-bottom: 1px solid var(--bm-color-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.member-mode #plans .member-plan-studio-row:hover,
body.member-mode #plans .member-plan-mine-row:hover,
body.member-mode #plans .member-plan-mine-row.selected,
body.member-mode #tools.member-circle-reference-layout #circle-list > .member-circle-room-card:hover,
body.member-mode #tools.member-circle-reference-layout #circle-list > .member-circle-room-card.selected {
  background: var(--bm-color-fill) !important;
  border-color: var(--bm-color-line) !important;
}

body.member-mode #plans .member-plan-selected,
body.member-mode #tools.member-circle-reference-layout .member-circle-rail-card {
  border: 1px solid var(--bm-color-line) !important;
  border-radius: var(--bm-radius-row) !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* Make the workspaces read as two intentional jobs: explore on the left,
   manage on the right. The rail gets a quiet visual anchor instead of
   looking like an unrelated second card. */
body.member-mode #plans .member-plan-explore,
body.member-mode #tools.member-circle-reference-layout .member-circle-context {
  min-width: 0 !important;
}

body.member-mode #plans .member-plan-explore-header,
body.member-mode #tools.member-circle-reference-layout .member-circle-head-tools {
  background: #fff !important;
  border-bottom: 1px solid var(--bm-color-line) !important;
}

body.member-mode #plans .member-plan-mine > header,
body.member-mode #tools.member-circle-reference-layout .member-circle-my-rail > header {
  min-height: 58px !important;
  align-items: center !important;
  border-bottom: 1px solid var(--bm-color-line) !important;
}

body.member-mode #plans .member-plan-mine-group > header h3,
body.member-mode #tools.member-circle-reference-layout .member-circle-my-rail h3 {
  letter-spacing: .01em !important;
}

body.member-mode #plans .member-plan-studio-attendance,
body.member-mode #plans .member-plan-studio-action {
  align-self: center !important;
}

body.member-mode #tools.member-circle-reference-layout .member-circle-my-rail {
  min-height: 100% !important;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%) !important;
}

body.member-mode #tools.member-circle-reference-layout .member-circle-my-rail > section:empty::after,
body.member-mode #plans .member-plan-mine-group:has(.member-plan-mine-empty) .member-plan-mine-empty {
  color: var(--bm-color-muted) !important;
}

/* Inbox: preserve the chat canvas, but give the selected conversation a
   stable reading column and keep utility controls from competing with it. */
body.member-mode #inbox .conversation {
  min-width: 0 !important;
}

body.member-mode #inbox .conversation > header {
  min-height: 72px !important;
  border-bottom: 1px solid var(--bm-color-line) !important;
}

body.member-mode #inbox .messages {
  padding: 28px clamp(18px, 4vw, 56px) 24px !important;
  align-content: start !important;
}

body.member-mode #inbox .composer {
  border-top: 1px solid var(--bm-color-line) !important;
  background: #fff !important;
}

body.member-mode #inbox .member-retention-icon {
  width: 16px !important;
  height: 16px !important;
  color: var(--bm-color-action) !important;
  flex: 0 0 auto !important;
}

/* You is an identity hub, not a narrow settings sheet. Give the profile and
   control groups enough width to breathe while preserving the white V1.1
   canvas and the same border vocabulary as the other workspaces. */
body.member-mode #profile .member-you-account-hub {
  width: min(1240px, calc(100vw - 64px)) !important;
}

body.member-mode #profile .member-you-v11-heading {
  padding-bottom: 22px !important;
  border-bottom: 1px solid var(--bm-color-line) !important;
}

body.member-mode #profile .member-you-v11-groups {
  gap: 20px !important;
}

body.member-mode #profile .member-you-v11-row em {
  min-width: 160px !important;
}

body.member-mode #tools.member-circle-reference-layout .member-circle-room-select {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Inbox and You use the same surface rhythm for primary and secondary states. */
body.member-mode #inbox .messenger,
body.member-mode #profile .member-you-account-hub {
  overflow: hidden !important;
  border: 1px solid var(--bm-color-line) !important;
  border-radius: var(--bm-radius-panel) !important;
  background: #fff !important;
}

body.member-mode #inbox .thread,
body.member-mode #inbox .inbox-lane,
body.member-mode #profile .member-you-v11-row,
body.member-mode #profile .member-you-setting-row {
  border: 0 !important;
  border-bottom: 1px solid var(--bm-color-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
}

body.member-mode #inbox .thread.active,
body.member-mode #inbox .inbox-lane.active {
  border-color: var(--bm-color-line) !important;
  background: var(--bm-color-selected) !important;
  box-shadow: inset 3px 0 0 var(--bm-color-action) !important;
}

body.member-mode #profile .member-you-settings-grid > article,
body.member-mode #profile .member-you-group {
  border: 1px solid var(--bm-color-line) !important;
  border-radius: var(--bm-radius-row) !important;
  background: #fff !important;
  box-shadow: none !important;
}

@media (max-width: 820px) {
  body.member-mode #discover .member-meet-filterbar .member-meet-filter-choice + .member-meet-filter-choice {
    border-left: 0 !important;
    border-top: 1px solid var(--bm-color-line) !important;
  }

  body.member-mode #plans .member-plan-mine,
  body.member-mode #tools.member-circle-reference-layout .member-circle-my-rail {
    border-left: 0 !important;
    border-top: 1px solid var(--bm-color-line) !important;
  }

  body.member-mode #inbox .thread-list,
  body.member-mode #inbox .member-conversation-rail {
    border-right: 0 !important;
    border-bottom: 1px solid var(--bm-color-line) !important;
  }

  body.member-mode #plans .member-plan-explore-header,
  body.member-mode #tools.member-circle-reference-layout .member-circle-head-tools {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
  }

  body.member-mode #plans .member-plan-studio-action,
  body.member-mode #tools.member-circle-reference-layout .circle-card-actions button {
    min-height: 42px !important;
  }

  body.member-mode #inbox .messages {
    padding: 20px 16px 20px !important;
  }

  body.member-mode #profile .member-you-account-hub {
    width: calc(100vw - 24px) !important;
  }

  body.member-mode #profile .member-you-v11-row em {
    min-width: 0 !important;
  }
}

@media (max-width: 430px) {
  body.member-mode #plans .member-plan-mine-row {
    grid-template-columns: 34px 44px minmax(0, 1fr) !important;
    grid-template-areas: "date media copy" "date media status" !important;
    align-items: center !important;
    min-height: 76px !important;
  }
  body.member-mode #plans .member-plan-mine-row time { grid-area: date !important; }
  body.member-mode #plans .member-plan-mine-row img { grid-area: media !important; }
  body.member-mode #plans .member-plan-mine-row > span { grid-area: copy !important; min-width: 0 !important; }
  body.member-mode #plans .member-plan-mine-row em {
    grid-area: status !important;
    justify-self: start !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  body.member-mode #plans .member-plan-explore-controls { gap: 8px !important; }
  body.member-mode #plans .member-plan-explore-controls > label,
  body.member-mode #plans .member-plan-explore-controls > button { min-width: 0 !important; }
}
/* Inbox privacy controls stay collapsed until the member asks to change them. */
body.member-mode #inbox .member-rail-privacy { padding: 0 !important; }
body.member-mode #inbox .member-rail-privacy > summary {
  min-height: 64px; padding: 14px 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; cursor: pointer; list-style: none;
}
body.member-mode #inbox .member-rail-privacy > summary::-webkit-details-marker { display: none; }
body.member-mode #inbox .member-rail-privacy > summary > span:first-child { min-width: 0; }
body.member-mode #inbox .member-rail-privacy > summary .eyebrow { margin: 0 0 4px; }
body.member-mode #inbox .member-rail-privacy > summary strong { display: block; }
body.member-mode #inbox .member-rail-privacy > summary .member-rail-disclosure {
  color: var(--bm-color-muted, #6b7b94); font-size: 18px; line-height: 1;
  transition: transform 160ms ease;
}
body.member-mode #inbox .member-rail-privacy[open] > summary .member-rail-disclosure { transform: rotate(180deg); }
body.member-mode #inbox .member-rail-privacy > :not(summary) { margin-left: 16px; margin-right: 16px; }
body.member-mode #inbox .member-rail-privacy > button { margin-bottom: 16px; }
body.member-mode #inbox .member-rail-privacy > summary:focus-visible {
  outline: 2px solid var(--bm-color-primary, #1f69dc); outline-offset: -2px;
}