/* ============================================
   GLIIMU DASHBOARD CORE SHELL
   ============================================ */

/* Helper classes for responsive buttons */
.desktop-only { display: none; }
.mobile-only { display: none; }

/* Height reserved for the fixed bottom bar (0 whenever the rail is used).
   The container padding lives in variables because the page header cancels it
   with negative margins, and both sides must agree on the same numbers. */
:root {
  --bottom-bar-h: 0px;
  --page-header-h: 52px;
  --pad-x: var(--space-8);
  --pad-top: var(--space-8);
  /* With viewport-fit=cover the page can be painted behind the status bar.
     Every element that pins itself to the top of the viewport has to add this
     much room, otherwise the camera cut-out covers the back arrow and title. */
  --safe-top: env(safe-area-inset-top, 0px);
}
@media (max-width: 768px) {
  :root {
    /* The pill is 48px tall and floats 10px off the bottom, so its top edge sits
       58px above the edge. Reserve exactly that; the container's own bottom
       padding then adds the breathing gap instead of doubling up. */
    --bottom-bar-h: calc(58px + env(safe-area-inset-bottom));
    --pad-x: 8px;
    --pad-top: calc(16px + var(--safe-top));
  }
}

/* Nothing may paint under the status bar. Pages whose header bleeds flush to
   the viewport top would otherwise put the back arrow behind the camera
   cut-out, so this strip covers the inset. It hangs off the view container so
   each route can match its own top colour with --top-strip. */
.view-container::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-top);
  background: var(--top-strip, var(--surface));
  z-index: 900;
  pointer-events: none;
}

/* Match the strip to whatever each route paints at the top: the default is the
   page header's surface, XpLoRe and the collection page show the layout's
   tertiary, the reader its own white bar. */
.view-xplore, .view-feed, .view-collection { --top-strip: var(--bg-tertiary); }
.view-read, .view-post { --top-strip: var(--bg-primary); }

/* Main Layout - Uses bg-tertiary (swapped) */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
  background: var(--bg-tertiary);
}

/* Sidebar — a fixed rail on wide screens, removed entirely under 769px */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 64px;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 10000;
}

.main-content {
  margin-left: 0;
  width: 100%;
  flex: 1;
}

.sidebar-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  height: 80px;
  box-sizing: border-box;
}

/* Shown in place of the feed when a signed-in member's auth check could not
   reach Supabase. Redirecting here would loop, so this page just waits. */
.app-offline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: 96px 24px;
  text-align: center;
}
.app-offline-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); }
.app-offline-hint { font-size: var(--fs-sm); color: var(--text-secondary); max-width: 42ch; }

.brand-logo {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
  display: flex;
  align-items: center;
}
.brand-logo-img { height: 32px; width: auto; }
.brand-logo-rect { display: block; }
.brand-logo-square { display: none; }

[data-theme="light"] .brand-logo-rect { filter: brightness(0); }
[data-theme="dark"] .brand-logo-rect { filter: brightness(0) invert(1); }

.sidebar-nav { flex: 1; padding: var(--space-4); overflow-y: auto; display: flex; flex-direction: column; justify-content: center; }

.nav-section { margin-bottom: var(--space-6); }

.nav-section-bottom {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.nav-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
}

.nav-item {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  margin-bottom: var(--space-1);
  transition: all var(--transition-fast);
}

.nav-item:hover { background: var(--surface-hover); color: var(--text-primary); }
.nav-item.active { background: var(--brand-primary-light); color: var(--brand-primary); font-weight: var(--fw-semibold); }

/* Sidebar Icon Alignment */
.nav-item svg {
  margin-right: 12px;
  flex-shrink: 0;
}

/* The last slot is your face, not a page. It is a <button> because it opens a
   menu on every screen size, and buttons do not inherit the row styling. */
.nav-item--account {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  text-align: left;
}
.nav-item--account.is-open { background: var(--surface-hover); color: var(--text-primary); }

.nav-avatar {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  margin-right: 12px;
  flex-shrink: 0;
}
.nav-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
  display: block;
  background: var(--bg-tertiary);
}
.nav-avatar .unread-dot {
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
}

/* Rail people — the avatars of everyone you follow (wide screens only) */
.rail-people {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-2);
  margin-top: auto;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-shrink: 1;
  min-height: 0;
}
.rail-people::-webkit-scrollbar { display: none; }
.rail-people:empty { display: none; }

.rail-people-heading {
  display: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  padding: 0 var(--space-2) var(--space-2);
}

.rail-person {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-secondary);
  transition: background var(--transition-fast);
}
.rail-person:hover { background: var(--surface-hover); color: var(--text-primary); }

.rail-person-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.rail-person-name {
  display: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Rail toggle — pinned to the bottom of the sidebar */
.rail-toggle {
  flex-shrink: 0;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.rail-toggle:hover { background: var(--surface-hover); color: var(--text-primary); }
.rail-toggle svg { flex-shrink: 0; }
/* The word only fits once the rail is wide enough to hold it */
.rail-toggle-label { display: none; }

/* Unread indicator — rides the nav row it belongs to (Ping) and the profile
   avatar, which carries alerts on every screen */
.unread-dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--error);
  border: 2px solid var(--bg-secondary);
  z-index: 2;
  pointer-events: none;
}
.unread-dot[hidden] { display: none; }

/* ============================================
   BOTTOM BAR — a floating pill, the whole navigation under 769px
   ============================================ */
.bottom-bar {
  display: none;
  position: fixed;
  bottom: calc(10px + env(safe-area-inset-bottom));
  left: 14px;
  right: 14px;
  z-index: 9000;
  /* Translucent so the feed keeps scrolling under it, the way Pinterest's bar
     reads; the blur keeps the icons legible over whatever passes behind. */
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: 6px 8px;
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.16);
}

.bottom-item {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-family: var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bottom-item:active { background: var(--surface-hover); }
.bottom-item.active { color: var(--brand-primary); }

/* The XpLoRe slot carries the Gliimu app icon instead of the compass. The tile is
   dark, so on the dark bar it needs a hairline ring of its own to stay readable. */
.bottom-mark {
  width: 21px;
  height: 21px;
  border-radius: 5px;
  object-fit: cover;
  display: block;
}
[data-theme="dark"] .bottom-mark { outline: 1px solid rgba(255,255,255,.22); outline-offset: -1px; }

/* The last slot is your face and it opens the account menu, so it is sized to
   match the icons around it rather than to look like a profile picture. */
.bottom-item .nav-avatar { margin-right: 0; }
.nav-avatar--sm { width: 24px; height: 24px; }
.bottom-item .nav-avatar .unread-dot { top: -1px; right: -1px; width: 9px; height: 9px; }

/* ============================================
   PULL TO REFRESH — the chip that drops in when you drag the page down
   ============================================ */
/* The gesture belongs to the app, so the browser must not chain the scroll past
   the top and start its own refresh on top of ours. */
html { overscroll-behavior-y: none; }

.ptr {
  --ptr-shift: 0px;
  position: fixed;
  top: calc(var(--safe-top) + 10px);
  left: 50%;
  z-index: 9500;
  width: 38px;
  height: 38px;
  margin-left: -19px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  pointer-events: none;
  /* Parked above the viewport until the drag pulls it down. The offset has to
     cancel --safe-top as well as the chip's own height: a fixed -58px left the
     ring peeking into view on any phone with a status-bar inset. */
  transform: translateY(calc(var(--ptr-shift) - 100% - var(--safe-top) - 12px));
  transition: transform 0.12s linear;
}
.ptr-ring { width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--brand-primary); }
.ptr--ready { border-color: var(--success); }
.ptr--loading { transition: none; }
.ptr--loading .ptr-ring { animation: ptr-spin 0.7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* ============================================
   ACCOUNT MENU — opened from the avatar on narrow screens
   ============================================ */
.account-menu {
  position: fixed;
  z-index: 10050;
  min-width: 196px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.account-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account-menu-item:hover { background: var(--surface-hover); }
.account-menu-item svg { color: var(--text-muted); flex-shrink: 0; }

.account-menu-item--danger,
.account-menu-item--danger svg { color: var(--error); }
.account-menu-item--danger:hover { background: var(--error-light); }

/* Main Content */
.main-content {
  flex: 1;
  margin-left: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  /* clip (not hidden): hidden would create a scroll container and break
     position: sticky for the topbar and in-page sticky elements */
  overflow-x: clip;
}

/* Topbar / Bottom Bar */
.topbar {
  height: 64px;
  background: var(--surface);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

/* Hide topbar on desktop (769px+) */
@media (min-width: 769px) {
  .topbar { display: none; }
}

/* Topbar alignment fix */
.topbar #topbar-dynamic-content {
  flex: 1;
  justify-content: center;
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  padding: 0 16px;
}
.topbar #topbar-right-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.view-container {
  padding: var(--pad-top) var(--pad-x) var(--space-8);
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}

/* Page header — the router renders this above any page that has no rail tab,
   so each one carries its own title and a single way back to XpLoRe. The
   negative margins only cancel the container's own padding, so the bar lands
   flush with the viewport edges and the arrow stays vertically centred. */
.page-header {
  display: flex;
  align-items: center;
  gap: 6px;
  height: calc(var(--page-header-h) + var(--safe-top));
  padding-top: var(--safe-top);
  margin: calc(-1 * var(--pad-top)) calc(-1 * var(--pad-x)) 16px;
  padding-right: var(--space-4);
  padding-left: var(--space-4);
  padding-bottom: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.page-back {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}
.page-back:hover { color: var(--brand-primary); background: var(--surface-hover); }
.page-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Full-bleed pages pull themselves up to the viewport edge; with a header
   above them that negative margin would slide the page under it. */
.page-header + .profile-layout { margin-top: 0; }

/* Mobile-only hint shown in the bottom bar on pages with no search/actions */
.mobile-bar-hint { display: none; }

/* Core UI Components */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}
.card h2 { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.card h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }

.text-muted { color: var(--text-muted); font-size: var(--fs-sm); }

.input {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  font-family: var(--font-sans);
}
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--brand-primary-soft); }

.form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-group label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); }

.btn-primary, .btn-secondary {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.btn-primary { background: var(--brand-primary); color: var(--text-inverse); }
.btn-primary:hover { background: var(--brand-primary-hover); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--surface-hover); }

.theme-toggle-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
}
.modal-content {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  width: 100%;
  max-width: 500px;
  position: relative;
  box-shadow: var(--shadow-2xl);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: none;
  font-size: var(--fs-2xl);
  cursor: pointer;
  color: var(--text-muted);
}

/* Elite User Avatars */
.sidebar-star-img {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 28px !important;
  height: 28px !important;
  z-index: 5;
  filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(6deg) brightness(102%) contrast(101%) drop-shadow(0 0 4px rgba(249, 115, 22, 0.8));
}

.inline-star {
  width: 16px !important;
  height: 16px !important;
  vertical-align: middle;
  margin-left: 4px;
  display: inline-block !important;
  position: static !important;
  filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(6deg) brightness(102%) contrast(101%);
}

.blue-tick-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: var(--brand-primary);
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface);
  z-index: 5;
}

.inline-tick {
  color: var(--brand-primary);
  vertical-align: middle;
  margin-left: 4px;
}

/* Verification badges next to usernames */
.badge-icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  flex-shrink: 0;
}

/* ============================================
   RESPONSIVE SHELL
   ============================================ */

/* Desktop (769px and up) — icon rail, widened only by the menu button */
@media (min-width: 769px) {
  .bottom-bar { display: none !important; }

  .sidebar {
    width: 64px;
    transition: width 0.25s ease;
  }

  .main-content {
    margin-left: 64px;
    width: auto;
  }

  .sidebar-header { padding: var(--space-4) 0; justify-content: center; }
  .brand-logo-rect { display: none; }
  .brand-logo-square { display: block; }
  .sidebar-nav { padding: var(--space-4) var(--space-2); }
  .nav-label, .nav-text { display: none; }
  .nav-item { justify-content: center; padding: var(--space-3) 0; }
  .nav-item svg { margin-right: 0; }
  .nav-avatar { margin-right: 0; }

  .rail-person { justify-content: center; padding: var(--space-1) 0; }
  .rail-person-avatar { width: 34px; height: 34px; }

  /* Expanded: pinned open by the menu button (body.sidebar-open). Hovering the
     rail used to preview this and it fought with everything on screen. */
  body.sidebar-open .sidebar {
    width: 190px;
    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.12);
  }

  body.sidebar-open .sidebar-header { padding: var(--space-6); justify-content: flex-start; }
  body.sidebar-open .brand-logo-rect { display: block; }
  body.sidebar-open .brand-logo-square { display: none; }
  body.sidebar-open .sidebar-nav { padding: var(--space-4); }

  body.sidebar-open .nav-label,
  body.sidebar-open .nav-text { display: inline; }

  body.sidebar-open .nav-item { justify-content: flex-start; padding: var(--space-3) var(--space-4); }
  body.sidebar-open .nav-item svg { margin-right: 12px; }
  body.sidebar-open .nav-avatar { margin-right: 12px; }

  body.sidebar-open .rail-people-heading { display: block; }
  body.sidebar-open .rail-person { justify-content: flex-start; padding: var(--space-1) var(--space-2); }
  body.sidebar-open .rail-person-name { display: block; }

  body.sidebar-open .rail-toggle { justify-content: flex-start; gap: 10px; padding: 0 var(--space-4); }
  body.sidebar-open .rail-toggle-label { display: inline; }
}

/* Mobile (768px and down) — no sidebar at all, the bottom bar is the navigation */
@media (max-width: 768px) {
  .mobile-only { display: flex !important; }

  /* Hide topbar (moved to bottom) */
  .topbar { display: none !important; }

  /* The rail and its toggle have no job here — the bottom bar replaces them */
  .sidebar,
  body.sidebar-open .sidebar { display: none; }
  .sidebar-backdrop { display: none; }

  .bottom-bar { display: flex; align-items: stretch; gap: 2px; }

  /* Keep scrolling content clear of the fixed bar */
  body { padding-bottom: var(--bottom-bar-h); }
}

/* ============================================
   NAV UNREAD DOTS
   ============================================ */
.nav-item {
  position: relative;
}

/* Hub Category Tabs - Scrollable */
.hub-category-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: none;
  background: transparent;
  margin-bottom: 16px;
}

.hub-category-tabs::-webkit-scrollbar {
  display: none;
}

.hub-category-tab {
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.hub-category-tab:hover {
  background: var(--bg-tertiary);
}

.hub-category-tab.active {
  background: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast-notification {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--text-primary);
  color: var(--surface);
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}

.toast-notification.toast-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast-notification.toast-hide {
  transform: translateX(-50%) translateY(100px);
  opacity: 0;
}