*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-strong {
  background: rgba(32, 33, 35, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
  border-radius: 0.5rem;
}

/* Customer docs (chat/templates/docs/*) render inside base.html's
     overflow-hidden <main>; without their own scroll region tall docs clip on
     short viewports. Make the doc page a full-height scroll container. */

.doc-page {
  height: 100%;
  overflow-y: auto;
}

/* Messages container - flexbox container with input at bottom */

#messages-container {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  vertical-align: bottom;
  text-align: left;
  background-color: unset;
  border-color: rgba(0, 0, 0, 0);
  background: unset;
}

/* When sidebar is hidden, extend messages-container to full viewport */

#sidebar.sidebar-hidden ~ main #messages-container {
  width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Chat input area - overlays bottom of messages so content scrolls behind */

#chat-input-area {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding-bottom: 0;
}

/* Ensure hidden class properly hides the chat input area */

#chat-input-area.\!hidden {
  display: none !important;
}

#chat-input-area.hidden {
  display: none !important;
}

#chat-input-area * {
  pointer-events: auto;
}

/* Chat form - transparent so messages show through */

#chat-form {
  position: relative;
  z-index: 1;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 30px;
  margin-right: 30px;
}

/* Top section - input box area, messages visible behind */

#chat-form .chat-form-top-section {
  position: relative;
  z-index: 2;
  background: transparent;
}

/* Horizontal divider line in the middle of the form */

#chat-form .divider-line-middle {
  height: 1px;
  background: linear-gradient(to right, 
       transparent 0%, 
       rgba(255, 255, 255, 0.2) 20%,
       rgba(255, 255, 255, 0.4) 50%,
       rgba(255, 255, 255, 0.2) 80%,
       transparent 100%);
  position: relative;
  z-index: 5;
  margin: 1rem 0;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.1);
  pointer-events: none;
  /* Allow messages to show through */
}

/* Bottom section - disclaimer text with glass background from divider down */

#chat-form .chat-form-bottom-section {
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  height: auto;
  vertical-align: bottom;
  margin-top: -1rem;
  margin-bottom: 0;
  margin-left: -500px;
  margin-right: -500px;
  padding-left: 500px;
  padding-right: 500px;
}

/* Paragraph in bottom section */

#chat-form .chat-form-bottom-section p.text-xs {
  padding-bottom: 0;
  margin-bottom: 0;
  margin-top: 0;
}

/* Make sure wrapper divs are transparent */

#chat-input-area > div {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* Messages should be visible behind input area */

#messages-container .message-item {
  position: relative;
  z-index: 0;
}

/* Chat mode - scrollable area */

#chat-mode {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  position: relative;
  padding-bottom: 160px;
}

/* When sidebar is visible, extend chat-mode to right edge for scrollbar positioning */

/* Use a more reliable selector - check if sidebar exists and is not hidden */

#sidebar:not(.sidebar-hidden) ~ main #chat-mode {
  width: calc(100vw - 256px);
  margin-right: calc(256px - 100vw);
}

/* Ensure inner content is ALWAYS centered within #chat-mode */

/* This works for both sidebar open and closed states */

#chat-mode > div.flex-1.flex.justify-center {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* When sidebar is visible, constrain flex container to main's width for proper centering */

main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.flex-1.flex.justify-center {
  width: calc(100vw - 256px) !important;
  max-width: calc(100vw - 256px) !important;
  margin-left: 0 !important;
  margin-right: calc(256px - 100vw) !important;
}

/* Ensure messages container inside chat-mode is properly centered and constrained */

#chat-mode > div.flex-1 > div.w-full {
  max-width: 64rem !important;
  /* max-w-4xl equivalent */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* When sidebar is visible, constrain the flex container to main's actual width */

/* This ensures content is centered in the available space, not the extended width */

#sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.flex-1.flex.justify-center {
  /* Set width to match main container's width (100vw - 256px) */
  /* This ensures centering happens within the actual available space */
  width: calc(100vw - 256px) !important;
  max-width: calc(100vw - 256px) !important;
  margin-left: 0 !important;
  margin-right: calc(256px - 100vw) !important;
  position: relative !important;
}

/* Keep message area the same width regardless of sidebar state */

#sidebar.sidebar-hidden ~ main #chat-mode > div.flex-1 > div.w-full {
  max-width: 64rem !important;
}

/* Ensure messages-list is properly constrained and centered when sidebar is visible */

#chat-mode #messages-list {
  max-width: 64rem !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure message items take full width of their container when sidebar is visible */

#chat-mode .message-item {
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure user messages align to the right when sidebar is visible */

#chat-mode .message-item.justify-end {
  display: flex !important;
  justify-content: flex-end !important;
}

/* Ensure AI messages align to the left when sidebar is visible */

#chat-mode .message-item.justify-start {
  display: flex !important;
  justify-content: flex-start !important;
}

/* When sidebar is hidden, extend chat-mode to full viewport right edge */

#sidebar.sidebar-hidden ~ main #messages-container {
  width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure messages have padding at bottom so last message isn't hidden */

#chat-mode .max-w-4xl {
  padding-bottom: 0;
  /* Padding handled by pb-48 in HTML */
}

/* Ensure proper centering when sidebar is visible */

#chat-mode > div.flex-1 {
  display: flex;
  justify-content: center;
}

.glass-input-container {
  position: relative;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3),
                0 0 0 1px rgba(255, 255, 255, 0.08) inset,
                inset 0 0 0 2px #000;
  border-radius: 2.5rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  min-height: 70px;
  overflow: visible;
}

/* Ensure textarea content is properly contained and clipped */

.glass-input-container textarea {
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
  word-wrap: break-word;
  min-width: 0;
  flex: 1 1 auto;
  /* Hide scrollbar but keep scrolling functionality */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

/* Hide scrollbar for webkit browsers (Chrome, Safari, Edge) */

.glass-input-container textarea::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Ensure button doesn't overflow */

.glass-input-container button {
  flex-shrink: 0;
}

/* Centered input mode - needs relative positioning for absolute children */

#centered-input-mode {
  position: relative;
}

/* Centered input container - wide enough for placeholder text */

#centered-input-mode .centered-input-container {
  max-width: min(95vw, 1400px);
  min-width: -moz-fit-content;
  min-width: fit-content;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Centered chat form width */

#centered-chat-form {
  width: 100%;
  max-width: 64rem;
  /* Match chat message width */
  margin-left: auto;
  margin-right: auto;
}

#centered-suggestions {
  width: 100%;
}

.centered-suggestions-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.45rem;
}

.centered-suggestions-next-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(16, 185, 129, 0.08));
  color: rgba(243, 244, 246, 0.95);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.centered-suggestions-next-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(110, 231, 183, 0.62);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(16, 185, 129, 0.12));
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
}

.centered-suggestions-next-btn:active {
  transform: translateY(0);
}

.centered-suggestions-next-btn:focus-visible {
  outline: none;
  border-color: rgba(110, 231, 183, 0.86);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.34);
}

.centered-suggestions-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 2.2rem;
  align-items: end;
  gap: 0.65rem;
  width: 100%;
  perspective: 900px;
  overflow: visible;
}

.centered-suggestion-bubble {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.85rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(16, 185, 129, 0.1) 55%, rgba(59, 130, 246, 0.08));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(243, 244, 246, 0.98);
  font-size: 0.86rem;
  line-height: 1.2rem;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.01em;
  padding: 0.5rem 0.85rem;
  /* Resting clamp = one line. A concrete value (not `none`) is what lets the
     :hover max-height animate smoothly instead of snapping. */
  max-height: 2.35rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.32s ease, background 0.32s ease, max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.centered-suggestion-bubble::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 10%, rgba(255, 255, 255, 0.12) 38%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.7s ease;
  z-index: -1;
  pointer-events: none;
}

.centered-suggestion-bubble:hover,
.centered-suggestion-bubble:focus-visible {
  border-color: rgba(110, 231, 183, 0.56);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(16, 185, 129, 0.18) 55%, rgba(59, 130, 246, 0.14));
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(16, 185, 129, 0.32) inset;
  white-space: normal;
  min-height: 0;
  height: auto;
  max-height: 5rem;
  align-self: end;
  z-index: 50;
}
/* Expand-to-read on hover/focus that moves NOTHING else and animates smoothly:
   - Only THIS bubble changes. The grid rows stay a fixed height (grid-auto-rows:
     2.2rem) so the row never grows — siblings, the heading and the composer all
     stay put. The bubble is bottom-anchored (align-self:end) + floated (z-index),
     so it grows UPWARD into the empty space above and its bottom edge never moves.
   - Smoothness: max-height animates from the resting 2.35rem to 5rem over 0.4s
     (transition on the base rule). Capping near the tallest suggestion (~3 lines)
     rather than far above it keeps most of the ease visible, so the motion reads as
     a deliberate grow, not a snap. */

.centered-suggestion-bubble:hover::before {
  transform: translateX(130%);
}

.centered-suggestion-bubble:active {
  transform: translateY(-1px);
}

.centered-suggestion-bubble:focus-visible {
  outline: none;
  border-color: rgba(110, 231, 183, 0.85);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.38), 0 12px 24px rgba(0, 0, 0, 0.24);
}

.centered-suggestion-bubble.is-hidden {
  opacity: 0;
  transform: translateY(14px) scale(0.965);
}

.centered-suggestions-track.is-leaving .centered-suggestion-bubble {
  opacity: 0;
  transform: translateY(-11px) scale(0.965);
}

.centered-suggestions-track .centered-suggestion-bubble:nth-child(1) {
  transition-delay: 0ms;
}

.centered-suggestions-track .centered-suggestion-bubble:nth-child(2) {
  transition-delay: 35ms;
}

.centered-suggestions-track .centered-suggestion-bubble:nth-child(3) {
  transition-delay: 70ms;
}

.chat-followup-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  width: 100%;
}

.chat-followup-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.45rem;
}

.chat-followup-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9999px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(16, 185, 129, 0.08));
  color: rgba(243, 244, 246, 0.95);
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-followup-toggle-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(110, 231, 183, 0.62);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(16, 185, 129, 0.12));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.chat-followup-toggle-btn:focus-visible {
  outline: none;
  border-color: rgba(110, 231, 183, 0.86);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.34);
}

.chat-followup-toggle-icon {
  transition: transform 0.2s ease;
}

.chat-followup-container.is-collapsed .chat-followup-toggle-icon {
  transform: rotate(-90deg);
}

.chat-followup-track.mobile-single {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
}

.chat-followup-bubble {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.9rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(16, 185, 129, 0.1) 60%, rgba(59, 130, 246, 0.08));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: rgba(243, 244, 246, 0.98);
  font-size: 0.89rem;
  line-height: 1.2rem;
  font-weight: 500;
  text-align: left;
  letter-spacing: 0.01em;
  padding: 0.58rem 0.9rem 0.9rem;
  min-height: 3.65rem;
  max-height: 3.65rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.26s ease, background 0.26s ease;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-overflow: ellipsis;
}

.chat-followup-bubble:hover {
  transform: translateY(-2px);
  border-color: rgba(110, 231, 183, 0.54);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(16, 185, 129, 0.14) 60%, rgba(59, 130, 246, 0.12));
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(16, 185, 129, 0.24) inset;
}

.chat-followup-bubble:active {
  transform: translateY(-1px);
}

.chat-followup-bubble:focus-visible {
  outline: none;
  border-color: rgba(110, 231, 183, 0.85);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.38), 0 12px 24px rgba(0, 0, 0, 0.24);
}

@keyframes bc-automation-cta-pending-glow {
  0%,
    100% {
    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(16, 185, 129, 0.35),
        0 0 20px rgba(52, 211, 153, 0.22);
  }

  50% {
    box-shadow:
        0 8px 26px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(52, 211, 153, 0.55),
        0 0 28px rgba(52, 211, 153, 0.35);
  }
}

/* Compact CTA under assistant messages, left-aligned with the bubble (not follow-up chips). */

.bc-automation-chat-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: auto;
  max-width: min(100%, 18rem);
  align-self: flex-start;
  border-radius: 9999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.5rem 1.15rem;
  min-height: 2.5rem;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease,
      color 0.22s ease;
  cursor: pointer;
}

/* Needs setup: stronger accent + pulse so it reads as actionable */

.bc-automation-chat-btn--pending {
  border: 1px solid rgba(52, 211, 153, 0.45);
  background: linear-gradient(
      135deg,
      rgba(16, 185, 129, 0.22) 0%,
      rgba(5, 150, 105, 0.18) 45%,
      rgba(59, 130, 246, 0.12) 100%
    );
  color: rgba(240, 253, 250, 0.98);
  animation: bc-automation-cta-pending-glow 2.4s ease-in-out infinite;
}

.bc-automation-chat-btn--pending:hover {
  transform: translateY(-2px);
  border-color: rgba(110, 231, 183, 0.65);
  background: linear-gradient(
      135deg,
      rgba(16, 185, 129, 0.3) 0%,
      rgba(5, 150, 105, 0.24) 50%,
      rgba(59, 130, 246, 0.16) 100%
    );
}

/* After save: calm, confirmed */

.bc-automation-chat-btn--saved {
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(51, 65, 85, 0.2));
  color: rgba(226, 232, 240, 0.95);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  animation: none;
}

.bc-automation-chat-btn--saved:hover {
  transform: translateY(-1px);
  border-color: rgba(148, 163, 184, 0.5);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(51, 65, 85, 0.28));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.bc-automation-chat-btn__icon {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  opacity: 0.92;
}

.bc-automation-chat-btn--saved .bc-automation-chat-btn__icon {
  color: rgba(52, 211, 153, 0.9);
  opacity: 1;
}

.bc-automation-chat-btn:active {
  transform: translateY(-1px);
}

.bc-automation-chat-btn:focus-visible {
  outline: none;
  border-color: rgba(110, 231, 183, 0.85);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35), 0 10px 22px rgba(0, 0, 0, 0.28);
}

.chat-followup-next-btn {
  width: 2.6rem;
  min-width: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.9rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(59, 130, 246, 0.11));
  color: rgba(243, 244, 246, 0.98);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-followup-next-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(110, 231, 183, 0.56);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(16, 185, 129, 0.24) inset;
}

.chat-followup-next-btn:focus-visible {
  outline: none;
  border-color: rgba(110, 231, 183, 0.85);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.38), 0 10px 22px rgba(0, 0, 0, 0.3);
}

#centered-input-mode .glass-input-container {
  min-width: 800px;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 1024px) {
  #centered-input-mode .glass-input-container {
    min-width: 700px;
  }
}

@media (max-width: 768px) {
  #centered-input-mode .glass-input-container {
    min-width: calc(100vw - 2rem);
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Make centered input container wider on mobile */

  #centered-input-mode .centered-input-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .centered-suggestions-track {
    grid-template-columns: 1fr;
    grid-auto-rows: 2.3rem;
    gap: 0.6rem;
    perspective: none;
  }

  .centered-suggestions-header {
    margin-bottom: 0.4rem;
  }

  .centered-suggestions-next-btn {
    width: 2.35rem;
    height: 2.35rem;
    min-width: 44px;
    min-height: 44px;
  }

  .centered-suggestion-bubble {
    font-size: 0.9rem;
    line-height: 1.2rem;
    padding: 0.55rem 0.9rem;
    /* Mobile has taller padding than desktop, so lift the resting clamp to fit one
       line without cropping (mobile bubbles don't expand — see the hover rule below). */
    max-height: 2.6rem;
  }

  .centered-suggestion-bubble:hover,
  .centered-suggestion-bubble:focus-visible {
    /* No hover-expand on touch/mobile: tapping a suggestion sends it (touch has no
       real hover), and expanding inside the single-bubble flex row fought the layout
       and nudged the composer. Keep it compact so the input never moves; the full
       text stays available via aria-label. Overrides the base :hover expand. */
    white-space: nowrap;
    min-height: 0;
    height: auto;
    max-height: none;
    align-self: auto;
    z-index: auto;
  }

  .chat-followup-track {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .chat-followup-header {
    margin-bottom: 0.4rem;
  }

  .chat-followup-toggle-btn {
    width: 1.82rem;
    height: 1.82rem;
  }

  .chat-followup-track.mobile-single {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
  }

  .chat-followup-bubble {
    flex: 1 1 auto;
    min-height: 3.35rem;
    max-height: 3.35rem;
    font-size: 0.86rem;
    line-height: 1.15rem;
    padding: 0.52rem 0.82rem 0.88rem;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .chat-followup-next-btn {
    width: 2.45rem;
    min-width: 2.45rem;
    border-radius: 0.82rem;
  }
}

/* Glass effect overlay - on top of solid background */

.glass-input-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(35px) saturate(180%);
  -webkit-backdrop-filter: blur(35px) saturate(180%);
  border-radius: 2.5rem;
  pointer-events: none;
  z-index: 0;
}

/* Gradient border - behind solid background, only shows as border */

.glass-input-container::after {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, 
      #0000ff, #00ff00, #ffff00, #ff0000);
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  border-radius: 2.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.glass-input-container:hover::after {
  opacity: 1;
  animation: steam 20s linear infinite;
}

@keyframes steam {
  0% {
    background-position: 0 0;
  }

  50% {
    background-position: 400% 0;
  }

  100% {
    background-position: 0 0;
  }
}

/* Ensure input content is above the border effect */

.glass-input-container > * {
  position: relative;
  z-index: 1;
}

/* For disabled containers, textarea should not block clicks */

.glass-input-container.input-container-disabled > textarea {
  z-index: 0;
  /* Lower z-index so container click handler works */
}

.glass-input-container.input-container-disabled > button {
  z-index: 2;
  /* Keep button above so it's still clickable */
  pointer-events: auto;
  /* Ensure button is clickable */
}

.glass-input-container:focus-within {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 8px 32px 0 rgba(16, 185, 129, 0.15),
                0 0 0 1px rgba(16, 185, 129, 0.2) inset,
                0 0 20px rgba(16, 185, 129, 0.1);
}

/* Disabled input container styling - elegant and subtle */

.glass-input-container.input-container-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.05) inset,
                inset 0 0 0 2px #000;
  transition: all 0.3s ease;
  pointer-events: auto;
  /* Ensure container is clickable */
}

.glass-input-container.input-container-disabled::before {
  background: rgba(0, 0, 0, 0.98);
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  pointer-events: none;
  /* Allow clicks to pass through ::before */
}

.glass-input-container.input-container-disabled:hover::after {
  opacity: 0;
  animation: none;
}

.glass-input-container.input-container-disabled:focus-within {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(255, 255, 255, 0.05) inset,
                inset 0 0 0 2px #000;
}

/* Disabled input/textarea styling */

.glass-input-container.input-container-disabled textarea,
  .glass-input-container textarea.input-disabled,
  .glass-input-container textarea:disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0.7;
  pointer-events: none !important;
  /* Disable pointer events on textarea and all its content */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  /* Prevent text selection */
}

/* Ensure all child elements of disabled textarea also have pointer-events: none */

.glass-input-container.input-container-disabled textarea *,
  .glass-input-container textarea.input-disabled *,
  .glass-input-container textarea:disabled * {
  pointer-events: none !important;
}

.glass-input-container textarea.input-disabled::-moz-placeholder, .glass-input-container textarea:disabled::-moz-placeholder {
  color: rgba(255, 255, 255, 0.3);
  opacity: 0.5;
  pointer-events: none !important;
}

.glass-input-container textarea.input-disabled::placeholder,
  .glass-input-container textarea:disabled::placeholder {
  color: rgba(255, 255, 255, 0.3);
  opacity: 0.5;
  pointer-events: none !important;
}

.ai-gradient-subtle {
  background: linear-gradient(-45deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1), rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.1));
  background-size: 400% 400%;
  animation: gradient-shift 20s ease infinite;
}

.message-bubble {
  transition: min-height 0.3s ease-out, height 0.3s ease-out;
  min-height: auto;
  height: -moz-fit-content;
  height: fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: 0;
  margin-right: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  will-change: contents;
  overflow-x: hidden;
  padding-bottom: 0px;
}

/* AI messages can have max-width constraint */

#chat-mode .message-bubble.message-ai {
  padding-bottom: 0;
  /* Padding handled by pb-48 in HTML */
}

#sidebar.sidebar-hidden ~ main .message-bubble.message-ai {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.message-bubble.message-ai {
  max-width: 56rem;
  max-width: 100%;
}

/* User messages should be fit-content width and stick to the right */

.message-user {
  margin-left: auto;
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
  --tw-backdrop-blur: blur(40px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  border-radius: 2rem;
  background: rgba(16, 185, 129, 0.15);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(16, 185, 129, 0.2);
  box-shadow: 0 8px 32px 0 rgba(16, 185, 129, 0.1),
                0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  padding: 1rem 1.25rem;
  line-height: 1.5;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  min-height: -moz-fit-content;
  min-height: fit-content;
  vertical-align: middle;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}

/* Ensure all direct children are centered vertically */

.message-user > * {
  margin: 0;
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

/* Ensure spans are properly aligned */

.message-user span {
  display: inline-block;
  line-height: 1.5;
  vertical-align: middle;
}

.message-ai {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
  overflow: visible;
  min-height: -moz-fit-content;
  min-height: fit-content;
}

/* ---- Chart / graph mode messages ---- */

.chart-message {
  width: 100%;
  padding: 0.5rem 0 0.25rem;
}

.chart-container {
  width: 100%;
  height: 400px;
  min-height: 300px;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* When inside the AI bubble, make sure the bubble can grow */

.message-ai .chart-message {
  min-width: 340px;
}

/* Let chart bubbles stretch wider than normal text messages */

.message-bubble.message-ai:has(.chart-message) {
  max-width: 100% !important;
  width: 100%;
}

/* Also expand the parent message-item so the bubble can use the space */

.message-item:has(.chart-message) {
  max-width: 100% !important;
  width: 100%;
}

@media (max-width: 640px) {
  .chart-container {
    height: 380px;
    min-height: 320px;
  }

  .message-ai .chart-message {
    min-width: 0;
  }
}

.sidebar-item {
  cursor: pointer;
  border-radius: 0.5rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 0.22rem;
  padding: 0.28rem 0.6rem;
  min-height: 1.65rem;
  font-size: 0.82rem;
  line-height: 1.25;
  position: relative;
  overflow: hidden;
}

/* Smaller icon in nav-style sidebar items (New Chat / Settings / etc). */

.sidebar-item > svg.w-4,
  .sidebar-item > svg.h-4 {
  width: 0.85rem !important;
  height: 0.85rem !important;
  margin-right: 0.55rem !important;
}

.sidebar-item .chat-name-display {
  font-size: 0.82rem;
  line-height: 1.25;
}

.sidebar-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(37, 99, 235, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  transform: translateY(-1px);
}

.sidebar-item:hover::before {
  opacity: 1;
}

/* Active/selected state */

/* Iter 62: all chat-history rows render uniformly regardless of mode -- one
   emerald active highlight. Mode is conveyed only by the loader pip during
   active streaming (a functional indicator); idle rows look identical. The
   sky-blue Thinking variant was removed at the user's request. */
.sidebar-item.glass-strong,
.sidebar-item.glass-strong:hover {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25), 0 0 0 1px rgba(16, 185, 129, 0.3) inset !important;
}

.sidebar-item.glass-strong::before {
  opacity: 1;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
}

/* Clean text styling for sidebar items */

.sidebar-item,
  .sidebar-item a,
  .sidebar-item span {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
  font-size: 0.875rem;
  text-shadow: none;
  position: relative;
  z-index: 1;
}

.sidebar-item:hover,
  .sidebar-item:hover a,
  .sidebar-item:hover span {
  color: rgba(255, 255, 255, 1) !important;
}

.sidebar-item.glass-strong,
  .sidebar-item.glass-strong a,
  .sidebar-item.glass-strong span {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600;
}

/* Chat names - clean and readable - always single line */

.sidebar-item .chat-name-display,
  .sidebar-item a .chat-name-display {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  line-height: 1.5;
  display: block;
  transition: all 0.2s ease;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sidebar-item:hover .chat-name-display,
  .sidebar-item:hover a .chat-name-display {
  color: rgba(255, 255, 255, 1) !important;
}

.sidebar-item.glass-strong .chat-name-display,
  .sidebar-item.glass-strong a .chat-name-display {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600;
}

/* Better spacing for chat items */

.sidebar-item[data-chat-id] {
  padding: 0.75rem 1rem;
  min-height: 3rem;
  display: flex;
  align-items: center;
}

.sidebar-item[data-chat-id] a {
  padding: 0;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden !important;
  transition: all 0.2s ease;
}

.sidebar-item[data-chat-id] .chat-name-link {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100%;
  min-width: 0;
}

.sidebar-item[data-chat-id]:hover .chat-name-link {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Icon styling - simple and clean */

.sidebar-item svg {
  width: 1.125rem;
  height: 1.125rem;
  margin-right: 0.75rem;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}

.sidebar-item:hover svg {
  opacity: 1;
  transform: none;
}

.glass-button {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 400;
  font-size: 0.875rem;
  text-shadow: none;
  border-radius: 0.5rem;
}

.glass-button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: none;
  transform: none;
  color: rgba(255, 255, 255, 1);
}

.glass-button:active {
  background: rgba(255, 255, 255, 0.1);
  transform: none;
}

.glass-input {
  background: rgba(32, 33, 35, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.sidebar-item.glass-input {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2), 0 0 0 1px rgba(16, 185, 129, 0.2) inset;
}

.sidebar-item.glass-input::before {
  opacity: 1;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
}

.sidebar-item.glass-input,
  .sidebar-item.glass-input a,
  .sidebar-item.glass-input span {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

.sidebar-item.glass-input .chat-name-display,
  .sidebar-item.glass-input a .chat-name-display {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

.sidebar-item[data-chat-id].glass-input {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  box-shadow: none;
  transform: none;
  position: relative;
}

.sidebar-item[data-chat-id].glass-input::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 0 1px 1px 0;
}

.sidebar-item[data-chat-id].glass-input .chat-name-display,
  .sidebar-item[data-chat-id].glass-input a,
  .sidebar-item[data-chat-id].glass-input a .chat-name-display {
  color: rgba(255, 255, 255, 1);
  font-weight: 500;
  text-shadow: none;
}

.glass-input {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.glass-input:focus {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-with-ai-effect > div:last-child .glass-input:focus {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.glass-input:focus {
  --tw-border-opacity: 0.3;
}

.floating {
  animation: float 6s ease-in-out infinite;
}

.pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* Smooth scrollbar for messages - applied to chat-mode instead */

#chat-mode {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

#chat-mode::-webkit-scrollbar {
  width: 8px;
}

#chat-mode::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

#chat-mode::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

#chat-mode::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Custom scrollbar for Chat History sidebar */

#chat-list::-webkit-scrollbar,
  .overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

#chat-list::-webkit-scrollbar-track,
  .overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

#chat-list::-webkit-scrollbar-thumb,
  .overflow-y-auto::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#chat-list::-webkit-scrollbar-thumb:hover,
  .overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
}

#chat-list::-webkit-scrollbar-thumb:active,
  .overflow-y-auto::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.25);
}

/* Firefox scrollbar styling */

#chat-list,
  .overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

#chat-list:hover,
  .overflow-y-auto:hover {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* Smooth scrolling for chat history */

#chat-list {
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

/* Smooth scrolling for chat history container */

.chat-history-container {
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: none;
  will-change: scroll-position;
}

/* Custom scrollbar for chat history container */

.chat-history-container::-webkit-scrollbar {
  width: 6px;
}

.chat-history-container::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.chat-history-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}

.chat-history-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(16, 185, 129, 0.3);
}

/* Firefox scrollbar for chat history */

.chat-history-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* Modal Styles */

.step-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.step-content:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
}

.pos-provider-btn {
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.pos-provider-btn:hover {
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.pos-provider-btn:active {
  transform: scale(0.98);
}

/* Loading spinner animation */

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Placeholder text color */

/* Inline editable styles */

[contenteditable="true"] {
  outline: none;
  transition: all 0.2s ease;
}

[contenteditable="true"]:focus {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
}

[contenteditable="true"]:empty:before {
  content: attr(data-placeholder);
  color: rgba(156, 163, 175, 0.5);
}

#chat-title[contenteditable="true"]:focus {
  background: rgba(255, 255, 255, 0.05);
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
}

/* Current chat highlight - clean ChatGPT style */

.sidebar-item[data-chat-id].glass-strong {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  box-shadow: none;
  transform: none;
  position: relative;
}

.sidebar-item[data-chat-id].glass-strong::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 0 1px 1px 0;
}

.sidebar-item[data-chat-id].glass-strong .chat-name-display,
  .sidebar-item[data-chat-id].glass-strong a,
  .sidebar-item[data-chat-id].glass-strong a .chat-name-display {
  color: rgba(255, 255, 255, 1) !important;
  font-weight: 500;
  text-shadow: none;
}

/* Message action buttons */

.message-actions {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  right: 0;
  margin-bottom: 0.25rem;
  margin-right: 0.25rem;
}

.message-actions button {
  pointer-events: auto;
}

.message-item {
  position: relative;
  padding-bottom: 0px;
  width: -moz-fit-content !important;
  width: fit-content !important;
  transition: height 0.3s ease-out;
}

/* HTML content styling in messages */

/* Prevent horizontal scrolling on message bubbles */

.message-bubble {
  overflow-x: hidden;
}

/* Allow overflow for message bubbles that contain tables */

.message-bubble.has-table {
  overflow-x: visible;
}

/* Table wrapper with copy button */

.message-bubble .table-wrapper {
  position: relative;
  margin: 0.5rem 0;
  overflow: visible !important;
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Ensure message bubbles have bottom padding - must come after other message-bubble rules */

#chat-mode .message-bubble {
  padding-bottom: 16px !important;
}

/* Make tables scrollable horizontally when too wide */

.message-bubble table {
  border-collapse: collapse;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin: 0.5rem auto;
  display: table;
  table-layout: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: none;
  width: auto;
}

/* Maintain table structure */

.message-bubble table thead,
  .message-bubble table tbody {
  display: table-header-group;
}

.message-bubble table tbody {
  display: table-row-group;
}

.message-bubble table tr {
  display: table-row;
}

/* Column widths fitted per-column by JavaScript */

.message-bubble table th,
  .message-bubble table td {
  display: table-cell;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  padding: 0.5rem 1rem;
}

/* Remove excessive spacing before tables */

.message-bubble br + table,
  .message-bubble p + table {
  margin-top: 0.5rem;
}

/* List styling */

.message-bubble ul,
  .message-bubble ol {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
  list-style-position: outside;
}

.message-bubble ul {
  list-style-type: disc;
}

.message-bubble ol {
  list-style-type: decimal;
}

.message-bubble li {
  margin: 0.25rem 0;
  line-height: 1.6;
}

.message-bubble li strong {
  font-weight: 600;
}

.message-bubble table th {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.5rem 1rem;
  text-align: left;
  font-weight: 600;
}

.message-bubble table td {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.5rem 1rem;
}

.message-bubble table tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.05);
}

/* Table wrapper with copy button */

.message-bubble .table-wrapper {
  position: relative !important;
  margin: 0.5rem 0;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  display: block !important;
  width: 100%;
  max-width: 100%;
}

.message-bubble .table-wrapper table {
  margin: 0 auto;
}

.message-bubble .table-copy-btn {
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
  z-index: 10000 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  background: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 0.5rem;
  padding: 0.5rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 1) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
  pointer-events: none;
}

.message-bubble .table-wrapper:hover .table-copy-btn {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Chat header styling */

#chat-header {
  background: unset;
  background-image: none;
  background-color: unset;
  color: rgba(16, 30, 31, 0);
  border-radius: 20px;
  -o-border-image: none;
     border-image: none;
  top: 0;
  left: 0;
  transition: left 0.3s ease-in-out;
}

/* Chat header inner container with smooth transitions */

#chat-header > div {
  transition: gap 0.3s ease-in-out;
}

/* Chat header title with smooth transitions */

.chat-header-title {
  transition: transform 0.3s ease-in-out;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}

/* Version number styling with reduced opacity */

.chat-header-version {
  opacity: 0.6;
  font-weight: 500;
}

/* Iter 74: drop the "Elite V1.3" suffix on mobile so the chat header reads as
   a clean "Broker Copilot" instead of the previously-clipped "Broker Copilot
   El...". The 144 px title slot was just shy of fitting the full string at 320,
   and a truncated brand label reads as a broken UI rather than a tight one. */
@media (max-width: 768px) {
  .chat-header-version { display: none !important; }
}

/* Iter 75: compress the empty-state hero on short viewports (landscape mobile).
   The default layout has pt-24 + 96 px mascot + 72 px hero text + 48 px gap
   stack, which pushes the composer below the fold at 320 px viewport height.
   Hide the mascot, shrink the hero, and pull the parent padding so the picker /
   suggestion / composer triplet stays visible without scrolling. */
@media (max-height: 500px) {
  #centered-input-mode { padding-top: 0.75rem !important; padding-bottom: 0.5rem !important; }
  #centered-input-mode .text-center.mb-12 { margin-bottom: 0.4rem !important; }
  #centered-input-mode .text-center.mb-12 > .inline-block { display: none !important; }
  #centered-input-mode .text-center.mb-12 > h3 { font-size: 1.15rem !important; line-height: 1.2 !important; margin-bottom: 0.15rem !important; }
  #centered-input-mode .text-center.mb-12 > p { font-size: 0.8rem !important; line-height: 1.2 !important; }
  #centered-input-mode .mode-picker { padding: 0.18rem !important; }
  #centered-input-mode .mode-picker-btn { padding-top: 0.3rem !important; padding-bottom: 0.3rem !important; }
  #centered-suggestions { margin-bottom: 0.4rem !important; }
}

/* Logo animation container - smooth width and opacity transitions */

#chat-header-logo {
  display: flex;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.4s ease-in-out, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s ease-in-out, margin-right 0.3s ease-in-out, min-width 0.3s ease-in-out;
  will-change: opacity, transform, width, margin-right;
  align-items: center;
  width: 0;
  min-width: 0;
  margin-right: 0;
  overflow: hidden;
  pointer-events: none;
}

/* When logo should be visible */

#chat-header-logo:not(.hidden) {
  opacity: 1;
  transform: translateX(0);
  width: 2rem;
  min-width: 2rem;
  margin-right: 0.75rem;
  pointer-events: auto;
}

/* When logo is hidden */

#chat-header-logo.\!hidden {
  opacity: 0 !important;
  transform: translateX(-20px) !important;
  width: 0 !important;
  min-width: 0 !important;
  margin-right: 0 !important;
}

#chat-header-logo.hidden {
  opacity: 0;
  transform: translateX(-20px);
  width: 0;
  min-width: 0;
  margin-right: 0;
}

/* Show logo in chat header when sidebar is hidden */

#sidebar.sidebar-hidden ~ main #chat-header-logo {
  display: flex !important;
  opacity: 1;
  transform: translateX(0);
}

/* Ensure chat content stays centered when sidebar is hidden */

/* Parent container centers main when sidebar is hidden */

/* Iter 116: chat-page-only rules (main is flex-col, so justify-content:center
   centers VERTICALLY and align-items:flex-start kills cross-axis stretch).
   They used to fire on EVERY sidebar page -- on /connectors/ the collapsed
   sidebar garbled the whole layout. Scope to mains containing the chat surface
   (#chat-main-surface lives only in chat.html). */
div.flex.h-screen:has(#sidebar.sidebar-hidden):has(#chat-main-surface) {
  justify-content: center;
}

#sidebar.sidebar-hidden ~ main:has(#chat-main-surface) {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: 100vw !important;
  flex: 1 1 100vw !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#sidebar.sidebar-hidden ~ main:has(#chat-main-surface) > .flex-1 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Make chat container wider and centered when sidebar is hidden */

#sidebar.sidebar-hidden ~ main #messages-container {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  /* Changed from center to stretch to allow proper message alignment */
}

/* Ensure message items maintain proper alignment when sidebar is hidden */

#sidebar.sidebar-hidden ~ main .message-item {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure user messages align to the right within the centered container */

#sidebar.sidebar-hidden ~ main .message-item.justify-end {
  display: flex !important;
  justify-content: flex-end !important;
}

/* Ensure AI messages align to the left within the centered container */

#sidebar.sidebar-hidden ~ main .message-item.justify-start {
  display: flex !important;
  justify-content: flex-start !important;
}

/* Ensure chat-mode extends to full width when sidebar is hidden */

/* Scrollbar stays at right edge because #chat-mode uses 100% of main */

#sidebar.sidebar-hidden ~ main #chat-mode {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* The inner content wrapper stretches full width; centering is handled by justify-center */

/* Content width is controlled at the .chat-container-responsive level, not here */

#sidebar.sidebar-hidden ~ main #chat-mode > div.flex-1 {
  width: 100% !important;
  max-width: none !important;
}

/* Keep chat content the same width regardless of sidebar state */

#sidebar.sidebar-hidden ~ main:has(#chat-main-surface) .max-w-4xl {
  max-width: 64rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* Keep input box the same width regardless of sidebar state.
   Iter 116: scoped to the chat surface -- .max-w-4xl/.max-w-5xl are generic
   utilities also used by /connectors/ and other sidebar pages. */

#sidebar.sidebar-hidden ~ main:has(#chat-main-surface) .max-w-5xl {
  max-width: 64rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* Keep input area the same width regardless of sidebar state */

#sidebar.sidebar-hidden ~ main #chat-input-area {
  width: 100% !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.message-bubble .table-copy-btn:hover {
  background: rgba(0, 0, 0, 1) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  background: rgba(0, 0, 0, 0.95);
  color: rgba(255, 255, 255, 1);
  transform: scale(1.1);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.message-bubble .table-copy-btn:active {
  transform: scale(0.95);
}

.message-bubble code {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-family: 'Courier New', monospace;
  font-size: 0.875em;
}

.message-bubble pre {
  background: rgba(255, 255, 255, 0.1);
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0.5rem 0;
}

.message-bubble pre code {
  background: transparent;
  padding: 0;
}

.message-bubble a {
  color: #60a5fa;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.message-bubble a:hover {
  color: #93c5fd;
}

/* Report download button — compact icon pill */

.message-bubble a.report-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  margin: 0.35rem 0;
  border-radius: 0.5rem;
  background: rgba(24, 92, 55, 0.2);
  border: 1px solid rgba(33, 163, 102, 0.3);
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  cursor: pointer;
  line-height: 1;
}

.message-bubble a.report-download-btn:hover {
  background: rgba(24, 92, 55, 0.35);
  border-color: rgba(33, 163, 102, 0.5);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(33, 163, 102, 0.15);
}

.message-bubble a.report-download-btn:active {
  transform: translateY(0);
}

.message-bubble a.report-download-btn:hover .report-download-arrow {
  color: #fff;
  transform: translateY(1px);
}

.message-bubble strong {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.message-bubble em {
  font-style: italic;
}

/* Heading styles for AI messages (override Tailwind reset) */

.message-bubble h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0.75rem 0 0.5rem;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.3;
}

.message-bubble h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0.75rem 0 0.5rem;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.3;
}

.message-bubble h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0.625rem 0 0.375rem;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.3;
}

.message-bubble h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.5rem 0 0.375rem;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.3;
}

.message-bubble h5 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0.5rem 0 0.25rem;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.3;
}

.message-bubble h6 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.5rem 0 0.25rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.3;
}

.message-bubble h1:first-child,
  .message-bubble h2:first-child,
  .message-bubble h3:first-child,
  .message-bubble h4:first-child,
  .message-bubble h5:first-child,
  .message-bubble h6:first-child {
  margin-top: 0;
}

/* Remove excessive line breaks and spacing */

.message-bubble p {
  margin: 0.5rem 0;
}

.message-bubble p:first-child {
  margin-top: 0;
}

.message-bubble p:last-child {
  margin-bottom: 0;
}

/* Better text positioning for user messages */

.message-user p {
  margin: 0;
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

.message-user p:first-child {
  margin-top: 0;
}

.message-user p:last-child {
  margin-bottom: 0;
}

/* Loading spinner animation */

.loading-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0;
}

.loading-gif {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  max-width: 64px !important;
  max-height: 64px !important;
}

.message-bubble .loading-gif {
  width: 50px !important;
  height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
}

/* Loading status text with horizontal highlight sweep */

.loading-status-container {
  display: flex;
  align-items: center;
}

.loading-status-text {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-left: 10px;
  white-space: nowrap;
  background: linear-gradient(
      90deg,
      rgba(160, 165, 175, 0.45) 0%,
      rgba(160, 165, 175, 0.45) 35%,
      rgba(230, 232, 240, 0.95) 50%,
      rgba(160, 165, 175, 0.45) 65%,
      rgba(160, 165, 175, 0.45) 100%
    );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: loading-text-shine 2.2s linear infinite;
}

.loading-status-text.fade-switch {
  animation: loading-text-shine 2.2s linear infinite, loading-text-fade-switch 0.4s ease-in-out;
}

@keyframes loading-text-shine {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: -100% 50%;
  }
}

@keyframes loading-text-fade-switch {
  0% {
    opacity: 0.3;
    transform: translateY(2px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Messages container max-width */

#chat-mode > .flex-1.flex.justify-center.px-6.py-10 {
  width: -moz-fit-content !important;
  width: fit-content !important;
}

/* When sidebar is hidden, override fit-content so the wrapper expands to full width */

/* This prevents the chat from shrinking when viewport width increases with sidebar closed */

#sidebar.sidebar-hidden ~ main #chat-mode > .flex-1.flex.justify-center.px-6.py-10 {
  width: 100% !important;
  max-width: 100% !important;
}

/* Chat container responsive max-width - scales with screen size */

/* JavaScript will override this with dynamic values based on zoom */

#chat-mode > .flex-1.flex.justify-center.px-6.py-10 > div,
  .chat-container-responsive {
  max-width: 900px;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin-top: 30px !important;
  margin-bottom: 0px !important;
  padding-bottom: 0 !important;
}

/* Keep chat container the same width regardless of sidebar state */

#sidebar.sidebar-hidden ~ main .chat-container-responsive {
  max-width: 900px !important;
}

/* Scale max-width with zoom - same width regardless of sidebar state */

@media (min-width: 1000px) {
  #chat-mode > .flex-1.flex.justify-center.px-6.py-10 > div {
    max-width: min(900px, calc(100vw * 0.9)) !important;
  }

  #sidebar.sidebar-hidden ~ main #chat-mode > .flex-1.flex.justify-center.px-6.py-10 > div {
    max-width: min(900px, calc(100vw * 0.9)) !important;
  }
}

/* Legacy loading dots animation - kept for backward compatibility */

@keyframes loading-dot-pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.8);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
  }
}

/* Notification styles */

#notification-container {
  max-width: 400px;
}

/* Sidebar container with transition */

.sidebar-container {
  transition: transform 0.3s ease-in-out;
}

/* Iter 80: honor prefers-reduced-motion. The sidebar drawer slide + the
   suggestion bubble swap + the mode-picker button hover all use CSS
   transitions; a user who has "reduce motion" enabled should get instant
   state changes. Kill only the transition/animation, not the state itself,
   so functionality is unchanged. Existing reduced-motion blocks in chat.html
   cover the agent-turn animations; this covers the shared shell. */
@media (prefers-reduced-motion: reduce) {
  .sidebar-container,
  .centered-suggestion-bubble,
  .mode-picker-btn,
  .agent-connector-chip {
    transition: none !important;
  }
  .centered-suggestions-track.is-leaving .centered-suggestion-bubble,
  .centered-suggestions-track.is-entering .centered-suggestion-bubble {
    transform: none !important;
  }
}

.sidebar-container.sidebar-hidden {
  transform: translateX(-100%);
  pointer-events: none;
  width: 0 !important;
  min-width: 0 !important;
  flex: 0 0 0 !important;
  overflow: hidden;
}

/* Premium iOS Liquid Glass Effects for Sidebar */

.sidebar-with-ai-effect,
  .chat-nav-with-ai-effect {
  position: relative;
  overflow: hidden;
  background: rgba(32, 33, 35, 0.8);
}

.sidebar-with-ai-effect::before,
  .chat-nav-with-ai-effect::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
      radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.25) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.25) 0%, transparent 50%);
  animation: ai-drift 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  filter: blur(50px);
  opacity: 0.8;
}

.sidebar-with-ai-effect::after,
  .chat-nav-with-ai-effect::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -30%;
  width: 160%;
  height: 160%;
  background: 
      radial-gradient(circle at 60% 40%, rgba(5, 150, 105, 0.2) 0%, transparent 55%),
      radial-gradient(circle at 40% 80%, rgba(37, 99, 235, 0.2) 0%, transparent 55%);
  animation: ai-float-x 25s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  filter: blur(50px);
  opacity: 0.7;
}

/* Ensure content is above the animated background */

.sidebar-with-ai-effect > *,
  .chat-nav-with-ai-effect > * {
  position: relative;
  z-index: 1;
}

/* Unified sidebar sections - nav and chat history share the same look */

.sidebar-with-ai-effect nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  border-bottom: none;
  border-bottom-width: 0;
  border-bottom-color: rgba(0, 0, 0, 0);
  border-bottom-style: none;
  -o-border-image: none;
     border-image: none;
  margin: 0;
  padding: 0.75rem;
  padding-bottom: 0.25rem;
  width: 100%;
  height: auto;
}

.sidebar-with-ai-effect .chat-history-container {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Better visibility for navigation items */

.sidebar-with-ai-effect nav .sidebar-item {
  color: rgba(255, 255, 255, 0.9) !important;
  margin-bottom: 0.375rem;
}

.sidebar-with-ai-effect nav .sidebar-item:hover {
  color: rgba(255, 255, 255, 1) !important;
}

/* Chat history container spacing - flush with nav above */

.chat-history-container {
  padding: 0.25rem 0.75rem;
}

/* Chat History title - subtle inline label */

.chat-history-container > div:first-child {
  position: sticky;
  top: 0;
  z-index: 10;
  background: transparent;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  margin-bottom: 0.25rem;
}

/* Chat history label (outside scrollable container) */

.flex-1.flex.flex-col.min-h-0 > .flex-shrink-0:first-child {
  position: relative;
  z-index: 10;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Keep sidebar header transparent to match unified panel */

.sidebar-with-ai-effect .flex-1.flex.flex-col.min-h-0 > .flex-shrink-0:first-child {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Sidebar header - transparent to unify with rest of panel */

#sidebar > div.px-3.py-4.border-b.flex-shrink-0:first-child {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Better spacing for chat list */

#chat-list {
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#chat-list .sidebar-item {
  margin-bottom: 0;
}

/* Clean borders and dividers */

.sidebar-with-ai-effect .border-b,
  .sidebar-with-ai-effect .border-t {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Sidebar header border styling - subtle bottom divider */

#sidebar > div.px-3.py-4.border-b {
  -o-border-image: none;
     border-image: none;
  border-width: 0;
  border-bottom-width: 1px;
  border-right-width: 0;
  border-right-color: rgba(0, 0, 0, 0);
  border-right-style: none;
  border-left-width: 0;
  border-left-color: rgba(0, 0, 0, 0);
  border-left-style: none;
  border-top-width: 0;
  border-top-color: rgba(0, 0, 0, 0);
  border-top-style: none;
  border-bottom-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(0, 0, 0, 0);
  border-style: solid;
}

/* All sidebar child sections transparent for unified look */

.sidebar-with-ai-effect > div:first-child,
  .sidebar-with-ai-effect > div:last-child,
  .sidebar-with-ai-effect > nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.sidebar-with-ai-effect > div:last-child .glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

/* Clean text colors */

.sidebar-with-ai-effect .text-gray-400 {
  color: rgba(255, 255, 255, 0.6) !important;
  text-shadow: none;
}

.sidebar-with-ai-effect .text-gray-300 {
  color: rgba(255, 255, 255, 0.8) !important;
}

.sidebar-with-ai-effect .text-white {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Remove gradient text, use solid white */

.sidebar-with-ai-effect .bg-gradient-to-r {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Floating Action Buttons */

.floating-action-btn {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.floating-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 1);
  transform: translateX(4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.floating-action-btn:active {
  transform: translateX(2px);
}

.floating-action-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Floating actions container animation */

#floating-actions {
  animation: slideInLeft 0.3s ease-out;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px) translateY(-50%);
  }

  to {
    opacity: 1;
    transform: translateX(0) translateY(-50%);
  }
}

/* Sidebar backdrop overlay (used on mobile) */

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 39;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

.sidebar-backdrop.active {
  display: block;
  opacity: 1;
}

.sidebar-backdrop.\!active {
  display: block !important;
  opacity: 1 !important;
}

/* Mobile: Hide floating actions, show mobile menu button */

@media (max-width: 768px) {
  /* Iter 91: use real viewport height so the container shrinks with the mobile
     software keyboard. --app-height is set by base.html's visualViewport listener
     (base.html:38-56) so it tracks the actual visible viewport as the keyboard
     opens/closes. 100dvh is the fallback for the very first frame before the JS
     runs (or if visualViewport is unsupported). Order matters: the LAST identical
     property wins the cascade, so --app-height MUST come after 100dvh. Previously
     100dvh came last and stayed at the pre-keyboard height, pushing the composer
     under the keyboard. */
  .flex.h-screen {
    height: 100dvh !important;
    height: var(--app-height, 100vh) !important;
  }

  /* Mobile sidebar: overlay with glass effect */
  .sidebar-container {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 40;
    height: 100dvh;
    height: var(--app-height, 100vh);
    width: 16rem !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    box-sizing: border-box;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  }

  .sidebar-container.sidebar-hidden {
    /* `transform: translateX(-100%)` alone fails on some headless renderers and
       a few mobile browsers that promote backdrop-filter elements to a layer
       where transform changes are ignored. `left: -100%` is a robust secondary
       hide that works everywhere; transform stays for the slide-in animation. */
    transform: translateX(-100%);
    left: -100%;
    pointer-events: none;
    width: 16rem !important;
    min-width: 0 !important;
    flex: none !important;
    overflow: hidden;
  }

  /* On mobile the sidebar is an overlay, so undo the desktop
       rules that shrink #chat-mode and its children by 256px */

  #sidebar:not(.sidebar-hidden) ~ main #chat-mode {
    width: 100% !important;
    margin-right: 0 !important;
  }

  #sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.flex-1.flex.justify-center,
    main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.flex-1.flex.justify-center {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }

  /* --- Mobile top nav bar: glass background, full-width row --- */

  #chat-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    height: calc(3.5rem + env(safe-area-inset-top, 0px));
    display: flex !important;
    align-items: flex-end !important;
    box-sizing: border-box;
    z-index: 35 !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Glass effect */
    background: rgba(17, 24, 39, 0.65) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* Inner flex row: center items vertically, tight gap */

  #chat-header > .flex.items-center {
    flex: 0 1 auto;
    height: 3.5rem;
    align-items: center;
    gap: 0.375rem !important;
    -moz-column-gap: 0.375rem !important;
         column-gap: 0.375rem !important;
  }

  /* Compact menu button inside header */

  #chat-header .mobile-menu-btn {
    width: 2.75rem !important;
    height: 2.75rem !important;
    min-width: 2.75rem;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #chat-header .mobile-menu-btn svg {
    width: 1.375rem !important;
    height: 1.375rem !important;
  }

  /* Iter 66: hide the redundant in-header brand logo on mobile. The
     hamburger and the chat-header-title already identify the app; the
     logo was pushing the title right and causing it to clip behind the
     fixed status widget at top-right. Selector specificity reaches
     (0,3,1) so it outranks the (0,2,1) sidebar-hidden show-rule. */

  #sidebar.sidebar-hidden ~ main #chat-header #chat-header-logo,
  #chat-header #chat-header-logo {
    display: none !important;
  }

  /* Iter 66+67: title sits flush after the hamburger and truncates instead
     of overlapping the fixed status widget. Right margin = 11rem covers
     the 82px widget + 16px right inset + 12px breathing gap; tuned at 320 px
     where Iter 66's 9.5rem left a 16px clip. */

  #chat-header .chat-header-title {
    margin-left: 0.25rem !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-width: calc(100vw - 11rem) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 1rem !important;
  }

  /* Iter 66: composer + mode-picker touch targets meet the 44pt Apple HIG
     / 48dp Material minimum on mobile. The visible icon size stays the
     same; the hit area expands via min-width / min-height + padding. */

  #centered-attach-button,
  #centered-connectors-button,
  #centered-send-button,
  #agent-attach-button,
  #agent-connectors-button,
  #agent-send-button {
    min-width: 2.75rem !important;
    min-height: 2.75rem !important;
  }

  .mode-picker-btn {
    min-height: 2.75rem !important;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
  }

  /* User status widget: sits inside the same glass bar */

  #user-status-widget {
    position: fixed !important;
    top: env(safe-area-inset-top, 0px) !important;
    right: 1rem !important;
    height: 3.5rem !important;
    display: flex !important;
    align-items: center !important;
    z-index: 36 !important;
  }
  /* Iter 77: the inner status button uses Tailwind h-10 (40 px) which is under
     the 44 px touch-target standard. Bump to 44 px on mobile without touching
     the desktop class, so the button is fingertip-safe. */
  #user-status-btn {
    height: 2.75rem !important;
    min-height: 2.75rem !important;
  }
  /* Iter 84: dropdown menu items (Buy credits / System Status / Export Chat /
     Sign Out) render at 16-33 px on mobile -- below the 44 px touch target.
     Give each anchor / button in the dropdown a min-height of 2.75 rem so a
     fingertip can safely hit the right item without mis-tapping a sibling. */
  #user-status-dropdown a,
  #user-status-dropdown button {
    min-height: 2.75rem !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Hide the standalone share button on mobile (moved to dropdown) */

  #share-chat-btn {
    display: none !important;
  }

  /* Show the export chat button inside the dropdown on mobile */

  #dropdown-export-chat-btn {
    display: flex !important;
  }

  /* Push messages down so they clear the fixed header on mobile.
     Iter 91: mirror the same offset to #agent-chat-mode -- the Agent surface
     has the same .flex-1.flex.justify-center wrapper markup but was missing
     from this selector list, so the first message rendered UNDER the fixed
     header on any render_via_agent chat. */
  #chat-mode > .flex-1.flex.justify-center,
  #agent-chat-mode > .flex-1.flex.justify-center {
    padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
  }

  /* Reset the inline margin-top on mobile since the wrapper padding handles it */

  .chat-container-responsive {
    margin-top: 0px !important;
  }

  /* Also push centered-input-mode down on mobile */

  #centered-input-mode {
    padding-top: calc(2rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Hide floating actions completely on mobile */

  #floating-actions {
    display: none !important;
  }

  /* Mobile menu button styling */

  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .mobile-menu-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  }

  .mobile-menu-btn:active {
    transform: translateY(0);
  }

  .mobile-menu-btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Show mobile menu button only when sidebar is hidden */

  #mobile-open-menu-btn.hidden {
    display: none !important;
  }

  /* Hide the centered-mode menu button on mobile — nav bar already has one */

  #mobile-open-menu-btn-centered {
    display: none !important;
  }

  /* Show shorter placeholder on mobile */
  /* Iter 82: legacy per-message action row (copy / report) uses opacity-0 +
     group-hover:opacity-100 to only reveal on hover. Touch devices never hover
     so the buttons are permanently invisible on mobile. Force visibility. */
  .message-actions {
    opacity: 1 !important;
  }

  /* Iter 79: keyboard focus visible on composer / hamburger / send / status buttons.
     Tailwind's default reset kills the browser focus ring (outline: none) and none of
     these buttons opts in via focus:ring-*. Add a shared :focus-visible outline so
     keyboard users can see where they are without visually disrupting mouse users.
     Emerald matches the app accent. */
  #mobile-open-menu-btn:focus-visible,
  #centered-attach-button:focus-visible,
  #centered-connectors-button:focus-visible,
  #centered-send-button:focus-visible,
  #user-status-btn:focus-visible {
    outline: 2px solid rgba(52, 211, 153, 0.85) !important;
    outline-offset: 2px !important;
  }

  /* Iter 78: alpha 0.35 on the mobile placeholder text blends to a ~3.2:1 contrast
     against the dark page bg -- below WCAG AA 4.5:1. Bump to 0.55 (~6.3:1) so it
     still reads as "hint text" but passes AA. Desktop rule (input::placeholder
     color:#9ca3af) is unchanged and already ~7.6:1. */
  #centered-message-input::-moz-placeholder, #message-input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1 !important;
    font-size: inherit;
    font-weight: 400;
    font-style: normal;
  }

  #centered-message-input::placeholder,
    #message-input::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1 !important;
    font-size: inherit;
    font-weight: 400;
    font-style: normal;
  }

  /* Make chat input area full width on mobile with side padding */

  #chat-input-area {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Ensure inner wrapper div doesn't constrain width */

  #chat-input-area > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Remove margins from chat form on mobile */

  #chat-form {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Remove max-width constraint on mobile for input containers */

  #chat-form .chat-form-top-section .max-w-5xl,
    #chat-image-previews.max-w-5xl {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Ensure chat-form-top-section doesn't constrain width */

  #chat-form .chat-form-top-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Make chat input container full width on mobile */

  #chat-form .glass-input-container,
    #centered-chat-form .glass-input-container {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Override mx-auto (margin auto) on mobile for input containers */

  #chat-form .glass-input-container.mx-auto,
    #centered-chat-form .glass-input-container.mx-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Fix textarea overflow on mobile - reduce padding */

  .glass-input-container textarea {
    padding-left: 0.75rem !important;
    /* px-3 instead of px-5 */
    padding-right: 0.75rem !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Hide scrollbar but keep scrolling functionality */
    scrollbar-width: none !important;
    /* Firefox */
    -ms-overflow-style: none !important;
    /* IE and Edge */
  }

  /* Hide scrollbar for webkit browsers on mobile */

  .glass-input-container textarea::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Reduce container padding on mobile to prevent overflow */

  .glass-input-container {
    padding-left: 0.5rem !important;
    /* p-2 instead of p-3 */
    padding-right: 0.5rem !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Reduce button padding on mobile */

  .glass-input-container button {
    padding: 0.5rem !important;
    /* p-2 instead of p-3/p-4 */
    margin-left: 0.25rem !important;
    /* ml-1 instead of ml-2/ml-3 */
    flex-shrink: 0;
  }

  /* --- Mobile table fixes --- */

  /* Constrain AI message bubbles to viewport so tables don't blow out */

  .message-bubble.message-ai {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
  }

  /* User bubbles stay fit-content so they wrap tightly around text */

  .message-bubble.message-user {
    max-width: 85% !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
  }

  .message-bubble.has-table {
    overflow-x: hidden !important;
  }

  /* Table wrapper becomes the horizontal scroll container */

  .message-bubble .table-wrapper {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Let tables scroll inside wrapper without forcing centering */

  .message-bubble .table-wrapper table {
    margin: 0 !important;
  }

  /* Reduce cell padding on mobile for tighter tables */

  .message-bubble table th,
    .message-bubble table td {
    padding: 0.375rem 0.5rem !important;
    font-size: 0.8125rem;
  }

  /* --- Mobile chart fixes --- */

  /* Reduce side padding on chat area to give charts more room */

  #chat-mode > .flex-1.flex.justify-center {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Ensure chart containers stay within viewport */

  .chart-message {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .chart-container {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Constrain the chat-container-responsive on mobile */

  .chat-container-responsive {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Add breathing room above the first message on mobile */

  #messages-list > .message-item:first-child {
    padding-top: 0.25rem;
  }

  /* Settings page: align header with user status widget on mobile */

  .settings-page-content {
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0px)) !important;
  }

  /* Hide disclaimer and divider line on mobile */

  .chat-disclaimer {
    display: none !important;
  }

  #chat-form .divider-line-middle {
    display: none !important;
  }

  #chat-form .chat-form-bottom-section {
    display: none !important;
  }

  /* Limit Intercom messenger height on mobile */

  .intercom-messenger-frame,
    .intercom-lightweight-app-messenger {
    max-height: 70vh !important;
    height: 70vh !important;
    bottom: 0 !important;
    top: auto !important;
  }

  #intercom-container .intercom-messenger-frame,
    #intercom-container .intercom-lightweight-app-messenger {
    max-height: 70vh !important;
    height: 70vh !important;
  }

  .intercom-app > div,
    .intercom-namespace .intercom-dfosxs {
    max-height: 70vh !important;
  }

  /* Use real viewport height instead of 100vh which ignores browser chrome */

  /* Mobile sidebar: overlay with glass effect */

  /* On mobile the sidebar is an overlay, so undo the desktop
       rules that shrink #chat-mode and its children by 256px */

  /* --- Mobile top nav bar: glass background, full-width row --- */

  /* Inner flex row: center items vertically, tight gap */

  /* Compact menu button inside header */

  /* Compact logo inside header */

  /* Pull title closer to the logo */

  /* User status widget: sits inside the same glass bar */

  /* Hide the standalone share button on mobile (moved to dropdown) */

  /* Show the export chat button inside the dropdown on mobile */

  /* Push messages down so they clear the fixed header on mobile */

  /* Reset the inline margin-top on mobile since the wrapper padding handles it */

  /* Also push centered-input-mode down on mobile */

  /* Hide floating actions completely on mobile */

  /* Mobile menu button styling */

  /* Show mobile menu button only when sidebar is hidden */

  #mobile-open-menu-btn.\!hidden {
    display: none !important;
  }

  /* Hide the centered-mode menu button on mobile — nav bar already has one */

  /* Show shorter placeholder on mobile */

  /* Make chat input area full width on mobile with side padding */

  /* Ensure inner wrapper div doesn't constrain width */

  /* Remove margins from chat form on mobile */

  /* Remove max-width constraint on mobile for input containers */

  /* Ensure chat-form-top-section doesn't constrain width */

  /* Make chat input container full width on mobile */

  /* Override mx-auto (margin auto) on mobile for input containers */

  /* Fix textarea overflow on mobile - reduce padding */

  /* Hide scrollbar for webkit browsers on mobile */

  /* Reduce container padding on mobile to prevent overflow */

  /* Reduce button padding on mobile */

  /* --- Mobile table fixes --- */

  /* Constrain AI message bubbles to viewport so tables don't blow out */

  /* User bubbles stay fit-content so they wrap tightly around text */

  /* Table wrapper becomes the horizontal scroll container */

  /* Let tables scroll inside wrapper without forcing centering */

  /* Reduce cell padding on mobile for tighter tables */

  /* --- Mobile chart fixes --- */

  /* Reduce side padding on chat area to give charts more room */

  /* Ensure chart containers stay within viewport */

  /* Constrain the chat-container-responsive on mobile */

  /* Add breathing room above the first message on mobile */

  /* Settings page: align header with user status widget on mobile */

  /* Hide disclaimer and divider line on mobile */

  /* Limit Intercom messenger height on mobile */
}

/* Desktop: Hide mobile menu button and backdrop */

@media (min-width: 769px) {
  .mobile-menu-btn {
    display: none !important;
  }

  .sidebar-backdrop {
    display: none !important;
  }
}

/* Sidebar toggle button */

#sidebar-toggle {
  opacity: 0.7;
}

#sidebar-toggle:hover {
  opacity: 1;
}

/* Edit (rename) button visibility */

.edit-chat-btn {
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: all 0.2s ease;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.25);
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  color: rgba(59, 130, 246, 0.9);
  margin-left: 0;
}

.edit-chat-btn svg {
  width: 1rem !important;
  height: 1rem !important;
  stroke: currentColor !important;
  fill: none !important;
  transition: stroke 0.2s ease;
  flex-shrink: 0;
  margin-right: 0 !important;
  opacity: 1 !important;
}

.sidebar-item:hover .edit-chat-btn {
  opacity: 1;
  width: 2rem;
  margin-left: 0.5rem;
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.35);
  color: rgba(59, 130, 246, 1);
}

.edit-chat-btn:hover {
  background: rgba(59, 130, 246, 0.3) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  color: rgba(255, 255, 255, 0.95) !important;
}

.edit-chat-btn:hover svg {
  stroke: currentColor;
}

/* Improved delete button visibility */

.delete-chat-btn {
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: all 0.2s ease;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.25);
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  color: rgba(239, 68, 68, 0.9);
  margin-left: 0;
}

.delete-chat-btn svg {
  width: 1rem !important;
  height: 1rem !important;
  stroke: currentColor !important;
  fill: none !important;
  transition: stroke 0.2s ease;
  flex-shrink: 0;
  margin-right: 0 !important;
  opacity: 1 !important;
}

.sidebar-item:hover .delete-chat-btn {
  opacity: 1;
  width: 2rem;
  margin-left: 0.25rem;
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.35);
  color: rgba(239, 68, 68, 1);
}

.delete-chat-btn:hover {
  background: rgba(239, 68, 68, 0.3) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
  color: rgba(255, 255, 255, 0.95) !important;
}

.delete-chat-btn:hover svg {
  stroke: currentColor;
}

/* Chat loading spinner */

.chat-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 0.5rem;
  color: rgba(255, 255, 255, 0.7);
  z-index: 2;
}

.chat-loading-spinner svg {
  width: 1rem !important;
  height: 1rem !important;
  margin-right: 0 !important;
  opacity: 1 !important;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Sign Out button styling */

#user-status-dropdown .sign-out-icon {
  padding-left: 0;
  padding-right: 0;
}

#user-status-dropdown .sign-out-text {
  margin-left: 7px;
}

/* POS Connections hover effect - match sidebar-item hover */

[data-pos-provider]:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Connect POS container hover effect */

.connect-pos-container-hover {
  background: rgba(32, 33, 35, 0.8);
}

.connect-pos-container-hover:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Close modal button hover effect */

.close-modal-btn-hover {
  background: rgba(32, 33, 35, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.close-modal-btn-hover:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 1) !important;
}

.close-modal-btn-hover:hover svg {
  color: rgba(255, 255, 255, 1);
}

/* Drag-and-drop overlay for chat area */

.drag-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 3px dashed rgba(34, 197, 94, 0.6);
  border-radius: 1rem;
  margin: 0.75rem;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.drag-drop-overlay.visible {
  opacity: 1;
}

.drag-drop-overlay.\!visible {
  opacity: 1 !important;
}

.drag-drop-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}

/* Image Upload Styles */

#image-upload-modal {
  z-index: 50;
}

#image-drop-zone {
  transition: all 0.3s ease;
}

#image-selected-files img {
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

#image-selected-files img:hover {
  border-color: rgba(34, 197, 94, 0.5);
  transform: scale(1.05);
}

/* Image Preview Thumbnails (above input) */

#centered-image-previews,
  #chat-image-previews {
  position: relative;
  align-items: flex-start;
  justify-content: flex-start;
}

.image-preview-thumbnail {
  position: relative;
}

.image-preview-thumbnail img {
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.image-preview-thumbnail:hover img {
  border-color: rgba(34, 197, 94, 0.5);
  transform: scale(1.05);
}

.image-preview-delete {
  transition: opacity 0.2s ease;
  z-index: 10;
}

/* Message Image Thumbnails */

.message-images-container {
  max-width: 500px;
}

.message-images-container.justify-end {
  margin-left: auto;
}

.image-message-thumbnail {
  position: relative;
  display: flex;
  align-items: center;
}

.image-message-thumbnail img {
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  height: 3.5rem;
  width: auto;
  max-width: 200px;
  -o-object-fit: contain;
     object-fit: contain;
}

.image-message-thumbnail:hover img {
  border-color: rgba(34, 197, 94, 0.5);
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Image View Modal */

#image-view-modal {
  z-index: 60;
  cursor: pointer;
}

#image-view-modal .relative {
  cursor: default;
}

#image-view-modal img {
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  cursor: default;
  pointer-events: auto;
}

#close-image-view-btn {
  z-index: 100;
  cursor: pointer;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* Image placeholder */

.image-placeholder {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* Image Upload Button */

#centered-image-upload-btn,
  #chat-image-upload-btn {
  transition: all 0.2s ease;
}

#centered-image-upload-btn:hover,
  #chat-image-upload-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.1);
}

/* Image Preview Container */

#centered-image-previews,
  #chat-image-previews {
  animation: fadeIn 0.3s ease;
  position: relative;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 0.5rem;
  padding-left: 1.5rem;
  margin-left: 0.5rem;
}

/* Image selected files in modal */

#image-selected-files {
  min-height: 60px;
}

#image-selected-files .image-preview-thumbnail {
  position: relative;
}

#image-selected-files .image-preview-thumbnail img {
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

#image-selected-files .image-preview-thumbnail:hover img {
  border-color: rgba(34, 197, 94, 0.5);
  transform: scale(1.05);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.\!visible {
  visibility: visible !important;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-4 {
  inset: 1rem;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.-top-2\.5 {
  top: -0.625rem;
}

.bottom-0 {
  bottom: 0px;
}

.left-0 {
  left: 0px;
}

.left-1\/2 {
  left: 50%;
}

.left-1\/4 {
  left: 25%;
}

.left-4 {
  left: 1rem;
}

.left-6 {
  left: 1.5rem;
}

.right-0 {
  right: 0px;
}

.right-1\/4 {
  right: 25%;
}

.right-20 {
  right: 5rem;
}

.right-3 {
  right: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.right-6 {
  right: 1.5rem;
}

.top-0 {
  top: 0px;
}

.top-1\/2 {
  top: 50%;
}

.top-4 {
  top: 1rem;
}

.top-6 {
  top: 1.5rem;
}

.top-full {
  top: 100%;
}

.-z-10 {
  z-index: -10;
}

.-z-20 {
  z-index: -20;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-\[10010\] {
  z-index: 10010;
}

.z-\[10020\] {
  z-index: 10020;
}

.z-\[100\] {
  z-index: 100;
}

.z-\[70\] {
  z-index: 70;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.col-span-full {
  grid-column: 1 / -1;
}

.m-0 {
  margin: 0px;
}

.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.-ml-0 {
  margin-left: -0px;
}

.-ml-0\.5 {
  margin-left: -0.125rem;
}

.-mr-1 {
  margin-right: -0.25rem;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-14 {
  margin-bottom: 3.5rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-2\.5 {
  margin-bottom: 0.625rem;
}

.mb-20 {
  margin-bottom: 5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-0\.5 {
  margin-left: 0.125rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-16 {
  margin-left: 4rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.mt-0 {
  margin-top: 0px;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-auto {
  margin-top: auto;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.\!table {
  display: table !important;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.\!hidden {
  display: none !important;
}

.hidden {
  display: none;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-3\/4 {
  height: 75%;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-96 {
  height: 24rem;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.h-screen {
  height: 100vh;
}

.max-h-0 {
  max-height: 0px;
}

.max-h-48 {
  max-height: 12rem;
}

.max-h-64 {
  max-height: 16rem;
}

.max-h-72 {
  max-height: 18rem;
}

.max-h-80 {
  max-height: 20rem;
}

.max-h-\[70vh\] {
  max-height: 70vh;
}

.max-h-\[85vh\] {
  max-height: 85vh;
}

.max-h-\[90vh\] {
  max-height: 90vh;
}

.max-h-full {
  max-height: 100%;
}

.min-h-0 {
  min-height: 0px;
}

.min-h-\[100dvh\] {
  min-height: 100dvh;
}

.min-h-\[2\.75rem\] {
  min-height: 2.75rem;
}

.min-h-\[3rem\] {
  min-height: 3rem;
}

.min-h-\[4\.5rem\] {
  min-height: 4.5rem;
}

.min-h-\[400px\] {
  min-height: 400px;
}

.min-h-\[4rem\] {
  min-height: 4rem;
}

.min-h-\[8rem\] {
  min-height: 8rem;
}

.min-h-screen {
  min-height: 100vh;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-3\/4 {
  width: 75%;
}

.w-32 {
  width: 8rem;
}

.w-36 {
  width: 9rem;
}

.w-4 {
  width: 1rem;
}

.w-40 {
  width: 10rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

.w-96 {
  width: 24rem;
}

.w-auto {
  width: auto;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[240px\] {
  min-width: 240px;
}

.min-w-\[300px\] {
  min-width: 300px;
}

.min-w-\[320px\] {
  min-width: 320px;
}

.min-w-\[560px\] {
  min-width: 560px;
}

.min-w-\[640px\] {
  min-width: 640px;
}

.min-w-\[7\.5rem\] {
  min-width: 7.5rem;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-\[1400px\] {
  max-width: 1400px;
}

.max-w-\[1600px\] {
  max-width: 1600px;
}

.max-w-\[220px\] {
  max-width: 220px;
}

.max-w-\[90vw\] {
  max-width: 90vw;
}

.max-w-\[calc\(100vw-2rem\)\] {
  max-width: calc(100vw - 2rem);
}

.max-w-full {
  max-width: 100%;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-xl {
  max-width: 36rem;
}

.max-w-xs {
  max-width: 20rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.grow {
  flex-grow: 1;
}

.border-collapse {
  border-collapse: collapse;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-1\/2 {
  --tw-translate-x: 50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.cursor-default {
  cursor: default;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-wait {
  cursor: wait;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize-none {
  resize: none;
}

.resize-y {
  resize: vertical;
}

.resize {
  resize: both;
}

.scroll-mt-24 {
  scroll-margin-top: 6rem;
}

.list-inside {
  list-style-position: inside;
}

.list-decimal {
  list-style-type: decimal;
}

.list-disc {
  list-style-type: disc;
}

.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
}

.divide-white\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(255 255 255 / 0.1);
}

.self-start {
  align-self: flex-start;
}

.self-center {
  align-self: center;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overscroll-contain {
  overscroll-behavior: contain;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-4 {
  border-width: 4px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l {
  border-left-width: 1px;
}

.border-l-2 {
  border-left-width: 2px;
}

.border-r {
  border-right-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-dashed {
  border-style: dashed;
}

.border-amber-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}

.border-amber-400\/30 {
  border-color: rgb(251 191 36 / 0.3);
}

.border-amber-400\/40 {
  border-color: rgb(251 191 36 / 0.4);
}

.border-amber-500\/30 {
  border-color: rgb(245 158 11 / 0.3);
}

.border-amber-500\/40 {
  border-color: rgb(245 158 11 / 0.4);
}

.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.border-blue-400\/30 {
  border-color: rgb(96 165 250 / 0.3);
}

.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}

.border-emerald-400 {
  --tw-border-opacity: 1;
  border-color: rgb(52 211 153 / var(--tw-border-opacity, 1));
}

.border-emerald-400\/20 {
  border-color: rgb(52 211 153 / 0.2);
}

.border-emerald-400\/30 {
  border-color: rgb(52 211 153 / 0.3);
}

.border-emerald-400\/40 {
  border-color: rgb(52 211 153 / 0.4);
}

.border-emerald-400\/50 {
  border-color: rgb(52 211 153 / 0.5);
}

.border-emerald-400\/70 {
  border-color: rgb(52 211 153 / 0.7);
}

.border-emerald-500\/20 {
  border-color: rgb(16 185 129 / 0.2);
}

.border-emerald-500\/25 {
  border-color: rgb(16 185 129 / 0.25);
}

.border-emerald-500\/30 {
  border-color: rgb(16 185 129 / 0.3);
}

.border-emerald-500\/35 {
  border-color: rgb(16 185 129 / 0.35);
}

.border-emerald-500\/40 {
  border-color: rgb(16 185 129 / 0.4);
}

.border-gray-400 {
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
}

.border-gray-400\/20 {
  border-color: rgb(156 163 175 / 0.2);
}

.border-gray-500 {
  --tw-border-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
}

.border-gray-600 {
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}

.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.border-green-400 {
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}

.border-green-500 {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}

.border-red-400 {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}

.border-red-400\/30 {
  border-color: rgb(248 113 113 / 0.3);
}

.border-red-400\/40 {
  border-color: rgb(248 113 113 / 0.4);
}

.border-red-500 {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}

.border-red-500\/30 {
  border-color: rgb(239 68 68 / 0.3);
}

.border-red-500\/40 {
  border-color: rgb(239 68 68 / 0.4);
}

.border-red-500\/50 {
  border-color: rgb(239 68 68 / 0.5);
}

.border-sky-400\/30 {
  border-color: rgb(56 189 248 / 0.3);
}

.border-slate-500\/30 {
  border-color: rgb(100 116 139 / 0.3);
}

.border-transparent {
  border-color: transparent;
}

.border-violet-400\/20 {
  border-color: rgb(167 139 250 / 0.2);
}

.border-violet-400\/30 {
  border-color: rgb(167 139 250 / 0.3);
}

.border-violet-400\/40 {
  border-color: rgb(167 139 250 / 0.4);
}

.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.border-white\/15 {
  border-color: rgb(255 255 255 / 0.15);
}

.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}

.border-white\/5 {
  border-color: rgb(255 255 255 / 0.05);
}

.border-yellow-500 {
  --tw-border-opacity: 1;
  border-color: rgb(234 179 8 / var(--tw-border-opacity, 1));
}

.border-t-transparent {
  border-top-color: transparent;
}

.border-t-white {
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-opacity-10 {
  --tw-border-opacity: 0.1;
}

.border-opacity-15 {
  --tw-border-opacity: 0.15;
}

.border-opacity-20 {
  --tw-border-opacity: 0.2;
}

.border-opacity-25 {
  --tw-border-opacity: 0.25;
}

.border-opacity-30 {
  --tw-border-opacity: 0.3;
}

.border-opacity-40 {
  --tw-border-opacity: 0.4;
}

.border-opacity-50 {
  --tw-border-opacity: 0.5;
}

.bg-\[rgba\(20\2c 20\2c 25\2c 0\.92\)\] {
  background-color: rgba(20,20,25,0.92);
}

.bg-amber-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1));
}

.bg-amber-400\/10 {
  background-color: rgb(251 191 36 / 0.1);
}

.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}

.bg-amber-500\/15 {
  background-color: rgb(245 158 11 / 0.15);
}

.bg-amber-500\/20 {
  background-color: rgb(245 158 11 / 0.2);
}

.bg-amber-600\/90 {
  background-color: rgb(217 119 6 / 0.9);
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}

.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}

.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}

.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}

.bg-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
}

.bg-blue-400\/10 {
  background-color: rgb(96 165 250 / 0.1);
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-cyan-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 211 238 / var(--tw-bg-opacity, 1));
}

.bg-cyan-500\/15 {
  background-color: rgb(6 182 212 / 0.15);
}

.bg-cyan-600\/90 {
  background-color: rgb(8 145 178 / 0.9);
}

.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}

.bg-emerald-400\/10 {
  background-color: rgb(52 211 153 / 0.1);
}

.bg-emerald-400\/45 {
  background-color: rgb(52 211 153 / 0.45);
}

.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.bg-emerald-500\/10 {
  background-color: rgb(16 185 129 / 0.1);
}

.bg-emerald-500\/15 {
  background-color: rgb(16 185 129 / 0.15);
}

.bg-emerald-500\/20 {
  background-color: rgb(16 185 129 / 0.2);
}

.bg-emerald-500\/25 {
  background-color: rgb(16 185 129 / 0.25);
}

.bg-emerald-500\/\[0\.06\] {
  background-color: rgb(16 185 129 / 0.06);
}

.bg-emerald-500\/\[0\.07\] {
  background-color: rgb(16 185 129 / 0.07);
}

.bg-emerald-500\/\[0\.12\] {
  background-color: rgb(16 185 129 / 0.12);
}

.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}

.bg-emerald-600\/30 {
  background-color: rgb(5 150 105 / 0.3);
}

.bg-emerald-700\/80 {
  background-color: rgb(4 120 87 / 0.8);
}

.bg-emerald-950\/20 {
  background-color: rgb(2 44 34 / 0.2);
}

.bg-gray-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.bg-gray-400\/5 {
  background-color: rgb(156 163 175 / 0.05);
}

.bg-gray-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

.bg-gray-500\/15 {
  background-color: rgb(107 114 128 / 0.15);
}

.bg-gray-500\/20 {
  background-color: rgb(107 114 128 / 0.2);
}

.bg-gray-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.bg-gray-900\/90 {
  background-color: rgb(17 24 39 / 0.9);
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.bg-orange-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}

.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}

.bg-red-400\/10 {
  background-color: rgb(248 113 113 / 0.1);
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}

.bg-red-500\/15 {
  background-color: rgb(239 68 68 / 0.15);
}

.bg-red-500\/20 {
  background-color: rgb(239 68 68 / 0.2);
}

.bg-sky-400\/10 {
  background-color: rgb(56 189 248 / 0.1);
}

.bg-sky-500\/10 {
  background-color: rgb(14 165 233 / 0.1);
}

.bg-sky-500\/15 {
  background-color: rgb(14 165 233 / 0.15);
}

.bg-slate-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}

.bg-slate-500\/15 {
  background-color: rgb(100 116 139 / 0.15);
}

.bg-slate-500\/20 {
  background-color: rgb(100 116 139 / 0.2);
}

.bg-slate-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.bg-slate-800\/90 {
  background-color: rgb(30 41 59 / 0.9);
}

.bg-slate-950\/80 {
  background-color: rgb(2 6 23 / 0.8);
}

.bg-transparent {
  background-color: transparent;
}

.bg-violet-400\/10 {
  background-color: rgb(167 139 250 / 0.1);
}

.bg-violet-400\/15 {
  background-color: rgb(167 139 250 / 0.15);
}

.bg-violet-500\/10 {
  background-color: rgb(139 92 246 / 0.1);
}

.bg-violet-500\/15 {
  background-color: rgb(139 92 246 / 0.15);
}

.bg-violet-500\/\[0\.06\] {
  background-color: rgb(139 92 246 / 0.06);
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}

.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}

.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}

.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}

.bg-white\/\[0\.03\] {
  background-color: rgb(255 255 255 / 0.03);
}

.bg-white\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04);
}

.bg-white\/\[0\.06\] {
  background-color: rgb(255 255 255 / 0.06);
}

.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}

.bg-zinc-950\/50 {
  background-color: rgb(9 9 11 / 0.5);
}

.bg-opacity-10 {
  --tw-bg-opacity: 0.1;
}

.bg-opacity-15 {
  --tw-bg-opacity: 0.15;
}

.bg-opacity-20 {
  --tw-bg-opacity: 0.2;
}

.bg-opacity-5 {
  --tw-bg-opacity: 0.05;
}

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}

.bg-opacity-70 {
  --tw-bg-opacity: 0.7;
}

.bg-opacity-80 {
  --tw-bg-opacity: 0.8;
}

.bg-opacity-95 {
  --tw-bg-opacity: 0.95;
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-amber-400 {
  --tw-gradient-from: #fbbf24 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-amber-500 {
  --tw-gradient-from: #f59e0b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-400 {
  --tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-blue-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-400 {
  --tw-gradient-from: #34d399 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-500 {
  --tw-gradient-from: #10b981 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-emerald-600 {
  --tw-gradient-from: #059669 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-400 {
  --tw-gradient-from: #9ca3af var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(156 163 175 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-500 {
  --tw-gradient-from: #6b7280 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(107 114 128 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-gray-900 {
  --tw-gradient-from: #111827 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-400 {
  --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-green-500 {
  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-indigo-500 {
  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-indigo-600 {
  --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-orange-500 {
  --tw-gradient-from: #f97316 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(249 115 22 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-purple-400 {
  --tw-gradient-from: #c084fc var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(192 132 252 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-400 {
  --tw-gradient-from: #f87171 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 113 113 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-red-500 {
  --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-rose-500 {
  --tw-gradient-from: #f43f5e var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(244 63 94 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-slate-600 {
  --tw-gradient-from: #475569 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(71 85 105 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-teal-500 {
  --tw-gradient-from: #14b8a6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(20 184 166 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-white\/\[0\.06\] {
  --tw-gradient-from: rgb(255 255 255 / 0.06) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-chatgpt-darker {
  --tw-gradient-to: rgb(32 33 35 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #202123 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-emerald-400 {
  --tw-gradient-to: rgb(52 211 153 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #34d399 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-emerald-500 {
  --tw-gradient-to: rgb(16 185 129 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #10b981 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-gray-950 {
  --tw-gradient-to: rgb(3 7 18 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #030712 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-orange-400 {
  --tw-gradient-to: rgb(251 146 60 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fb923c var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-black {
  --tw-gradient-to: #000 var(--tw-gradient-to-position);
}

.to-blue-400 {
  --tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
}

.to-blue-500 {
  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
}

.to-blue-600 {
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}

.to-cyan-300 {
  --tw-gradient-to: #67e8f9 var(--tw-gradient-to-position);
}

.to-cyan-400 {
  --tw-gradient-to: #22d3ee var(--tw-gradient-to-position);
}

.to-cyan-500 {
  --tw-gradient-to: #06b6d4 var(--tw-gradient-to-position);
}

.to-cyan-600 {
  --tw-gradient-to: #0891b2 var(--tw-gradient-to-position);
}

.to-emerald-400 {
  --tw-gradient-to: #34d399 var(--tw-gradient-to-position);
}

.to-emerald-600 {
  --tw-gradient-to: #059669 var(--tw-gradient-to-position);
}

.to-gray-600 {
  --tw-gradient-to: #4b5563 var(--tw-gradient-to-position);
}

.to-gray-900 {
  --tw-gradient-to: #111827 var(--tw-gradient-to-position);
}

.to-green-600 {
  --tw-gradient-to: #16a34a var(--tw-gradient-to-position);
}

.to-indigo-600 {
  --tw-gradient-to: #4f46e5 var(--tw-gradient-to-position);
}

.to-orange-500 {
  --tw-gradient-to: #f97316 var(--tw-gradient-to-position);
}

.to-orange-600 {
  --tw-gradient-to: #ea580c var(--tw-gradient-to-position);
}

.to-purple-600 {
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}

.to-purple-700 {
  --tw-gradient-to: #7e22ce var(--tw-gradient-to-position);
}

.to-red-500 {
  --tw-gradient-to: #ef4444 var(--tw-gradient-to-position);
}

.to-red-600 {
  --tw-gradient-to: #dc2626 var(--tw-gradient-to-position);
}

.to-rose-600 {
  --tw-gradient-to: #e11d48 var(--tw-gradient-to-position);
}

.to-slate-700 {
  --tw-gradient-to: #334155 var(--tw-gradient-to-position);
}

.to-teal-500 {
  --tw-gradient-to: #14b8a6 var(--tw-gradient-to-position);
}

.to-teal-600 {
  --tw-gradient-to: #0d9488 var(--tw-gradient-to-position);
}

.to-teal-700 {
  --tw-gradient-to: #0f766e var(--tw-gradient-to-position);
}

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.to-violet-600 {
  --tw-gradient-to: #7c3aed var(--tw-gradient-to-position);
}

.to-yellow-400 {
  --tw-gradient-to: #facc15 var(--tw-gradient-to-position);
}

.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-0 {
  padding: 0px;
}

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-12 {
  padding: 3rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-24 {
  padding-bottom: 6rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pl-1 {
  padding-left: 0.25rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pr-12 {
  padding-right: 3rem;
}

.pr-16 {
  padding-right: 4rem;
}

.pr-20 {
  padding-right: 5rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-5 {
  padding-right: 1.25rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-12 {
  padding-top: 3rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-2\.5 {
  padding-top: 0.625rem;
}

.pt-24 {
  padding-top: 6rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.align-top {
  vertical-align: top;
}

.align-text-bottom {
  vertical-align: text-bottom;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.italic {
  font-style: italic;
}

.slashed-zero {
  --tw-slashed-zero: slashed-zero;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-4 {
  line-height: 1rem;
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}

.tracking-\[0\.4em\] {
  letter-spacing: 0.4em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.text-amber-100 {
  --tw-text-opacity: 1;
  color: rgb(254 243 199 / var(--tw-text-opacity, 1));
}

.text-amber-200 {
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
}

.text-amber-200\/95 {
  color: rgb(253 230 138 / 0.95);
}

.text-amber-300 {
  --tw-text-opacity: 1;
  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
}

.text-amber-400 {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.text-blue-200 {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}

.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.text-cyan-200 {
  --tw-text-opacity: 1;
  color: rgb(165 243 252 / var(--tw-text-opacity, 1));
}

.text-cyan-300 {
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}

.text-emerald-100 {
  --tw-text-opacity: 1;
  color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}

.text-emerald-100\/90 {
  color: rgb(209 250 229 / 0.9);
}

.text-emerald-200 {
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}

.text-emerald-200\/80 {
  color: rgb(167 243 208 / 0.8);
}

.text-emerald-200\/90 {
  color: rgb(167 243 208 / 0.9);
}

.text-emerald-300 {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}

.text-emerald-300\/80 {
  color: rgb(110 231 183 / 0.8);
}

.text-emerald-300\/90 {
  color: rgb(110 231 183 / 0.9);
}

.text-emerald-400 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.text-gray-100 {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
}

.text-indigo-100\/90 {
  color: rgb(224 231 255 / 0.9);
}

.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}

.text-red-100 {
  --tw-text-opacity: 1;
  color: rgb(254 226 226 / var(--tw-text-opacity, 1));
}

.text-red-200 {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}

.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.text-rose-300 {
  --tw-text-opacity: 1;
  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
}

.text-rose-400 {
  --tw-text-opacity: 1;
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
}

.text-sky-200 {
  --tw-text-opacity: 1;
  color: rgb(186 230 253 / var(--tw-text-opacity, 1));
}

.text-sky-200\/95 {
  color: rgb(186 230 253 / 0.95);
}

.text-slate-100 {
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}

.text-slate-200 {
  --tw-text-opacity: 1;
  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
}

.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}

.text-teal-100\/90 {
  color: rgb(204 251 241 / 0.9);
}

.text-transparent {
  color: transparent;
}

.text-violet-100 {
  --tw-text-opacity: 1;
  color: rgb(237 233 254 / var(--tw-text-opacity, 1));
}

.text-violet-200 {
  --tw-text-opacity: 1;
  color: rgb(221 214 254 / var(--tw-text-opacity, 1));
}

.text-violet-300 {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}

.text-violet-300\/80 {
  color: rgb(196 181 253 / 0.8);
}

.text-violet-300\/90 {
  color: rgb(196 181 253 / 0.9);
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-yellow-200 {
  --tw-text-opacity: 1;
  color: rgb(254 240 138 / var(--tw-text-opacity, 1));
}

.text-yellow-300 {
  --tw-text-opacity: 1;
  color: rgb(253 224 71 / var(--tw-text-opacity, 1));
}

.underline {
  text-decoration-line: underline;
}

.decoration-emerald-400\/40 {
  text-decoration-color: rgb(52 211 153 / 0.4);
}

.decoration-dotted {
  text-decoration-style: dotted;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.placeholder-gray-400::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}

.placeholder-gray-400::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1));
}

.placeholder-gray-500::-moz-placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}

.placeholder-gray-500::placeholder {
  --tw-placeholder-opacity: 1;
  color: rgb(107 114 128 / var(--tw-placeholder-opacity, 1));
}

.accent-emerald-500 {
  accent-color: #10b981;
}

.accent-violet-500 {
  accent-color: #8b5cf6;
}

.opacity-0 {
  opacity: 0;
}

.opacity-15 {
  opacity: 0.15;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-90 {
  opacity: 0.9;
}

.mix-blend-multiply {
  mix-blend-mode: multiply;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_4px_rgba\(16\2c 185\2c 129\2c 0\.12\)\] {
  --tw-shadow: 0 0 0 4px rgba(16,185,129,0.12);
  --tw-shadow-colored: 0 0 0 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_12px_rgba\(244\2c 63\2c 94\2c 0\.35\)\] {
  --tw-shadow: 0 0 12px rgba(244,63,94,0.35);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_12px_rgba\(251\2c 191\2c 36\2c 0\.3\)\] {
  --tw-shadow: 0 0 12px rgba(251,191,36,0.3);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_12px_rgba\(52\2c 211\2c 153\2c 0\.35\)\] {
  --tw-shadow: 0 0 12px rgba(52,211,153,0.35);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.06\)\] {
  --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-black\/20 {
  --tw-shadow-color: rgb(0 0 0 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-blue-600\/30 {
  --tw-shadow-color: rgb(37 99 235 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-emerald-900\/25 {
  --tw-shadow-color: rgb(6 78 59 / 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-indigo-900\/25 {
  --tw-shadow-color: rgb(49 46 129 / 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-teal-900\/20 {
  --tw-shadow-color: rgb(19 78 74 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-inset {
  --tw-ring-inset: inset;
}

.ring-amber-400\/30 {
  --tw-ring-color: rgb(251 191 36 / 0.3);
}

.ring-emerald-400\/30 {
  --tw-ring-color: rgb(52 211 153 / 0.3);
}

.ring-gray-400\/25 {
  --tw-ring-color: rgb(156 163 175 / 0.25);
}

.ring-white\/10 {
  --tw-ring-color: rgb(255 255 255 / 0.1);
}

.ring-white\/20 {
  --tw-ring-color: rgb(255 255 255 / 0.2);
}

.ring-white\/\[0\.06\] {
  --tw-ring-color: rgb(255 255 255 / 0.06);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-3xl {
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-2xl {
  --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* Animated AI Gradient Background */

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes ai-float-x {
  0%, 100% {
    transform: translateX(0) translateY(0);
  }

  33% {
    transform: translateX(35px) translateY(-25px);
  }

  66% {
    transform: translateX(-25px) translateY(20px);
  }
}

@keyframes ai-float-y {
  0%, 100% {
    transform: translateX(0) translateY(0);
  }

  50% {
    transform: translateX(-20px) translateY(20px);
  }
}

@keyframes ai-drift {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }

  50% {
    transform: translate(40px, -30px) scale(1.15);
    opacity: 0.7;
  }

  100% {
    transform: translate(-30px, 40px) scale(0.85);
    opacity: 0.4;
  }
}

/* Liquid Glass (Glassmorphism) Effects */

.hover\:glass:hover {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-with-ai-effect > div:last-child .hover\:glass:hover {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.sidebar-with-ai-effect .hover\:text-gray-300:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}

.sidebar-with-ai-effect .hover\:text-white:hover {
  color: rgba(255, 255, 255, 0.95) !important;
}

.sidebar-with-ai-effect .group:hover .group-hover\:text-gray-300 {
  color: rgba(255, 255, 255, 0.8) !important;
}

.sidebar-with-ai-effect .group:hover .group-hover\:text-white {
  color: rgba(255, 255, 255, 0.95) !important;
}

@media (min-width: 640px) {
  #chat-form .chat-form-bottom-section p.sm\:text-xs {
    padding-bottom: 0;
    margin-bottom: 0;
    margin-top: 0;
  }

  #chat-mode > div.sm\:justify-center.flex-1.flex {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.sm\:justify-center.flex-1.flex {
    width: calc(100vw - 256px) !important;
    max-width: calc(100vw - 256px) !important;
    margin-left: 0 !important;
    margin-right: calc(256px - 100vw) !important;
  }

  #sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.sm\:justify-center.flex-1.flex {
    /* Set width to match main container's width (100vw - 256px) */
    /* This ensures centering happens within the actual available space */
    width: calc(100vw - 256px) !important;
    max-width: calc(100vw - 256px) !important;
    margin-left: 0 !important;
    margin-right: calc(256px - 100vw) !important;
    position: relative !important;
  }

  #chat-mode .sm\:justify-end.message-item {
    display: flex !important;
    justify-content: flex-end !important;
  }

  #sidebar.sidebar-hidden ~ main .sm\:justify-end.message-item {
    display: flex !important;
    justify-content: flex-end !important;
  }

  #chat-mode > .sm\:justify-center.flex-1.flex.px-6.py-10 {
    width: -moz-fit-content !important;
    width: fit-content !important;
  }

  #chat-mode > .sm\:px-6.flex-1.flex.justify-center.py-10 {
    width: -moz-fit-content !important;
    width: fit-content !important;
  }

  #chat-mode > .sm\:py-10.flex-1.flex.justify-center.px-6 {
    width: -moz-fit-content !important;
    width: fit-content !important;
  }

  #sidebar.sidebar-hidden ~ main #chat-mode > .sm\:justify-center.flex-1.flex.px-6.py-10 {
    width: 100% !important;
    max-width: 100% !important;
  }

  #sidebar.sidebar-hidden ~ main #chat-mode > .sm\:px-6.flex-1.flex.justify-center.py-10 {
    width: 100% !important;
    max-width: 100% !important;
  }

  #sidebar.sidebar-hidden ~ main #chat-mode > .sm\:py-10.flex-1.flex.justify-center.px-6 {
    width: 100% !important;
    max-width: 100% !important;
  }

  #chat-mode > .sm\:justify-center.flex-1.flex.px-6.py-10 > div {
    max-width: 900px;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin-top: 30px !important;
    margin-bottom: 0px !important;
    padding-bottom: 0 !important;
  }

  #chat-mode > .sm\:px-6.flex-1.flex.justify-center.py-10 > div {
    max-width: 900px;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin-top: 30px !important;
    margin-bottom: 0px !important;
    padding-bottom: 0 !important;
  }

  #chat-mode > .sm\:py-10.flex-1.flex.justify-center.px-6 > div {
    max-width: 900px;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin-top: 30px !important;
    margin-bottom: 0px !important;
    padding-bottom: 0 !important;
  }

  @media (min-width: 1000px) {
    #chat-mode > .sm\:justify-center.flex-1.flex.px-6.py-10 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #sidebar.sidebar-hidden ~ main #chat-mode > .sm\:justify-center.flex-1.flex.px-6.py-10 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #chat-mode > .sm\:px-6.flex-1.flex.justify-center.py-10 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #sidebar.sidebar-hidden ~ main #chat-mode > .sm\:px-6.flex-1.flex.justify-center.py-10 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #chat-mode > .sm\:py-10.flex-1.flex.justify-center.px-6 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #sidebar.sidebar-hidden ~ main #chat-mode > .sm\:py-10.flex-1.flex.justify-center.px-6 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #chat-mode > .sm\:justify-center.flex-1.flex.px-6.py-10 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #sidebar.sidebar-hidden ~ main #chat-mode > .sm\:justify-center.flex-1.flex.px-6.py-10 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #chat-mode > .sm\:px-6.flex-1.flex.justify-center.py-10 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #sidebar.sidebar-hidden ~ main #chat-mode > .sm\:px-6.flex-1.flex.justify-center.py-10 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #chat-mode > .sm\:py-10.flex-1.flex.justify-center.px-6 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #sidebar.sidebar-hidden ~ main #chat-mode > .sm\:py-10.flex-1.flex.justify-center.px-6 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }
  }

  @media (max-width: 768px) {
    /* Use real viewport height instead of 100vh which ignores browser chrome */

    /* Mobile sidebar: overlay with glass effect */

    /* On mobile the sidebar is an overlay, so undo the desktop
       rules that shrink #chat-mode and its children by 256px */

    #sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.sm\:justify-center.flex-1.flex,
    main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.sm\:justify-center.flex-1.flex {
      width: 100% !important;
      max-width: 100% !important;
      margin-right: 0 !important;
    }

    /* --- Mobile top nav bar: glass background, full-width row --- */

    /* Inner flex row: center items vertically, tight gap */

    /* Compact menu button inside header */

    /* Compact logo inside header */

    /* Pull title closer to the logo */

    /* User status widget: sits inside the same glass bar */

    /* Hide the standalone share button on mobile (moved to dropdown) */

    /* Show the export chat button inside the dropdown on mobile */

    /* Push messages down so they clear the fixed header on mobile */

    #chat-mode > .sm\:justify-center.flex-1.flex {
      padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
    }

    /* Reset the inline margin-top on mobile since the wrapper padding handles it */

    /* Also push centered-input-mode down on mobile */

    /* Hide floating actions completely on mobile */

    /* Mobile menu button styling */

    /* Show mobile menu button only when sidebar is hidden */

    /* Hide the centered-mode menu button on mobile — nav bar already has one */

    /* Show shorter placeholder on mobile */

    /* Make chat input area full width on mobile with side padding */

    /* Ensure inner wrapper div doesn't constrain width */

    /* Remove margins from chat form on mobile */

    /* Remove max-width constraint on mobile for input containers */

    /* Ensure chat-form-top-section doesn't constrain width */

    /* Make chat input container full width on mobile */

    /* Override mx-auto (margin auto) on mobile for input containers */

    /* Fix textarea overflow on mobile - reduce padding */

    /* Hide scrollbar for webkit browsers on mobile */

    /* Reduce container padding on mobile to prevent overflow */

    /* Reduce button padding on mobile */

    /* --- Mobile table fixes --- */

    /* Constrain AI message bubbles to viewport so tables don't blow out */

    /* User bubbles stay fit-content so they wrap tightly around text */

    /* Table wrapper becomes the horizontal scroll container */

    /* Let tables scroll inside wrapper without forcing centering */

    /* Reduce cell padding on mobile for tighter tables */

    /* --- Mobile chart fixes --- */

    /* Reduce side padding on chat area to give charts more room */

    #chat-mode > .sm\:justify-center.flex-1.flex {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }

    /* Ensure chart containers stay within viewport */

    /* Constrain the chat-container-responsive on mobile */

    /* Add breathing room above the first message on mobile */

    /* Settings page: align header with user status widget on mobile */

    /* Hide disclaimer and divider line on mobile */

    /* Limit Intercom messenger height on mobile */

    /* Use real viewport height instead of 100vh which ignores browser chrome */

    /* Mobile sidebar: overlay with glass effect */

    /* On mobile the sidebar is an overlay, so undo the desktop
       rules that shrink #chat-mode and its children by 256px */

    #sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.sm\:justify-center.flex-1.flex,
    main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.sm\:justify-center.flex-1.flex {
      width: 100% !important;
      max-width: 100% !important;
      margin-right: 0 !important;
    }

    /* --- Mobile top nav bar: glass background, full-width row --- */

    /* Inner flex row: center items vertically, tight gap */

    /* Compact menu button inside header */

    /* Compact logo inside header */

    /* Pull title closer to the logo */

    /* User status widget: sits inside the same glass bar */

    /* Hide the standalone share button on mobile (moved to dropdown) */

    /* Show the export chat button inside the dropdown on mobile */

    /* Push messages down so they clear the fixed header on mobile */

    #chat-mode > .sm\:justify-center.flex-1.flex {
      padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
    }

    /* Reset the inline margin-top on mobile since the wrapper padding handles it */

    /* Also push centered-input-mode down on mobile */

    /* Hide floating actions completely on mobile */

    /* Mobile menu button styling */

    /* Show mobile menu button only when sidebar is hidden */

    /* Hide the centered-mode menu button on mobile — nav bar already has one */

    /* Show shorter placeholder on mobile */

    /* Make chat input area full width on mobile with side padding */

    /* Ensure inner wrapper div doesn't constrain width */

    /* Remove margins from chat form on mobile */

    /* Remove max-width constraint on mobile for input containers */

    /* Ensure chat-form-top-section doesn't constrain width */

    /* Make chat input container full width on mobile */

    /* Override mx-auto (margin auto) on mobile for input containers */

    /* Fix textarea overflow on mobile - reduce padding */

    /* Hide scrollbar for webkit browsers on mobile */

    /* Reduce container padding on mobile to prevent overflow */

    /* Reduce button padding on mobile */

    /* --- Mobile table fixes --- */

    /* Constrain AI message bubbles to viewport so tables don't blow out */

    /* User bubbles stay fit-content so they wrap tightly around text */

    /* Table wrapper becomes the horizontal scroll container */

    /* Let tables scroll inside wrapper without forcing centering */

    /* Reduce cell padding on mobile for tighter tables */

    /* --- Mobile chart fixes --- */

    /* Reduce side padding on chat area to give charts more room */

    #chat-mode > .sm\:justify-center.flex-1.flex {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }

    /* Ensure chart containers stay within viewport */

    /* Constrain the chat-container-responsive on mobile */

    /* Add breathing room above the first message on mobile */

    /* Settings page: align header with user status widget on mobile */

    /* Hide disclaimer and divider line on mobile */

    /* Limit Intercom messenger height on mobile */

    /* Use real viewport height instead of 100vh which ignores browser chrome */

    /* Mobile sidebar: overlay with glass effect */

    /* On mobile the sidebar is an overlay, so undo the desktop
       rules that shrink #chat-mode and its children by 256px */

    /* --- Mobile top nav bar: glass background, full-width row --- */

    /* Inner flex row: center items vertically, tight gap */

    #chat-header > .sm\:items-center.flex {
      flex: 0 1 auto;
      height: 3.5rem;
      align-items: center;
      gap: 0.375rem !important;
      -moz-column-gap: 0.375rem !important;
           column-gap: 0.375rem !important;
    }

    /* Compact menu button inside header */

    /* Compact logo inside header */

    /* Pull title closer to the logo */

    /* User status widget: sits inside the same glass bar */

    /* Hide the standalone share button on mobile (moved to dropdown) */

    /* Show the export chat button inside the dropdown on mobile */

    /* Push messages down so they clear the fixed header on mobile */

    /* Reset the inline margin-top on mobile since the wrapper padding handles it */

    /* Also push centered-input-mode down on mobile */

    /* Hide floating actions completely on mobile */

    /* Mobile menu button styling */

    /* Show mobile menu button only when sidebar is hidden */

    /* Hide the centered-mode menu button on mobile — nav bar already has one */

    /* Show shorter placeholder on mobile */

    /* Make chat input area full width on mobile with side padding */

    /* Ensure inner wrapper div doesn't constrain width */

    /* Remove margins from chat form on mobile */

    /* Remove max-width constraint on mobile for input containers */

    /* Ensure chat-form-top-section doesn't constrain width */

    /* Make chat input container full width on mobile */

    /* Override mx-auto (margin auto) on mobile for input containers */

    /* Fix textarea overflow on mobile - reduce padding */

    /* Hide scrollbar for webkit browsers on mobile */

    /* Reduce container padding on mobile to prevent overflow */

    /* Reduce button padding on mobile */

    /* --- Mobile table fixes --- */

    /* Constrain AI message bubbles to viewport so tables don't blow out */

    /* User bubbles stay fit-content so they wrap tightly around text */

    /* Table wrapper becomes the horizontal scroll container */

    /* Let tables scroll inside wrapper without forcing centering */

    /* Reduce cell padding on mobile for tighter tables */

    /* --- Mobile chart fixes --- */

    /* Reduce side padding on chat area to give charts more room */

    /* Ensure chart containers stay within viewport */

    /* Constrain the chat-container-responsive on mobile */

    /* Add breathing room above the first message on mobile */

    /* Settings page: align header with user status widget on mobile */

    /* Hide disclaimer and divider line on mobile */

    /* Limit Intercom messenger height on mobile */

    /* Use real viewport height instead of 100vh which ignores browser chrome */

    /* Mobile sidebar: overlay with glass effect */

    /* On mobile the sidebar is an overlay, so undo the desktop
       rules that shrink #chat-mode and its children by 256px */

    #sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.sm\:justify-center.flex-1.flex,
    main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.sm\:justify-center.flex-1.flex {
      width: 100% !important;
      max-width: 100% !important;
      margin-right: 0 !important;
    }

    /* --- Mobile top nav bar: glass background, full-width row --- */

    /* Inner flex row: center items vertically, tight gap */

    /* Compact menu button inside header */

    /* Compact logo inside header */

    /* Pull title closer to the logo */

    /* User status widget: sits inside the same glass bar */

    /* Hide the standalone share button on mobile (moved to dropdown) */

    /* Show the export chat button inside the dropdown on mobile */

    /* Push messages down so they clear the fixed header on mobile */

    #chat-mode > .sm\:justify-center.flex-1.flex {
      padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
    }

    /* Reset the inline margin-top on mobile since the wrapper padding handles it */

    /* Also push centered-input-mode down on mobile */

    /* Hide floating actions completely on mobile */

    /* Mobile menu button styling */

    /* Show mobile menu button only when sidebar is hidden */

    /* Hide the centered-mode menu button on mobile — nav bar already has one */

    /* Show shorter placeholder on mobile */

    /* Make chat input area full width on mobile with side padding */

    /* Ensure inner wrapper div doesn't constrain width */

    /* Remove margins from chat form on mobile */

    /* Remove max-width constraint on mobile for input containers */

    /* Ensure chat-form-top-section doesn't constrain width */

    /* Make chat input container full width on mobile */

    /* Override mx-auto (margin auto) on mobile for input containers */

    /* Fix textarea overflow on mobile - reduce padding */

    /* Hide scrollbar for webkit browsers on mobile */

    /* Reduce container padding on mobile to prevent overflow */

    /* Reduce button padding on mobile */

    /* --- Mobile table fixes --- */

    /* Constrain AI message bubbles to viewport so tables don't blow out */

    /* User bubbles stay fit-content so they wrap tightly around text */

    /* Table wrapper becomes the horizontal scroll container */

    /* Let tables scroll inside wrapper without forcing centering */

    /* Reduce cell padding on mobile for tighter tables */

    /* --- Mobile chart fixes --- */

    /* Reduce side padding on chat area to give charts more room */

    #chat-mode > .sm\:justify-center.flex-1.flex {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }

    /* Ensure chart containers stay within viewport */

    /* Constrain the chat-container-responsive on mobile */

    /* Add breathing room above the first message on mobile */

    /* Settings page: align header with user status widget on mobile */

    /* Hide disclaimer and divider line on mobile */

    /* Limit Intercom messenger height on mobile */

    /* Use real viewport height instead of 100vh which ignores browser chrome */

    /* Mobile sidebar: overlay with glass effect */

    /* On mobile the sidebar is an overlay, so undo the desktop
       rules that shrink #chat-mode and its children by 256px */

    #sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.sm\:justify-center.flex-1.flex,
    main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.sm\:justify-center.flex-1.flex {
      width: 100% !important;
      max-width: 100% !important;
      margin-right: 0 !important;
    }

    /* --- Mobile top nav bar: glass background, full-width row --- */

    /* Inner flex row: center items vertically, tight gap */

    /* Compact menu button inside header */

    /* Compact logo inside header */

    /* Pull title closer to the logo */

    /* User status widget: sits inside the same glass bar */

    /* Hide the standalone share button on mobile (moved to dropdown) */

    /* Show the export chat button inside the dropdown on mobile */

    /* Push messages down so they clear the fixed header on mobile */

    #chat-mode > .sm\:justify-center.flex-1.flex {
      padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
    }

    /* Reset the inline margin-top on mobile since the wrapper padding handles it */

    /* Also push centered-input-mode down on mobile */

    /* Hide floating actions completely on mobile */

    /* Mobile menu button styling */

    /* Show mobile menu button only when sidebar is hidden */

    /* Hide the centered-mode menu button on mobile — nav bar already has one */

    /* Show shorter placeholder on mobile */

    /* Make chat input area full width on mobile with side padding */

    /* Ensure inner wrapper div doesn't constrain width */

    /* Remove margins from chat form on mobile */

    /* Remove max-width constraint on mobile for input containers */

    /* Ensure chat-form-top-section doesn't constrain width */

    /* Make chat input container full width on mobile */

    /* Override mx-auto (margin auto) on mobile for input containers */

    /* Fix textarea overflow on mobile - reduce padding */

    /* Hide scrollbar for webkit browsers on mobile */

    /* Reduce container padding on mobile to prevent overflow */

    /* Reduce button padding on mobile */

    /* --- Mobile table fixes --- */

    /* Constrain AI message bubbles to viewport so tables don't blow out */

    /* User bubbles stay fit-content so they wrap tightly around text */

    /* Table wrapper becomes the horizontal scroll container */

    /* Let tables scroll inside wrapper without forcing centering */

    /* Reduce cell padding on mobile for tighter tables */

    /* --- Mobile chart fixes --- */

    /* Reduce side padding on chat area to give charts more room */

    #chat-mode > .sm\:justify-center.flex-1.flex {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }

    /* Ensure chart containers stay within viewport */

    /* Constrain the chat-container-responsive on mobile */

    /* Add breathing room above the first message on mobile */

    /* Settings page: align header with user status widget on mobile */

    /* Hide disclaimer and divider line on mobile */

    /* Limit Intercom messenger height on mobile */
  }

  .sm\:justify-end.message-images-container {
    margin-left: auto;
  }
}

@media (min-width: 768px) {
  #chat-mode > .md\:py-10.flex-1.flex.justify-center.px-6 {
    width: -moz-fit-content !important;
    width: fit-content !important;
  }

  #sidebar.sidebar-hidden ~ main #chat-mode > .md\:py-10.flex-1.flex.justify-center.px-6 {
    width: 100% !important;
    max-width: 100% !important;
  }

  #chat-mode > .md\:py-10.flex-1.flex.justify-center.px-6 > div {
    max-width: 900px;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin-top: 30px !important;
    margin-bottom: 0px !important;
    padding-bottom: 0 !important;
  }

  @media (min-width: 1000px) {
    #chat-mode > .md\:py-10.flex-1.flex.justify-center.px-6 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #sidebar.sidebar-hidden ~ main #chat-mode > .md\:py-10.flex-1.flex.justify-center.px-6 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #chat-mode > .md\:py-10.flex-1.flex.justify-center.px-6 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #sidebar.sidebar-hidden ~ main #chat-mode > .md\:py-10.flex-1.flex.justify-center.px-6 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }
  }
}

@media (min-width: 1024px) {
  #chat-mode > div.lg\:flex.flex-1.justify-center {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #chat-mode > div.lg\:justify-center.flex-1.flex {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.lg\:flex.flex-1.justify-center {
    width: calc(100vw - 256px) !important;
    max-width: calc(100vw - 256px) !important;
    margin-left: 0 !important;
    margin-right: calc(256px - 100vw) !important;
  }

  main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.lg\:justify-center.flex-1.flex {
    width: calc(100vw - 256px) !important;
    max-width: calc(100vw - 256px) !important;
    margin-left: 0 !important;
    margin-right: calc(256px - 100vw) !important;
  }

  #sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.lg\:flex.flex-1.justify-center {
    /* Set width to match main container's width (100vw - 256px) */
    /* This ensures centering happens within the actual available space */
    width: calc(100vw - 256px) !important;
    max-width: calc(100vw - 256px) !important;
    margin-left: 0 !important;
    margin-right: calc(256px - 100vw) !important;
    position: relative !important;
  }

  #sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.lg\:justify-center.flex-1.flex {
    /* Set width to match main container's width (100vw - 256px) */
    /* This ensures centering happens within the actual available space */
    width: calc(100vw - 256px) !important;
    max-width: calc(100vw - 256px) !important;
    margin-left: 0 !important;
    margin-right: calc(256px - 100vw) !important;
    position: relative !important;
  }

  #chat-mode .lg\:justify-end.message-item {
    display: flex !important;
    justify-content: flex-end !important;
  }

  div.lg\:flex.h-screen:has(#sidebar.sidebar-hidden):has(#chat-main-surface) {
    justify-content: center;
  }

  #sidebar.sidebar-hidden ~ main .lg\:justify-end.message-item {
    display: flex !important;
    justify-content: flex-end !important;
  }

  #chat-mode > .lg\:flex.flex-1.justify-center.px-6.py-10 {
    width: -moz-fit-content !important;
    width: fit-content !important;
  }

  #chat-mode > .lg\:justify-center.flex-1.flex.px-6.py-10 {
    width: -moz-fit-content !important;
    width: fit-content !important;
  }

  #sidebar.sidebar-hidden ~ main #chat-mode > .lg\:flex.flex-1.justify-center.px-6.py-10 {
    width: 100% !important;
    max-width: 100% !important;
  }

  #sidebar.sidebar-hidden ~ main #chat-mode > .lg\:justify-center.flex-1.flex.px-6.py-10 {
    width: 100% !important;
    max-width: 100% !important;
  }

  #chat-mode > .lg\:flex.flex-1.justify-center.px-6.py-10 > div {
    max-width: 900px;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin-top: 30px !important;
    margin-bottom: 0px !important;
    padding-bottom: 0 !important;
  }

  #chat-mode > .lg\:justify-center.flex-1.flex.px-6.py-10 > div {
    max-width: 900px;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin-top: 30px !important;
    margin-bottom: 0px !important;
    padding-bottom: 0 !important;
  }

  @media (min-width: 1000px) {
    #chat-mode > .lg\:flex.flex-1.justify-center.px-6.py-10 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #sidebar.sidebar-hidden ~ main #chat-mode > .lg\:flex.flex-1.justify-center.px-6.py-10 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #chat-mode > .lg\:justify-center.flex-1.flex.px-6.py-10 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #sidebar.sidebar-hidden ~ main #chat-mode > .lg\:justify-center.flex-1.flex.px-6.py-10 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #chat-mode > .lg\:flex.flex-1.justify-center.px-6.py-10 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #sidebar.sidebar-hidden ~ main #chat-mode > .lg\:flex.flex-1.justify-center.px-6.py-10 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #chat-mode > .lg\:justify-center.flex-1.flex.px-6.py-10 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }

    #sidebar.sidebar-hidden ~ main #chat-mode > .lg\:justify-center.flex-1.flex.px-6.py-10 > div {
      max-width: min(900px, calc(100vw * 0.9)) !important;
    }
  }

  .lg\:flex.flex-1.flex-col.min-h-0 > .flex-shrink-0:first-child {
    position: relative;
    z-index: 10;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .lg\:flex-col.flex-1.flex.min-h-0 > .flex-shrink-0:first-child {
    position: relative;
    z-index: 10;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .lg\:min-h-0.flex-1.flex.flex-col > .flex-shrink-0:first-child {
    position: relative;
    z-index: 10;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .sidebar-with-ai-effect .lg\:flex.flex-1.flex-col.min-h-0 > .flex-shrink-0:first-child {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .sidebar-with-ai-effect .lg\:flex-col.flex-1.flex.min-h-0 > .flex-shrink-0:first-child {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .sidebar-with-ai-effect .lg\:min-h-0.flex-1.flex.flex-col > .flex-shrink-0:first-child {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  #sidebar > div.lg\:border-b.px-3.py-4.flex-shrink-0:first-child {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .sidebar-with-ai-effect .lg\:border-b {
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  #sidebar > div.lg\:border-b.px-3.py-4 {
    -o-border-image: none;
       border-image: none;
    border-width: 0;
    border-bottom-width: 1px;
    border-right-width: 0;
    border-right-color: rgba(0, 0, 0, 0);
    border-right-style: none;
    border-left-width: 0;
    border-left-color: rgba(0, 0, 0, 0);
    border-left-style: none;
    border-top-width: 0;
    border-top-color: rgba(0, 0, 0, 0);
    border-top-style: none;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 0, 0, 0);
    border-style: solid;
  }

  @media (max-width: 768px) {
    /* Use real viewport height instead of 100vh which ignores browser chrome */

    .lg\:flex.h-screen {
      height: var(--app-height, 100vh) !important;
      height: 100dvh !important;
    }

    /* Mobile sidebar: overlay with glass effect */

    /* On mobile the sidebar is an overlay, so undo the desktop
       rules that shrink #chat-mode and its children by 256px */

    #sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.lg\:flex.flex-1.justify-center,
    main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.lg\:flex.flex-1.justify-center {
      width: 100% !important;
      max-width: 100% !important;
      margin-right: 0 !important;
    }

    /* --- Mobile top nav bar: glass background, full-width row --- */

    /* Inner flex row: center items vertically, tight gap */

    #chat-header > .lg\:flex.items-center {
      flex: 0 1 auto;
      height: 3.5rem;
      align-items: center;
      gap: 0.375rem !important;
      -moz-column-gap: 0.375rem !important;
           column-gap: 0.375rem !important;
    }

    /* Compact menu button inside header */

    /* Compact logo inside header */

    /* Pull title closer to the logo */

    /* User status widget: sits inside the same glass bar */

    /* Hide the standalone share button on mobile (moved to dropdown) */

    /* Show the export chat button inside the dropdown on mobile */

    /* Push messages down so they clear the fixed header on mobile */

    #chat-mode > .lg\:flex.flex-1.justify-center {
      padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
    }

    /* Reset the inline margin-top on mobile since the wrapper padding handles it */

    /* Also push centered-input-mode down on mobile */

    /* Hide floating actions completely on mobile */

    /* Mobile menu button styling */

    /* Show mobile menu button only when sidebar is hidden */

    /* Hide the centered-mode menu button on mobile — nav bar already has one */

    /* Show shorter placeholder on mobile */

    /* Make chat input area full width on mobile with side padding */

    /* Ensure inner wrapper div doesn't constrain width */

    /* Remove margins from chat form on mobile */

    /* Remove max-width constraint on mobile for input containers */

    /* Ensure chat-form-top-section doesn't constrain width */

    /* Make chat input container full width on mobile */

    /* Override mx-auto (margin auto) on mobile for input containers */

    /* Fix textarea overflow on mobile - reduce padding */

    /* Hide scrollbar for webkit browsers on mobile */

    /* Reduce container padding on mobile to prevent overflow */

    /* Reduce button padding on mobile */

    /* --- Mobile table fixes --- */

    /* Constrain AI message bubbles to viewport so tables don't blow out */

    /* User bubbles stay fit-content so they wrap tightly around text */

    /* Table wrapper becomes the horizontal scroll container */

    /* Let tables scroll inside wrapper without forcing centering */

    /* Reduce cell padding on mobile for tighter tables */

    /* --- Mobile chart fixes --- */

    /* Reduce side padding on chat area to give charts more room */

    #chat-mode > .lg\:flex.flex-1.justify-center {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }

    /* Ensure chart containers stay within viewport */

    /* Constrain the chat-container-responsive on mobile */

    /* Add breathing room above the first message on mobile */

    /* Settings page: align header with user status widget on mobile */

    /* Hide disclaimer and divider line on mobile */

    /* Limit Intercom messenger height on mobile */

    /* Use real viewport height instead of 100vh which ignores browser chrome */

    .lg\:flex.h-screen {
      height: var(--app-height, 100vh) !important;
      height: 100dvh !important;
    }

    /* Mobile sidebar: overlay with glass effect */

    /* On mobile the sidebar is an overlay, so undo the desktop
       rules that shrink #chat-mode and its children by 256px */

    #sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.lg\:flex.flex-1.justify-center,
    main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.lg\:flex.flex-1.justify-center {
      width: 100% !important;
      max-width: 100% !important;
      margin-right: 0 !important;
    }

    /* --- Mobile top nav bar: glass background, full-width row --- */

    /* Inner flex row: center items vertically, tight gap */

    #chat-header > .lg\:flex.items-center {
      flex: 0 1 auto;
      height: 3.5rem;
      align-items: center;
      gap: 0.375rem !important;
      -moz-column-gap: 0.375rem !important;
           column-gap: 0.375rem !important;
    }

    /* Compact menu button inside header */

    /* Compact logo inside header */

    /* Pull title closer to the logo */

    /* User status widget: sits inside the same glass bar */

    /* Hide the standalone share button on mobile (moved to dropdown) */

    /* Show the export chat button inside the dropdown on mobile */

    /* Push messages down so they clear the fixed header on mobile */

    #chat-mode > .lg\:flex.flex-1.justify-center {
      padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
    }

    /* Reset the inline margin-top on mobile since the wrapper padding handles it */

    /* Also push centered-input-mode down on mobile */

    /* Hide floating actions completely on mobile */

    /* Mobile menu button styling */

    /* Show mobile menu button only when sidebar is hidden */

    /* Hide the centered-mode menu button on mobile — nav bar already has one */

    /* Show shorter placeholder on mobile */

    /* Make chat input area full width on mobile with side padding */

    /* Ensure inner wrapper div doesn't constrain width */

    /* Remove margins from chat form on mobile */

    /* Remove max-width constraint on mobile for input containers */

    /* Ensure chat-form-top-section doesn't constrain width */

    /* Make chat input container full width on mobile */

    /* Override mx-auto (margin auto) on mobile for input containers */

    /* Fix textarea overflow on mobile - reduce padding */

    /* Hide scrollbar for webkit browsers on mobile */

    /* Reduce container padding on mobile to prevent overflow */

    /* Reduce button padding on mobile */

    /* --- Mobile table fixes --- */

    /* Constrain AI message bubbles to viewport so tables don't blow out */

    /* User bubbles stay fit-content so they wrap tightly around text */

    /* Table wrapper becomes the horizontal scroll container */

    /* Let tables scroll inside wrapper without forcing centering */

    /* Reduce cell padding on mobile for tighter tables */

    /* --- Mobile chart fixes --- */

    /* Reduce side padding on chat area to give charts more room */

    #chat-mode > .lg\:flex.flex-1.justify-center {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }

    /* Ensure chart containers stay within viewport */

    /* Constrain the chat-container-responsive on mobile */

    /* Add breathing room above the first message on mobile */

    /* Settings page: align header with user status widget on mobile */

    /* Hide disclaimer and divider line on mobile */

    /* Limit Intercom messenger height on mobile */

    /* Use real viewport height instead of 100vh which ignores browser chrome */

    /* Mobile sidebar: overlay with glass effect */

    /* On mobile the sidebar is an overlay, so undo the desktop
       rules that shrink #chat-mode and its children by 256px */

    #sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.lg\:justify-center.flex-1.flex,
    main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.lg\:justify-center.flex-1.flex {
      width: 100% !important;
      max-width: 100% !important;
      margin-right: 0 !important;
    }

    /* --- Mobile top nav bar: glass background, full-width row --- */

    /* Inner flex row: center items vertically, tight gap */

    /* Compact menu button inside header */

    /* Compact logo inside header */

    /* Pull title closer to the logo */

    /* User status widget: sits inside the same glass bar */

    /* Hide the standalone share button on mobile (moved to dropdown) */

    /* Show the export chat button inside the dropdown on mobile */

    /* Push messages down so they clear the fixed header on mobile */

    #chat-mode > .lg\:justify-center.flex-1.flex {
      padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
    }

    /* Reset the inline margin-top on mobile since the wrapper padding handles it */

    /* Also push centered-input-mode down on mobile */

    /* Hide floating actions completely on mobile */

    /* Mobile menu button styling */

    /* Show mobile menu button only when sidebar is hidden */

    /* Hide the centered-mode menu button on mobile — nav bar already has one */

    /* Show shorter placeholder on mobile */

    /* Make chat input area full width on mobile with side padding */

    /* Ensure inner wrapper div doesn't constrain width */

    /* Remove margins from chat form on mobile */

    /* Remove max-width constraint on mobile for input containers */

    /* Ensure chat-form-top-section doesn't constrain width */

    /* Make chat input container full width on mobile */

    /* Override mx-auto (margin auto) on mobile for input containers */

    /* Fix textarea overflow on mobile - reduce padding */

    /* Hide scrollbar for webkit browsers on mobile */

    /* Reduce container padding on mobile to prevent overflow */

    /* Reduce button padding on mobile */

    /* --- Mobile table fixes --- */

    /* Constrain AI message bubbles to viewport so tables don't blow out */

    /* User bubbles stay fit-content so they wrap tightly around text */

    /* Table wrapper becomes the horizontal scroll container */

    /* Let tables scroll inside wrapper without forcing centering */

    /* Reduce cell padding on mobile for tighter tables */

    /* --- Mobile chart fixes --- */

    /* Reduce side padding on chat area to give charts more room */

    #chat-mode > .lg\:justify-center.flex-1.flex {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }

    /* Ensure chart containers stay within viewport */

    /* Constrain the chat-container-responsive on mobile */

    /* Add breathing room above the first message on mobile */

    /* Settings page: align header with user status widget on mobile */

    /* Hide disclaimer and divider line on mobile */

    /* Limit Intercom messenger height on mobile */

    /* Use real viewport height instead of 100vh which ignores browser chrome */

    .lg\:flex.h-screen {
      height: var(--app-height, 100vh) !important;
      height: 100dvh !important;
    }

    /* Mobile sidebar: overlay with glass effect */

    /* On mobile the sidebar is an overlay, so undo the desktop
       rules that shrink #chat-mode and its children by 256px */

    #sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.lg\:flex.flex-1.justify-center,
    main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.lg\:flex.flex-1.justify-center {
      width: 100% !important;
      max-width: 100% !important;
      margin-right: 0 !important;
    }

    /* --- Mobile top nav bar: glass background, full-width row --- */

    /* Inner flex row: center items vertically, tight gap */

    #chat-header > .lg\:flex.items-center {
      flex: 0 1 auto;
      height: 3.5rem;
      align-items: center;
      gap: 0.375rem !important;
      -moz-column-gap: 0.375rem !important;
           column-gap: 0.375rem !important;
    }

    /* Compact menu button inside header */

    /* Compact logo inside header */

    /* Pull title closer to the logo */

    /* User status widget: sits inside the same glass bar */

    /* Hide the standalone share button on mobile (moved to dropdown) */

    /* Show the export chat button inside the dropdown on mobile */

    /* Push messages down so they clear the fixed header on mobile */

    #chat-mode > .lg\:flex.flex-1.justify-center {
      padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
    }

    /* Reset the inline margin-top on mobile since the wrapper padding handles it */

    /* Also push centered-input-mode down on mobile */

    /* Hide floating actions completely on mobile */

    /* Mobile menu button styling */

    /* Show mobile menu button only when sidebar is hidden */

    /* Hide the centered-mode menu button on mobile — nav bar already has one */

    /* Show shorter placeholder on mobile */

    /* Make chat input area full width on mobile with side padding */

    /* Ensure inner wrapper div doesn't constrain width */

    /* Remove margins from chat form on mobile */

    /* Remove max-width constraint on mobile for input containers */

    /* Ensure chat-form-top-section doesn't constrain width */

    /* Make chat input container full width on mobile */

    /* Override mx-auto (margin auto) on mobile for input containers */

    /* Fix textarea overflow on mobile - reduce padding */

    /* Hide scrollbar for webkit browsers on mobile */

    /* Reduce container padding on mobile to prevent overflow */

    /* Reduce button padding on mobile */

    /* --- Mobile table fixes --- */

    /* Constrain AI message bubbles to viewport so tables don't blow out */

    /* User bubbles stay fit-content so they wrap tightly around text */

    /* Table wrapper becomes the horizontal scroll container */

    /* Let tables scroll inside wrapper without forcing centering */

    /* Reduce cell padding on mobile for tighter tables */

    /* --- Mobile chart fixes --- */

    /* Reduce side padding on chat area to give charts more room */

    #chat-mode > .lg\:flex.flex-1.justify-center {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }

    /* Ensure chart containers stay within viewport */

    /* Constrain the chat-container-responsive on mobile */

    /* Add breathing room above the first message on mobile */

    /* Settings page: align header with user status widget on mobile */

    /* Hide disclaimer and divider line on mobile */

    /* Limit Intercom messenger height on mobile */

    /* Use real viewport height instead of 100vh which ignores browser chrome */

    /* Mobile sidebar: overlay with glass effect */

    /* On mobile the sidebar is an overlay, so undo the desktop
       rules that shrink #chat-mode and its children by 256px */

    #sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.lg\:justify-center.flex-1.flex,
    main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.lg\:justify-center.flex-1.flex {
      width: 100% !important;
      max-width: 100% !important;
      margin-right: 0 !important;
    }

    /* --- Mobile top nav bar: glass background, full-width row --- */

    /* Inner flex row: center items vertically, tight gap */

    /* Compact menu button inside header */

    /* Compact logo inside header */

    /* Pull title closer to the logo */

    /* User status widget: sits inside the same glass bar */

    /* Hide the standalone share button on mobile (moved to dropdown) */

    /* Show the export chat button inside the dropdown on mobile */

    /* Push messages down so they clear the fixed header on mobile */

    #chat-mode > .lg\:justify-center.flex-1.flex {
      padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
    }

    /* Reset the inline margin-top on mobile since the wrapper padding handles it */

    /* Also push centered-input-mode down on mobile */

    /* Hide floating actions completely on mobile */

    /* Mobile menu button styling */

    /* Show mobile menu button only when sidebar is hidden */

    /* Hide the centered-mode menu button on mobile — nav bar already has one */

    /* Show shorter placeholder on mobile */

    /* Make chat input area full width on mobile with side padding */

    /* Ensure inner wrapper div doesn't constrain width */

    /* Remove margins from chat form on mobile */

    /* Remove max-width constraint on mobile for input containers */

    /* Ensure chat-form-top-section doesn't constrain width */

    /* Make chat input container full width on mobile */

    /* Override mx-auto (margin auto) on mobile for input containers */

    /* Fix textarea overflow on mobile - reduce padding */

    /* Hide scrollbar for webkit browsers on mobile */

    /* Reduce container padding on mobile to prevent overflow */

    /* Reduce button padding on mobile */

    /* --- Mobile table fixes --- */

    /* Constrain AI message bubbles to viewport so tables don't blow out */

    /* User bubbles stay fit-content so they wrap tightly around text */

    /* Table wrapper becomes the horizontal scroll container */

    /* Let tables scroll inside wrapper without forcing centering */

    /* Reduce cell padding on mobile for tighter tables */

    /* --- Mobile chart fixes --- */

    /* Reduce side padding on chat area to give charts more room */

    #chat-mode > .lg\:justify-center.flex-1.flex {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }

    /* Ensure chart containers stay within viewport */

    /* Constrain the chat-container-responsive on mobile */

    /* Add breathing room above the first message on mobile */

    /* Settings page: align header with user status widget on mobile */

    /* Hide disclaimer and divider line on mobile */

    /* Limit Intercom messenger height on mobile */

    /* Use real viewport height instead of 100vh which ignores browser chrome */

    .lg\:flex.h-screen {
      height: var(--app-height, 100vh) !important;
      height: 100dvh !important;
    }

    /* Mobile sidebar: overlay with glass effect */

    /* On mobile the sidebar is an overlay, so undo the desktop
       rules that shrink #chat-mode and its children by 256px */

    #sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.lg\:flex.flex-1.justify-center,
    main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.lg\:flex.flex-1.justify-center {
      width: 100% !important;
      max-width: 100% !important;
      margin-right: 0 !important;
    }

    /* --- Mobile top nav bar: glass background, full-width row --- */

    /* Inner flex row: center items vertically, tight gap */

    #chat-header > .lg\:flex.items-center {
      flex: 0 1 auto;
      height: 3.5rem;
      align-items: center;
      gap: 0.375rem !important;
      -moz-column-gap: 0.375rem !important;
           column-gap: 0.375rem !important;
    }

    /* Compact menu button inside header */

    /* Compact logo inside header */

    /* Pull title closer to the logo */

    /* User status widget: sits inside the same glass bar */

    /* Hide the standalone share button on mobile (moved to dropdown) */

    /* Show the export chat button inside the dropdown on mobile */

    /* Push messages down so they clear the fixed header on mobile */

    #chat-mode > .lg\:flex.flex-1.justify-center {
      padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
    }

    /* Reset the inline margin-top on mobile since the wrapper padding handles it */

    /* Also push centered-input-mode down on mobile */

    /* Hide floating actions completely on mobile */

    /* Mobile menu button styling */

    /* Show mobile menu button only when sidebar is hidden */

    /* Hide the centered-mode menu button on mobile — nav bar already has one */

    /* Show shorter placeholder on mobile */

    /* Make chat input area full width on mobile with side padding */

    /* Ensure inner wrapper div doesn't constrain width */

    /* Remove margins from chat form on mobile */

    /* Remove max-width constraint on mobile for input containers */

    /* Ensure chat-form-top-section doesn't constrain width */

    /* Make chat input container full width on mobile */

    /* Override mx-auto (margin auto) on mobile for input containers */

    /* Fix textarea overflow on mobile - reduce padding */

    /* Hide scrollbar for webkit browsers on mobile */

    /* Reduce container padding on mobile to prevent overflow */

    /* Reduce button padding on mobile */

    /* --- Mobile table fixes --- */

    /* Constrain AI message bubbles to viewport so tables don't blow out */

    /* User bubbles stay fit-content so they wrap tightly around text */

    /* Table wrapper becomes the horizontal scroll container */

    /* Let tables scroll inside wrapper without forcing centering */

    /* Reduce cell padding on mobile for tighter tables */

    /* --- Mobile chart fixes --- */

    /* Reduce side padding on chat area to give charts more room */

    #chat-mode > .lg\:flex.flex-1.justify-center {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }

    /* Ensure chart containers stay within viewport */

    /* Constrain the chat-container-responsive on mobile */

    /* Add breathing room above the first message on mobile */

    /* Settings page: align header with user status widget on mobile */

    /* Hide disclaimer and divider line on mobile */

    /* Limit Intercom messenger height on mobile */

    /* Use real viewport height instead of 100vh which ignores browser chrome */

    /* Mobile sidebar: overlay with glass effect */

    /* On mobile the sidebar is an overlay, so undo the desktop
       rules that shrink #chat-mode and its children by 256px */

    /* --- Mobile top nav bar: glass background, full-width row --- */

    /* Inner flex row: center items vertically, tight gap */

    #chat-header > .lg\:items-center.flex {
      flex: 0 1 auto;
      height: 3.5rem;
      align-items: center;
      gap: 0.375rem !important;
      -moz-column-gap: 0.375rem !important;
           column-gap: 0.375rem !important;
    }

    /* Compact menu button inside header */

    /* Compact logo inside header */

    /* Pull title closer to the logo */

    /* User status widget: sits inside the same glass bar */

    /* Hide the standalone share button on mobile (moved to dropdown) */

    /* Show the export chat button inside the dropdown on mobile */

    /* Push messages down so they clear the fixed header on mobile */

    /* Reset the inline margin-top on mobile since the wrapper padding handles it */

    /* Also push centered-input-mode down on mobile */

    /* Hide floating actions completely on mobile */

    /* Mobile menu button styling */

    /* Show mobile menu button only when sidebar is hidden */

    /* Hide the centered-mode menu button on mobile — nav bar already has one */

    /* Show shorter placeholder on mobile */

    /* Make chat input area full width on mobile with side padding */

    /* Ensure inner wrapper div doesn't constrain width */

    /* Remove margins from chat form on mobile */

    /* Remove max-width constraint on mobile for input containers */

    /* Ensure chat-form-top-section doesn't constrain width */

    /* Make chat input container full width on mobile */

    /* Override mx-auto (margin auto) on mobile for input containers */

    /* Fix textarea overflow on mobile - reduce padding */

    /* Hide scrollbar for webkit browsers on mobile */

    /* Reduce container padding on mobile to prevent overflow */

    /* Reduce button padding on mobile */

    /* --- Mobile table fixes --- */

    /* Constrain AI message bubbles to viewport so tables don't blow out */

    /* User bubbles stay fit-content so they wrap tightly around text */

    /* Table wrapper becomes the horizontal scroll container */

    /* Let tables scroll inside wrapper without forcing centering */

    /* Reduce cell padding on mobile for tighter tables */

    /* --- Mobile chart fixes --- */

    /* Reduce side padding on chat area to give charts more room */

    /* Ensure chart containers stay within viewport */

    /* Constrain the chat-container-responsive on mobile */

    /* Add breathing room above the first message on mobile */

    /* Settings page: align header with user status widget on mobile */

    /* Hide disclaimer and divider line on mobile */

    /* Limit Intercom messenger height on mobile */

    /* Use real viewport height instead of 100vh which ignores browser chrome */

    .lg\:flex.h-screen {
      height: var(--app-height, 100vh) !important;
      height: 100dvh !important;
    }

    /* Mobile sidebar: overlay with glass effect */

    /* On mobile the sidebar is an overlay, so undo the desktop
       rules that shrink #chat-mode and its children by 256px */

    #sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.lg\:flex.flex-1.justify-center,
    main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.lg\:flex.flex-1.justify-center {
      width: 100% !important;
      max-width: 100% !important;
      margin-right: 0 !important;
    }

    /* --- Mobile top nav bar: glass background, full-width row --- */

    /* Inner flex row: center items vertically, tight gap */

    #chat-header > .lg\:flex.items-center {
      flex: 0 1 auto;
      height: 3.5rem;
      align-items: center;
      gap: 0.375rem !important;
      -moz-column-gap: 0.375rem !important;
           column-gap: 0.375rem !important;
    }

    /* Compact menu button inside header */

    /* Compact logo inside header */

    /* Pull title closer to the logo */

    /* User status widget: sits inside the same glass bar */

    /* Hide the standalone share button on mobile (moved to dropdown) */

    /* Show the export chat button inside the dropdown on mobile */

    /* Push messages down so they clear the fixed header on mobile */

    #chat-mode > .lg\:flex.flex-1.justify-center {
      padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
    }

    /* Reset the inline margin-top on mobile since the wrapper padding handles it */

    /* Also push centered-input-mode down on mobile */

    /* Hide floating actions completely on mobile */

    /* Mobile menu button styling */

    /* Show mobile menu button only when sidebar is hidden */

    /* Hide the centered-mode menu button on mobile — nav bar already has one */

    /* Show shorter placeholder on mobile */

    /* Make chat input area full width on mobile with side padding */

    /* Ensure inner wrapper div doesn't constrain width */

    /* Remove margins from chat form on mobile */

    /* Remove max-width constraint on mobile for input containers */

    /* Ensure chat-form-top-section doesn't constrain width */

    /* Make chat input container full width on mobile */

    /* Override mx-auto (margin auto) on mobile for input containers */

    /* Fix textarea overflow on mobile - reduce padding */

    /* Hide scrollbar for webkit browsers on mobile */

    /* Reduce container padding on mobile to prevent overflow */

    /* Reduce button padding on mobile */

    /* --- Mobile table fixes --- */

    /* Constrain AI message bubbles to viewport so tables don't blow out */

    /* User bubbles stay fit-content so they wrap tightly around text */

    /* Table wrapper becomes the horizontal scroll container */

    /* Let tables scroll inside wrapper without forcing centering */

    /* Reduce cell padding on mobile for tighter tables */

    /* --- Mobile chart fixes --- */

    /* Reduce side padding on chat area to give charts more room */

    #chat-mode > .lg\:flex.flex-1.justify-center {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }

    /* Ensure chart containers stay within viewport */

    /* Constrain the chat-container-responsive on mobile */

    /* Add breathing room above the first message on mobile */

    /* Settings page: align header with user status widget on mobile */

    /* Hide disclaimer and divider line on mobile */

    /* Limit Intercom messenger height on mobile */

    /* Use real viewport height instead of 100vh which ignores browser chrome */

    /* Mobile sidebar: overlay with glass effect */

    /* On mobile the sidebar is an overlay, so undo the desktop
       rules that shrink #chat-mode and its children by 256px */

    #sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.lg\:justify-center.flex-1.flex,
    main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.lg\:justify-center.flex-1.flex {
      width: 100% !important;
      max-width: 100% !important;
      margin-right: 0 !important;
    }

    /* --- Mobile top nav bar: glass background, full-width row --- */

    /* Inner flex row: center items vertically, tight gap */

    /* Compact menu button inside header */

    /* Compact logo inside header */

    /* Pull title closer to the logo */

    /* User status widget: sits inside the same glass bar */

    /* Hide the standalone share button on mobile (moved to dropdown) */

    /* Show the export chat button inside the dropdown on mobile */

    /* Push messages down so they clear the fixed header on mobile */

    #chat-mode > .lg\:justify-center.flex-1.flex {
      padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
    }

    /* Reset the inline margin-top on mobile since the wrapper padding handles it */

    /* Also push centered-input-mode down on mobile */

    /* Hide floating actions completely on mobile */

    /* Mobile menu button styling */

    /* Show mobile menu button only when sidebar is hidden */

    /* Hide the centered-mode menu button on mobile — nav bar already has one */

    /* Show shorter placeholder on mobile */

    /* Make chat input area full width on mobile with side padding */

    /* Ensure inner wrapper div doesn't constrain width */

    /* Remove margins from chat form on mobile */

    /* Remove max-width constraint on mobile for input containers */

    /* Ensure chat-form-top-section doesn't constrain width */

    /* Make chat input container full width on mobile */

    /* Override mx-auto (margin auto) on mobile for input containers */

    /* Fix textarea overflow on mobile - reduce padding */

    /* Hide scrollbar for webkit browsers on mobile */

    /* Reduce container padding on mobile to prevent overflow */

    /* Reduce button padding on mobile */

    /* --- Mobile table fixes --- */

    /* Constrain AI message bubbles to viewport so tables don't blow out */

    /* User bubbles stay fit-content so they wrap tightly around text */

    /* Table wrapper becomes the horizontal scroll container */

    /* Let tables scroll inside wrapper without forcing centering */

    /* Reduce cell padding on mobile for tighter tables */

    /* --- Mobile chart fixes --- */

    /* Reduce side padding on chat area to give charts more room */

    #chat-mode > .lg\:justify-center.flex-1.flex {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }

    /* Ensure chart containers stay within viewport */

    /* Constrain the chat-container-responsive on mobile */

    /* Add breathing room above the first message on mobile */

    /* Settings page: align header with user status widget on mobile */

    /* Hide disclaimer and divider line on mobile */

    /* Limit Intercom messenger height on mobile */

    /* Use real viewport height instead of 100vh which ignores browser chrome */

    .lg\:flex.h-screen {
      height: var(--app-height, 100vh) !important;
      height: 100dvh !important;
    }

    /* Mobile sidebar: overlay with glass effect */

    /* On mobile the sidebar is an overlay, so undo the desktop
       rules that shrink #chat-mode and its children by 256px */

    #sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.lg\:flex.flex-1.justify-center,
    main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.lg\:flex.flex-1.justify-center {
      width: 100% !important;
      max-width: 100% !important;
      margin-right: 0 !important;
    }

    /* --- Mobile top nav bar: glass background, full-width row --- */

    /* Inner flex row: center items vertically, tight gap */

    #chat-header > .lg\:flex.items-center {
      flex: 0 1 auto;
      height: 3.5rem;
      align-items: center;
      gap: 0.375rem !important;
      -moz-column-gap: 0.375rem !important;
           column-gap: 0.375rem !important;
    }

    /* Compact menu button inside header */

    /* Compact logo inside header */

    /* Pull title closer to the logo */

    /* User status widget: sits inside the same glass bar */

    /* Hide the standalone share button on mobile (moved to dropdown) */

    /* Show the export chat button inside the dropdown on mobile */

    /* Push messages down so they clear the fixed header on mobile */

    #chat-mode > .lg\:flex.flex-1.justify-center {
      padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
    }

    /* Reset the inline margin-top on mobile since the wrapper padding handles it */

    /* Also push centered-input-mode down on mobile */

    /* Hide floating actions completely on mobile */

    /* Mobile menu button styling */

    /* Show mobile menu button only when sidebar is hidden */

    /* Hide the centered-mode menu button on mobile — nav bar already has one */

    /* Show shorter placeholder on mobile */

    /* Make chat input area full width on mobile with side padding */

    /* Ensure inner wrapper div doesn't constrain width */

    /* Remove margins from chat form on mobile */

    /* Remove max-width constraint on mobile for input containers */

    /* Ensure chat-form-top-section doesn't constrain width */

    /* Make chat input container full width on mobile */

    /* Override mx-auto (margin auto) on mobile for input containers */

    /* Fix textarea overflow on mobile - reduce padding */

    /* Hide scrollbar for webkit browsers on mobile */

    /* Reduce container padding on mobile to prevent overflow */

    /* Reduce button padding on mobile */

    /* --- Mobile table fixes --- */

    /* Constrain AI message bubbles to viewport so tables don't blow out */

    /* User bubbles stay fit-content so they wrap tightly around text */

    /* Table wrapper becomes the horizontal scroll container */

    /* Let tables scroll inside wrapper without forcing centering */

    /* Reduce cell padding on mobile for tighter tables */

    /* --- Mobile chart fixes --- */

    /* Reduce side padding on chat area to give charts more room */

    #chat-mode > .lg\:flex.flex-1.justify-center {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }

    /* Ensure chart containers stay within viewport */

    /* Constrain the chat-container-responsive on mobile */

    /* Add breathing room above the first message on mobile */

    /* Settings page: align header with user status widget on mobile */

    /* Hide disclaimer and divider line on mobile */

    /* Limit Intercom messenger height on mobile */

    /* Use real viewport height instead of 100vh which ignores browser chrome */

    /* Mobile sidebar: overlay with glass effect */

    /* On mobile the sidebar is an overlay, so undo the desktop
       rules that shrink #chat-mode and its children by 256px */

    #sidebar:not(.sidebar-hidden) ~ main #chat-mode > div.lg\:justify-center.flex-1.flex,
    main:has(#sidebar:not(.sidebar-hidden)) #chat-mode > div.lg\:justify-center.flex-1.flex {
      width: 100% !important;
      max-width: 100% !important;
      margin-right: 0 !important;
    }

    /* --- Mobile top nav bar: glass background, full-width row --- */

    /* Inner flex row: center items vertically, tight gap */

    /* Compact menu button inside header */

    /* Compact logo inside header */

    /* Pull title closer to the logo */

    /* User status widget: sits inside the same glass bar */

    /* Hide the standalone share button on mobile (moved to dropdown) */

    /* Show the export chat button inside the dropdown on mobile */

    /* Push messages down so they clear the fixed header on mobile */

    #chat-mode > .lg\:justify-center.flex-1.flex {
      padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
    }

    /* Reset the inline margin-top on mobile since the wrapper padding handles it */

    /* Also push centered-input-mode down on mobile */

    /* Hide floating actions completely on mobile */

    /* Mobile menu button styling */

    /* Show mobile menu button only when sidebar is hidden */

    /* Hide the centered-mode menu button on mobile — nav bar already has one */

    /* Show shorter placeholder on mobile */

    /* Make chat input area full width on mobile with side padding */

    /* Ensure inner wrapper div doesn't constrain width */

    /* Remove margins from chat form on mobile */

    /* Remove max-width constraint on mobile for input containers */

    /* Ensure chat-form-top-section doesn't constrain width */

    /* Make chat input container full width on mobile */

    /* Override mx-auto (margin auto) on mobile for input containers */

    /* Fix textarea overflow on mobile - reduce padding */

    /* Hide scrollbar for webkit browsers on mobile */

    /* Reduce container padding on mobile to prevent overflow */

    /* Reduce button padding on mobile */

    /* --- Mobile table fixes --- */

    /* Constrain AI message bubbles to viewport so tables don't blow out */

    /* User bubbles stay fit-content so they wrap tightly around text */

    /* Table wrapper becomes the horizontal scroll container */

    /* Let tables scroll inside wrapper without forcing centering */

    /* Reduce cell padding on mobile for tighter tables */

    /* --- Mobile chart fixes --- */

    /* Reduce side padding on chat area to give charts more room */

    #chat-mode > .lg\:justify-center.flex-1.flex {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
    }

    /* Ensure chart containers stay within viewport */

    /* Constrain the chat-container-responsive on mobile */

    /* Add breathing room above the first message on mobile */

    /* Settings page: align header with user status widget on mobile */

    /* Hide disclaimer and divider line on mobile */

    /* Limit Intercom messenger height on mobile */
  }

  .lg\:justify-end.message-images-container {
    margin-left: auto;
  }
}

.placeholder\:text-gray-500::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.placeholder\:text-gray-500::placeholder {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.01\]:hover {
  --tw-scale-x: 1.01;
  --tw-scale-y: 1.01;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-\[1\.02\]:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-emerald-400\/40:hover {
  border-color: rgb(52 211 153 / 0.4);
}

.hover\:border-emerald-400\/45:hover {
  border-color: rgb(52 211 153 / 0.45);
}

.hover\:border-green-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(74 222 128 / var(--tw-border-opacity, 1));
}

.hover\:border-violet-400\/40:hover {
  border-color: rgb(167 139 250 / 0.4);
}

.hover\:border-white\/15:hover {
  border-color: rgb(255 255 255 / 0.15);
}

.hover\:border-white\/20:hover {
  border-color: rgb(255 255 255 / 0.2);
}

.hover\:border-white\/25:hover {
  border-color: rgb(255 255 255 / 0.25);
}

.hover\:border-white\/35:hover {
  border-color: rgb(255 255 255 / 0.35);
}

.hover\:border-opacity-20:hover {
  --tw-border-opacity: 0.2;
}

.hover\:border-opacity-25:hover {
  --tw-border-opacity: 0.25;
}

.hover\:border-opacity-40:hover {
  --tw-border-opacity: 0.4;
}

.hover\:bg-amber-500\/20:hover {
  background-color: rgb(245 158 11 / 0.2);
}

.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.hover\:bg-emerald-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}

.hover\:bg-emerald-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}

.hover\:bg-emerald-500\/10:hover {
  background-color: rgb(16 185 129 / 0.1);
}

.hover\:bg-emerald-500\/15:hover {
  background-color: rgb(16 185 129 / 0.15);
}

.hover\:bg-emerald-500\/20:hover {
  background-color: rgb(16 185 129 / 0.2);
}

.hover\:bg-emerald-500\/25:hover {
  background-color: rgb(16 185 129 / 0.25);
}

.hover\:bg-emerald-600\/50:hover {
  background-color: rgb(5 150 105 / 0.5);
}

.hover\:bg-gray-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-500\/20:hover {
  background-color: rgb(239 68 68 / 0.2);
}

.hover\:bg-red-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.hover\:bg-sky-500\/20:hover {
  background-color: rgb(14 165 233 / 0.2);
}

.hover\:bg-violet-500\/15:hover {
  background-color: rgb(139 92 246 / 0.15);
}

.hover\:bg-violet-500\/25:hover {
  background-color: rgb(139 92 246 / 0.25);
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.hover\:bg-white\/15:hover {
  background-color: rgb(255 255 255 / 0.15);
}

.hover\:bg-white\/5:hover {
  background-color: rgb(255 255 255 / 0.05);
}

.hover\:bg-white\/\[0\.03\]:hover {
  background-color: rgb(255 255 255 / 0.03);
}

.hover\:bg-white\/\[0\.06\]:hover {
  background-color: rgb(255 255 255 / 0.06);
}

.hover\:bg-white\/\[0\.07\]:hover {
  background-color: rgb(255 255 255 / 0.07);
}

.hover\:bg-opacity-10:hover {
  --tw-bg-opacity: 0.1;
}

.hover\:bg-opacity-20:hover {
  --tw-bg-opacity: 0.2;
}

.hover\:bg-opacity-70:hover {
  --tw-bg-opacity: 0.7;
}

.hover\:bg-opacity-90:hover {
  --tw-bg-opacity: 0.9;
}

.hover\:from-blue-400:hover {
  --tw-gradient-from: #60a5fa var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-emerald-400:hover {
  --tw-gradient-from: #34d399 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-emerald-500:hover {
  --tw-gradient-from: #10b981 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(16 185 129 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-gray-400:hover {
  --tw-gradient-from: #9ca3af var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(156 163 175 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-green-400:hover {
  --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-indigo-500:hover {
  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-red-400:hover {
  --tw-gradient-from: #f87171 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(248 113 113 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-slate-500:hover {
  --tw-gradient-from: #64748b var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(100 116 139 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:from-teal-400:hover {
  --tw-gradient-from: #2dd4bf var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(45 212 191 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:via-emerald-400:hover {
  --tw-gradient-to: rgb(52 211 153 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #34d399 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.hover\:to-blue-400:hover {
  --tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
}

.hover\:to-cyan-400:hover {
  --tw-gradient-to: #22d3ee var(--tw-gradient-to-position);
}

.hover\:to-cyan-500:hover {
  --tw-gradient-to: #06b6d4 var(--tw-gradient-to-position);
}

.hover\:to-emerald-500:hover {
  --tw-gradient-to: #10b981 var(--tw-gradient-to-position);
}

.hover\:to-gray-500:hover {
  --tw-gradient-to: #6b7280 var(--tw-gradient-to-position);
}

.hover\:to-green-500:hover {
  --tw-gradient-to: #22c55e var(--tw-gradient-to-position);
}

.hover\:to-purple-600:hover {
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
}

.hover\:to-red-500:hover {
  --tw-gradient-to: #ef4444 var(--tw-gradient-to-position);
}

.hover\:to-rose-500:hover {
  --tw-gradient-to: #f43f5e var(--tw-gradient-to-position);
}

.hover\:to-slate-600:hover {
  --tw-gradient-to: #475569 var(--tw-gradient-to-position);
}

.hover\:to-teal-500:hover {
  --tw-gradient-to: #14b8a6 var(--tw-gradient-to-position);
}

.hover\:to-teal-600:hover {
  --tw-gradient-to: #0d9488 var(--tw-gradient-to-position);
}

.hover\:text-blue-200:hover {
  --tw-text-opacity: 1;
  color: rgb(191 219 254 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-300:hover {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.hover\:text-emerald-200:hover {
  --tw-text-opacity: 1;
  color: rgb(167 243 208 / var(--tw-text-opacity, 1));
}

.hover\:text-emerald-300:hover {
  --tw-text-opacity: 1;
  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-200:hover {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-300:hover {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.hover\:text-green-200:hover {
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity, 1));
}

.hover\:text-green-300:hover {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity, 1));
}

.hover\:text-red-300:hover {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.hover\:text-red-400:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}

.hover\:text-violet-200:hover {
  --tw-text-opacity: 1;
  color: rgb(221 214 254 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:no-underline:hover {
  text-decoration-line: none;
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.focus\:border-emerald-400\/60:focus {
  border-color: rgb(52 211 153 / 0.6);
}

.focus\:border-emerald-400\/70:focus {
  border-color: rgb(52 211 153 / 0.7);
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.focus\:ring-emerald-400\/25:focus {
  --tw-ring-color: rgb(52 211 153 / 0.25);
}

.focus\:ring-emerald-400\/30:focus {
  --tw-ring-color: rgb(52 211 153 / 0.3);
}

.focus\:ring-emerald-400\/40:focus {
  --tw-ring-color: rgb(52 211 153 / 0.4);
}

.focus\:ring-green-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity, 1));
}

.focus\:ring-green-400\/50:focus {
  --tw-ring-color: rgb(74 222 128 / 0.5);
}

.focus\:ring-opacity-50:focus {
  --tw-ring-opacity: 0.5;
}

.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:ring-emerald-400\/50:focus-visible {
  --tw-ring-color: rgb(52 211 153 / 0.5);
}

.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}

.focus-visible\:ring-offset-zinc-900:focus-visible {
  --tw-ring-offset-color: #18181b;
}

.active\:scale-\[0\.99\]:active {
  --tw-scale-x: 0.99;
  --tw-scale-y: 0.99;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:bg-blue-800:active {
  --tw-bg-opacity: 1;
  background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
}

.active\:bg-gray-500:active {
  --tw-bg-opacity: 1;
  background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
}

.active\:bg-green-700:active {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:hover\:scale-100:hover:disabled {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.disabled\:hover\:bg-green-600:hover:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:border-emerald-400\/80 {
  border-color: rgb(52 211 153 / 0.8);
}

.group:hover .group-hover\:bg-emerald-500\/35 {
  background-color: rgb(16 185 129 / 0.35);
}

.group:hover .group-hover\:bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}

.group:hover .group-hover\:text-gray-100 {
  --tw-text-opacity: 1;
  color: rgb(243 244 246 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.has-\[\:checked\]\:border-emerald-400\/70:has(:checked) {
  border-color: rgb(52 211 153 / 0.7);
}

.has-\[\:checked\]\:border-violet-400\/70:has(:checked) {
  border-color: rgb(167 139 250 / 0.7);
}

.has-\[\:checked\]\:bg-emerald-500\/\[0\.10\]:has(:checked) {
  background-color: rgb(16 185 129 / 0.10);
}

.has-\[\:checked\]\:bg-violet-500\/\[0\.12\]:has(:checked) {
  background-color: rgb(139 92 246 / 0.12);
}

.has-\[\:checked\]\:shadow-\[0_0_0_1px_rgba\(16\2c 185\2c 129\2c 0\.45\)\]:has(:checked) {
  --tw-shadow: 0 0 0 1px rgba(16,185,129,0.45);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

@media not all and (min-width: 1024px) {
  .max-lg\:last\:border-b-0:last-child {
    border-bottom-width: 0px;
  }
}

@media (min-width: 640px) {
  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:mb-10 {
    margin-bottom: 2.5rem;
  }

  .sm\:ml-auto {
    margin-left: auto;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:max-w-\[min\(100\%\2c 16rem\)\] {
    max-width: min(100%, 16rem);
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:items-stretch {
    align-items: stretch;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:justify-center {
    justify-content: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:self-end {
    align-self: flex-end;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-7 {
    padding: 1.75rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .sm\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .sm\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .sm\:text-right {
    text-align: right;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:p-8 {
    padding: 2rem;
  }

  .md\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:contents {
    display: contents;
  }

  .lg\:min-h-0 {
    min-height: 0px;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_12\.5rem_auto_max-content\] {
    grid-template-columns: minmax(0,1fr) 12.5rem auto max-content;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-col {
    flex-direction: column;
  }

  .lg\:content-start {
    align-content: flex-start;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:justify-end {
    justify-content: flex-end;
  }

  .lg\:justify-center {
    justify-content: center;
  }

  .lg\:justify-between {
    justify-content: space-between;
  }

  .lg\:gap-5 {
    gap: 1.25rem;
  }

  .lg\:gap-x-5 {
    -moz-column-gap: 1.25rem;
         column-gap: 1.25rem;
  }

  .lg\:border-0 {
    border-width: 0px;
  }

  .lg\:border-b {
    border-bottom-width: 1px;
  }

  .lg\:border-white\/10 {
    border-color: rgb(255 255 255 / 0.1);
  }

  .lg\:p-0 {
    padding: 0px;
  }

  .lg\:py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  .lg\:pl-0 {
    padding-left: 0px;
  }

  .lg\:pl-1 {
    padding-left: 0.25rem;
  }

  .lg\:pr-0 {
    padding-right: 0px;
  }

  .lg\:pr-1 {
    padding-right: 0.25rem;
  }

  .lg\:transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .lg\:hover\:bg-transparent:hover {
    background-color: transparent;
  }

  .lg\:hover\:bg-white\/\[0\.03\]:hover {
    background-color: rgb(255 255 255 / 0.03);
  }
}

/* Iter 68+69: mobile-only -- one suggestion bubble + the next-arrow on
   the SAME row instead of a 44 px header above a single bubble. The
   desktop layout fans 3 bubbles across the row with the next-arrow in a
   header above; on a 375 px viewport the empty header eats ~44 px of
   vertical space for one button. Row-reverse so the bubble sits on the
   left and the arrow on the right, matching the broker's reading order. */
@media (max-width: 768px) {
  #centered-suggestions {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .centered-suggestions-header {
    flex: 0 0 auto !important;
    width: 44px !important;
    height: auto !important;
    margin: 0 !important;
  }
  .centered-suggestions-track {
    flex: 1 1 auto !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
  .centered-suggestion-bubble:not(:first-child) {
    display: none !important;
  }
}
/* Premade automation template cards (utilities not yet in the JIT build) */
.p-3\.5{padding: 0.875rem;}
.pl-2\.5{padding-left: 0.625rem;}
.pt-1\.5{padding-top: 0.375rem;}
.my-0\.5{margin-top: 0.125rem;margin-bottom: 0.125rem;}
.ring-white\/5{--tw-ring-color: rgb(255 255 255 / 0.05);}
.hover\:ring-emerald-400\/30:hover{--tw-ring-color: rgb(52 211 153 / 0.3);}
.hover\:bg-white\/\[0\.03\]:hover{background-color: rgb(255 255 255 / 0.03);}
@media (min-width: 1280px){
  .xl\:grid-cols-4{grid-template-columns: repeat(4, minmax(0, 1fr));}
}

/* ============================================================================
   Mobile chat UI sweep (2026-07-24). Hand-written CSS, not Tailwind utilities,
   so it survives the JIT purge and needs no rebuild. Appended last so it wins
   the cascade over the earlier @media (max-width: 768px) block. Every rule is
   inside that media query -- desktop chat layout is untouched.

   Everything is scoped under #chat-main-surface, which only exists in
   chat/templates/chat/chat.html. embed_chat.html (the Chrome-extension iframe)
   links this same stylesheet and re-uses #chat-mode / #chat-input-area /
   .chat-container-responsive, so an unscoped rule would leak into the
   extension; the scope keeps the blast radius to the chat page.
   ========================================================================= */
@media (max-width: 768px) {
  /* Single source of truth for the fixed mobile nav band. Must stay in step with
     #chat-header's own height (3.5rem + safe area, set further up this file);
     the transcript offset below is now DERIVED from it instead of repeating a
     hardcoded 4rem guess, so the two can no longer drift apart. */
  :root {
    --chat-nav-h: calc(3.5rem + env(safe-area-inset-top, 0px));
  }

  /* --- Issue 1: first message eaten by the fixed top nav ------------------- */
  /* (a) transcript top offset = nav height + a 0.5rem gap. */
  #chat-main-surface #chat-mode > .flex-1.flex.justify-center,
  #chat-main-surface #agent-chat-mode > .flex-1.flex.justify-center {
    padding-top: calc(var(--chat-nav-h) + 0.5rem) !important;
  }
  /* (b) reserve the nav band for every PROGRAMMATIC scroll (scrollIntoView,
     in-page anchors, scroll-snap). Ordinary padding scrolls away with the
     content, so without this a scrolled-to element lands flush against the
     scrollport top -- i.e. underneath the fixed header. */
  #chat-main-surface #chat-mode,
  #chat-main-surface #agent-chat-mode {
    scroll-padding-top: var(--chat-nav-h);
    scroll-padding-bottom: 1.75rem;
  }
  /* (c) Iter 91's `.chat-container-responsive { margin-top: 0 }` reset never
     applied on the Q&A surface: an earlier (0,1,5,1) rule sets
     margin-top: 30px !important and outranks that (0,0,1,0) reset, so Q&A
     silently carried 30px more top clearance than the Agent surface. Re-assert
     the intended reset with enough specificity so both surfaces start the
     transcript at the same place. */
  #chat-main-surface #chat-mode > .flex-1.flex.justify-center > .chat-container-responsive,
  #chat-main-surface #agent-chat-mode > .flex-1.flex.justify-center > .chat-container-responsive {
    margin-top: 0 !important;
  }

  /* --- Issue 3a: clipped Fast / Thinking lock pill ------------------------- */
  /* The pill declared no line-height, so its label rode Tailwind's inherited
     1.5 with only 0.18rem of vertical padding, and the row it sits in has no
     box of its own -- one clip away from slicing the descender in "Thinking".
     Pin the metrics, keep the row overflow-visible, and give it a little top
     padding so the pill is not jammed against the transcript's bottom edge. */
  #chat-main-surface #locked-mode-row,
  #chat-main-surface #agent-locked-mode-row {
    min-height: 1.75rem;
    padding-top: 0.35rem;
    overflow: visible;
  }
  #chat-main-surface .locked-mode-badge {
    line-height: 1.35;
    min-height: 1.6rem;
    overflow: visible;
  }
  #chat-main-surface .locked-mode-badge .lmb-label {
    line-height: 1.35;
  }

  /* --- Issue 3b: transcript razor-cut where it meets the composer ---------- */
  /* Agent surface: #agent-input-area is an in-flow flex sibling, so the last
     visible line of the transcript was sliced mid-glyph at the scrollport's
     bottom edge. Fade that edge into the page background (#111827 = the mobile
     html/body colour) with an overlay hung off the composer's top edge, so it
     tracks the composer's height automatically. pointer-events:none so it can
     never swallow a tap; the jump-to-latest pill sits at z-index 10 and still
     paints above it. All the composer's popovers are appended to <body>, so
     position:relative here changes no containing block that matters. */
  #chat-main-surface #agent-input-area {
    position: relative;
  }
  #chat-main-surface #agent-input-area::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1.75rem;
    height: 1.75rem;
    background: linear-gradient(to top, #111827 0%, rgba(17, 24, 39, 0) 100%);
    pointer-events: none;
  }
  /* Legacy Q&A surface (only reachable with the unified-render flag off):
     #chat-input-area is position:absolute + forced transparent, so the
     transcript genuinely scrolls BEHIND it and was cut off dead at the viewport
     bottom in the gutters either side of the black input pill. Give the bar an
     opaque foot that fades upward instead. */
  #chat-main-surface #chat-input-area {
    background: linear-gradient(to top, #111827 0%, #111827 45%, rgba(17, 24, 39, 0) 100%) !important;
  }
}