/* Mobile-First Base Styles */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Prevent text overflow on mobile */
* {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Ensure touch targets are at least 44px for accessibility */
@media (max-width: 640px) {
  button, 
  [role="button"],
  input[type="button"],
  input[type="submit"],
  a.btn,
  .min-touch-target {
    min-height: 44px;
  }
  
  /* Reduce base font size slightly on very small screens */
  html {
    font-size: 14px;
  }
}

/* Prevent horizontal scroll from overflowing elements */
.no-overflow-x {
  overflow-x: hidden;
}

.reset-all,
.reset-all * {
  all: revert !important;
  color: inherit;
  font: inherit;
}

/* Erlaubt das horizontale Resize der Session-Navigation */
#sessionList {
  resize: horizontal;
  overflow: auto;
}

/* sorgt für weiches Verhalten beim Größenanpassen */
#sessionList {
  transition: width 0.15s ease;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.icon-custom {
  color: #00a8d7;
}

.button-custom-bg {
  background-color: #00a8d7;
}

.button-custom-bg:hover {
  background-color: #008cbf;
  /* etwas dunklerer Blauton */
}

.bubble.user button {
  color: #d9f4ff;
  transition: color 0.15s ease, transform 0.15s ease;
}

.bubble.user button:hover {
  color: #00e0ff;           /* leuchtendes Türkis auf dunklem Blau */
  transform: scale(1.3);
}

.bubble.user button:active {
  transform: scale(1.1);
}

.deleted-msg {
  color: rgba(255, 255, 255, 0.85);     /* fast weiß, aber nicht grell */
  font-style: italic;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* leichte Kontur für Lesbarkeit */
}

/** Überschreibe tippy-style
 */
.tippy-content {
  background-color: rgba(255, 255, 255, 0) !important;
  color: #000000;
}

.tippy-box {
  background-color: rgba(255, 255, 255, 0) !important
}

/**
  Drag&Drop von Sessions
 */

.drop-target {
  transition: all 0.15s ease-in-out;
  cursor: copy;
  /* Grundcursor beim Hover */
}

.drop-target.dragover {
  cursor: move !important;
  /* Mausicon beim Drop erlaubt */
}

/** Stile für den Chat-Bubble-Text
 */

.bubble-text {
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: 1.4;
  white-space: normal;
  font-size: 0.875rem;
}

.bubble-text * {
  all: revert;
}

.bubble-text ul,
.bubble-text ol {
  padding-left: 1rem;
  /* Standard-Einrückung */
  margin: 0.375rem 0;
}

.bubble-text li {
  margin-left: 0.75rem;
}

.bubble-text code,
.bubble-text pre {
  font-family: ui-monospace, monospace;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 0.1rem 0.25rem;
  font-size: 0.8125rem;
}

.bubble-text table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5rem 0;
  font-size: 0.8125rem;
}

.bubble-text th,
.bubble-text td {
  border: 1px solid #d1d5db;
  /* Tailwind gray-300 */
  padding: 0.375rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.bubble-text th {
  background-color: #f3f4f6;
  /* gray-100 */
  font-weight: 600;
}

.bubble-text tr:nth-child(even) {
  background-color: #fafafa;
}

.bubble-text table {
  border-radius: 0.5rem;
  overflow: hidden;
  display: block;
  max-width: 100%;
  overflow-x: auto;
  /* sorgt für Scrollbarkeit bei breiten Tabellen */
}

.bubble-text pre {
  display: block;
  overflow-x: auto;
  white-space: pre;
  padding: 0.625em;
  border-radius: 0.4em;
  background: #f5f5f5;
  /* Gesamthintergrund */
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
  line-height: 1.3;
}

.bubble-text pre code {
  display: inline;
  white-space: inherit;
  background: #fafafa;
  /* neutraler, etwas hellerer Ton */
  color: #111;
  /* kontrastreich, aber unaufdringlich */
  border-radius: 0.25em;
  padding: 0.1em 0.2em;
  font-size: 0.8125rem;
}