/* Shared, non-layout styling for website + PWA. */

:root {
  --app-bg: #f1f2f5;
  --app-surface: #e4e6eb;
  --app-surface-muted: #ffffff;
  --app-surface-strong: #f3f4f6;
  --app-text: #0f0f0f;
  --app-text-secondary: #6e6e6e;
  --app-separator: #d6d9df;
  --app-border: #d6d9df;
  --font-app: ui-rounded, "SF Pro Rounded", "SF Rounded", system-ui, sans-serif;
  --text-hero-size: 28px;
  --text-hero-weight: 600;
  --text-title-size: 24px;
  --text-title-weight: 600;
  --text-1-size: 20px;
  --text-1-weight: 600;
  --text-2-size: 18px;
  --text-2-weight: 400;
  --text-3-size: 16px;
  --text-3-weight: 400;
  --text-4-size: 14px;
  --text-4-weight: 400;
  --text-5-size: 12px;
  --text-5-weight: 400;
  --text-meta-size: 12px;
  --text-meta-weight: 400;
  --text-micro-size: 11px;
  --text-micro-weight: 400;
  --text-nav-size: 15px;
  --text-nav-weight: 500;
  --text-button-size: 15px;
  --text-button-weight: 500;
  --text-tab-size: 14px;
  --text-tab-weight: 500;
  --text-caption-size: 13px;
  --text-caption-weight: 400;
  --text-read-receipt-size: 12px;
  --text-read-receipt-weight: 400;
  --text-timestamp-size: 12px;
  --text-timestamp-weight: 400;
  --text-input-size: 15px;
  --text-input-weight: 400;
  --text-placeholder-size: 15px;
  --text-placeholder-weight: 400;
  --text-label-size: 13px;
  --text-label-weight: 500;
  --text-badge-size: 11px;
  --text-badge-weight: 600;
  --icon-size: 20px;
  --icon-weight: 300;
  --chevron-size: 14px;
  --chevron-weight: 400;
  --ribyl-font: var(--font-app);
  --ribyl-type-1: var(--text-1-size);
  --ribyl-type-2: var(--text-2-size);
  --ribyl-type-3: var(--text-3-size);
  --ribyl-type-4: var(--text-4-size);
  --ribyl-type-5: var(--text-5-size);
  --ribyl-radius-card-mobile: 28px;
  --ribyl-radius-card-desktop: 25px;
  --color-accent: #7F8CFF;
  --app-accent: #7F8CFF;
  --color-accent-rgb: 127 140 255;
  --color-accent-soft: rgba(127, 140, 255, 0.14);
  --color-accent-soft-strong: rgba(127, 140, 255, 0.24);
  --ribyl-search-h-mobile: 56px;
  --ribyl-search-h-desktop: 46px;
  --ribyl-grouped-radius: 30px;
}

@media (min-width: 1024px) {
  :root {
    --text-1-size: 22px;
    --text-2-size: 20px;
    --text-3-size: 18px;
    --text-4-size: 16px;
    --text-5-size: 14px;
    --text-meta-size: 13px;
    --text-micro-size: 12px;
    --text-nav-size: 16px;
    --text-button-size: 16px;
    --text-tab-size: 15px;
    --text-caption-size: 14px;
    --text-read-receipt-size: 13px;
    --text-timestamp-size: 13px;
    --text-input-size: 16px;
    --text-placeholder-size: 16px;
    --text-label-size: 14px;
    --text-badge-size: 12px;
    --icon-size: 22px;
    --chevron-size: 15px;
  }
}


html.dark {
  --app-bg: #0f0f0f;
  --app-surface: #141414;
  --app-surface-muted: #141414;
  --app-surface-strong: #191919;
  --app-text: #ffffff;
  --app-text-secondary: #8a8a8a;
  --app-separator: #262626;
  --app-border: #191919;
}

@media (min-width: 768px) {
  .ribyl-desktop-panel-border {
    border: 1px solid var(--app-border);
  }
}

#root {
  position: relative;
  width: 100%;
}

html,
body,
#root {
  font-family: var(--font-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
body * {
  font-family: var(--font-app);
}

html,
body {
  font-size: var(--text-3-size);
  line-height: 1.35;
  letter-spacing: -0.01em;
  background: var(--app-bg);
  color: var(--app-text);
}

html.ribyl-onboarding-active,
body.ribyl-onboarding-active,
html.ribyl-onboarding-active #root,
body.ribyl-onboarding-active #root {
  background: var(--app-bg) !important;
  background-color: var(--app-bg) !important;
}

button,
input,
textarea,
select {
  font-family: inherit;
  font-size: var(--text-input-size);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

input::placeholder,
textarea::placeholder,
select::placeholder,
[contenteditable="true"]::placeholder {
  font-family: inherit;
  font-size: var(--text-placeholder-size);
  font-weight: var(--text-placeholder-weight);
}

.ribyl-composer-textarea {
  font-family: inherit;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  caret-color: var(--color-accent);
}

.ribyl-composer-textarea::placeholder {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  opacity: 1;
}

.ribyl-composer-textarea-mobile {
  font-size: 16px !important;
  line-height: 1.4 !important;
}

.p-2,
.p-2\.5,
.p-3,
.p-4,
.p-5,
.p-6,
.p-8 {
  padding: 0.75rem !important;
}

.px-2,
.px-3,
.px-4,
.px-5,
.px-6,
.px-8 {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.py-1,
.py-2,
.py-2\.5,
.py-3,
.py-4,
.py-5,
.py-6,
.py-8 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.pt-1,
.pt-2,
.pt-2\.5,
.pt-3,
.pt-4,
.pt-5,
.pt-6,
.pt-8 {
  padding-top: 0.75rem !important;
}

.pb-1,
.pb-2,
.pb-2\.5,
.pb-3,
.pb-4,
.pb-5,
.pb-6,
.pb-8 {
  padding-bottom: 0.75rem !important;
}

.pb-2\.5 {
  padding-bottom: 0 !important;
}

.pl-1,
.pl-2,
.pl-3,
.pl-4,
.pl-5,
.pl-6,
.pl-8 {
  padding-left: 0.75rem !important;
}

.pr-1,
.pr-2,
.pr-3,
.pr-4,
.pr-5,
.pr-6,
.pr-8 {
  padding-right: 0.75rem !important;
}

.mb-1,
.mb-1\.5,
.mb-2,
.mb-2\.5,
.mb-3,
.mb-4,
.mb-5,
.mb-6 {
  margin-bottom: 0.75rem !important;
}

.mt-1,
.mt-1\.5,
.mt-2,
.mt-2\.5,
.mt-3,
.mt-4,
.mt-5,
.mt-6 {
  margin-top: 0.75rem !important;
}

.w-6 {
  width: 0.75rem !important;
}

@media (min-width: 768px) {
  .md\:p-2,
  .md\:p-2\.5,
  .md\:p-3,
  .md\:p-4,
  .md\:p-5,
  .md\:p-6,
  .md\:p-8 {
    padding: 0.75rem !important;
  }

  .md\:px-2,
  .md\:px-3,
  .md\:px-4,
  .md\:px-5,
  .md\:px-6,
  .md\:px-8 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .md\:py-1,
  .md\:py-2,
  .md\:py-2\.5,
  .md\:py-3,
  .md\:py-4,
  .md\:py-5,
  .md\:py-6,
  .md\:py-8 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  .md\:pt-1,
  .md\:pt-2,
  .md\:pt-2\.5,
  .md\:pt-3,
  .md\:pt-4,
  .md\:pt-5,
  .md\:pt-6,
  .md\:pt-8 {
    padding-top: 0.75rem !important;
  }

  .md\:pb-1,
  .md\:pb-2,
  .md\:pb-2\.5,
  .md\:pb-3,
  .md\:pb-4,
  .md\:pb-5,
  .md\:pb-6,
  .md\:pb-8 {
    padding-bottom: 0.75rem !important;
  }

  .md\:pb-2\.5 {
    padding-bottom: 0 !important;
  }

  .md\:pl-1,
  .md\:pl-2,
  .md\:pl-3,
  .md\:pl-4,
  .md\:pl-5,
  .md\:pl-6,
  .md\:pl-8 {
    padding-left: 0.75rem !important;
  }

  .md\:pr-1,
  .md\:pr-2,
  .md\:pr-3,
  .md\:pr-4,
  .md\:pr-5,
  .md\:pr-6,
  .md\:pr-8 {
    padding-right: 0.75rem !important;
  }

  .md\:mb-1,
  .md\:mb-1\.5,
  .md\:mb-2,
  .md\:mb-2\.5,
  .md\:mb-3,
  .md\:mb-4,
  .md\:mb-5,
  .md\:mb-6 {
    margin-bottom: 0.75rem !important;
  }

  .md\:mt-1,
  .md\:mt-1\.5,
  .md\:mt-2,
  .md\:mt-2\.5,
  .md\:mt-3,
  .md\:mt-4,
  .md\:mt-5,
  .md\:mt-6 {
    margin-top: 0.75rem !important;
  }
}

@media (min-width: 1024px) {
  .lg\:p-2,
  .lg\:p-2\.5,
  .lg\:p-3,
  .lg\:p-4,
  .lg\:p-5,
  .lg\:p-6,
  .lg\:p-8 {
    padding: 0.75rem !important;
  }

  .lg\:px-2,
  .lg\:px-3,
  .lg\:px-4,
  .lg\:px-5,
  .lg\:px-6,
  .lg\:px-8 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .lg\:py-1,
  .lg\:py-2,
  .lg\:py-2\.5,
  .lg\:py-3,
  .lg\:py-4,
  .lg\:py-5,
  .lg\:py-6,
  .lg\:py-8 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  .lg\:pt-1,
  .lg\:pt-2,
  .lg\:pt-2\.5,
  .lg\:pt-3,
  .lg\:pt-4,
  .lg\:pt-5,
  .lg\:pt-6,
  .lg\:pt-8 {
    padding-top: 0.75rem !important;
  }

  .lg\:pb-1,
  .lg\:pb-2,
  .lg\:pb-2\.5,
  .lg\:pb-3,
  .lg\:pb-4,
  .lg\:pb-5,
  .lg\:pb-6,
  .lg\:pb-8 {
    padding-bottom: 0.75rem !important;
  }

  .lg\:pb-2\.5 {
    padding-bottom: 0 !important;
  }

  .lg\:pl-1,
  .lg\:pl-2,
  .lg\:pl-3,
  .lg\:pl-4,
  .lg\:pl-5,
  .lg\:pl-6,
  .lg\:pl-8 {
    padding-left: 0.75rem !important;
  }

  .lg\:pr-1,
  .lg\:pr-2,
  .lg\:pr-3,
  .lg\:pr-4,
  .lg\:pr-5,
  .lg\:pr-6,
  .lg\:pr-8 {
    padding-right: 0.75rem !important;
  }

  .lg\:mb-1,
  .lg\:mb-1\.5,
  .lg\:mb-2,
  .lg\:mb-2\.5,
  .lg\:mb-3,
  .lg\:mb-4,
  .lg\:mb-5,
  .lg\:mb-6 {
    margin-bottom: 0.75rem !important;
  }

  .lg\:mt-1,
  .lg\:mt-1\.5,
  .lg\:mt-2,
  .lg\:mt-2\.5,
  .lg\:mt-3,
  .lg\:mt-4,
  .lg\:mt-5,
  .lg\:mt-6 {
    margin-top: 0.75rem !important;
  }
}

@media not all and (min-width: 768px) {
  .pt-\[calc\(env\(safe-area-inset-top\)\+8px\)\] {
    padding-top: calc(env(safe-area-inset-top) + 0.75rem) !important;
  }

  .pt-\[2px\] {
    padding-top: 0.75rem !important;
  }

  .mx-auto {
    margin-left: 0.4rem !important;
    margin-right: 0.4rem !important;
  }

  .max-md\:p-2 {
    padding: 0.75rem !important;
  }

  .max-md\:h-16 {
    height: 3rem !important;
  }
}

.ribyl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}

.ribyl-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
  vertical-align: middle;
}

.ribyl-inline-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

::selection {
  background: var(--color-accent-soft-strong);
}

.type-hero,
.type-title,
.type-1,
.type-2,
.type-3,
.type-4,
.type-5,
.type-meta,
.type-micro,
.type-nav,
.type-button,
.type-tab,
.type-caption,
.type-read-receipt,
.type-timestamp,
.type-input,
.type-placeholder,
.type-label,
.type-badge {
  font-family: var(--font-app) !important;
  letter-spacing: -0.01em;
}

.type-hero {
  font-size: var(--text-hero-size) !important;
  font-weight: var(--text-hero-weight) !important;
  line-height: 1.05 !important;
}

.type-title {
  font-size: var(--text-title-size) !important;
  font-weight: var(--text-title-weight) !important;
  line-height: 1.1 !important;
}

.type-1 {
  font-size: var(--text-1-size) !important;
  font-weight: var(--text-1-weight) !important;
  line-height: 1.15 !important;
}

.type-2 {
  font-size: var(--text-2-size) !important;
  font-weight: var(--text-2-weight) !important;
  line-height: 1.25 !important;
}

.type-3 {
  font-size: var(--text-3-size) !important;
  font-weight: var(--text-3-weight) !important;
  line-height: 1.35 !important;
}

.type-4 {
  font-size: var(--text-4-size) !important;
  font-weight: var(--text-4-weight) !important;
  line-height: 1.35 !important;
}

.type-5,
.type-meta {
  font-size: var(--text-meta-size) !important;
  font-weight: var(--text-meta-weight) !important;
  line-height: 1.35 !important;
}

.type-micro {
  font-size: var(--text-micro-size) !important;
  font-weight: var(--text-micro-weight) !important;
  line-height: 1.35 !important;
}

.type-nav {
  font-size: var(--text-nav-size) !important;
  font-weight: var(--text-nav-weight) !important;
  line-height: 1.2 !important;
}

.type-button {
  font-size: var(--text-button-size) !important;
  font-weight: var(--text-button-weight) !important;
  line-height: 1.2 !important;
}

.type-tab {
  font-size: var(--text-tab-size) !important;
  font-weight: var(--text-tab-weight) !important;
  line-height: 1.2 !important;
}

.type-caption {
  font-size: var(--text-caption-size) !important;
  font-weight: var(--text-caption-weight) !important;
  line-height: 1.35 !important;
}

.type-read-receipt {
  font-size: var(--text-read-receipt-size) !important;
  font-weight: var(--text-read-receipt-weight) !important;
  line-height: 1.2 !important;
}

.type-timestamp {
  font-size: var(--text-timestamp-size) !important;
  font-weight: var(--text-timestamp-weight) !important;
  line-height: 1.2 !important;
}

.type-input,
.type-placeholder {
  font-size: var(--text-input-size) !important;
  font-weight: var(--text-input-weight) !important;
  line-height: 1.2 !important;
}

.type-label {
  font-size: var(--text-label-size) !important;
  font-weight: var(--text-label-weight) !important;
  line-height: 1.2 !important;
}

.type-badge {
  font-size: var(--text-badge-size) !important;
  font-weight: var(--text-badge-weight) !important;
  line-height: 1.2 !important;
}

.text-xs {
  font-size: var(--text-5-size) !important;
  line-height: 1.35 !important;
  font-weight: var(--text-5-weight) !important;
}

.text-sm {
  font-size: var(--text-4-size) !important;
  line-height: 1.35 !important;
  font-weight: var(--text-4-weight) !important;
}

.text-base {
  font-size: var(--text-3-size) !important;
  line-height: 1.35 !important;
  font-weight: var(--text-3-weight) !important;
}

.text-lg {
  font-size: var(--text-2-size) !important;
  line-height: 1.3 !important;
  font-weight: var(--text-2-weight) !important;
}

.text-xl {
  font-size: var(--text-1-size) !important;
  line-height: 1.15 !important;
  font-weight: var(--text-1-weight) !important;
}

.text-2xl {
  font-size: var(--text-title-size) !important;
  line-height: 1.1 !important;
  font-weight: var(--text-title-weight) !important;
}

.text-3xl {
  font-size: var(--text-hero-size) !important;
  line-height: 1.05 !important;
  font-weight: var(--text-hero-weight) !important;
}

h1,
.ribyl-type-1 {
  font-size: var(--text-title-size) !important;
  line-height: 1.1 !important;
  font-weight: var(--text-title-weight) !important;
}

h2,
.ribyl-type-2 {
  font-size: var(--text-1-size) !important;
  line-height: 1.15 !important;
  font-weight: var(--text-1-weight) !important;
}

h3,
h4,
h5,
h6,
.ribyl-type-3 {
  font-size: var(--text-3-size) !important;
  line-height: 1.35 !important;
}

p,
label,
small,
.ribyl-type-4 {
  font-size: var(--text-4-size) !important;
  line-height: 1.35 !important;
}

.ribyl-type-5 {
  font-size: var(--text-5-size) !important;
  line-height: 1.35 !important;
}

.ribyl-search-shell {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--ribyl-search-h-mobile);
  border-radius: 28px;
  padding-inline: 18px;
  background: var(--app-surface) !important;
  box-sizing: border-box;
}

.ribyl-search-shell input {
  min-width: 0;
  padding-inline-end: 2px;
}

.ribyl-discover-search-shell {
  background: var(--app-surface) !important;
}

.dark .ribyl-discover-search-shell {
  background: #191919 !important;
}

.ribyl-dark-search-shell {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--ribyl-search-h-mobile);
  border-radius: 28px;
  padding-inline: 18px;
  background: var(--app-surface) !important;
  box-sizing: border-box;
}

.ribyl-dark-search-shell input {
  min-width: 0;
  padding-inline-end: 2px;
}

.dark .ribyl-dark-search-shell {
  background: #191919 !important;
}

.ribyl-mobile-nav-button {
  display: flex;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #e5e6eb;
  color: #0F0F0F;
  transition: background-color 160ms ease, color 160ms ease;
}

.ribyl-mobile-nav-button .ribyl-icon {
  width: 22px !important;
  height: 22px !important;
}

.ribyl-mobile-nav-button:hover {
  background: #f3f4f6;
}

.dark .ribyl-mobile-nav-button {
  background: #191919;
  color: #FFFFFF;
}

.dark .ribyl-mobile-nav-button:hover {
  background: #242424;
}

.ribyl-mobile-nav-spacer {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.ribyl-action-button {
  display: inline-flex;
  min-height: 48px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 16px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: transform 140ms ease, background-color 160ms ease, color 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
}

.ribyl-action-button > svg,
.ribyl-action-icon-button > svg {
  width: 22px !important;
  height: 22px !important;
}

.ribyl-action-button:active {
  transform: scale(0.985);
}

.ribyl-action-icon-button {
  display: inline-flex;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  transition: transform 140ms ease, background-color 160ms ease, color 160ms ease, opacity 160ms ease, box-shadow 160ms ease;
}

.ribyl-action-icon-button:active {
  transform: scale(0.985);
}

@media (max-width: 1023px) {
  .ribyl-mobile-nav-button .ribyl-icon {
    width: 26px !important;
    height: 26px !important;
  }

  .ribyl-mobile-nav-button > svg {
    width: 26px !important;
    height: 26px !important;
  }
}

.story-surface-mask {
  isolation: isolate;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  backface-visibility: hidden;
}

.ribyl-grouped-list {
  --ribyl-row-inline-inset: 18px;
  overflow: hidden;
  border-radius: var(--ribyl-grouped-radius);
  background: var(--app-surface-muted);
  padding: 6px;
}

.dark .ribyl-grouped-list {
  background: var(--app-surface);
}

.ribyl-dark-grouped-list {
  --ribyl-row-inline-inset: 18px;
  overflow: hidden;
  border-radius: var(--ribyl-grouped-radius);
  background: var(--app-surface);
  padding: 6px;
}

.dark .ribyl-dark-grouped-list {
  background: #191919;
}

.ribyl-chat-grouped-list {
  --ribyl-row-inline-inset: 18px;
  overflow: hidden;
  border-radius: var(--ribyl-grouped-radius);
  background: var(--app-surface);
  padding: 6px;
}

.dark .ribyl-chat-grouped-list {
  background: #191919;
}

.ribyl-grouped-row {
  position: relative;
}

.ribyl-dark-grouped-row {
  position: relative;
}

.ribyl-chat-grouped-row {
  position: relative;
}

.ribyl-grouped-row,
.ribyl-dark-grouped-row,
.ribyl-chat-grouped-row {
  border-radius: 22px;
  padding: 10px !important;
}

.ribyl-settings-group {
  padding: 6px;
}

.ribyl-settings-row {
  border-radius: 22px;
  padding: 10px !important;
}

.ribyl-grouped-row > :last-child,
.ribyl-dark-grouped-row > :last-child,
.ribyl-chat-grouped-row > :last-child {
  min-width: 0;
}

.ribyl-text-only-row {
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.ribyl-no-dividers > .ribyl-grouped-row + .ribyl-grouped-row::before,
.ribyl-no-dividers > .ribyl-dark-grouped-row + .ribyl-dark-grouped-row::before,
.ribyl-no-dividers > .ribyl-chat-grouped-row + .ribyl-chat-grouped-row::before {
  display: none;
}

.ribyl-grouped-row + .ribyl-grouped-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.1rem;
  right: 1.1rem;
  height: 1px;
  background: var(--app-separator);
}

.dark .ribyl-grouped-row + .ribyl-grouped-row::before {
  background: var(--app-separator);
}

.ribyl-dark-grouped-row + .ribyl-dark-grouped-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.1rem;
  right: 1.1rem;
  height: 1px;
  background: var(--app-separator);
}

.dark .ribyl-dark-grouped-row + .ribyl-dark-grouped-row::before {
  background: var(--app-separator);
}

.ribyl-chat-grouped-row + .ribyl-chat-grouped-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.1rem;
  right: 1.1rem;
  height: 1px;
  background: var(--app-separator);
}

.dark .ribyl-chat-grouped-row + .ribyl-chat-grouped-row::before {
  background: var(--app-separator);
}

.ribyl-grouped-row:hover {
  background: var(--app-surface-strong);
}

.dark .ribyl-grouped-row:hover {
  background: var(--app-surface-strong);
}

.ribyl-dark-grouped-row:hover {
  background: var(--app-surface-strong);
}

.dark .ribyl-dark-grouped-row:hover {
  background: #222222;
}

.ribyl-chat-grouped-row:hover {
  background: var(--app-surface-strong);
}

.dark .ribyl-chat-grouped-row:hover {
  background: #222222;
}

.ribyl-list-section-title {
  padding-inline: 0.75rem;
  margin-bottom: 0.55rem;
  color: #6e6e6e;
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


@media (min-width: 768px) {
  .ribyl-search-shell {
    min-height: var(--ribyl-search-h-desktop);
    padding-inline: 16px;
  }

  .ribyl-dark-search-shell {
    min-height: var(--ribyl-search-h-desktop);
    padding-inline: 16px;
  }

  .ribyl-grouped-list,
  .ribyl-dark-grouped-list,
  .ribyl-chat-grouped-list {
    --ribyl-row-inline-inset: 16px;
  }
}

.ribyl-no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ribyl-no-scrollbar::-webkit-scrollbar {
  display: none;
}

[class*="text-[11px]"] {
  font-size: var(--text-micro-size) !important;
  line-height: 1.35 !important;
}

[class*="text-[12px]"],
[class*="text-[13px]"] {
  font-size: var(--text-5-size) !important;
  line-height: 1.35 !important;
}

[class*="text-[14px]"],
[class*="text-[15px]"] {
  font-size: var(--text-4-size) !important;
  line-height: 1.35 !important;
}

[class*="text-[16px]"],
[class*="text-[17px]"] {
  font-size: var(--text-3-size) !important;
  line-height: 1.35 !important;
}

[class*="text-[18px]"],
[class*="text-[19px]"] {
  font-size: var(--text-2-size) !important;
  line-height: 1.3 !important;
}

[class*="text-[20px]"],
[class*="text-[21px]"],
[class*="text-[22px]"] {
  font-size: var(--text-1-size) !important;
  line-height: 1.15 !important;
}

[class*="text-[23px]"],
[class*="text-[24px]"] {
  font-size: var(--text-title-size) !important;
  line-height: 1.1 !important;
  font-weight: var(--text-title-weight) !important;
}

[class*="text-[25px]"],
[class*="text-[26px]"],
[class*="text-[27px]"],
[class*="text-[28px]"],
[class*="text-[29px]"],
[class*="text-[30px]"],
[class*="text-[31px]"],
[class*="text-[32px]"],
[class*="text-[33px]"],
[class*="text-[34px]"] {
  font-size: var(--text-hero-size) !important;
  line-height: 1.05 !important;
  font-weight: var(--text-hero-weight) !important;
}

.font-bold,
.font-semibold {
  font-weight: 600 !important;
}

.font-medium {
  font-weight: 500 !important;
}

.app-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.app-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.text-\[\#0F0F0F\],
.text-\[\#1A1A1A\] {
  color: var(--app-text) !important;
}

.text-\[\#6E6E6E\] {
  color: var(--app-text-secondary) !important;
}

.text-\[\#8269C7\] {
  color: var(--color-accent) !important;
}

.placeholder-\[\#6E6E6E\]::placeholder,
.placeholder-\[\#8A8A8A\]::placeholder {
  color: var(--app-text-secondary) !important;
  opacity: 1 !important;
}

.dark .dark\:text-\[\#FFFFFF\],
.dark .dark\:text-\[\#E6E6E6\] {
  color: var(--app-text) !important;
}

.dark .dark\:text-\[\#8A8A8A\] {
  color: var(--app-text-secondary) !important;
}

.dark .dark\:text-\[\#8269C7\] {
  color: var(--color-accent) !important;
}

.emoji-scroll {
  scrollbar-color: var(--app-border) transparent;
  scrollbar-width: thin;
}

.emoji-scroll::-webkit-scrollbar {
  height: 4px;
}

.emoji-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.emoji-scroll::-webkit-scrollbar-thumb {
  background: var(--app-border);
  border-radius: 9999px;
}

.typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-accent);
  display: inline-block;
  animation: typing-pulse 1.2s ease-in-out infinite;
}

.typing-dot-2 {
  animation-delay: 0.2s;
}

.typing-dot-3 {
  animation-delay: 0.4s;
}

@keyframes typing-pulse {
  0% {
    transform: translateY(0);
    background: #6E6E6E;
  }
  50% {
    transform: translateY(-4px);
    background: #8269C7;
  }
  100% {
    transform: translateY(0);
    background: #6E6E6E;
  }
}

/* Remove all drop/box shadows across the app. */
[class*="shadow"] {
  box-shadow: none !important;
}

[class*="drop-shadow"] {
  filter: none !important;
}