/*
Theme Name: baGPT
Theme URI: https://github.com/baGPT
Author: امیرعباس زاجکانی
Description: قالب هوشمند و اختصاصی با جی پی تی
Version: 1.4.50
License: GPL v2 or later
Text Domain: bagpt
*/
/* استایل اصلی چت در assets/css/app.css (خروجی Tailwind) است */
/*
* انتخاب متن (user-select) — مرز بین «پوسته/Chrome» و «محتوای پیام»:
* بدون این بلوک، Ctrl+A یا drag وسیعِ کاربر باعث میشود عنوان هدر چت،
* عناوین تاریخچهٔ سایدبار، دکمههای داک ورودی و نوار اکشن پیامها هم
* highlight شوند و در کپی نهایی متون UI با محتوای پیام قاطی شود.
*
* Scope عمدا روی #ai-chat-root است تا فقط رابط چت (و مدالهای مرتبط)
* را تحت تأثیر بگذارد و باقی صفحات سایت/پنل وردپرس دستنخورده بماند.
*
* استثناها: محتوای پیام (.ai-chat-msg-content)، فیلدهای فرم
* (input/textarea/select) و contenteditable باید قابل انتخاب بمانند.
*/
#ai-chat-root {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#ai-chat-root .ai-chat-msg-content,
#ai-chat-root .ai-chat-msg-content *,
#ai-chat-root .ai-chat-msg-sources,
#ai-chat-root .ai-chat-msg-sources *,
#ai-chat-root .bagpt-news-sources,
#ai-chat-root .bagpt-news-sources *,
#ai-chat-root input,
#ai-chat-root textarea,
#ai-chat-root select,
#ai-chat-root [contenteditable=""],
#ai-chat-root [contenteditable="true"],
#ai-chat-root [contenteditable="plaintext-only"] {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
-webkit-touch-callout: default;
}
/*
* استثنا روی استثنا: داک ورودی چت + گروه — نباید در selection مستندی (Ctrl+A / drag گسترده) بیفتد.
* specificity (1 ID + 1 class + 1 universal) بالاتر از قانون re-enable است (1 ID + 1 element).
* تایپ/ویرایش داخل textarea مستقل از user-select کار میکند چون textarea عنصر replaced است
* و selection داخلی خودش را هنگام focus دارد.
*/
#ai-chat-root .ai-chat-input-dock,
#ai-chat-root .ai-chat-input-dock *,
#ai-chat-root #bagpt-group-input-dock,
#ai-chat-root #bagpt-group-input-dock * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ai-chat-msg.assistant .ai-chat-msg-content-core {
font-size: 17px;
font-weight: 400;
line-height: 1.8;
}
/*
* صفحهٔ چت تمامصفحه: با نوار مدیریت وردپرس همپوشانی عمودی نداشته باشد.
* z-index ریشه بالاتر از هدرهای معمول قالب است؛ نوار ادمین معمولاً بالاتر از ۵۰ است.
*/
body.admin-bar #ai-chat-root {
top: var(--wp-admin--admin-bar--height, 32px);
}
/*
* تم روشن: تمپلیت روی #ai-chat-app و main کلاسهای bg-black/text-white دارد.
* بدون این بلوک، با وجود bagpt-theme-light کل صفحه همچنان تیره میماند.
*/
body.bagpt-theme-light {
background-color: #e2e8f0;
}
/*
* پیشتم روشن قبل از اجرای JS (کلاس روی html از front-page.php + localStorage).
* جلوی فلش سیاه در رفرش را میگیرد؛ پس از applyBagptUiPrefs کلاس bagpt-preload-light برداشته میشود.
*/
html.bagpt-preload-light body {
background-color: #e2e8f0 !important;
color: rgba(15, 23, 42, 0.92) !important;
}
html.bagpt-preload-light #ai-chat-root,
html.bagpt-preload-light #ai-chat-app {
background-color: #f1f5f9 !important;
color: rgba(15, 23, 42, 0.92) !important;
}
html.bagpt-preload-light #ai-chat-app > main {
background-color: #f8fafc !important;
}
html.bagpt-preload-light #ai-chat-sidebar {
background: #eef2f7 !important;
border-color: rgba(15, 23, 42, 0.1) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
html.bagpt-preload-light #ai-chat-sidebar [class*="text-white"] {
color: rgba(15, 23, 42, 0.82) !important;
}
html.bagpt-preload-light #ai-chat-sidebar .bagpt-sidebar-auth-cta {
background: rgba(16, 185, 129, 0.14) !important;
border-color: rgba(5, 150, 105, 0.42) !important;
color: rgba(6, 78, 59, 0.96) !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
html.bagpt-preload-light #ai-chat-sidebar .bagpt-sidebar-auth-cta:hover {
background: rgba(16, 185, 129, 0.22) !important;
border-color: rgba(4, 120, 87, 0.5) !important;
color: rgba(4, 47, 46, 0.98) !important;
}
html.bagpt-preload-light .bagpt-app-chrome,
html.bagpt-preload-light .bagpt-topbar,
html.bagpt-preload-light header#ai-chat-header {
background: rgba(255, 255, 255, 0.96) !important;
border-color: rgba(15, 23, 42, 0.1) !important;
}
html.bagpt-preload-light .bagpt-topbar [class*="text-white"],
html.bagpt-preload-light header#ai-chat-header [class*="text-white"] {
color: rgba(15, 23, 42, 0.88) !important;
}
html.bagpt-preload-light #ai-chat-title {
color: rgba(15, 23, 42, 0.94) !important;
}
html.bagpt-preload-light #bagpt-chat-main-stage,
html.bagpt-preload-light #ai-chat-messages {
background: #f8fafc !important;
}
html.bagpt-preload-light #ai-chat-app:not(.bagpt-has-chat) .ai-chat-input-dock.bagpt-input-dock {
background-image: linear-gradient(
to top,
rgba(248, 250, 252, 0.98) 0%,
rgba(248, 250, 252, 0.88) 45%,
rgba(248, 250, 252, 0) 100%
) !important;
border-color: transparent !important;
}
html.bagpt-preload-light .bagpt-pill-input {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.12) !important;
box-shadow: 0 4px 24px rgba(15, 23, 42, 0.07) !important;
}
html.bagpt-preload-light .bagpt-input-limit-banner {
background: #f1f5f9 !important;
border-color: rgba(15, 23, 42, 0.12) !important;
box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06) !important;
}
html.bagpt-preload-light #bagpt-input-limit-banner-text {
color: rgba(15, 23, 42, 0.9) !important;
}
html.bagpt-preload-light #bagpt-input-limit-upgrade {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.12) !important;
color: #0f172a !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}
html.bagpt-preload-light #bagpt-input-limit-upgrade:hover {
background: #f8fafc !important;
}
html.bagpt-preload-light #ai-chat-input,
html.bagpt-preload-light .bagpt-chat-input-field {
color: rgba(15, 23, 42, 0.92) !important;
}
html.bagpt-preload-light #bagpt-welcome-hero.bagpt-incognito-hero-on #bagpt-welcome-title {
color: rgba(131, 24, 67, 0.96) !important;
text-shadow: none !important;
}
html.bagpt-preload-light #bagpt-welcome-hero.bagpt-incognito-hero-on #bagpt-welcome-incognito-note {
color: rgba(131, 24, 67, 0.9) !important;
}
html.bagpt-preload-light #bagpt-project-edit-instructions-modal .bagpt-project-modal-shell {
background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(99, 102, 241, 0.07)) !important;
}
html.bagpt-preload-light #bagpt-project-edit-instructions-modal .bagpt-project-modal-inner {
background: #ffffff !important;
border: 1px solid rgba(15, 23, 42, 0.1) !important;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.1) !important;
}
html.bagpt-preload-light #bagpt-project-edit-instructions-modal textarea {
border-color: rgba(15, 23, 42, 0.12) !important;
background: #ffffff !important;
color: rgba(15, 23, 42, 0.92) !important;
}
html.bagpt-preload-light #bagpt-project-edit-instructions-modal .text-white {
color: rgba(15, 23, 42, 0.92) !important;
}
html.bagpt-preload-light #bagpt-project-edit-instructions-modal .text-white\/45,
html.bagpt-preload-light #bagpt-project-edit-instructions-modal .text-white\/55,
html.bagpt-preload-light #bagpt-project-edit-instructions-modal .text-white\/60 {
color: rgba(71, 85, 105, 0.85) !important;
}
/*
* تعویض تم: بدون View Transitions، رنگها interpolate میشوند؛ با VT، اسنپشاتها با keyframeهای زیر.
*/
@media (prefers-reduced-motion: no-preference) {
body,
#ai-chat-root,
#ai-chat-app {
transition:
background-color 0.55s cubic-bezier(0.25, 0.9, 0.32, 1),
color 0.4s cubic-bezier(0.25, 0.9, 0.32, 1);
}
}
@media (prefers-reduced-motion: reduce) {
body,
#ai-chat-root,
#ai-chat-app {
transition-duration: 0.01ms !important;
}
}
/* View Transitions API — تم تمامصفحه با «خروج ملایم + ورود واضح» (wow بدون شلوغی) */
@keyframes bagpt-vt-theme-out {
from {
opacity: 1;
filter: brightness(1) saturate(1);
transform: scale(1) translateZ(0);
}
to {
opacity: 0;
filter: brightness(1.18) saturate(1.08);
transform: scale(0.988) translateZ(0);
}
}
@keyframes bagpt-vt-theme-in {
0% {
opacity: 0;
filter: brightness(0.88) blur(14px) saturate(0.92);
transform: scale(1.012) translateY(6px) translateZ(0);
}
55% {
opacity: 1;
filter: brightness(1.02) blur(3px) saturate(1);
}
100% {
opacity: 1;
filter: brightness(1) blur(0) saturate(1);
transform: scale(1) translateY(0) translateZ(0);
}
}
@keyframes bagpt-vt-theme-in-reduced {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes bagpt-vt-theme-out-reduced {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@media (prefers-reduced-motion: no-preference) {
@supports (view-transition-name: none) {
::view-transition-group(root) {
animation-duration: 0.62s;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(root) {
animation: bagpt-vt-theme-out 0.48s cubic-bezier(0.4, 0, 0.2, 1) both;
mix-blend-mode: normal;
}
::view-transition-new(root) {
animation: bagpt-vt-theme-in 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: 0.03s;
mix-blend-mode: normal;
}
}
}
@media (prefers-reduced-motion: reduce) {
@supports (view-transition-name: none) {
::view-transition-old(root) {
animation: bagpt-vt-theme-out-reduced 0.2s ease both;
}
::view-transition-new(root) {
animation: bagpt-vt-theme-in-reduced 0.22s ease both;
animation-delay: 0s;
}
}
}
#ai-chat-root,
#ai-chat-app.bagpt-theme-light {
background-color: #f1f5f9 !important;
}
#ai-chat-app.bagpt-theme-light {
color: rgba(15, 23, 42, 0.92);
}
#ai-chat-app.bagpt-theme-light > main {
background-color: #f8fafc !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar {
background: #eef2f7 !important;
border-color: rgba(15, 23, 42, 0.1) !important;
color: rgba(15, 23, 42, 0.9);
}
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar [class*="text-white"] {
color: rgba(15, 23, 42, 0.82) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar input::placeholder {
color: rgba(15, 23, 42, 0.45) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar input {
color: rgba(15, 23, 42, 0.92) !important;
background: rgba(255, 255, 255, 0.85) !important;
border-color: rgba(15, 23, 42, 0.12) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar .bagpt-sidebar-auth-cta,
body.bagpt-theme-light #ai-chat-sidebar .bagpt-sidebar-auth-cta {
background: rgba(16, 185, 129, 0.14) !important;
border-color: rgba(5, 150, 105, 0.42) !important;
color: rgba(6, 78, 59, 0.96) !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar .bagpt-sidebar-auth-cta:hover,
body.bagpt-theme-light #ai-chat-sidebar .bagpt-sidebar-auth-cta:hover {
background: rgba(16, 185, 129, 0.22) !important;
border-color: rgba(4, 120, 87, 0.5) !important;
color: rgba(4, 47, 46, 0.98) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-app-chrome,
#ai-chat-app.bagpt-theme-light .bagpt-topbar,
#ai-chat-app.bagpt-theme-light header#ai-chat-header {
background: rgba(255, 255, 255, 0.96) !important;
border-color: rgba(15, 23, 42, 0.1) !important;
}
body.bagpt-theme-light #ai-chat-app .bagpt-app-chrome {
background: rgba(255, 255, 255, 0.96) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-topbar [class*="text-white"],
#ai-chat-app.bagpt-theme-light header#ai-chat-header [class*="text-white"] {
color: rgba(15, 23, 42, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-title {
color: rgba(15, 23, 42, 0.94) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-chat-main-stage,
#ai-chat-app.bagpt-theme-light #ai-chat-messages {
background: #f8fafc;
}
#ai-chat-app.bagpt-theme-light:not(.bagpt-has-chat) .ai-chat-input-dock.bagpt-input-dock {
background-image: linear-gradient(
to top,
rgba(248, 250, 252, 0.98) 0%,
rgba(248, 250, 252, 0.88) 45%,
rgba(248, 250, 252, 0) 100%
) !important;
border-color: transparent !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-pill-input {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.12) !important;
box-shadow: 0 4px 24px rgba(15, 23, 42, 0.07) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-input-limit-banner {
background: #f1f5f9 !important;
border-color: rgba(15, 23, 42, 0.12) !important;
box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-input-limit-banner-text {
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-input-limit-upgrade {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.12) !important;
color: #0f172a !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-input-limit-upgrade:hover {
background: #f8fafc !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-input,
#ai-chat-app.bagpt-theme-light .bagpt-chat-input-field {
color: rgba(15, 23, 42, 0.92) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-input::placeholder,
#ai-chat-app.bagpt-theme-light .bagpt-chat-input-field::placeholder {
color: rgba(15, 23, 42, 0.42) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-welcome-title {
color: rgba(15, 23, 42, 0.94) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-topbar-default-logo {
filter: brightness(0);
opacity: 0.88;
}
/* حالت خصوصی روی لندینگ: در تم لایت رنگهای تیرهٔ تم تضاد کافی دارند */
#ai-chat-app.bagpt-theme-light #bagpt-welcome-hero.bagpt-incognito-hero-on #bagpt-welcome-title {
color: rgba(131, 24, 67, 0.96) !important;
text-shadow: none !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-welcome-hero.bagpt-incognito-hero-on #bagpt-welcome-incognito-note {
color: rgba(131, 24, 67, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-messages-inner .ai-chat-msg.user .ai-chat-msg-content {
background: rgba(255, 255, 255, 0.96) !important;
border-color: rgba(15, 23, 42, 0.12) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light .ai-chat-msg.assistant .ai-chat-msg-content,
#ai-chat-app.bagpt-theme-light .ai-chat-msg.assistant .ai-chat-msg-content-core {
color: rgba(15, 23, 42, 0.92) !important;
}
#ai-chat-app.bagpt-theme-light .ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-md-heading {
color: rgba(15, 23, 42, 0.95);
}
#ai-chat-app.bagpt-theme-light .ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-md-subheading,
#ai-chat-app.bagpt-theme-light .ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-md-minorheading {
color: rgba(15, 23, 42, 0.9);
}
/* ——— مرکز حافظهٔ چندوجهی (پنل مغز) ——— */
#ai-chat-memories-panel.bagpt-memories-root {
z-index: 520;
transition:
opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
}
#ai-chat-memories-panel .bagpt-memories-backdrop {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
#ai-chat-memories-panel .bagpt-memories-sheet {
background: #050608;
-webkit-overflow-scrolling: touch;
}
/* اسکرولبار ظاهری مخفی؛ اسکرول ماوس/تاچ/کیبورد همچنان فعال است */
#ai-chat-memories-panel .bagpt-memories-sheet.bagpt-memories-sheet--scroll-hide {
scrollbar-width: none;
-ms-overflow-style: none;
}
#ai-chat-memories-panel
.bagpt-memories-sheet.bagpt-memories-sheet--scroll-hide::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
/* لیست دیگر ناحیهٔ اسکرول جدا نیست؛ کل شیت اسکرول میخورد تا هر کارت کامل دیده شود */
#ai-chat-memories-panel #ai-chat-memories-list.bagpt-memories-list {
overflow: visible;
}
#ai-chat-memories-panel.bagpt-memories-open .bagpt-memories-sheet {
animation: bagptMemSheetIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes bagptMemSheetIn {
from {
opacity: 0;
transform: translateY(12px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
#ai-chat-memories-panel .bagpt-memories-hero-bg {
background:
radial-gradient(120% 90% at 100% 0%, rgba(34, 211, 238, 0.14) 0%, transparent 55%),
radial-gradient(90% 70% at 0% 100%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
linear-gradient(180deg, rgba(8, 12, 20, 0.95) 0%, rgba(5, 6, 10, 0.88) 100%);
animation: bagptMemHeroDrift 14s ease-in-out infinite alternate;
}
@keyframes bagptMemHeroDrift {
from {
filter: hue-rotate(-6deg);
}
to {
filter: hue-rotate(8deg);
}
}
#ai-chat-memories-panel .bagpt-memories-brain-core {
position: relative;
width: clamp(4.5rem, 18vw, 5.5rem);
height: clamp(4.5rem, 18vw, 5.5rem);
border-radius: 999px;
background:
radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.22) 0%, transparent 42%),
radial-gradient(circle at 70% 65%, rgba(34, 211, 238, 0.35) 0%, rgba(99, 102, 241, 0.22) 48%, rgba(15, 23, 42, 0.85) 100%);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.08) inset,
0 18px 50px rgba(0, 0, 0, 0.55),
0 0 60px -12px rgba(34, 211, 238, 0.45);
animation: bagptBrainPulse 3.2s ease-in-out infinite;
}
@keyframes bagptBrainPulse {
0%,
100% {
transform: scale(1);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.08) inset,
0 18px 50px rgba(0, 0, 0, 0.55),
0 0 50px -14px rgba(34, 211, 238, 0.4);
}
50% {
transform: scale(1.04);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.12) inset,
0 22px 56px rgba(0, 0, 0, 0.58),
0 0 72px -8px rgba(167, 139, 250, 0.42);
}
}
#ai-chat-memories-panel .bagpt-memories-brain-ring {
position: absolute;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
pointer-events: none;
}
#ai-chat-memories-panel .bagpt-memories-brain-ring--a {
inset: -12%;
animation: bagptBrainRing 5.5s linear infinite;
}
#ai-chat-memories-panel .bagpt-memories-brain-ring--b {
inset: -22%;
opacity: 0.45;
animation: bagptBrainRing 8s linear infinite reverse;
}
@keyframes bagptBrainRing {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#ai-chat-memories-panel .bagpt-memories-brain-nodes {
position: absolute;
inset: 0;
pointer-events: none;
}
#ai-chat-memories-panel .bagpt-memories-brain-nodes span {
position: absolute;
width: 6px;
height: 6px;
border-radius: 999px;
background: rgba(167, 250, 232, 0.85);
box-shadow: 0 0 12px rgba(45, 212, 191, 0.65);
animation: bagptBrainNode 2.4s ease-in-out infinite;
}
#ai-chat-memories-panel .bagpt-memories-brain-nodes span:nth-child(1) {
top: 8%;
left: 22%;
animation-delay: 0s;
}
#ai-chat-memories-panel .bagpt-memories-brain-nodes span:nth-child(2) {
top: 28%;
right: 12%;
animation-delay: 0.35s;
}
#ai-chat-memories-panel .bagpt-memories-brain-nodes span:nth-child(3) {
bottom: 18%;
left: 18%;
animation-delay: 0.7s;
}
#ai-chat-memories-panel .bagpt-memories-brain-nodes span:nth-child(4) {
bottom: 12%;
right: 22%;
animation-delay: 1.05s;
}
#ai-chat-memories-panel .bagpt-memories-brain-nodes span:nth-child(5) {
top: 42%;
left: 6%;
animation-delay: 1.4s;
}
#ai-chat-memories-panel .bagpt-memories-brain-nodes span:nth-child(6) {
top: 52%;
right: 8%;
animation-delay: 1.75s;
}
@keyframes bagptBrainNode {
0%,
100% {
opacity: 0.35;
transform: scale(0.85);
}
50% {
opacity: 1;
transform: scale(1.15);
}
}
#ai-chat-memories-panel .bagpt-mem-facet-chip {
font-size: 16px;
line-height: 1.3;
padding: 0.32rem 0.8rem;
}
#ai-chat-memories-panel .bagpt-memory-facet-select {
font-size: 16px;
line-height: 1.3;
}
#ai-chat-memories-panel .bagpt-memory-facet-pill {
font-size: 16px;
line-height: 1.3;
}
#ai-chat-memories-panel .bagpt-memories-hero-lead {
font-size: 16px;
}
#ai-chat-memories-panel .bagpt-memory-quick-input {
font-size: 16px;
}
#ai-chat-memories-panel #bagpt-memory-quick-facet {
font-size: 16px;
line-height: 1.3;
}
#ai-chat-memories-panel .bagpt-mem-facet-chip.is-active {
border-color: rgba(34, 211, 238, 0.42) !important;
background: linear-gradient(
145deg,
rgba(34, 211, 238, 0.18) 0%,
rgba(99, 102, 241, 0.12) 100%
) !important;
color: rgba(240, 253, 250, 0.96) !important;
box-shadow: 0 0 24px -8px rgba(34, 211, 238, 0.45);
}
#ai-chat-memories-panel .bagpt-memory-card {
animation: bagptMemoryCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes bagptMemoryCardIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
#ai-chat-memories-panel .bagpt-memory-card:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.12);
}
#ai-chat-memories-panel .bagpt-memories-empty-icon {
width: 3.5rem;
height: 3.5rem;
border-radius: 999px;
border: 1px dashed rgba(255, 255, 255, 0.14);
background: radial-gradient(circle at 50% 40%, rgba(34, 211, 238, 0.12) 0%, transparent 70%);
animation: bagptMemEmptyPulse 2.8s ease-in-out infinite;
}
@keyframes bagptMemEmptyPulse {
0%,
100% {
opacity: 0.65;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.05);
}
}
#ai-chat-app.bagpt-theme-light #ai-chat-memories-panel .bagpt-memories-sheet {
background: #f8fafc;
border-color: rgba(15, 23, 42, 0.1) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-memories-panel .bagpt-memories-hero-bg {
background:
radial-gradient(120% 90% at 100% 0%, rgba(14, 165, 233, 0.12) 0%, transparent 55%),
radial-gradient(90% 70% at 0% 100%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%);
animation: none;
}
#ai-chat-app.bagpt-theme-light #ai-chat-memories-panel h2,
#ai-chat-app.bagpt-theme-light #ai-chat-memories-panel .bagpt-memory-card p {
color: rgba(15, 23, 42, 0.92) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-memories-panel .bagpt-memories-hero-lead {
color: rgba(51, 65, 85, 0.82) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-memories-panel .bagpt-memory-facet-pill {
border-color: rgba(14, 165, 233, 0.35) !important;
background: rgba(224, 242, 254, 0.65) !important;
color: rgba(15, 23, 42, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-memories-panel .bagpt-memory-card {
border-color: rgba(15, 23, 42, 0.1) !important;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.88) 100%) !important;
box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-memories-panel .bagpt-mem-facet-chip {
border-color: rgba(15, 23, 42, 0.1) !important;
background: rgba(255, 255, 255, 0.85) !important;
color: rgba(51, 65, 85, 0.85) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-memories-panel .bagpt-mem-facet-chip.is-active {
border-color: rgba(14, 165, 233, 0.45) !important;
background: linear-gradient(145deg, rgba(224, 242, 254, 0.95) 0%, rgba(238, 242, 255, 0.9) 100%) !important;
color: rgba(15, 23, 42, 0.95) !important;
box-shadow: 0 4px 20px rgba(14, 165, 233, 0.15);
}
#ai-chat-app.bagpt-theme-light #ai-chat-memories-panel .bagpt-memory-quick-input,
#ai-chat-app.bagpt-theme-light #ai-chat-memories-panel .bagpt-memory-facet-select,
#ai-chat-app.bagpt-theme-light #ai-chat-memories-panel #bagpt-memory-quick-facet {
border-color: rgba(15, 23, 42, 0.12) !important;
background: rgba(255, 255, 255, 0.95) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-memories-panel #bagpt-memory-quick-save {
color: rgba(8, 47, 73, 0.98) !important;
}
/*
* مودالهای پروژه: کلاسهای Tailwind مثل z-[140] در app.css فعلی تولید نشدهاند،
* بنابراین بدون این قانون، مودال z-index مؤثر ندارد و داک ورودی (z-index: 40 در همین فایل) روی آن میافتد.
*/
#bagpt-project-modal.bagpt-project-modal,
#bagpt-project-edit-instructions-modal.bagpt-project-modal,
#bagpt-project-delete-modal.bagpt-project-modal {
z-index: 150;
}
/* ویرایش دستور پروژه — پایهٔ دارک (قبلاً در style اینلاین body بود و بعد از style.css تم روشن را خنثی میکرد) */
#bagpt-project-edit-instructions-modal .bagpt-project-modal-shell {
background: linear-gradient(135deg, rgba(6, 182, 212, 0.22), rgba(99, 102, 241, 0.12));
}
#bagpt-project-edit-instructions-modal .bagpt-project-modal-inner {
background: rgba(13, 15, 20, 0.97);
border: 1px solid rgba(255, 255, 255, 0.08);
}
#bagpt-project-edit-instructions-modal textarea {
border-color: rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.28);
}
#bagpt-project-edit-instructions-modal textarea:focus {
border-color: rgba(45, 212, 191, 0.32);
outline: none;
}
#bagpt-project-edit-instructions-status[data-state="loading"] {
color: rgba(186, 230, 253, 0.92);
}
#bagpt-project-edit-instructions-status[data-state="error"] {
color: rgba(254, 202, 202, 0.96);
}
/* مودالهای پروژه — تم روشن (اسکرین + کارت؛ همتراز bagpt-settings / share) */
body.bagpt-theme-light #bagpt-project-modal > [data-bagpt-project-close],
body.bagpt-theme-light #bagpt-project-edit-instructions-modal > [data-bagpt-edit-ins-close],
body.bagpt-theme-light #bagpt-project-delete-modal > [data-bagpt-del-proj-close],
#ai-chat-app.bagpt-theme-light #bagpt-project-modal > [data-bagpt-project-close],
#ai-chat-app.bagpt-theme-light #bagpt-project-edit-instructions-modal > [data-bagpt-edit-ins-close],
#ai-chat-app.bagpt-theme-light #bagpt-project-delete-modal > [data-bagpt-del-proj-close] {
background-color: rgba(15, 23, 42, 0.45) !important;
}
body.bagpt-theme-light #bagpt-project-modal .bagpt-project-modal-shell,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal .bagpt-project-modal-shell {
border-color: rgba(15, 23, 42, 0.1) !important;
background:
radial-gradient(130% 120% at 100% 0%, rgba(14, 165, 233, 0.12) 0%, rgba(20, 184, 166, 0.06) 28%, rgba(255, 255, 255, 0.98) 70%),
linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(241, 245, 249, 0.96) 100%) !important;
box-shadow:
0 34px 96px rgba(15, 23, 42, 0.14),
0 0 0 1px rgba(15, 23, 42, 0.05) inset !important;
}
body.bagpt-theme-light #bagpt-project-modal .bagpt-project-modal-shell::before,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal .bagpt-project-modal-shell::before {
opacity: 0.2 !important;
}
body.bagpt-theme-light #bagpt-project-modal .bagpt-project-modal-inner,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal .bagpt-project-modal-inner {
background: rgba(255, 255, 255, 0.98) !important;
border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
body.bagpt-theme-light #bagpt-project-modal .bagpt-project-step-pill,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal .bagpt-project-step-pill {
border-color: rgba(15, 23, 42, 0.12) !important;
background: rgba(15, 23, 42, 0.04) !important;
color: rgba(71, 85, 105, 0.88) !important;
}
body.bagpt-theme-light #bagpt-project-modal .bagpt-project-step-pill.is-active,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal .bagpt-project-step-pill.is-active {
border-color: rgba(6, 182, 212, 0.42) !important;
background: rgba(6, 182, 212, 0.1) !important;
color: rgba(8, 47, 73, 0.95) !important;
}
body.bagpt-theme-light #bagpt-project-modal .bagpt-project-input-wrap,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal .bagpt-project-input-wrap {
border-color: rgba(15, 23, 42, 0.1) !important;
background: rgba(248, 250, 252, 0.96) !important;
}
body.bagpt-theme-light #bagpt-project-modal .bagpt-project-input-wrap input,
body.bagpt-theme-light #bagpt-project-modal .bagpt-project-input-wrap textarea,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal .bagpt-project-input-wrap input,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal .bagpt-project-input-wrap textarea {
border-color: rgba(15, 23, 42, 0.12) !important;
background: #ffffff !important;
color: rgba(15, 23, 42, 0.92) !important;
}
body.bagpt-theme-light #bagpt-project-modal #bagpt-project-file-list,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal #bagpt-project-file-list {
border-color: rgba(15, 23, 42, 0.1) !important;
background: rgba(248, 250, 252, 0.95) !important;
color: rgba(15, 23, 42, 0.88) !important;
}
body.bagpt-theme-light #bagpt-project-modal #bagpt-project-save-status[data-state="loading"],
#ai-chat-app.bagpt-theme-light #bagpt-project-modal #bagpt-project-save-status[data-state="loading"] {
color: rgba(3, 105, 161, 0.95) !important;
}
body.bagpt-theme-light #bagpt-project-modal #bagpt-project-save-status[data-state="success"],
#ai-chat-app.bagpt-theme-light #bagpt-project-modal #bagpt-project-save-status[data-state="success"] {
color: rgba(21, 128, 61, 0.95) !important;
}
body.bagpt-theme-light #bagpt-project-modal #bagpt-project-save-status[data-state="error"],
#ai-chat-app.bagpt-theme-light #bagpt-project-modal #bagpt-project-save-status[data-state="error"] {
color: rgba(185, 28, 28, 0.95) !important;
}
body.bagpt-theme-light #bagpt-project-modal .text-white,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal .text-white {
color: rgba(15, 23, 42, 0.92) !important;
}
body.bagpt-theme-light #bagpt-project-modal .text-white\/75,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal .text-white\/75 {
color: rgba(51, 65, 85, 0.9) !important;
}
body.bagpt-theme-light #bagpt-project-modal .text-white\/60,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal .text-white\/60 {
color: rgba(71, 85, 105, 0.88) !important;
}
body.bagpt-theme-light #bagpt-project-modal .text-white\/45,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal .text-white\/45 {
color: rgba(100, 116, 139, 0.9) !important;
}
body.bagpt-theme-light #bagpt-project-modal .text-white\/35,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal .text-white\/35 {
color: rgba(100, 116, 139, 0.75) !important;
}
body.bagpt-theme-light #bagpt-project-modal .text-white\/80,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal .text-white\/80 {
color: rgba(30, 41, 59, 0.9) !important;
}
body.bagpt-theme-light #bagpt-project-modal button[data-bagpt-project-close],
#ai-chat-app.bagpt-theme-light #bagpt-project-modal button[data-bagpt-project-close] {
color: rgba(71, 85, 105, 0.65) !important;
}
body.bagpt-theme-light #bagpt-project-modal button[data-bagpt-project-close]:hover,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal button[data-bagpt-project-close]:hover {
background: rgba(15, 23, 42, 0.06) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
body.bagpt-theme-light #bagpt-project-modal #bagpt-project-next,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal #bagpt-project-next {
color: rgba(8, 47, 73, 0.95) !important;
}
body.bagpt-theme-light #bagpt-project-modal #bagpt-project-create-submit,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal #bagpt-project-create-submit {
color: #ffffff !important;
}
body.bagpt-theme-light #bagpt-project-modal #bagpt-project-back,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal #bagpt-project-back {
border-color: rgba(15, 23, 42, 0.14) !important;
background: rgba(15, 23, 42, 0.04) !important;
color: rgba(15, 23, 42, 0.88) !important;
}
body.bagpt-theme-light #bagpt-project-modal #bagpt-project-back:hover,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal #bagpt-project-back:hover {
background: rgba(15, 23, 42, 0.08) !important;
}
body.bagpt-theme-light #bagpt-project-modal #bagpt-project-files,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal #bagpt-project-files {
border-color: rgba(6, 182, 212, 0.38) !important;
background: rgba(6, 182, 212, 0.06) !important;
color: rgba(15, 23, 42, 0.88) !important;
}
body.bagpt-theme-light #bagpt-project-modal #bagpt-project-files::file-selector-button,
body.bagpt-theme-light #bagpt-project-modal #bagpt-project-files::-webkit-file-upload-button,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal #bagpt-project-files::file-selector-button,
#ai-chat-app.bagpt-theme-light #bagpt-project-modal #bagpt-project-files::-webkit-file-upload-button {
background: rgba(6, 182, 212, 0.15) !important;
color: rgba(8, 47, 73, 0.95) !important;
}
body.bagpt-theme-light #bagpt-project-edit-instructions-modal .bagpt-project-modal-shell,
#ai-chat-app.bagpt-theme-light #bagpt-project-edit-instructions-modal .bagpt-project-modal-shell {
background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(99, 102, 241, 0.07)) !important;
}
body.bagpt-theme-light #bagpt-project-edit-instructions-modal .bagpt-project-modal-inner,
#ai-chat-app.bagpt-theme-light #bagpt-project-edit-instructions-modal .bagpt-project-modal-inner {
background: #ffffff !important;
border: 1px solid rgba(15, 23, 42, 0.1) !important;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.1) !important;
}
body.bagpt-theme-light #bagpt-project-edit-instructions-modal textarea,
#ai-chat-app.bagpt-theme-light #bagpt-project-edit-instructions-modal textarea {
border-color: rgba(15, 23, 42, 0.12) !important;
background: #ffffff !important;
color: rgba(15, 23, 42, 0.92) !important;
}
body.bagpt-theme-light #bagpt-project-edit-instructions-modal textarea:focus,
#ai-chat-app.bagpt-theme-light #bagpt-project-edit-instructions-modal textarea:focus {
border-color: rgba(6, 182, 212, 0.45) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.12) !important;
}
body.bagpt-theme-light #bagpt-project-edit-instructions-modal .text-white,
#ai-chat-app.bagpt-theme-light #bagpt-project-edit-instructions-modal .text-white {
color: rgba(15, 23, 42, 0.92) !important;
}
body.bagpt-theme-light #bagpt-project-edit-instructions-modal .text-white\/45,
body.bagpt-theme-light #bagpt-project-edit-instructions-modal .text-white\/60,
#ai-chat-app.bagpt-theme-light #bagpt-project-edit-instructions-modal .text-white\/45,
#ai-chat-app.bagpt-theme-light #bagpt-project-edit-instructions-modal .text-white\/60 {
color: rgba(100, 116, 139, 0.88) !important;
}
body.bagpt-theme-light #bagpt-project-edit-instructions-modal .text-white\/55,
#ai-chat-app.bagpt-theme-light #bagpt-project-edit-instructions-modal .text-white\/55 {
color: rgba(71, 85, 105, 0.72) !important;
}
body.bagpt-theme-light #bagpt-project-edit-instructions-field::placeholder,
#ai-chat-app.bagpt-theme-light #bagpt-project-edit-instructions-field::placeholder {
color: rgba(100, 116, 139, 0.55) !important;
}
body.bagpt-theme-light #bagpt-project-edit-instructions-modal button[data-bagpt-edit-ins-close],
#ai-chat-app.bagpt-theme-light #bagpt-project-edit-instructions-modal button[data-bagpt-edit-ins-close] {
color: rgba(71, 85, 105, 0.65) !important;
}
body.bagpt-theme-light #bagpt-project-edit-instructions-modal button[data-bagpt-edit-ins-close]:hover,
#ai-chat-app.bagpt-theme-light #bagpt-project-edit-instructions-modal button[data-bagpt-edit-ins-close]:hover {
background: rgba(15, 23, 42, 0.06) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
body.bagpt-theme-light #bagpt-project-edit-instructions-modal #bagpt-project-edit-instructions-save,
#ai-chat-app.bagpt-theme-light #bagpt-project-edit-instructions-modal #bagpt-project-edit-instructions-save {
color: #ffffff !important;
}
body.bagpt-theme-light #bagpt-project-edit-instructions-modal #bagpt-project-edit-instructions-cancel,
#ai-chat-app.bagpt-theme-light #bagpt-project-edit-instructions-modal #bagpt-project-edit-instructions-cancel {
border-color: rgba(15, 23, 42, 0.14) !important;
background: rgba(15, 23, 42, 0.04) !important;
color: rgba(15, 23, 42, 0.88) !important;
}
body.bagpt-theme-light #bagpt-project-edit-instructions-modal #bagpt-project-edit-instructions-status[data-state="loading"],
#ai-chat-app.bagpt-theme-light #bagpt-project-edit-instructions-modal #bagpt-project-edit-instructions-status[data-state="loading"] {
color: rgba(3, 105, 161, 0.95) !important;
}
body.bagpt-theme-light #bagpt-project-edit-instructions-modal #bagpt-project-edit-instructions-status[data-state="error"],
#ai-chat-app.bagpt-theme-light #bagpt-project-edit-instructions-modal #bagpt-project-edit-instructions-status[data-state="error"] {
color: rgba(185, 28, 28, 0.95) !important;
}
body.bagpt-theme-light #bagpt-project-delete-modal .bagpt-project-modal-shell,
#ai-chat-app.bagpt-theme-light #bagpt-project-delete-modal .bagpt-project-modal-shell {
border-color: rgba(220, 38, 38, 0.3) !important;
background: linear-gradient(135deg, rgba(254, 242, 242, 0.98), rgba(255, 255, 255, 0.99)) !important;
box-shadow: 0 24px 80px rgba(15, 23, 42, 0.12) !important;
}
body.bagpt-theme-light #bagpt-project-delete-modal .bagpt-project-modal-inner,
#ai-chat-app.bagpt-theme-light #bagpt-project-delete-modal .bagpt-project-modal-inner {
background: rgba(255, 255, 255, 0.98) !important;
border: 1px solid rgba(220, 38, 38, 0.22) !important;
}
body.bagpt-theme-light #bagpt-project-delete-modal #bagpt-project-delete-title,
#ai-chat-app.bagpt-theme-light #bagpt-project-delete-modal #bagpt-project-delete-title {
color: rgba(159, 18, 57, 0.98) !important;
}
body.bagpt-theme-light #bagpt-project-delete-modal .text-white\/75,
body.bagpt-theme-light #bagpt-project-delete-modal .text-white\/55,
#ai-chat-app.bagpt-theme-light #bagpt-project-delete-modal .text-white\/75,
#ai-chat-app.bagpt-theme-light #bagpt-project-delete-modal .text-white\/55 {
color: rgba(51, 65, 85, 0.88) !important;
}
body.bagpt-theme-light #bagpt-project-delete-modal .font-semibold.text-white,
#ai-chat-app.bagpt-theme-light #bagpt-project-delete-modal .font-semibold.text-white {
color: rgba(15, 23, 42, 0.94) !important;
}
body.bagpt-theme-light #bagpt-project-delete-modal button[data-bagpt-del-proj-close],
#ai-chat-app.bagpt-theme-light #bagpt-project-delete-modal button[data-bagpt-del-proj-close] {
color: rgba(71, 85, 105, 0.65) !important;
}
body.bagpt-theme-light #bagpt-project-delete-modal button[data-bagpt-del-proj-close]:hover,
#ai-chat-app.bagpt-theme-light #bagpt-project-delete-modal button[data-bagpt-del-proj-close]:hover {
background: rgba(15, 23, 42, 0.06) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
body.bagpt-theme-light #bagpt-project-delete-modal #bagpt-project-delete-confirm,
#ai-chat-app.bagpt-theme-light #bagpt-project-delete-modal #bagpt-project-delete-confirm {
color: #ffffff !important;
}
body.bagpt-theme-light #bagpt-project-delete-modal button[data-bagpt-del-proj-close].border-white\/20,
#ai-chat-app.bagpt-theme-light #bagpt-project-delete-modal button[data-bagpt-del-proj-close].border-white\/20 {
border-color: rgba(15, 23, 42, 0.14) !important;
background: rgba(15, 23, 42, 0.04) !important;
color: rgba(15, 23, 42, 0.88) !important;
}
/* Conversation archive action menu — منوی شناور از حباب بیرون میزند */
#ai-chat-conversations {
overflow-x: visible !important;
}
#ai-chat-sidebar-scroll {
overscroll-behavior: contain;
}
/* Web-search source cards (news-style horizontal slider) */
.bagpt-news-sources {
margin: 0.55rem 0 0.95rem;
}
.bagpt-news-sources .bagpt-news-sources-head {
display: flex;
justify-content: flex-end;
gap: 0.35rem;
margin-bottom: 0.45rem;
}
.bagpt-news-sources .bagpt-news-sources-nav {
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.35);
background: rgba(30, 41, 59, 0.58);
color: rgba(241, 245, 249, 0.95);
line-height: 1;
font-size: 16px;
cursor: pointer;
transition: all 0.18s ease;
}
.bagpt-news-sources .bagpt-news-sources-nav:hover {
border-color: rgba(34, 211, 238, 0.42);
background: rgba(8, 145, 178, 0.35);
}
.bagpt-news-sources .bagpt-news-sources-track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(220px, 268px);
gap: 0.6rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
padding: 0.15rem 0.08rem 0.4rem;
}
.bagpt-news-sources .bagpt-news-sources-track .bagpt-news-source-card {
scroll-snap-align: start;
display: flex;
min-height: 252px;
flex-direction: column;
gap: 0.5rem;
border-radius: 0.95rem;
border: 1px solid rgba(148, 163, 184, 0.28);
background:
radial-gradient(
120% 120% at 100% 0%,
rgba(34, 211, 238, 0.13),
transparent 56%
),
linear-gradient(180deg, rgba(15, 23, 42, 0.75), rgba(2, 6, 23, 0.82));
padding: 0.56rem 0.62rem 0.68rem;
text-decoration: none;
transition:
transform 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease,
opacity 0.2s ease;
}
.bagpt-news-sources .bagpt-news-source-card:hover,
.bagpt-news-sources .bagpt-news-source-card:focus-visible {
transform: translateY(-1px);
border-color: rgba(34, 211, 238, 0.5);
box-shadow: 0 12px 28px rgba(2, 6, 23, 0.38);
outline: none;
}
.bagpt-news-sources .bagpt-news-source-card-media {
width: 100%;
height: 124px;
border-radius: 0.78rem;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.32);
background: linear-gradient(
120deg,
rgba(15, 23, 42, 0.74),
rgba(30, 41, 59, 0.62)
);
display: grid;
place-items: center;
}
.bagpt-news-sources .bagpt-news-source-card-media.is-loading {
position: relative;
}
.bagpt-news-sources .bagpt-news-source-card-media-skeleton {
position: absolute;
inset: 0;
background: linear-gradient(
110deg,
rgba(148, 163, 184, 0.18) 8%,
rgba(203, 213, 225, 0.28) 18%,
rgba(148, 163, 184, 0.18) 33%
);
background-size: 220% 100%;
animation: bagptNewsCardShimmer 1.2s linear infinite;
}
.bagpt-news-sources
.bagpt-news-source-card-media.is-loading
.bagpt-news-source-card-thumb {
opacity: 0;
}
.bagpt-news-sources
.bagpt-news-source-card-media:not(.is-loading)
.bagpt-news-source-card-media-skeleton {
display: none;
}
.bagpt-news-sources .bagpt-news-source-card-media:empty::before {
content: "📰";
font-size: 22px;
opacity: 0.85;
}
.bagpt-news-sources .bagpt-news-source-card-thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity 0.22s ease;
opacity: 1;
}
.bagpt-news-sources .bagpt-news-source-card-media-fallback {
font-size: 22px;
opacity: 0.85;
}
.bagpt-news-sources .bagpt-news-source-card-chip,
.bagpt-news-sources .bagpt-news-source-card-host {
width: fit-content;
max-width: 100%;
border-radius: 999px;
border: 1px solid rgba(125, 211, 252, 0.34);
background: rgba(14, 116, 144, 0.22);
padding: 0.1rem 0.48rem;
color: rgba(207, 250, 254, 0.96);
font-size: 11px;
line-height: 1.45;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bagpt-news-sources .bagpt-news-source-card-title {
color: rgba(248, 250, 252, 0.97);
font-size: 13.8px;
line-height: 1.72;
font-weight: 670;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bagpt-news-sources .bagpt-news-source-card-caption {
color: rgba(203, 213, 225, 0.94);
font-size: 12.6px;
line-height: 1.68;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
#ai-chat-app.bagpt-theme-light .bagpt-news-sources .bagpt-news-source-card {
border-color: rgba(148, 163, 184, 0.34);
background:
radial-gradient(
130% 120% at 100% 0%,
rgba(34, 211, 238, 0.14),
transparent 58%
),
linear-gradient(
180deg,
rgba(255, 255, 255, 0.98),
rgba(248, 250, 252, 0.94)
);
}
#ai-chat-app.bagpt-theme-light .bagpt-news-sources .bagpt-news-sources-nav {
border-color: rgba(148, 163, 184, 0.45);
background: rgba(241, 245, 249, 0.92);
color: rgba(30, 41, 59, 0.92);
}
#ai-chat-app.bagpt-theme-light .bagpt-news-sources .bagpt-news-source-card-chip,
#ai-chat-app.bagpt-theme-light
.bagpt-news-sources
.bagpt-news-source-card-host {
border-color: rgba(14, 116, 144, 0.28);
background: rgba(186, 230, 253, 0.5);
color: rgba(8, 47, 73, 0.92);
}
#ai-chat-app.bagpt-theme-light
.bagpt-news-sources
.bagpt-news-source-card-title {
color: rgba(15, 23, 42, 0.92);
}
#ai-chat-app.bagpt-theme-light
.bagpt-news-sources
.bagpt-news-source-card-caption {
color: rgba(51, 65, 85, 0.9);
}
/* Web search: floating segment pill only (no strip background) */
#bagpt-websearch-segment-wrap {
z-index: 50;
}
#ai-chat-app.bagpt-theme-light .bagpt-websearch-segment {
border-color: rgba(15, 23, 42, 0.14) !important;
background: rgba(255, 255, 255, 0.85) !important;
box-shadow:
0 0 0 1px rgba(15, 23, 42, 0.07),
0 6px 28px rgba(15, 23, 42, 0.1) !important;
}
.bagpt-websearch-segment__btn {
color: rgba(255, 255, 255, 0.55);
background: transparent;
border: none;
cursor: pointer;
}
.bagpt-websearch-segment__btn:hover {
color: rgba(255, 255, 255, 0.88);
}
.bagpt-websearch-segment__btn--active {
color: rgba(255, 255, 255, 0.96) !important;
background: rgba(255, 255, 255, 0.12) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
#ai-chat-app.bagpt-theme-light .bagpt-websearch-segment__btn {
color: rgba(15, 23, 42, 0.55);
}
#ai-chat-app.bagpt-theme-light .bagpt-websearch-segment__btn:hover {
color: rgba(15, 23, 42, 0.9);
}
#ai-chat-app.bagpt-theme-light .bagpt-websearch-segment__btn--active {
color: rgba(15, 23, 42, 0.95) !important;
background: rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-mode-chip-wrap.bagpt-mode-chip,
#ai-chat-app.bagpt-theme-light span#bagpt-mode-chip-wrap {
border-color: rgba(15, 23, 42, 0.14) !important;
background: rgba(255, 255, 255, 0.94) !important;
color: rgba(15, 23, 42, 0.9) !important;
box-shadow: 0 2px 14px rgba(15, 23, 42, 0.08);
}
#ai-chat-app.bagpt-theme-light #bagpt-mode-chip-dismiss {
color: rgba(51, 65, 85, 0.55) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-mode-chip-dismiss:hover {
background: rgba(15, 23, 42, 0.08) !important;
color: rgba(15, 23, 42, 0.95) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-mode-chip-dismiss:focus-visible {
--tw-ring-color: rgba(15, 23, 42, 0.28);
}
.bagpt-serp-row {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 0.75rem;
padding: 0.85rem 0.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
text-decoration: none;
color: inherit;
transition: background 0.15s ease;
}
.bagpt-serp-row:hover {
background: rgba(255, 255, 255, 0.03);
}
.bagpt-serp-row__text {
min-width: 0;
flex: 1;
text-align: right;
}
.bagpt-serp-row__site {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.45);
}
.bagpt-serp-favicon {
width: 1rem;
height: 1rem;
border-radius: 999px;
flex-shrink: 0;
}
.bagpt-serp-sitename {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
}
.bagpt-serp-url-line {
margin-top: 0.1rem;
font-size: 0.7rem;
line-height: 1.3;
color: rgba(255, 255, 255, 0.35);
word-break: break-all;
}
.bagpt-serp-title {
margin-top: 0.2rem;
font-size: 1.05rem;
line-height: 1.35;
color: #8ab4f8;
font-weight: 400;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bagpt-serp-snippet {
margin-top: 0.25rem;
font-size: 0.8rem;
line-height: 1.45;
color: rgba(255, 255, 255, 0.55);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bagpt-serp-thumb-wrap {
flex-shrink: 0;
width: 4.5rem;
height: 4.5rem;
border-radius: 0.65rem;
overflow: hidden;
background: rgba(255, 255, 255, 0.05);
}
.bagpt-serp-thumb {
width: 100%;
height: 100%;
object-fit: cover;
}
.bagpt-serp-thumb-ph {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 1.25rem;
opacity: 0.45;
}
/* نتایج وب: لایهٔ جدا از اسکرول لیست پیامها (مرحلهٔ bagpt-chat-main-stage) */
#bagpt-chat-main-stage {
isolation: isolate;
}
.bagpt-webserp-overlay {
overscroll-behavior: contain;
}
.bagpt-webserp-list {
overscroll-behavior: contain;
}
.bagpt-webserp-empty {
margin: 0;
padding: 0.75rem 0.25rem;
font-size: 0.9rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.55);
}
#ai-chat-app.bagpt-theme-light .bagpt-webserp-empty {
color: rgba(51, 65, 85, 0.75);
}
#ai-chat-app.bagpt-theme-light #bagpt-webserp-overlay {
background: #f8fafc !important;
box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.06);
}
#ai-chat-app.bagpt-theme-light .bagpt-webserp-overlay .bagpt-webserp-list {
background: #f8fafc !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-serp-row {
border-bottom-color: rgba(15, 23, 42, 0.08);
}
#ai-chat-app.bagpt-theme-light .bagpt-serp-row:hover {
background: rgba(15, 23, 42, 0.04);
}
#ai-chat-app.bagpt-theme-light .bagpt-serp-title {
color: #1a73e8;
}
#ai-chat-app.bagpt-theme-light .bagpt-serp-snippet,
#ai-chat-app.bagpt-theme-light .bagpt-serp-url-line {
color: rgba(51, 65, 85, 0.88);
}
#ai-chat-app.bagpt-theme-light .bagpt-serp-row__site,
#ai-chat-app.bagpt-theme-light .bagpt-serp-sitename {
color: rgba(51, 65, 85, 0.65);
}
@keyframes bagptNewsCardShimmer {
0% {
background-position: 200% 0;
}
100% {
background-position: -20% 0;
}
}
#ai-chat-conversations .ai-chat-conv-actions {
align-self: center;
overflow: visible;
}
#ai-chat-conversations .ai-chat-conv-item {
transition: background-color 0.18s ease;
}
#ai-chat-conversations .ai-chat-conv-item:hover,
#ai-chat-conversations .ai-chat-conv-item:focus-within {
background: rgba(255, 255, 255, 0.06);
}
#ai-chat-conversations .ai-chat-conv-item.active {
background: rgba(255, 255, 255, 0.09);
box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.35);
}
#ai-chat-conversations .ai-chat-conv-item.active .ai-chat-conv-title {
color: rgba(255, 255, 255, 0.96) !important;
font-weight: 500;
}
#ai-chat-conversations .ai-chat-conv-menu-toggle {
width: 1.75rem;
height: 1.75rem;
}
.ai-chat-conv-menu {
position: fixed !important;
right: auto !important;
bottom: auto !important;
z-index: 9999 !important;
min-width: 144px;
border-radius: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.12);
background: #151518;
box-shadow:
0 14px 36px rgba(0, 0, 0, 0.45),
0 2px 10px rgba(0, 0, 0, 0.3);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
opacity: 0;
transform: translateY(-4px) scale(0.98);
transform-origin: top left;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.2s ease,
transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0.24s;
}
.ai-chat-conv-menu.is-open {
opacity: 1;
transform: translateY(0) scale(1);
visibility: visible;
pointer-events: auto;
transition:
opacity 0.18s ease,
transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0s;
}
.ai-chat-conv-menu .ai-chat-conv-menu-icon {
display: inline-flex;
width: 1rem;
height: 1rem;
justify-content: center;
align-items: center;
text-align: center;
}
.ai-chat-conv-menu .ai-chat-conv-menu-icon svg {
width: 100%;
height: 100%;
display: block;
}
/* نشان پین: فقط وقتی پین است نمایش داده شود — بدون :not(.hidden) قانون display زیر کلاس Tailwind .hidden را override میکرد */
.ai-chat-conv-pin-indicator:not(.hidden) {
display: inline-flex;
width: 0.875rem;
height: 0.875rem;
align-items: center;
justify-content: center;
}
.ai-chat-conv-pin-indicator .ai-chat-conv-pin-emoji {
font-size: 0.65rem;
line-height: 1;
display: block;
}
.ai-chat-conv-menu .ai-chat-conv-menu-icon--pin .ai-chat-conv-menu-icon-emoji {
font-size: 0.75rem;
line-height: 1;
display: block;
}
.ai-chat-conv-menu .ai-chat-conv-menu-pin,
.ai-chat-conv-menu .ai-chat-conv-menu-rename,
.ai-chat-conv-menu .ai-chat-conv-menu-delete {
border-radius: 0.55rem;
line-height: 1.35;
}
.ai-chat-conv-menu .bagpt-group-sidebar-menu-pin,
.ai-chat-conv-menu .bagpt-group-sidebar-menu-copy,
.ai-chat-conv-menu .bagpt-group-sidebar-menu-rename,
.ai-chat-conv-menu .bagpt-group-sidebar-menu-remove {
border-radius: 0.55rem;
line-height: 1.35;
}
@media (max-width: 767px) {
#ai-chat-conversations .ai-chat-conv-actions {
opacity: 1 !important;
}
#bagpt-group-sidebar-list .bagpt-group-sidebar-actions {
opacity: 1 !important;
}
}
@media (min-width: 768px) {
#ai-chat-conversations .ai-chat-conv-item .ai-chat-conv-actions {
opacity: 0;
}
#ai-chat-conversations .ai-chat-conv-item:hover .ai-chat-conv-actions,
#ai-chat-conversations .ai-chat-conv-item:focus-within .ai-chat-conv-actions {
opacity: 1;
}
#bagpt-group-sidebar-list .bagpt-group-sidebar-item .bagpt-group-sidebar-actions {
opacity: 0;
}
#bagpt-group-sidebar-list .bagpt-group-sidebar-item:hover .bagpt-group-sidebar-actions,
#bagpt-group-sidebar-list .bagpt-group-sidebar-item:focus-within .bagpt-group-sidebar-actions {
opacity: 1;
}
}
body.bagpt-theme-light .ai-chat-conv-menu,
#ai-chat-app.bagpt-theme-light .ai-chat-conv-menu {
background: #ffffff;
border-color: rgba(15, 23, 42, 0.14);
}
#ai-chat-app.bagpt-theme-light
#ai-chat-conversations
.ai-chat-conv-menu-toggle {
background: rgba(15, 23, 42, 0.08);
color: rgba(15, 23, 42, 0.8);
}
#ai-chat-app.bagpt-theme-light #ai-chat-conversations .ai-chat-conv-item:hover,
#ai-chat-app.bagpt-theme-light
#ai-chat-conversations
.ai-chat-conv-item:focus-within {
background: rgba(15, 23, 42, 0.06);
}
#ai-chat-app.bagpt-theme-light #ai-chat-conversations .ai-chat-conv-item.active {
background: rgba(15, 23, 42, 0.09);
box-shadow: inset 2px 0 0 rgba(15, 23, 42, 0.4);
}
#ai-chat-app.bagpt-theme-light
#ai-chat-conversations
.ai-chat-conv-item.active
.ai-chat-conv-title {
font-weight: 500;
}
#ai-chat-app.bagpt-theme-light #ai-chat-conversations .ai-chat-conv-menu-pin,
#ai-chat-app.bagpt-theme-light
#ai-chat-conversations
.ai-chat-conv-menu-rename {
color: #0f172a;
}
#ai-chat-app.bagpt-theme-light
#ai-chat-conversations
.ai-chat-conv-menu-delete {
color: #be123c;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-sidebar-list .bagpt-group-sidebar-menu-toggle,
body.bagpt-theme-light #bagpt-group-sidebar-list .bagpt-group-sidebar-menu-toggle {
background: rgba(15, 23, 42, 0.08);
color: rgba(15, 23, 42, 0.8);
}
#ai-chat-app.bagpt-theme-light .ai-chat-conv-menu .bagpt-group-sidebar-menu-pin,
#ai-chat-app.bagpt-theme-light .ai-chat-conv-menu .bagpt-group-sidebar-menu-copy,
#ai-chat-app.bagpt-theme-light .ai-chat-conv-menu .bagpt-group-sidebar-menu-rename,
body.bagpt-theme-light .ai-chat-conv-menu .bagpt-group-sidebar-menu-pin,
body.bagpt-theme-light .ai-chat-conv-menu .bagpt-group-sidebar-menu-copy,
body.bagpt-theme-light .ai-chat-conv-menu .bagpt-group-sidebar-menu-rename {
color: #0f172a;
}
#ai-chat-app.bagpt-theme-light .ai-chat-conv-menu .bagpt-group-sidebar-menu-remove,
body.bagpt-theme-light .ai-chat-conv-menu .bagpt-group-sidebar-menu-remove {
color: #be123c;
}
/* Topbar incognito active state */
#bagpt-incognito-toggle .bagpt-incognito-toggle__icon {
display: block;
width: 1.1rem;
height: 1.1rem;
overflow: visible;
}
#bagpt-incognito-toggle .bagpt-incognito-toggle__icon * {
vector-effect: non-scaling-stroke;
}
#ai-chat-app #bagpt-incognito-toggle.is-active,
#bagpt-incognito-toggle.is-active {
border-color: rgba(244, 114, 182, 0.5) !important;
background-color: rgba(236, 72, 153, 0.16) !important;
background-image: linear-gradient(180deg,
rgba(244, 114, 182, 0.18) 0%,
rgba(236, 72, 153, 0.10) 100%) !important;
color: rgba(253, 242, 248, 0.96) !important;
box-shadow:
inset 0 0.5px 0 rgba(253, 242, 248, 0.22),
inset 0 -0.5px 0 rgba(120, 30, 70, 0.32),
0 2px 10px rgba(236, 72, 153, 0.22) !important;
}
#ai-chat-app #bagpt-incognito-toggle.is-active:hover,
#bagpt-incognito-toggle.is-active:hover {
background-color: rgba(236, 72, 153, 0.23) !important;
border-color: rgba(244, 114, 182, 0.65) !important;
}
@keyframes bagptIncognitoGlowPulse {
0% {
filter: drop-shadow(0 0 0 rgba(244, 114, 182, 0));
}
50% {
filter: drop-shadow(0 0 18px rgba(244, 114, 182, 0.35));
}
100% {
filter: drop-shadow(0 0 0 rgba(244, 114, 182, 0));
}
}
@keyframes bagptIncognitoFadeUp {
0% {
opacity: 0;
transform: translateY(10px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
#bagpt-welcome-hero.bagpt-incognito-hero-on #bagpt-welcome-title {
color: rgba(252, 231, 243, 0.98);
text-shadow: 0 0 26px rgba(244, 114, 182, 0.22);
margin-bottom: 0.75rem;
}
#bagpt-welcome-incognito-note {
font-size: 16px;
line-height: 1.7;
margin-top: 0.35rem;
}
#bagpt-welcome-hero.bagpt-incognito-hero-enter #bagpt-welcome-title {
animation: bagptIncognitoGlowPulse 0.72s ease-out;
}
#bagpt-welcome-hero.bagpt-incognito-hero-enter #bagpt-welcome-incognito-note {
animation: bagptIncognitoFadeUp 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}
/* کارت اعلان قابلیت (تصویرساز) در لندینگ چت — حالت روشن */
#ai-chat-app.bagpt-theme-light .bagpt-welcome-feature-card-inner {
background: rgba(255, 255, 255, 0.96) !important;
color: #1f2937;
}
#ai-chat-app.bagpt-theme-light .bagpt-welcome-feature-card-inner h3 {
color: #0f172a !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-welcome-feature-card-inner p {
color: #475569 !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-welcome-feature-card-inner a {
color: #5b21b6 !important;
border-color: rgba(192, 132, 252, 0.45) !important;
background: linear-gradient(to left, rgba(233, 213, 255, 0.35), rgba(196, 181, 253, 0.2)) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-welcome-feature-card-inner .text-fuchsia-200\/95,
#ai-chat-app.bagpt-theme-light .bagpt-welcome-feature-card-inner .text-amber-300\/90,
#ai-chat-app.bagpt-theme-light .bagpt-welcome-feature-card-inner .text-fuchsia-50\/95,
#ai-chat-app.bagpt-theme-light .bagpt-welcome-feature-card-inner .text-white\/50 {
color: #5b21b6 !important;
opacity: 0.9;
}
#ai-chat-app.bagpt-theme-light .bagpt-welcome-feature-card-inner .bg-fuchsia-500\/10,
#ai-chat-app.bagpt-theme-light .bagpt-welcome-feature-card-inner .border-fuchsia-400\/35 {
background: rgba(250, 232, 255, 0.55) !important;
border-color: rgba(168, 85, 247, 0.4) !important;
color: #5b21b6 !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-welcome-feature-card-inner .text-amber-300\/90 {
color: #b45309 !important;
opacity: 1;
}
#ai-chat-app.bagpt-theme-light
#bagpt-welcome-gptimg2-card-close,
#ai-chat-app.bagpt-theme-light
.bagpt-welcome-feature-card-inner
#bagpt-welcome-gptimg2-card-close {
color: #64748b !important;
background: rgba(15, 23, 42, 0.06) !important;
border-color: rgba(15, 23, 42, 0.12) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-welcome-gptimg2-card-close:hover,
#ai-chat-app.bagpt-theme-light
.bagpt-welcome-feature-card-inner
#bagpt-welcome-gptimg2-card-close:hover {
color: #0f172a !important;
background: rgba(15, 23, 42, 0.1) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-welcome-upgrade-cta,
body.bagpt-theme-light #bagpt-welcome-upgrade-cta {
border-color: rgba(15, 23, 42, 0.12) !important;
background: #0f172a !important;
color: #f8fafc !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-welcome-upgrade-cta:hover,
body.bagpt-theme-light #bagpt-welcome-upgrade-cta:hover {
background: #1e293b !important;
border-color: rgba(15, 23, 42, 0.18) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-welcome-upgrade-cta svg,
body.bagpt-theme-light #bagpt-welcome-upgrade-cta svg {
color: rgba(248, 250, 252, 0.65) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-welcome-upgrade-cta:focus-visible,
body.bagpt-theme-light #bagpt-welcome-upgrade-cta:focus-visible {
--tw-ring-offset-color: #f8fafc;
}
body.bagpt-theme-light .ai-chat-conv-menu .ai-chat-conv-menu-icon,
#ai-chat-app.bagpt-theme-light .ai-chat-conv-menu .ai-chat-conv-menu-icon {
color: inherit;
}
/* Odyssey starfield (enabled by .bagpt-bg-stars on app root) */
#ai-chat-app.bagpt-bg-stars main {
position: relative;
overflow: hidden;
background: #03050b;
}
#ai-chat-app.bagpt-has-chat main {
background:
radial-gradient(
1200px 520px at 50% -8%,
rgba(56, 189, 248, 0.045),
transparent 58%
),
radial-gradient(
900px 420px at 50% 100%,
rgba(168, 85, 247, 0.04),
transparent 62%
),
linear-gradient(180deg, #050608 0%, #090b10 48%, #07080b 100%) !important;
}
#ai-chat-app.bagpt-has-chat .bagpt-main-ambient,
#ai-chat-app.bagpt-has-chat #bagpt-stars-canvas {
display: none !important;
}
#ai-chat-app.bagpt-bg-stars main::before,
#ai-chat-app.bagpt-bg-stars main::after {
content: "";
position: absolute;
inset: -12%;
pointer-events: none;
}
/* subtle arctic sky haze (no artificial green tint) */
#ai-chat-app.bagpt-bg-stars main::before {
z-index: 0;
display: none;
}
/* vignette for cinematic depth */
#ai-chat-app.bagpt-bg-stars main::after {
z-index: 1;
display: none;
}
#ai-chat-app.bagpt-bg-stars .bagpt-main-ambient {
z-index: 0;
}
#ai-chat-app.bagpt-bg-stars #bagpt-stars-canvas {
z-index: 2 !important;
}
#bagpt-stars-canvas {
width: 100% !important;
height: 100% !important;
display: block !important;
transition: filter 0.45s ease, opacity 0.45s ease;
will-change: auto;
}
/*
* هنگام تایپ: blur روی خود کانوس (لندینگ و چت فعال).
* کانوس با z-index بالاتر از #bagpt-chat-body رسم میشود → backdrop روی بدنهٔ چت ستاره را نمیبیند؛ فقط filter روی canvas اثر دارد.
*/
#ai-chat-app.bagpt-starfield-input-soft #bagpt-stars-canvas:not(.hidden) {
filter: blur(14px) saturate(0.88) !important;
opacity: 0.8 !important;
will-change: filter;
}
/*
* چت فعال: حتی وقتی انیمیشن ستاره عمداً freeze میشود (screen-stop)،
* پسزمینه باید نرم/بلور بماند.
*/
#ai-chat-app.bagpt-bg-stars.bagpt-has-chat #bagpt-stars-canvas:not(.hidden) {
filter: blur(14px) saturate(0.88) !important;
opacity: 0.8 !important;
will-change: filter;
}
@media (prefers-reduced-motion: reduce) {
#ai-chat-app.bagpt-starfield-input-soft #bagpt-stars-canvas:not(.hidden) {
filter: blur(8px) saturate(0.95) !important;
opacity: 0.9 !important;
}
#ai-chat-app.bagpt-bg-stars.bagpt-has-chat #bagpt-stars-canvas:not(.hidden) {
filter: blur(8px) saturate(0.95) !important;
opacity: 0.9 !important;
}
}
#ai-chat-app.bagpt-bg-stars .bagpt-main-glow,
#ai-chat-app.bagpt-bg-stars .bagpt-main-noise {
display: none !important;
}
.bagpt-main-glow,
.bagpt-main-noise {
display: none !important;
}
/* Grok-like landing: centered compose, then animate to bottom on first message */
/* minimalist landing on all sizes: remove extra welcome cards/text */
#ai-chat-app:not(.bagpt-has-chat) #ai-chat-welcome .bagpt-welcome-kicker,
#ai-chat-app:not(.bagpt-has-chat) #ai-chat-welcome .bagpt-welcome-tagline,
#ai-chat-app:not(.bagpt-has-chat) #ai-chat-welcome .bagpt-welcome-pill,
#ai-chat-app:not(.bagpt-has-chat) #ai-chat-welcome #bagpt-welcome-chips,
#ai-chat-app:not(.bagpt-has-chat) #ai-chat-welcome .bagpt-welcome-studio,
#ai-chat-app:not(.bagpt-has-chat) #ai-chat-welcome p.w-full,
#ai-chat-app:not(.bagpt-has-chat) #ai-chat-welcome .bagpt-welcome-orb-wrap {
display: none !important;
}
/* لندینگ موبایل: عنوان نزدیک پایین ناحیهٔ پیام (بالای کپسول پایینچسب)، 20px فاصله */
#ai-chat-app:not(.bagpt-has-chat) #ai-chat-messages-list {
justify-content: flex-end;
}
#ai-chat-app:not(.bagpt-has-chat) #ai-chat-welcome {
padding-top: 0;
padding-bottom: 0;
}
#ai-chat-app:not(.bagpt-has-chat) #bagpt-welcome-hero {
margin-bottom: 0;
}
#ai-chat-app:not(.bagpt-has-chat) #bagpt-welcome-title {
margin-bottom: 0 !important;
font-size: clamp(1.9rem, 5.2vw, 2.45rem);
line-height: 1.12;
}
#ai-chat-app:not(.bagpt-has-chat) #ai-chat-scroll-wrap {
opacity: 0;
pointer-events: none;
}
/* دسکتاپ: منوی «بیشتر» کارت کنار دکمه — نه شیت تمامعرض/لغزان موبایل */
#ai-chat-mobile-tools-sheet.bagpt-mobile-tools-sheet--desktop-popover .bagpt-mobile-tools-backdrop {
background-color: rgba(0, 0, 0, 0.32);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
#ai-chat-mobile-tools-sheet.bagpt-mobile-tools-sheet--desktop-popover .bagpt-mobile-tools-drag-hint {
display: none;
}
#ai-chat-mobile-tools-sheet.bagpt-mobile-tools-sheet--desktop-popover .bagpt-mobile-tools-title {
text-align: right;
}
#ai-chat-mobile-tools-sheet.bagpt-mobile-tools-sheet--desktop-popover .bagpt-mobile-tools-panel {
transform: translate3d(0, 0, 0) !important;
border-radius: 1rem !important;
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55) !important;
padding-top: 0.65rem !important;
transition:
opacity 0.2s ease,
transform 0.2s ease !important;
}
#ai-chat-scroll-wrap {
width: auto;
}
.bagpt-scroll-fab {
will-change: transform, opacity;
}
.bagpt-scroll-fab.is-visible {
pointer-events: auto !important;
opacity: 1 !important;
transform: translate3d(0, 0, 0) !important;
animation:
bagpt-scroll-fab-in 260ms cubic-bezier(0.22, 1, 0.36, 1),
bagpt-scroll-fab-idle 2.4s ease-in-out 320ms infinite;
}
@keyframes bagpt-scroll-fab-in {
0% {
opacity: 0;
transform: translate3d(0, 10px, 0) scale(0.96);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes bagpt-scroll-fab-idle {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -2px, 0);
}
}
/* keep messages clipped inside chat viewport; reserve dock space on list */
#ai-chat-messages.has-messages #ai-chat-messages-inner {
padding-bottom: 0 !important;
overflow: visible;
}
#ai-chat-messages.has-messages #ai-chat-messages-list {
flex: 0 0 auto !important;
min-height: 0 !important;
width: 100%;
}
#ai-chat-app.bagpt-has-chat #ai-chat-messages-inner {
padding-bottom: 0 !important;
overflow: visible;
}
#ai-chat-app.bagpt-has-chat #ai-chat-messages-list {
flex: 0 0 auto;
min-height: 0;
width: 100%;
padding-bottom: 20px !important;
}
#ai-chat-messages.has-messages {
scroll-padding-bottom: calc(
max(var(--bagpt-chat-bottom-inset, 0px), var(--bagpt-messages-pad, 0px)) +
env(safe-area-inset-bottom, 0px)
);
}
/* موبایل: داک ورودی نسبت به ویوپورت ثابت میماند تا با اسکرول مرورگر هنگام باز بودن کیبورد جابهجا نشود */
@media (max-width: 767px) {
.ai-chat-input-dock.bagpt-input-dock {
position: relative;
left: auto;
right: auto;
bottom: auto;
width: 100%;
flex-shrink: 0;
z-index: 30;
transform: none;
backface-visibility: visible;
}
/*
* اورلی گروه خودش fixed تمامصفحه است؛ داک ورودی اینجا باید در ستون flex بماند.
* اگر همان fixed چت اصلی را بگیرد، از جریان خارج میشود و روی آخرین پیام میافتد.
*/
#bagpt-group-overlay #bagpt-group-input-dock.ai-chat-input-dock.bagpt-input-dock {
position: relative !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100%;
flex-shrink: 0;
z-index: 30;
transform: none !important;
backface-visibility: visible;
}
#ai-chat-messages-list {
padding-bottom: calc(
0.75rem + env(safe-area-inset-bottom, 0px)
) !important;
}
#ai-chat-messages {
scroll-padding-bottom: calc(
0.75rem + env(safe-area-inset-bottom, 0px)
);
}
/* چت گروهی: داک در جریان flex است؛ فقط فاصلهٔ ایمن + کیبورد مجازی برای اسکرول */
#bagpt-group-messages {
padding-bottom: calc(
0.5rem + env(safe-area-inset-bottom, 0px) + var(--bagpt-kb, 0px)
) !important;
scroll-padding-bottom: calc(
0.5rem + env(safe-area-inset-bottom, 0px) + var(--bagpt-kb, 0px)
);
}
#ai-chat-scroll-wrap {
bottom: calc(
0.75rem + env(safe-area-inset-bottom, 0px)
);
}
/*
* موبایلِ پینشده در حال تایپ:
* action bar پیامهای قدیمی موقتاً مخفی شود تا داخل viewport نلغزد
* و reflow آن باعث لرزش صفحه نشود.
*/
#ai-chat-messages.bagpt-mobile-pin-streaming
#ai-chat-messages-list
.ai-chat-msg.assistant
.ai-chat-msg-actions-wrap {
opacity: 0 !important;
pointer-events: none !important;
margin-top: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
transform: translateY(-4px);
}
#ai-chat-messages.bagpt-mobile-pin-streaming
#ai-chat-messages-list
.ai-chat-msg.assistant
.ai-chat-msg-actions-wrap[data-bagpt-mobile-hide-actions="1"] {
display: none !important;
}
}
@media (min-width: 768px) {
#bagpt-chat-body {
position: relative;
}
/*
* لندینگ دسکتاپ: کپسول با transform به وسط عمودی میرود؛ اگر لیست پیام flex-end باشد،
* hero پایین ناحیه میماند و زیر کپسول دیده میشود — hero را بالای ناحیه (بالای کپسول) میچسبانیم.
*/
#ai-chat-app:not(.bagpt-has-chat) #ai-chat-messages-list {
justify-content: flex-start;
}
#ai-chat-app:not(.bagpt-has-chat) #ai-chat-welcome {
justify-content: flex-start;
padding-top: clamp(0.75rem, 3vh, 2rem);
padding-bottom: 0;
}
#ai-chat-app:not(.bagpt-has-chat) #bagpt-welcome-hero {
margin-bottom: 0;
}
/* لندینگ (بدون پیام): داک شناور وسط — همچنان absolute */
#ai-chat-app:not(.bagpt-has-chat) .ai-chat-input-dock.bagpt-input-dock {
position: absolute;
inset-inline: 0;
bottom: 0;
top: auto;
z-index: 40;
transition:
transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.28s ease,
padding 0.32s ease;
will-change: transform, opacity;
transform: translate3d(0, calc(-50vh + 6.15rem), 0) !important;
opacity: 1;
backface-visibility: hidden;
background-image: none !important;
background-color: transparent !important;
}
/*
* بنر سهمیه (چندخطی) بالای کپسول = داک بلندتر میشود و روی کارت «تصویرساز» لندینگ میافتد.
* کمی داک را به پایین میکشیم + فضای مردهٔ پایین ناحیه را زیاد میکنیم.
*/
#ai-chat-app:not(.bagpt-has-chat).bagpt-landing-input-limit-shown
.ai-chat-input-dock.bagpt-input-dock {
transform: translate3d(
0,
calc(-50vh + 6.15rem + min(12rem, 22vh)),
0
)
!important;
}
/*
* چت فعال روی دسکتاپ: داک در جریان عادی flex است (shrink-0)، نه لایهٔ روی ناحیهٔ اسکرول.
* فضای خواندن = فقط #bagpt-chat-main-stage؛ ارتفاع داک از flex کم میشود، نه با padding تکراری.
*/
#ai-chat-app.bagpt-has-chat .ai-chat-input-dock.bagpt-input-dock {
position: relative;
inset: auto;
width: 100%;
flex-shrink: 0;
z-index: 20;
transform: none;
transition:
opacity 0.28s ease,
padding 0.32s ease;
will-change: auto;
backface-visibility: visible;
}
#ai-chat-app:not(.bagpt-has-chat) #ai-chat-messages {
overflow: hidden;
}
#ai-chat-app:not(.bagpt-has-chat) #ai-chat-messages-inner {
padding-bottom: 8rem !important;
}
#ai-chat-app:not(.bagpt-has-chat).bagpt-landing-input-limit-shown
#ai-chat-messages-inner {
padding-bottom: min(22rem, 48vh) !important;
}
#ai-chat-app:not(.bagpt-has-chat) #ai-chat-welcome .bagpt-welcome-title {
margin-bottom: 0;
font-size: clamp(2.1rem, 2.85vw, 2.95rem);
}
#ai-chat-app.bagpt-has-chat #ai-chat-messages-inner {
padding-bottom: 0 !important;
overflow: visible;
}
#ai-chat-app.bagpt-has-chat #ai-chat-messages.has-messages {
scroll-padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
#ai-chat-app.bagpt-has-chat #ai-chat-messages-list {
flex: 0 0 auto;
min-height: 0;
width: 100%;
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
}
#ai-chat-app.bagpt-has-chat #ai-chat-scroll-wrap {
bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
/* یا نوار SuperGrok (چت جدید) یا هدر چت (گفتگوی فعال) — نه هر دو */
#ai-chat-app:not(.bagpt-has-chat) #ai-chat-header {
display: none !important;
}
#ai-chat-app.bagpt-has-chat .bagpt-topbar {
display: none !important;
}
#ai-chat-app.bagpt-sidebar-collapsed #ai-chat-sidebar {
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0 !important;
border-width: 0 !important;
opacity: 0;
overflow: hidden;
pointer-events: none;
}
/*
* چت گروهی: اورلی تمامصفحه رویدادها را از نوار کناری میگیرد.
* وقتی نوار ۲۶۰px باز است، اورلی فقط روی ناحیهٔ اصلی است تا سایدبار (لیست گروهها) دیده و قابل کلیک بماند.
* left/right فیزیکی + !important تا روی کلاسهای Tailwind (inset-0) غلبه کند.
*/
#ai-chat-app:not(.bagpt-sidebar-collapsed) #bagpt-group-overlay {
inset: unset !important;
top: 0 !important;
bottom: 0 !important;
width: auto !important;
height: auto !important;
max-width: none !important;
/* در RTL نوار کناری سمت آغاز خط است؛ ۲۶۰px برای لیست گروهها خالی میماند */
inset-inline-start: 260px !important;
inset-inline-end: 0 !important;
}
}
/* دسکتاپ با ارتفاع کم: جلوگیری از همپوشانی hero و input dock در لندینگ */
@media (min-width: 768px) and (max-height: 820px) {
#ai-chat-app:not(.bagpt-has-chat) #ai-chat-welcome {
padding-top: clamp(0.15rem, 0.9vh, 0.65rem);
}
#ai-chat-app:not(.bagpt-has-chat) #bagpt-welcome-hero {
max-width: min(560px, 92%);
}
#ai-chat-app:not(.bagpt-has-chat) .ai-chat-input-dock.bagpt-input-dock {
transform: translate3d(0, calc(-42vh + 5.65rem), 0) !important;
}
#ai-chat-app:not(.bagpt-has-chat).bagpt-landing-input-limit-shown
.ai-chat-input-dock.bagpt-input-dock {
transform: translate3d(
0,
calc(-42vh + 5.65rem + min(10rem, 18vh)),
0
)
!important;
}
}
@media (min-width: 768px) and (max-height: 700px) {
#ai-chat-app:not(.bagpt-has-chat) #bagpt-welcome-hero {
max-width: min(520px, 90%);
transform: scale(0.92);
transform-origin: top center;
}
#ai-chat-app:not(.bagpt-has-chat) .ai-chat-input-dock.bagpt-input-dock {
transform: translate3d(0, calc(-37vh + 5.15rem), 0) !important;
}
#ai-chat-app:not(.bagpt-has-chat).bagpt-landing-input-limit-shown
.ai-chat-input-dock.bagpt-input-dock {
transform: translate3d(
0,
calc(-37vh + 5.15rem + min(8rem, 16vh)),
0
)
!important;
}
}
/*
* موبایل: اورلی گروه را کمی پایینتر از کشویی سایدبار (z-50) تا با زدن همبرگر، لیست گروهها روی اورلی بیاید.
*/
@media (max-width: 767px) {
#bagpt-group-overlay {
z-index: 44 !important;
}
}
/*
* دکمهٔ جمع/باز نوار کناری: SVG پایه «<<» (سمت چپ) برای «باز کردن» وقتی نوار جمع است.
* وقتی نوار باز است، با انیمیشن به «>>» (سمت راست) برای «جمع کردن» میچرخد.
*/
.ai-chat-sidebar-collapse svg {
transform-origin: 50% 50%;
transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
#ai-chat-app:not(.bagpt-sidebar-collapsed) .ai-chat-sidebar-collapse svg {
transform: scaleX(-1);
}
/* prevent messages from visually showing under floating compose in active chats */
#ai-chat-app.bagpt-has-chat .ai-chat-input-dock.bagpt-input-dock {
background-image: linear-gradient(
to top,
rgba(3, 5, 11, 0.97) 0%,
rgba(3, 5, 11, 0.9) 52%,
rgba(3, 5, 11, 0) 100%
) !important;
}
#ai-chat-app.bagpt-theme-light.bagpt-has-chat
.ai-chat-input-dock.bagpt-input-dock {
background-image: linear-gradient(
to top,
rgba(249, 250, 251, 0.96) 0%,
rgba(249, 250, 251, 0.9) 52%,
rgba(249, 250, 251, 0) 100%
) !important;
}
/* ============================================================
* iOS 26 «Liquid Glass» — داک ورودی چت
* gradient سیاه/سفید فعلی را با فراستگلس اشباعشده جایگزین میکند،
* کپسول پیل و دکمهها را به ظاهر دکمههای شیشهایِ iOS 26 تبدیل میکند.
* نه HTML تغییر میکند نه position فعلی (موبایل fixed، دسکتاپ relative، لندینگ absolute).
* ============================================================ */
/* لایهٔ شیشهای — gradient سیاهِ تخت را خنثی میکند و یک plate شیشهای زیر محتوای داک میچیند */
#ai-chat-app.bagpt-has-chat .ai-chat-input-dock.bagpt-input-dock {
background-image: none !important;
background-color: transparent !important;
border-top-color: transparent !important;
}
#ai-chat-app.bagpt-has-chat .ai-chat-input-dock.bagpt-input-dock::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(180deg,
rgba(10, 12, 18, 0.55) 0%,
rgba(8, 10, 14, 0.78) 45%,
rgba(6, 8, 12, 0.88) 100%);
/* بلورِ نرم و حرفهای: شعاع بزرگتر و saturationِ پایینتر = شیشهٔ ماتتر و آرامتر،
* کاملاً متفاوت از کپسولِ کنترلها (28px / 180%) که شفافتر و پرجزئیاتتر است. */
-webkit-backdrop-filter: blur(56px) saturate(140%);
backdrop-filter: blur(56px) saturate(140%);
/* ماسک نرم در لبهٔ بالا — محتوای زیر داک بهجای برشِ سخت، بهتدریج محو میشود */
-webkit-mask-image: linear-gradient(180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.42) 12%,
rgba(0, 0, 0, 0.88) 28%,
rgba(0, 0, 0, 1) 44%,
rgba(0, 0, 0, 1) 100%);
mask-image: linear-gradient(180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.42) 12%,
rgba(0, 0, 0, 0.88) 28%,
rgba(0, 0, 0, 1) 44%,
rgba(0, 0, 0, 1) 100%);
}
/* موبایل: شیشهٔ داک تا پایین صفحه (روی safe-area-inset و کیبورد) ادامه پیدا میکند
* تا فاصلهٔ بینِ داک و لبهٔ پایینِ صفحه از زیرش پیام دیده نشود. */
@media (max-width: 767px) {
#ai-chat-app.bagpt-has-chat .ai-chat-input-dock.bagpt-input-dock::before {
/* extend پایینِ پلیتِ شیشهای تا انتهای ویوپورت — هرچه زیرِ داک بیاید (safe-area
* یا فضای خالیِ کیبورد) از همان شیشه پوشیده میشود */
bottom: calc(-1 * (env(safe-area-inset-bottom, 0px) + var(--bagpt-kb, 0px) + 24px));
/* روی موبایل قدری ماتتر و کنتراستدارتر تا روی صفحههای کوچک پیام پشتش دیده نشود */
background:
linear-gradient(180deg,
rgba(8, 10, 14, 0.60) 0%,
rgba(6, 8, 12, 0.84) 36%,
rgba(4, 6, 10, 0.94) 68%,
rgba(4, 6, 10, 0.97) 100%);
-webkit-backdrop-filter: blur(60px) saturate(135%);
backdrop-filter: blur(60px) saturate(135%);
/* ماسکِ بالا روی موبایل خیلی تنگتر — فقط ~6px فید در لبهٔ بالا، بقیه کاملاً مات.
* با این کار وقتی فضای خالیِ رزرو از زیر داک رد میشود، در ناحیهٔ گرادیانِ نیمهشفاف
* دیده نمیشود (قبلاً ~۴۴٪ ارتفاع داک نیمهشفاف بود = ۳۶px روی صفحهٔ ۸۱px). */
-webkit-mask-image: linear-gradient(180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.85) 6%,
rgba(0, 0, 0, 1) 14%,
rgba(0, 0, 0, 1) 100%);
mask-image: linear-gradient(180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.85) 6%,
rgba(0, 0, 0, 1) 14%,
rgba(0, 0, 0, 1) 100%);
}
/* اورلی گروه — همان داک ولی در جریان flex است و نباید پلیتِ شیشهای از زیرش بیرون بزند */
#bagpt-group-overlay #bagpt-group-input-dock.ai-chat-input-dock.bagpt-input-dock::before {
bottom: 0 !important;
}
/* روی موبایل خطمویِ بالای داک حذف میشود — با ماسکِ نرمِ ::before تداخل میکرد و
* مثل یک خطِ روشنِ تخت روی شیشه دیده میشد. */
#ai-chat-app.bagpt-has-chat .ai-chat-input-dock.bagpt-input-dock::after {
display: none !important;
}
/* بوردرِ Tailwind بالای داک هم روی موبایل کاملاً خاموش */
#ai-chat-app.bagpt-has-chat .ai-chat-input-dock.bagpt-input-dock {
border-top: 0 !important;
}
}
/* خطمویِ روشن روی لبهٔ بالای داک — همان hairline highlight منحنیِ iOS */
#ai-chat-app.bagpt-has-chat .ai-chat-input-dock.bagpt-input-dock::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
z-index: 0;
pointer-events: none;
background: linear-gradient(90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.10) 18%,
rgba(255, 255, 255, 0.16) 50%,
rgba(255, 255, 255, 0.10) 82%,
rgba(255, 255, 255, 0) 100%);
}
/* تم روشن — پلیتِ شیشهایِ روشنتر و خطموی تیرهترِ ظریف */
#ai-chat-app.bagpt-theme-light.bagpt-has-chat .ai-chat-input-dock.bagpt-input-dock {
background-image: none !important;
background-color: transparent !important;
}
#ai-chat-app.bagpt-theme-light.bagpt-has-chat .ai-chat-input-dock.bagpt-input-dock::before {
background:
linear-gradient(180deg,
rgba(252, 253, 255, 0.65) 0%,
rgba(248, 250, 253, 0.86) 45%,
rgba(244, 247, 252, 0.94) 100%);
}
@media (max-width: 767px) {
#ai-chat-app.bagpt-theme-light.bagpt-has-chat .ai-chat-input-dock.bagpt-input-dock::before {
background:
linear-gradient(180deg,
rgba(252, 253, 255, 0.62) 0%,
rgba(248, 250, 253, 0.88) 36%,
rgba(244, 247, 252, 0.96) 68%,
rgba(244, 247, 252, 0.98) 100%);
}
}
#ai-chat-app.bagpt-theme-light.bagpt-has-chat .ai-chat-input-dock.bagpt-input-dock::after {
background: linear-gradient(90deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.05) 50%,
rgba(0, 0, 0, 0) 100%);
}
/* ---- Multi-group split (iOS 26): هر شیت/ردیف یک گروهِ شیشهای جدا ----
* outer pill-input شفاف میشود (فقط یک ظرفِ layout با gap بین گروهها).
* هر فرزندِ مستقیمِ آن (sheets + controls-row) خودش یک گروه جدا با شیشهٔ خودش است.
*/
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock .bagpt-pill-input {
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-color: transparent !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
padding: 0 !important;
gap: 0.625rem !important;
min-height: 0 !important;
}
/* ---- ردیفِ کنترلها = گروهِ کامپوزرِ اصلی (rounded-full شیشهای) ---- */
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock .bagpt-pill-controls-row {
position: relative;
min-height: 56px;
border-radius: 9999px !important;
padding: 0.3125rem 0.5rem !important;
background-color: rgba(255, 255, 255, 0.06) !important;
background-image: linear-gradient(180deg,
rgba(255, 255, 255, 0.05) 0%,
rgba(255, 255, 255, 0.02) 100%) !important;
border: 0.5px solid rgba(255, 255, 255, 0.16) !important;
-webkit-backdrop-filter: blur(28px) saturate(180%);
backdrop-filter: blur(28px) saturate(180%);
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.18),
inset 0 -0.5px 0 rgba(0, 0, 0, 0.30),
0 8px 28px rgba(0, 0, 0, 0.45),
0 1px 2px rgba(0, 0, 0, 0.25) !important;
transition:
border-color 0.22s ease,
box-shadow 0.22s ease,
border-radius 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* وقتی متن چندخطی است — radius ملایمتر میشود */
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock .bagpt-pill-controls-row.bagpt-pill-multiline {
border-radius: 22px !important;
}
@media (min-width: 768px) {
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock .bagpt-pill-controls-row.bagpt-pill-multiline {
border-radius: 28px !important;
}
}
@media (min-width: 768px) {
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock .bagpt-pill-controls-row {
min-height: 64px;
padding: 0.4375rem 0.875rem !important;
gap: 0.625rem !important;
}
}
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock .bagpt-pill-controls-row:focus-within {
border-color: rgba(255, 255, 255, 0.26) !important;
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.22),
inset 0 -0.5px 0 rgba(0, 0, 0, 0.30),
0 12px 36px rgba(0, 0, 0, 0.55),
0 0 0 4px rgba(255, 255, 255, 0.05) !important;
}
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock .bagpt-pill-input.bagpt-pill-input--quota-locked .bagpt-pill-controls-row {
opacity: 0.7;
border-color: rgba(253, 224, 71, 0.4) !important;
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.12),
0 0 0 1px rgba(253, 186, 116, 0.2),
0 8px 28px rgba(0, 0, 0, 0.4) !important;
}
/* ---- شیتهای بالای کامپوزر — هرکدام یک گروهِ شیشهایِ شناورِ مستقل ----
* فقط شیتهایی که bg داخلیِ خاص ندارند wrap میشوند؛
* #bagpt-capsule-modes (chip درونی) و #bagpt-dictate-visualizer (accent آبی درونی)
* استایل خودشان را نگه میدارند تا برخوردِ بصری ایجاد نشود.
*/
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-attach-preview,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-quote-preview,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #bagpt-input-limit-banner {
background-color: rgba(255, 255, 255, 0.06) !important;
background-image: linear-gradient(180deg,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0.02) 100%) !important;
border: 0.5px solid rgba(255, 255, 255, 0.14) !important;
border-radius: 26px !important;
padding: 0.5rem 0.75rem !important;
-webkit-backdrop-filter: blur(22px) saturate(170%);
backdrop-filter: blur(22px) saturate(170%);
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.14),
inset 0 -0.5px 0 rgba(0, 0, 0, 0.25),
0 6px 22px rgba(0, 0, 0, 0.35) !important;
}
/* ---- نسخهٔ تم روشن ---- */
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock .bagpt-pill-input {
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock .bagpt-pill-controls-row {
background-color: rgba(255, 255, 255, 0.55) !important;
background-image: linear-gradient(180deg,
rgba(255, 255, 255, 0.85) 0%,
rgba(255, 255, 255, 0.65) 100%) !important;
border-color: rgba(15, 23, 42, 0.07) !important;
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.95),
inset 0 -0.5px 0 rgba(15, 23, 42, 0.05),
0 8px 28px rgba(15, 23, 42, 0.10),
0 1px 2px rgba(15, 23, 42, 0.06) !important;
}
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock .bagpt-pill-controls-row:focus-within {
border-color: rgba(15, 23, 42, 0.18) !important;
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 1),
inset 0 -0.5px 0 rgba(15, 23, 42, 0.06),
0 12px 36px rgba(15, 23, 42, 0.14),
0 0 0 4px rgba(15, 23, 42, 0.04) !important;
}
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock #ai-chat-attach-preview,
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock #ai-chat-quote-preview,
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock #bagpt-input-limit-banner {
background-color: rgba(255, 255, 255, 0.55) !important;
background-image: linear-gradient(180deg,
rgba(255, 255, 255, 0.85) 0%,
rgba(255, 255, 255, 0.65) 100%) !important;
border-color: rgba(15, 23, 42, 0.07) !important;
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.95),
inset 0 -0.5px 0 rgba(15, 23, 42, 0.04),
0 6px 22px rgba(15, 23, 42, 0.08) !important;
}
/* ---- دکمهٔ ارسال (mic/send/stop) — iOS 26 prominent glass capsule ----
* gradient چندمرحله، حلقهٔ داخلی ظریف، سایهٔ دولایه (هالهٔ روشن + drop shadow عمیق)،
* انیمیشنِ نرم برای تعویضِ آیکن، و تینتِ کرال در حالتِ توقف.
*/
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-send {
background-color: transparent !important;
background-image:
radial-gradient(140% 100% at 50% 0%,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.96) 38%,
rgba(244, 244, 248, 0.94) 70%,
rgba(228, 228, 234, 0.92) 100%) !important;
border: 0.5px solid rgba(255, 255, 255, 0.85) !important;
color: #0a0a0c !important;
box-shadow:
inset 0 1.2px 0 rgba(255, 255, 255, 1),
inset 0 -1px 0 rgba(0, 0, 0, 0.08),
inset 0 0 0 0.5px rgba(255, 255, 255, 0.5),
0 6px 20px rgba(255, 255, 255, 0.22),
0 2px 8px rgba(0, 0, 0, 0.36),
0 0.5px 0 rgba(0, 0, 0, 0.18) !important;
transition:
transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.24s ease,
background-image 0.24s ease,
border-color 0.24s ease !important;
}
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-send:hover {
background-image:
radial-gradient(140% 100% at 50% 0%,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.99) 38%,
rgba(248, 248, 252, 0.97) 70%,
rgba(236, 236, 242, 0.95) 100%) !important;
box-shadow:
inset 0 1.2px 0 rgba(255, 255, 255, 1),
inset 0 -1px 0 rgba(0, 0, 0, 0.08),
inset 0 0 0 0.5px rgba(255, 255, 255, 0.6),
0 8px 28px rgba(255, 255, 255, 0.32),
0 3px 10px rgba(0, 0, 0, 0.40),
0 0.5px 0 rgba(0, 0, 0, 0.18) !important;
}
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-send:active {
transform: scale(0.92);
transition-duration: 0.12s !important;
}
/* تینتِ کرال/قرمز در حالتِ توقفِ استریم — JS کلاسِ ai-chat-send--stop میگذارد */
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-send.ai-chat-send--stop {
background-image:
radial-gradient(140% 100% at 50% 0%,
#ff7a8a 0%,
#ff5a6e 42%,
#f0405a 75%,
#d8264a 100%) !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.4) !important;
box-shadow:
inset 0 1.2px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(120, 0, 20, 0.45),
inset 0 0 0 0.5px rgba(255, 200, 210, 0.35),
0 6px 22px rgba(240, 64, 90, 0.45),
0 2px 8px rgba(120, 0, 20, 0.4) !important;
}
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-send.ai-chat-send--stop:hover {
background-image:
radial-gradient(140% 100% at 50% 0%,
#ff8e9c 0%,
#ff6a7e 42%,
#f74e68 75%,
#de2d50 100%) !important;
box-shadow:
inset 0 1.2px 0 rgba(255, 255, 255, 0.55),
inset 0 -1px 0 rgba(120, 0, 20, 0.45),
inset 0 0 0 0.5px rgba(255, 200, 210, 0.4),
0 8px 28px rgba(240, 64, 90, 0.55),
0 3px 10px rgba(120, 0, 20, 0.45) !important;
}
/* انیمیشن نرم تعویضِ آیکنِ داخلِ دکمه (mic ↔ send ↔ stop) */
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-send .ai-chat-icon-mic,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-send .ai-chat-icon-send,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-send .ai-chat-icon-stop {
transition:
opacity 0.18s ease,
transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
transform-origin: center;
}
/* آیکن مخفی: opacity 0 + scale کوچک (با hidden + display:none ترکیب میشود؛
روی فریمی که display:flex برمیگردد، transition ی غیرقابلمشاهده ولی بیخطر است) */
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-send .ai-chat-icon-mic.hidden,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-send .ai-chat-icon-send.hidden,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-send .ai-chat-icon-stop.hidden {
opacity: 0;
transform: scale(0.75);
}
/* آیکن SVG داخل: stroke/fill فعلی currentColor؛ با drop-shadow ظریف برای ابعادِ بصری */
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-send svg {
filter: drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.35));
}
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-send.ai-chat-send--stop svg {
filter: drop-shadow(0 0.5px 0 rgba(255, 255, 255, 0.55));
}
/* در تم روشن دکمهٔ ارسال تیره (high-contrast) — مثل iOS 26 light */
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock #ai-chat-send {
background-image:
radial-gradient(140% 100% at 50% 0%,
#2a2a32 0%,
#18181d 50%,
#0a0a0e 100%) !important;
color: #ffffff !important;
border-color: rgba(0, 0, 0, 0.55) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.5),
inset 0 0 0 0.5px rgba(255, 255, 255, 0.06),
0 6px 18px rgba(15, 23, 42, 0.28),
0 2px 6px rgba(15, 23, 42, 0.14) !important;
}
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock #ai-chat-send:hover {
background-image:
radial-gradient(140% 100% at 50% 0%,
#34343d 0%,
#1f1f25 50%,
#0e0e13 100%) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
inset 0 -1px 0 rgba(0, 0, 0, 0.5),
inset 0 0 0 0.5px rgba(255, 255, 255, 0.08),
0 8px 26px rgba(15, 23, 42, 0.36),
0 3px 10px rgba(15, 23, 42, 0.18) !important;
}
/* ---- دکمههای فرعی (mic، attach، +tools، image-gen) — iOS 26 glass mini caps ----
* mic و +tools برجستهتر هستند تا حسِ گروهِ مستقل بدهند (نه آیکنِ صرفِ داخلِ کپسول).
*/
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-dictate-btn,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-attach-btn,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-mobile-tools-btn,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #bagpt-runway-gen-image-btn {
background-color: rgba(255, 255, 255, 0.06) !important;
background-image: linear-gradient(180deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.02) 100%) !important;
border: 0.5px solid rgba(255, 255, 255, 0.14) !important;
-webkit-backdrop-filter: blur(14px) saturate(170%);
backdrop-filter: blur(14px) saturate(170%);
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.14),
inset 0 -0.5px 0 rgba(0, 0, 0, 0.22),
0 1px 2px rgba(0, 0, 0, 0.25) !important;
transition:
transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease !important;
}
/* mic و +tools = گروههای مستقل (شیشهٔ کمی بیشتر، سایهٔ کمی عمیقتر) */
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-dictate-btn,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-mobile-tools-btn {
background-color: rgba(255, 255, 255, 0.10) !important;
background-image: linear-gradient(180deg,
rgba(255, 255, 255, 0.12) 0%,
rgba(255, 255, 255, 0.04) 100%) !important;
border: 0.5px solid rgba(255, 255, 255, 0.20) !important;
-webkit-backdrop-filter: blur(18px) saturate(180%);
backdrop-filter: blur(18px) saturate(180%);
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.22),
inset 0 -0.5px 0 rgba(0, 0, 0, 0.28),
0 4px 12px rgba(0, 0, 0, 0.40),
0 1px 2px rgba(0, 0, 0, 0.30) !important;
color: rgba(255, 255, 255, 0.92) !important;
}
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-dictate-btn:hover,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-attach-btn:hover,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-mobile-tools-btn:hover,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #bagpt-runway-gen-image-btn:hover {
background-color: rgba(255, 255, 255, 0.10) !important;
border-color: rgba(255, 255, 255, 0.20) !important;
}
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-dictate-btn:active,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-attach-btn:active,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-mobile-tools-btn:active,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #bagpt-runway-gen-image-btn:active {
transform: scale(0.92);
}
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock #ai-chat-dictate-btn,
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock #ai-chat-attach-btn,
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock #ai-chat-mobile-tools-btn,
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock #bagpt-runway-gen-image-btn {
background-color: rgba(15, 23, 42, 0.04) !important;
background-image: linear-gradient(180deg,
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0.2) 100%) !important;
border-color: rgba(15, 23, 42, 0.08) !important;
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.7),
inset 0 -0.5px 0 rgba(15, 23, 42, 0.06),
0 1px 2px rgba(15, 23, 42, 0.06) !important;
}
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock #ai-chat-dictate-btn:hover,
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock #ai-chat-attach-btn:hover,
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock #ai-chat-mobile-tools-btn:hover,
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock #bagpt-runway-gen-image-btn:hover {
background-color: rgba(15, 23, 42, 0.07) !important;
border-color: rgba(15, 23, 42, 0.14) !important;
}
/* ============================================================
* iOS 26 — دکمههای هدر (notif / compose / menu)
* یک گروهِ یکپارچه از mini-capهای شیشهایِ ۳۶px با باریکترین خطمو.
* ============================================================ */
#ai-chat-app .bagpt-header-btn {
position: relative !important;
width: 36px !important;
height: 36px !important;
padding: 0 !important;
background-color: rgba(255, 255, 255, 0.05) !important;
background-image: linear-gradient(180deg,
rgba(255, 255, 255, 0.07) 0%,
rgba(255, 255, 255, 0.02) 100%) !important;
border: 0.5px solid rgba(255, 255, 255, 0.12) !important;
-webkit-backdrop-filter: blur(14px) saturate(170%);
backdrop-filter: blur(14px) saturate(170%);
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.14),
inset 0 -0.5px 0 rgba(0, 0, 0, 0.22),
0 1px 2px rgba(0, 0, 0, 0.30) !important;
color: rgba(255, 255, 255, 0.85) !important;
transition:
transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.22s ease !important;
}
/* موبایل: بستن سایدبار — .bagpt-header-btn با position:relative !important باعث میشد
* `absolute` تیلویند اثر نکند و دکمه مثل flex item آخر به ته ستون بچسبد. */
#ai-chat-app #ai-chat-sidebar #ai-chat-sidebar-close.bagpt-header-btn {
position: absolute !important;
top: max(0.75rem, env(safe-area-inset-top, 0px)) !important;
left: 0.75rem !important;
z-index: 3 !important;
}
#ai-chat-app .bagpt-header-btn:hover {
background-color: rgba(255, 255, 255, 0.10) !important;
border-color: rgba(255, 255, 255, 0.20) !important;
color: rgba(255, 255, 255, 1) !important;
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.18),
inset 0 -0.5px 0 rgba(0, 0, 0, 0.22),
0 2px 6px rgba(0, 0, 0, 0.36) !important;
}
#ai-chat-app .bagpt-header-btn:active {
transform: scale(0.92);
transition-duration: 0.12s !important;
}
#ai-chat-app .bagpt-header-btn:focus-visible {
outline: none !important;
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.18),
inset 0 -0.5px 0 rgba(0, 0, 0, 0.22),
0 0 0 3px rgba(255, 255, 255, 0.12) !important;
}
/* حالتِ aria-expanded (منو/notif باز) — تینتِ روشنترِ پایدار */
#ai-chat-app .bagpt-header-btn[aria-expanded="true"] {
background-color: rgba(255, 255, 255, 0.14) !important;
border-color: rgba(255, 255, 255, 0.24) !important;
color: rgba(255, 255, 255, 1) !important;
}
/* تم روشن — همان شیشهٔ روشن */
#ai-chat-app.bagpt-theme-light .bagpt-header-btn {
background-color: rgba(15, 23, 42, 0.04) !important;
background-image: linear-gradient(180deg,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 255, 255, 0.25) 100%) !important;
border-color: rgba(15, 23, 42, 0.08) !important;
color: rgba(15, 23, 42, 0.78) !important;
box-shadow:
inset 0 0.5px 0 rgba(255, 255, 255, 0.7),
inset 0 -0.5px 0 rgba(15, 23, 42, 0.06),
0 1px 2px rgba(15, 23, 42, 0.06) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-header-btn:hover {
background-color: rgba(15, 23, 42, 0.07) !important;
border-color: rgba(15, 23, 42, 0.14) !important;
color: rgba(15, 23, 42, 1) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-header-btn[aria-expanded="true"] {
background-color: rgba(15, 23, 42, 0.10) !important;
border-color: rgba(15, 23, 42, 0.20) !important;
}
/* مرورگرهایی که backdrop-filter ندارند (نسخههای قدیمیِ Firefox) — fallback ماتتر */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
#ai-chat-app.bagpt-has-chat .ai-chat-input-dock.bagpt-input-dock::before {
background:
linear-gradient(180deg,
rgba(8, 10, 14, 0.86) 0%,
rgba(8, 10, 14, 0.94) 100%);
}
#ai-chat-app.bagpt-theme-light.bagpt-has-chat .ai-chat-input-dock.bagpt-input-dock::before {
background:
linear-gradient(180deg,
rgba(248, 250, 252, 0.92) 0%,
rgba(244, 246, 250, 0.97) 100%);
}
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock .bagpt-pill-controls-row,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-attach-preview,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #ai-chat-quote-preview,
#ai-chat-app .ai-chat-input-dock.bagpt-input-dock #bagpt-input-limit-banner {
background-color: rgba(28, 28, 32, 0.95) !important;
}
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock .bagpt-pill-controls-row,
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock #ai-chat-attach-preview,
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock #ai-chat-quote-preview,
#ai-chat-app.bagpt-theme-light .ai-chat-input-dock.bagpt-input-dock #bagpt-input-limit-banner {
background-color: rgba(255, 255, 255, 0.96) !important;
}
}
/*
* ردیف پیام (بدنهٔ پیام؛ آواتار حذف شده است).
*/
#ai-chat-messages-list > .ai-chat-msg {
display: flex;
flex-direction: row;
align-items: flex-start;
width: 100%;
box-sizing: border-box;
padding: 0.35rem 0 0.85rem;
}
#ai-chat-messages-list .ai-chat-msg-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: stretch;
}
#ai-chat-messages-list .ai-chat-msg.user .ai-chat-msg-body {
align-items: flex-start;
}
/* حباب کاربر؛ کپی/ویرایش در ردیف ai-chat-msg-user-actions زیر حباب */
#ai-chat-messages-inner .ai-chat-msg.user .ai-chat-msg-content {
position: relative;
display: block;
width: fit-content;
max-width: min(100%, 42rem);
box-sizing: border-box;
padding: 0.62rem 0.95rem;
border-radius: 1.1rem;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.92);
font-size: var(--bagpt-chat-font-size, 16px) !important;
}
#ai-chat-messages-inner .ai-chat-msg.user .ai-chat-msg-user-actions-wrap {
margin-top: 0.35rem;
align-self: flex-start;
width: fit-content;
max-width: min(100%, 42rem);
}
#ai-chat-messages-inner .ai-chat-msg.user .ai-chat-msg-user-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.28rem;
}
#ai-chat-messages-inner .ai-chat-msg.user .ai-chat-msg-user-actions .ai-chat-msg-copy {
position: static;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 0;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.52);
cursor: pointer;
transition:
background 0.15s ease,
color 0.15s ease;
}
#ai-chat-messages-inner .ai-chat-msg.user .ai-chat-msg-user-actions .ai-chat-msg-copy:hover {
background: rgba(255, 255, 255, 0.11);
color: rgba(255, 255, 255, 0.88);
}
#ai-chat-messages-inner .ai-chat-msg.user .ai-chat-msg-user-actions .ai-chat-msg-copy-svg {
width: 1rem;
height: 1rem;
}
#ai-chat-messages-inner .ai-chat-msg.user .ai-chat-msg-user-edit {
width: 2rem;
height: 2rem;
}
#ai-chat-app.bagpt-theme-light #ai-chat-messages-inner .ai-chat-msg.user .ai-chat-msg-user-actions .ai-chat-msg-copy {
background: rgba(15, 23, 42, 0.06);
color: rgba(51, 65, 85, 0.55);
}
#ai-chat-app.bagpt-theme-light #ai-chat-messages-inner .ai-chat-msg.user .ai-chat-msg-user-actions .ai-chat-msg-copy:hover {
background: rgba(15, 23, 42, 0.1);
color: rgba(15, 23, 42, 0.85);
}
/* کپی روی پیام دستیار (انتهای محتوا در DOM) */
#ai-chat-messages-inner .ai-chat-msg.assistant .ai-chat-msg-copy {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.65rem;
height: 1.65rem;
margin-top: 0.35rem;
padding: 0;
border: 0;
border-radius: 0.5rem;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.45);
cursor: pointer;
vertical-align: middle;
transition:
background 0.15s ease,
color 0.15s ease;
}
#ai-chat-messages-inner .ai-chat-msg.assistant .ai-chat-msg-copy:hover {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.82);
}
#ai-chat-messages-inner .ai-chat-msg.assistant .ai-chat-msg-copy-svg {
width: 0.95rem;
height: 0.95rem;
}
#ai-chat-app.bagpt-theme-light
#ai-chat-messages-inner
.ai-chat-msg.assistant
.ai-chat-msg-copy {
background: rgba(15, 23, 42, 0.06);
color: rgba(51, 65, 85, 0.55);
}
#ai-chat-app.bagpt-theme-light
#ai-chat-messages-inner
.ai-chat-msg.assistant
.ai-chat-msg-copy:hover {
background: rgba(15, 23, 42, 0.1);
color: rgba(15, 23, 42, 0.85);
}
/* نوار اکشن پیام دستیار (دکمهها فقط کلاس semantic دارند) */
#ai-chat-messages-list .ai-chat-msg-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.28rem;
}
/* منابع وب: آواتار گروه (فاویکونهای همپوشان، شبیه HeroUI Avatar Group) */
#ai-chat-messages-list .bagpt-msg-web-source-avatars {
display: inline-flex;
flex-direction: row;
align-items: center;
flex-shrink: 0;
margin-inline-end: 0.4rem;
direction: ltr;
}
#ai-chat-messages-list .bagpt-msg-web-source-avatar {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.75rem;
height: 1.75rem;
padding: 0.18rem;
border-radius: 9999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.14);
box-shadow:
0 0 0 2px #020617,
0 1px 3px rgba(0, 0, 0, 0.35);
transition:
transform 0.15s ease,
box-shadow 0.15s ease,
z-index 0s;
z-index: 1;
}
#ai-chat-messages-list .bagpt-msg-web-source-avatar:hover {
z-index: 20;
transform: translateY(-1px);
box-shadow:
0 0 0 2px #020617,
0 4px 12px rgba(0, 0, 0, 0.4);
}
#ai-chat-messages-list .bagpt-msg-web-source-avatar img.bagpt-msg-web-source-fav {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
border-radius: 0.22rem;
/* پشت ناحیهٔ شفاف فاویکون تا در پسزمینهٔ تیره خوانا بماند */
background: rgba(248, 250, 252, 0.96);
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}
#ai-chat-messages-list .bagpt-msg-web-source-avatar-fb {
font-size: 0.72rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.75);
line-height: 1;
}
#ai-chat-messages-list
.bagpt-msg-web-source-avatar
+ .bagpt-msg-web-source-avatar,
#ai-chat-messages-list
.bagpt-msg-web-source-avatar
+ .bagpt-msg-web-source-more,
#ai-chat-messages-list
.bagpt-msg-web-source-more:not(:first-child) {
margin-inline-start: -0.56rem;
}
#ai-chat-messages-list .bagpt-msg-web-source-avatars > :nth-child(1) {
z-index: 1;
}
#ai-chat-messages-list .bagpt-msg-web-source-avatars > :nth-child(2) {
z-index: 2;
}
#ai-chat-messages-list .bagpt-msg-web-source-avatars > :nth-child(3) {
z-index: 3;
}
#ai-chat-messages-list .bagpt-msg-web-source-avatars > :nth-child(4) {
z-index: 4;
}
#ai-chat-messages-list .bagpt-msg-web-source-avatars > :nth-child(5) {
z-index: 5;
}
#ai-chat-messages-list .bagpt-msg-web-source-avatars > :nth-child(6) {
z-index: 6;
}
#ai-chat-messages-list .bagpt-msg-web-source-more {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
min-width: 1.75rem;
height: 1.75rem;
padding: 0 0.28rem;
border-radius: 9999px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: -0.02em;
color: rgba(255, 255, 255, 0.88);
background: rgba(255, 255, 255, 0.1);
box-shadow:
0 0 0 2px #020617,
0 1px 3px rgba(0, 0, 0, 0.35);
z-index: 6;
}
#ai-chat-app.bagpt-theme-light #ai-chat-messages-list .bagpt-msg-web-source-avatar {
background: rgba(15, 23, 42, 0.08);
box-shadow:
0 0 0 2px #f8fafc,
0 1px 3px rgba(15, 23, 42, 0.12);
}
#ai-chat-app.bagpt-theme-light
#ai-chat-messages-list
.bagpt-msg-web-source-avatar:hover {
box-shadow:
0 0 0 2px #f8fafc,
0 4px 12px rgba(15, 23, 42, 0.18);
}
#ai-chat-app.bagpt-theme-light
#ai-chat-messages-list
.bagpt-msg-web-source-avatar-fb {
color: rgba(51, 65, 85, 0.85);
}
#ai-chat-app.bagpt-theme-light
#ai-chat-messages-list
.bagpt-msg-web-source-avatar
img.bagpt-msg-web-source-fav {
/* در تم روشن: بوم خنثی تا فاویکونهای تیره/سفید هر دو دیده شوند */
background: rgba(255, 255, 255, 0.92);
box-shadow:
inset 0 0 0 1px rgba(15, 23, 42, 0.08),
0 0 0 1px rgba(15, 23, 42, 0.04);
}
#ai-chat-app.bagpt-theme-light #ai-chat-messages-list .bagpt-msg-web-source-more {
color: rgba(15, 23, 42, 0.88);
background: rgba(15, 23, 42, 0.06);
box-shadow:
0 0 0 2px #f8fafc,
0 1px 3px rgba(15, 23, 42, 0.1);
}
#ai-chat-messages-list .ai-chat-msg-action {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 0;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.52);
cursor: pointer;
transition:
background 0.15s ease,
color 0.15s ease,
opacity 0.15s ease;
}
#ai-chat-messages-list .ai-chat-msg-action:hover {
background: rgba(255, 255, 255, 0.11);
color: rgba(255, 255, 255, 0.88);
}
#ai-chat-messages-list .ai-chat-msg-action--muted {
opacity: 0.35;
pointer-events: none;
}
#ai-chat-messages-list .ai-chat-msg-action--on {
color: rgba(52, 211, 153, 0.95);
background: rgba(16, 185, 129, 0.14);
}
#ai-chat-messages-list .ai-chat-msg-action-svg {
width: 1rem;
height: 1rem;
}
#ai-chat-messages-list .ai-chat-msg-menu-item {
display: block;
width: 100%;
text-align: right;
padding: 0.5rem 0.75rem;
border: 0;
border-radius: 0.5rem;
background: transparent;
color: rgba(255, 255, 255, 0.88);
font-size: 0.85rem;
cursor: pointer;
}
#ai-chat-messages-list .ai-chat-msg-menu-item:hover {
background: rgba(255, 255, 255, 0.08);
}
#ai-chat-app.bagpt-theme-light
#ai-chat-messages-inner
.ai-chat-msg.user
.ai-chat-msg-content {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(15, 23, 42, 0.1);
color: rgba(15, 23, 42, 0.92);
}
#ai-chat-app.bagpt-theme-light
#ai-chat-messages-list
.ai-chat-msg-action {
background: rgba(15, 23, 42, 0.06);
color: rgba(51, 65, 85, 0.72);
}
#ai-chat-app.bagpt-theme-light
#ai-chat-messages-list
.ai-chat-msg-action:hover {
background: rgba(15, 23, 42, 0.1);
color: rgba(15, 23, 42, 0.95);
}
.ai-chat-msg.assistant .ai-chat-msg-content {
letter-spacing: -0.01em;
word-break: normal;
overflow-wrap: break-word;
}
.ai-chat-msg.assistant .ai-chat-msg-content a {
color: #1a73e8;
text-decoration: none;
font-weight: 500;
}
.ai-chat-msg.assistant .ai-chat-msg-content a:hover {
text-decoration: underline;
}
#ai-chat-messages-list .ai-chat-msg.assistant .ai-chat-msg-content-core {
line-height: 1.8;
}
#ai-chat-messages-list .ai-chat-msg.assistant .ai-chat-msg-content-core p {
font-size: 17px;
font-weight: 400;
line-height: 1.8;
margin-bottom: 18px;
}
/* Global UI font scale (controlled, non-breaking) */
#ai-chat-app {
--bagpt-ui-font-scale: 1;
}
#ai-chat-header #ai-chat-title {
font-size: calc(15px * var(--bagpt-ui-font-scale, 1)) !important;
}
#ai-chat-header #ai-chat-header-model {
display: none !important;
}
@media (max-width: 767px) {
/*
* موبایل: ستونهای کناری هدر absolute هستند و در جریان grid جا نمیگیرند؛
* بدون padding کافی، عنوان وسط با دکمهٔ منو/سایدبار و اکشنها همپوشانی میکند.
*/
#ai-chat-header .bagpt-chat-header-title-wrap {
padding-inline: max(3rem, calc(env(safe-area-inset-left, 0px) + 2.75rem))
max(3rem, calc(env(safe-area-inset-right, 0px) + 2.75rem));
box-sizing: border-box;
}
}
#ai-chat-conversations .ai-chat-conv-title {
font-size: calc(13px * var(--bagpt-ui-font-scale, 1)) !important;
}
#ai-chat-conversations .ai-chat-conv-preview {
font-size: calc(11px * var(--bagpt-ui-font-scale, 1)) !important;
}
#ai-chat-menu-dropdown .ai-chat-menu-item {
font-size: calc(14px * var(--bagpt-ui-font-scale, 1)) !important;
}
#ai-chat-input {
font-size: calc(15px * var(--bagpt-ui-font-scale, 1)) !important;
line-height: 1.72;
}
/* ورودی چت/گروه: اسکرول عمودی پنهان؛ اسکرول با ماوس/لمس همچنان کار میکند */
.bagpt-chat-input-field {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* قدیمی */
}
.bagpt-chat-input-field::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
#bagpt-group-input {
line-height: 1.72;
}
@media (min-width: 768px) {
#ai-chat-input,
#bagpt-group-input {
line-height: 1.8;
}
}
#bagpt-settings-modal .bagpt-settings-nav-item {
font-size: calc(13px * var(--bagpt-ui-font-scale, 1)) !important;
}
#bagpt-settings-modal .bagpt-settings-panel {
font-size: calc(13px * var(--bagpt-ui-font-scale, 1));
}
/* مودال تنظیمات: موبایل شیت + انیمیشن نرم (transform/GPU) */
.bagpt-settings-modal {
visibility: hidden;
pointer-events: none;
opacity: 0;
transition:
opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0.36s;
}
.bagpt-settings-modal.is-open {
visibility: visible;
pointer-events: auto;
opacity: 1;
transition:
opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s;
}
.bagpt-settings-modal .bagpt-settings-backdrop {
opacity: 0;
transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1);
/* بلو و اشباع روی تم تیره (تم روشن در بلوک جدا بازنویسی میشود) */
-webkit-backdrop-filter: blur(22px) saturate(1.14);
backdrop-filter: blur(22px) saturate(1.14);
}
.bagpt-settings-modal.is-open .bagpt-settings-backdrop {
opacity: 1;
}
.bagpt-settings-modal .bagpt-settings-shell {
transform: translate3d(0, 14px, 0) scale(0.985);
opacity: 0;
transition:
transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform, opacity;
}
.bagpt-settings-modal.is-open .bagpt-settings-shell {
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
@media (max-width: 767px) {
.bagpt-settings-modal .bagpt-settings-shell {
transform: translate3d(0, 100%, 0);
max-height: min(100dvh, 920px);
}
.bagpt-settings-modal.is-open .bagpt-settings-shell {
transform: translate3d(0, 0, 0);
}
.bagpt-settings-nav {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-inline-start: max(0.5rem, env(safe-area-inset-left, 0));
padding-inline-end: max(0.5rem, env(safe-area-inset-right, 0));
}
.bagpt-settings-nav .bagpt-settings-nav-item {
scroll-snap-align: center;
min-height: 48px;
touch-action: manipulation;
}
}
@media (min-width: 768px) {
.bagpt-settings-modal.is-open .bagpt-settings-shell {
will-change: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.bagpt-settings-modal,
.bagpt-settings-modal .bagpt-settings-backdrop,
.bagpt-settings-modal .bagpt-settings-shell {
transition-duration: 0.01ms !important;
}
.bagpt-settings-content-scroll {
scroll-behavior: auto;
}
}
.bagpt-settings-content-scroll {
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
body.bagpt-settings-modal-open {
overflow: hidden;
overscroll-behavior: none;
}
#bagpt-settings-modal .bagpt-settings-nav-item.is-active {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.96);
}
#bagpt-settings-modal .bagpt-settings-nav-item.is-active svg {
color: rgba(103, 232, 249, 0.75);
}
/* نوار تبهای تنظیمات: اسکرول بماند، خود نوار اسکرول دیده نشود */
#bagpt-settings-modal nav.bagpt-settings-nav {
scrollbar-width: none;
-ms-overflow-style: none;
}
#bagpt-settings-modal nav.bagpt-settings-nav::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
background: transparent;
}
/* دکمهٔ ویرایش آواتار: روی تصویر، با هالهٔ تیره برای کنتراست */
#bagpt-settings-modal .bagpt-settings-avatar-wrap {
vertical-align: middle;
overflow: visible;
}
/* در مودال تنظیمات آواتار بزرگتر تا دکمهٔ تعویض روی عکس دیده شود */
#bagpt-settings-modal #bagpt-settings-avatar.bagpt-local-avatar--lg,
#bagpt-settings-modal .bagpt-settings-avatar-wrap .bagpt-local-avatar--lg {
width: 84px;
height: 84px;
font-size: 22px;
}
#bagpt-settings-modal .bagpt-settings-avatar-edit-btn {
pointer-events: auto;
}
#bagpt-settings-modal .bagpt-behavior-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.65rem 0.85rem;
border-radius: 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
box-sizing: border-box;
}
#bagpt-settings-modal label.bagpt-behavior-row {
cursor: pointer;
}
#bagpt-settings-modal .bagpt-behavior-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
min-width: 0;
flex: 1;
text-align: right;
}
#bagpt-settings-modal .bagpt-behavior-title {
display: block;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.45;
color: rgba(255, 255, 255, 0.92);
}
#bagpt-settings-modal .bagpt-behavior-sub {
display: block;
font-size: 0.7rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.45);
}
#bagpt-settings-panel-behavior > div > * + * {
margin-top: 0.375rem;
}
#bagpt-settings-modal .bagpt-behavior-select {
flex-shrink: 0;
min-width: 8.5rem;
max-width: 100%;
border-radius: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.35);
color: rgba(255, 255, 255, 0.88);
padding: 0.45rem 0.65rem;
font-size: 0.8125rem;
outline: none;
}
#bagpt-settings-modal .bagpt-behavior-select:focus {
border-color: rgba(34, 211, 238, 0.45);
}
/* سوییچ iOS-like (کلاس semantic؛ بدون utility تیلویند) */
#bagpt-settings-modal .bagpt-switch-ui {
position: relative;
flex-shrink: 0;
width: 2.75rem;
height: 1.5rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.16);
transition:
background 0.2s ease,
border-color 0.2s ease;
}
#bagpt-settings-modal .bagpt-switch-ui::after {
content: "";
position: absolute;
top: 2px;
inset-inline-start: 2px;
inset-inline-end: auto;
width: 1.125rem;
height: 1.125rem;
border-radius: 9999px;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
transition:
inset-inline-start 0.2s ease,
inset-inline-end 0.2s ease;
}
#bagpt-settings-modal .bagpt-settings-switch:checked + .bagpt-switch-ui {
background: rgba(34, 211, 238, 0.38);
border-color: rgba(34, 211, 238, 0.55);
}
#bagpt-settings-modal .bagpt-settings-switch:checked + .bagpt-switch-ui::after {
inset-inline-start: auto;
inset-inline-end: 2px;
}
#bagpt-settings-modal .bagpt-settings-switch:focus-visible + .bagpt-switch-ui {
outline: 2px solid rgba(34, 211, 238, 0.55);
outline-offset: 2px;
}
/* دکمههای حالت تم (فقط کلاس bagpt-*) */
#bagpt-settings-modal .bagpt-appearance-mode-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
min-height: 4.5rem;
padding: 0.5rem 0.35rem;
border-radius: 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.82);
font-size: 0.75rem;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
#bagpt-settings-modal .bagpt-appearance-mode-btn:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.16);
}
#bagpt-settings-modal .bagpt-appearance-mode-btn.is-active {
border-color: rgba(34, 211, 238, 0.45);
background: rgba(34, 211, 238, 0.1);
color: rgba(224, 242, 254, 0.98);
}
/* چیپهای سبک پاسخ */
#bagpt-settings-modal .bagpt-persona-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.4rem 0.75rem;
border-radius: 9999px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.82);
font-size: 0.75rem;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease;
}
#bagpt-settings-modal .bagpt-persona-chip:hover {
background: rgba(255, 255, 255, 0.09);
}
#bagpt-settings-modal .bagpt-persona-chip.is-active {
border-color: rgba(34, 211, 238, 0.45);
background: rgba(34, 211, 238, 0.12);
color: rgba(224, 242, 254, 0.98);
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-behavior-title,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .bagpt-behavior-title {
color: rgba(15, 23, 42, 0.92);
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-behavior-sub,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .bagpt-behavior-sub {
color: rgba(51, 65, 85, 0.78);
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-behavior-row,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .bagpt-behavior-row {
border-color: rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.72);
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-behavior-select,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .bagpt-behavior-select {
border-color: rgba(15, 23, 42, 0.14);
background: rgba(255, 255, 255, 0.9);
color: rgba(15, 23, 42, 0.9);
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-appearance-mode-btn,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .bagpt-appearance-mode-btn {
border-color: rgba(15, 23, 42, 0.12);
background: rgba(255, 255, 255, 0.75);
color: rgba(15, 23, 42, 0.88);
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-persona-chip,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .bagpt-persona-chip {
border-color: rgba(15, 23, 42, 0.12);
background: rgba(255, 255, 255, 0.75);
color: rgba(15, 23, 42, 0.88);
}
/* ردیفهای رفتار: موبایل با فاصله و ضربه لمسی بهتر */
@media (max-width: 767px) {
#bagpt-settings-modal .bagpt-behavior-row {
flex-direction: column;
align-items: stretch;
gap: 0.65rem;
padding: 0.9rem 1rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.02);
}
#bagpt-settings-modal .bagpt-behavior-row .bagpt-behavior-copy {
padding-inline-end: 0;
}
#bagpt-settings-modal .bagpt-behavior-row .bagpt-switch-ui {
align-self: flex-end;
}
#bagpt-settings-modal .bagpt-behavior-select {
min-height: 44px;
width: 100%;
border-radius: 0.75rem;
}
}
.ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-md-block {
margin: 0.62rem 0;
line-height: 1.8;
max-width: min(100%, 72ch);
color: rgba(241, 245, 249, 0.95);
direction: rtl;
unicode-bidi: plaintext;
text-align: start;
}
.ai-chat-msg.assistant
.ai-chat-msg-content
.ai-chat-md-block
+ .ai-chat-md-block {
margin-top: 1.05rem;
}
.ai-chat-msg.assistant .ai-chat-msg-content h1 {
font-size: 36px;
font-weight: 700;
line-height: 1.3;
margin: 32px 0 16px;
}
.ai-chat-msg.assistant .ai-chat-msg-content h2 {
font-size: 28px;
font-weight: 700;
line-height: 1.4;
margin: 28px 0 14px;
}
.ai-chat-msg.assistant .ai-chat-msg-content h3 {
font-size: 22px;
font-weight: 600;
line-height: 1.4;
margin: 24px 0 12px;
}
.ai-chat-msg.assistant .ai-chat-msg-content h4 {
font-size: 18px;
font-weight: 600;
line-height: 1.5;
margin: 20px 0 10px;
}
.ai-chat-msg.assistant .ai-chat-msg-content h5 {
font-size: 16px;
font-weight: 500;
line-height: 1.5;
margin: 16px 0 8px;
}
.ai-chat-msg.assistant .ai-chat-msg-content h6 {
font-size: 14px;
font-weight: 500;
line-height: 1.6;
margin: 14px 0 6px;
}
.ai-chat-msg.assistant .ai-chat-msg-content ul,
.ai-chat-msg.assistant .ai-chat-msg-content ol {
margin: 17px 0;
padding-right: 20px;
line-height: 1.8;
}
.ai-chat-msg.assistant .ai-chat-msg-content li {
margin-bottom: 8px;
line-height: 1.8;
}
.ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-md-stream-tail {
display: block;
margin: 0.35rem 0 0.15rem;
padding: 0.42rem 0.55rem;
border-radius: 0.55rem;
background: rgba(255, 255, 255, 0.045);
border: 0.2px solid rgba(255, 255, 255, 0.08);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.88em;
line-height: 1.55;
color: rgba(255, 255, 255, 0.72);
white-space: pre-wrap;
word-break: break-word;
animation: bagpt-stream-tail-fade-in 220ms ease-out;
transform-origin: top center;
}
/* پیشنمایش جدول pipe در استریم: همان حاشیه/نوار/فونت ردیف نزدیک .bagpt-table-wrap تا پرش کم شود */
.ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-md-stream-tail--pipe-draft {
margin: 0.7rem 0 0.85rem;
padding: 0;
border: 0;
border-radius: 0.78rem;
overflow: hidden;
background: rgba(2, 6, 23, 0.16);
box-shadow: none;
contain: layout paint;
/* انیمیشن rise-in حذف شد: در طول استریم، هر chunk DOM را از نو میسازد و
انیمیشن دوباره trigger میشد → احساس لرزش/پرش. */
}
.ai-chat-msg.assistant
.ai-chat-msg-content
.ai-chat-md-stream-tail--pipe-draft
.ai-chat-md-stream-tail__toolbar {
min-height: calc(32px + 0.68rem);
border-bottom: 1px solid rgba(148, 163, 184, 0.24);
background: rgba(15, 23, 42, 0.34);
box-sizing: border-box;
}
.ai-chat-msg.assistant
.ai-chat-msg-content
.ai-chat-md-stream-tail--pipe-draft
.ai-chat-md-stream-tail__pre {
display: block;
margin: 0;
padding: 0.62rem 0.66rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: calc(12.5px * var(--bagpt-ui-font-scale, 1));
line-height: 1.72;
white-space: pre-wrap;
word-break: break-word;
color: rgba(255, 255, 255, 0.78);
background: transparent;
border: 0;
max-height: min(34vh, 260px);
overflow: auto;
overscroll-behavior: contain;
}
.ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-md-stream-tail--code-draft {
margin: 0.7rem 0 0.85rem;
padding: 0;
border: 0;
border-radius: 0.78rem;
overflow: hidden;
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.5), rgba(2, 6, 23, 0.72)),
rgba(2, 6, 23, 0.66);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 8px 24px rgba(2, 6, 23, 0.24);
contain: layout paint;
/* انیمیشن rise-in حذف شد: در طول استریم کد، هر chunk DOM را از نو میسازد و
انیمیشن دوباره trigger میشد → احساس لرزش/پرش. */
}
.ai-chat-msg.assistant
.ai-chat-msg-content
.ai-chat-md-stream-tail--code-draft
.ai-chat-md-stream-tail__toolbar {
min-height: 38px;
padding: 0.38rem 0.56rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
background: rgba(15, 23, 42, 0.38);
}
.ai-chat-msg.assistant
.ai-chat-msg-content
.ai-chat-md-stream-tail--code-draft
.ai-chat-md-stream-tail__hint {
font-size: 10px;
color: rgba(186, 230, 253, 0.74);
}
.ai-chat-msg.assistant
.ai-chat-msg-content
.ai-chat-md-stream-tail--code-draft
.ai-chat-md-stream-tail__pre {
margin: 0;
padding: 0.62rem 0.7rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: calc(12.5px * var(--bagpt-ui-font-scale, 1));
line-height: 1.72;
color: rgba(226, 232, 240, 0.92);
white-space: pre-wrap;
word-break: break-word;
max-height: min(38vh, 300px);
overflow: auto;
overscroll-behavior: contain;
}
.ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-list-item {
display: block;
margin: 0.35rem 0;
line-height: 1.8;
}
.ai-chat-msg.assistant .ai-chat-msg-content strong {
font-weight: 700;
}
.ai-chat-msg.assistant .ai-chat-msg-content b {
font-weight: 700;
}
.ai-chat-msg.assistant .ai-chat-msg-content img {
max-width: 100%;
height: auto;
margin: 20px 0;
border-radius: 8px;
}
.ai-chat-msg.assistant .ai-chat-msg-content figure {
margin: 24px 0;
}
.ai-chat-msg.assistant .ai-chat-msg-content figcaption {
font-size: 14px;
color: #666;
text-align: center;
margin-top: 8px;
}
.ai-chat-msg.assistant .ai-chat-msg-content .section {
margin: 40px 0;
}
.ai-chat-msg.assistant .ai-chat-msg-content .small-space {
margin: 16px 0;
}
.ai-chat-msg.assistant .ai-chat-msg-content .medium-space {
margin: 24px 0;
}
.ai-chat-msg.assistant .ai-chat-msg-content .large-space {
margin: 32px 0;
}
/* فلشهای جهتدار (← → ↔) در markdown: SVG بدون اندازه بندانگشتی میشود */
.ai-chat-msg-content .bagpt-dir-arrow {
display: inline-block;
vertical-align: -0.12em;
line-height: 0;
}
.ai-chat-msg-content .bagpt-dir-arrow svg {
display: block;
width: 1.05em;
height: 1.05em;
flex-shrink: 0;
}
.ai-chat-msg-content .bagpt-dir-arrow svg path {
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ai-chat-msg.assistant .ai-chat-msg-content hr {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.336);
margin: 32px 0;
}
@keyframes bagpt-stream-tail-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes bagpt-stream-tail-rise-in {
from {
opacity: 0;
transform: translateY(4px) scale(0.995);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.ai-chat-msg.assistant .ai-chat-msg-content blockquote,
.ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-md-quote {
border-right: 4px solid #ddd;
padding: 12px 16px;
margin: 20px 0;
background: #f9f9f9;
line-height: 1.8;
font-style: normal;
}
#ai-chat-messages-list .ai-chat-msg.assistant .ai-chat-msg-body {
display: flex;
flex-direction: column;
justify-content: flex-start !important;
align-items: stretch;
}
#ai-chat-messages-list .ai-chat-msg.assistant .ai-chat-msg-content {
order: 1;
}
#ai-chat-messages-list .ai-chat-msg.assistant .ai-chat-msg-sources {
order: 2;
position: static !important;
margin-top: 0.5rem !important;
}
#ai-chat-messages-list .ai-chat-msg.assistant .ai-chat-msg-actions-wrap {
order: 3;
position: static !important;
margin-top: 0.45rem !important;
align-self: flex-start;
}
#ai-chat-app.bagpt-theme-light .ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-code-wrap {
background: linear-gradient(180deg, #f8fbff, #eef4fb);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.85),
0 8px 20px rgba(15, 23, 42, 0.08);
}
#ai-chat-app.bagpt-theme-light .ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-code-wrap--runnable {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 0 0 1px rgba(14, 165, 233, 0.18),
0 8px 22px rgba(2, 132, 199, 0.1);
}
#ai-chat-app.bagpt-theme-light .ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-code-toolbar {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.07), rgba(15, 23, 42, 0.03));
}
#ai-chat-app.bagpt-theme-light .ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-code-lang {
color: rgba(12, 74, 110, 0.92);
}
#ai-chat-app.bagpt-theme-light .ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-code-block {
background: rgba(255, 255, 255, 0.88);
color: rgba(15, 23, 42, 0.94);
}
#ai-chat-app.bagpt-theme-light .ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-md-stream-tail--code-draft {
background: linear-gradient(180deg, #f8fbff, #edf4ff);
}
#ai-chat-app.bagpt-theme-light
.ai-chat-msg.assistant
.ai-chat-msg-content
.ai-chat-md-stream-tail--code-draft
.ai-chat-md-stream-tail__toolbar {
background: rgba(15, 23, 42, 0.08);
}
#ai-chat-app.bagpt-theme-light
.ai-chat-msg.assistant
.ai-chat-msg-content
.ai-chat-md-stream-tail--code-draft
.ai-chat-md-stream-tail__hint {
color: rgba(12, 74, 110, 0.8);
}
#ai-chat-app.bagpt-theme-light
.ai-chat-msg.assistant
.ai-chat-msg-content
.ai-chat-md-stream-tail--code-draft
.ai-chat-md-stream-tail__pre {
color: rgba(15, 23, 42, 0.9);
}
.bagpt-table-wrap {
margin: 0.85rem 0 1rem;
border: 0;
border-radius: 0.78rem;
overflow: hidden;
background: rgba(2, 6, 23, 0.16);
box-shadow: none !important;
contain: layout;
}
.bagpt-table-wrap .bagpt-table-toolbar {
display: flex;
justify-content: flex-end;
align-items: center;
box-sizing: border-box;
min-height: calc(32px + 0.68rem);
padding: 0.34rem 0.46rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.24);
background: rgba(15, 23, 42, 0.34);
}
.bagpt-table-wrap .bagpt-table-download-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 0.6rem;
border: 1px solid rgba(148, 163, 184, 0.36);
background: rgba(148, 163, 184, 0.1);
}
.bagpt-table-wrap .bagpt-table-download-btn svg {
width: 16px;
height: 16px;
}
.bagpt-table-wrap .ai-chat-md-table {
width: 100%;
border-collapse: collapse;
font-size: calc(13px * var(--bagpt-ui-font-scale, 1));
}
.bagpt-table-wrap .ai-chat-md-table th,
.bagpt-table-wrap .ai-chat-md-table td {
padding: 0.45rem 0.55rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.22);
border-inline-end: 0;
vertical-align: top;
line-height: 1.5;
}
.bagpt-table-wrap .ai-chat-md-table th:last-child,
.bagpt-table-wrap .ai-chat-md-table td:last-child {
border-inline-end: 0;
}
.bagpt-table-wrap .ai-chat-md-table thead th {
background: linear-gradient(
180deg,
rgba(51, 65, 85, 0.48),
rgba(30, 41, 59, 0.36)
);
font-weight: 600;
}
.bagpt-table-wrap .ai-chat-md-table tbody tr:nth-child(2n) td {
background: rgba(51, 65, 85, 0.16);
}
.bagpt-table-wrap .ai-chat-md-table tbody tr:last-child td {
border-bottom: 0;
}
/* Hard override: remove all vertical grid lines in table (Y-axis) */
.bagpt-table-wrap .ai-chat-md-table th,
.bagpt-table-wrap .ai-chat-md-table td {
border-left: 0 !important;
border-right: 0 !important;
border-inline-start: 0 !important;
border-inline-end: 0 !important;
}
.bagpt-quote-source-pulse {
animation: bagptQuotePulse 1.1s ease;
}
.bagpt-quote-hit {
background: linear-gradient(
90deg,
rgba(34, 211, 238, 0.25),
rgba(56, 189, 248, 0.32)
);
color: inherit;
border-radius: 0.35rem;
box-shadow:
0 0 0 1px rgba(34, 211, 238, 0.25),
0 0 14px rgba(34, 211, 238, 0.2);
padding: 0 0.12em;
}
.bagpt-chat-quote[data-quote-source],
.bagpt-chat-quote.is-clickable {
cursor: pointer;
transition:
border-color 0.18s ease,
background-color 0.18s ease,
transform 0.18s ease,
box-shadow 0.18s ease;
}
.bagpt-chat-quote[data-quote-source]:hover,
.bagpt-chat-quote[data-quote-source]:focus-visible,
.bagpt-chat-quote.is-clickable:hover,
.bagpt-chat-quote.is-clickable:focus-visible {
border-color: rgba(103, 232, 249, 0.5);
background: rgba(6, 182, 212, 0.12);
box-shadow: 0 10px 24px rgba(8, 145, 178, 0.14);
transform: translateY(-1px);
outline: none;
}
/*
* دکمهٔ شناور «افزودن نقلقول» هنگام انتخاب متن در پاسخ دستیار
* (JS: body.appendChild + مختصات getBoundingClientRect) — بدون position:fixed دیده نمیشد.
*/
.bagpt-selection-quote-btn {
position: fixed;
z-index: 12000;
left: 0;
top: 0;
transform: translate(-50%, 0);
box-sizing: border-box;
margin: 0;
padding: 0.4rem 0.95rem 0.4rem 0.65rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
max-width: min(94vw, 18rem);
border-radius: 9999px;
border: 1px solid rgba(103, 232, 249, 0.42);
background: linear-gradient(
155deg,
rgba(6, 78, 95, 0.97) 0%,
rgba(15, 23, 42, 0.94) 55%,
rgba(8, 47, 73, 0.96) 100%
);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: rgba(236, 254, 255, 0.96);
font-size: 0.8125rem;
font-weight: 650;
letter-spacing: 0.01em;
line-height: 1.25;
text-align: right;
cursor: pointer;
pointer-events: auto;
touch-action: manipulation;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.35),
0 10px 28px rgba(2, 20, 35, 0.55),
0 0 36px rgba(34, 211, 238, 0.14);
transition:
transform 0.16s ease,
box-shadow 0.16s ease,
border-color 0.16s ease,
background 0.16s ease;
}
/* بدون این بلوک، `display:inline-flex` بالا کلاس Tailwind `.hidden` را بیاثر میکرد و دکمه همیشه دیده میشد */
.bagpt-selection-quote-btn.hidden {
display: none !important;
pointer-events: none !important;
}
.bagpt-selection-quote-btn__ic {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
line-height: 1;
opacity: 0.92;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.bagpt-selection-quote-btn__txt {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bagpt-selection-quote-btn:not(.hidden) {
animation: bagptSelectionQuotePop 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.bagpt-selection-quote-btn:not(.hidden) {
animation: none;
}
}
.bagpt-selection-quote-btn:hover {
border-color: rgba(165, 243, 252, 0.65);
background: linear-gradient(
155deg,
rgba(8, 91, 112, 0.98) 0%,
rgba(15, 23, 42, 0.96) 100%
);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.4),
0 12px 34px rgba(2, 28, 45, 0.58),
0 0 44px rgba(103, 232, 249, 0.22);
transform: translate(-50%, -1px);
}
.bagpt-selection-quote-btn:focus-visible {
outline: none;
box-shadow:
0 0 0 2px rgba(15, 23, 42, 0.95),
0 0 0 4px rgba(34, 211, 238, 0.55),
0 12px 32px rgba(2, 20, 35, 0.55);
}
#ai-chat-app.bagpt-theme-light .bagpt-selection-quote-btn {
border-color: rgba(14, 165, 233, 0.38);
background: linear-gradient(
155deg,
rgba(255, 255, 255, 0.97) 0%,
rgba(241, 245, 249, 0.95) 100%
);
color: rgba(15, 23, 42, 0.92);
box-shadow:
0 0 0 1px rgba(15, 23, 42, 0.06),
0 10px 28px rgba(15, 23, 42, 0.12),
0 0 32px rgba(14, 165, 233, 0.12);
}
#ai-chat-app.bagpt-theme-light .bagpt-selection-quote-btn:hover {
border-color: rgba(14, 165, 233, 0.55);
background: #ffffff;
box-shadow:
0 0 0 1px rgba(15, 23, 42, 0.08),
0 14px 36px rgba(15, 23, 42, 0.14),
0 0 40px rgba(14, 165, 233, 0.16);
}
#ai-chat-app.bagpt-theme-light .bagpt-selection-quote-btn:focus-visible {
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.95),
0 0 0 4px rgba(14, 165, 233, 0.45),
0 12px 32px rgba(15, 23, 42, 0.12);
}
@keyframes bagptSelectionQuotePop {
0% {
opacity: 0;
transform: translate(-50%, 6px) scale(0.94);
}
100% {
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
}
@keyframes bagptQuotePulse {
0% {
box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.45);
}
100% {
box-shadow: 0 0 0 14px rgba(34, 211, 238, 0);
}
}
/* code-block toolbar actions */
.ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-code-wrap {
margin: 0.72rem 0 0.9rem;
border-radius: 0.82rem;
overflow: hidden;
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.52), rgba(2, 6, 23, 0.76)),
rgba(2, 6, 23, 0.62);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 10px 26px rgba(2, 6, 23, 0.28);
}
.ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-code-wrap--runnable {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 0 0 1px rgba(56, 189, 248, 0.16),
0 12px 30px rgba(2, 132, 199, 0.16);
}
.ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-code-toolbar {
min-height: 40px;
padding: 0.42rem 0.56rem;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}
.ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-code-lang {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.01em;
color: rgba(186, 230, 253, 0.94);
}
.ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-code-block {
margin: 0;
padding: 0.72rem 0.84rem;
overflow: auto;
background: rgba(2, 6, 23, 0.45);
color: rgba(226, 232, 240, 0.96);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: calc(12.5px * var(--bagpt-ui-font-scale, 1));
line-height: 1.72;
}
.ai-chat-msg.assistant .ai-chat-msg-content .ai-chat-code-block code {
color: inherit;
}
.ai-chat-code-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.ai-chat-code-copy-btn,
.ai-chat-code-sandbox-btn {
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.88);
border-radius: 0.55rem;
font-size: 11px;
line-height: 1;
padding: 0.38rem 0.56rem;
transition: all 0.18s ease;
}
.ai-chat-code-copy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.95rem;
height: 1.95rem;
padding: 0;
}
.ai-chat-code-copy-btn .ai-chat-code-copy-icon {
width: 14px;
height: 14px;
}
.ai-chat-code-copy-btn:hover,
.ai-chat-code-sandbox-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.ai-chat-code-copy-btn.is-copied {
border-color: rgba(16, 185, 129, 0.45);
background: rgba(16, 185, 129, 0.18);
color: #d1fae5;
}
#ai-chat-app.bagpt-theme-light .ai-chat-code-copy-btn,
#ai-chat-app.bagpt-theme-light .ai-chat-code-sandbox-btn {
border-color: rgba(15, 23, 42, 0.2);
background: rgba(15, 23, 42, 0.05);
color: rgba(15, 23, 42, 0.86);
}
#ai-chat-app.bagpt-theme-light .ai-chat-code-copy-btn:hover,
#ai-chat-app.bagpt-theme-light .ai-chat-code-sandbox-btn:hover {
background: rgba(15, 23, 42, 0.1);
color: #0f172a;
}
.ai-chat-inline-code-wrap {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.ai-chat-math-inline {
display: inline-block;
direction: ltr;
unicode-bidi: isolate;
padding: 0.08rem 0.4rem;
border-radius: 0.45rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
font-family: "Times New Roman", "Cambria Math", "STIX Two Math", serif;
line-height: 1.6;
}
.ai-chat-math-block {
direction: ltr;
unicode-bidi: isolate;
text-align: center;
margin: 0.6rem 0;
padding: 0.6rem 0.7rem;
border-radius: 0.7rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
font-family: "Times New Roman", "Cambria Math", "STIX Two Math", serif;
overflow-x: auto;
}
.ai-chat-math-frac {
display: inline-flex;
flex-direction: column;
align-items: center;
vertical-align: middle;
margin: 0 0.1rem;
}
.ai-chat-math-frac-num {
display: block;
padding: 0 0.18rem 0.02rem;
border-bottom: 1px solid currentColor;
}
.ai-chat-math-frac-den {
display: block;
padding: 0.02rem 0.18rem 0;
}
.ai-chat-inline-copy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.2rem;
height: 1.2rem;
border-radius: 0.3rem;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.78);
transition: all 0.16s ease;
}
.ai-chat-inline-copy-btn svg {
width: 10px;
height: 10px;
}
.ai-chat-inline-copy-btn:hover,
.ai-chat-inline-copy-btn.is-copied {
background: rgba(56, 189, 248, 0.22);
border-color: rgba(56, 189, 248, 0.45);
color: #e0f2fe;
}
#ai-chat-app.bagpt-theme-light .ai-chat-inline-copy-btn {
border-color: rgba(15, 23, 42, 0.2);
background: rgba(15, 23, 42, 0.06);
color: rgba(15, 23, 42, 0.76);
}
#ai-chat-app.bagpt-theme-light .ai-chat-inline-copy-btn:hover,
#ai-chat-app.bagpt-theme-light .ai-chat-inline-copy-btn.is-copied {
background: rgba(56, 189, 248, 0.18);
border-color: rgba(56, 189, 248, 0.45);
color: #0c4a6e;
}
/* Sandbox panel refresh */
#bagpt-sandbox-panel {
background:
radial-gradient(1200px 420px at 100% -10%, rgba(6, 182, 212, 0.13), transparent 60%),
radial-gradient(920px 360px at 0% 110%, rgba(99, 102, 241, 0.12), transparent 58%),
#020409;
backdrop-filter: blur(4px);
}
#bagpt-sandbox-panel .bagpt-sandbox-sheet {
margin: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
overflow: hidden;
background: linear-gradient(
180deg,
rgba(7, 10, 16, 0.96) 0%,
rgba(4, 7, 12, 0.98) 56%,
rgba(3, 6, 11, 1) 100%
);
box-shadow:
0 24px 70px rgba(0, 0, 0, 0.52),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
#bagpt-sandbox-panel .bagpt-sandbox-topbar {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}
#bagpt-sandbox-panel .bagpt-sandbox-editor-wrap {
background: rgba(6, 10, 16, 0.9);
}
#bagpt-sandbox-panel .bagpt-sandbox-preview-wrap {
background: rgba(4, 8, 14, 0.92);
}
#bagpt-sandbox-panel .bagpt-sandbox-toolbar {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015));
}
#bagpt-sandbox-panel #bagpt-sandbox-mode {
min-width: 124px;
}
#bagpt-sandbox-panel #bagpt-sandbox-code {
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) 0 0 / 24px 24px,
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px) 0 0 / 24px 24px,
#0b1220;
color: rgba(240, 249, 255, 0.94);
line-height: 1.9;
caret-color: #67e8f9;
}
#bagpt-sandbox-panel #bagpt-sandbox-code:focus {
box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.34);
}
#bagpt-sandbox-panel #bagpt-sandbox-frame {
background: #ffffff;
}
#bagpt-sandbox-panel #bagpt-sandbox-console {
background: #050b11;
color: #7ef8b0;
}
@media (max-width: 767px) {
#bagpt-sandbox-panel .bagpt-sandbox-sheet {
margin: 0;
border-radius: 0;
border: 0;
}
}
#ai-chat-app.bagpt-theme-light #bagpt-sandbox-panel {
background:
radial-gradient(1000px 360px at 100% -8%, rgba(14, 116, 144, 0.1), transparent 62%),
radial-gradient(860px 320px at 0% 108%, rgba(79, 70, 229, 0.09), transparent 58%),
#f1f5f9 !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-sandbox-panel .bagpt-sandbox-sheet {
background: linear-gradient(180deg, #ffffff, #f8fafc 65%, #f1f5f9) !important;
border-color: rgba(15, 23, 42, 0.12);
box-shadow:
0 18px 46px rgba(15, 23, 42, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
#ai-chat-app.bagpt-theme-light #bagpt-sandbox-panel .border-white\/10 {
border-color: rgba(15, 23, 42, 0.12) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-sandbox-panel .bagpt-sandbox-topbar,
#ai-chat-app.bagpt-theme-light #bagpt-sandbox-panel .bagpt-sandbox-toolbar {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.045), rgba(15, 23, 42, 0.015));
}
#ai-chat-app.bagpt-theme-light #bagpt-sandbox-panel #bagpt-sandbox-code {
background:
linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px) 0 0 / 24px 24px,
linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px) 0 0 / 24px 24px,
#ffffff !important;
color: #0f172a !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-sandbox-code::placeholder {
color: rgba(15, 23, 42, 0.45) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-sandbox-panel #bagpt-sandbox-copy,
#ai-chat-app.bagpt-theme-light #bagpt-sandbox-panel #bagpt-sandbox-clear,
#ai-chat-app.bagpt-theme-light #bagpt-sandbox-panel #bagpt-sandbox-to-chat {
color: rgba(15, 23, 42, 0.8) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-sandbox-panel #bagpt-sandbox-copy:hover,
#ai-chat-app.bagpt-theme-light #bagpt-sandbox-panel #bagpt-sandbox-clear:hover,
#ai-chat-app.bagpt-theme-light #bagpt-sandbox-panel #bagpt-sandbox-to-chat:hover {
background: rgba(15, 23, 42, 0.08) !important;
color: #0f172a !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-sandbox-panel #bagpt-sandbox-console {
background: #020617;
color: #86efac;
}
/* Affiliate section polish */
.bagpt-affiliate-panel .bagpt-aff-card {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.055) 0%,
rgba(255, 255, 255, 0.018) 100%
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 12px 30px rgba(0, 0, 0, 0.24);
}
.bagpt-affiliate-panel .bagpt-aff-hero {
background:
radial-gradient(120% 160% at 100% 0%, rgba(139, 92, 246, 0.24), transparent 58%),
radial-gradient(120% 150% at 0% 100%, rgba(6, 182, 212, 0.18), transparent 56%),
linear-gradient(180deg, rgba(18, 16, 33, 0.9), rgba(12, 12, 24, 0.88));
}
.bagpt-affiliate-panel .bagpt-aff-link-input {
background: rgba(5, 7, 12, 0.4);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.bagpt-affiliate-panel .bagpt-aff-link-input:focus {
box-shadow:
inset 0 0 0 1px rgba(125, 211, 252, 0.45),
0 0 0 3px rgba(56, 189, 248, 0.14);
}
.bagpt-affiliate-panel .bagpt-aff-cta {
background: linear-gradient(180deg, rgba(167, 139, 250, 0.26), rgba(139, 92, 246, 0.16));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 9px 22px rgba(76, 29, 149, 0.35);
}
.bagpt-affiliate-panel .bagpt-aff-cta:hover {
transform: translateY(-1px);
}
.bagpt-affiliate-panel .bagpt-aff-cta-muted {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 8px 20px rgba(0, 0, 0, 0.2);
}
.bagpt-affiliate-panel .bagpt-aff-empty,
.bagpt-affiliate-panel .bagpt-aff-row {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.02));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.bagpt-affiliate-panel .bagpt-aff-pill {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.bagpt-affiliate-panel .bagpt-aff-pill-success {
background: linear-gradient(180deg, rgba(16, 185, 129, 0.26), rgba(16, 185, 129, 0.14));
}
.bagpt-affiliate-panel .bagpt-aff-pill-warn {
background: linear-gradient(180deg, rgba(245, 158, 11, 0.26), rgba(245, 158, 11, 0.14));
}
.bagpt-affiliate-panel .bagpt-aff-pill-info {
background: linear-gradient(180deg, rgba(6, 182, 212, 0.26), rgba(6, 182, 212, 0.14));
}
.bagpt-affiliate-panel .bagpt-aff-pill-muted {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.07));
}
.bagpt-affiliate-panel .bagpt-aff-row--compact {
border: 1px solid rgba(255, 255, 255, 0.08);
background:
linear-gradient(142deg, rgba(34, 211, 238, 0.05) 0%, transparent 48%),
linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.025));
}
.bagpt-affiliate-panel .bagpt-aff-row--compact .bagpt-aff-row__line1 {
min-height: 24px;
}
.bagpt-affiliate-panel .bagpt-aff-row--compact .bagpt-aff-row__line2 p {
margin: 0;
}
/* چت گروهی — حبابها: پایه تیره + تهرنگ ملایم برای هر کاربر (tone ۰…۹) */
#bagpt-group-overlay .bagpt-group-bubble-msg {
border-radius: 1.15rem;
position: relative;
padding-left: 16px;
padding-right: 16px;
border-width: 1px;
border-style: solid;
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.22),
0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
#bagpt-group-overlay .bagpt-group-bubble--user {
color: rgba(248, 250, 252, 0.96) !important;
}
#bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-0 {
background:
linear-gradient(158deg, rgba(45, 212, 191, 0.1) 0%, transparent 46%),
linear-gradient(182deg, rgba(32, 36, 45, 0.97) 0%, rgba(18, 20, 28, 0.99) 100%);
border-color: rgba(45, 212, 191, 0.26);
}
#bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-1 {
background:
linear-gradient(158deg, rgba(56, 189, 248, 0.1) 0%, transparent 46%),
linear-gradient(182deg, rgba(32, 36, 45, 0.97) 0%, rgba(18, 20, 28, 0.99) 100%);
border-color: rgba(56, 189, 248, 0.26);
}
#bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-2 {
background:
linear-gradient(158deg, rgba(74, 222, 128, 0.09) 0%, transparent 46%),
linear-gradient(182deg, rgba(32, 36, 45, 0.97) 0%, rgba(18, 20, 28, 0.99) 100%);
border-color: rgba(74, 222, 128, 0.24);
}
#bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-3 {
background:
linear-gradient(158deg, rgba(251, 191, 36, 0.09) 0%, transparent 46%),
linear-gradient(182deg, rgba(32, 36, 45, 0.97) 0%, rgba(18, 20, 28, 0.99) 100%);
border-color: rgba(251, 191, 36, 0.26);
}
#bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-4 {
background:
linear-gradient(158deg, rgba(244, 114, 182, 0.1) 0%, transparent 46%),
linear-gradient(182deg, rgba(32, 36, 45, 0.97) 0%, rgba(18, 20, 28, 0.99) 100%);
border-color: rgba(244, 114, 182, 0.24);
}
#bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-5 {
background:
linear-gradient(158deg, rgba(167, 139, 250, 0.1) 0%, transparent 46%),
linear-gradient(182deg, rgba(32, 36, 45, 0.97) 0%, rgba(18, 20, 28, 0.99) 100%);
border-color: rgba(167, 139, 250, 0.26);
}
#bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-6 {
background:
linear-gradient(158deg, rgba(125, 211, 252, 0.1) 0%, transparent 46%),
linear-gradient(182deg, rgba(32, 36, 45, 0.97) 0%, rgba(18, 20, 28, 0.99) 100%);
border-color: rgba(125, 211, 252, 0.26);
}
#bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-7 {
background:
linear-gradient(158deg, rgba(232, 121, 249, 0.09) 0%, transparent 46%),
linear-gradient(182deg, rgba(32, 36, 45, 0.97) 0%, rgba(18, 20, 28, 0.99) 100%);
border-color: rgba(232, 121, 249, 0.24);
}
#bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-8 {
background:
linear-gradient(158deg, rgba(163, 230, 53, 0.08) 0%, transparent 46%),
linear-gradient(182deg, rgba(32, 36, 45, 0.97) 0%, rgba(18, 20, 28, 0.99) 100%);
border-color: rgba(163, 230, 53, 0.22);
}
#bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-9 {
background:
linear-gradient(158deg, rgba(129, 140, 248, 0.1) 0%, transparent 46%),
linear-gradient(182deg, rgba(32, 36, 45, 0.97) 0%, rgba(18, 20, 28, 0.99) 100%);
border-color: rgba(129, 140, 248, 0.26);
}
#bagpt-group-overlay .bagpt-group-bubble--ai {
background:
linear-gradient(145deg, rgba(139, 92, 246, 0.22) 0%, transparent 42%),
linear-gradient(168deg, #2d2640 0%, #1e1a2e 52%, #15121f 100%);
border-color: rgba(167, 139, 250, 0.38);
color: rgba(255, 255, 255, 0.95) !important;
box-shadow:
0 6px 22px rgba(88, 28, 135, 0.22),
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 0 0 1px rgba(167, 139, 250, 0.12);
}
#bagpt-group-overlay .bagpt-group-peer-name--tone-0 {
color: rgba(153, 246, 228, 0.88);
}
#bagpt-group-overlay .bagpt-group-peer-name--tone-1 {
color: rgba(186, 230, 253, 0.88);
}
#bagpt-group-overlay .bagpt-group-peer-name--tone-2 {
color: rgba(187, 247, 208, 0.88);
}
#bagpt-group-overlay .bagpt-group-peer-name--tone-3 {
color: rgba(253, 230, 138, 0.86);
}
#bagpt-group-overlay .bagpt-group-peer-name--tone-4 {
color: rgba(251, 207, 232, 0.88);
}
#bagpt-group-overlay .bagpt-group-peer-name--tone-5 {
color: rgba(221, 214, 254, 0.88);
}
#bagpt-group-overlay .bagpt-group-peer-name--tone-6 {
color: rgba(186, 230, 253, 0.88);
}
#bagpt-group-overlay .bagpt-group-peer-name--tone-7 {
color: rgba(245, 208, 254, 0.86);
}
#bagpt-group-overlay .bagpt-group-peer-name--tone-8 {
color: rgba(217, 249, 157, 0.85);
}
#bagpt-group-overlay .bagpt-group-peer-name--tone-9 {
color: rgba(199, 210, 254, 0.88);
}
#bagpt-group-overlay .bagpt-group-peer-name--ai {
color: rgba(196, 181, 253, 0.96);
}
/* عنوان داخل حباب مدل (همراستا با متن) */
#bagpt-group-overlay .bagpt-group-bubble--ai > .bagpt-group-peer-name:first-child {
position: relative;
z-index: 2;
}
#bagpt-group-overlay .bagpt-group-bubble--user > .bagpt-group-peer-name:first-child {
position: relative;
z-index: 2;
}
#bagpt-group-overlay .bagpt-group-bubble-wrap {
position: relative;
}
/* زیر حباب — همان الگوی ai-chat-msg-user-actions */
#bagpt-group-overlay .bagpt-group-msg-actions-wrap {
width: 100%;
max-width: 100%;
margin-top: 0.12rem;
}
#bagpt-group-overlay .bagpt-group-msg-actions-wrap--align-end {
display: flex;
justify-content: flex-end;
}
#bagpt-group-overlay .bagpt-group-msg-actions-wrap--align-start {
display: flex;
justify-content: flex-start;
}
#bagpt-group-overlay .bagpt-group-msg-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.28rem;
}
#bagpt-group-overlay .bagpt-group-msg-action {
position: static;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 0;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.52);
cursor: pointer;
transition:
background 0.15s ease,
color 0.15s ease;
}
#bagpt-group-overlay .bagpt-group-msg-action:hover {
background: rgba(255, 255, 255, 0.11);
color: rgba(255, 255, 255, 0.88);
}
#bagpt-group-overlay .bagpt-group-msg-action-svg {
width: 1rem;
height: 1rem;
}
#bagpt-group-overlay .bagpt-group-msg--flash .bagpt-group-bubble-wrap {
outline: 2px solid rgba(34, 211, 238, 0.55);
outline-offset: 2px;
border-radius: 1.05rem;
transition: outline-color 1.1s ease;
}
/* پیشنمایش ریپلی در داک گروه */
#bagpt-group-overlay #bagpt-group-quote-preview {
width: 100%;
}
#bagpt-group-overlay .bagpt-group-quote-chip {
display: flex;
align-items: flex-start;
gap: 0.5rem;
width: 100%;
max-width: 100%;
padding: 0.55rem 0.65rem;
border-radius: 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
text-align: right;
}
#bagpt-group-overlay .bagpt-group-quote-chip-remove {
flex-shrink: 0;
width: 1.65rem;
height: 1.65rem;
margin: 0;
padding: 0;
display: grid;
place-items: center;
border: 0;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.65);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
#bagpt-group-overlay .bagpt-group-quote-chip-remove:hover {
background: rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.95);
}
#bagpt-group-overlay .bagpt-group-quote-chip-title {
font-size: 0.7rem;
font-weight: 600;
line-height: 1.35;
color: rgba(255, 255, 255, 0.55);
}
#bagpt-group-overlay .bagpt-group-quote-chip-snippet {
font-size: 0.8rem;
line-height: 1.45;
color: rgba(255, 255, 255, 0.82);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-word;
}
/* چت گروهی — آواتار مدل (پریمیوم) */
#bagpt-group-overlay .bagpt-group-avatar--bot {
position: relative;
width: 2.75rem;
height: 2.75rem;
flex-shrink: 0;
}
#bagpt-group-overlay .bagpt-group-avatar-bot__aurora {
position: absolute;
inset: -5px;
border-radius: 9999px;
background: conic-gradient(
from 200deg,
rgba(56, 189, 248, 0.5),
rgba(167, 139, 250, 0.55),
rgba(244, 114, 182, 0.45),
rgba(34, 211, 238, 0.5),
rgba(167, 139, 250, 0.55),
rgba(56, 189, 248, 0.5)
);
filter: blur(7px);
opacity: 0.72;
animation: bagptGroupBotAurora 7s ease-in-out infinite;
pointer-events: none;
}
@keyframes bagptGroupBotAurora {
0%,
100% {
opacity: 0.55;
transform: scale(1);
}
50% {
opacity: 0.88;
transform: scale(1.06);
}
}
@media (prefers-reduced-motion: reduce) {
#bagpt-group-overlay .bagpt-group-avatar-bot__aurora {
animation: none;
opacity: 0.65;
}
}
#bagpt-group-overlay .bagpt-group-avatar-bot__ring {
position: absolute;
inset: 0;
border-radius: 9999px;
box-shadow:
0 0 0 1px rgba(196, 181, 253, 0.55),
0 0 0 2px rgba(15, 23, 42, 0.35),
0 0 20px rgba(139, 92, 246, 0.35);
pointer-events: none;
}
#bagpt-group-overlay .bagpt-group-avatar-bot__core {
position: relative;
z-index: 1;
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
border-radius: 9999px;
background:
radial-gradient(ellipse 90% 75% at 32% 22%, rgba(255, 255, 255, 0.28) 0%, transparent 52%),
linear-gradient(155deg, #4338ca 0%, #312e81 38%, #1e1b4b 72%, #0f0a1a 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.35),
0 6px 18px rgba(49, 46, 129, 0.55);
border: 1px solid rgba(196, 181, 253, 0.42);
}
#bagpt-group-overlay .bagpt-group-avatar-bot__mark {
width: 1.125rem;
height: 1.125rem;
color: #faf5ff;
filter: drop-shadow(0 0 5px rgba(167, 139, 250, 0.75));
}
/* آواتار اعضا: همان رنگ تون حباب، حلقه ملایم + جایگزین در خطای تصویر */
#bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-0 {
box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.38), 0 4px 12px rgba(0, 0, 0, 0.28);
}
#bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-1 {
box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.38), 0 4px 12px rgba(0, 0, 0, 0.28);
}
#bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-2 {
box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.36), 0 4px 12px rgba(0, 0, 0, 0.28);
}
#bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-3 {
box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.36), 0 4px 12px rgba(0, 0, 0, 0.28);
}
#bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-4 {
box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.36), 0 4px 12px rgba(0, 0, 0, 0.28);
}
#bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-5 {
box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.38), 0 4px 12px rgba(0, 0, 0, 0.28);
}
#bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-6 {
box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.38), 0 4px 12px rgba(0, 0, 0, 0.28);
}
#bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-7 {
box-shadow: 0 0 0 1px rgba(232, 121, 249, 0.36), 0 4px 12px rgba(0, 0, 0, 0.28);
}
#bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-8 {
box-shadow: 0 0 0 1px rgba(163, 230, 53, 0.34), 0 4px 12px rgba(0, 0, 0, 0.28);
}
#bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-9 {
box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.38), 0 4px 12px rgba(0, 0, 0, 0.28);
}
#bagpt-group-overlay .bagpt-group-avatar__img.bagpt-group-avatar__img--err {
display: none !important;
}
#bagpt-group-overlay .bagpt-group-avatar__img.bagpt-group-avatar__img--err + .bagpt-group-avatar__fallback {
display: flex !important;
}
/* چت گروهی — اسکرول نرم و ورود پیام (بدون پرش ناگهانی) */
#bagpt-group-overlay #bagpt-group-messages {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
#bagpt-group-overlay .bagpt-group-msg--enter {
animation: bagptGroupMsgEnter 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
transform: translateZ(0);
backface-visibility: hidden;
}
@keyframes bagptGroupMsgEnter {
from {
opacity: 0;
transform: translate3d(0, 12px, 0) scale(0.99);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
/* پیشنمایش پاسخ مدل — هاله، شِیمر، نقطههای ضرباندار */
#bagpt-group-overlay .bagpt-group-msg--prelude .bagpt-group-avatar-bot__core {
animation: bagptGroupPreludeCore 1.35s ease-in-out infinite;
}
@keyframes bagptGroupPreludeCore {
0%,
100% {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.35),
0 6px 18px rgba(49, 46, 129, 0.55);
filter: saturate(1);
}
50% {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.32),
inset 0 -1px 0 rgba(0, 0, 0, 0.28),
0 10px 28px rgba(139, 92, 246, 0.55);
filter: saturate(1.12);
}
}
#bagpt-group-overlay .bagpt-group-ai-prelude-bubble {
border-color: rgba(167, 139, 250, 0.55) !important;
box-shadow:
0 0 0 1px rgba(167, 139, 250, 0.2),
0 8px 32px rgba(88, 28, 135, 0.35),
0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
}
#bagpt-group-overlay .bagpt-group-ai-prelude__glow {
background: radial-gradient(
ellipse 80% 70% at 50% 50%,
rgba(167, 139, 250, 0.35) 0%,
transparent 65%
);
animation: bagptGroupPreludeGlow 2.2s ease-in-out infinite;
opacity: 0.85;
}
@keyframes bagptGroupPreludeGlow {
0%,
100% {
opacity: 0.45;
transform: scale(1);
}
50% {
opacity: 0.95;
transform: scale(1.03);
}
}
#bagpt-group-overlay .bagpt-group-ai-prelude__shimmer {
background: linear-gradient(
105deg,
transparent 0%,
rgba(255, 255, 255, 0.07) 42%,
rgba(196, 181, 253, 0.22) 50%,
rgba(255, 255, 255, 0.08) 58%,
transparent 100%
);
background-size: 220% 100%;
animation: bagptGroupPreludeShimmer 1.65s ease-in-out infinite;
}
@keyframes bagptGroupPreludeShimmer {
0% {
background-position: 120% 0;
}
100% {
background-position: -120% 0;
}
}
#bagpt-group-overlay .bagpt-group-ai-prelude__label {
color: rgba(255, 255, 255, 0.88);
}
#bagpt-group-overlay .bagpt-group-ai-prelude__dots > span {
display: inline-block;
width: 0.35rem;
height: 0.35rem;
border-radius: 9999px;
background: rgba(196, 181, 253, 0.95);
box-shadow: 0 0 10px rgba(167, 139, 250, 0.75);
animation: bagptGroupPreludeDot 1.1s ease-in-out infinite;
}
#bagpt-group-overlay .bagpt-group-ai-prelude__dots > span:nth-child(2) {
animation-delay: 0.15s;
}
#bagpt-group-overlay .bagpt-group-ai-prelude__dots > span:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes bagptGroupPreludeDot {
0%,
100% {
opacity: 0.35;
transform: translateY(0) scale(0.92);
}
50% {
opacity: 1;
transform: translateY(-3px) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
#bagpt-group-overlay .bagpt-group-msg--enter {
animation: none;
opacity: 1;
transform: none;
}
#bagpt-group-overlay .bagpt-group-msg--prelude .bagpt-group-avatar-bot__core {
animation: none;
}
#bagpt-group-overlay .bagpt-group-ai-prelude__glow,
#bagpt-group-overlay .bagpt-group-ai-prelude__shimmer,
#bagpt-group-overlay .bagpt-group-ai-prelude__dots > span {
animation: none !important;
}
#bagpt-group-overlay #bagpt-group-messages {
scroll-behavior: auto;
}
}
/* چت گروهی — تم روشن */
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay,
body.bagpt-theme-light #bagpt-group-overlay {
background: #f1f5f9 !important;
color: rgba(15, 23, 42, 0.95) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay #bagpt-group-messages,
body.bagpt-theme-light #bagpt-group-overlay #bagpt-group-messages {
background: transparent !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .border-white\/10,
body.bagpt-theme-light #bagpt-group-overlay .border-white\/10 {
border-color: rgba(15, 23, 42, 0.12) !important;
}
/* عنوان گروه: Tailwind text-white روی پسزمینه روشن نامرئی میشود */
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay #bagpt-group-title,
body.bagpt-theme-light #bagpt-group-overlay #bagpt-group-title {
color: rgba(15, 23, 42, 0.96) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay #bagpt-group-sub,
body.bagpt-theme-light #bagpt-group-overlay #bagpt-group-sub {
color: rgba(71, 85, 105, 0.92) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .text-white\/92,
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .text-white\/45,
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .text-white\/40,
body.bagpt-theme-light #bagpt-group-overlay .text-white\/92,
body.bagpt-theme-light #bagpt-group-overlay .text-white\/45,
body.bagpt-theme-light #bagpt-group-overlay .text-white\/40 {
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay input,
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay textarea,
body.bagpt-theme-light #bagpt-group-overlay input,
body.bagpt-theme-light #bagpt-group-overlay textarea {
background: rgba(255, 255, 255, 0.95) !important;
border-color: rgba(15, 23, 42, 0.14) !important;
color: rgba(15, 23, 42, 0.95) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-input-dock.bagpt-input-dock,
body.bagpt-theme-light #bagpt-group-input-dock.bagpt-input-dock {
background-image: linear-gradient(
to top,
rgba(248, 250, 252, 0.98) 0%,
rgba(248, 250, 252, 0.88) 45%,
rgba(248, 250, 252, 0) 100%
) !important;
border-color: transparent !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-pill-input,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-pill-input {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.12) !important;
box-shadow: 0 4px 24px rgba(15, 23, 42, 0.07) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay #bagpt-group-back,
body.bagpt-theme-light #bagpt-group-overlay #bagpt-group-back {
background: rgba(255, 255, 255, 0.96) !important;
border-color: rgba(15, 23, 42, 0.12) !important;
color: rgba(15, 23, 42, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay #bagpt-group-back svg,
body.bagpt-theme-light #bagpt-group-overlay #bagpt-group-back svg {
color: rgba(15, 23, 42, 0.55) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-pill-input > p,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-pill-input > p {
color: rgba(15, 23, 42, 0.52) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-pill-input > p .font-mono,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-pill-input > p .font-mono {
color: rgba(15, 23, 42, 0.75) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay #bagpt-group-copy-invite,
body.bagpt-theme-light #bagpt-group-overlay #bagpt-group-copy-invite {
background: rgba(255, 255, 255, 0.92) !important;
border-color: rgba(15, 23, 42, 0.12) !important;
color: rgba(15, 23, 42, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay #bagpt-group-close,
body.bagpt-theme-light #bagpt-group-overlay #bagpt-group-close {
border-color: rgba(15, 23, 42, 0.12) !important;
color: rgba(15, 23, 42, 0.55) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble-msg,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble-msg {
box-shadow:
0 4px 16px rgba(15, 23, 42, 0.08),
0 1px 0 rgba(255, 255, 255, 0.85) inset;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-0,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-0 {
background:
linear-gradient(158deg, rgba(45, 212, 191, 0.14) 0%, transparent 48%),
linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
border-color: rgba(13, 148, 136, 0.22) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-1,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-1 {
background:
linear-gradient(158deg, rgba(56, 189, 248, 0.14) 0%, transparent 48%),
linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
border-color: rgba(14, 165, 233, 0.22) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-2,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-2 {
background:
linear-gradient(158deg, rgba(74, 222, 128, 0.12) 0%, transparent 48%),
linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
border-color: rgba(22, 163, 74, 0.2) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-3,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-3 {
background:
linear-gradient(158deg, rgba(251, 191, 36, 0.12) 0%, transparent 48%),
linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
border-color: rgba(217, 119, 6, 0.2) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-4,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-4 {
background:
linear-gradient(158deg, rgba(244, 114, 182, 0.12) 0%, transparent 48%),
linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
border-color: rgba(219, 39, 119, 0.2) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-5,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-5 {
background:
linear-gradient(158deg, rgba(167, 139, 250, 0.13) 0%, transparent 48%),
linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
border-color: rgba(124, 58, 237, 0.2) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-6,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-6 {
background:
linear-gradient(158deg, rgba(125, 211, 252, 0.14) 0%, transparent 48%),
linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
border-color: rgba(2, 132, 199, 0.22) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-7,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-7 {
background:
linear-gradient(158deg, rgba(232, 121, 249, 0.12) 0%, transparent 48%),
linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
border-color: rgba(192, 38, 211, 0.2) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-8,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-8 {
background:
linear-gradient(158deg, rgba(163, 230, 53, 0.1) 0%, transparent 48%),
linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
border-color: rgba(101, 163, 13, 0.2) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-9,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--user.bagpt-group-bubble--tone-9 {
background:
linear-gradient(158deg, rgba(129, 140, 248, 0.13) 0%, transparent 48%),
linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
border-color: rgba(79, 70, 229, 0.2) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--ai,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-bubble--ai {
background:
linear-gradient(145deg, rgba(139, 92, 246, 0.12) 0%, transparent 45%),
linear-gradient(168deg, #faf5ff 0%, #f3e8ff 50%, #ede9fe 100%) !important;
border-color: rgba(139, 92, 246, 0.35) !important;
color: rgba(15, 23, 42, 0.92) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-0,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-0 {
color: rgba(15, 118, 110, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-1,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-1 {
color: rgba(3, 105, 161, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-2,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-2 {
color: rgba(22, 101, 52, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-3,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-3 {
color: rgba(146, 64, 14, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-4,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-4 {
color: rgba(157, 23, 77, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-5,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-5 {
color: rgba(91, 33, 182, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-6,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-6 {
color: rgba(3, 105, 161, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-7,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-7 {
color: rgba(126, 34, 206, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-8,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-8 {
color: rgba(63, 98, 18, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-9,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--tone-9 {
color: rgba(67, 56, 202, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--ai,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-peer-name--ai {
color: rgba(91, 33, 182, 0.92) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-msg-action,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-msg-action {
background: rgba(15, 23, 42, 0.06) !important;
color: rgba(51, 65, 85, 0.55) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-msg-action:hover,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-msg-action:hover {
background: rgba(15, 23, 42, 0.1) !important;
color: rgba(15, 23, 42, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-inline-quote,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-inline-quote {
border-color: rgba(14, 116, 144, 0.38) !important;
background: rgba(236, 254, 255, 0.92) !important;
color: rgba(15, 23, 42, 0.9) !important;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
/* فرزندان: کلاسهای Tailwind (text-cyan-…) روی تیره تنظیم شدهاند — در لایت بازنویسی میشوند */
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-inline-quote > div:first-child,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-inline-quote > div:first-child {
color: rgba(71, 85, 105, 0.96) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-inline-quote > div:last-child,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-inline-quote > div:last-child {
color: rgba(15, 23, 42, 0.9) !important;
border-color: rgba(6, 182, 212, 0.5) !important;
border-inline-start-color: rgba(8, 145, 178, 0.55) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay #bagpt-group-quote-preview .bagpt-group-quote-chip,
body.bagpt-theme-light #bagpt-group-overlay #bagpt-group-quote-preview .bagpt-group-quote-chip {
border-color: rgba(15, 23, 42, 0.1) !important;
background: rgba(255, 255, 255, 0.92) !important;
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay #bagpt-group-quote-preview .bagpt-group-quote-chip-remove,
body.bagpt-theme-light #bagpt-group-overlay #bagpt-group-quote-preview .bagpt-group-quote-chip-remove {
background: rgba(15, 23, 42, 0.06) !important;
color: rgba(51, 65, 85, 0.55) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay #bagpt-group-quote-preview .bagpt-group-quote-chip-remove:hover,
body.bagpt-theme-light #bagpt-group-overlay #bagpt-group-quote-preview .bagpt-group-quote-chip-remove:hover {
background: rgba(15, 23, 42, 0.1) !important;
color: rgba(15, 23, 42, 0.85) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay #bagpt-group-quote-preview .bagpt-group-quote-chip-title,
body.bagpt-theme-light #bagpt-group-overlay #bagpt-group-quote-preview .bagpt-group-quote-chip-title {
color: rgba(71, 85, 105, 0.95) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay #bagpt-group-quote-preview .bagpt-group-quote-chip-snippet,
body.bagpt-theme-light #bagpt-group-overlay #bagpt-group-quote-preview .bagpt-group-quote-chip-snippet {
color: rgba(15, 23, 42, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-ai-prelude__label,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-ai-prelude__label {
color: rgba(15, 23, 42, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-ai-prelude__dots > span,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-ai-prelude__dots > span {
background: rgba(91, 33, 182, 0.85) !important;
box-shadow: 0 0 8px rgba(91, 33, 182, 0.35) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar-bot__aurora,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar-bot__aurora {
opacity: 0.48;
filter: blur(6px);
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar-bot__ring,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar-bot__ring {
box-shadow:
0 0 0 1px rgba(124, 58, 237, 0.42),
0 0 0 2px rgba(255, 255, 255, 0.95),
0 0 20px rgba(139, 92, 246, 0.22);
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-0,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-0 {
box-shadow: 0 0 0 1px rgba(13, 148, 136, 0.35), 0 3px 10px rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-1,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-1 {
box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.35), 0 3px 10px rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-2,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-2 {
box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.32), 0 3px 10px rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-3,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-3 {
box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.32), 0 3px 10px rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-4,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-4 {
box-shadow: 0 0 0 1px rgba(219, 39, 119, 0.3), 0 3px 10px rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-5,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-5 {
box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.3), 0 3px 10px rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-6,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-6 {
box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.35), 0 3px 10px rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-7,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-7 {
box-shadow: 0 0 0 1px rgba(192, 38, 211, 0.3), 0 3px 10px rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-8,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-8 {
box-shadow: 0 0 0 1px rgba(101, 163, 13, 0.3), 0 3px 10px rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-9,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar--user.bagpt-group-avatar--tone-9 {
box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.3), 0 3px 10px rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar-bot__core,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar-bot__core {
background:
radial-gradient(ellipse 90% 75% at 32% 22%, rgba(255, 255, 255, 0.55) 0%, transparent 50%),
linear-gradient(155deg, #f5f3ff 0%, #ede9fe 38%, #ddd6fe 72%, #c4b5fd 100%);
border-color: rgba(124, 58, 237, 0.38);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
inset 0 -1px 0 rgba(99, 102, 241, 0.1),
0 6px 16px rgba(99, 102, 241, 0.2);
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar-bot__mark,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-avatar-bot__mark {
color: #5b21b6;
filter: drop-shadow(0 0 4px rgba(124, 58, 237, 0.35));
}
#ai-chat-app.bagpt-theme-light #bagpt-group-overlay .bagpt-group-msg .text-white\/45,
body.bagpt-theme-light #bagpt-group-overlay .bagpt-group-msg .text-white\/45 {
color: rgba(15, 23, 42, 0.52) !important;
}
/*
* مودال تنظیمات (#bagpt-settings-modal) بیرون از #ai-chat-app رندر میشود؛
* تم روشن باید با body.bagpt-theme-light هم اعمال شود (مثل مودال پروژه).
*/
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-card,
body.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-card {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.02));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 10px 24px rgba(15, 23, 42, 0.08);
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-hero,
body.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-hero {
background:
radial-gradient(120% 150% at 100% 0%, rgba(79, 70, 229, 0.16), transparent 58%),
radial-gradient(120% 160% at 0% 100%, rgba(8, 145, 178, 0.12), transparent 58%),
linear-gradient(180deg, #f8faff, #eef3ff);
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-link-input,
body.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-link-input {
background: rgba(255, 255, 255, 0.9);
color: #0f172a;
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-empty,
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-row,
body.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-empty,
body.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-row {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.02));
}
/* Affiliate: light mode — خوانایی متن و دکمهها روی پسزمینه روشن */
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel > h3,
body.bagpt-theme-light .bagpt-affiliate-panel > h3,
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel > p,
body.bagpt-theme-light .bagpt-affiliate-panel > p {
color: rgba(15, 23, 42, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-hero label span,
body.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-hero label span {
color: rgba(15, 23, 42, 0.72) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-hero .bagpt-aff-link-input,
body.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-hero .bagpt-aff-link-input {
color: #0f172a !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-hero #bagpt-affiliate-copy-status,
body.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-hero #bagpt-affiliate-copy-status {
color: rgba(15, 23, 42, 0.62) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-hero .bagpt-aff-cta,
body.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-hero .bagpt-aff-cta {
color: #312e81 !important;
background: linear-gradient(180deg, rgba(167, 139, 250, 0.45), rgba(139, 92, 246, 0.28)) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 6px 16px rgba(76, 29, 149, 0.18) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-hero .bagpt-aff-cta-muted,
body.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-hero .bagpt-aff-cta-muted {
color: rgba(15, 23, 42, 0.88) !important;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.1), rgba(15, 23, 42, 0.05)) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.75),
0 6px 14px rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel .grid.grid-cols-1 .bagpt-aff-card .text-white\/45,
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel .grid.sm\:grid-cols-3 .bagpt-aff-card .text-white\/45,
body.bagpt-theme-light .bagpt-affiliate-panel .grid.grid-cols-1 .bagpt-aff-card .text-white\/45,
body.bagpt-theme-light .bagpt-affiliate-panel .grid.sm\:grid-cols-3 .bagpt-aff-card .text-white\/45 {
color: rgba(15, 23, 42, 0.52) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel .grid .bagpt-aff-card .font-semibold.text-white,
body.bagpt-theme-light .bagpt-affiliate-panel .grid .bagpt-aff-card .font-semibold.text-white {
color: #0f172a !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel .text-emerald-200,
body.bagpt-theme-light .bagpt-affiliate-panel .text-emerald-200 {
color: #047857 !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel .text-cyan-200,
body.bagpt-theme-light .bagpt-affiliate-panel .text-cyan-200 {
color: #0e7490 !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-card .text-white\/90,
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-card .text-white\/40,
body.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-card .text-white\/90,
body.bagpt-theme-light .bagpt-affiliate-panel .bagpt-aff-card .text-white\/40 {
color: rgba(15, 23, 42, 0.78) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel #bagpt-affiliate-recent-list,
body.bagpt-theme-light .bagpt-affiliate-panel #bagpt-affiliate-recent-list {
color: rgba(15, 23, 42, 0.75) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel #bagpt-affiliate-recent-list .font-medium.text-white,
body.bagpt-theme-light .bagpt-affiliate-panel #bagpt-affiliate-recent-list .font-medium.text-white {
color: #0f172a !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel #bagpt-affiliate-recent-list .text-white\/45,
body.bagpt-theme-light .bagpt-affiliate-panel #bagpt-affiliate-recent-list .text-white\/45 {
color: rgba(15, 23, 42, 0.48) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel #bagpt-affiliate-recent-list .text-white\/70,
body.bagpt-theme-light .bagpt-affiliate-panel #bagpt-affiliate-recent-list .text-white\/70 {
color: rgba(15, 23, 42, 0.62) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel #bagpt-affiliate-recent-list .text-emerald-200,
body.bagpt-theme-light .bagpt-affiliate-panel #bagpt-affiliate-recent-list .text-emerald-200 {
color: #047857 !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel #bagpt-affiliate-recent-list .text-amber-200,
body.bagpt-theme-light .bagpt-affiliate-panel #bagpt-affiliate-recent-list .text-amber-200 {
color: #b45309 !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-affiliate-panel #bagpt-affiliate-recent-list .text-cyan-200,
body.bagpt-theme-light .bagpt-affiliate-panel #bagpt-affiliate-recent-list .text-cyan-200 {
color: #0e7490 !important;
}
/* Subtle chat motion (soft, non-jittery) */
.ai-chat-live-shell.bagpt-live-enter {
animation: bagptLiveSoftIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-chat-live-shell {
display: block;
width: fit-content;
max-width: min(100%, 420px);
border: 0;
border-radius: 0;
background: transparent;
padding: 0;
}
.ai-chat-live-shell .ai-chat-live-row {
display: flex;
align-items: center;
gap: 0.42rem;
width: auto;
min-height: 26px;
line-height: 1.35 !important;
margin: 0 0 0.18rem;
transition:
opacity 0.18s ease,
transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-chat-live-shell .ai-chat-live-icon {
display: inline-flex;
width: 16px;
height: 16px;
opacity: 0.95;
}
.ai-chat-live-shell .ai-chat-live-status {
font-size: 13.5px;
font-weight: 500;
color: rgba(226, 232, 240, 0.94);
letter-spacing: 0;
line-height: 1.45 !important;
white-space: nowrap;
transition: opacity 0.22s ease;
}
.ai-chat-live-shell .ai-chat-live-dots {
display: inline-flex;
gap: 3px;
}
.ai-chat-live-shell .ai-chat-live-dots > span {
width: 4px;
height: 4px;
border-radius: 999px;
background: rgba(125, 211, 252, 0.86);
animation: bagptLiveDotPulse 1.05s ease-in-out infinite;
}
.ai-chat-live-shell .ai-chat-live-dots > span:nth-child(2) {
animation-delay: 0.16s;
}
.ai-chat-live-shell .ai-chat-live-dots > span:nth-child(3) {
animation-delay: 0.32s;
}
/* ---- UI مینیمال به سبک ChatGPT ---- */
/* در حالتهای think/spark (فکر کردن عمومی): آیکون رنگی مخفی — فقط متنِ شیمر. */
.ai-chat-live-shell[data-phase="think"] .ai-chat-live-icon,
.ai-chat-live-shell[data-phase="spark"] .ai-chat-live-icon {
display: none;
}
/* سهنقطهٔ pulse-animation در همهٔ فازها حذف شد. با live-progress markerها متن
واقعی سرور («در حال جستجو در وب / در حال ساخت تصویر / …») با شیمر نمایش
داده میشود؛ سهنقطهٔ ساختگیِ کنار متن حسِ «معطلی/تکرار» میداد و در
اتصالهای کند مزاحم بود. */
.ai-chat-live-shell .ai-chat-live-dots {
display: none !important;
}
/* Shimmer gradient روی متن در همهٔ حالتها (think/spark/search/image/attach). */
.ai-chat-live-shell .ai-chat-live-status {
background: linear-gradient(
110deg,
rgba(148, 163, 184, 0.55) 0%,
rgba(241, 245, 249, 1) 42%,
rgba(241, 245, 249, 1) 58%,
rgba(148, 163, 184, 0.55) 100%
);
background-size: 220% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: bagptShimmerText 2.2s ease-in-out infinite;
}
/* transition ظریف هنگام عوض شدن متن (با کلاس is-updating که از قبل اضافه میشود). */
.ai-chat-live-shell.is-updating .ai-chat-live-status {
animation:
bagptShimmerText 2.2s ease-in-out infinite,
bagptLiveTextFade 0.35s ease-out;
}
@keyframes bagptShimmerText {
0% {
background-position: 220% center;
}
100% {
background-position: -120% center;
}
}
@keyframes bagptLiveTextFade {
from {
opacity: 0.35;
transform: translateY(1.5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ai-chat-live-shell.is-updating .ai-chat-live-row {
transform: translateY(-1px);
}
/* ===== ChatGPT-style Image Generation Preview (baGPT 1.2.125+) =====
* در حالت «پیشنمایش تصویر»، shell باید عرضِ ثابتِ متناسب با نسبت ابعاد بگیرد تا
* قاب سینمایی مرتب و بدون تغییرسایز ظاهر شود. وقتی is-image-stage فعال باشد،
* shell از fit-content خارج میشود و یک عرض ثابت (براساس data-image-ratio) میگیرد.
*/
.ai-chat-live-shell.is-image-stage {
/* پیشفرض: مربع ۵۱۲ پیکسلی ولی در نسبتهای دیگر override میشود. */
width: min(100%, 512px);
max-width: min(100%, 512px);
}
.ai-chat-live-shell.is-image-stage[data-image-ratio="16:9"],
.ai-chat-live-shell.is-image-stage[data-image-ratio="16:10"] {
width: min(100%, 560px);
max-width: min(100%, 560px);
}
.ai-chat-live-shell.is-image-stage[data-image-ratio="9:16"] {
width: min(100%, 320px);
max-width: min(100%, 320px);
}
.ai-chat-live-shell.is-image-stage[data-image-ratio="4:3"] {
width: min(100%, 520px);
max-width: min(100%, 520px);
}
.ai-chat-live-shell.is-image-stage[data-image-ratio="3:4"] {
width: min(100%, 400px);
max-width: min(100%, 400px);
}
.ai-chat-live-shell .ai-chat-live-image-stage {
display: none;
position: relative;
clear: both;
/* width:100% در داخل shell که خودش عرض ثابت دارد، باعث میشود قاب از لحظهٔ اول
هماندازهٔ نهایی ظاهر شود و هیچ resize اتفاق نیفتد. */
width: 100%;
margin-top: 0.7rem;
aspect-ratio: 1 / 1;
border-radius: 1.15rem;
overflow: hidden;
isolation: isolate;
border: 1px solid rgba(148, 163, 184, 0.22);
background:
radial-gradient(120% 90% at 18% 8%, rgba(56, 189, 248, 0.22), transparent 60%),
radial-gradient(100% 100% at 82% 96%, rgba(168, 85, 247, 0.22), transparent 60%),
radial-gradient(90% 70% at 50% 50%, rgba(14, 165, 233, 0.14), transparent 70%),
linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.98));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 18px 36px -18px rgba(2, 6, 23, 0.6),
0 0 0 1px rgba(56, 189, 248, 0.06);
/* فقط opacity fade — نه scale/translate — تا عرض/ارتفاع قاب از لحظهٔ اول ثابت باشد. */
animation: bagptImageStageFadeIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.ai-chat-live-shell.is-image-stage .ai-chat-live-image-stage {
display: block;
}
.ai-chat-live-shell[data-image-ratio="16:9"] .ai-chat-live-image-stage,
.ai-chat-live-shell[data-image-ratio="16:10"] .ai-chat-live-image-stage {
aspect-ratio: 16 / 9;
}
.ai-chat-live-shell[data-image-ratio="9:16"] .ai-chat-live-image-stage {
aspect-ratio: 9 / 16;
}
.ai-chat-live-shell[data-image-ratio="4:3"] .ai-chat-live-image-stage {
aspect-ratio: 4 / 3;
}
.ai-chat-live-shell[data-image-ratio="3:4"] .ai-chat-live-image-stage {
aspect-ratio: 3 / 4;
}
@keyframes bagptImageStageFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* لایهٔ Aurora (گرادیان متحرک mesh) */
.ai-chat-live-shell .bagpt-live-image-aurora {
position: absolute;
inset: -18%;
background:
radial-gradient(32% 28% at 20% 30%, rgba(56, 189, 248, 0.55), transparent 70%),
radial-gradient(28% 24% at 78% 22%, rgba(168, 85, 247, 0.5), transparent 70%),
radial-gradient(30% 30% at 72% 78%, rgba(236, 72, 153, 0.42), transparent 72%),
radial-gradient(26% 22% at 28% 80%, rgba(52, 211, 153, 0.35), transparent 72%);
filter: blur(28px) saturate(1.15);
opacity: 0.85;
animation: bagptImageAuroraDrift 12s ease-in-out infinite alternate;
z-index: 1;
}
/* شبکهٔ ریز برای حس pixels / rendering */
.ai-chat-live-shell .bagpt-live-image-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 22px 22px, 22px 22px;
mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.9), transparent 85%);
-webkit-mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.9), transparent 85%);
opacity: 0.55;
animation: bagptImageGridShift 9s linear infinite;
z-index: 2;
}
/* نویز ظریف برای بافت واقعیتر */
.ai-chat-live-shell .bagpt-live-image-noise {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.14;
mix-blend-mode: soft-light;
background-image: url("data:image/svg+xml;utf8,");
animation: bagptImageNoiseShift 4s steps(8) infinite;
z-index: 3;
}
/* خط اسکن عمودی که مثل ChatGPT از بالا به پایین حرکت میکند */
.ai-chat-live-shell .bagpt-live-image-scan {
position: absolute;
inset-inline: 0;
top: -12%;
height: 28%;
background: linear-gradient(
180deg,
rgba(125, 211, 252, 0) 0%,
rgba(186, 230, 253, 0.45) 45%,
rgba(255, 255, 255, 0.85) 50%,
rgba(186, 230, 253, 0.45) 55%,
rgba(125, 211, 252, 0) 100%
);
mix-blend-mode: screen;
filter: blur(6px);
animation: bagptImageScanSweep 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
z-index: 4;
pointer-events: none;
}
/* هالهٔ رنگی پشت آیکون مرکزی */
.ai-chat-live-shell .bagpt-live-image-glow {
position: absolute;
inset: 0;
display: grid;
place-items: center;
z-index: 5;
pointer-events: none;
}
.ai-chat-live-shell .bagpt-live-image-glow::before {
content: "";
width: 62%;
max-width: 280px;
aspect-ratio: 1 / 1;
background: radial-gradient(
closest-side,
rgba(34, 211, 238, 0.55),
rgba(168, 85, 247, 0.28) 45%,
transparent 70%
);
filter: blur(20px);
opacity: 0.85;
animation: bagptImageGlowPulse 3.2s ease-in-out infinite alternate;
}
/* هستهٔ مرکزی: آیکون + halo */
.ai-chat-live-shell .bagpt-live-image-core {
position: absolute;
inset: 0;
display: grid;
place-items: center;
z-index: 6;
}
.ai-chat-live-shell .bagpt-live-image-halo {
position: absolute;
width: 120px;
height: 120px;
border-radius: 999px;
border: 1px solid rgba(226, 232, 240, 0.2);
box-shadow:
0 0 0 8px rgba(56, 189, 248, 0.08),
0 0 48px rgba(56, 189, 248, 0.35),
inset 0 0 20px rgba(168, 85, 247, 0.22);
background:
radial-gradient(closest-side, rgba(2, 6, 23, 0.6), rgba(15, 23, 42, 0.92));
animation: bagptImageHaloPulse 2.2s ease-in-out infinite;
}
.ai-chat-live-shell .bagpt-live-image-iconwrap {
position: relative;
display: inline-flex;
width: 56px;
height: 56px;
color: #e0f2fe;
filter: drop-shadow(0 2px 6px rgba(14, 165, 233, 0.55));
animation: bagptImageIconFloat 4.5s ease-in-out infinite;
}
.ai-chat-live-shell .bagpt-live-image-iconwrap svg {
width: 100%;
height: 100%;
}
/* پیل فاز پایین — رشد و چرخش متن شبیه ChatGPT */
.ai-chat-live-shell .bagpt-live-image-phase {
position: absolute;
inset-inline: 0.9rem;
bottom: 0.85rem;
margin: 0 auto;
width: fit-content;
max-width: calc(100% - 1.8rem);
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.9rem;
border-radius: 999px;
border: 1px solid rgba(226, 232, 240, 0.14);
background: rgba(2, 6, 23, 0.55);
backdrop-filter: blur(10px) saturate(1.1);
-webkit-backdrop-filter: blur(10px) saturate(1.1);
color: rgba(226, 232, 240, 0.96);
font-size: 12.5px;
line-height: 1.35;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 12px 28px -14px rgba(0, 0, 0, 0.55);
z-index: 7;
}
.ai-chat-live-shell .bagpt-live-image-phase-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: rgba(34, 211, 238, 1);
box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.22);
animation: bagptImagePhaseDotPulse 1.2s ease-in-out infinite;
flex: 0 0 auto;
}
.ai-chat-live-shell .bagpt-live-image-phase-text {
max-width: 320px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: linear-gradient(
110deg,
rgba(148, 163, 184, 0.68) 0%,
rgba(241, 245, 249, 1) 44%,
rgba(241, 245, 249, 1) 56%,
rgba(148, 163, 184, 0.68) 100%
);
background-size: 220% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
animation: bagptShimmerText 2.4s ease-in-out infinite;
}
.ai-chat-live-shell .bagpt-live-image-phase-text.is-fade {
animation:
bagptShimmerText 2.4s ease-in-out infinite,
bagptImagePhaseTextIn 0.42s ease-out;
}
/* در حالت تصویر، ردیف وضعیت بالا را نگه میداریم تا کاربر از همان لحظهٔ اول
متن «در حال ساخت تصویر…» را ببیند (قبل از fade-in قاب بزرگ) — دقیقاً مثل حالت
معمولی «در حال تدوین پاسخ». قاب سینمایی پشتبندش ظاهر میشود. */
.ai-chat-live-shell.is-image-stage[data-phase="image"] .ai-chat-live-row {
display: inline-flex;
margin-bottom: 0.5rem;
}
/* سهنقطه و آیکون را در حالت image مخفی میکنیم تا فقط متن shimmer شود (مینیمالتر). */
.ai-chat-live-shell.is-image-stage[data-phase="image"] .ai-chat-live-icon,
.ai-chat-live-shell.is-image-stage[data-phase="image"] .ai-chat-live-dots {
display: none;
}
@keyframes bagptImageStageIn {
from {
opacity: 0;
transform: translateY(8px) scale(0.985);
filter: blur(6px);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes bagptImageAuroraDrift {
0% { transform: translate3d(-3%, -2%, 0) scale(1.02); }
50% { transform: translate3d(3%, 4%, 0) scale(1.06); }
100% { transform: translate3d(-2%, 3%, 0) scale(1.04); }
}
@keyframes bagptImageGridShift {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-22px, -22px, 0); }
}
@keyframes bagptImageNoiseShift {
0% { transform: translate3d(0, 0, 0); }
25% { transform: translate3d(-2px, 1px, 0); }
50% { transform: translate3d(1px, -1px, 0); }
75% { transform: translate3d(-1px, 2px, 0); }
100% { transform: translate3d(0, 0, 0); }
}
@keyframes bagptImageScanSweep {
0% { top: -30%; opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { top: 110%; opacity: 0; }
}
@keyframes bagptImageGlowPulse {
from { transform: scale(0.92); opacity: 0.7; }
to { transform: scale(1.06); opacity: 1; }
}
@keyframes bagptImageHaloPulse {
0%, 100% {
transform: scale(1);
box-shadow:
0 0 0 8px rgba(56, 189, 248, 0.08),
0 0 48px rgba(56, 189, 248, 0.35),
inset 0 0 20px rgba(168, 85, 247, 0.22);
}
50% {
transform: scale(1.045);
box-shadow:
0 0 0 14px rgba(56, 189, 248, 0.06),
0 0 72px rgba(56, 189, 248, 0.55),
inset 0 0 28px rgba(168, 85, 247, 0.32);
}
}
@keyframes bagptImageIconFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
@keyframes bagptImagePhaseDotPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.65; }
}
@keyframes bagptImagePhaseTextIn {
from {
opacity: 0;
transform: translateY(3px);
filter: blur(2px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
.ai-chat-msg-content.ai-chat-msg-content--live {
transition: opacity 0.16s ease;
}
.ai-chat-msg-floor-pad[data-bagpt-post-reserve] {
transition: height 0.2s cubic-bezier(0.22, 1, 0.36, 1);
will-change: height;
}
@keyframes bagptLiveSoftIn {
from {
opacity: 0;
transform: translateY(4px) scale(0.995);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes bagptSpin {
to {
transform: rotate(360deg);
}
}
@keyframes bagptLiveDotPulse {
0%,
100% {
opacity: 0.35;
transform: translateY(0);
}
50% {
opacity: 1;
transform: translateY(-1px);
}
}
@keyframes bagptPixelsPulse {
from {
opacity: 0.46;
filter: saturate(0.92);
}
to {
opacity: 0.88;
filter: saturate(1.12);
}
}
@media (prefers-reduced-motion: reduce) {
.ai-chat-live-shell.bagpt-live-enter {
animation: none !important;
}
.ai-chat-live-shell .ai-chat-live-row,
.ai-chat-msg-content.ai-chat-msg-content--live,
.ai-chat-msg-floor-pad[data-bagpt-post-reserve],
.ai-chat-live-shell .ai-chat-live-image-stage,
.ai-chat-live-shell .bagpt-live-image-aurora,
.ai-chat-live-shell .bagpt-live-image-grid,
.ai-chat-live-shell .bagpt-live-image-noise,
.ai-chat-live-shell .bagpt-live-image-scan,
.ai-chat-live-shell .bagpt-live-image-glow::before,
.ai-chat-live-shell .bagpt-live-image-halo,
.ai-chat-live-shell .bagpt-live-image-iconwrap,
.ai-chat-live-shell .bagpt-live-image-phase-dot,
.ai-chat-live-shell .bagpt-live-image-phase-text {
transition: none !important;
animation: none !important;
}
}
/* Premium chat font-size control card */
#bagpt-settings-panel-appearance .bagpt-fontsize-card {
background:
radial-gradient(
120% 140% at 100% 0%,
rgba(34, 211, 238, 0.07),
transparent 58%
),
rgba(255, 255, 255, 0.02);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 8px 26px rgba(0, 0, 0, 0.22);
}
#bagpt-settings-panel-appearance .bagpt-fontsize-pill {
min-width: 52px;
text-align: center;
letter-spacing: 0.2px;
}
#bagpt-settings-panel-appearance .bagpt-fontsize-range {
-webkit-appearance: none;
appearance: none;
height: 8px;
border-radius: 999px;
background: linear-gradient(
90deg,
rgba(34, 211, 238, 0.5),
rgba(16, 185, 129, 0.5)
);
outline: none;
}
#bagpt-settings-panel-appearance
.bagpt-fontsize-range::-webkit-slider-runnable-track {
height: 8px;
border-radius: 999px;
background: linear-gradient(
90deg,
rgba(34, 211, 238, 0.45),
rgba(99, 102, 241, 0.45)
);
}
#bagpt-settings-panel-appearance .bagpt-fontsize-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
margin-top: -5px;
border-radius: 999px;
border: 2px solid rgba(255, 255, 255, 0.85);
background: radial-gradient(circle at 35% 35%, #ffffff, #a5f3fc 60%, #22d3ee);
box-shadow:
0 0 0 5px rgba(34, 211, 238, 0.17),
0 6px 16px rgba(34, 211, 238, 0.35);
}
#bagpt-settings-panel-appearance .bagpt-fontsize-range::-moz-range-track {
height: 8px;
border: 0;
border-radius: 999px;
background: linear-gradient(
90deg,
rgba(34, 211, 238, 0.45),
rgba(99, 102, 241, 0.45)
);
}
#bagpt-settings-panel-appearance .bagpt-fontsize-range::-moz-range-thumb {
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.85);
border-radius: 999px;
background: radial-gradient(circle at 35% 35%, #ffffff, #a5f3fc 60%, #22d3ee);
box-shadow:
0 0 0 5px rgba(34, 211, 238, 0.17),
0 6px 16px rgba(34, 211, 238, 0.35);
}
#bagpt-settings-panel-appearance .bagpt-fontsize-preview {
background:
linear-gradient(180deg, rgba(2, 6, 23, 0.68), rgba(2, 6, 23, 0.52)),
radial-gradient(
140% 110% at 0% 0%,
rgba(56, 189, 248, 0.08),
transparent 45%
);
}
/* Light mode polish fixes */
body.bagpt-theme-light #bagpt-settings-modal .bagpt-fontsize-card {
background:
radial-gradient(
120% 140% at 100% 0%,
rgba(14, 116, 144, 0.08),
transparent 58%
),
rgba(15, 23, 42, 0.03);
border-color: rgba(15, 23, 42, 0.12) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.72),
0 8px 24px rgba(15, 23, 42, 0.08);
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-fontsize-preview {
border-color: rgba(15, 23, 42, 0.14) !important;
background:
linear-gradient(
180deg,
rgba(248, 250, 252, 0.95),
rgba(241, 245, 249, 0.95)
),
radial-gradient(
130% 100% at 0% 0%,
rgba(14, 165, 233, 0.08),
transparent 46%
);
}
body.bagpt-theme-light
#bagpt-settings-modal
.bagpt-fontsize-preview
p:first-child {
color: rgba(15, 23, 42, 0.52) !important;
}
body.bagpt-theme-light #bagpt-settings-modal #bagpt-set-chat-font-size-sample {
color: rgba(15, 23, 42, 0.9) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-fontsize-pill {
border-color: rgba(14, 116, 144, 0.26) !important;
background: rgba(14, 165, 233, 0.1) !important;
color: rgba(8, 47, 73, 0.95) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-switch-ui {
background: rgba(15, 23, 42, 0.14) !important;
border-color: rgba(15, 23, 42, 0.22) !important;
}
body.bagpt-theme-light
#bagpt-settings-modal
.bagpt-settings-switch:checked
+ .bagpt-switch-ui {
background: rgba(14, 165, 233, 0.22) !important;
border-color: rgba(2, 132, 199, 0.48) !important;
}
#ai-chat-app.bagpt-theme-light .ai-chat-conv-menu {
box-shadow:
0 14px 32px rgba(15, 23, 42, 0.13),
0 2px 8px rgba(15, 23, 42, 0.08);
}
#ai-chat-app.bagpt-theme-light .ai-chat-conv-menu .ai-chat-conv-menu-pin,
#ai-chat-app.bagpt-theme-light .ai-chat-conv-menu .ai-chat-conv-menu-rename {
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light .ai-chat-conv-menu .ai-chat-conv-menu-delete {
color: #be123c !important;
}
#ai-chat-app.bagpt-theme-light .ai-chat-conv-menu .ai-chat-conv-menu-pin:hover,
#ai-chat-app.bagpt-theme-light
.ai-chat-conv-menu
.ai-chat-conv-menu-rename:hover {
background: rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light
.ai-chat-conv-menu
.ai-chat-conv-menu-delete:hover {
background: rgba(190, 24, 93, 0.12) !important;
}
body.bagpt-theme-light .ai-chat-conv-menu .ai-chat-conv-menu-pin,
body.bagpt-theme-light .ai-chat-conv-menu .ai-chat-conv-menu-rename {
color: rgba(15, 23, 42, 0.9) !important;
}
body.bagpt-theme-light .ai-chat-conv-menu .ai-chat-conv-menu-delete {
color: #be123c !important;
}
body.bagpt-theme-light .ai-chat-conv-menu .ai-chat-conv-menu-pin:hover,
body.bagpt-theme-light .ai-chat-conv-menu .ai-chat-conv-menu-rename:hover {
background: rgba(15, 23, 42, 0.08) !important;
}
body.bagpt-theme-light .ai-chat-conv-menu .ai-chat-conv-menu-delete:hover {
background: rgba(190, 24, 93, 0.12) !important;
}
#ai-chat-app.bagpt-theme-light .ai-chat-md-stream-tail--pipe-draft {
background: rgba(255, 255, 255, 0.98);
}
#ai-chat-app.bagpt-theme-light
.ai-chat-md-stream-tail--pipe-draft
.ai-chat-md-stream-tail__toolbar {
border-bottom-color: rgba(15, 23, 42, 0.12);
background: rgba(241, 245, 249, 0.95);
}
#ai-chat-app.bagpt-theme-light
.ai-chat-md-stream-tail--pipe-draft
.ai-chat-md-stream-tail__pre {
color: rgba(15, 23, 42, 0.88);
}
body.bagpt-theme-light .bagpt-table-wrap,
#ai-chat-app.bagpt-theme-light .bagpt-table-wrap {
border: 0;
border-radius: 0.78rem;
background: rgba(255, 255, 255, 0.99) !important;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.1) !important;
}
body.bagpt-theme-light .bagpt-table-wrap .bagpt-table-toolbar,
#ai-chat-app.bagpt-theme-light .bagpt-table-wrap .bagpt-table-toolbar {
border-bottom: 1px solid rgba(15, 23, 42, 0.12) !important;
background: rgba(241, 245, 249, 0.98) !important;
}
body.bagpt-theme-light .bagpt-table-wrap .bagpt-table-download-btn,
#ai-chat-app.bagpt-theme-light .bagpt-table-wrap .bagpt-table-download-btn {
color: rgba(15, 23, 42, 0.88) !important;
border-color: rgba(15, 23, 42, 0.2) !important;
background: rgba(255, 255, 255, 0.95) !important;
}
body.bagpt-theme-light .bagpt-table-wrap .bagpt-table-download-btn svg,
#ai-chat-app.bagpt-theme-light .bagpt-table-wrap .bagpt-table-download-btn svg {
stroke: currentColor;
opacity: 0.9;
}
body.bagpt-theme-light .bagpt-table-wrap .bagpt-table-download-btn:hover,
#ai-chat-app.bagpt-theme-light
.bagpt-table-wrap
.bagpt-table-download-btn:hover {
background: rgba(14, 165, 233, 0.12) !important;
border-color: rgba(14, 165, 233, 0.32) !important;
color: rgba(8, 47, 73, 0.95) !important;
}
/* هدر و سلولها: غلبه بر گرادیان/زبرای تیرهٔ استایل پایه */
body.bagpt-theme-light .bagpt-table-wrap .ai-chat-md-table thead th,
#ai-chat-app.bagpt-theme-light .bagpt-table-wrap .ai-chat-md-table thead th {
background: linear-gradient(
180deg,
rgba(241, 245, 249, 1),
rgba(226, 232, 240, 0.97)
) !important;
color: rgba(15, 23, 42, 0.94) !important;
border-bottom: 1px solid rgba(15, 23, 42, 0.14) !important;
font-weight: 600;
}
body.bagpt-theme-light .bagpt-table-wrap .ai-chat-md-table tbody th,
#ai-chat-app.bagpt-theme-light .bagpt-table-wrap .ai-chat-md-table tbody th {
background: rgba(241, 245, 249, 0.96) !important;
color: rgba(15, 23, 42, 0.92) !important;
border-bottom: 1px solid rgba(15, 23, 42, 0.12) !important;
}
body.bagpt-theme-light .bagpt-table-wrap .ai-chat-md-table tbody td,
#ai-chat-app.bagpt-theme-light .bagpt-table-wrap .ai-chat-md-table tbody td {
background: rgba(255, 255, 255, 0.99) !important;
color: rgba(15, 23, 42, 0.92) !important;
border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
}
body.bagpt-theme-light
.bagpt-table-wrap
.ai-chat-md-table
tbody
tr:nth-child(2n)
td,
#ai-chat-app.bagpt-theme-light
.bagpt-table-wrap
.ai-chat-md-table
tbody
tr:nth-child(2n)
td {
background: rgba(248, 250, 252, 0.98) !important;
}
body.bagpt-theme-light
.bagpt-table-wrap
.ai-chat-md-table
tbody
tr:last-child
td,
#ai-chat-app.bagpt-theme-light
.bagpt-table-wrap
.ai-chat-md-table
tbody
tr:last-child
td {
border-bottom: 0 !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-conversations .ai-chat-conv-title {
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-conversations .ai-chat-conv-preview,
body.bagpt-theme-light #ai-chat-conversations .ai-chat-conv-preview {
color: rgba(71, 85, 105, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-conversations .ai-chat-conv-project,
body.bagpt-theme-light #ai-chat-conversations .ai-chat-conv-project {
color: rgba(14, 116, 144, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light
#ai-chat-conversations
.ai-chat-conv-item:hover
.ai-chat-conv-title,
#ai-chat-app.bagpt-theme-light
#ai-chat-conversations
.ai-chat-conv-item:focus-within
.ai-chat-conv-title,
#ai-chat-app.bagpt-theme-light
#ai-chat-conversations
.ai-chat-conv-item.active
.ai-chat-conv-title {
color: rgba(2, 6, 23, 0.96) !important;
}
#ai-chat-app.bagpt-theme-light
#ai-chat-conversations
.ai-chat-conv-menu-toggle {
border: 1px solid rgba(15, 23, 42, 0.12);
}
#ai-chat-app.bagpt-theme-light
#ai-chat-conversations
.ai-chat-conv-menu-toggle:hover {
background: rgba(15, 23, 42, 0.12) !important;
color: rgba(15, 23, 42, 0.96) !important;
}
/* سایدبار: دکمههای صدا / مدلها — کنتراست در تم روشن */
#ai-chat-app.bagpt-theme-light #bagpt-sidebar-voice-btn,
body.bagpt-theme-light #bagpt-sidebar-voice-btn {
border-color: rgba(16, 185, 129, 0.22) !important;
background: rgba(255, 255, 255, 0.92) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-sidebar-voice-btn:hover,
body.bagpt-theme-light #bagpt-sidebar-voice-btn:hover {
border-color: rgba(16, 185, 129, 0.38) !important;
background: rgba(16, 185, 129, 0.07) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-sidebar-voice-btn > span:first-child,
body.bagpt-theme-light #bagpt-sidebar-voice-btn > span:first-child {
background-color: rgba(16, 185, 129, 0.5) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-sidebar-voice-btn:hover > span:first-child,
body.bagpt-theme-light #bagpt-sidebar-voice-btn:hover > span:first-child {
background-color: rgba(5, 150, 105, 0.65) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-sidebar-voice-btn .flex.h-9.w-9,
body.bagpt-theme-light #bagpt-sidebar-voice-btn .flex.h-9.w-9 {
background: rgba(16, 185, 129, 0.16) !important;
color: rgba(6, 78, 59, 0.95) !important;
box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.28) !important;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
}
#ai-chat-app.bagpt-theme-light #bagpt-sidebar-models-btn,
body.bagpt-theme-light #bagpt-sidebar-models-btn {
border-color: rgba(91, 33, 182, 0.22) !important;
background: rgba(255, 255, 255, 0.92) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-sidebar-models-btn:hover,
body.bagpt-theme-light #bagpt-sidebar-models-btn:hover {
border-color: rgba(91, 33, 182, 0.38) !important;
background: rgba(139, 92, 246, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-sidebar-models-btn > span:first-child,
body.bagpt-theme-light #bagpt-sidebar-models-btn > span:first-child {
background-color: rgba(124, 58, 237, 0.45) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-sidebar-models-btn:hover > span:first-child,
body.bagpt-theme-light #bagpt-sidebar-models-btn:hover > span:first-child {
background-color: rgba(109, 40, 217, 0.58) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-sidebar-models-btn .flex.h-9.w-9,
body.bagpt-theme-light #bagpt-sidebar-models-btn .flex.h-9.w-9 {
background: rgba(139, 92, 246, 0.14) !important;
color: rgba(76, 29, 149, 0.94) !important;
box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.28) !important;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
}
#ai-chat-app.bagpt-theme-light #bagpt-sidebar-ai-gallery-btn,
body.bagpt-theme-light #bagpt-sidebar-ai-gallery-btn {
border-color: rgba(245, 158, 11, 0.28) !important;
background: rgba(255, 255, 255, 0.92) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-sidebar-ai-gallery-btn:hover,
body.bagpt-theme-light #bagpt-sidebar-ai-gallery-btn:hover {
border-color: rgba(217, 119, 6, 0.42) !important;
background: rgba(251, 191, 36, 0.1) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-sidebar-ai-gallery-btn > span:first-child,
body.bagpt-theme-light #bagpt-sidebar-ai-gallery-btn > span:first-child {
background-color: rgba(245, 158, 11, 0.55) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-sidebar-ai-gallery-btn:hover > span:first-child,
body.bagpt-theme-light #bagpt-sidebar-ai-gallery-btn:hover > span:first-child {
background-color: rgba(217, 119, 6, 0.72) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-sidebar-ai-gallery-btn .flex.h-9.w-9,
body.bagpt-theme-light #bagpt-sidebar-ai-gallery-btn .flex.h-9.w-9 {
background: rgba(251, 191, 36, 0.2) !important;
color: rgba(120, 53, 15, 0.95) !important;
box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.32) !important;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
}
/* سایدبار گروه: بج شبیه HeroUI (Anchor + محتوای عددی روی گوشهٔ ردیف عنوان) */
#bagpt-group-sidebar-list .bagpt-group-sidebar-badge-anchor {
min-height: 1.25rem;
}
/* سایدبار: فهرست گروهها (مثل آیتم تاریخچه) */
#bagpt-group-sidebar-list .bagpt-group-sidebar-item.is-active {
background: rgba(255, 255, 255, 0.07);
}
#bagpt-group-sidebar-list .bagpt-group-sidebar-item.is-active .bagpt-group-sidebar-title-text {
color: rgba(255, 255, 255, 0.94);
}
#bagpt-group-sidebar-list .bagpt-group-sidebar-msg-badge {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
#bagpt-group-sidebar-list .bagpt-group-sidebar-item.is-active .bagpt-group-sidebar-msg-badge {
background: rgba(139, 92, 246, 0.28) !important;
color: rgba(255, 255, 255, 0.98) !important;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
inset 0 0 0 1px rgba(167, 139, 250, 0.45);
}
#ai-chat-app.bagpt-theme-light #bagpt-group-sidebar-list .bagpt-group-sidebar-item:hover,
body.bagpt-theme-light #bagpt-group-sidebar-list .bagpt-group-sidebar-item:hover {
background: rgba(15, 23, 42, 0.05) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-sidebar-list .bagpt-group-sidebar-item.is-active,
body.bagpt-theme-light #bagpt-group-sidebar-list .bagpt-group-sidebar-item.is-active {
background: rgba(6, 182, 212, 0.1) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-sidebar-list .bagpt-group-sidebar-item.is-active .bagpt-group-sidebar-title-text,
body.bagpt-theme-light #bagpt-group-sidebar-list .bagpt-group-sidebar-item.is-active .bagpt-group-sidebar-title-text {
color: rgba(15, 23, 42, 0.94) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-sidebar-list .bagpt-group-sidebar-open > span:last-child,
body.bagpt-theme-light #bagpt-group-sidebar-list .bagpt-group-sidebar-open > span:last-child {
color: rgba(15, 23, 42, 0.48) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-sidebar-list .bagpt-group-sidebar-title-text,
body.bagpt-theme-light #bagpt-group-sidebar-list .bagpt-group-sidebar-title-text {
color: rgba(15, 23, 42, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-sidebar-list .bagpt-group-sidebar-msg-badge,
body.bagpt-theme-light #bagpt-group-sidebar-list .bagpt-group-sidebar-msg-badge {
background: rgba(139, 92, 246, 0.12) !important;
color: rgba(76, 29, 149, 0.92) !important;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.06),
inset 0 0 0 1px rgba(139, 92, 246, 0.22) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-group-sidebar-list .bagpt-group-sidebar-item.is-active .bagpt-group-sidebar-msg-badge,
body.bagpt-theme-light #bagpt-group-sidebar-list .bagpt-group-sidebar-item.is-active .bagpt-group-sidebar-msg-badge {
background: rgba(139, 92, 246, 0.22) !important;
color: rgba(76, 29, 149, 0.98) !important;
}
/* نوار بالا: لینک ادمین */
#ai-chat-app.bagpt-theme-light .bagpt-topbar a[href*="bagpt_admin_jump"],
body.bagpt-theme-light .bagpt-topbar a[href*="bagpt_admin_jump"] {
border-color: rgba(16, 185, 129, 0.42) !important;
background: rgba(16, 185, 129, 0.1) !important;
color: rgba(6, 78, 59, 0.96) !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-topbar a[href*="bagpt_admin_jump"]:hover,
body.bagpt-theme-light .bagpt-topbar a[href*="bagpt_admin_jump"]:hover {
border-color: rgba(5, 150, 105, 0.55) !important;
background: rgba(16, 185, 129, 0.18) !important;
color: rgba(6, 55, 42, 0.98) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-new {
border-color: rgba(15, 23, 42, 0.14) !important;
background: rgba(15, 23, 42, 0.06) !important;
color: rgba(15, 23, 42, 0.9) !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
#ai-chat-app.bagpt-theme-light #ai-chat-new:hover {
border-color: rgba(2, 132, 199, 0.28) !important;
background: rgba(14, 165, 233, 0.12) !important;
color: rgba(8, 47, 73, 0.98) !important;
}
/* سایدبار: آکاردئون «پروژهها» + کارت فعال + لیست (JS) — تم روشن */
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar details.group,
body.bagpt-theme-light #ai-chat-sidebar details.group {
border-color: rgba(15, 23, 42, 0.1) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar details.group summary,
body.bagpt-theme-light #ai-chat-sidebar details.group summary {
color: rgba(51, 65, 85, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar details.group summary:hover,
body.bagpt-theme-light #ai-chat-sidebar details.group summary:hover {
background: rgba(15, 23, 42, 0.05) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar details.group summary svg,
body.bagpt-theme-light #ai-chat-sidebar details.group summary svg {
color: rgba(100, 116, 139, 0.75) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar .bagpt-project-active-wrap,
body.bagpt-theme-light #ai-chat-sidebar .bagpt-project-active-wrap {
background: linear-gradient(
to bottom right,
rgba(14, 165, 233, 0.14),
rgba(255, 255, 255, 0.98)
) !important;
border: 1px solid rgba(14, 165, 233, 0.28) !important;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar .bagpt-project-active-wrap .text-cyan-100\/45,
body.bagpt-theme-light #ai-chat-sidebar .bagpt-project-active-wrap .text-cyan-100\/45 {
color: rgba(14, 116, 144, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar .bagpt-project-active-wrap .text-cyan-100\/90,
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar #bagpt-project-active-name,
body.bagpt-theme-light #ai-chat-sidebar .bagpt-project-active-wrap .text-cyan-100\/90,
body.bagpt-theme-light #ai-chat-sidebar #bagpt-project-active-name {
color: rgba(8, 91, 130, 0.96) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar .bagpt-project-active-wrap p.text-white\/85,
body.bagpt-theme-light #ai-chat-sidebar .bagpt-project-active-wrap p.text-white\/85 {
color: rgba(30, 41, 59, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar #bagpt-project-create-btn,
body.bagpt-theme-light #ai-chat-sidebar #bagpt-project-create-btn {
background: rgba(14, 165, 233, 0.16) !important;
color: rgba(8, 61, 90, 0.96) !important;
border: 1px solid rgba(14, 165, 233, 0.32) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar #bagpt-project-create-btn:hover,
body.bagpt-theme-light #ai-chat-sidebar #bagpt-project-create-btn:hover {
background: rgba(14, 165, 233, 0.24) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar #bagpt-project-empty,
body.bagpt-theme-light #ai-chat-sidebar #bagpt-project-empty {
background: rgba(15, 23, 42, 0.05) !important;
color: rgba(71, 85, 105, 0.88) !important;
border: 1px solid rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-projects-list button,
body.bagpt-theme-light #bagpt-projects-list button {
border: 1px solid rgba(15, 23, 42, 0.1) !important;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-projects-list button[class*="bg-emerald"],
body.bagpt-theme-light #bagpt-projects-list button[class*="bg-emerald"] {
background: rgba(16, 185, 129, 0.14) !important;
color: rgba(6, 78, 59, 0.96) !important;
border-color: rgba(16, 185, 129, 0.32) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-projects-list button[class*="bg-cyan"],
body.bagpt-theme-light #bagpt-projects-list button[class*="bg-cyan"] {
background: rgba(14, 165, 233, 0.14) !important;
color: rgba(8, 61, 90, 0.96) !important;
border-color: rgba(14, 165, 233, 0.3) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-projects-list button[class*="bg-white/"],
body.bagpt-theme-light #bagpt-projects-list button[class*="bg-white/"] {
background: #ffffff !important;
color: rgba(51, 65, 85, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-projects-list button[class*="hover:bg-white"]:hover,
body.bagpt-theme-light #bagpt-projects-list button[class*="hover:bg-white"]:hover {
background: #f1f5f9 !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-projects-list .text-white\/45,
#ai-chat-app.bagpt-theme-light #bagpt-projects-list .text-white\/68,
#ai-chat-app.bagpt-theme-light #bagpt-projects-list .text-white\/75,
#ai-chat-app.bagpt-theme-light #bagpt-projects-list .text-white\/80,
body.bagpt-theme-light #bagpt-projects-list .text-white\/45,
body.bagpt-theme-light #bagpt-projects-list .text-white\/68,
body.bagpt-theme-light #bagpt-projects-list .text-white\/75,
body.bagpt-theme-light #bagpt-projects-list .text-white\/80 {
color: rgba(71, 85, 105, 0.85) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-projects-list .text-emerald-100,
body.bagpt-theme-light #bagpt-projects-list .text-emerald-100 {
color: rgba(6, 78, 59, 0.92) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-projects-list .text-cyan-100,
body.bagpt-theme-light #bagpt-projects-list .text-cyan-100 {
color: rgba(8, 61, 90, 0.92) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-projects-list .bg-black\/25,
body.bagpt-theme-light #bagpt-projects-list .bg-black\/25 {
background: rgba(15, 23, 42, 0.08) !important;
color: rgba(51, 65, 85, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-projects-list .bg-cyan-950\/45,
body.bagpt-theme-light #bagpt-projects-list .bg-cyan-950\/45 {
background: rgba(14, 116, 144, 0.2) !important;
color: rgba(8, 47, 73, 0.95) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-projects-list .text-cyan-100\/90,
body.bagpt-theme-light #bagpt-projects-list .text-cyan-100\/90 {
color: rgba(8, 61, 90, 0.94) !important;
}
/* پنل Project Workspace — تم روشن: دکمهها و متن روی پسزمینهٔ روشن خوانا */
#ai-chat-app.bagpt-theme-light #bagpt-project-workspace {
background: #f1f5f9 !important;
color: rgba(15, 23, 42, 0.92);
border-inline-start: 1px solid rgba(15, 23, 42, 0.08);
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
.border-white\/\[0\.07\] {
border-color: rgba(15, 23, 42, 0.1) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-project-workspace .bagpt-pw-scroll {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.5) 0%,
transparent 32%
) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-project-workspace .bagpt-pw-card {
background: rgba(255, 255, 255, 0.94) !important;
border: 1px solid rgba(15, 23, 42, 0.1) !important;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
#ai-chat-app.bagpt-theme-light #bagpt-project-workspace .bagpt-pw-inset-list {
background: rgba(248, 250, 252, 0.98) !important;
border-color: rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
.divide-y
> :not([hidden])
~ :not([hidden]) {
border-color: rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-project-workspace > .shrink-0.space-y-2 {
background: rgba(255, 255, 255, 0.88) !important;
border-top-color: rgba(15, 23, 42, 0.1) !important;
backdrop-filter: blur(10px);
}
#ai-chat-app.bagpt-theme-light #bagpt-project-workspace-title {
color: rgba(8, 47, 73, 0.96) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
.border-b
h2.text-\[11px\] {
color: rgba(100, 116, 139, 0.95) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
.border-b
h2.text-\[13px\] {
color: rgba(15, 23, 42, 0.92) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-project-workspace-instructions,
#ai-chat-app.bagpt-theme-light #bagpt-project-workspace .text-white\/82,
#ai-chat-app.bagpt-theme-light #bagpt-project-workspace .text-white\/\[0\.78\] {
color: rgba(51, 65, 85, 0.92) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-project-workspace .text-white\/45,
#ai-chat-app.bagpt-theme-light #bagpt-project-workspace .text-white\/60 {
color: rgba(71, 85, 105, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
#bagpt-project-workspace-count {
background: rgba(14, 165, 233, 0.12) !important;
color: rgba(8, 47, 73, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
#bagpt-project-workspace-chat-count {
background: rgba(15, 23, 42, 0.06) !important;
color: rgba(51, 65, 85, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
#bagpt-project-workspace-add-files {
border-width: 0.5px !important;
border-style: solid !important;
border-color: rgba(14, 165, 233, 0.35) !important;
background: linear-gradient(
180deg,
rgba(14, 165, 233, 0.18),
rgba(14, 165, 233, 0.08)
) !important;
color: rgba(8, 47, 73, 0.96) !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
#bagpt-project-workspace-add-files:hover {
border-color: rgba(2, 132, 199, 0.45) !important;
background: linear-gradient(
180deg,
rgba(14, 165, 233, 0.26),
rgba(14, 165, 233, 0.12)
) !important;
color: rgba(8, 47, 73, 0.98) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
#bagpt-project-workspace-open-chat {
border: 1px solid rgba(15, 23, 42, 0.12) !important;
background: rgba(255, 255, 255, 0.96) !important;
color: rgba(15, 23, 42, 0.9) !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
#bagpt-project-workspace-open-chat:hover {
border-color: rgba(15, 23, 42, 0.18) !important;
background: rgba(241, 245, 249, 0.98) !important;
color: rgba(15, 23, 42, 0.96) !important;
}
/* باکس هشدار حذف دائمی: پسزمینهٔ تیرهٔ دارک را در تم روشن جایگزین میکنیم */
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
div:has(> #bagpt-project-workspace-delete-project) {
border-color: rgba(220, 38, 38, 0.28) !important;
background: rgba(254, 242, 242, 0.98) !important;
box-shadow: none;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
#bagpt-project-workspace-delete-project {
border: none !important;
background: transparent !important;
color: rgba(153, 27, 27, 0.98) !important;
box-shadow: none;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
#bagpt-project-workspace-delete-project:hover {
background: rgba(248, 113, 113, 0.18) !important;
color: rgba(127, 29, 29, 1) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-project-workspace .text-red-200\/50 {
color: rgba(190, 24, 93, 0.78) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-project-workspace .text-red-200\/45 {
color: rgba(185, 28, 28, 0.72) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
#bagpt-project-workspace-close {
color: rgba(71, 85, 105, 0.85) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
#bagpt-project-workspace-close:hover {
color: rgba(15, 23, 42, 0.95) !important;
background: rgba(15, 23, 42, 0.06) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
#bagpt-project-workspace-edit-instructions {
background: rgba(15, 23, 42, 0.06) !important;
color: rgba(51, 65, 85, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
#bagpt-project-workspace-edit-instructions:hover {
background: rgba(15, 23, 42, 0.1) !important;
color: rgba(15, 23, 42, 0.95) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
#bagpt-project-workspace-source-status {
color: rgba(71, 85, 105, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
#bagpt-project-workspace-source-status.text-cyan-200\/60 {
color: rgba(14, 116, 144, 0.72) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
.bagpt-project-source-row {
background: rgba(15, 23, 42, 0.04) !important;
border-radius: 0.5rem;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace
.bagpt-project-source-row:hover {
background: rgba(15, 23, 42, 0.07) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace-sources
.bagpt-project-source-row
> .min-w-0
[class*="text-white/"] {
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace-sources
.bagpt-project-source-row
> .min-w-0
[class*="text-white/40"] {
color: rgba(71, 85, 105, 0.82) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-project-workspace-sources button {
border-width: 0.2px !important;
border-style: solid !important;
border-color: rgba(15, 23, 42, 0.12) !important;
background: rgba(15, 23, 42, 0.06) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-project-workspace-sources button:hover {
border-color: rgba(2, 132, 199, 0.28) !important;
background: rgba(14, 165, 233, 0.12) !important;
color: rgba(8, 47, 73, 0.96) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace-sources
button[class*="rose"] {
border-color: rgba(190, 24, 93, 0.35) !important;
background: rgba(254, 226, 226, 0.95) !important;
color: rgba(136, 19, 55, 0.96) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace-sources
button[class*="rose"]:hover {
background: rgba(254, 202, 202, 0.98) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace-chats
.bagpt-pw-chat-row {
color: rgba(15, 23, 42, 0.88) !important;
background: transparent !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace-chats
.bagpt-pw-chat-row:hover {
background: rgba(15, 23, 42, 0.05) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace-chats
.bagpt-pw-chat-row
[class*="text-white/40"] {
color: rgba(71, 85, 105, 0.82) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace-chats
.bagpt-pw-chat-row[class*="bg-cyan"] {
background: rgba(14, 165, 233, 0.12) !important;
color: rgba(8, 47, 73, 0.96) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace-chats
.bagpt-pw-chat-del {
border-color: rgba(15, 23, 42, 0.1) !important;
color: rgba(190, 24, 93, 0.92) !important;
background: transparent !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace-chats
.bagpt-pw-chat-del:hover {
background: rgba(254, 226, 226, 0.95) !important;
}
#ai-chat-app.bagpt-theme-light
#bagpt-project-workspace-chats
p[class*="text-white"] {
color: rgba(71, 85, 105, 0.88) !important;
background: rgba(15, 23, 42, 0.04) !important;
}
/* Settings section headings/readability in light mode */
body.bagpt-theme-light #bagpt-settings-modal [id^="bagpt-settings-panel-"] > h3,
#ai-chat-app.bagpt-theme-light
#bagpt-settings-modal
[id^="bagpt-settings-panel-"]
> h3 {
color: rgba(15, 23, 42, 0.95) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .text-white\/95,
body.bagpt-theme-light #bagpt-settings-modal .text-white\/90,
body.bagpt-theme-light #bagpt-settings-modal .text-white\/88,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white\/95,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white\/90,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white\/88 {
color: rgba(15, 23, 42, 0.92) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .text-white\/55,
body.bagpt-theme-light #bagpt-settings-modal .text-white\/50,
body.bagpt-theme-light #bagpt-settings-modal .text-white\/45,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white\/55,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white\/50,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white\/45 {
color: rgba(51, 65, 85, 0.9) !important;
}
/* مودال تنظیمات — تم روشن کامل (غلبه بر utilityهای تیلویند در تمپلیت) */
body.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-backdrop,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-backdrop {
/* بلو ثابت؛ بدون اتکا به هاور — فقط شدت ملایمتر از دارک */
background-color: rgba(15, 23, 42, 0.38) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.06) !important;
backdrop-filter: blur(12px) saturate(1.06) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-shell,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-shell {
/* پسزمینهٔ لایهای؛ نه سفید یکدست */
background: linear-gradient(155deg, #e9eef6 0%, #dfe7f2 55%, #d8e2ef 100%) !important;
border-color: rgba(15, 23, 42, 0.14) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.65) inset,
0 24px 56px rgba(15, 23, 42, 0.14) !important;
}
body.bagpt-theme-light #bagpt-settings-modal nav.bagpt-settings-nav,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal nav.bagpt-settings-nav {
background: linear-gradient(180deg, #d3dde9 0%, #cad6e6 100%) !important;
border-color: rgba(15, 23, 42, 0.12) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-shell > div.flex.min-h-0.flex-1,
#ai-chat-app.bagpt-theme-light
#bagpt-settings-modal
.bagpt-settings-shell
> div.flex.min-h-0.flex-1 {
background: linear-gradient(180deg, #f2f6fb 0%, #eef3f9 100%) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-shell > div.flex.min-h-0.flex-1 > div.border-b,
#ai-chat-app.bagpt-theme-light
#bagpt-settings-modal
.bagpt-settings-shell
> div.flex.min-h-0.flex-1
> div.border-b {
border-color: rgba(15, 23, 42, 0.1) !important;
}
body.bagpt-theme-light #bagpt-settings-modal #bagpt-settings-title,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal #bagpt-settings-title {
color: rgba(15, 23, 42, 0.96) !important;
}
body.bagpt-theme-light #bagpt-settings-modal #bagpt-settings-section-label,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal #bagpt-settings-section-label {
color: rgba(8, 91, 130, 0.9) !important;
}
body.bagpt-theme-light #bagpt-settings-modal [data-bagpt-settings-close],
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal [data-bagpt-settings-close] {
color: rgba(71, 85, 105, 0.55) !important;
}
body.bagpt-theme-light #bagpt-settings-modal [data-bagpt-settings-close]:hover,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal [data-bagpt-settings-close]:hover {
background-color: rgba(15, 23, 42, 0.06) !important;
color: rgba(15, 23, 42, 0.92) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-nav-item,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-nav-item {
color: rgba(51, 65, 85, 0.82) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-nav-item:hover,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-nav-item:hover {
background-color: rgba(15, 23, 42, 0.05) !important;
color: rgba(15, 23, 42, 0.95) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-nav-item.is-active,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-nav-item.is-active {
background: rgba(14, 165, 233, 0.12) !important;
color: rgba(15, 23, 42, 0.96) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-nav-item.is-active svg,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-nav-item.is-active svg {
color: rgba(8, 91, 130, 0.82) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-nav-item svg,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-nav-item svg {
color: rgba(100, 116, 139, 0.65) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .text-white,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white {
color: rgba(15, 23, 42, 0.94) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .text-white\/75,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white\/75 {
color: rgba(51, 65, 85, 0.88) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .text-white\/85,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white\/85 {
color: rgba(30, 41, 59, 0.9) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .text-white\/95,
body.bagpt-theme-light #bagpt-settings-modal .text-white\/90,
body.bagpt-theme-light #bagpt-settings-modal .text-white\/88,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white\/95,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white\/90,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white\/88 {
color: rgba(15, 23, 42, 0.92) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .text-white\/55,
body.bagpt-theme-light #bagpt-settings-modal .text-white\/50,
body.bagpt-theme-light #bagpt-settings-modal .text-white\/45,
body.bagpt-theme-light #bagpt-settings-modal .text-white\/40,
body.bagpt-theme-light #bagpt-settings-modal .text-white\/38,
body.bagpt-theme-light #bagpt-settings-modal .text-white\/35,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white\/55,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white\/50,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white\/45,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white\/40,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white\/38,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white\/35 {
color: rgba(51, 65, 85, 0.88) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .text-white\/25,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .text-white\/25 {
color: rgba(100, 116, 139, 0.55) !important;
}
body.bagpt-theme-light #bagpt-settings-modal [class*="text-cyan"],
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal [class*="text-cyan"] {
color: rgba(8, 91, 130, 0.88) !important;
}
body.bagpt-theme-light #bagpt-settings-modal [class*="text-emerald"],
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal [class*="text-emerald"] {
color: rgba(6, 95, 70, 0.92) !important;
}
body.bagpt-theme-light #bagpt-settings-modal [class*="text-violet"],
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal [class*="text-violet"] {
color: rgba(76, 29, 149, 0.9) !important;
}
body.bagpt-theme-light #bagpt-settings-modal [class*="text-red"],
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal [class*="text-red"] {
color: rgba(185, 28, 28, 0.92) !important;
}
body.bagpt-theme-light #bagpt-settings-modal [class*="bg-black/"],
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal [class*="bg-black/"],
body.bagpt-theme-light #bagpt-settings-modal [class*="bg-white/"],
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal [class*="bg-white/"] {
background-color: rgba(255, 255, 255, 0.96) !important;
}
body.bagpt-theme-light #bagpt-settings-modal input:not([type="checkbox"]):not([type="range"]):not([type="file"]),
body.bagpt-theme-light #bagpt-settings-modal textarea,
body.bagpt-theme-light #bagpt-settings-modal select,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal input:not([type="checkbox"]):not([type="range"]):not([type="file"]),
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal textarea,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal select {
background-color: #ffffff !important;
color: rgba(15, 23, 42, 0.92) !important;
border-color: rgba(15, 23, 42, 0.14) !important;
}
body.bagpt-theme-light #bagpt-settings-modal input::placeholder,
body.bagpt-theme-light #bagpt-settings-modal textarea::placeholder,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal input::placeholder,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal textarea::placeholder {
color: rgba(100, 116, 139, 0.45) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-avatar-edit-btn,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-avatar-edit-btn {
border-color: rgba(15, 23, 42, 0.14) !important;
background-color: #ffffff !important;
color: rgba(15, 23, 42, 0.85) !important;
box-shadow:
0 0 0 3px rgba(248, 250, 252, 1),
0 4px 14px rgba(15, 23, 42, 0.12) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-avatar-edit-btn:hover,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .bagpt-settings-avatar-edit-btn:hover {
background-color: #f1f5f9 !important;
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-appearance-mode-btn.is-active,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .bagpt-appearance-mode-btn.is-active {
border-color: rgba(14, 165, 233, 0.45) !important;
background: rgba(14, 165, 233, 0.1) !important;
color: rgba(12, 74, 110, 0.96) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-appearance-mode-btn.is-active span[class*="text-white"],
#ai-chat-app.bagpt-theme-light
#bagpt-settings-modal
.bagpt-appearance-mode-btn.is-active
span[class*="text-white"] {
color: rgba(12, 74, 110, 0.88) !important;
}
body.bagpt-theme-light #bagpt-settings-modal .bagpt-persona-chip.is-active,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .bagpt-persona-chip.is-active {
border-color: rgba(14, 165, 233, 0.45) !important;
background: rgba(14, 165, 233, 0.12) !important;
color: rgba(12, 74, 110, 0.96) !important;
}
body.bagpt-theme-light #bagpt-settings-modal [class*="border-white/"],
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal [class*="border-white/"] {
border-color: rgba(15, 23, 42, 0.1) !important;
}
@media (max-width: 767px) {
body.bagpt-theme-light #bagpt-settings-modal .bagpt-behavior-row,
#ai-chat-app.bagpt-theme-light #bagpt-settings-modal .bagpt-behavior-row {
border-color: rgba(15, 23, 42, 0.1) !important;
background: rgba(255, 255, 255, 0.88) !important;
}
}
@media (max-width: 767px) {
/* موبایل: انیمیشنهای ریز اینجا حس "لرزش" میسازند؛ موشن را روی دسکتاپ نگه میداریم. */
.ai-chat-live-shell.bagpt-live-enter {
animation: none !important;
}
.ai-chat-live-shell .ai-chat-live-row,
.ai-chat-msg-content.ai-chat-msg-content--live,
.ai-chat-msg-floor-pad[data-bagpt-post-reserve] {
transition: none !important;
}
}
/* Premium mobile header menu sheet */
@media (max-width: 767px) {
#ai-chat-header-actions {
position: static !important;
}
#ai-chat-menu-dropdown {
position: fixed !important;
left: auto !important;
right: 12px !important;
inset-inline: auto !important;
top: calc(env(safe-area-inset-top, 0px) + 60px) !important;
bottom: auto !important;
width: max-content !important;
min-width: min(240px, calc(100vw - 24px)) !important;
max-width: calc(100vw - 24px) !important;
box-sizing: border-box;
max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 84px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
direction: rtl;
border-radius: 16px !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
background: linear-gradient(
180deg,
rgba(20, 24, 36, 0.92),
rgba(8, 10, 18, 0.95)
) !important;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
box-shadow:
0 26px 60px rgba(2, 6, 23, 0.62),
0 0 0 1px rgba(103, 232, 249, 0.08) inset !important;
padding: 8px !important;
margin-top: 0 !important;
transform: translateY(-8px) scale(0.985);
opacity: 0;
pointer-events: none;
z-index: 80 !important;
transition:
opacity 0.2s ease,
transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
#ai-chat-menu-dropdown.ai-chat-menu-dropdown--mob-open {
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: auto;
}
#ai-chat-menu-dropdown .ai-chat-menu-item {
min-height: 44px;
width: 100%;
justify-content: flex-start;
text-align: right;
border-radius: 12px;
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.02);
color: rgba(248, 250, 252, 0.94);
font-size: 14px;
font-weight: 500;
line-height: 1.35;
transition:
background-color 0.16s ease,
border-color 0.16s ease,
color 0.16s ease,
transform 0.16s ease;
}
#ai-chat-menu-dropdown .ai-chat-menu-item + .ai-chat-menu-item {
margin-top: 6px;
}
#ai-chat-menu-dropdown .ai-chat-menu-item:hover,
#ai-chat-menu-dropdown .ai-chat-menu-item:focus-visible {
border-color: rgba(103, 232, 249, 0.28);
background: rgba(34, 211, 238, 0.11);
color: #f0f9ff;
transform: translateY(-1px);
outline: none;
}
#ai-chat-menu-dropdown .ai-chat-menu-item[disabled] {
opacity: 0.5;
background: rgba(255, 255, 255, 0.015);
border-color: rgba(255, 255, 255, 0.08);
transform: none;
}
#ai-chat-menu-dropdown #ai-chat-memory-count {
margin-inline-start: auto !important;
margin-right: 0 !important;
background: rgba(255, 255, 255, 0.1) !important;
color: rgba(255, 255, 255, 0.72) !important;
border: 1px solid rgba(255, 255, 255, 0.16);
}
}
/* آواتار محلی (بدون Gravatar): حرف روی گرادیان — مهمان: G خاکستری */
.bagpt-local-avatar {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 9999px;
font-weight: 700;
letter-spacing: -0.02em;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
background: linear-gradient(
145deg,
hsl(var(--bagpt-av-h, 200), 48%, 52%) 0%,
hsl(calc(var(--bagpt-av-h, 200) + 24), 42%, 40%) 100%
);
-webkit-font-smoothing: antialiased;
}
.bagpt-local-avatar--guest {
background: linear-gradient(145deg, hsl(210, 14%, 52%), hsl(220, 12%, 36%));
font-weight: 800;
font-family:
ui-sans-serif,
system-ui,
-apple-system,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif;
}
.bagpt-local-avatar--sm {
width: 36px;
height: 36px;
font-size: 12px;
line-height: 1;
}
.bagpt-local-avatar--lg {
width: 56px;
height: 56px;
font-size: 18px;
line-height: 1;
}
.bagpt-local-avatar__glyph {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: clip;
unicode-bidi: plaintext;
}
.bagpt-local-avatar--photo {
overflow: hidden;
}
.bagpt-local-avatar__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
/* کراپر پروفایل: ناحیه برش دایرهای (مثل توییتر/تلگرام) */
.bagpt-avatar-crop-root.is-open {
z-index: 100;
}
.bagpt-avatar-crop-stage .cropper-modal {
background: rgba(0, 0, 0, 0.72);
}
.bagpt-avatar-crop-stage .cropper-view-box,
.bagpt-avatar-crop-stage .cropper-face {
border-radius: 50%;
outline: none;
}
.bagpt-avatar-crop-stage .cropper-view-box {
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
/*
* گیت ورود موبایل: app.css از پیشساخته است و کلاسهای arbitrary مثل z-[280] / bg-[#…]/…
* در آن وجود ندارند → مودال عملاً بدون z-index میماند و #bagpt-chat-body (عنصر بعدی در DOM)
* روی آن نقاشی میشود. اینجا با style.css (بعد از app.css) قطعی میکنیم.
*/
/*
* گالری تصاویر AI: صفحهٔ جدا (/ai-gallery/)، تمامصفحه؛ دیگر overlay روی چت نیست.
*/
/* اطمینان از خوانایی متن وضعیت اگر خروجی Tailwind قدیمی/ناقص باشد */
#bagpt-ai-gallery-page .bagpt-ai-gallery-state {
color: rgba(255, 255, 255, 0.55) !important;
}
#bagpt-ai-gallery-page #bagpt-ai-gallery-error.bagpt-ai-gallery-state {
color: rgba(251, 113, 133, 0.9) !important;
}
/* گالری AI: نوار اسکرول ستون بندانگشتی در نمای بزرگ (اسکرول همچنان با چرخماوس/لمس) */
#bagpt-ai-gallery-v-thumbs {
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
#bagpt-ai-gallery-v-thumbs::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
#bagpt-ai-gallery-v-img {
-webkit-user-drag: none;
user-select: none;
}
@media (max-width: 767.98px) {
#bagpt-ai-gallery-viewer .bagpt-ai-gallery-v-main {
touch-action: pan-y;
}
#bagpt-ai-gallery-v-thumbs {
touch-action: pan-x;
overflow-x: auto !important;
overflow-y: hidden !important;
}
}
/*
* گالری AI — موشن نرم (گرید، نمای بزرگ، بندانگشتیها؛ رعایت prefers-reduced-motion)
*/
.bagpt-ai-gallery-scope {
--bagpt-ag-ease: cubic-bezier(0.22, 1, 0.36, 1);
--bagpt-ag-dur: 0.4s;
--bagpt-ag-dur-slow: 0.52s;
--bagpt-ag-stagger: 26ms;
}
@media (prefers-reduced-motion: reduce) {
.bagpt-ai-gallery-scope {
--bagpt-ag-ease: linear;
--bagpt-ag-dur: 0.01s;
--bagpt-ag-dur-slow: 0.01s;
--bagpt-ag-stagger: 0ms;
}
}
@keyframes bagpt-ag-card-in {
from {
opacity: 0;
transform: translate3d(0, 12px, 0) scale(0.98);
}
to {
opacity: 1;
transform: none;
}
}
.bagpt-ai-gallery-card-motion {
animation: bagpt-ag-card-in var(--bagpt-ag-dur-slow) var(--bagpt-ag-ease) both;
animation-delay: calc(var(--bagpt-ag-i, 0) * var(--bagpt-ag-stagger));
}
@media (prefers-reduced-motion: reduce) {
.bagpt-ai-gallery-card-motion {
animation: none;
}
}
.bagpt-ai-gallery-scope .bagpt-ai-gallery-card-motion img {
transition: transform 0.55s var(--bagpt-ag-ease);
}
.bagpt-ai-gallery-viewer-root {
transition: opacity var(--bagpt-ag-dur) var(--bagpt-ag-ease);
}
.bagpt-ai-gallery-viewer-inner {
transition: transform var(--bagpt-ag-dur-slow) var(--bagpt-ag-ease), opacity 0.38s ease;
transform: translate3d(0, 14px, 0);
opacity: 0.93;
}
.bagpt-ai-gallery-viewer-root.bagpt-ai-gallery-viewer--ready .bagpt-ai-gallery-viewer-inner {
transform: none;
opacity: 1;
}
/*
* دسکتاپ: thumbs | تصویر | اکشن — با Grid تا ستون وسط هرگز ۰ نشود (RTL + flex گاهی وسط را ۰px میکرد
* و فقط نوار بندانگشتی عمودی وسط صفحه دیده میشد).
*/
@media (min-width: 768px) {
#bagpt-ai-gallery-viewer .bagpt-ai-gallery-v-stage {
display: grid !important;
grid-template-columns: 80px minmax(0, 1fr) 60px !important;
grid-template-rows: minmax(0, 1fr) !important;
grid-template-areas: "thumbs main rail" !important;
align-items: stretch !important;
justify-items: stretch !important;
min-height: 0 !important;
min-width: 0 !important;
direction: ltr !important;
flex: 1 1 0% !important;
}
#bagpt-ai-gallery-viewer #bagpt-ai-gallery-v-thumbs {
grid-area: thumbs !important;
width: auto !important;
max-width: none !important;
}
#bagpt-ai-gallery-viewer .bagpt-ai-gallery-v-main {
grid-area: main !important;
min-width: 0 !important;
min-height: 0 !important;
width: auto !important;
max-width: none !important;
flex: unset !important;
}
#bagpt-ai-gallery-viewer .bagpt-ai-gallery-v-main > div {
min-height: 0 !important;
min-width: 0 !important;
}
#bagpt-ai-gallery-viewer .bagpt-ai-gallery-v-rail {
grid-area: rail !important;
width: auto !important;
max-width: none !important;
}
#bagpt-ai-gallery-v-img {
max-height: min(86vh, calc(100dvh - 120px)) !important;
max-width: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
/* قبل از load گاهی intrinsic=۰ → جعبه ۰×۰ و وسط مودال «فقط سیاه» */
min-height: min(120px, 20vh) !important;
min-width: 1px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.bagpt-ai-gallery-viewer-inner {
transform: none;
opacity: 1;
transition: none;
}
}
#bagpt-ai-gallery-v-img {
transition: opacity 0.34s var(--bagpt-ag-ease), transform 0.45s var(--bagpt-ag-ease);
opacity: 1;
}
/* قدیم: opacity=0 — اگر swap روی ![]()
میماند مودال فقط بکگراند سیاه دیده میشد. انیمیشن حذف شده؛ همیشه واضح بمان. */
#bagpt-ai-gallery-v-img.bagpt-ai-gallery-v-img--swap {
opacity: 1;
transform: none;
}
#bagpt-ai-gallery-v-img.bagpt-ai-gallery-v-img--slide-next {
animation: bagpt-ag-view-slide-next 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
#bagpt-ai-gallery-v-img.bagpt-ai-gallery-v-img--slide-prev {
animation: bagpt-ag-view-slide-prev 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes bagpt-ag-view-slide-next {
from {
opacity: 0.84;
transform: translate3d(-20px, 0, 0) scale(0.992);
filter: saturate(0.95);
}
to {
opacity: 1;
transform: none;
filter: none;
}
}
@keyframes bagpt-ag-view-slide-prev {
from {
opacity: 0.84;
transform: translate3d(20px, 0, 0) scale(0.992);
filter: saturate(0.95);
}
to {
opacity: 1;
transform: none;
filter: none;
}
}
@media (prefers-reduced-motion: reduce) {
#bagpt-ai-gallery-v-img {
transition: none;
}
#bagpt-ai-gallery-v-img.bagpt-ai-gallery-v-img--swap {
opacity: 1;
transform: none;
}
#bagpt-ai-gallery-v-img.bagpt-ai-gallery-v-img--slide-next,
#bagpt-ai-gallery-v-img.bagpt-ai-gallery-v-img--slide-prev {
animation: none;
}
}
.bagpt-ai-gallery-v-thumb {
transition: transform 0.32s var(--bagpt-ag-ease), opacity 0.28s ease, box-shadow 0.35s ease;
}
@keyframes bagpt-ag-soft-in {
from {
opacity: 0;
transform: translate3d(0, 8px, 0);
}
to {
opacity: 1;
transform: none;
}
}
#bagpt-ai-gallery-more:not(.hidden) {
animation: bagpt-ag-soft-in 0.44s var(--bagpt-ag-ease) both;
}
#bagpt-ai-gallery-loading:not(.hidden),
#bagpt-ai-gallery-error:not(.hidden),
#bagpt-ai-gallery-empty:not(.hidden) {
animation: bagpt-ag-soft-in 0.4s var(--bagpt-ag-ease) both;
}
@media (prefers-reduced-motion: reduce) {
#bagpt-ai-gallery-more:not(.hidden),
#bagpt-ai-gallery-loading:not(.hidden),
#bagpt-ai-gallery-error:not(.hidden),
#bagpt-ai-gallery-empty:not(.hidden) {
animation: none;
}
}
.bagpt-ai-gallery-scope header a[href] {
transition: transform 0.28s var(--bagpt-ag-ease), background-color 0.25s ease, border-color 0.25s ease;
}
.bagpt-ai-gallery-scope header a[href]:hover {
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
.bagpt-ai-gallery-scope header a[href]:hover {
transform: none;
}
}
.bagpt-ai-gallery-scope .bagpt-ai-gallery-v-action,
.bagpt-ai-gallery-scope #bagpt-ai-gallery-v-back,
.bagpt-ai-gallery-scope #bagpt-ai-gallery-v-send {
transition: transform 0.32s var(--bagpt-ag-ease), box-shadow 0.4s ease, filter 0.25s ease !important;
}
@media (prefers-reduced-motion: reduce) {
.bagpt-ai-gallery-scope .bagpt-ai-gallery-v-action,
.bagpt-ai-gallery-scope #bagpt-ai-gallery-v-back,
.bagpt-ai-gallery-scope #bagpt-ai-gallery-v-send {
transition: none !important;
}
}
body.bagpt-ai-gallery-body #bagpt-ai-gallery-page {
position: fixed !important;
inset: 0 !important;
width: 100% !important;
max-width: none !important;
min-height: 100vh !important;
min-height: 100dvh !important;
min-height: -webkit-fill-available !important;
max-height: 100dvh !important;
z-index: 50 !important;
margin: 0 !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
}
/*
* موبایل: زنجیرهٔ flex — والد ارتفاع معین، فرزند flex-1 و min-height:0 برای اسکرول.
* اگر جایی ارتفاع 0 ماند، min-height روی #bagpt-ai-gallery-body کف بصری میدهد.
*/
body.bagpt-ai-gallery-body #bagpt-ai-gallery-main,
body.bagpt-ai-gallery-body #bagpt-ai-gallery-page .bagpt-ai-gallery-shell {
flex: 1 1 0% !important;
min-height: 0 !important;
}
body.bagpt-ai-gallery-body #bagpt-ai-gallery-body {
flex: 1 1 0% !important;
min-height: 0 !important;
min-height: 35vh !important; /* اگر max() ناشناخته ماند */
min-height: max(0px, 35dvh) !important;
-webkit-overflow-scrolling: touch;
}
#bagpt-auth-gate-modal.bagpt-auth-gate-modal:not(.hidden) {
position: fixed !important;
inset: 0 !important;
z-index: 50000 !important;
display: flex !important;
flex-direction: column !important;
min-height: 100vh !important;
min-height: 100dvh !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
background-color: #04060d !important;
box-sizing: border-box !important;
pointer-events: auto !important;
}
body.bagpt-auth-gate-open #ai-chat-app {
overflow: hidden;
}
/* لایههای پسزمینهٔ گیت (بدون اتکا به کلاسهای arbitrary در app.css) */
#bagpt-auth-gate-modal .bagpt-auth-gate-backdrop {
position: absolute;
inset: 0;
pointer-events: none;
}
#bagpt-auth-gate-modal .bagpt-auth-gate-backdrop--base {
z-index: 0;
background: rgba(3, 5, 8, 0.98);
}
#bagpt-auth-gate-modal .bagpt-auth-gate-backdrop--veil {
z-index: 0;
background: rgba(0, 0, 0, 0.45);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
#bagpt-auth-gate-modal .bagpt-auth-gate-bg {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
/* محتوای فرم همیشه بالای گرادیان تزئینی */
#bagpt-auth-gate-modal .bagpt-auth-gate-shell {
position: relative;
z-index: 20;
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
pointer-events: auto;
}
#bagpt-auth-gate-modal .bagpt-auth-gate-shell > .mx-auto {
display: flex;
flex-direction: column;
flex: 1 1 auto;
width: 100%;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1.75rem;
padding-bottom: 2.5rem;
}
@media (min-width: 768px) {
#bagpt-auth-gate-modal .bagpt-auth-gate-shell > .mx-auto {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
}
#bagpt-auth-gate-modal .bagpt-auth-gate-topbar {
z-index: 2;
flex-shrink: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(10, 11, 16, 0.96);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
#bagpt-auth-gate-modal .bagpt-auth-gate-topbar p {
color: rgba(167, 243, 208, 0.88);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
}
#bagpt-auth-gate-modal .bagpt-auth-gate-topbar h2 {
color: #f8fafc;
font-size: 16px;
font-weight: 600;
}
#bagpt-auth-gate-modal #bagpt-auth-gate-close {
color: rgba(248, 250, 252, 0.75);
}
#bagpt-auth-gate-modal #bagpt-auth-gate-close:hover {
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
#bagpt-auth-gate-modal .bagpt-auth-gate-brand {
border: 1px solid rgba(52, 211, 153, 0.35);
background: linear-gradient(135deg, rgba(52, 211, 153, 0.22), rgba(6, 182, 212, 0.12));
}
#bagpt-auth-gate-modal .bagpt-auth-gate-brand svg {
color: #d1fae5;
}
#bagpt-auth-gate-modal .bagpt-auth-gate-card {
border: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: 1.35rem;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
padding: 1px;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
}
#bagpt-auth-gate-modal .bagpt-auth-gate-card > div {
border-radius: 1.28rem;
background: rgba(14, 16, 22, 0.98) !important;
padding: 1.5rem 1.25rem;
}
@media (min-width: 768px) {
#bagpt-auth-gate-modal .bagpt-auth-gate-card > div {
padding: 2rem 1.75rem;
}
}
#bagpt-auth-gate-modal #bagpt-auth-gate-lead {
color: rgba(248, 250, 252, 0.95) !important;
font-size: 14px;
font-weight: 500;
line-height: 1.65;
}
#bagpt-auth-gate-modal .bagpt-auth-gate-hero-icon {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 1.35rem;
padding: 0;
border: none;
background: transparent !important;
box-shadow: none !important;
animation: none !important;
}
#bagpt-auth-gate-modal .bagpt-auth-gate-hero-svg {
display: block;
width: 2.75rem;
height: 2.75rem;
flex-shrink: 0;
color: rgba(255, 255, 255, 0.9);
stroke: currentColor;
}
#bagpt-auth-gate-modal .bagpt-auth-gate-err:not(.hidden) {
color: #fecaca !important;
border: 1px solid rgba(248, 113, 113, 0.45);
background: rgba(69, 10, 10, 0.55);
}
#bagpt-auth-gate-modal label[for="bagpt-auth-gate-mobile"],
#bagpt-auth-gate-modal label[for="bagpt-auth-gate-otp"] {
color: rgba(226, 232, 240, 0.9) !important;
font-size: 12px;
font-weight: 500;
}
#bagpt-auth-gate-modal .bagpt-auth-gate-input {
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 12px;
background: #0c0e14 !important;
color: #f8fafc !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
#bagpt-auth-gate-modal .bagpt-auth-gate-input::placeholder {
color: rgba(148, 163, 184, 0.65);
}
#bagpt-auth-gate-modal .bagpt-auth-gate-input:focus {
outline: none;
border-color: rgba(52, 211, 153, 0.55) !important;
box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.2);
}
#bagpt-auth-gate-modal #bagpt-auth-gate-phone-step {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding-bottom: 0.25rem;
}
#bagpt-auth-gate-modal #bagpt-auth-gate-send-code {
margin-top: 0.25rem;
margin-bottom: 0.75rem;
min-height: 3.25rem;
border: 1px solid rgba(52, 211, 153, 0.5);
border-radius: 12px;
background: linear-gradient(90deg, rgba(16, 185, 129, 0.35), rgba(6, 182, 212, 0.25));
color: #ecfdf5 !important;
font-weight: 600;
font-size: 15px;
padding: 0.875rem 1rem;
line-height: 1.35;
overflow: visible;
}
#bagpt-auth-gate-modal #bagpt-auth-gate-send-code:hover {
border-color: rgba(110, 231, 183, 0.65);
}
#bagpt-auth-gate-modal #bagpt-auth-gate-verify {
border: 1px solid rgba(167, 139, 250, 0.45);
border-radius: 12px;
background: linear-gradient(90deg, rgba(139, 92, 246, 0.4), rgba(217, 70, 239, 0.28));
color: #fff !important;
font-weight: 600;
}
/*
* پیشنمایش «پیام در صف کاربر» در گیت احراز:
* فقط دو خط اول نشان داده میشود (با حذف خودکار سهنقطه توسط line-clamp).
* overflow-wrap/word-break برای جلوگیری از overflow در رشتههای بلند بدون فاصله (URLها، رمزها) اضافه شده.
*/
#bagpt-auth-gate-modal #bagpt-auth-gate-pending-msg {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
overflow-wrap: anywhere;
max-height: calc(1.65em * 2 + 0.4em);
}
#bagpt-auth-gate-modal #bagpt-auth-gate-pending-msg.hidden {
display: none;
}
/* وضعیتهای پویا برای دکمههای گیت احراز: غیرفعال، در حال بارگذاری، اسپینر */
#bagpt-auth-gate-modal #bagpt-auth-gate-send-code:disabled,
#bagpt-auth-gate-modal #bagpt-auth-gate-verify:disabled,
#bagpt-auth-gate-modal #bagpt-auth-gate-send-code[aria-busy="true"],
#bagpt-auth-gate-modal #bagpt-auth-gate-verify[aria-busy="true"] {
cursor: progress;
opacity: 0.78;
filter: saturate(0.92);
}
#bagpt-auth-gate-modal .bagpt-auth-gate-btn-spinner {
display: none;
width: 1.05rem;
height: 1.05rem;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
#bagpt-auth-gate-modal .bagpt-auth-gate-btn-spinner svg {
width: 100%;
height: 100%;
display: block;
transform-origin: center;
}
#bagpt-auth-gate-modal .bagpt-auth-gate-btn--loading .bagpt-auth-gate-btn-spinner {
display: inline-flex;
}
#bagpt-auth-gate-modal .bagpt-auth-gate-btn--loading .bagpt-auth-gate-btn-spinner svg {
animation: bagpt-studio-cta-spin 0.85s linear infinite;
}
#bagpt-auth-gate-modal .bagpt-auth-gate-btn--loading {
pointer-events: none;
}
#bagpt-auth-gate-modal #bagpt-auth-gate-back {
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
background: rgba(255, 255, 255, 0.06);
color: rgba(248, 250, 252, 0.9) !important;
}
#bagpt-auth-gate-modal .bagpt-auth-gate-footnote {
clear: both;
margin-top: 1.75rem !important;
padding-top: 0.35rem;
color: rgba(148, 163, 184, 0.85) !important;
font-size: 11px;
line-height: 1.65;
}
/* مودال ورود موبایل (گیت چت) — پسزمینه و موشن */
.bagpt-auth-gate-bg-gradient {
position: absolute;
inset: -20%;
background:
radial-gradient(ellipse 80% 50% at 50% -10%, rgba(52, 211, 153, 0.22), transparent 55%),
radial-gradient(ellipse 60% 45% at 100% 40%, rgba(139, 92, 246, 0.16), transparent 50%),
radial-gradient(ellipse 50% 40% at 0% 60%, rgba(6, 182, 212, 0.12), transparent 48%),
#030406;
animation: bagpt-auth-gate-bg-shift 14s ease-in-out infinite alternate;
}
@keyframes bagpt-auth-gate-bg-shift {
0% {
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
100% {
transform: translate3d(-2%, 1%, 0) scale(1.03);
opacity: 0.96;
}
}
.bagpt-auth-gate-bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(64px);
opacity: 0.45;
pointer-events: none;
animation: bagpt-auth-gate-orb-float 9s ease-in-out infinite;
}
.bagpt-auth-gate-bg-orb--a {
width: min(72vw, 420px);
height: min(72vw, 420px);
left: -12%;
top: 18%;
background: radial-gradient(circle at 30% 30%, rgba(52, 211, 153, 0.35), transparent 62%);
}
.bagpt-auth-gate-bg-orb--b {
width: min(58vw, 340px);
height: min(58vw, 340px);
right: -8%;
bottom: 8%;
background: radial-gradient(circle at 70% 70%, rgba(167, 139, 250, 0.32), transparent 60%);
animation-delay: -3.5s;
}
@keyframes bagpt-auth-gate-orb-float {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(12px, -10px, 0);
}
}
.bagpt-auth-gate-bg-grid {
position: absolute;
inset: 0;
opacity: 0.07;
background-image:
linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, black 20%, transparent 72%);
}
.bagpt-auth-gate-modal:not(.hidden) .bagpt-auth-gate-card {
animation: bagpt-auth-gate-card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes bagpt-auth-gate-card-in {
0% {
opacity: 0;
transform: translate3d(0, 18px, 0) scale(0.98);
filter: blur(4px);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
filter: blur(0);
}
}
body.bagpt-auth-gate-open .bagpt-auth-gate-brand {
animation: bagpt-auth-gate-brand-glow 2.8s ease-in-out infinite;
}
@keyframes bagpt-auth-gate-brand-glow {
0%,
100% {
box-shadow: 0 0 32px rgba(52, 211, 153, 0.18);
}
50% {
box-shadow: 0 0 44px rgba(52, 211, 153, 0.32);
}
}
/*
* مودال «انتخاب مدل / استودیو» — خارج از #ai-chat-app است؛ با body.bagpt-theme-light
* یا خواهر مجاور #ai-chat-app.bagpt-theme-light ~ … پوشش داده میشود.
*/
body.bagpt-theme-light #bagpt-models-picker-modal.bagpt-models-picker-root,
#ai-chat-app.bagpt-theme-light ~ #bagpt-models-picker-modal.bagpt-models-picker-root {
background-color: rgba(15, 23, 42, 0.42) !important;
}
body.bagpt-theme-light #bagpt-models-picker-modal .bagpt-models-picker-panel,
#ai-chat-app.bagpt-theme-light ~ #bagpt-models-picker-modal .bagpt-models-picker-panel {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.12) !important;
box-shadow:
0 -12px 48px rgba(15, 23, 42, 0.1),
0 16px 40px rgba(15, 23, 42, 0.06) !important;
}
body.bagpt-theme-light #bagpt-models-picker-modal .bagpt-models-picker-panel > div:first-child,
#ai-chat-app.bagpt-theme-light
~ #bagpt-models-picker-modal
.bagpt-models-picker-panel
> div:first-child {
border-color: rgba(15, 23, 42, 0.1) !important;
}
body.bagpt-theme-light #bagpt-models-picker-modal #bagpt-models-picker-title,
#ai-chat-app.bagpt-theme-light ~ #bagpt-models-picker-modal #bagpt-models-picker-title {
color: rgba(15, 23, 42, 0.96) !important;
}
body.bagpt-theme-light #bagpt-models-picker-modal #bagpt-models-picker-close,
#ai-chat-app.bagpt-theme-light ~ #bagpt-models-picker-modal #bagpt-models-picker-close {
color: rgba(71, 85, 105, 0.55) !important;
}
body.bagpt-theme-light #bagpt-models-picker-modal #bagpt-models-picker-close:hover,
#ai-chat-app.bagpt-theme-light ~ #bagpt-models-picker-modal #bagpt-models-picker-close:hover {
background-color: rgba(15, 23, 42, 0.06) !important;
color: rgba(15, 23, 42, 0.92) !important;
}
body.bagpt-theme-light #bagpt-models-picker-modal [data-bagpt-hub],
#ai-chat-app.bagpt-theme-light ~ #bagpt-models-picker-modal [data-bagpt-hub] {
background-color: #f8fafc !important;
background-image: none !important;
border-color: rgba(15, 23, 42, 0.12) !important;
color: rgba(15, 23, 42, 0.92) !important;
}
body.bagpt-theme-light #bagpt-models-picker-modal [data-bagpt-hub]:hover,
#ai-chat-app.bagpt-theme-light ~ #bagpt-models-picker-modal [data-bagpt-hub]:hover {
background-color: #f1f5f9 !important;
border-color: rgba(14, 165, 233, 0.38) !important;
}
body.bagpt-theme-light #bagpt-models-picker-modal [data-bagpt-hub] .font-semibold,
body.bagpt-theme-light #bagpt-models-picker-modal [data-bagpt-hub] .text-white,
#ai-chat-app.bagpt-theme-light ~ #bagpt-models-picker-modal [data-bagpt-hub] .font-semibold,
#ai-chat-app.bagpt-theme-light ~ #bagpt-models-picker-modal [data-bagpt-hub] .text-white {
color: rgba(15, 23, 42, 0.94) !important;
}
body.bagpt-theme-light #bagpt-models-picker-modal [data-bagpt-hub] [class*="text-white/"],
#ai-chat-app.bagpt-theme-light
~ #bagpt-models-picker-modal
[data-bagpt-hub]
[class*="text-white/"] {
color: rgba(71, 85, 105, 0.86) !important;
}
/* نوار بالا: ستون دکمهها — هالهٔ قرمز زنگوله بریده نشود */
.bagpt-topbar > div:last-child {
overflow: visible;
}
/* اعلانها: هایلایت قرمز فقط وقتی خواندهنشده داریم (کلاس --unread از JS) */
.bagpt-notif-backdot {
background-color: transparent;
transition:
background-color 0.22s ease,
box-shadow 0.22s ease;
}
.bagpt-notif-backdot.bagpt-notif-backdot--active {
background-color: rgba(239, 68, 68, 0.22);
box-shadow:
inset 0 0 14px rgba(239, 68, 68, 0.35),
inset 0 0 0 1px rgba(248, 113, 113, 0.42);
}
.bagpt-notif-bell-icon {
color: rgba(255, 255, 255, 0.78);
stroke: currentColor;
transition: color 0.2s ease, stroke 0.2s ease;
}
/* بدون خواندهنشده: رنگ خنثی حتی اگر کلاسهای تم/Tailwind تداخل کنند */
.bagpt-notif-trigger:not(.bagpt-notif-trigger--unread) .bagpt-notif-bell-icon {
color: rgba(255, 255, 255, 0.78) !important;
stroke: currentColor !important;
}
.bagpt-notif-trigger--unread .bagpt-notif-bell-icon {
color: rgba(252, 165, 165, 0.95);
stroke: currentColor;
}
.bagpt-notif-trigger:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.32);
}
.bagpt-notif-trigger.bagpt-notif-trigger--unread:focus-visible {
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.52);
}
#ai-chat-app.bagpt-theme-light .bagpt-notif-trigger {
border-color: rgba(15, 23, 42, 0.12);
background-color: rgba(15, 23, 42, 0.04);
color: rgba(15, 23, 42, 0.78);
}
#ai-chat-app.bagpt-theme-light .bagpt-notif-trigger:hover {
background-color: rgba(15, 23, 42, 0.08);
color: rgba(15, 23, 42, 0.92);
}
#ai-chat-app.bagpt-theme-light .bagpt-notif-bell-icon {
color: rgba(15, 23, 42, 0.78);
stroke: currentColor;
}
#ai-chat-app.bagpt-theme-light
.bagpt-notif-trigger:not(.bagpt-notif-trigger--unread)
.bagpt-notif-bell-icon {
color: rgba(15, 23, 42, 0.78) !important;
stroke: currentColor !important;
}
#ai-chat-app.bagpt-theme-light .bagpt-notif-trigger--unread .bagpt-notif-bell-icon {
color: rgba(185, 28, 28, 0.92);
stroke: currentColor;
}
#ai-chat-app.bagpt-theme-light .bagpt-notif-trigger:focus-visible {
box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.22);
}
#ai-chat-app.bagpt-theme-light .bagpt-notif-trigger.bagpt-notif-trigger--unread:focus-visible {
box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.45);
}
/* پنل اعلانها (#bagpt-notif-panel) — تم روشن */
body.bagpt-theme-light #bagpt-notif-panel,
#ai-chat-app.bagpt-theme-light #bagpt-notif-panel {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.12) !important;
box-shadow: 0 24px 56px rgba(15, 23, 42, 0.12) !important;
}
body.bagpt-theme-light #bagpt-notif-panel > div:first-child,
#ai-chat-app.bagpt-theme-light #bagpt-notif-panel > div:first-child {
border-color: rgba(15, 23, 42, 0.1) !important;
background: rgba(248, 250, 252, 0.98) !important;
}
body.bagpt-theme-light #bagpt-notif-panel-title,
#ai-chat-app.bagpt-theme-light #bagpt-notif-panel-title {
color: rgba(15, 23, 42, 0.95) !important;
}
body.bagpt-theme-light #bagpt-notif-mark-all,
#ai-chat-app.bagpt-theme-light #bagpt-notif-mark-all {
color: rgba(91, 33, 182, 0.92) !important;
}
body.bagpt-theme-light #bagpt-notif-mark-all:hover,
#ai-chat-app.bagpt-theme-light #bagpt-notif-mark-all:hover {
background: rgba(15, 23, 42, 0.06) !important;
color: rgba(76, 29, 149, 0.98) !important;
}
body.bagpt-theme-light #bagpt-notif-loading,
body.bagpt-theme-light #bagpt-notif-empty,
#ai-chat-app.bagpt-theme-light #bagpt-notif-loading,
#ai-chat-app.bagpt-theme-light #bagpt-notif-empty {
color: rgba(71, 85, 105, 0.82) !important;
}
body.bagpt-theme-light #bagpt-notif-backdrop,
#ai-chat-app.bagpt-theme-light #bagpt-notif-backdrop {
background-color: rgba(15, 23, 42, 0.32) !important;
}
body.bagpt-theme-light #bagpt-notif-list .bagpt-notif-item,
#ai-chat-app.bagpt-theme-light #bagpt-notif-list .bagpt-notif-item {
border-color: rgba(15, 23, 42, 0.1) !important;
background: #f8fafc !important;
}
body.bagpt-theme-light #bagpt-notif-list .bagpt-notif-item:hover,
#ai-chat-app.bagpt-theme-light #bagpt-notif-list .bagpt-notif-item:hover {
background: #f1f5f9 !important;
}
body.bagpt-theme-light #bagpt-notif-list .bagpt-notif-item .font-semibold,
body.bagpt-theme-light #bagpt-notif-list .bagpt-notif-item .text-white\/95,
#ai-chat-app.bagpt-theme-light #bagpt-notif-list .bagpt-notif-item .font-semibold,
#ai-chat-app.bagpt-theme-light #bagpt-notif-list .bagpt-notif-item .text-white\/95 {
color: rgba(15, 23, 42, 0.92) !important;
}
body.bagpt-theme-light #bagpt-notif-list .bagpt-notif-item a.font-semibold,
#ai-chat-app.bagpt-theme-light #bagpt-notif-list .bagpt-notif-item a.font-semibold {
color: rgba(15, 23, 42, 0.94) !important;
}
body.bagpt-theme-light #bagpt-notif-list .bagpt-notif-item a:hover,
#ai-chat-app.bagpt-theme-light #bagpt-notif-list .bagpt-notif-item a:hover {
color: rgba(91, 33, 182, 0.92) !important;
}
body.bagpt-theme-light #bagpt-notif-list .bagpt-notif-item .text-white\/55,
#ai-chat-app.bagpt-theme-light #bagpt-notif-list .bagpt-notif-item .text-white\/55 {
color: rgba(71, 85, 105, 0.86) !important;
}
body.bagpt-theme-light #bagpt-notif-list .text-red-300\/90,
#ai-chat-app.bagpt-theme-light #bagpt-notif-list .text-red-300\/90 {
color: rgba(185, 28, 28, 0.92) !important;
}
/* ——— تم روشن: زیرعنوان مدل، منوی ⋮، شیت «بیشتر»، مودالها، استودیو، FAB، اورلی ——— */
#ai-chat-app.bagpt-theme-light #ai-chat-header-model {
color: rgba(71, 85, 105, 0.78) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-menu-dropdown {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.12) !important;
box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-menu-dropdown .ai-chat-menu-item {
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-menu-dropdown .ai-chat-menu-item:hover,
#ai-chat-app.bagpt-theme-light #ai-chat-menu-dropdown .ai-chat-menu-item:focus-visible {
border-color: rgba(14, 165, 233, 0.35) !important;
background: rgba(14, 165, 233, 0.08) !important;
color: rgba(12, 74, 110, 0.98) !important;
}
@media (max-width: 767px) {
#ai-chat-app.bagpt-theme-light #ai-chat-menu-dropdown {
border: 1px solid rgba(15, 23, 42, 0.12) !important;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.99),
rgba(241, 245, 249, 0.97)
) !important;
box-shadow:
0 26px 60px rgba(15, 23, 42, 0.14),
0 0 0 1px rgba(15, 23, 42, 0.05) inset !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-menu-dropdown .ai-chat-menu-item {
background: rgba(15, 23, 42, 0.03) !important;
color: rgba(15, 23, 42, 0.92) !important;
border-color: transparent !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-menu-dropdown .ai-chat-menu-item:hover,
#ai-chat-app.bagpt-theme-light #ai-chat-menu-dropdown .ai-chat-menu-item:focus-visible {
border-color: rgba(14, 165, 233, 0.32) !important;
background: rgba(14, 165, 233, 0.09) !important;
color: rgba(12, 74, 110, 0.98) !important;
transform: translateY(-1px);
}
#ai-chat-app.bagpt-theme-light #ai-chat-menu-dropdown .ai-chat-menu-item[disabled] {
background: rgba(15, 23, 42, 0.04) !important;
border-color: rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-menu-dropdown #ai-chat-memory-count {
background: rgba(15, 23, 42, 0.08) !important;
color: rgba(51, 65, 85, 0.88) !important;
border-color: rgba(15, 23, 42, 0.12) !important;
}
}
#ai-chat-app.bagpt-theme-light #ai-chat-sidebar-overlay {
background-color: rgba(15, 23, 42, 0.38) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-scroll-down.bagpt-scroll-fab {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.12) !important;
color: rgba(51, 65, 85, 0.62) !important;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.1) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-scroll-down.bagpt-scroll-fab:hover {
background: #f1f5f9 !important;
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-scroll-down.bagpt-scroll-fab:focus-visible {
--tw-ring-color: rgba(14, 165, 233, 0.35);
}
#ai-chat-app.bagpt-theme-light #ai-chat-mobile-tools-btn {
color: rgba(51, 65, 85, 0.55) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-mobile-tools-btn:hover {
background: rgba(15, 23, 42, 0.06) !important;
color: rgba(15, 23, 42, 0.88) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-mobile-tools-sheet .bagpt-mobile-tools-backdrop {
background-color: rgba(15, 23, 42, 0.42) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-mobile-tools-sheet .bagpt-mobile-tools-panel {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.12) !important;
box-shadow: 0 -22px 70px rgba(15, 23, 42, 0.12) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-mobile-tools-sheet .bagpt-mobile-tools-drag-hint {
background: rgba(15, 23, 42, 0.18) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-mobile-tools-sheet .bagpt-mobile-tools-title {
color: rgba(15, 23, 42, 0.94) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-mobile-tools-sheet .bagpt-mobile-tool-row {
border-color: rgba(15, 23, 42, 0.08) !important;
background: rgba(248, 250, 252, 0.96) !important;
color: rgba(15, 23, 42, 0.92) !important;
}
#ai-chat-app.bagpt-theme-light
#ai-chat-mobile-tools-sheet
.bagpt-mobile-tool-row
> span:first-child:not([class*="bg-violet"]):not([class*="text-violet"]) {
background: rgba(15, 23, 42, 0.06) !important;
color: rgba(51, 65, 85, 0.72) !important;
}
#ai-chat-app.bagpt-theme-light #ai-chat-mobile-tools-sheet .bagpt-mobile-tool-runway > span:first-child {
background: rgba(139, 92, 246, 0.12) !important;
color: rgba(91, 33, 182, 0.92) !important;
}
#ai-chat-app.bagpt-theme-light
#ai-chat-mobile-tools-sheet.bagpt-mobile-tools-sheet--desktop-popover
.bagpt-mobile-tools-backdrop {
background-color: rgba(15, 23, 42, 0.28) !important;
}
#ai-chat-app.bagpt-theme-light
#ai-chat-mobile-tools-sheet.bagpt-mobile-tools-sheet--desktop-popover
.bagpt-mobile-tools-panel {
box-shadow: 0 22px 60px rgba(15, 23, 42, 0.14) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-share-modal .bagpt-share-shell,
#ai-chat-app.bagpt-theme-light #bagpt-access-modal .bagpt-access-shell {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.12) !important;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.14) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-share-modal .bagpt-share-backdrop,
#ai-chat-app.bagpt-theme-light #bagpt-access-modal .bagpt-access-backdrop {
background-color: rgba(15, 23, 42, 0.45) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-share-modal h2,
#ai-chat-app.bagpt-theme-light #bagpt-share-modal label,
#ai-chat-app.bagpt-theme-light #bagpt-access-modal h2,
#ai-chat-app.bagpt-theme-light #bagpt-access-modal #bagpt-access-message {
color: rgba(15, 23, 42, 0.92) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-share-modal [data-bagpt-share-close],
#ai-chat-app.bagpt-theme-light #bagpt-access-modal [data-bagpt-access-close] {
color: rgba(71, 85, 105, 0.55) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-share-modal [data-bagpt-share-close]:hover,
#ai-chat-app.bagpt-theme-light #bagpt-access-modal [data-bagpt-access-close]:hover {
background: rgba(15, 23, 42, 0.06) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-share-modal #bagpt-share-link {
background: #f8fafc !important;
border-color: rgba(15, 23, 42, 0.14) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-share-modal #bagpt-share-copy,
#ai-chat-app.bagpt-theme-light #bagpt-share-modal .bagpt-share-channel {
background: rgba(15, 23, 42, 0.04) !important;
border-color: rgba(15, 23, 42, 0.12) !important;
color: rgba(15, 23, 42, 0.85) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-share-modal .bagpt-share-channel:hover {
background: rgba(15, 23, 42, 0.08) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-access-modal #bagpt-access-login {
background: rgba(15, 23, 42, 0.05) !important;
border-color: rgba(15, 23, 42, 0.14) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-access-modal #bagpt-access-register {
border-color: rgba(16, 185, 129, 0.45) !important;
background: rgba(16, 185, 129, 0.1) !important;
color: rgba(6, 95, 70, 0.95) !important;
}
#ai-chat-app.bagpt-theme-light #bagpt-access-modal #bagpt-access-pricing {
border-color: rgba(139, 92, 246, 0.4) !important;
background: rgba(139, 92, 246, 0.08) !important;
color: rgba(76, 29, 149, 0.95) !important;
}
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-page {
background: rgba(248, 250, 252, 0.98) !important;
}
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-page .bagpt-ai-gallery-shell {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.12) !important;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.14) !important;
}
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-page header {
background: rgba(255, 255, 255, 0.95) !important;
border-color: rgba(15, 23, 42, 0.1) !important;
}
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-page header h1,
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-page #bagpt-ai-gallery-empty,
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-page #bagpt-ai-gallery-loading {
color: rgba(15, 23, 42, 0.88) !important;
}
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-page header a {
color: rgba(71, 85, 105, 0.75) !important;
}
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-page header a:hover {
background: rgba(15, 23, 42, 0.06) !important;
color: rgba(15, 23, 42, 0.9) !important;
}
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-page .bagpt-ai-gallery-card {
border-color: rgba(15, 23, 42, 0.1) !important;
background: rgba(15, 23, 42, 0.04) !important;
}
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-page #bagpt-ai-gallery-more {
background: rgba(15, 23, 42, 0.06) !important;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.1) !important;
color: rgba(15, 23, 42, 0.88) !important;
}
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-viewer {
background: #0f172a !important;
}
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-viewer .bagpt-ai-gallery-v-rail {
background: linear-gradient(to right, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)) !important;
}
@media (min-width: 768px) {
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-viewer .bagpt-ai-gallery-v-rail {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent) !important;
}
}
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-viewer .bagpt-ai-gallery-v-action,
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-v-back {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.1)) !important;
color: rgba(15, 23, 42, 0.92) !important;
box-shadow: 0 6px 22px rgba(15, 23, 42, 0.12) !important;
}
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-viewer .bagpt-ai-gallery-v-prompt-wrap {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.35),
0 14px 44px rgba(15, 23, 42, 0.12) !important;
}
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-v-prompt {
color: rgba(15, 23, 42, 0.9) !important;
}
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-v-prompt::placeholder {
color: rgba(15, 23, 42, 0.45) !important;
}
#bagpt-ai-gallery-v-fav.bagpt-ai-gallery-v-fav-on {
background: linear-gradient(to bottom, rgba(244, 63, 94, 0.38), rgba(190, 18, 60, 0.16)) !important;
color: rgb(254 205 211) !important;
box-shadow: 0 0 28px rgba(244, 63, 94, 0.38) !important;
}
body.bagpt-theme-light.bagpt-ai-gallery-body #bagpt-ai-gallery-v-fav.bagpt-ai-gallery-v-fav-on {
background: linear-gradient(to bottom, rgba(251, 113, 133, 0.45), rgba(244, 63, 94, 0.2)) !important;
color: rgba(136, 19, 55, 0.95) !important;
box-shadow: 0 0 26px rgba(244, 63, 94, 0.28) !important;
}
/*
* مودالهای بومی confirm / prompt / copy — خارج از #ai-chat-app؛ فقط body / html
*/
.bagpt-native-modal {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(2, 6, 15, 0.72) !important;
}
.bagpt-native-modal__panel {
position: relative;
isolation: isolate;
border-radius: 1.25rem;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.35rem 1.35rem;
background: linear-gradient(
165deg,
rgba(26, 28, 36, 0.98) 0%,
rgba(14, 16, 22, 0.99) 100%
);
box-shadow:
0 0 0 1px rgba(34, 211, 238, 0.06) inset,
0 24px 72px rgba(0, 0, 0, 0.58);
}
.bagpt-native-modal__panel::before {
content: "";
position: absolute;
left: 1.25rem;
right: 1.25rem;
top: 0;
height: 1px;
border-radius: 999px;
background: linear-gradient(
90deg,
transparent,
rgba(34, 211, 238, 0.35),
transparent
);
pointer-events: none;
}
.bagpt-native-modal__title {
color: rgba(255, 255, 255, 0.96);
letter-spacing: -0.01em;
}
.bagpt-native-modal__body {
color: rgba(226, 232, 240, 0.9);
}
.bagpt-native-modal__label {
color: rgba(148, 163, 184, 0.95);
}
.bagpt-native-modal__input {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.35);
color: rgba(248, 250, 252, 0.95);
transition:
border-color 0.18s ease,
box-shadow 0.18s ease;
}
.bagpt-native-modal__input--mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.bagpt-native-modal__input:focus {
border-color: rgba(34, 211, 238, 0.45);
outline: none;
box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}
.bagpt-native-modal__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.5rem;
padding: 0.5rem 1.15rem;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.25;
border-radius: 0.75rem;
transition:
background 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease,
filter 0.15s ease,
transform 0.12s ease;
}
.bagpt-native-modal__btn:active {
transform: scale(0.98);
}
.bagpt-native-modal__btn--ghost {
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.06);
color: rgba(248, 250, 252, 0.92);
box-shadow: none;
}
.bagpt-native-modal__btn--ghost:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.bagpt-native-modal__btn--secondary {
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.08);
color: rgba(248, 250, 252, 0.92);
}
.bagpt-native-modal__btn--secondary:hover {
background: rgba(255, 255, 255, 0.13);
}
.bagpt-native-modal__btn--accent {
border: none;
color: #ffffff;
background: linear-gradient(180deg, #0891b2 0%, #0e7490 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.12) inset,
0 10px 28px rgba(8, 145, 178, 0.38);
}
.bagpt-native-modal__btn--accent:hover {
filter: brightness(1.07);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.14) inset,
0 12px 32px rgba(8, 145, 178, 0.45);
}
.bagpt-native-modal__btn--danger {
border: none;
color: #ffffff;
background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.1) inset,
0 10px 28px rgba(220, 38, 38, 0.4);
}
.bagpt-native-modal__btn--danger:hover {
filter: brightness(1.06);
}
/* تم روشن — مودالهای بومی (فرزند #ai-chat-root، نه #ai-chat-app) */
body.bagpt-theme-light .bagpt-native-modal {
background-color: rgba(15, 23, 42, 0.48) !important;
}
body.bagpt-theme-light .bagpt-native-modal__panel {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.12) !important;
box-shadow:
0 0 0 1px rgba(6, 182, 212, 0.08) inset,
0 24px 64px rgba(15, 23, 42, 0.14) !important;
}
body.bagpt-theme-light .bagpt-native-modal__panel::before {
background: linear-gradient(
90deg,
transparent,
rgba(6, 182, 212, 0.45),
transparent
);
}
body.bagpt-theme-light .bagpt-native-modal__title {
color: rgba(15, 23, 42, 0.94) !important;
}
body.bagpt-theme-light .bagpt-native-modal__body {
color: rgba(51, 65, 85, 0.92) !important;
}
body.bagpt-theme-light .bagpt-native-modal__label {
color: rgba(71, 85, 105, 0.9) !important;
}
body.bagpt-theme-light .bagpt-native-modal__input {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.14) !important;
color: rgba(15, 23, 42, 0.92) !important;
}
body.bagpt-theme-light .bagpt-native-modal__input:focus {
border-color: rgba(6, 182, 212, 0.5) !important;
box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.14) !important;
}
body.bagpt-theme-light .bagpt-native-modal__btn--ghost {
border-color: rgba(15, 23, 42, 0.14) !important;
background: rgba(15, 23, 42, 0.04) !important;
color: rgba(15, 23, 42, 0.88) !important;
}
body.bagpt-theme-light .bagpt-native-modal__btn--ghost:hover {
background: rgba(15, 23, 42, 0.08) !important;
}
body.bagpt-theme-light .bagpt-native-modal__btn--secondary {
border-color: rgba(15, 23, 42, 0.14) !important;
background: rgba(15, 23, 42, 0.05) !important;
color: rgba(15, 23, 42, 0.88) !important;
}
body.bagpt-theme-light .bagpt-native-modal__btn--secondary:hover {
background: rgba(15, 23, 42, 0.09) !important;
}
body.bagpt-theme-light .bagpt-native-modal__btn--accent,
body.bagpt-theme-light .bagpt-native-modal__btn--danger {
color: #ffffff !important;
}
html.bagpt-preload-light .bagpt-native-modal {
background-color: rgba(15, 23, 42, 0.48) !important;
}
html.bagpt-preload-light .bagpt-native-modal__panel {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.12) !important;
box-shadow:
0 0 0 1px rgba(6, 182, 212, 0.08) inset,
0 24px 64px rgba(15, 23, 42, 0.14) !important;
}
html.bagpt-preload-light .bagpt-native-modal__panel::before {
background: linear-gradient(
90deg,
transparent,
rgba(6, 182, 212, 0.45),
transparent
);
}
html.bagpt-preload-light .bagpt-native-modal__title {
color: rgba(15, 23, 42, 0.94) !important;
}
html.bagpt-preload-light .bagpt-native-modal__body {
color: rgba(51, 65, 85, 0.92) !important;
}
html.bagpt-preload-light .bagpt-native-modal__label {
color: rgba(71, 85, 105, 0.9) !important;
}
html.bagpt-preload-light .bagpt-native-modal__input {
background: #ffffff !important;
border-color: rgba(15, 23, 42, 0.14) !important;
color: rgba(15, 23, 42, 0.92) !important;
}
html.bagpt-preload-light .bagpt-native-modal__btn--ghost {
border-color: rgba(15, 23, 42, 0.14) !important;
background: rgba(15, 23, 42, 0.04) !important;
color: rgba(15, 23, 42, 0.88) !important;
}
html.bagpt-preload-light .bagpt-native-modal__btn--secondary {
border-color: rgba(15, 23, 42, 0.14) !important;
background: rgba(15, 23, 42, 0.05) !important;
color: rgba(15, 23, 42, 0.88) !important;
}
html.bagpt-preload-light .bagpt-native-modal__btn--accent,
html.bagpt-preload-light .bagpt-native-modal__btn--danger {
color: #ffffff !important;
}
/* AI Studio تمامصفحه — ستون فرم: اسکرول داخل کارت (بدون پوشاندن border) */
#bagpt-ai-studio-page .bagpt-ai-studio-scroll {
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
}
#bagpt-ai-studio-page .bagpt-ai-studio-scroll::-webkit-scrollbar {
width: 7px;
}
#bagpt-ai-studio-page .bagpt-ai-studio-scroll::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.22);
border-radius: 999px;
}
/* AI Studio تمامصفحه — کروم: حالت فعال یکدست و خنثی (عکس / ویدئو / صوت) */
#bagpt-ai-studio-page #bagpt-studio-model-stage {
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.22) transparent;
}
#bagpt-ai-studio-page #bagpt-studio-model-stage::-webkit-scrollbar {
height: 5px;
}
#bagpt-ai-studio-page #bagpt-studio-model-stage::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.2);
border-radius: 999px;
}
#bagpt-ai-studio-page [data-bagpt-media].is-active {
background: rgba(255, 255, 255, 0.09);
color: rgba(255, 255, 255, 0.94);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
#bagpt-ai-studio-page #bagpt-studio-task-type .bagpt-studio-seg.is-active {
background: rgba(255, 255, 255, 0.09);
color: rgba(255, 255, 255, 0.94);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
#bagpt-ai-studio-page .bagpt-studio-model-chip.is-active {
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.95);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
/* AI Studio تمامصفحه — فونت ۱۶px برای کروم پلیگراند، فرم پنلها و ستون خروجی */
#bagpt-ai-studio-page #bagpt-studio-playground-chrome,
#bagpt-ai-studio-page #bagpt-studio-playground-chrome button,
#bagpt-ai-studio-page #bagpt-studio-playground-chrome span,
#bagpt-ai-studio-page #bagpt-studio-playground-chrome p,
#bagpt-ai-studio-page #bagpt-studio-playground-chrome .bagpt-studio-model-chip {
font-size: 16px !important;
line-height: 1.45;
}
#bagpt-ai-studio-page .bagpt-studio-body-inner label,
#bagpt-ai-studio-page .bagpt-studio-body-inner span,
#bagpt-ai-studio-page .bagpt-studio-body-inner summary,
#bagpt-ai-studio-page .bagpt-studio-body-inner p,
#bagpt-ai-studio-page .bagpt-studio-body-inner textarea,
#bagpt-ai-studio-page .bagpt-studio-body-inner input[type="text"],
#bagpt-ai-studio-page .bagpt-studio-body-inner input[type="number"],
#bagpt-ai-studio-page .bagpt-studio-body-inner select,
#bagpt-ai-studio-page .bagpt-studio-body-inner button,
#bagpt-ai-studio-page .bagpt-studio-body-inner .bagpt-studio-control,
#bagpt-ai-studio-page .bagpt-studio-body-inner .bagpt-studio-custom-select__btn,
#bagpt-ai-studio-page .bagpt-studio-body-inner .bagpt-studio-custom-select__label,
#bagpt-ai-studio-page .bagpt-studio-body-inner .bagpt-studio-custom-select__option,
#bagpt-ai-studio-page .bagpt-studio-body-inner .bagpt-studio-custom-select__group-label {
font-size: 16px !important;
line-height: 1.5;
}
#bagpt-ai-studio-page aside[aria-label] #bagpt-studio-credit-badge,
#bagpt-ai-studio-page aside[aria-label] #bagpt-studio-output-mount,
#bagpt-ai-studio-page aside[aria-label] #bagpt-studio-preview-loading,
#bagpt-ai-studio-page aside[aria-label] .bagpt-studio-preview-loading__label,
#bagpt-ai-studio-page aside[aria-label] #bagpt-studio-preview-empty p {
font-size: 16px !important;
line-height: 1.5;
}
#bagpt-ai-studio-page #bagpt-studio-close {
font-size: 16px !important;
}
/* استودیو تمامصفحه — ۱:۱ پیشنمایش/تصویر؛ ویدیو جدا: ۱۶:۹ + contain */
#bagpt-ai-studio-page .bagpt-studio-preview-stage,
#bagpt-ai-studio-page #bagpt-studio-output-mount .bagpt-runway-media-wrap--fit {
position: relative;
width: 100%;
max-width: min(100%, 560px);
margin-inline: auto;
aspect-ratio: 1 / 1;
max-height: min(72vh, 560px);
border-radius: 1rem;
overflow: hidden;
background: rgba(10, 10, 16, 0.85);
box-shadow:
0 24px 80px -40px rgba(0, 0, 0, 0.85),
inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
#bagpt-ai-studio-page #bagpt-studio-output-mount .bagpt-runway-media-wrap--video,
#bagpt-ai-studio-page #bagpt-studio-output-mount .bagpt-runway-media-wrap:has(video) {
position: relative;
width: 100%;
max-width: min(100%, 1000px);
margin-inline: auto;
aspect-ratio: 16 / 9;
max-height: min(64vh, 100vw, 800px);
min-height: 0;
border-radius: 1rem;
overflow: hidden;
background: #05050a;
box-shadow:
0 24px 80px -40px rgba(0, 0, 0, 0.85),
inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
#bagpt-ai-studio-page .bagpt-studio-preview-stage__media,
#bagpt-ai-studio-page #bagpt-studio-output-mount .bagpt-runway-media-wrap--fit .bagpt-runway-media {
display: block;
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover;
object-position: center;
border-radius: 0;
}
/* پیشنمایش پیشفرض: پر کردن کامل mount مثل خروجی نهایی (cover) */
#bagpt-ai-studio-page #bagpt-studio-default-preview:not(.hidden) {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 0;
}
#bagpt-ai-studio-page #bagpt-studio-default-preview.hidden {
display: none !important;
}
/* باکس خطا باید بالاتر از خروجی/تصویر پیشفرض باشد (z خروجی = 0؛ z لودینگ = 20) */
#bagpt-ai-studio-page #bagpt-studio-tab-preview {
isolation: isolate;
}
#bagpt-ai-studio-page #bagpt-studio-preview-run-error {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 18;
max-width: 100%;
box-sizing: border-box;
padding: 0.65rem 0.75rem 0.85rem;
padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
}
#bagpt-ai-studio-page
.bagpt-studio-preview-run-error--studio
.bagpt-studio-preview-run-error__inner {
position: relative;
margin-inline: auto;
max-width: 32rem;
width: 100%;
border-radius: 1.1rem;
padding: 0.85rem 0.95rem 0.95rem;
text-align: start;
background: linear-gradient(
155deg,
rgba(30, 18, 28, 0.88) 0%,
rgba(12, 8, 18, 0.95) 48%,
rgba(8, 6, 14, 0.98) 100%
);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 0 0 1px rgba(244, 63, 94, 0.12),
0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
0 28px 64px -28px rgba(0, 0, 0, 0.65),
0 -1px 40px -8px rgba(192, 38, 80, 0.18);
backdrop-filter: blur(20px) saturate(1.15);
-webkit-backdrop-filter: blur(20px) saturate(1.15);
overflow: hidden;
}
#bagpt-ai-studio-page
.bagpt-studio-preview-run-error--studio
.bagpt-studio-preview-run-error__inner::before {
content: "";
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(251, 113, 133, 0.5) 45%,
rgba(196, 181, 253, 0.35) 100%
);
border-radius: 1px;
pointer-events: none;
}
#bagpt-ai-studio-page
.bagpt-studio-preview-run-error--studio
.bagpt-studio-preview-run-error__shine {
position: absolute;
inset: 0;
background: radial-gradient(
120% 80% at 15% 0%,
rgba(244, 63, 94, 0.2) 0%,
transparent 55%
);
pointer-events: none;
}
#bagpt-ai-studio-page
.bagpt-studio-preview-run-error--studio
.bagpt-studio-preview-run-error__row {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
gap: 0.75rem;
direction: rtl;
}
#bagpt-ai-studio-page
.bagpt-studio-preview-run-error--studio
.bagpt-studio-preview-run-error__icon-wrap {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.85rem;
background: linear-gradient(
150deg,
rgba(190, 24, 93, 0.35) 0%,
rgba(30, 27, 50, 0.85) 100%
);
color: #fecdd3;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.08) inset,
0 10px 28px -12px rgba(190, 24, 93, 0.55);
}
#bagpt-ai-studio-page
.bagpt-studio-preview-run-error--studio
.bagpt-studio-preview-run-error__icon {
opacity: 0.95;
}
#bagpt-ai-studio-page
.bagpt-studio-preview-run-error--studio
.bagpt-studio-preview-run-error__body {
min-width: 0;
flex: 1 1 auto;
}
#bagpt-ai-studio-page
.bagpt-studio-preview-run-error--studio
.bagpt-studio-preview-run-error__kicker {
margin: 0 0 0.2rem 0;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
line-height: 1.2;
text-transform: none;
color: rgba(253, 186, 200, 0.7);
font-feature-settings: "tnum" on;
}
#bagpt-ai-studio-page
.bagpt-studio-preview-run-error--studio
.bagpt-studio-preview-run-error__text {
margin: 0;
font-size: 0.9rem;
line-height: 1.6;
font-weight: 500;
color: rgba(255, 241, 244, 0.96);
text-wrap: balance;
}
#bagpt-ai-studio-page
.bagpt-studio-preview-run-error--studio:not(.hidden) {
filter: drop-shadow(0 -6px 28px rgba(0, 0, 0, 0.4));
}
#bagpt-ai-studio-page
#bagpt-studio-tab-preview:has(#bagpt-studio-preview-run-error:not(.hidden))
#bagpt-studio-output-mount {
padding-bottom: clamp(4.5rem, 14vh, 6.5rem);
}
#bagpt-ai-studio-page .bagpt-studio-default-preview-row {
width: 100%;
height: 100%;
min-height: 0;
align-items: center;
justify-content: center;
}
#bagpt-ai-studio-page .bagpt-studio-preview-stage.bagpt-studio-preview-stage--default {
width: 100%;
max-width: min(100%, 560px);
height: auto;
max-height: none;
aspect-ratio: auto;
margin-inline: auto;
border-radius: 0.95rem;
overflow: visible;
}
#bagpt-ai-studio-page .bagpt-studio-preview-stage--default .bagpt-studio-preview-stage__media--default {
position: relative !important;
inset: auto !important;
display: block;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
max-height: min(72vh, 560px) !important;
object-fit: contain;
object-position: center;
background: transparent;
border-radius: 0.95rem;
}
/* Studio output result images: natural height, no cropping */
#bagpt-ai-studio-page #bagpt-studio-output-mount .bagpt-runway-media-wrap--fit {
aspect-ratio: auto;
height: auto;
max-height: none;
}
#bagpt-ai-studio-page #bagpt-studio-output-mount .bagpt-runway-media-wrap--fit .bagpt-runway-media {
position: relative !important;
inset: auto !important;
display: block;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
max-height: min(72vh, 560px) !important;
object-fit: contain !important;
background: transparent;
}
#bagpt-ai-studio-page #bagpt-studio-output-mount .bagpt-runway-media-wrap--video video.bagpt-runway-media,
#bagpt-ai-studio-page #bagpt-studio-output-mount .bagpt-runway-media-wrap:has(video) video.bagpt-runway-media {
display: block;
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain;
object-position: center;
border-radius: 0;
background: #000;
}
#bagpt-ai-studio-page
#bagpt-studio-output-mount
.bagpt-runway-media-wrap--video:has(.bagpt-studio-video-player)
.bagpt-ai-media-download,
#bagpt-ai-studio-page #bagpt-studio-output-mount .bagpt-runway-media-wrap--fit .bagpt-ai-media-download,
#bagpt-ai-studio-page #bagpt-studio-output-mount .bagpt-runway-media-wrap:has(video) .bagpt-ai-media-download {
position: absolute;
bottom: 0.65rem;
inset-inline-start: 0.65rem;
z-index: 2;
}
#bagpt-ai-studio-page
#bagpt-studio-output-mount
.bagpt-runway-media-wrap--video
.bagpt-studio-video-player {
position: absolute;
inset: 0;
z-index: 0;
min-height: 0;
background: #000;
overflow: hidden;
}
#bagpt-ai-studio-page
#bagpt-studio-output-mount
.bagpt-studio-video-player
.bagpt-studio-video-elem {
z-index: 0;
pointer-events: auto;
}
#bagpt-ai-studio-page
#bagpt-studio-output-mount
.bagpt-studio-video-player
.bagpt-studio-video-elem--error {
display: none;
}
#bagpt-ai-studio-page
#bagpt-studio-output-mount
.bagpt-studio-video-player
.bagpt-studio-video-player__error {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
max-width: 100%;
margin: 0;
box-sizing: border-box;
padding: 0.5rem 0.75rem 0.55rem;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.92) 30%);
color: #fecdd3;
font-size: 12px;
line-height: 1.5;
text-align: center;
}
#bagpt-ai-studio-page
#bagpt-studio-output-mount
.bagpt-studio-video-player[data-bagpt-failed="1"]
.bagpt-studio-video-player__error {
top: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0.9rem 0.75rem;
background: rgba(10, 10, 16, 0.96);
}
#bagpt-ai-studio-page
#bagpt-studio-output-mount
.bagpt-studio-video-player
.bagpt-studio-video-player__error
a {
color: #7dd3fc;
text-decoration: underline;
text-underline-offset: 0.1em;
}
#bagpt-ai-studio-page
#bagpt-studio-output-mount
.bagpt-studio-video-player
.bagpt-studio-video-player__error
a:hover {
color: #bae6fd;
}
#bagpt-ai-studio-page
#bagpt-studio-output-mount
.bagpt-studio-video-player
p.bagpt-studio-video-player__error-line {
margin: 0;
}
#bagpt-ai-studio-page
#bagpt-studio-output-mount
.bagpt-studio-video-player[data-bagpt-ready="1"] {
box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.15);
border-radius: 0.35rem;
}
#bagpt-ai-studio-page #bagpt-studio-output-mount .bagpt-runway-media-wrap--audio,
#bagpt-ai-studio-page #bagpt-studio-output-mount .bagpt-runway-media-wrap:has(audio) {
aspect-ratio: auto;
max-height: none;
min-height: 4.5rem;
padding: 0.5rem 0.75rem;
display: flex;
align-items: center;
justify-content: center;
}
#bagpt-ai-studio-page #bagpt-studio-output-mount .bagpt-runway-media-wrap--audio audio,
#bagpt-ai-studio-page #bagpt-studio-output-mount .bagpt-runway-media-wrap:has(audio) audio {
width: 100%;
}
/* AI Studio full-page — mobile flow hardening (prevent overlap between build/preview cards) */
@media (max-width: 767.98px) {
#bagpt-ai-studio-page #bagpt-studio-root > .relative.flex.min-h-0.flex-1.flex-col {
min-height: auto;
flex: 1 1 auto;
}
#bagpt-ai-studio-page #bagpt-studio-root .relative.isolate.z-0.grid {
min-height: auto;
flex: 0 0 auto;
grid-auto-rows: max-content;
align-content: start;
padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
#bagpt-ai-studio-page .bagpt-ai-studio-scroll {
min-height: auto;
max-height: none;
overflow-y: visible;
}
#bagpt-ai-studio-page aside[aria-label] {
min-height: 0;
flex: 1 1 auto;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
#bagpt-ai-studio-page #bagpt-studio-tab-preview {
min-height: min(50vh, 24rem);
height: auto;
flex: 1 1 auto;
}
#bagpt-ai-studio-page #bagpt-studio-output-mount {
min-height: 12rem;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#bagpt-ai-studio-page .bagpt-studio-preview-stage {
max-height: min(62vh, 430px);
}
#bagpt-ai-studio-page #bagpt-studio-output-mount .bagpt-runway-media-wrap--fit .bagpt-runway-media {
max-height: min(62vh, 430px) !important;
}
#bagpt-ai-studio-page #bagpt-studio-output-mount .bagpt-runway-media-wrap--video,
#bagpt-ai-studio-page #bagpt-studio-output-mount .bagpt-runway-media-wrap:has(video) {
max-height: min(50vh, 100vw, 400px);
}
}
#bagpt-ai-studio-page #bagpt-studio-output-mount.is-studio-preview-loading > * {
filter: blur(11px);
transition: filter 0.28s ease;
}
#bagpt-ai-studio-page #bagpt-studio-preview-loading:not(.hidden) {
pointer-events: auto;
background: radial-gradient(
ellipse 85% 70% at 50% 45%,
rgba(15, 23, 42, 0.55) 0%,
rgba(0, 0, 0, 0.5) 55%,
rgba(0, 0, 0, 0.62) 100%
);
backdrop-filter: blur(16px) saturate(1.12);
-webkit-backdrop-filter: blur(16px) saturate(1.12);
}
#bagpt-ai-studio-page #bagpt-studio-preview-loading:not(.hidden) .bagpt-studio-preview-loading__pulse {
position: absolute;
inset: 8%;
border-radius: 1.35rem;
background: radial-gradient(
circle at 30% 30%,
rgba(167, 139, 250, 0.35) 0%,
transparent 55%
),
radial-gradient(
circle at 70% 65%,
rgba(244, 114, 182, 0.28) 0%,
transparent 50%
);
animation: bagpt-studio-preview-pulse-glow 2.4s ease-in-out infinite;
pointer-events: none;
}
#bagpt-ai-studio-page #bagpt-studio-preview-loading:not(.hidden) .bagpt-studio-preview-loading__halo {
position: absolute;
inset: 6%;
border-radius: 1.4rem;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.12),
0 0 48px -8px rgba(99, 102, 241, 0.45),
inset 0 0 32px rgba(99, 102, 241, 0.08);
animation: bagpt-studio-preview-halo-breathe 2s ease-in-out infinite;
pointer-events: none;
}
#bagpt-ai-studio-page .bagpt-studio-preview-loading__core {
position: relative;
z-index: 1;
width: 5.5rem;
height: 5.5rem;
}
#bagpt-ai-studio-page .bagpt-studio-preview-loading__orbit {
position: absolute;
left: 50%;
top: 50%;
width: 5rem;
height: 5rem;
margin: -2.5rem 0 0 -2.5rem;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: rgba(147, 197, 253, 0.55);
border-right-color: rgba(167, 139, 250, 0.35);
animation: bagpt-studio-preview-spin 1.35s linear infinite;
opacity: 0.95;
}
#bagpt-ai-studio-page .bagpt-studio-preview-loading__spinner {
position: absolute;
left: 50%;
top: 50%;
box-sizing: border-box;
width: 2.35rem;
height: 2.35rem;
margin: -1.175rem 0 0 -1.175rem;
border: 3px solid rgba(255, 255, 255, 0.12);
border-top-color: rgba(196, 181, 253, 0.98);
border-radius: 50%;
animation: bagpt-studio-preview-spin-reverse 0.65s linear infinite;
}
#bagpt-ai-studio-page .bagpt-studio-preview-loading__label {
position: relative;
z-index: 1;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.75);
letter-spacing: 0.02em;
animation: bagpt-studio-preview-label-fade 1.8s ease-in-out infinite;
}
@keyframes bagpt-studio-preview-pulse-glow {
0%,
100% {
opacity: 0.45;
transform: scale(0.96);
}
50% {
opacity: 0.95;
transform: scale(1.03);
}
}
@keyframes bagpt-studio-preview-halo-breathe {
0%,
100% {
opacity: 0.55;
}
50% {
opacity: 1;
}
}
@keyframes bagpt-studio-preview-spin {
to {
transform: rotate(360deg);
}
}
@keyframes bagpt-studio-preview-spin-reverse {
to {
transform: rotate(-360deg);
}
}
@keyframes bagpt-studio-preview-label-fade {
0%,
100% {
opacity: 0.82;
}
50% {
opacity: 1;
}
}
/*
* استودیو — چیدمان: چند کلاس Tailwind (space-y-6، p-6، md:p-8، md:gap-6) در app.css بیلد نشدهاند؛
* padding و فاصلهٔ عمودی را اینجا ثابت میکنیم تا متن→تصویر و عکس→تصویر روی هم نروند.
*/
#bagpt-studio-root .bagpt-studio-body-inner {
box-sizing: border-box;
}
#bagpt-studio-root .bagpt-runway-panel.bagpt-studio-panel:not(.hidden) {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: 1.5rem;
box-sizing: border-box;
}
@media (min-width: 768px) {
#bagpt-studio-root .bagpt-runway-panel.bagpt-studio-panel:not(.hidden) {
gap: 1.5rem;
padding: 2rem;
}
}
#bagpt-studio-root .bagpt-studio-i2i-fields {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
@media (min-width: 768px) {
#bagpt-studio-root .bagpt-studio-i2i-fields {
flex-direction: row;
align-items: flex-start;
gap: 1.75rem;
}
}
/*
* استودیو — کنترلهای فرم: رنگ را اینجا ثابت میکنیم چون کلاسهای arbitrary مثل bg-white/[0.07]
* اگر در خروجی Tailwind نباشند، select/textarea پسزمینهٔ سفید سیستم میگیرند و با text-white نامرئی میشوند.
*/
#bagpt-studio-root .bagpt-studio-control {
-webkit-appearance: none;
appearance: none;
border: 0 !important;
box-shadow: none !important;
background-color: rgba(255, 255, 255, 0.1) !important;
color: rgba(250, 250, 250, 0.98) !important;
caret-color: #fafafa;
}
#bagpt-studio-root .bagpt-studio-control::placeholder {
color: rgba(255, 255, 255, 0.38) !important;
}
#bagpt-studio-root .bagpt-studio-control:focus {
background-color: rgba(255, 255, 255, 0.14) !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.35) !important;
}
#bagpt-studio-root select.bagpt-studio-control {
min-width: 0;
max-width: 100%;
padding-inline-end: 2.35rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='rgba(255,255,255,0.55)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1rem;
/* چت rtl است؛ فلش کنار لبهٔ شروع کنترل */
background-position: 0.65rem 50%;
}
#bagpt-studio-root select.bagpt-studio-control option,
#bagpt-studio-root select.bagpt-studio-control optgroup {
background-color: #18181b;
color: #fafafa;
}
/* منوی سفارشی بهجای