@font-face {
  font-family: Estedad;
  src: url('../fonts/Estedad-Bold.woff2');
}

@font-face {
  font-family: Estedad;
  font-weight: bold;
  src: url('../fonts/Estedad-Black.woff2');
}

@font-face {
  font-family: 'googleFont';
  font-weight: bold;
  src: url('../fonts/MaterialSymbolsOutlined-VariableFont_FILL,GRAD,opsz,wght.tts')
}

@font-face {
  font-family: "Material Icons Outlined";
  src: url('../fonts/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsI(1).woff2');
}

:root {
  /* پالت رنگی اصلی */
  --primary-color: #FFD700;
  --on-primary-color: #fff;
  --surface-color: #fef7ff;
  --on-surface-color: #e74646;
  --outline-color: #79747e;
  --background-color: #fffbfe;
  --error-color: #b3261e;
  --success-color: #2e7d32;
  --surface-variant-color: #e7e0ec;
  --success-container-color: #e8f5e9;
  --error-container-color: #ffebee;

  /* رنگ‌های حالت‌ها و نشان‌ها */
  --disabled-text-color: rgba(29, 27, 32, .38);
  --disabled-container-color: rgba(29, 27, 32, .12);
  --mini-color: #00838F;
  --mini-container-color: #E0F7FA;
  --nano-color: #546E7A;
  --nano-container-color: #ECEFF1;

  /* شعاع گوشه‌ها */
  --border-radius-large: 1.75rem;
  --border-radius-medium: 1rem;
  --border-radius-small: .5rem;
  --border-radius-full: 999px;

  /* فونت */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* مقیاس فاصله‌گذاری */
  --spacing-1: .25rem;
  --spacing-2: .5rem;
  --spacing-3: 1rem;
  --spacing-4: 1.5rem;
  --spacing-5: 3rem;
  --mini-color: #00838F;
  /* رنگ فیروزه‌ای */
  --mini-container-color: #E0F7FA;
  --nano-color: #546E7A;
  /* خاکستری-آبی سرد */
  --nano-container-color: #ECEFF1;
  --bs-btn-color: #928f8f;
}

body {
  font-family: 'Estedad';
  background-color: #fafafa;
  user-select: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 20rem;
  width: auto;
  max-height: 12rem;
  height: auto;
  border-radius: 25px;
}

summary {
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

summary::-moz-list-bullet {
  list-style-type: none;
}

li {
  margin-bottom: 8px;
}

.dir-rtl {
  direction: rtl;
}

.dir-ltr {
  direction: ltr;
}

input[type="range"] {
  accent-color: transparent;
}

.loginMessage {
  background: -webkit-linear-gradient(45deg, rgb(251, 191, 36), #eee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 4px;
}

.text-text-secondary-light {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.border-none {
  border: none;
}

.body {
  width: 96%;
  height: 100%;
  position: absolute;
  right: 0;

}

.nav-right {
  display: none;
}

.nav-left {
  position: fixed;
  left: 0;
}

.navigationLeft {
  position: absolute;
  left: 0;
  top: 0;
  width: 4%;
  height: 100%;
  background-color: #ff4b4b;
}

.bodyMessage {}

.btn-outline-primary-silver {
  --bs-btn-color: rgb(251 191 36 / var(--tw-text-opacity, 1));
  --bs-btn-border-color: rgb(251 191 36 / var(--tw-text-opacity, 1));
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(251 191 36 / var(--tw-text-opacity, 1));
  --bs-btn-hover-border-color: rgb(251 191 36 / var(--tw-text-opacity, 1));
  --bs-btn-focus-shadow-rgb: 217, 35, 15;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(251 191 36 / var(--tw-text-opacity, 1));
  --bs-btn-active-border-color: rgb(251 191 36 / var(--tw-text-opacity, 1));
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #d9230f;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #d9230f;
  --bs-gradient: none;
}

.btn-outline-primary {
  --bs-btn-color: #FFD700;
  /* طلایی روشن */
  --bs-btn-border-color: #FFD700;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #FFD700;
  --bs-btn-hover-border-color: #FFD700;
  --bs-btn-focus-shadow-rgb: 255, 215, 0;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #FFD700;
  --bs-btn-active-border-color: #FFD700;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #FFD700;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #FFD700;
  --bs-gradient: none;
}

.user-message,
.messageAI {
  user-select: text;
}

.box-uploader {
  display: flex;
}

.cursor-no-drop {
  cursor: no-drop !important;
}

.form-control:focus {
  box-shadow: none;
}

.form-add,
.form-setting,
.form-tools {
  width: 250px;
  position: absolute;
  top: 25px;
  left: 25px;
}

.form-user-profile {
  width: 250px;
  position: absolute;
  bottom: 25px;
  right: 60px;
}

.form-message {
  width: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.btn1 {
  --bs-btn-color: #928f8f;
}

.tool-box {
  display: none;
}

/* Range Slider */
.range-input {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  --range-progress: 50%;
}

.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -7px;
  width: 20px;
  height: 20px;
  background: var(--primary-color);
  border-radius: var(--border-radius-full);
  border: none;
}

.range-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--primary-color);
  border-radius: var(--border-radius-full);
  border: none;
}

/* --- Track (ترک) --- */
.range-input::-webkit-slider-runnable-track {
  height: 6px;
  /* جادوی اصلی اینجاست: استفاده از گرادینت برای نمایش پیشرفت */
  background: linear-gradient(to right,
      var(--primary-color) var(--range-progress),
      var(--surface-variant-color) var(--range-progress));
  border-radius: var(--border-radius-full);
}

.range-input::-moz-range-track {
  height: 6px;
  background: linear-gradient(to right,
      var(--primary-color) var(--range-progress),
      var(--surface-variant-color) var(--range-progress));
  border-radius: var(--border-radius-full);
}

/* حالت غیرفعال برای اسلایدر */
.range-input:disabled {
  cursor: not-allowed;
}

.range-input:disabled::-webkit-slider-thumb {
  background-color: var(--disabled-text-color);
}

.range-input:disabled::-moz-range-thumb {
  background-color: var(--disabled-text-color);
}

.range-input:disabled::-webkit-slider-runnable-track {
  background-color: var(--disabled-container-color);
}

.range-input:disabled::-moz-range-track {
  background-color: var(--disabled-container-color);
}

.dark {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.btn-outline-pink {
  --bs-btn-color: #ff6f6f;
  --bs-btn-border-color: #ff6f6f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ff6f6f;
  --bs-btn-hover-border-color: #ff6f6f;
  --bs-btn-focus-shadow-rgb: 217, 35, 15;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ff6f6f;
  --bs-btn-active-border-color: #ff6f6f;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ff6f44;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ff6f6f;
  --bs-gradient: none;
}

.status-result {
  background: linear-gradient(25deg, #FFD700, #FDB931);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 4px;
}

/* HTML: <div class="loader"></div> */
.loader {
  /*width: 30px;*/
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid #FFD700;
  animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}

.bg-animation {
  animation: bg-animation 0.8s infinite linear;
}

.border-animation {
  animation:
    border-animation 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}

.image-icon,
.tool-icon {
  animation: fade 4s infinite;
}

.image-icon {
  opacity: 1;
  animation-delay: 0s;
}

.tool-icon {
  opacity: 0;
  animation-delay: 2s;
}

.w-fit {
  width: fit-content;
}

.status-animation {
  background: linear-gradient(90deg, #FFD700 0%, #fff 50%, #FFD700 100%);
  background-size: 200%;
  background-position: left;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: colorFlow 3s linear infinite alternate;
}

#status:hover {
  color: #fff;
}

.text-xl {
  font-size: 1.4rem;
  line-height: 1.75rem;
}

.mode-dialog {
  position: absolute;
  top: 25px;
  left: 442px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px) saturate(180%);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 40;
}

.mode-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}

.mode-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s;
}

.mode-option:hover {
  background: rgba(0, 0, 0, 0.05);
}

.mode-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mode-icon {
  width: 20px;
  height: 20px;
  mask-size: contain;
}

.mode-text {
  text-align: left;
}

.mode-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: bold;
}

.mode-badge {
  /*background: rgba(0, 0, 0, 0.08);*/
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10px;
  /*color: #555;*/
}

.mode-badge.new {
  background: rgba(255, 165, 0, 0.3);
  color: #ff9800;
}

.mode-desc {
  /*color: #666;*/
  font-size: 11px;
}

.mode-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #888;
}

.mode-radio.selected {
  background-color: #444;
}

/*button*/
.rounded-lg {
  border-radius: 1.5rem;
}

.bg-accent-yellow\/10 {
  background-color: rgba(248, 184, 18, 0.23);
}

.golden-button {
  background: linear-gradient(135deg, #fffbe6, #fdf6d3);
  color: #d4af37;
  border: 2px solid #d4af37;
  border-radius: 1.5rem;
  padding: 2px 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

/*.golden-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,215,0,0.4) 0%, transparent 70%);
  animation: shimmer 3s infinite linear;
  z-index: 0;
}*/

.golden-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}

.golden-button span {
  position: relative;
  z-index: 1;
}

@keyframes shimmer {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*button*/
.thinkAnimation {
  color: transparent;
  background: linear-gradient(90deg, #e3e3e3 0%, #e3e3e3 50%, transparent 50%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: drawText 3s linear infinite;
}

@keyframes drawText {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: 0% 0;
  }
}

@keyframes fade {
  0% {
    opacity: 1;
  }

  45% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  95% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes colorFlow {
  0% {
    background-position: left;
  }

  100% {
    background-position: right;
  }
}

@keyframes bg-animation {
  0% {
    background-color: linear-gradient(45deg,
        rgba(252, 165, 165, var(--tw-bg-opacity)),
        rgba(147, 197, 253, var(--tw-bg-opacity)));
  }

  100% {
    background-color: linear-gradient(45deg,
        rgba(147, 197, 253, var(--tw-bg-opacity)),
        rgba(252, 165, 165, var(--tw-bg-opacity)));
  }
}

@keyframes border-animation {
  0% {
    border-color: #fff;
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%)
  }

  12.5% {
    border-color: #fff;
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%)
  }

  25% {
    border-color: #eee;
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%)
  }

  50% {
    border-color: #f9cd78;
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%)
  }

  62.5% {
    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%)
  }

  75% {
    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%)
  }

  100% {
    border-color: #f63131;
    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%)
  }
}

@keyframes l20-1 {
  0% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%)
  }

  12.5% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%)
  }

  25% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%)
  }

  50% {
    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%)
  }

  62.5% {
    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%)
  }

  75% {
    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%)
  }

  100% {
    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%)
  }
}

@keyframes l20-2 {
  0% {
    transform: scaleY(1) rotate(0deg)
  }

  49.99% {
    transform: scaleY(1) rotate(135deg)
  }

  50% {
    transform: scaleY(-1) rotate(0deg)
  }

  100% {
    transform: scaleY(-1) rotate(-135deg)
  }
}

@keyframes textAnimation {
  0% {
    background-color: -webkit-linear-gradient(45deg, #ff6161, #ec4899);
  }

  100% {
    background-color: -webkit-linear-gradient(45deg, #ec4899, #ff6161);
  }
}

@media screen and (max-width: 500px) {
  #navigationLeft {
    display: none;
    width: 100%;
  }

  .nav-right {
    display: block;
  }

  .box-uploader,
  .tool-box {
    display: block;
  }

  .text-body-message {
    margin-top: 1.5rem;
  }

  #activeTool {
    font-size: 0;
  }
}

@media screen and (max-width: 500px) {
  .form-message {
    width: 100%;
  }

  .grop-tool,
  #settingModel {
    display: none;
  }
}