/* =========================================================
   CHIPEX — GLOBAL PLATFORM DESIGN SYSTEM
   Connect. Share. Belong.
   Integrated responsive application styling
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --navy: #17152e;
  --navy-dark: #0c0b1b;
  --navy-light: #292448;

  --purple: #6c4bf4;
  --purple-dark: #5635d9;
  --purple-light: #8e79ff;

  --lavender: #eeeaff;
  --lavender-light: #f7f5ff;

  --page: #f5f5fa;
  --white: #ffffff;

  --text: #242238;
  --muted: #858397;

  --border: #eae9f1;

  --green: #1eaa75;
  --orange: #f39a42;
  --blue: #4385ee;
  --red: #e05263;

  --radius: 16px;
  --radius-lg: 22px;

  --shadow: 0 8px 30px rgba(24, 20, 55, .055);
  --shadow-hover: 0 14px 35px rgba(24, 20, 55, .10);

  --font: "DM Sans", sans-serif;
  --heading: "Manrope", sans-serif;

  --topbar-height: 72px;
}

/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  min-height: 100vh;
  overflow-x: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #a99aff;
  outline-offset: 2px;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

/* =========================================================
   GLOBAL UTILITIES
========================================================= */

.cx-muted {
  color: var(--muted);
}

.cx-primary {
  color: var(--purple);
}

.cx-hidden {
  display: none !important;
}

.cx-loading {
  padding: 30px;
  text-align: center;
  color: var(--muted);
}

.cx-empty {
  padding: 35px 20px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  color: var(--muted);
  line-height: 1.7;
}

.cx-divider {
  height: 1px;
  background: var(--border);
  margin: 16px 0;
}

/* =========================================================
   HEADER
========================================================= */

.topbar {
  height: var(--topbar-height);
  padding: 0 3%;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;

  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--border);

  position: sticky;
  top: 0;
  z-index: 1000;

  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.brand-area,
.brand {
  display: flex;
  align-items: center;
}

.brand {
  gap: 11px;
  flex-shrink: 0;
}

.brand-mark {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: linear-gradient(
    135deg,
    var(--purple),
    #a18aff
  );

  color: white;
  font-family: var(--heading);
  font-size: 25px;
  font-weight: 900;

  box-shadow: 0 5px 15px #6c4bf433;
}

.brand-name {
  font-family: var(--heading);
  font-weight: 900;
  font-size: 21px;
  letter-spacing: 1px;
  color: var(--navy);
}

.header-search {
  height: 42px;
  width: min(490px, 42vw);

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 0 15px;
  border-radius: 12px;

  background: #f3f2f8;
  color: var(--muted);
}

.header-search input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon,
.profile-button,
.mobile-menu {
  display: grid;
  place-items: center;

  border: none;
  background: transparent;
  color: var(--navy);
}

.header-icon {
  width: 39px;
  height: 39px;
  border-radius: 11px;
  position: relative;
}

.header-icon:hover {
  background: var(--lavender);
  color: var(--purple);
}

.header-icon svg {
  width: 20px;
  height: 20px;
}

#chipexNotificationBadge,
[data-notification-count] {
  position: absolute;
  top: -4px;
  right: -4px;

  min-width: 18px;
  height: 18px;

  display: grid;
  place-items: center;

  padding: 0 4px;
  border-radius: 20px;

  background: #e84d65;
  color: white;

  font-size: 9px;
  font-weight: 900;

  border: 2px solid white;
}

.login-button,
.join-button {
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 800;
}

.login-button {
  border: 1px solid var(--border);
  background: white;
  color: var(--navy);
}

.login-button:hover {
  background: var(--lavender-light);
}

.join-button {
  border: none;
  background: var(--purple);
  color: white;
}

.join-button:hover,
.primary-button:hover {
  background: var(--purple-dark);
}

.profile-button {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: var(--lavender);
  color: var(--purple);
  font-weight: 900;
}

.mobile-menu {
  display: none;
}

/* =========================================================
   APPLICATION GRID
========================================================= */

.app-layout {
  width: min(1500px, 96%);
  margin: 24px auto;

  display: grid;
  grid-template-columns: 245px minmax(0, 1fr) 285px;
  gap: 23px;
  align-items: start;
}

.sidebar,
.right-sidebar {
  position: sticky;
  top: 94px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.main-content {
  min-width: 0;
  width: 100%;
}

/* =========================================================
   LEFT SIDEBAR
========================================================= */

.sidebar {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 13px;
  box-shadow: var(--shadow);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 5px 7px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 17px;

  min-width: 0;
}

.sidebar-user strong {
  display: block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}

.sidebar-avatar,
.composer-avatar {
  flex-shrink: 0;

  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 50%;
  background: var(--lavender);
  color: var(--purple);
  font-weight: 900;
  overflow: hidden;
}

.sidebar-avatar img,
.composer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-group {
  margin-bottom: 20px;
}

.nav-heading {
  padding: 0 10px;
  margin-bottom: 8px;

  color: #aaa8b8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.3px;
}

.nav-item {
  width: 100%;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 11px 12px;
  margin-bottom: 3px;

  border: none;
  border-radius: 10px;

  background: transparent;
  color: #68667b;

  text-align: left;
  font-weight: 600;

  transition: .2s ease;
}

.nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nav-item:hover {
  background: #f6f3ff;
  color: var(--purple);
}

.nav-item.active {
  background: var(--lavender);
  color: var(--purple);
  font-weight: 800;
}

.sidebar-footer {
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

.sidebar-brand-footer {
  padding: 16px 10px 5px;
  color: #aaa8b8;
  font-size: 11px;
  line-height: 1.8;
}

/* =========================================================
   WELCOME BANNER
========================================================= */

.welcome-banner {
  min-height: 300px;
  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 35px 38px;

  border-radius: var(--radius-lg);

  background:
    radial-gradient(circle at 85% 20%, #8065ff66, transparent 30%),
    linear-gradient(
      120deg,
      #17152e,
      #34236c 60%,
      #6848d9
    );

  color: white;
  box-shadow: 0 15px 35px #25145b20;
}

.welcome-content {
  position: relative;
  z-index: 2;
  max-width: 490px;
}

.welcome-label,
.section-eyebrow {
  font-size: 10px;
  letter-spacing: 1.7px;
  font-weight: 900;
}

.welcome-label {
  color: #c9bbff;
}

.welcome-content h1 {
  font-family: var(--heading);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.16;
  margin: 15px 0;
  letter-spacing: -1.3px;
}

.welcome-content p {
  max-width: 420px;
  color: #d5d1e8;
  line-height: 1.7;
}

.welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 22px;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 800;
}

.primary-button {
  border: none;
  background: var(--purple);
  color: white;
}

.welcome-banner .primary-button {
  background: white;
  color: var(--purple-dark);
}

.welcome-banner .primary-button:hover {
  background: #eeeaff;
}

.secondary-button {
  border: 1px solid #ffffff55;
  background: transparent;
  color: white;
}

.welcome-decoration {
  width: 220px;
  height: 220px;

  position: relative;

  display: grid;
  place-items: center;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  border: 1px solid #ffffff38;
}

.circle-one {
  width: 190px;
  height: 190px;
}

.circle-two {
  width: 150px;
  height: 150px;
}

.decoration-card {
  width: 125px;
  padding: 20px 13px;

  border: 1px solid #ffffff35;
  border-radius: 16px;

  background: #ffffff17;
  backdrop-filter: blur(12px);

  transform: rotate(-8deg);
  box-shadow: 0 15px 40px #0003;
}

.decoration-card span {
  display: block;
  margin-bottom: 12px;
  color: #d6caff;
  font-size: 10px;
  letter-spacing: 2px;
}

.decoration-card strong {
  display: block;
  font-family: var(--heading);
  font-size: 17px;
}

/* =========================================================
   SECTION HEADINGS
========================================================= */

.explore-section,
.stories-section,
.post-composer,
.feed-section {
  margin-top: 24px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.section-heading h2 {
  margin-top: 5px;
  font-family: var(--heading);
  font-size: 20px;
  font-weight: 800;
}

.section-eyebrow {
  color: #9995ad;
}

.text-link,
.right-link {
  border: none;
  background: transparent;
  color: var(--purple);
  font-weight: 800;
}

/* =========================================================
   DISCOVERY SHORTCUTS
========================================================= */

.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.shortcut-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  min-height: 125px;
  padding: 15px;

  border: 1px solid var(--border);
  border-radius: 15px;
  background: white;

  text-align: left;
  box-shadow: var(--shadow);

  transition: transform .2s, border-color .2s;
}

.shortcut-card:hover {
  transform: translateY(-4px);
  border-color: #c8bcff;
  box-shadow: var(--shadow-hover);
}

.shortcut-icon {
  width: 37px;
  height: 37px;

  display: grid;
  place-items: center;

  border-radius: 11px;
  margin-bottom: 12px;
}

.shortcut-icon svg {
  width: 18px;
}

.shortcut-icon.purple {
  background: #eeeaff;
  color: #6c4bf4;
}

.shortcut-icon.orange {
  background: #fff1e4;
  color: #ef922d;
}

.shortcut-icon.blue {
  background: #eaf2ff;
  color: #4385ee;
}

.shortcut-icon.green {
  background: #e5f8ef;
  color: #1eaa75;
}

.shortcut-card strong {
  font-size: 13px;
}

.shortcut-card small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

/* =========================================================
   STORIES
========================================================= */

.stories-placeholder {
  min-height: 105px;

  display: flex;
  align-items: center;
  gap: 20px;

  padding: 15px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 15px;
}

.story-create {
  min-width: 70px;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
}

.story-plus {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  border: 2px dashed var(--purple);
  border-radius: 50%;

  color: var(--purple);
  font-size: 24px;
}

.story-message {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
}

.story-message svg {
  color: var(--purple);
}

/* =========================================================
   POST COMPOSER
========================================================= */

.post-composer {
  padding: 17px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.composer-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.composer-input {
  flex: 1;
  min-width: 0;

  padding: 13px 16px;

  border: none;
  border-radius: 25px;
  background: #f4f3f8;

  color: var(--muted);
  text-align: left;
}

.composer-input:hover {
  background: #efedf7;
}

.composer-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;

  margin-top: 15px;
  padding-top: 12px;

  border-top: 1px solid var(--border);
}

.composer-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  padding: 8px 12px;

  border: none;
  border-radius: 9px;
  background: transparent;

  color: #77758a;
  font-weight: 700;
}

.composer-actions button:hover {
  background: var(--lavender);
  color: var(--purple);
}

/* =========================================================
   FEED
========================================================= */

.feed-section {
  padding-bottom: 30px;
}

.feed-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}

.feed-empty {
  padding: 45px 20px;
  text-align: center;
  background: white;
  border: 1px solid var(--border);
  border-radius: 17px;
}

.empty-icon {
  width: 54px;
  height: 54px;
  margin: auto auto 15px;

  display: grid;
  place-items: center;

  border-radius: 17px;
  background: var(--lavender);
  color: var(--purple);
}

.feed-empty h3 {
  font-family: var(--heading);
  font-size: 19px;
  margin-bottom: 8px;
}

.feed-empty p {
  max-width: 350px;
  margin: 0 auto 18px;
  color: var(--muted);
  line-height: 1.7;
}

/* =========================================================
   SOCIAL POSTS
========================================================= */

.cx-post,
.post-card,
.feed-post {
  padding: 19px;
  margin-bottom: 15px;

  background: white;
  border: 1px solid var(--border);
  border-radius: 17px;

  box-shadow: var(--shadow);
  min-width: 0;
}

.cx-post-header,
.post-header,
.feed-post-header {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}

.cx-post-avatar,
.post-avatar,
.feed-post-avatar {
  width: 43px;
  height: 43px;
  flex-shrink: 0;

  display: grid;
  place-items: center;

  border-radius: 50%;
  background: var(--lavender);
  color: var(--purple);
  font-weight: 900;
  overflow: hidden;
}

.cx-post-avatar img,
.post-avatar img,
.feed-post-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cx-post-author,
.post-author,
.feed-post-author {
  flex: 1;
  min-width: 0;
}

.cx-post-author strong,
.post-author strong,
.feed-post-author strong {
  display: block;
  color: var(--navy);
  overflow-wrap: anywhere;
}

.cx-post-author small,
.post-author small,
.feed-post-author small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
}

.cx-post-content,
.post-content,
.feed-post-content {
  line-height: 1.75;
  color: #49465d;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.cx-post-actions,
.post-actions,
.feed-post-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 15px;
  padding-top: 12px;

  border-top: 1px solid var(--border);
}

.cx-post-actions button,
.post-actions button,
.feed-post-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  padding: 9px 12px;

  border: 0;
  border-radius: 9px;

  background: transparent;
  color: #77758a;

  font-weight: 700;
  font-size: 12px;
}

.cx-post-actions button:hover,
.post-actions button:hover,
.feed-post-actions button:hover {
  background: var(--lavender);
  color: var(--purple);
}

.cx-post-actions button.liked,
.post-actions button.liked,
.feed-post-actions button.liked {
  color: #e14b71;
}

.cx-post-menu {
  margin-left: auto;
}

/* =========================================================
   RIGHT SIDEBAR
========================================================= */

.right-sidebar {
  display: grid;
  gap: 16px;
}

.right-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: white;
  box-shadow: var(--shadow);
}

.right-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.right-card-heading h3 {
  font-family: var(--heading);
  font-size: 14px;
}

.right-card-heading svg {
  color: var(--purple);
}

.right-card p {
  color: var(--muted);
  line-height: 1.7;
  font-size: 12px;
  margin-bottom: 13px;
}

.trending-item {
  padding: 11px 0;
  border-top: 1px solid var(--border);
}

.trending-item strong,
.trending-item small {
  display: block;
}

.trending-item strong {
  color: var(--purple);
}

.trending-item small {
  color: var(--muted);
  margin-top: 4px;
  font-size: 11px;
}

.global-card {
  padding: 20px;
  border-radius: 17px;

  background: linear-gradient(145deg, #201b43, #5635d9);
  color: white;
}

.global-card > span {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.3px;
  color: #c9bbff;
}

.global-card h2 {
  font-family: var(--heading);
  font-size: 19px;
  line-height: 1.35;
  margin: 14px 0;
}

.global-card p {
  color: #d8d3ef;
  line-height: 1.6;
  font-size: 12px;
}

.global-card button {
  margin-top: 16px;
  padding: 10px 13px;

  border: 0;
  border-radius: 9px;

  background: white;
  color: var(--purple-dark);
  font-weight: 800;
}

/* =========================================================
   DYNAMIC PILLAR PAGES
========================================================= */

.cx-feature-page {
  min-height: 70vh;
}

.cx-feature-heading {
  min-height: 180px;
  padding: 30px;
  border-radius: 20px;

  background: linear-gradient(120deg, #17152e, #5635d9);
  color: white;
}

.cx-feature-heading h1 {
  font-family: var(--heading);
  font-size: 30px;
  margin: 12px 0;
}

.cx-feature-heading p {
  color: #ded8ff;
  line-height: 1.7;
}

.cx-feature-card,
.cx-feature-placeholder {
  padding: 20px;
  margin-top: 16px;

  border: 1px solid var(--border);
  border-radius: 16px;
  background: white;
  box-shadow: var(--shadow);
}

.cx-feature-card h3 {
  margin-bottom: 9px;
  font-family: var(--heading);
}

.cx-feature-card p {
  line-height: 1.7;
  color: #626075;
  overflow-wrap: anywhere;
}

.cx-feature-card small {
  display: block;
  margin-top: 12px;
  color: var(--muted);
}

/* =========================================================
   SHARED BUTTON SYSTEM
========================================================= */

.cx-button,
.cx-btn,
.cx-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 40px;
  padding: 10px 15px;

  border: 0;
  border-radius: 10px;

  background: var(--purple);
  color: white;

  font-weight: 800;
  transition: .2s ease;
}

.cx-button:hover,
.cx-btn:hover,
.cx-primary-button:hover {
  background: var(--purple-dark);
  transform: translateY(-1px);
}

.cx-secondary-button {
  background: var(--lavender);
  color: var(--purple-dark);
}

.cx-secondary-button:hover {
  background: #e2dcff;
}

.cx-danger-button {
  background: #fff0f1;
  color: var(--red);
}

/* =========================================================
   FORMS AND INPUTS
========================================================= */

.cx-form,
.cx-dialog-content form {
  display: grid;
  gap: 12px;
}

.cx-form label,
.cx-dialog-content label {
  display: block;
  color: var(--navy);
  font-weight: 700;
  font-size: 12px;
}

.cx-form input,
.cx-form textarea,
.cx-form select,
.cx-dialog-content input,
.cx-dialog-content textarea,
.cx-dialog-content select {
  width: 100%;
  min-height: 43px;
  padding: 12px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: white;
  color: var(--text);
}

.cx-form textarea,
.cx-dialog-content textarea {
  min-height: 110px;
  resize: vertical;
}

.cx-form input:focus,
.cx-form textarea:focus,
.cx-form select:focus,
.cx-dialog-content input:focus,
.cx-dialog-content textarea:focus {
  border-color: var(--purple);
  outline: none;
  box-shadow: 0 0 0 3px #6c4bf422;
}

.cx-dialog-content button[type="submit"] {
  padding: 13px;
  border: 0;
  border-radius: 10px;
  background: var(--purple);
  color: white;
  font-weight: 800;
}

.cx-dialog-content button[type="submit"]:hover {
  background: var(--purple-dark);
}

/* =========================================================
   GENERAL DIALOGS
========================================================= */

#cxGeneralDialog,
#chipexAuthModal {
  font-family: var(--font);
}

dialog {
  border: 0;
  border-radius: 20px;
  padding: 0;
  max-width: min(95vw, 520px);
  box-shadow: 0 25px 90px #100d2c40;
}

dialog::backdrop {
  background: #100d2c99;
  backdrop-filter: blur(4px);
}

.cx-dialog-content {
  padding: 25px;
}

/* =========================================================
   AUTHENTICATION MODAL
========================================================= */

#chipexAuthModal {
  position: fixed;
  inset: 0;
  z-index: 5000;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 18px;
  background: #100d2c99;
  backdrop-filter: blur(6px);
}

#chipexAuthModal.open,
#chipexAuthModal.active {
  display: flex;
}

.chipex-auth-box,
.auth-box,
.auth-modal-content {
  width: min(100%, 450px);
  padding: 30px;

  background: white;
  border-radius: 22px;

  box-shadow: 0 25px 90px #100d2c40;
}

.chipex-auth-box h2,
.auth-box h2,
.auth-modal-content h2 {
  font-family: var(--heading);
  color: var(--navy);
  font-size: 25px;
  margin-bottom: 9px;
}

.chipex-auth-box p,
.auth-box p,
.auth-modal-content p {
  color: var(--muted);
  line-height: 1.6;
}

.chipex-auth-box input,
.auth-box input,
.auth-modal-content input {
  width: 100%;
  padding: 13px;
  margin-top: 12px;

  border: 1px solid var(--border);
  border-radius: 10px;
}

.chipex-auth-box button,
.auth-box button,
.auth-modal-content button {
  min-height: 43px;
  border-radius: 10px;
}

/* =========================================================
   NOTIFICATION BADGE SUPPORT
========================================================= */

.notification-page {
  max-width: 900px;
  margin: 0 auto;
}

.notification-card {
  transition: .2s ease;
}

.notification-card:hover {
  box-shadow: var(--shadow);
}

/* =========================================================
   CONNECTIONS SUPPORT
========================================================= */

.cx-connection-card,
.connection-card,
.cx-person-card {
  padding: 17px;
  margin-bottom: 12px;

  display: flex;
  align-items: center;
  gap: 13px;

  background: white;
  border: 1px solid var(--border);
  border-radius: 15px;
}

.cx-connection-info,
.connection-info {
  flex: 1;
  min-width: 0;
}

.cx-connection-info strong,
.connection-info strong {
  display: block;
  color: var(--navy);
}

.cx-connection-info small,
.connection-info small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}

.cx-connection-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* =========================================================
   PLAY SUPPORT
========================================================= */

.cx-play-page {
  max-width: 1100px;
  margin: 0 auto;
}

.cx-play-card {
  padding: 18px;
  margin-bottom: 18px;

  background: white;
  border: 1px solid var(--border);
  border-radius: 17px;

  box-shadow: var(--shadow);
}

.cx-play-card iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
}

.cx-play-card h3 {
  font-family: var(--heading);
  margin: 13px 0 7px;
}

.cx-play-card p {
  color: #666276;
  line-height: 1.7;
}

.cx-play-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

/* =========================================================
   MOBILE NAVIGATION
========================================================= */

.mobile-bottom-nav {
  display: none;
}

#sidebarOverlay {
  display: none;
}

/* =========================================================
   LARGE TABLETS
========================================================= */

@media (max-width: 1250px) {
  .app-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .right-sidebar {
    display: none;
  }
}

/* =========================================================
   TABLETS
========================================================= */

@media (max-width: 900px) {
  .topbar {
    padding: 0 18px;
    gap: 12px;
  }

  .header-search {
    width: min(350px, 40vw);
  }

  .app-layout {
    width: 95%;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 15px;
  }

  .welcome-decoration {
    transform: scale(.8);
  }

  .shortcut-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {
  :root {
    --topbar-height: 62px;
  }

  body {
    padding-bottom: 78px;
  }

  .topbar {
    height: 62px;
    padding: 0 13px;
    gap: 7px;
  }

  .mobile-menu {
    display: grid;
    width: 35px;
    height: 35px;
    margin-right: 7px;
  }

  .brand {
    gap: 8px;
  }

  .brand-name {
    font-size: 18px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .header-search {
    display: none;
  }

  .header-actions {
    gap: 5px;
  }

  .header-icon {
    width: 33px;
    height: 33px;
  }

  .login-button {
    display: none;
  }

  .join-button {
    padding: 9px 11px;
    font-size: 11px;
  }

  .profile-button {
    display: none;
  }

  .app-layout {
    display: block;
    width: 100%;
    margin: 0;
    padding: 13px;
  }

  .sidebar {
    position: fixed;
    top: 62px;
    left: 0;
    bottom: 0;

    width: min(290px, 85vw);
    max-height: none;

    z-index: 2000;

    border-radius: 0 17px 0 0;

    transform: translateX(-110%);
    transition: transform .25s ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  #sidebarOverlay.active {
    display: block;
    position: fixed;
    inset: 62px 0 0;

    z-index: 1900;
    background: #0b0920a8;
  }

  .welcome-banner {
    min-height: 310px;
    padding: 25px 21px;
  }

  .welcome-content {
    max-width: 100%;
  }

  .welcome-content h1 {
    font-size: 30px;
  }

  .welcome-decoration {
    display: none;
  }

  .welcome-content p {
    font-size: 12px;
  }

  .welcome-actions {
    gap: 8px;
  }

  .primary-button,
  .secondary-button {
    padding: 11px 13px;
    font-size: 12px;
  }

  .shortcut-grid {
    gap: 9px;
  }

  .shortcut-card {
    min-height: 115px;
    padding: 12px;
  }

  .stories-placeholder {
    min-height: 90px;
  }

  .composer-actions {
    gap: 3px;
  }

  .composer-actions button {
    padding: 8px 5px;
    font-size: 11px;
  }

  .composer-actions button svg {
    width: 16px;
  }

  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    height: 68px;

    display: flex;
    align-items: center;
    justify-content: space-around;

    background: rgba(255,255,255,.97);
    border-top: 1px solid var(--border);

    z-index: 1500;
    backdrop-filter: blur(15px);
  }

  .mobile-bottom-nav button {
    flex: 1;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    border: 0;
    background: transparent;

    color: #9290a1;
    font-size: 10px;
    font-weight: 700;
  }

  .mobile-bottom-nav button.active {
    color: var(--purple);
  }

  .mobile-bottom-nav svg {
    width: 20px;
    height: 20px;
  }

  .mobile-create-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 11px;
    background: var(--purple);
    color: white;
  }

  .mobile-create-icon svg {
    width: 21px;
  }

  .section-heading h2 {
    font-size: 18px;
  }

  .cx-feature-heading {
    padding: 23px;
  }

  .cx-feature-heading h1 {
    font-size: 25px;
  }

  .cx-post,
  .post-card,
  .feed-post {
    padding: 14px;
  }

  .cx-connection-card,
  .connection-card {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #chipexAuthModal {
    padding: 12px;
  }

  .chipex-auth-box,
  .auth-box,
  .auth-modal-content {
    padding: 23px;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {
  .brand-name {
    font-size: 16px;
  }

  .join-button {
    padding: 8px;
    font-size: 10px;
  }

  .welcome-content h1 {
    font-size: 26px;
  }

  .shortcut-card strong {
    font-size: 12px;
  }

  .composer-actions span {
    font-size: 10px;
  }
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}