/* ChatGPT-like light/dark palette */

.page-app {
  --composer-max-width: 840px;
  --composer-max-width-chat: 1280px;
  --composer-area-max-width: 960px;
  --cgpt-bg: #ffffff;
  --cgpt-sidebar: #f9f9f9;
  --cgpt-hover: #ececec;
  --cgpt-text: #0d0d0d;
  --cgpt-muted: #676767;
  --cgpt-border: #e5e5e5;
  --cgpt-surface: #ffffff;
  --cgpt-user-bubble: #f4f4f4;
  --cgpt-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  --cgpt-radius-pill: 12px;
  --cgpt-radius-lg: 12px;
}

.page-app.theme-dark {
  --cgpt-bg: #212121;
  --cgpt-sidebar: #171717;
  --cgpt-hover: #2f2f2f;
  --cgpt-text: #ececec;
  --cgpt-muted: #b4b4b4;
  --cgpt-border: #424242;
  --cgpt-surface: #303030;
  --cgpt-user-bubble: #303030;
  --cgpt-shadow: 0 2px 16px rgba(0, 0, 0, 0.28);
}

.page-app,
.page-app.theme-light {
  background: var(--cgpt-bg) !important;
  color: var(--cgpt-text) !important;
}

.page-app .app-ambient-a,
.page-app .app-ambient-b {
  display: none !important;
}

.page-app .empty-state {
  display: none !important;
}

.page-app .chat-prompt-heading {
  display: none;
  width: 100%;
  text-align: center;
}

.page-app .main-panel.is-empty .chat-prompt-heading {
  display: block !important;
}

.page-app .chat-prompt-title {
  margin: 0 !important;
  color: var(--cgpt-text) !important;
  font-size: clamp(18px, 2.5vw, 26px) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

.page-app .main-panel.is-empty .chat-stage {
  justify-content: center !important;
  align-items: center !important;
}

.page-app .main-panel.is-empty .messages-panel {
  display: none !important;
}

.page-app .main-panel.is-empty .chat-compose-area {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: var(--composer-area-max-width) !important;
  margin: 0 auto !important;
  padding: 0 24px 32px !important;
}

.page-app .main-panel:not(.is-empty) .composer-inner {
  max-width: var(--composer-max-width-chat) !important;
}

.page-app .composer-inner {
  max-width: var(--composer-max-width-chat) !important;
}

.page-app .composer-input {
  min-height: 44px !important;
  line-height: 22px !important;
  padding-block: 11px !important;
  box-sizing: border-box !important;
}

.page-app .main-panel.is-empty .composer-wrap {
  position: static !important;
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-app .main-panel.is-empty .composer-inner {
  max-width: var(--composer-max-width) !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.page-app .app-shell {
  padding: 0 !important;
}

.page-app .app-frame {
  min-height: 100vh !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--cgpt-bg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.page-app .app-layout,
.page-app .main-panel,
.page-app .chat-stage,
.page-app .messages-panel,
.page-app .composer-wrap {
  background: var(--cgpt-bg) !important;
  color: var(--cgpt-text) !important;
  box-shadow: none !important;
}

.page-app .sidebar,
.page-app .sidebar-footer {
  background: var(--cgpt-sidebar) !important;
  color: var(--cgpt-text) !important;
  border-color: var(--cgpt-border) !important;
  box-shadow: none !important;
}

.page-app .sidebar {
  border-left: 1px solid var(--cgpt-border) !important;
}

.page-app .sidebar-footer {
  border-top: 1px solid var(--cgpt-border) !important;
  margin-top: 0 !important;
}

.page-app .topbar {
  background: var(--cgpt-bg) !important;
  color: var(--cgpt-text) !important;
  border-color: var(--cgpt-border) !important;
  box-shadow: none !important;
}

.page-app .dialog-plans--upgrade,
.page-app .dialog-plans--upgrade .plan-upgrade-card,
.page-app .dialog-plans--upgrade .plans-upgrade-segment {
  background: #000000 !important;
  color: #f5f5f5 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

.page-app .dialog-plans--upgrade .plan-upgrade-card {
  background: #1a1a1a !important;
}

.page-app .dialog-plans--upgrade .plans-upgrade-segment {
  background: #1a1a1a !important;
}

.page-app .empty-state-inner,
.page-app .dialog:not(.dialog-plans--upgrade),
.page-app .settings-card,
.page-app .plan-card,
.page-app .toast,
.page-app .guest-access-card,
.page-app .suggestion-card {
  background: var(--cgpt-surface) !important;
  color: var(--cgpt-text) !important;
  border: 1px solid var(--cgpt-border) !important;
  box-shadow: var(--cgpt-shadow) !important;
}

.page-app .sidebar-brand-text,
.page-app .brand-title,
.page-app .sidebar-user,
.page-app .conversation-item-title,
.page-app .composer-shell-title,
.page-app .settings-card-title,
.page-app .dialog-title,
.page-app .empty-state-title,
.page-app .message-body,
.page-app .tibra-msg,
.page-app .tibra-prose,
.page-app .sidebar-plan-progress-percent,
.page-app .sidebar-plan-usage-value {
  color: var(--cgpt-text) !important;
}

.page-app .tibra-prose .md-table th,
.page-app .tibra-prose .md-table td {
  border-color: var(--cgpt-border) !important;
  color: var(--cgpt-text) !important;
}

.page-app .tibra-prose .md-table th {
  background: var(--cgpt-sidebar) !important;
}

.page-app .sidebar-brand-subtitle,
.page-app .brand-subtitle,
.page-app .brand-eyebrow,
.page-app .conversation-item-meta,
.page-app .message-meta,
.page-app .empty-state-text,
.page-app .dialog-note,
.page-app .field-label,
.page-app .composer-hint,
.page-app .sidebar-section-title,
.page-app .sidebar-user-email,
.page-app .sidebar-user-plan-label,
.page-app .sidebar-plan-progress-label,
.page-app .sidebar-plan-usage-label,
.page-app .sidebar-footer-copy {
  color: var(--cgpt-muted) !important;
}

.page-app .input::placeholder,
.page-app .composer-input::placeholder {
  color: var(--cgpt-muted) !important;
}

.page-app .sidebar-search,
.page-app .input,
.page-app .input-select,
.page-app .topbar-user-chip,
.page-app .sidebar-shortcut,
.page-app .prompt-chip,
.page-app .dialog-close {
  background: var(--cgpt-surface) !important;
  border: 1px solid var(--cgpt-border) !important;
  color: var(--cgpt-text) !important;
  box-shadow: none !important;
}

.page-app .composer,
.page-app .composer-inner {
  background: var(--cgpt-surface) !important;
  border: 1px solid var(--cgpt-border) !important;
  border-radius: var(--cgpt-radius-lg) !important;
  box-shadow: var(--cgpt-shadow) !important;
  color: var(--cgpt-text) !important;
}

.page-app .composer-tool-btn {
  background: var(--cgpt-surface) !important;
  border: 1px solid var(--cgpt-border) !important;
  color: var(--cgpt-text) !important;
  box-shadow: none !important;
}

.page-app .composer-tool-btn:hover {
  background: var(--cgpt-hover) !important;
  border-color: var(--cgpt-border) !important;
  color: var(--cgpt-text) !important;
}

.page-app .composer-tool-btn.is-active {
  background: var(--cgpt-hover) !important;
  border-color: var(--cgpt-text) !important;
  color: var(--cgpt-text) !important;
}

.page-app.theme-dark .composer-tool-btn.is-active {
  background: var(--cgpt-hover) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
  color: var(--cgpt-text) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

.page-app .composer-input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--cgpt-text) !important;
}

.page-app .conversation-item {
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--cgpt-radius-pill) !important;
  box-shadow: none !important;
  color: var(--cgpt-text) !important;
}

.page-app .conversation-item:hover,
.page-app .conversation-item.is-active {
  background: var(--cgpt-hover) !important;
}

.page-app .conversation-item-title {
  color: var(--cgpt-text) !important;
}

.page-app .conversation-item-meta {
  color: var(--cgpt-muted) !important;
}

.page-app .conversation-folder-title {
  color: var(--cgpt-text) !important;
}

.page-app .conversation-folder-chevron,
.page-app .conversation-folder-btn {
  color: var(--cgpt-muted) !important;
}

.page-app .conversation-folder.is-open .conversation-folder-chevron {
  color: var(--cgpt-text) !important;
}

.page-app .conversation-folder-btn:hover {
  background: var(--cgpt-hover) !important;
  color: var(--cgpt-text) !important;
}

.page-app .conversation-folder-btn--danger:hover {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #dc2626 !important;
}

.page-app .conversation-folder-empty {
  color: var(--cgpt-muted) !important;
}

.page-app .conversation-rename,
.page-app .conversation-move,
.page-app .conversation-delete {
  color: var(--cgpt-muted) !important;
}

.page-app .conversation-rename:hover,
.page-app .conversation-move:hover {
  background: var(--cgpt-hover) !important;
  color: var(--cgpt-text) !important;
}

.page-app .conversation-delete:hover {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #dc2626 !important;
}

.page-app.theme-dark .conversation-folder-title,
.page-app.theme-dark .conversation-item-title {
  color: var(--cgpt-text) !important;
}

.page-app.theme-dark .conversation-folder-chevron,
.page-app.theme-dark .conversation-folder-btn,
.page-app.theme-dark .conversation-item-meta {
  color: var(--cgpt-muted) !important;
}

.page-app.theme-dark .conversation-folder.is-open .conversation-folder-chevron {
  color: var(--cgpt-text) !important;
}

.page-app .sidebar-link-button {
  background: transparent !important;
  border: 0 !important;
  color: var(--cgpt-text) !important;
  border-radius: var(--cgpt-radius-pill) !important;
}

.page-app .sidebar-link-button:hover {
  background: var(--cgpt-hover) !important;
}

.page-app .sidebar-icon-button,
.page-app .sidebar-toggle,
.page-app .btn-secondary {
  background: var(--cgpt-surface) !important;
  border: 1px solid var(--cgpt-border) !important;
  color: var(--cgpt-text) !important;
  border-radius: var(--cgpt-radius-pill) !important;
  box-shadow: none !important;
}

.page-app .sidebar-icon-button:hover,
.page-app .sidebar-toggle:hover,
.page-app .btn-secondary:hover {
  background: var(--cgpt-hover) !important;
}

.page-app .btn-primary,
.page-app .composer-submit,
.page-app .auth-submit,
.page-app .plan-select-btn.btn-primary {
  background: var(--cgpt-text) !important;
  border: 1px solid var(--cgpt-text) !important;
  color: var(--cgpt-bg) !important;
  border-radius: var(--cgpt-radius-pill) !important;
  box-shadow: none !important;
}

.page-app .btn-primary:hover,
.page-app .composer-submit:hover,
.page-app .auth-submit:hover {
  opacity: 0.9 !important;
}

.page-app .sidebar-footer-btn--guest {
  background: var(--cgpt-surface) !important;
  border: 1px solid var(--cgpt-border) !important;
  color: var(--cgpt-text) !important;
  border-radius: var(--cgpt-radius-pill) !important;
  box-shadow: none !important;
}

.page-app .sidebar-footer-btn--guest:hover {
  background: var(--cgpt-hover) !important;
}

.page-app .guest-access-card {
  margin-top: 10px;
  padding: 14px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

.page-app .message-bubble,
.page-app .message-bubble--assistant {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--cgpt-text) !important;
}

.page-app .message-bubble--user,
.page-app .message-row--user .message-bubble--user {
  background: var(--cgpt-user-bubble) !important;
  border: 0 !important;
  color: var(--cgpt-text) !important;
  border-radius: 12px !important;
}

.page-app .message-bubble--user .message-meta,
.page-app .message-bubble--user .message-body,
.page-app .message-bubble--user .tibra-msg {
  color: var(--cgpt-text) !important;
}

.page-app .message-avatar,
.page-app .message-avatar--assistant {
  background: var(--cgpt-hover) !important;
  border: 0 !important;
  color: var(--cgpt-text) !important;
}

.page-app .plan-badge {
  background: var(--cgpt-hover) !important;
  border: 0 !important;
  color: var(--cgpt-text) !important;
  border-radius: var(--cgpt-radius-pill) !important;
}

.page-app .sidebar-plan-progress,
.page-app .sidebar-plan-usage-item {
  background: var(--cgpt-surface) !important;
  border: 1px solid var(--cgpt-border) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

.page-app .sidebar-plan-progress-track {
  border: 0 !important;
  background: var(--cgpt-border) !important;
  height: 8px !important;
}

.page-app .sidebar-plan-progress-fill {
  background: var(--cgpt-text) !important;
  box-shadow: none !important;
}

.page-app .sidebar-brand-mark {
  background: transparent !important;
  box-shadow: none !important;
}

.page-app .composer-shell-label,
.page-app .empty-state-kicker,
.page-app .composer-badge,
.page-app .sidebar-overview-label {
  background: var(--cgpt-hover) !important;
  color: var(--cgpt-text) !important;
  border: 0 !important;
}

.page-app .typing-indicator span {
  background: var(--cgpt-muted) !important;
}

.page-app .main-panel:not(.is-empty) .messages-panel::after,
.page-app .composer-wrap {
  background: linear-gradient(180deg, transparent 0%, var(--cgpt-bg) 100%) !important;
}

/* Dark theme */
.page-app.theme-dark .btn-primary,
.page-app.theme-dark .composer-submit,
.page-app.theme-dark .auth-submit {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
}

.page-app.theme-dark .sidebar-footer-btn--guest {
  background: var(--cgpt-surface) !important;
  border-color: var(--cgpt-border) !important;
  color: var(--cgpt-text) !important;
}

.page-app.theme-dark .sidebar-brand-mark {
  background: transparent !important;
}

.page-app.theme-dark .sidebar-brand-logo {
  filter: brightness(0) invert(1) !important;
}

.page-app.theme-dark .sidebar-plan-progress-fill {
  background: #ffffff !important;
}

/* Sidebar folders & chats: never inherit light text on light sidebar */
.page-app .conversation-list,
.page-app .conversation-list .conversation-folder,
.page-app .conversation-list .conversation-folder-head,
.page-app .conversation-list .conversation-folder-copy {
  color: var(--cgpt-text) !important;
}

.page-app .conversation-list .conversation-folder-title,
.page-app .conversation-list .conversation-item-title {
  color: var(--cgpt-text) !important;
}

.page-app .conversation-list .conversation-folder-chevron,
.page-app .conversation-list .conversation-folder-btn,
.page-app .conversation-list .conversation-item-meta,
.page-app .conversation-list .conversation-rename,
.page-app .conversation-list .conversation-move,
.page-app .conversation-list .conversation-delete {
  color: var(--cgpt-muted) !important;
}

.page-app .conversation-list .conversation-folder.is-open .conversation-folder-chevron {
  color: var(--cgpt-text) !important;
}

.page-app .conversation-list .conversation-folder-btn:hover,
.page-app .conversation-list .conversation-rename:hover,
.page-app .conversation-list .conversation-move:hover {
  background: var(--cgpt-hover) !important;
  color: var(--cgpt-text) !important;
}

.page-app .conversation-list .conversation-folder-btn svg,
.page-app .conversation-list .conversation-folder-chevron svg,
.page-app .conversation-list .conversation-rename svg,
.page-app .conversation-list .conversation-move svg,
.page-app .conversation-list .conversation-delete svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Uniform 12px corners for pill-like controls (buttons, chips, inputs, cards) */
.page-app .btn,
.page-app .btn-secondary,
.page-app .btn-primary,
.page-app .btn-danger,
.page-app .sidebar-icon-button,
.page-app .sidebar-toggle,
.page-app .sidebar-link-button,
.page-app .sidebar-footer-btn--guest,
.page-app .sidebar-shortcut,
.page-app .sidebar-search,
.page-app .input,
.page-app .input-select,
.page-app .topbar-user-chip,
.page-app .prompt-chip,
.page-app .composer,
.page-app .composer-inner,
.page-app .composer-submit,
.page-app .composer-plus,
.page-app .composer-badge,
.page-app .composer-badge-muted,
.page-app .composer-attach-btn,
.page-app .composer-attach-soon,
.page-app .conversation-item,
.page-app .conversation-folder-btn,
.page-app .plan-badge,
.page-app .plan-select-btn,
.page-app .dialog,
.page-app .dialog-close,
.page-app .code-copy-btn,
.page-app .toast,
.page-app .auth-card,
.page-app .settings-card,
.page-app .guest-access-card,
.page-app #newChatBtn,
.page-app #createFolderBtn {
  border-radius: 12px !important;
}

.page-app .tibra-scroll,
.page-app .conversation-list,
.page-app .messages,
.page-app .dialog-body,
.page-app .sidebar,
.page-app .md-table-wrap,
.page-app .tibra-prose pre {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.page-app .tibra-scroll::-webkit-scrollbar,
.page-app .conversation-list::-webkit-scrollbar,
.page-app .messages::-webkit-scrollbar,
.page-app .dialog-body::-webkit-scrollbar,
.page-app .sidebar::-webkit-scrollbar,
.page-app .md-table-wrap::-webkit-scrollbar,
.page-app .tibra-prose pre::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.page-app #helpDialog[open],
.page-app .dialog-help[open] {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.page-app #helpDialog::-webkit-scrollbar,
.page-app .dialog-help::-webkit-scrollbar,
.page-app #helpDialog .dialog-body::-webkit-scrollbar,
.page-app .dialog-help .dialog-body::-webkit-scrollbar,
.page-app #helpDialog *::-webkit-scrollbar,
.page-app .dialog-help *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

.page-app #helpDialog *,
.page-app .dialog-help * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Persian UI: avoid heavy bold (Yekan Bakh looks thick at 600–700) */
.page-app .conversation-item-title,
.page-app .conversation-folder-title,
.page-app .sidebar-link-button,
.page-app .composer-tool-btn,
.page-app .prompt-chip,
.page-app .sidebar-account-name,
.page-app .sidebar-account-panel-name,
.page-app .sidebar-account-avatar-fallback {
  font-weight: 500 !important;
}

.page-app .conversation-item-title {
  font-weight: 400 !important;
}