@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: #e74646; --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;
}
.dir-rtl{
    direction: rtl;
}
.dir-ltr{
    direction: ltr;
}
.loginMessage{
    background: -webkit-linear-gradient(45deg, #ff6161, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 4px;
}
.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: rgba(248,113,113,var(--tw-border-opacity));
  --bs-btn-border-color: rgba(248,113,113,var(--tw-border-opacity));
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(248,113,113,var(--tw-border-opacity));
  --bs-btn-hover-border-color: rgba(248,113,113,var(--tw-border-opacity));
  --bs-btn-focus-shadow-rgb: 217,35,15;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(248,113,113,var(--tw-border-opacity));
  --bs-btn-active-border-color: rgba(248,113,113,var(--tw-border-opacity));
  --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;
}
.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, #f00, #ff0bb7);
-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 #dd8e68;
  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, red 0%, white 50%, red 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;
}

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