/* =================================================
   PROFILE THEME WRAPPER (PAGE LEVEL)
   ================================================= */

.profile-bg-wrapper {
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.profile-bg-wrapper.mm-theme {
  position: relative;
  min-height: 100vh;
  color: var(--mm-text, #0f172a);
  isolation: isolate;

  /* Base behind everything */
  background-color: #0b1220;
  background: var(--mm-bg, #0b1220);

  /* Theme gradients sit below the separately blurred profile image. */
}

/* 1) Background image layer (fixed to viewport, blur this) */
.profile-bg-wrapper.mm-theme::before {
  content: "";
  position: fixed;      /* was absolute */
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image: var(--mm-bg-image, none);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  /* Blur the image itself */
  filter: blur(var(--mm-bg-overlay-blur, 0px));

  /* Avoid blur edge halos without transform breaking fixed */
  inset: -24px;         /* expand slightly so blurred edges don't show */
}


/* 2) Overlay tint layer (opacity only, no blur) */
.profile-bg-wrapper.mm-theme::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background: rgba(0, 0, 0, 1);
  opacity: var(--mm-bg-overlay-opacity, 0);
}

/* Content above both layers */
.profile-bg-wrapper.mm-theme > main {
  position: relative;
  z-index: 2;
  color: inherit;
}

.profile-bg-wrapper.mm-theme .mm-muted,
.profile-bg-wrapper.mm-theme .muted {
  color: var(--mm-text-muted, rgba(15, 23, 42, 0.70));
}

.profile-bg-wrapper.mm-theme a {
  color: var(--mm-accent, #2563eb);
  text-decoration-color: rgba(0, 0, 0, 0.18);
}
.profile-bg-wrapper.mm-theme a:hover {
  text-decoration-color: currentColor;
}


/* =================================================
   PROFILE SETTINGS MODAL (restored styling + robust stacking)
   ================================================= */

.mm-modal.hidden { display: none; }

.mm-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.mm-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mm-modal-panel {
  position: absolute;
  top: 84px;
  right: 20px;
  width: min(540px, calc(100vw - 40px));
  max-height: calc(100vh - 120px);
  overflow: auto;

  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);

  transform-origin: top right;
}

.mm-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 8px;
}

.mm-modal-title {
  font-weight: 700;
  font-size: 14px;
  color: #0f172a;
}

.mm-modal-close {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
  cursor: pointer;
}

.mm-modal-tabs {
  display: flex;
  gap: 8px;
  padding: 0 14px 12px;
}

.mm-tab {
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
  cursor: pointer;
}

.mm-tab.is-active {
  background: rgba(2,132,199,0.12);
  border-color: rgba(2,132,199,0.25);
}

.mm-modal-body { padding: 14px; }

/* Robust: keep profile settings modal above glass widget layers */
#mm-profile-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
}

#mm-profile-settings-modal .mm-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#mm-profile-settings-modal .mm-modal-panel {
  position: absolute;
  top: 84px;
  right: 20px;
  left: auto;
  bottom: auto;
  z-index: 1;
}

/* Keep the gear clickable if anything overlaps it */
#mm-profile-settings-btn {
  position: relative;
  z-index: 999999;
  pointer-events: auto;
}

/* =================================================
   PROFILE WIDGET CORE
   ================================================= */

.grid-stack-item-content.mm-widget-shell {
  position: relative;
  overflow: visible;
  border-radius: 0;
  color: var(--mm-widget-fg, inherit);

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.grid-stack-item-content.mm-widget-shell::before,
.grid-stack-item-content.mm-widget-shell::after {
  content: none !important;
  display: none !important;
}

.grid-stack-item-content.mm-widget-shell > * {
  position: relative;
  z-index: 1;
}

/* =================================================
   SKIN ROOT
   ================================================= */

.mm-pw,
.mm-room-scene {
  position: relative;
}

.mm-pw {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;

  /* Single radius owner */
  overflow: hidden;
}

/* =================================================
   WIDGET BODY
   ================================================= */

.mm-pw__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

/* Background paint layer (no radius here anymore) */
.mm-pw__body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image: var(--mm-widget-bgimg, none);
  background-size: cover;
  background-position: center;

background-color: rgb(
  var(
    --mm-widget-bg-rgb,
    var(--mm-widget-bg-rgb-default, 255 255 255)
  )
);

opacity: var(
  --mm-widget-bg-layer-opacity,
  var(--mm-widget-bg-layer-opacity-default, 0.25)
);



}

.mm-pw__body > * {
  position: relative;
  z-index: 1;
}

/* =================================================
   ROOM SCENE (special case)
   ================================================= */

.grid-stack-item-content.mm-widget-room-scene {
  padding: 0 !important;
}

.mm-widget-room-scene .mm-room-scene {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}

/* The shared .mm-pw sheet and .mm-pw__body::before own the background.
   An extra hero paint layer made the same opacity apply twice. */
.mm-widget-room-scene .mm-room-scene::before { content: none; }
.mm-widget-room-scene .mm-room-scene { border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mm-widget-room-scene .mm-room-scene > * { position: relative; z-index: 1; }
.mm-widget-room-scene .mm-room-gradient { display: none; }

/* =================================================
   WIDGET STYLE GEAR
   ================================================= */

.mm-widget-style-layer {
  position: absolute;
  inset: 0;
  background: transparent;
  border-radius: inherit;
  pointer-events: none;
  z-index: 50;
}

.mm-widget-style-btn,
.mm-widget-style-pop {
  pointer-events: auto;
}

.mm-widget-style-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

.mm-widget-style-btn {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.25);

  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.9);

  cursor: pointer;

  opacity: 0;
  transition:
    opacity 120ms ease,
    background-color 120ms ease,
    transform 120ms ease;
}

.mm-widget-style-btn:hover {
  background: rgba(0, 0, 0, 0.55);
  transform: scale(1.05);
}

.grid-stack-item-content.mm-widget-shell:hover .mm-widget-style-btn {
  opacity: 1;
}

.mm-widget-style-pop {
  position: fixed;
  z-index: 9999;
  width: 240px;

  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);

  padding: 12px;
  color: #0f172a;
}

.mm-widget-style-pop.hidden {
  display: none;
}

/* Safety: if modal is hidden, it must not intercept any clicks */
#mm-profile-settings-modal.hidden {
  pointer-events: none !important;
}

/* Keep long identity text readable inside narrow or resized widgets. */
.mm-room-identity { min-width: 0; max-width: 100%; }
#room-display-name, #room-pronouns, #room-status-message {
  overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  .mm-widget-room-scene .mm-room-scene {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .mm-widget-room-scene .mm-room-scene > .relative {
    height: auto;
    min-height: 100%;
  }
}

@media (max-width: 767px) {
  .mm-room-avatar { padding: 12px 12px 0; }
  .mm-room-avatar > .relative { width: 64px; height: 64px; }
  .mm-room-identity { padding: 12px; }
  .mm-room-identity > * + * { margin-top: 6px; }
  #room-display-name { font-size: 20px; line-height: 1.25; }
}

/* Small contextual controls; reading layout is unchanged for owner and visitor. */
.mm-profile-edit-target { position:relative; }
.mm-profile-edit-control { position:absolute;right:0;top:0;z-index:5;opacity:0;pointer-events:none;padding:3px 8px;border-radius:6px;background:Canvas;color:CanvasText;border:1px solid currentColor;font-size:12px; }
.mm-profile-edit-target:hover > .mm-profile-edit-control,.mm-profile-edit-target:focus-within > .mm-profile-edit-control {opacity:1;pointer-events:auto;}
.mm-profile-edit-target.editing > .mm-profile-edit-control {display:none;}
.mm-inline-save-status {font-size:12px;display:block;}
.mm-inline-save-status button {margin:4px;padding:3px 7px;border:1px solid currentColor;border-radius:4px;}
@media(hover:none){.mm-profile-edit-control {opacity:1;pointer-events:auto;}}
.mm-lists-root input,.mm-lists-root select {background:Canvas!important;color:CanvasText!important;border-color:color-mix(in srgb,currentColor 25%,transparent)!important;}
.mm-lists-root [class*="bg-slate"] {background:transparent!important;}
.mm-lists-root [class*="text-slate"] {color:inherit!important;}
.mm-media {min-width:0;max-width:100%;overflow:auto;}
.mm-media [data-mm-media-stage] {max-width:100%;position:relative;}
.mm-media-load {position:absolute;inset:0;z-index:2;background:#182235;color:white;border:0;cursor:pointer;font-size:14px;}

.mm-lists-root [data-list-id].bg-slate-800 {background:color-mix(in srgb,currentColor 12%,transparent)!important;font-weight:700;}
.mm-lists-suggestions-portal [class*="text-slate"] {color:inherit!important;}
.mm-lists-suggestions-portal button:hover {background:color-mix(in srgb,currentColor 10%,transparent)!important;}

.mm-profile-settings-dialog {margin:auto;width:min(540px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;background:white;color:#0f172a;border:0;border-radius:16px;box-shadow:0 20px 50px #0004;}
.mm-profile-settings-dialog::backdrop {background:transparent;backdrop-filter:none;}
@media(max-width:480px){.mm-profile-settings-dialog{padding:18px;}}

/* Profile typography only: leave the top banner and authored rich text alone. */
.profile-bg-wrapper .grid-stack-item-content:not(.mm-widget-room-scene) .mm-pw { font-family: var(--mm-widget-font, var(--mm-profile-font, inherit)); }
.profile-bg-wrapper .mm-pw__bar { flex-shrink: 0; padding-block: 9px; }
.profile-bg-wrapper .mm-pw__title { font-size: 15px; font-weight: 650; line-height: 1.3; }
.profile-bg-wrapper .mm-pw__body h2:not(.mm-text-heading) { font-family: var(--mm-widget-font, var(--mm-profile-font, var(--pw-heading-font, inherit))); font-size: 1.35rem; font-weight: 650; line-height: 1.25; letter-spacing: -.02em; }
.profile-bg-wrapper .mm-pw__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Shadow is independently customisable without changing the widget skin. */
.profile-bg-wrapper .grid-stack-item-content .mm-pw { box-shadow: var(--mm-widget-shadow, var(--pw-shadow)); }

/* Keep shadows outside the card; scroll only its content, not the shell.
   GridStack's content overflow otherwise clips the entire outer shadow. */
.profile-bg-wrapper .grid-stack-item-content.mm-widget-shell { overflow: visible !important; }
.profile-bg-wrapper .grid-stack-item-content .mm-pw { -webkit-mask-image: none; mask-image: none; }
.profile-bg-wrapper .mm-pw__body { overflow: auto; }

/* Theme samples and scoped accent details, without recolouring authored text. */
.mm-theme-previews {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.mm-theme-preview {padding:6px;border:2px solid #e2e8f0;border-radius:10px;text-align:left;font-size:12px;font-weight:600;background:#fff;}
.mm-theme-preview[aria-pressed="true"] {border-color:#4f46e5;box-shadow:0 0 0 1px #4f46e5;}
.mm-theme-preview:focus-visible {outline:2px solid #4f46e5;outline-offset:2px;}
.mm-theme-preview-scene {display:flex;gap:5px;padding:12px 8px;height:58px;border-radius:5px;background:var(--preview-bg);margin-bottom:5px;}
.mm-theme-preview-scene > span {width:50%;border-radius:4px;background:var(--preview-card);border-top:3px solid var(--preview-accent);box-shadow:0 2px 4px #0002;}
.profile-bg-wrapper .grid-stack-item-content:not(.mm-widget-room-scene) .mm-pw__bar {border-bottom:2px solid color-mix(in srgb,var(--mm-accent,#7aa7ff) 35%,transparent);}
.profile-bg-wrapper .mm-pw__body a {text-decoration:underline;text-decoration-color:var(--mm-accent,#7aa7ff);text-decoration-thickness:2px;text-underline-offset:3px;}
.profile-bg-wrapper .mm-pw__body :focus-visible {outline:2px solid var(--mm-accent,#7aa7ff);outline-offset:2px;}
@media(max-width:420px){.mm-theme-previews{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* Stable floating settings frame: only the active panel scrolls. */
.mm-profile-settings-dialog {width:min(620px,calc(100vw - 32px));height:min(660px,calc(100dvh - 32px));overflow:hidden;}
.mm-profile-settings-dialog[open] {display:flex;flex-direction:column;}
.mm-profile-settings-drag {flex:0 0 auto;}
.mm-settings-layout {display:flex;flex-direction:column;flex:1 1 auto;min-height:0;gap:16px;}
.mm-settings-tabs {display:flex;gap:4px;flex:0 0 auto;background:#f1f5f9;padding:4px;border-radius:10px;}
.mm-settings-tabs [role="tab"] {flex:1;padding:9px 6px;border-radius:7px;font-weight:600;color:#64748b;}
.mm-settings-tabs [aria-selected="true"] {background:white;color:#4338ca;box-shadow:0 1px 4px #0f172a14;}
.mm-settings-tabs [role="tab"]:focus-visible {outline:2px solid #4f46e5;outline-offset:1px;}
.mm-settings-scroll {overflow:auto;min-height:0;flex:1 1 auto;padding:3px;}
.mm-settings-panel[hidden] {display:none;}
.mm-settings-footer {flex:0 0 auto;border-top:1px solid #e2e8f0;padding-top:12px;}
@media(max-width:420px){.mm-profile-settings-dialog{padding:16px;}.mm-settings-layout{gap:12px;}}

/* A widget's explicit typeface also applies to the hero and skin headings. */
.profile-bg-wrapper .grid-stack-item-content[data-widget-font]:not([data-widget-font="theme"]) .mm-pw,
.profile-bg-wrapper .grid-stack-item-content[data-widget-font]:not([data-widget-font="theme"]) .mm-pw__title {font-family:var(--mm-widget-font);}
.mm-widget-style-pop.mm-floating {width:min(360px,calc(100vw - 16px));max-height:calc(100dvh - 16px);overflow:hidden;display:flex;flex-direction:column;}
.mm-widget-style-pop.hidden {display:none;}
.mm-widget-style-tabs {display:flex;gap:3px;padding:3px;background:#f1f5f9;border-radius:8px;margin-bottom:10px;flex-shrink:0;}
.mm-widget-style-tabs [role="tab"] {flex:1;font-size:11px;padding:7px 4px;border-radius:6px;}
.mm-widget-style-tabs [aria-selected="true"] {background:white;color:#4338ca;box-shadow:0 1px 3px #0001;font-weight:600;}
.mm-widget-style-tabs [role="tab"]:focus-visible {outline:2px solid #4f46e5;}
.mm-widget-style-scroll {overflow:auto;min-height:0;flex:1 1 auto;max-height:380px;padding:2px;}
.mm-widget-style-scroll [role="tabpanel"][hidden] {display:none;}

.mm-widget-style-pop {font-family:system-ui,sans-serif;font-size:13px;}
.mm-widget-style-pop p,.mm-widget-style-pop [class*="text-[10px]"] {font-size:11px;line-height:1.4;}

/* Stable tab frame: scroll panels without resizing or moving the popout. */
.mm-widget-style-pop.mm-floating {height:min(480px,calc(100dvh - 16px));}
.mm-widget-style-scroll {max-height:none;}

.mm-widget-style-drag {cursor:grab;touch-action:none;user-select:none;padding:5px 0;flex-shrink:0;}
.mm-widget-style-drag.mm-dragging {cursor:grabbing;}
.mm-widget-style-drag:focus-visible {outline:2px solid #4f46e5;outline-offset:2px;border-radius:4px;}

/* Independent edges: inset overlay avoids changing saved widget geometry. */
.profile-bg-wrapper .grid-stack-item-content .mm-pw {border-radius:var(--mm-widget-radius,var(--pw-radius,16px));}
.profile-bg-wrapper [data-widget-border-custom="1"] .mm-pw {border:0;}
.profile-bg-wrapper [data-widget-border-custom="1"] .mm-pw::before {box-shadow:none;}
.profile-bg-wrapper [data-widget-border-custom="1"] .mm-pw::after {content:"";position:absolute;inset:0;border-radius:inherit;border:var(--mm-widget-border-width,1px) var(--mm-widget-border-style,solid) var(--mm-widget-border-color,var(--pw-border,#94a3b8));pointer-events:none;z-index:3;box-sizing:border-box;}

/* Compact Style tab: pair controls rather than adding more vertical height. */
.mm-widget-style-scroll [data-widget-panel="style"] {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start;}
.mm-widget-style-scroll [data-widget-panel="style"][hidden] {display:none;}
.mm-widget-style-scroll [data-widget-panel="style"] > div {margin-top:0;}
.mm-widget-style-scroll [data-widget-panel="style"] > .space-y-3 {grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.mm-widget-style-scroll [data-widget-panel="style"] > .space-y-3 > * {margin-top:0;min-width:0;}
.mm-style-edges-default {grid-column:1/-1;justify-self:start;}
.mm-widget-style-scroll [data-widget-panel="style"] > div:last-child {grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:10px;align-items:center;}
.mm-widget-style-scroll [data-widget-panel="style"] > div:last-child > label {grid-column:1;}
.mm-widget-style-scroll [data-widget-panel="style"] > div:last-child > select {grid-column:1;}
.mm-widget-style-scroll [data-widget-panel="style"] > div:last-child > div {grid-column:2;grid-row:1/3;margin-top:0;}


.mm-style-save-footer{flex-shrink:0;}
.mm-style-save-status[data-error="1"]{color:#b91c1c;}

/* Basic Info keeps links and fields readable in every widget skin. */
.mm-basic-info {min-width:0;overflow-wrap:anywhere;}
.mm-basic-info .mm-basic-website {color:inherit;text-decoration:underline;text-underline-offset:3px;}
.mm-basic-info .editing input {background:Canvas;color:CanvasText;border:1px solid currentColor;border-radius:6px;padding:4px 6px;max-width:100%;}
.mm-rich-save-status {font-size:12px;align-self:center;}


/* Whole-banner movement stays separate from the editable picture and identity. */
.mm-banner-layout-tools{display:none;position:absolute;left:18px;top:50%;transform:translateY(-50%);z-index:50;flex-direction:column;gap:5px;padding:5px;border-radius:10px;background:#fff;color:#26324b;box-shadow:0 3px 14px #0003}
.dashboard-editable .mm-banner-layout-tools{display:flex}
.mm-banner-layout-grip{cursor:grab;text-align:center;font-size:24px;touch-action:none;user-select:none;padding:5px}
.mm-banner-layout-grip:active{cursor:grabbing}
.mm-banner-layout-tools button{font:12px system-ui;border:0;border-radius:5px;background:#eef2ff;padding:6px;cursor:pointer}
@media(max-width:767px){.mm-banner-layout-tools{display:none!important}}