@import "tailwindcss";
@import "@radix-ui/themes/styles.css";
@import "tw-animate-css";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
	--breakpoint-desktop-3xl : 1920px;
	--breakpoint-offer-wrap : 1890px;
	--breakpoint-desktop-2-3xl : 1664px;
	--breakpoint-desktop-2xl : 1610px;
	--breakpoint-desktop-xl : 1450px;
	--breakpoint-desktop-l : 1376px;
	--breakpoint-desktop-s : 1290px;
	--breakpoint-desktop-xs : 1211px;
	--breakpoint-desktop-xsx : 1110px;
	--breakpoint-laptop-xl : 1034px; 
	--breakpoint-laptop-sl : 969px;
	--breakpoint-laptop-l : 965px;
	--breakpoint-laptop-s : 911px;
	--breakpoint-tablet-xl : 810px;
	--breakpoint-tablet-lg : 797px;
	--breakpoint-tablet-l : 774px;
	--breakpoint-tablet-xs : 734px;
	--breakpoint-Wide-mobile-4xl : 645px;
	--breakpoint-Wide-mobile-4-5xl : 626px;
	--breakpoint-Wide-mobile-3xl : 605px;
	--breakpoint-Wide-mobile-2xl : 573px;
	--breakpoint-Wide-mobile-xl : 545px ;
	--breakpoint-Wide-mobile-l : 539px;
	--breakpoint-Wide-mobile-xss : 526px;
	--breakpoint-Wide-mobile-s : 485px;
	--breakpoint-Wide-mobile-xsss : 466px;
	--breakpoint-Wide-mobile-sm : 430px;
	--breakpoint-Wide-mobile-xs : 400px;
	--breakpoint-mobile-xl : 365px;
	--breakpoint-mobile-xlk : 381px;
	--breakpoint-mobile-l : 335px;
	--breakpoint-mobile-s : 245px;


}
/* مخفی کردن اسکرول‌بار در همه مرورگرها */
.no-scrollbar {
	-ms-overflow-style: none !important;  /* IE و Edge */
	scrollbar-width: none !important;     /* Firefox */
  }

  .no-scrollbar::-webkit-scrollbar {
	display: none !important; /* Chrome, Safari, Opera */
  }

/* globals.css */
.input-no-spinner {
	-moz-appearance: textfield; /* Firefox */
	appearance: none;            /* تمامی مرورگرها */
  }

  .input-no-spinner::-webkit-outer-spin-button,
  .input-no-spinner::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
  }

  @theme inline {
	--radius-sm : calc(var(--radius) - 4px);
	--radius-md : calc(var(--radius) - 2px);
	--radius-lg : var(--radius);
	--radius-xl : calc(var(--radius) + 4px);
	--color-background : var(--background);
	--color-foreground : var(--foreground);
	--color-card : var(--card);
	--color-card-foreground : var(--card-foreground);
	--color-popover : var(--popover);
	--color-popover-foreground : var(--popover-foreground);
	--color-primary : var(--primary);
	--color-primary-foreground : var(--primary-foreground);
	--color-secondary : var(--secondary);
	--color-secondary-foreground : var(--secondary-foreground);
	--color-muted : var(--muted);
	--color-muted-foreground : var(--muted-foreground);
	--color-accent : var(--accent);
	--color-accent-foreground : var(--accent-foreground);
	--color-destructive : var(--destructive);
	--color-border : var(--border);
	--color-input : var(--input);
	--color-ring : var(--ring);
	--color-chart-1 : var(--chart-1);
	--color-chart-2 : var(--chart-2);
	--color-chart-3 : var(--chart-3);
	--color-chart-4 : var(--chart-4);
	--color-chart-5 : var(--chart-5);
	--color-sidebar : var(--sidebar);
	--color-sidebar-foreground : var(--sidebar-foreground);
	--color-sidebar-primary : var(--sidebar-primary);
	--color-sidebar-primary-foreground : var(--sidebar-primary-foreground);
	--color-sidebar-accent : var(--sidebar-accent);
	--color-sidebar-accent-foreground : var(--sidebar-accent-foreground);
	--color-sidebar-border : var(--sidebar-border);
	--color-sidebar-ring : var(--sidebar-ring);}

  :root {
	--input: oklch(0 0 0 / 100%);   /* مشکی کاملا */
	--border: oklch(0 0 0 / 50%);   /* خاکستری */
	--ring: oklch(0 0 0 / 70%);
	--radius : 0.625rem;
	--background : oklch(1 0 0);
	--foreground : oklch(0.145 0 0);
	--card : oklch(1 0 0);
	--card-foreground : oklch(0.145 0 0);
	--popover : oklch(1 0 0);
	--popover-foreground : oklch(0.145 0 0);
	--primary : oklch(0.205 0 0);
	--primary-foreground : oklch(0.985 0 0);
	--secondary : oklch(0.97 0 0);
	--secondary-foreground : oklch(0.205 0 0);
	--muted : oklch(0.97 0 0);
	--muted-foreground : oklch(0.556 0 0);
	--accent : oklch(0.97 0 0);
	--accent-foreground : oklch(0.205 0 0);
	--destructive : oklch(0.577 0.245 27.325);
	--border : oklch(0.922 0 0);
	--input : oklch(0.922 0 0);
	--ring : oklch(0.708 0 0);
	--chart-1 : oklch(0.646 0.222 41.116);
	--chart-2 : oklch(0.6 0.118 184.704);
	--chart-3 : oklch(0.398 0.07 227.392);
	--chart-4 : oklch(0.828 0.189 84.429);
	--chart-5 : oklch(0.769 0.188 70.08);
	--sidebar : oklch(0.985 0 0);
	--sidebar-foreground : oklch(0.145 0 0);
	--sidebar-primary : oklch(0.205 0 0);
	--sidebar-primary-foreground : oklch(0.985 0 0);
	--sidebar-accent : oklch(0.97 0 0);
	--sidebar-accent-foreground : oklch(0.205 0 0);
	--sidebar-border : oklch(0.922 0 0);
	--sidebar-ring : oklch(0.708 0 0);}

  .dark {
	--input: oklch(1 0 0 / 100%);   /* سفید کامل */
	--border: oklch(1 0 0 / 50%);
	--ring: oklch(1 0 0 / 70%);
	--background : oklch(0.145 0 0);
	--foreground : oklch(0.985 0 0);
	--card : oklch(0.205 0 0);
	--card-foreground : oklch(0.985 0 0);
	--popover : oklch(0.205 0 0);
	--popover-foreground : oklch(0.985 0 0);
	--primary : oklch(0.922 0 0);
	--primary-foreground : oklch(0.205 0 0);
	--secondary : oklch(0.269 0 0);
	--secondary-foreground : oklch(0.985 0 0);
	--muted : oklch(0.269 0 0);
	--muted-foreground : oklch(0.708 0 0);
	--accent : oklch(0.269 0 0);
	--accent-foreground : oklch(0.985 0 0);
	--destructive : oklch(0.704 0.191 22.216);
	--border : oklch(1 0 0 / 10%);
	--input : oklch(1 0 0 / 15%);
	--ring : oklch(0.556 0 0);
	--chart-1 : oklch(0.488 0.243 264.376);
	--chart-2 : oklch(0.696 0.17 162.48);
	--chart-3 : oklch(0.769 0.188 70.08);
	--chart-4 : oklch(0.627 0.265 303.9);
	--chart-5 : oklch(0.645 0.246 16.439);
	--sidebar : oklch(0.205 0 0);
	--sidebar-foreground : oklch(0.985 0 0);
	--sidebar-primary : oklch(0.488 0.243 264.376);
	--sidebar-primary-foreground : oklch(0.985 0 0);
	--sidebar-accent : oklch(0.269 0 0);
	--sidebar-accent-foreground : oklch(0.985 0 0);
	--sidebar-border : oklch(1 0 0 / 10%);
	--sidebar-ring : oklch(0.556 0 0);}

  @layer base {
  * {
    @apply border-border outline-ring/50;}
  body {
    @apply bg-background text-foreground;}}



html {
  scroll-behavior: smooth;
}
body {
  direction: rtl;
}
button,
button:focus,
textarea {
  outline: none;
}

input:focus,
button:focus,
select:focus {
  outline: none;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox  */
input[type="number"] {
  -moz-appearance: textfield;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("/images/icons/arrow-down.svg");
  background-size: 15px;
  background-repeat: no-repeat;
  background-position-x: 10px;
  background-position-y: 13px;
}

.dir-ltr {
  direction: ltr;
}

@media (min-width: 1024px) {
  .container {
    max-width: 992px;
  }
}

.auth-page .rmdp-input {
  border-radius: 1rem;
  margin-top: 8px;
  height: 36px;
  color: #111;
  width: 100%;
  padding-right: 48px;
}

.project-date-field .rmdp-container,
.project-date-field .rmdp-input {
  width: 100% !important;
}

.project-date-field .rmdp-input {
  text-align: center !important;
  padding-left: 2.75rem !important;
  padding-right: 2.75rem !important;
}
.address-page .mapboxgl-map {
  max-height: 210px;
  height: 100%;
  width: 100% !important;
  max-width: 300px;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-top: 20px;
  margin-bottom: 20px;
}
.address-page .map-g {
  width: 100%;
  border-radius: 12px !important;
  margin-top: 12px;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
/* ─── iOS Spinner & unified loading ─── */
@keyframes ios-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.animate-ios-spin {
  animation: ios-spin 0.9s steps(12) infinite;
}

/* Legacy alias → use IOSSpinner component instead */
.custom-loader {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 0;
  background: conic-gradient(from 0deg, #007aff 0deg, transparent 60deg, transparent 300deg, #007aff 360deg);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: ios-spin 0.9s linear infinite;
}

/* ─── Glassmorphism utilities ─── */
.glass-panel {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.dark .glass-panel {
  background: rgba(28, 28, 30, 0.78);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.chat-header-glass {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.dark .chat-header-glass {
  background: rgba(28, 28, 30, 0.72);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.chat-header-status-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 9999px;
}
.chat-header-status-dot--online {
  background: #22c55e;
}
.chat-header-status-dot--offline {
  background: #9ca3af;
}
.dark .chat-header-status-dot--offline {
  background: #6b7280;
}

.chat-timer-glass {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: none;
  box-shadow: 0 2px 14px rgba(36, 140, 200, 0.12);
}
.dark .chat-timer-glass {
  background: rgba(24, 37, 51, 0.72);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}
.chat-timer-glass--active {
  background: rgba(42, 171, 238, 0.18);
  color: #248cc8;
  box-shadow: 0 2px 14px rgba(42, 171, 238, 0.2);
}
.dark .chat-timer-glass--active {
  background: rgba(42, 171, 238, 0.22);
  color: #2aabee;
}

.chat-timer-badge-glass {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}
.chat-bubble-out .chat-timer-badge-glass {
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
}
.chat-bubble-in .chat-timer-badge-glass {
  color: #248cc8;
}
.dark .chat-timer-badge-glass {
  background: rgba(255, 255, 255, 0.12);
}
.dark .chat-bubble-in .chat-timer-badge-glass {
  color: #2aabee;
}

.chat-message-highlight {
  animation: message-highlight-flash 1.6s ease-out;
  border-radius: 1rem;
}
@keyframes message-highlight-flash {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(42, 171, 238, 0);
  }
  25%,
  65% {
    box-shadow: 0 0 0 3px rgba(42, 171, 238, 0.55);
  }
}

.glass-chat-input {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: none;
  box-shadow: 0 4px 20px rgba(15, 45, 70, 0.08);
}
.dark .glass-chat-input {
  background: rgba(24, 37, 51, 0.78);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* ─── Gentle transitions ─── */
.gentle-transition {
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ─── Reels / post feed vertical scroll (Instagram-like snap) ─── */
.reels-vertical-scroll {
  scroll-snap-type: y mandatory;
  scroll-behavior: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reels-vertical-scroll > * {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.reels-vertical-scroll::-webkit-scrollbar {
  display: none;
}

.reels-horizontal-scroll {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reels-horizontal-scroll > * {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.reels-horizontal-scroll::-webkit-scrollbar {
  display: none;
}

/* ─── Chat scrollbar ─── */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}

/* ─── Safari floating header pill ─── */
.safari-header-pill {
  max-width: min(100% - 2rem, 22rem);
}

/* ─── Chat theme — Modstagram: modeling · makeup · beauty · photography ─── */
:root {
  --chat-accent: #2aabee;
  /* Studio light: warm key + soft fill */
  --chat-bg: #f3ece6;
  --chat-bg-pattern: url("/images/chat/wallpaper-light.svg"),
    radial-gradient(ellipse 90% 70% at 8% 12%, rgba(214, 164, 176, 0.32) 0%, transparent 58%),
    radial-gradient(ellipse 85% 65% at 92% 88%, rgba(141, 175, 205, 0.26) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255, 248, 242, 0.5) 0%, transparent 70%),
    linear-gradient(168deg, #faf4ef 0%, #f0e8f0 38%, #e8eef4 100%);
  --chat-bg-pattern-size: 480px 480px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  --chat-bubble-out: #248cc8;
  --chat-bubble-out-fg: #ffffff;
  --chat-bubble-out-meta: rgba(255, 255, 255, 0.78);
  --chat-bubble-in: #fffdfb;
  --chat-bubble-in-fg: #1c1520;
  --chat-bubble-in-meta: rgba(28, 21, 32, 0.46);
}

.dark {
  --chat-accent: #2aabee;
  /* Dark studio: tungsten key + cool rim */
  --chat-bg: #0e1014;
  --chat-bg-pattern: url("/images/chat/wallpaper-dark.svg"),
    radial-gradient(ellipse 80% 55% at 10% 15%, rgba(196, 149, 127, 0.14) 0%, transparent 58%),
    radial-gradient(ellipse 75% 50% at 88% 82%, rgba(42, 171, 238, 0.11) 0%, transparent 52%),
    radial-gradient(ellipse 50% 40% at 50% 45%, rgba(180, 140, 170, 0.06) 0%, transparent 65%),
    linear-gradient(168deg, #121018 0%, #0e1014 45%, #0a0c12 100%);
  --chat-bg-pattern-size: 480px 480px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  --chat-bubble-out: #2aabee;
  --chat-bubble-out-fg: #ffffff;
  --chat-bubble-out-meta: rgba(255, 255, 255, 0.76);
  --chat-bubble-in: #1a2029;
  --chat-bubble-in-fg: #eceef3;
  --chat-bubble-in-meta: rgba(236, 238, 243, 0.55);
}

.chat-page-bg {
  position: relative;
  background: transparent;
  isolation: isolate;
}

.chat-page-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--chat-bg);
  background-image: var(--chat-bg-pattern);
  background-size: var(--chat-bg-pattern-size);
}

/* فقط لیست پیام‌ها — بدون position:relative تا fixed هدر/فوتر خراب نشود */
.chat-page-bg > .chat-thread-messages {
  z-index: 1;
}

.chat-bubble-out,
.ig-dm-out {
  background: var(--chat-bubble-out);
  color: var(--chat-bubble-out-fg);
}
.chat-bubble-out .message-time-inline,
.chat-text-bubble.chat-bubble-out .message-time-inline,
.chat-bubble-out .message-time-below {
  color: var(--chat-bubble-out-meta);
}

.chat-bubble-in,
.ig-dm-in {
  background: var(--chat-bubble-in);
  color: var(--chat-bubble-in-fg);
  box-shadow: 0 1px 2px rgba(26, 21, 32, 0.08);
}
.dark .chat-bubble-in,
.dark .ig-dm-in {
  box-shadow: none;
}
.chat-bubble-in .message-time-inline,
.chat-text-bubble.chat-bubble-in .message-time-inline,
.chat-bubble-in .message-time-below {
  color: var(--chat-bubble-in-meta);
}

.chat-text-bubble {
  position: relative;
  padding-bottom: 1.25rem;
  min-width: 4rem;
  max-width: min(85vw, 320px);
}
.chat-message-text {
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.message-time-inline {
  position: absolute;
  bottom: 4px;
  left: 8px;
  font-size: 10px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.chat-bubble-out .message-time-inline,
.chat-text-bubble.chat-bubble-out .message-time-inline {
  left: auto;
  right: 8px;
}
.chat-bubble-in .message-time-inline,
.chat-text-bubble.chat-bubble-in .message-time-inline {
  left: 8px;
  right: auto;
}

.glass-panel-strong {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.dark .glass-panel-strong {
  background: rgba(30, 30, 30, 0.78);
  border-color: rgba(255, 255, 255, 0.12);
}

.comments-modal-glass {
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
}

.chat-action-btn {
  background: linear-gradient(135deg, #0095f6 0%, #007aff 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.35);
}

.chat-forward-btn {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.dark .chat-forward-btn {
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
}

.header-offline {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.92) 0%, rgba(185, 28, 28, 0.88) 100%) !important;
  backdrop-filter: blur(12px);
}
.header-syncing .brand-logo {
  opacity: 0;
}
.header-syncing-dots span {
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.header-syncing-dots span:nth-child(2) { animation-delay: 0.15s; }
.header-syncing-dots span:nth-child(3) { animation-delay: 0.3s; }

.tab-active-glass {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.dark .tab-active-glass {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.chat-input-area {
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
.chat-input-area--thread {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

.ig-dm-send-btn {
  background: var(--chat-bubble-out);
  color: var(--chat-bubble-out-fg);
}

/* ─── Instagram-style typing dots (waving) ─── */
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0) scale(1); opacity: 0.45; }
  30% { transform: translateY(-5px) scale(1.15); opacity: 1; }
}
.typing-dot {
  animation: typing-bounce 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-dot:nth-child(3) { animation-delay: 0.36s; }

/* ─── Read receipt check animation ─── */
@keyframes check-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.read-check-animate {
  animation: check-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes nearby-radar-sweep {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes nearby-blip-glow {
  0%,
  100% {
    box-shadow: 0 0 4px 1px rgba(57, 255, 20, 0.55);
    opacity: 0.85;
  }
  50% {
    box-shadow: 0 0 10px 3px rgba(57, 255, 20, 0.95);
    opacity: 1;
  }
}

.nearby-radar-sweep {
  animation: nearby-radar-sweep 4s linear infinite;
  transform-origin: center center;
}

.nearby-blip-glow {
  animation: nearby-blip-glow 1.8s ease-in-out infinite;
}

@keyframes story-ring-spin {
  to {
    transform: rotate(360deg);
  }
}
.story-ring-live {
  animation: story-ring-spin 3s linear infinite;
}

/* Message enter — handled by framer-motion in ChatMessageCard */

/* ─── Shrink header ─── */
.header-shrink {
  transform: scale(0.92) translateY(-2px);
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
/* استایل اختصاصی برای پلیر در تم روشن */
.custom-audio-player::-webkit-media-controls-enclosure {
  background-color: #e5e7eb; /* خاکستری تیره تر برای تم روشن */
}

/* برای اینکه دکمه‌ها و نوشته‌های پلیر در تم روشن تیره بمانند */
.custom-audio-player {
  filter: contrast(1.1) brightness(0.9);
}

/* در تم تاریک، پلیر را به رنگ‌های روشن معکوس می‌کنیم */
.dark .custom-audio-player {
  filter: invert(1) hue-rotate(180deg) brightness(1.2);
}

.profile-avatar {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ─── Design system: buttons & modals ─── */
:root {
  --btn-border-color: #C3C3C3;
  --btn-accent: #FC8EAC;
  --btn-accent-hover: #f07898;
  --btn-accent-text: #ffffff;
}

.btn-modern {
  border: 1px solid var(--btn-border-color);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.btn-modern:hover:not(:disabled) {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
.btn-modern:active:not(:disabled) {
  transform: scale(0.98);
}
.dark .btn-modern {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
.dark .btn-modern:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38);
}

.btn-modern--primary {
  background: var(--btn-accent);
  color: var(--btn-accent-text);
  border-color: var(--btn-border-color);
}
.btn-modern--primary:hover:not(:disabled) {
  background: var(--btn-accent-hover);
}

.btn-modern--selected {
  background: var(--btn-accent);
  color: var(--btn-accent-text);
  border-color: var(--btn-accent);
}
.btn-modern--selected:hover:not(:disabled) {
  background: var(--btn-accent-hover);
  border-color: var(--btn-accent-hover);
}

.glass-modal-overlay {
  background: rgba(8, 8, 10, 0.52);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}
.dark .glass-modal-overlay {
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(22px) saturate(110%);
  -webkit-backdrop-filter: blur(22px) saturate(110%);
}
.glass-modal-overlay--dark {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(24px) saturate(110%);
  -webkit-backdrop-filter: blur(24px) saturate(110%);
}
.dark .glass-modal-overlay--dark {
  background: rgba(0, 0, 0, 0.82);
}

.glass-modal-panel {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
}
.dark .glass-modal-panel {
  background: rgba(28, 28, 30, 0.84);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.48);
}

.glass-modal-panel--sheet {
  border-radius: 1.5rem 1.5rem 0 0;
}
.glass-modal-panel--center {
  border-radius: 1.5rem;
}

/* English LTR page shells (applied page-by-page later) */
.locale-page-shell--ltr {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] body {
  direction: ltr;
}

html[dir="ltr"] .rtl\:flex-row-reverse {
  flex-direction: row;
}