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

:root {
  --app-bg: #f0f2f5;
  --app-surface: #e4e6eb;
  --app-surface-muted: #ffffff;
  --app-surface-strong: #f3f4f6;
  --app-text: #0f0f0f;
  --app-text-secondary: #6e6e6e;
  --app-separator: #d6d9df;
  --ribyl-font: ui-rounded, "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ribyl-type-1: 20px;
  --ribyl-type-2: 18px;
  --ribyl-type-3: 16px;
  --ribyl-type-4: 14px;
  --ribyl-type-5: 12px;
  --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;
}

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;
}

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

html,
body,
button,
input,
textarea,
select {
  font-family: var(--ribyl-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

button,
input,
textarea,
select {
  font-size: var(--ribyl-type-3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.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);
}

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

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

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

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

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

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

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

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

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

.ribyl-type-5 {
  font-size: var(--ribyl-type-5) !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: 14px;
  background: var(--app-surface) !important;
}

.ribyl-search-shell input {
  min-width: 0;
}

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

.ribyl-dark-search-shell input {
  min-width: 0;
}

.ribyl-grouped-list {
  overflow: hidden;
  border-radius: var(--ribyl-grouped-radius);
  background: var(--app-surface-muted);
}

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

.ribyl-dark-grouped-list {
  overflow: hidden;
  border-radius: var(--ribyl-grouped-radius);
  background: #191919;
}

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

.ribyl-chat-grouped-list {
  overflow: hidden;
  border-radius: var(--ribyl-grouped-radius);
  background: #191919;
}

.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-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: #222222;
}

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

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

.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(--ribyl-type-5);
  font-weight: 700;
  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);
  }
}

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

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

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

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

[class*="text-[19px]"],
[class*="text-[20px]"],
[class*="text-[21px]"],
[class*="text-[22px]"],
[class*="text-[23px]"],
[class*="text-[24px]"],
[class*="text-[25px]"],
[class*="text-[26px]"] {
  font-size: var(--ribyl-type-1) !important;
  line-height: 1.15 !important;
  font-weight: 600 !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: #191919 transparent;
  scrollbar-width: thin;
}

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

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

.emoji-scroll::-webkit-scrollbar-thumb {
  background: #191919;
  border-radius: 9999px;
}

.typing-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #6E6E6E;
  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;
}