/* =========================================================
   TamilAI CODE RENDERER V5
   Clean + Theme Adaptive + Responsive
   ---------------------------------------------------------
   1–19 lines  → natural height
   20 lines    → maximum visible viewport
   21+ lines   → vertical scrolling
   Light       → pure white
   Dark        → dark surface
   No hover blur / fade
   ========================================================= */
/* =========================================================
   1. BASE CODE BLOCK
   ========================================================= */
.tai-code-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 20px 0;
  box-sizing: border-box;
  border: 1px solid #d8dee9;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
/* =========================================================
   2. HEADER
   ========================================================= */
.tai-code-header {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 14px;
  box-sizing: border-box;
  background: #ffffff;
  border-bottom: 1px solid #d8dee9;
  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}
/* =========================================================
   3. LANGUAGE
   ========================================================= */
.tai-code-language {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
}
/* =========================================================
   4. HEADER ACTIONS
   ========================================================= */
.tai-code-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
/* =========================================================
   5. COPY / SAVE BUTTON
   ========================================================= */
.tai-copy-btn {
  border: 1px solid #d8dee9;
  outline: none;
  cursor: pointer;
  padding: 6px 11px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  background: #f8fafc;
  color: #334155;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}
.tai-copy-btn:hover {
  background: #eef6ff;
  border-color: #93c5fd;
  color: #0369a1;
  box-shadow: 0 3px 10px rgba(14, 165, 255, 0.12);
  transform: translateY(-1px);
}
.tai-copy-btn:active {
  transform: translateY(0) scale(0.97);
}
/* =========================================================
   6. SAVED STATE
   ========================================================= */
.tai-copy-btn.saved {
  background: #ecfdf5;
  border-color: #86efac;
  color: #15803d;
}
/* =========================================================
   7. CODE BODY
   ---------------------------------------------------------
   IMPORTANT:
   Do NOT give this a fixed height.
   Short code:
   → natural height
   Long code:
   → maximum 20-line viewport
   ========================================================= */
.tai-code-body {
  display: flex;
  width: 100%;
  min-width: 0;
  height: auto;
  max-height: 462px;
  box-sizing: border-box;
  align-items: stretch;
  overflow: hidden;
}
/* =========================================================
   8. LINE NUMBER GUTTER
   ========================================================= */
.tai-line-numbers {
  flex: 0 0 48px;
  width: 48px;
  height: auto;
  max-height: 462px;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 10px 16px 0;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  text-align: right;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.65;
  color: #64748b;
  background: #ffffff;
  border-right: 1px solid rgba(100, 116, 139, 0.2);
  white-space: nowrap;
}
/* =========================================================
   9. INDIVIDUAL LINE NUMBER
   ========================================================= */
.tai-line-number {
  display: block;
  width: 100%;
  height: 1.65em;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  white-space: nowrap;
  line-height: 1.65;
}
/* =========================================================
   10. CODE SCROLL AREA
   ========================================================= */
.tai-code-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 0;
  height: auto;
  max-height: 462px;
  box-sizing: border-box;
  align-self: stretch;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  overscroll-behavior: contain;
  scroll-padding: 8px;
}
/* =========================================================
   11. PRE
   ========================================================= */
.tai-code-scroll pre {
  display: block;
  width: max-content;
  min-width: 100%;
  margin: 0 !important;
  padding: 16px;
  box-sizing: border-box;
  border: none !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #1e293b !important;
  overflow: visible;
  white-space: pre;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}
/* =========================================================
   12. CODE
   ========================================================= */
.tai-code-scroll pre code,
.tai-code-wrapper pre code {
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: transparent !important;
  color: #1e293b !important;
  font-family: "Cascadia Code", "Fira Code", Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.65;
  tab-size: 4;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}
/* =========================================================
   13. LIGHT THEME
   ========================================================= */
body:not(.dark-theme):not(.theme-dark) .tai-code-wrapper,
body.light-theme .tai-code-wrapper,
body.login-light .tai-code-wrapper {
  background: #ffffff !important;
  border-color: #d8dee9 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}
/* =========================================================
   14. LIGHT HEADER
   ========================================================= */
body:not(.dark-theme):not(.theme-dark) .tai-code-header,
body.light-theme .tai-code-header,
body.login-light .tai-code-header {
  background: #ffffff !important;
  border-bottom-color: #d8dee9 !important;
}
/* =========================================================
   15. LIGHT LANGUAGE
   ========================================================= */
body:not(.dark-theme):not(.theme-dark) .tai-code-language,
body.light-theme .tai-code-language,
body.login-light .tai-code-language {
  color: #334155 !important;
}
/* =========================================================
   16. LIGHT BUTTONS
   ========================================================= */
body:not(.dark-theme):not(.theme-dark) .tai-copy-btn,
body.light-theme .tai-copy-btn,
body.login-light .tai-copy-btn {
  background: #f8fafc !important;
  color: #334155 !important;
  border-color: #d8dee9 !important;
}
body:not(.dark-theme):not(.theme-dark) .tai-copy-btn:hover,
body.light-theme .tai-copy-btn:hover,
body.login-light .tai-copy-btn:hover {
  background: #eef6ff !important;
  color: #0369a1 !important;
  border-color: #93c5fd !important;
}
/* =========================================================
   17. LIGHT CODE SURFACE
   ---------------------------------------------------------
   PURE WHITE — no blue / gray lower area
   ========================================================= */
body:not(.dark-theme):not(.theme-dark) .tai-code-body,
body.light-theme .tai-code-body,
body.login-light .tai-code-body {
  background: #ffffff !important;
}
body:not(.dark-theme):not(.theme-dark) .tai-code-scroll,
body.light-theme .tai-code-scroll,
body.login-light .tai-code-scroll {
  background: #ffffff !important;
}
body:not(.dark-theme):not(.theme-dark) .tai-code-scroll pre,
body.light-theme .tai-code-scroll pre,
body.login-light .tai-code-scroll pre {
  background: #ffffff !important;
  color: #1e293b !important;
}
body:not(.dark-theme):not(.theme-dark) .tai-code-scroll pre code,
body.light-theme .tai-code-scroll pre code,
body.login-light .tai-code-scroll pre code {
  background: transparent !important;
  color: #1e293b !important;
}
/* =========================================================
   18. LIGHT LINE NUMBERS
   ========================================================= */
body:not(.dark-theme):not(.theme-dark) .tai-line-numbers,
body.light-theme .tai-line-numbers,
body.login-light .tai-line-numbers {
  color: #64748b !important;
  background: #ffffff !important;
  border-right-color: rgba(100, 116, 139, 0.2) !important;
}
/* =========================================================
   19. LIGHT SCROLLBAR
   ========================================================= */
body:not(.dark-theme):not(.theme-dark) .tai-code-scroll,
body.light-theme .tai-code-scroll,
body.login-light .tai-code-scroll {
  scrollbar-width: thin;
  scrollbar-color: #aeb8c6 #eef2f7;
}
body:not(.dark-theme):not(.theme-dark) .tai-code-scroll::-webkit-scrollbar,
body.light-theme .tai-code-scroll::-webkit-scrollbar,
body.login-light .tai-code-scroll::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
body:not(.dark-theme):not(.theme-dark)
  .tai-code-scroll::-webkit-scrollbar-track,
body.light-theme .tai-code-scroll::-webkit-scrollbar-track,
body.login-light .tai-code-scroll::-webkit-scrollbar-track {
  background: #eef2f7;
}
body:not(.dark-theme):not(.theme-dark)
  .tai-code-scroll::-webkit-scrollbar-thumb,
body.light-theme .tai-code-scroll::-webkit-scrollbar-thumb,
body.login-light .tai-code-scroll::-webkit-scrollbar-thumb {
  background: #b8c1ce;
  border-radius: 999px;
  transition: background 0.2s ease;
}
body:not(.dark-theme):not(.theme-dark)
  .tai-code-scroll::-webkit-scrollbar-thumb:hover,
body.light-theme .tai-code-scroll::-webkit-scrollbar-thumb:hover,
body.login-light .tai-code-scroll::-webkit-scrollbar-thumb:hover {
  background: #8e9aaa;
}
/* =========================================================
   20. DARK THEME
   ========================================================= */
body.dark-theme .tai-code-wrapper,
body.theme-dark .tai-code-wrapper {
  background: #1e1e1e !important;
  border-color: #3a3a3a !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
}
/* =========================================================
   21. DARK HEADER
   ========================================================= */
body.dark-theme .tai-code-header,
body.theme-dark .tai-code-header {
  background: #2a2a2a !important;
  border-bottom-color: #444 !important;
}
/* =========================================================
   22. DARK LANGUAGE
   ========================================================= */
body.dark-theme .tai-code-language,
body.theme-dark .tai-code-language {
  color: #e5e5e5 !important;
}
/* =========================================================
   23. DARK BUTTONS
   ========================================================= */
body.dark-theme .tai-copy-btn,
body.theme-dark .tai-copy-btn {
  background: #3a3a3a !important;
  color: #e5e5e5 !important;
  border-color: #4a4a4a !important;
}
body.dark-theme .tai-copy-btn:hover,
body.theme-dark .tai-copy-btn:hover {
  background: #505050 !important;
  color: #ffffff !important;
  border-color: #666 !important;
}
/* =========================================================
   24. DARK CODE SURFACE
   ========================================================= */
body.dark-theme .tai-code-body,
body.theme-dark .tai-code-body {
  background: #1e1e1e !important;
}
body.dark-theme .tai-code-scroll,
body.theme-dark .tai-code-scroll {
  background: #1e1e1e !important;
}
body.dark-theme .tai-code-scroll pre,
body.theme-dark .tai-code-scroll pre {
  background: #1e1e1e !important;
  color: #e5e5e5 !important;
}
body.dark-theme .tai-code-scroll pre code,
body.theme-dark .tai-code-scroll pre code {
  background: transparent !important;
  color: #e5e5e5 !important;
}
/* =========================================================
   25. DARK LINE NUMBERS
   ========================================================= */
body.dark-theme .tai-line-numbers,
body.theme-dark .tai-line-numbers {
  color: #94a3b8 !important;
  background: #1e1e1e !important;
  border-right-color: rgba(148, 163, 184, 0.16) !important;
}
/* =========================================================
   26. DARK SCROLLBAR
   ========================================================= */
body.dark-theme .tai-code-scroll,
body.theme-dark .tai-code-scroll {
  scrollbar-width: thin;
  scrollbar-color: #666 #2b2b2b;
}
body.dark-theme .tai-code-scroll::-webkit-scrollbar,
body.theme-dark .tai-code-scroll::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
body.dark-theme .tai-code-scroll::-webkit-scrollbar-track,
body.theme-dark .tai-code-scroll::-webkit-scrollbar-track {
  background: #2b2b2b;
}
body.dark-theme .tai-code-scroll::-webkit-scrollbar-thumb,
body.theme-dark .tai-code-scroll::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 999px;
  transition: background 0.2s ease;
}
body.dark-theme .tai-code-scroll::-webkit-scrollbar-thumb:hover,
body.theme-dark .tai-code-scroll::-webkit-scrollbar-thumb:hover {
  background: #888;
}
/* =========================================================
   27. MOBILE
   ========================================================= */
@media (max-width: 768px) {
  .tai-code-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 16px 0;
    border-radius: 10px;
  }
  /* -------------------------
     Mobile Header
     ------------------------- */
  .tai-code-header {
    min-height: 40px;
    padding: 8px 11px;
  }
  .tai-code-language {
    font-size: 11px;
    letter-spacing: 0.5px;
  }
  .tai-code-actions {
    gap: 6px;
  }
  .tai-copy-btn {
    padding: 5px 9px;
    font-size: 11px;
    border-radius: 6px;
  }
  /* -------------------------
     Mobile Code Body
     Short code:
     → natural height
     Long code:
     → maximum 20-line viewport
     ------------------------- */
  .tai-code-body {
    width: 100%;
    height: auto;
    max-height: 462px;
  }
  /* -------------------------
     Mobile Line Numbers
     ------------------------- */
  .tai-line-numbers {
    flex: 0 0 38px;
    width: 38px;
    height: auto;
    max-height: 462px;
    padding: 16px 8px 16px 0;
    font-size: 12px;
    line-height: 1.55;
    background: #ffffff;
  }
  .tai-line-number {
    height: 1.55em;
    line-height: 1.55;
  }
  /* -------------------------
     Mobile Scroll Area
     ------------------------- */
  .tai-code-scroll {
    min-width: 0;
    min-height: 0;
    width: 0;
    height: auto;
    max-height: 462px;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  /* -------------------------
     Mobile PRE
     ------------------------- */
  .tai-code-scroll pre {
    width: max-content;
    min-width: 100%;
    padding: 16px 12px;
  }
  /* -------------------------
     Mobile CODE
     ------------------------- */
  .tai-code-scroll pre code {
    font-size: 12px !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    white-space: pre !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  /* -------------------------
     Mobile Scrollbar
     ------------------------- */
  .tai-code-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .tai-code-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  .tai-code-scroll::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.45);
    border-radius: 999px;
    transition: background 0.25s ease;
  }
  .tai-code-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.75);
  }
}
/* =========================================================
   28. VERY SMALL MOBILE
   ---------------------------------------------------------
   IMPORTANT:
   NO FIXED HEIGHT HERE.
   This prevents the old 390px empty-space problem.
   ========================================================= */
@media (max-width: 400px) {
  .tai-code-wrapper {
    margin: 13px 0;
    border-radius: 9px;
  }
  .tai-code-header {
    padding: 7px 9px;
  }
  .tai-code-actions {
    gap: 4px;
  }
  .tai-copy-btn {
    padding: 4px 8px;
    font-size: 10px;
  }
  /* IMPORTANT:
     Natural height for short code.
     Maximum height for long code. */
  .tai-code-body {
    height: auto;
    max-height: 390px;
  }
  .tai-line-numbers {
    flex: 0 0 34px;
    width: 34px;
    height: auto;
    max-height: 390px;
    padding-right: 7px;
    font-size: 11px;
    line-height: 1.5;
  }
  .tai-line-number {
    height: 1.5em;
    line-height: 1.5;
  }
  .tai-code-scroll {
    height: auto;
    max-height: 390px;
  }
  .tai-code-scroll pre {
    padding: 14px 10px;
  }
  .tai-code-scroll pre code {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
  .tai-code-scroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
}
/* =========================================================
   29. NO HOVER BLUR / NO HOVER FADE
   ---------------------------------------------------------
   Code must remain sharp and readable.
   ========================================================= */
.tai-code-wrapper,
.tai-code-wrapper:hover,
.tai-code-wrapper:focus,
.tai-code-wrapper:focus-within,
.tai-code-body,
.tai-code-body:hover,
.tai-code-scroll,
.tai-code-scroll:hover,
.tai-code-scroll pre,
.tai-code-scroll pre:hover,
.tai-code-scroll pre code,
.tai-code-scroll pre code:hover,
.tai-line-numbers,
.tai-line-numbers:hover {
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
/* =========================================================
   30. CODE HOVER PROTECTION
   ========================================================= */
.tai-code-wrapper:hover .tai-code-body,
.tai-code-wrapper:hover .tai-code-scroll,
.tai-code-wrapper:hover .tai-code-scroll pre,
.tai-code-wrapper:hover .tai-code-scroll pre code,
.tai-code-wrapper:hover .tai-line-numbers {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}
/* =========================================================
   31. SYNTAX COLOR VISIBILITY
   ========================================================= */
.tai-code-scroll pre code span,
.tai-code-scroll pre code * {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}
/* =========================================================
   32. NO CODE CARD MOVEMENT
   ========================================================= */
.tai-code-wrapper:hover {
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* =========================================================
   33. HEADER CRISP
   ========================================================= */
.tai-code-header,
.tai-code-header:hover,
.tai-code-language,
.tai-code-actions {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}
/* =========================================================
   34. DISABLE INTERNAL HOVER DIMMING
   ========================================================= */
.tai-code-wrapper *:hover {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
}
/* =========================================================
   35. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .tai-code-wrapper,
  .tai-code-header,
  .tai-copy-btn,
  .tai-code-scroll,
  .tai-code-scroll pre {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* =========================================================
   TAMILAI CHAT CODE SCROLL FIX V6
   ---------------------------------------------------------
   Fix:
   • Full vertical scrolling
   • Full horizontal scrolling
   • Bottom scrollbar access
   • Left / right code movement
   • Mouse wheel + trackpad
   • Mobile touch scrolling
   • Prevent parent containers from trapping scroll
   ========================================================= */
.tai-code-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
/* ---------------------------------------------------------
   CODE BODY
   --------------------------------------------------------- */
.tai-code-body {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  /*
     Keep short code natural.
     Long code gets a real viewport.
  */
  max-height: 462px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}
/* ---------------------------------------------------------
   LINE NUMBERS
   --------------------------------------------------------- */
.tai-line-numbers {
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 100% !important;
  max-height: 462px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}
/* ---------------------------------------------------------
   MAIN CODE SCROLL AREA
   --------------------------------------------------------- */
.tai-code-scroll {
  flex: 1 1 auto !important;
  /*
     IMPORTANT:
     This allows the flex child to actually become
     a scroll container instead of expanding the parent.
  */
  width: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: 462px !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
  /*
     Mobile / touch
  */
  -webkit-overflow-scrolling: touch !important;
  /*
     Do not trap the user's scroll gesture.
  */
  overscroll-behavior: auto !important;
  /*
     Allow both directions on touch devices.
  */
  touch-action: pan-x pan-y !important;
  /*
     Keep scrollbar space predictable.
  */
  scrollbar-gutter: stable !important;
  scroll-behavior: auto !important;
}
/* ---------------------------------------------------------
   CODE PRE
   --------------------------------------------------------- */
.tai-code-scroll pre {
  display: block !important;
  /*
     This is important for horizontal scrolling.
  */
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  white-space: pre !important;
  padding: 16px !important;
}
/* ---------------------------------------------------------
   CODE TEXT
   --------------------------------------------------------- */
.tai-code-scroll pre code,
.tai-code-wrapper pre code {
  display: block !important;
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
  white-space: pre !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  /*
     Slightly stronger code text.
  */
  font-weight: 550 !important;
  line-height: 1.65 !important;
}
/* ---------------------------------------------------------
   DESKTOP SCROLLBAR
   --------------------------------------------------------- */
.tai-code-scroll::-webkit-scrollbar {
  width: 9px !important;
  height: 9px !important;
}
.tai-code-scroll::-webkit-scrollbar-track {
  background: rgba(100, 116, 139, 0.1) !important;
  border-radius: 999px !important;
}
.tai-code-scroll::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.55) !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}
.tai-code-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(71, 85, 105, 0.78) !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}
/* ---------------------------------------------------------
   LIGHT THEME SCROLLBAR
   --------------------------------------------------------- */
body:not(.dark-theme):not(.theme-dark) .tai-code-scroll,
body.light-theme .tai-code-scroll,
body.login-light .tai-code-scroll {
  scrollbar-color: #9aa6b5 #eef2f7 !important;
}
/* ---------------------------------------------------------
   DARK THEME SCROLLBAR
   --------------------------------------------------------- */
body.dark-theme .tai-code-scroll,
body.theme-dark .tai-code-scroll {
  scrollbar-color: #777 #2b2b2b !important;
}
body.dark-theme .tai-code-scroll::-webkit-scrollbar-track,
body.theme-dark .tai-code-scroll::-webkit-scrollbar-track {
  background: #2b2b2b !important;
}
body.dark-theme .tai-code-scroll::-webkit-scrollbar-thumb,
body.theme-dark .tai-code-scroll::-webkit-scrollbar-thumb {
  background: #777 !important;
}
body.dark-theme .tai-code-scroll::-webkit-scrollbar-thumb:hover,
body.theme-dark .tai-code-scroll::-webkit-scrollbar-thumb:hover {
  background: #999 !important;
}
/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .tai-code-body {
    width: 100% !important;
    max-height: 462px !important;
    overflow: hidden !important;
  }
  .tai-line-numbers {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-height: 462px !important;
  }
  .tai-code-scroll {
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 462px !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-gutter: stable !important;
  }
  .tai-code-scroll pre {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    padding: 16px 12px !important;
  }
  .tai-code-scroll pre code,
  .tai-code-wrapper pre code {
    width: max-content !important;
    min-width: 100% !important;
    white-space: pre !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    font-weight: 550 !important;
  }
  .tai-code-scroll::-webkit-scrollbar {
    width: 7px !important;
    height: 7px !important;
  }
}
/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */
@media (max-width: 400px) {
  .tai-code-body {
    max-height: 390px !important;
  }
  .tai-line-numbers {
    max-height: 390px !important;
  }
  .tai-code-scroll {
    max-height: 390px !important;
  }
  .tai-code-scroll pre {
    padding: 14px 10px !important;
  }
  .tai-code-scroll pre code,
  .tai-code-wrapper pre code {
    font-size: 11px !important;
    line-height: 1.5 !important;
    font-weight: 550 !important;
  }
  .tai-code-scroll::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
  }
}