/* Shared presentation polish. Existing controls and layout ownership remain intact. */
:root { --content: 780px; --hover: #ececec; }
body, button, input, textarea, select {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid #4b7b70; outline-offset: 3px;
}
.sidebar { background: #f8f8f7 !important; border-right-color: #eeedeb !important; }
.history-item { border-radius: 10px !important; }
.history-item:hover { background: #eeedeb !important; }
.sidebar-account { border-radius: 14px !important; }
.message-column { width: min(780px, 100%) !important; max-width: 780px !important; margin-inline: auto !important; box-sizing: border-box; }
.conversation-composer .composer-wrap { width: min(780px, 100%) !important; max-width: 780px !important; margin-inline: auto; }
.assistant-message { line-height: 1.72; overflow-wrap: anywhere; }
.assistant-message h2, .assistant-message h3 { line-height: 1.35; letter-spacing: -.025em; }
.assistant-message p { margin-bottom: 1em; }
.assistant-message li { padding-block: 3px; }
.assistant-message pre { border: 1px solid #ecebea; background: #f8f8f7; border-radius: 14px; }
.assistant-message img { max-width: 100%; height: auto; }
.user-bubble { background: #f1f1ef !important; color: #252525 !important; border-radius: 24px !important; box-shadow: none !important; }
.composer { border-color: #e5e4e1 !important; box-shadow: 0 3px 18px #00000009 !important; }
.composer:focus-within { border-color: #b8c7c0 !important; box-shadow: 0 3px 18px #0000000d !important; }
.composer textarea { font-size: 16px !important; scrollbar-color: #c1c1bd transparent !important; }
.composer textarea::-webkit-scrollbar { width: 4px !important; }
.composer textarea::-webkit-scrollbar-track { background: transparent !important; }
.composer textarea::-webkit-scrollbar-thumb { background: #c1c1bd !important; }
.empty-chat h1 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -.035em; }
.surface-menu, .account-menu { border-color: #e8e7e4 !important; box-shadow: 0 10px 36px #00000014 !important; }
.account-menu { border-radius: 16px !important; padding: 6px !important; }
.account-menu-item { border-radius: 10px !important; }
.account-menu-item { min-height: 38px; }
.settings-modal, .lib-modal { border-radius: 22px !important; }
/* Inactive voice panels must also leave keyboard and screen-reader navigation. */
#chatgpt-voice-overlay:not(.active), #chatgpt-voice-settings-modal:not(.active) { visibility: hidden; }
.message-scroll { scroll-behavior: auto; overscroll-behavior-y: contain; }
#initial-loader, #auth-overlay { --bg-main: #f9f9f7; --text-secondary: #646860; color: #20221f; background: #f9f9f7; }
#initial-loader .spinner-ring { border-color: #e1e4df; border-top-color: #356c59; }
#auth-overlay { padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); align-items: safe center; }
#auth-overlay .auth-card { background: #fff; color: #20221f; border: 1px solid #e8e9e3; border-radius: 24px; padding: 28px; box-shadow: 0 10px 45px #262c1d08; backdrop-filter: none; -webkit-backdrop-filter: none; }
#auth-overlay .auth-logo { width: 48px; height: 48px; margin-bottom: 12px; background: #36705d; box-shadow: none; }
#auth-overlay .auth-title { color: #20221f; letter-spacing: -.025em; margin-block: 8px; font-size: 26px; }
#auth-overlay .auth-desc { margin-bottom: 20px; color: #686c65; }
#auth-overlay .auth-tabs { background: #f3f4f0; border-color: #e9eae4; }
#auth-overlay .auth-tab { color: #686c65; }
#auth-overlay .auth-tab.active { color: #20221f; background: #fff; box-shadow: 0 1px 4px #00000010; }
#auth-overlay .tg-login-btn, #auth-overlay .email-action-btn { background: #292f2b; box-shadow: none; border-radius: 12px; transform: none; }
#auth-overlay .tg-login-btn:hover, #auth-overlay .email-action-btn:hover { background: #39443d; transform: none; box-shadow: none; }
#auth-overlay .code-box { background: #f7f8f4; border-color: #e9ebe4; padding: 12px; margin-bottom: 16px; }
#auth-overlay .code-label, #auth-overlay .countdown-text, #auth-overlay .email-hint { color: #697064; }
#auth-overlay #bot-username-label { color: #343d33 !important; }
#auth-overlay .code-digits { color: #386752; font-size: 24px; letter-spacing: 4px; }
#auth-overlay .copy-btn { color: #3b483d; background: #fff; border-color: #dce1d6; }
#auth-overlay .status-pill { color: #33634d; background: #edf5ef; border-color: #d8e9dd; }
#auth-overlay .status-dot { background: #548768; animation: none; }
#auth-overlay .auth-divider { color: #858b80; margin-block: 20px 16px; }
#auth-overlay .auth-divider::before, #auth-overlay .auth-divider::after { background: #e6e9e1; }
#auth-overlay .auth-footer { border-color: #eceee7; margin-top: 20px; }
#auth-overlay .auth-footer a, #auth-overlay #email-back-btn { color: #646c60 !important; }
#auth-overlay .auth-input { color: #263025; background: #fafbf8; border-color: #dce1d6; }
#auth-overlay .error-box { background: #fff1ed; border-color: #edc5b9; color: #91422f; }
#auth-overlay .email-sent-notice { color: #39744c; }
#auth-overlay #retry-btn { color: #35694f !important; text-decoration: underline; }
@media (max-width: 760px) {
  .assistant-message { font-size: 16px; line-height: 1.65; }
  .message-column { padding-inline: 16px !important; }
  .conversation-composer { padding-inline: 12px !important; padding-bottom: max(12px, env(safe-area-inset-bottom)) !important; }
  .history-item-more, .account-menu-item { min-height: 44px !important; }
  #auth-overlay .auth-card { padding: 24px 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .account-menu, .history-menu, .surface-menu { animation: menu-arrive 140ms ease-out; }
  .modal-card { animation: surface-arrive 160ms ease-out; }
  .modal-backdrop { animation: backdrop-arrive 140ms ease-out; }
  .history-item, .account-menu-item, .icon-button { transition: background-color 120ms ease, color 120ms ease; }
  .composer { transition: border-color 140ms ease, box-shadow 140ms ease; }
}
@keyframes menu-arrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes surface-arrive { from { opacity: 0; transform: translateY(5px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes backdrop-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* ==========================================================================
   Fix 1: Telegram Mini App Fullscreen Return Button
   Prevent native Telegram overlay controls (3 dots and close button)
   from overlapping the fullscreen exit / collapse button.
   ========================================================================== */
@media (min-width: 769px) {
  /* Default Windowed Mode: perfectly placed at top: 14px, right: 18px */
  .desktop-fullscreen-btn {
    position: fixed !important;
    top: 14px !important;
    right: 18px !important;
    z-index: 99 !important;
    transition: right 0.2s ease, top 0.2s ease, transform 0.15s ease, background 0.15s ease !important;
  }

  /* FULLSCREEN Mode: moved strongly to the right and slightly higher as requested */
  .desktop-fullscreen-btn.is-fullscreen,
  .desktop-fullscreen-btn.is-fs,
  html.tg-fullscreen .desktop-fullscreen-btn,
  body.tg-fullscreen .desktop-fullscreen-btn,
  .tg-fullscreen .desktop-fullscreen-btn,
  :fullscreen .desktop-fullscreen-btn,
  :-webkit-full-screen .desktop-fullscreen-btn {
    right: 14px !important;
    top: 58px !important;
    z-index: 99 !important;
  }
}

/* ==========================================================================
   Fix 2: Account Settings Popup Menu - High Stacking & Perfect Styling
   Fixes:
   - When sidebar is OPEN: menu is no longer rendered behind the sidebar.
   - When sidebar is in RAIL mode: menu is fully visible to the right of rail.
   ========================================================================== */
.account-menu {
  position: fixed !important;
  z-index: 99999 !important;
  background: #ffffff !important;
  border: 1px solid #e8e7e4 !important;
  border-radius: 16px !important;
  padding: 6px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 204px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.account-menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  border: none !important;
  background: transparent !important;
  color: #20221f !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-align: left !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}

.account-menu-item svg {
  flex-shrink: 0 !important;
  stroke-width: 1.8 !important;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
  background: #f1f1ef !important;
  color: #111827 !important;
  outline: none !important;
}

.account-menu-logout {
  color: #e02424 !important;
}

.account-menu-logout:hover,
.account-menu-logout:focus-visible {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}


/* Responsive Markdown Tables & Math Presentation */
.table-responsive-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  margin: 14px 0 !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 8px !important;
}

.custom-markdown-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

.custom-table-head {
  border-bottom: 2px solid rgba(0, 0, 0, 0.14) !important;
}

.custom-table-th {
  background: #f7f7f8 !important;
  color: #1a1a1a !important;
  font-weight: 600 !important;
  padding: 9px 13px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  white-space: normal !important;
  word-break: break-word !important;
}

.custom-table-td {
  padding: 8px 13px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: inherit !important;
  word-break: break-word !important;
}

.custom-table-row:nth-child(even) {
  background: rgba(0, 0, 0, 0.02) !important;
}

.custom-table-row:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

/* Dark mode and theme support */
@media (prefers-color-scheme: dark) {
  .custom-markdown-table {
    border-color: rgba(255, 255, 255, 0.14) !important;
  }
  .custom-table-head {
    border-bottom-color: rgba(255, 255, 255, 0.18) !important;
  }
  .custom-table-th {
    background: #232326 !important;
    color: #ececf1 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
  }
  .custom-table-td {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e3e3e8 !important;
  }
  .custom-table-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.03) !important;
  }
  .custom-table-row:hover {
    background: rgba(255, 255, 255, 0.06) !important;
  }
}

.dark .custom-markdown-table {
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.dark .custom-table-head {
  border-bottom-color: rgba(255, 255, 255, 0.18) !important;
}
.dark .custom-table-th {
  background: #232326 !important;
  color: #ececf1 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.dark .custom-table-td {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e3e3e8 !important;
}
.dark .custom-table-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.03) !important;
}
.dark .custom-table-row:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Generated images: the card follows the file's real aspect ratio (2026-09-18). */
.generated-image-card {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 0;
}
.generated-image-card .generated-img {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}