/* Gantomo Element — LP / 掲示板と統一 */

:root {
  --g-chat-header-offset: calc(var(--g-site-header-height, 67px) + var(--g-crossnav-height, 56px));
}

body {
  font-family: "Noto Sans JP", system-ui, sans-serif !important;
  background: var(--g-bg, #faf8f5) !important;
}

.gantomo-site-header-slot--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20000 !important;
  background: rgba(250, 248, 245, 0.98);
  box-shadow: 0 1px 0 var(--g-line, rgba(26, 24, 22, 0.08));
  pointer-events: none;
}

.gantomo-site-header-slot--fixed .gantomo-site-header,
.gantomo-site-header-slot--fixed a,
.gantomo-site-header-slot--fixed button {
  pointer-events: auto;
}

.gantomo-site-header .gantomo-crossnav {
  position: static;
  top: auto;
}

/* 掲示板と同じ白ピルのアクティブ表示（Element の a リセットより優先） */
.gantomo-site-header-slot .gantomo-crossnav a[data-gnav].is-active {
  color: #5e5478 !important;
  background: #fff !important;
  border: 2px solid rgba(122, 111, 150, 0.4) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(26, 24, 22, 0.08) !important;
}

.gantomo-site-header-slot .gantomo-crossnav a[data-gnav="forum"].is-active {
  color: #7a5f3a !important;
  border-color: rgba(184, 149, 106, 0.45) !important;
}

.gantomo-site-header-slot .gantomo-crossnav a[data-gnav="mypage"].is-active,
.gantomo-site-header-slot .gantomo-crossnav a[data-gnav="top"].is-active {
  color: #2d5240 !important;
  border-color: rgba(74, 124, 98, 0.4) !important;
}

/* 掲示板と同じグリッド — コンテンツの背面（z-index 低） */
.gantomo-grid-overlay {
  position: fixed;
  top: var(--g-chat-header-offset, 123px);
  left: 0;
  right: 0;
  height: min(calc(88vh - var(--g-chat-header-offset, 123px)), 764px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.gantomo-grid-overlay .gantomo-page-bg__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% -20%, var(--g-accent-glow, rgba(74, 124, 98, 0.15)) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 50%, rgba(122, 111, 150, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 40% 35% at 0% 80%, rgba(184, 149, 106, 0.1) 0%, transparent 45%);
}

.gantomo-grid-overlay .gantomo-page-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--g-line, rgba(26, 24, 22, 0.1)) 1px, transparent 1px),
    linear-gradient(90deg, var(--g-line, rgba(26, 24, 22, 0.1)) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 78%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 78%);
}

body > .gantomo-crossnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20000;
  justify-content: flex-start !important;
}

.gantomo-nav-spacer {
  flex: 1 1 auto;
  min-width: 0.25rem;
}

.gantomo-crossnav a.gantomo-nav-login {
  background: linear-gradient(145deg, #4a7c62 0%, #3d6a53 100%);
  color: #fff !important;
  border-radius: 999px;
  padding: 0.35rem 0.9rem !important;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(74, 124, 98, 0.35);
}

.gantomo-crossnav .gantomo-nav-auth {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.gantomo-crossnav a.gantomo-nav-user,
.gantomo-crossnav span.gantomo-nav-user {
  background: rgba(74, 124, 98, 0.12);
  color: #3d6a53 !important;
  border: 1px solid rgba(74, 124, 98, 0.35);
  border-radius: 999px;
  padding: 0.35rem 0.9rem !important;
  font-weight: 600;
  text-decoration: none !important;
  cursor: default;
  pointer-events: none;
}

.gantomo-crossnav a.gantomo-nav-admin {
  background: rgba(74, 124, 98, 0.14) !important;
  color: #2f5a45 !important;
  border: 1px solid rgba(74, 124, 98, 0.4) !important;
  border-radius: 999px;
  padding: 0.35rem 0.85rem !important;
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow: none !important;
}

.gantomo-crossnav a.gantomo-nav-logout {
  background: transparent !important;
  color: #5c5651 !important;
  border: 1px solid rgba(92, 86, 81, 0.25) !important;
  border-radius: 999px;
  padding: 0.35rem 0.85rem !important;
  font-size: 0.82rem;
  box-shadow: none !important;
}

/* 横断ナビは fixed — Element 本体も viewport 基準で下げる（padding だけでは途切れる） */
body.gantomo-has-crossnav {
  overflow: hidden !important;
}

#matrixchat.gantomo-matrixchat {
  position: relative !important;
  height: 100vh !important;
  max-height: 100vh !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#matrixchat.gantomo-matrixchat .mx_MatrixChat,
#matrixchat.gantomo-matrixchat .mx_AppLayout,
#matrixchat.gantomo-matrixchat [class*="MatrixChat_view"],
#matrixchat.gantomo-matrixchat [class*="MainSplit"] {
  top: var(--g-chat-header-offset, 123px) !important;
  height: calc(100vh - var(--g-chat-header-offset, 123px)) !important;
  max-height: calc(100vh - var(--g-chat-header-offset, 123px)) !important;
  box-sizing: border-box !important;
}

/* 画面上部のトースト・通知許可バナーがナビに隠れないように */
body.gantomo-has-crossnav .mx_ToastContainer,
body.gantomo-has-crossnav [class*="ToastContainer"],
body.gantomo-has-crossnav [class*="Toast"][class*="top"],
body.gantomo-has-crossnav .cpd-Toasts {
  top: calc(var(--g-chat-header-offset, 123px) + 8px) !important;
}

body.gantomo-has-crossnav .mx_Banner,
body.gantomo-has-crossnav [class*="Banner"][class*="mx_"] {
  top: var(--g-chat-header-offset, 123px) !important;
}

/* 設定パネル・メニューを横断バー (z-index 20000) より前面に */
.mx_UserSettingsDialog,
.mx_TabbedSettingsDialog,
.mx_ContextualMenu_wrapper,
.mx_GenericDropdownMenu,
.mx_LeftPanel_outerWrapper .mx_LeftPanel_wrapper--settings {
  z-index: 25000 !important;
}

/* 左パネル下部の設定・ルームアイコン */
.mx_LeftPanel_dock button,
.mx_LeftPanel_dock a,
[class*="LeftPanel"][class*="docked"] button {
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
}

/*
 * Element の日付区切り（「月曜日」等）— メッセージの日付ラベル。
 * 空ルームではメッセージが無いのにだけ表示され、上に大きな余白ができるため非表示。
 */
.mx_RoomView_messagePanel:not(:has(.mx_EventTile)) .mx_MessagePanel_spacer {
  display: none !important;
  flex: 0 0 0 !important;
  height: 0 !important;
  min-height: 0 !important;
}

.mx_RoomView_messagePanel:not(:has(.mx_EventTile)) .mx_DateSeparator,
.mx_RoomView_messagePanel:not(:has(.mx_EventTile)) [data-testid="jump-to-date-separator-button"] {
  display: none !important;
}

/* メッセージありのときも日付は控えめに（曜日だけより分かりやすく） */
.mx_DateSeparator h2,
[data-testid="jump-to-date-separator-button"] h2 {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--g-ink-light, #8a837c) !important;
}

/* ログイン / ウェルカム画面 — LP・掲示板と同じ背景（写真デフォルトを無効化） */
.mx_Login_view,
.auth-page,
.spinner-view,
.mx_AuthPage,
.mx_WelcomePage,
.mx_ServerSelection,
.mx_AuthBody_background {
  background-color: var(--g-bg, #faf8f5) !important;
  background-image: none !important;
}

.mx_AuthPage::before,
.mx_WelcomePage::before {
  display: none !important;
}

/* 埋め込み welcome — 中央寄せ（レイアウトは壊さない） */
.mx_AuthPage,
.mx_WelcomePage {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  text-align: center !important;
  overflow: visible !important;
}

.mx_AuthBody,
.mx_AuthPage_modal {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 28rem !important;
  overflow: visible !important;
  padding-bottom: 1rem !important;
}

.mx_EmbeddedPage {
  display: block !important;
  width: 100% !important;
  max-width: 28rem !important;
  margin: 1.5rem auto 0 !important;
  pointer-events: none !important;
}

.mx_EmbeddedPage iframe {
  display: block !important;
  width: 100% !important;
  min-height: 10rem !important;
  height: 12rem !important;
  margin: 0 auto !important;
  border: none !important;
  background: var(--g-bg, #faf8f5) !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

/* 言語選択の直前 — 通常フローで重ならない */
.gantomo-welcome-actions {
  position: relative;
  z-index: 5;
  pointer-events: auto;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  padding: 0.25rem 1.25rem 0.75rem;
  text-align: center;
  box-sizing: border-box;
}

.gantomo-welcome-login,
.gantomo-welcome-register {
  display: block;
  width: 100%;
  max-width: 18rem;
  margin: 0 auto;
  padding: 0.8rem 1.25rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
}

.gantomo-welcome-register {
  margin-top: 0.65rem;
}

.gantomo-welcome-login {
  background: linear-gradient(145deg, #4a7c62 0%, #3d6a53 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(74, 124, 98, 0.3);
}

.gantomo-welcome-login:hover {
  filter: brightness(1.05);
}

.gantomo-welcome-register {
  background: #fff;
  color: #3d6a53;
  border: 2px solid rgba(74, 124, 98, 0.45);
  box-shadow: none;
}

.gantomo-welcome-register:hover {
  background: var(--g-accent-soft, #e8f0eb);
}

.gantomo-welcome-links {
  margin: 1rem 0 0;
  font-size: 0.88rem;
}

.gantomo-welcome-links a {
  color: var(--g-accent-hover, #3d6a53);
  text-decoration: none;
  cursor: pointer;
}

.gantomo-welcome-links a:hover {
  text-decoration: underline;
}

.gantomo-welcome-note {
  font-size: 0.82rem;
  color: var(--g-ink-light, #8a837c);
  margin: 1rem 0 0;
  line-height: 1.55;
}

.mx_AuthFooter {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 28rem !important;
  margin-top: 0.5rem !important;
  padding-top: 0.75rem !important;
}

.mx_AccessibleButton_kind_primary,
.mx_Dialog_primary,
button[type="submit"].mx_Login_submit {
  background-color: #4a7c62 !important;
  border-color: #4a7c62 !important;
}

.mx_AccessibleButton_kind_primary:hover {
  background-color: #3d6a53 !important;
}

.mx_LeftPanel {
  background-color: #f3efe8 !important;
}

.mx_RoomView,
.mx_RoomView_messagePanel,
.mx_EventTile_line {
  background-color: #faf8f5 !important;
}

.mx_LeftPanel_userHeader .mx_LeftPanel_userHeader_name,
.mx_UserMenu_userNameHeader {
  font-family: "Noto Serif JP", serif !important;
}