/* Reset and base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body, html, #col_container {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  background-color: #121212; /* Dark, jungle night */
  color: #d0d8cc; /* soft pale greenish */
  font-family: 'IBM Plex Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Container flex columns */
#col_container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

/* Header / toolbar */
#component-7 {
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1e1e1e;
  border-bottom: 1px solid #2a2a2a;
  user-select: none;
  padding: 0 15px;
  font-weight: 600;
  color: #81c784;
  letter-spacing: 0.05em;
  z-index: 10;
}

/* Action button */
#component-9 {
  background-color: #4caf50;
  border-radius: 8px;
  color: #121212;
  padding: 8px 22px;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  border: none;
  transition: background-color 0.25s ease;
}

#component-9:hover:enabled {
  background-color: #66bb6a;
}

/* Form input container */
.form.svelte-633qhp {
  flex-shrink: 0;
  min-height: 56px;
  background-color: #1e1e1e;
  border-bottom: 1px solid #2a2a2a;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Textarea: expandable, scrollable, styled */
textarea.scroll-hide.svelte-173056l {
  flex-grow: 1;
  min-height: 40px;
  max-height: 40vh;
  background-color: #222;
  border: 1.5px solid #4caf50;
  border-radius: 8px;
  color: #c9e7b9;
  font-family: 'Consolas', monospace;
  font-size: 1rem;
  padding: 10px 14px;
  resize: vertical;
  overflow-y: auto;
  outline-offset: 2px;
  transition: box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

textarea.scroll-hide.svelte-173056l:focus {
  border-color: #81c784;
  box-shadow: 0 0 10px #4caf50aa;
}

/* Chat area */
#chatbot {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column-reverse; /* newest bottom */
  overflow-y: auto;
  padding: 14px 16px;
  background-color: #121212;
  color: #d0d8cc;
  scrollbar-width: thin;
  scrollbar-color: #4caf50 #121212;
  min-width: 0;
}

/* Scrollbar styling for WebKit */
#chatbot::-webkit-scrollbar {
  width: 10px;
}
#chatbot::-webkit-scrollbar-track {
  background: #1b1b1b;
  border-radius: 10px;
}
#chatbot::-webkit-scrollbar-thumb {
  background-color: #4caf50;
  border-radius: 10px;
  border: 2px solid #1b1b1b;
}
#chatbot::-webkit-scrollbar-thumb:hover {
  background-color: #81c784;
}

/* Message bubbles */
.message-row.bubble.user-row {
  background-color: rgba(76, 175, 80, 0.22);
  color: #a5d6a7;
  align-self: flex-start;
  border-radius: 16px 16px 16px 4px;
  margin: 6px 0;
  padding: 10px 18px;
  max-width: 75vw;
  word-wrap: break-word;
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.35;
  box-shadow: 0 1px 4px rgba(76, 175, 80, 0.25);
  user-select: text;
}

.message-row.bubble.bot-row {
  background-color: rgba(33, 33, 33, 0.9);
  color: #ccc;
  align-self: flex-end;
  border-radius: 16px 16px 4px 16px;
  margin: 6px 0;
  padding: 10px 18px;
  max-width: 75vw;
  word-wrap: break-word;
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.35;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  user-select: text;
}

/* Accessibility: focus visible */
*:focus-visible {
  outline: 2px solid #81c784;
  outline-offset: 3px;
  box-shadow: 0 0 8px #4caf5099;
}

/* Remove default outline for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Hide unnecessary UI */
#user_consent_container,
.share-button,
footer,
.built-with,
#component-1,
#component-2,
#component-10,
#component-13,
.svelte-1b6s6s,
.svelte-1gfkn6j,
.svelte-1eq475l,
.svelte-g2oxp3,
.svelte-1to105q,
.icon-button-wrapper,
.toast-wrap,
.toast-body,
.toast-title,
.toast-text,
.toast-close,
.toast-icon,
.toast-details,
.settings,
.settings-wrapper,
.settings-panel,
.download-link,
.extra-feedback,
.extra-feedback-options,
.message-buttons,
.message-buttons-left,
.message-buttons-right,
.wrapper:not(.svelte-g3p8na),
.panel:not(.svelte-yaaj3),
.status-bar,
#statusBar,
.control-wrapper,
.toolbar-wrap,
.nav-holder,
.nav,
.menu,
.tab-container,
.stepper,
.sidebar,
.loading,
.loader,
.progress-bar,
.api-docs,
.api-docs-wrap,
.api-docs-menu,
.api-section,
.api-section-header,
.api-section-content,
.api-count,
.meta-text,
.timebox,
.hf.svelte-1170pvd,
.html-container,
.markdown-body,
.captcha,
.banner-wrap,
.snippets,
.extra,
.selection-button,
.selection-button-row,
.options,
.option,
.gallery,
.gallery-item,
.attachments,
.uploading,
.uploaded,
.file-container,
.file-preview,
.file-name,
.file-info,
.file-icon,
.file-type,
.file-wrap,
.upload-container,
.image-container,
.image-frame,
.image-preview,
.image-preview-close-button,
.image-overlay,
.video-container,
.video-preview,
.video-player,
.audio-container,
.audio-player,
.audio-controls,
.scroll-down-button-container,
.scroll-down-button,
.scroll-top-button,
.modal,
.modal-inner,
.overlay,
.backdrop,
.toast,
.toast-message,
.tooltip,
.tooltip-content,
.tooltip-arrow,
.tooltip-inner,
.wavesurfer,
.waveform-container,
.waveform-timeline,
.progress-level,
.progress-text,
.progress-level-inner,
.progress-bar-wrap,
.progress-bar,
.selection-button-column,
.selection-button-row,
.spin-button,
.dragging,
.drag-handle,
.history,
.history-item,
.session-info,
.session-history,
.emoji-picker,
emoji-picker,
.vote,
.vote-button,
.share-dialog,
.notification,
.notification-content,
.notification-icon,
.notification-title,
.notification-text,
.notification-close,
.updates,
.updates-list,
.updates-item,
.unread,
.user-suggestions,
.suggestion-list,
.autocomplete,
.info-box,
.info-message,
.info-text,
.info-icon,
.footer,
.header,
.title,
.titlebar,
.nav-bar,
nav,
nav-link,
nav-item {
  display: none !important;
}
  
/* Show core app parts */
#col_container,
#component-7,
#component-9,
.form.svelte-633qhp,
textarea.scroll-hide.svelte-173056l,
#chatbot,
.bubble-wrap.svelte-gjtrl6,
.message-row,
.message-row.bubble,
.message-row.bubble.user-row,
.message-row.bubble.bot-row,
.bubble,
.bubble.with-avatar,
.bubble.with-avatar.user-row,
.avatar-container,
.avatar,
.avatar-image,
.user-icon,
.bot-icon,
.prose,
.panel-full-width.svelte-yaaj3,
.wrapper.svelte-g3p8na {
  display: block !important;
}