/* Module maiven-ui : CSS extrait d'argon-app.css (scripts/extract_module_css.py). Feuille du module : editer ici, avec les variables de static/css/app/tokens.css. */
.maiven-input {
    width : 100%;
  }

  .maiven-input input[type="text"] {
    border: none;
    box-shadow: none;
    align-self: stretch;
    width : 100%;
    resize: none;
    overflow: auto; 
  }

  .maiven-input:focus {
    outline: none;
    border: none;
    box-shadow: none;
  }

/* ========================================
   MAIVEN CHAT WIDGET - STYLE CHATGPT
   Design épuré, moderne et centré
   ======================================== */

/* Container principal */
.maiven-chat-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ========================================
   CHAT WIDGET COMPACT VERSION
   ======================================== */

/* Container principal version condensée */
.maiven-chat-compact {
  position: relative;
  z-index: 999;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.maiven-game-preview {
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
  padding: 1rem;
  min-height: 180px;
}

.maiven-game-preview-head {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 0.25rem;
}

.maiven-game-preview-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

.maiven-game-preview-list {
  margin: 0;
  padding-left: 1rem;
  font-size: 0.84rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.maiven-game-preview-foot {
  margin-top: 0.75rem;
  font-size: 0.72rem;
  opacity: 0.7;
  text-align: right;
}

.maiven-game-preview-image {
  margin-top: 0.5rem;
  border-radius: 0.6rem;
  overflow: hidden;
  border: 1px solid var(--mv-gray-200);
}

.maiven-game-preview-image img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
}

/* Rendered game cards (editor content) */
.maiven-module .maiven-game-preview,
.maiven-module .maiven-hangman-rendered,
.maiven-module .maiven-memory-rendered,
.maiven-module .maiven-truefalse-rendered,
.maiven-module .maiven-association-rendered,
.maiven-module .maiven-ordering-rendered,
.maiven-module .maiven-wordsearch-rendered,
.maiven-module .maiven-hotspot-rendered {
  width: 100%;
  box-sizing: border-box;
}

.maiven-module .maiven-wordsearch-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.maiven-module .maiven-association-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.maiven-module .maiven-association-column {
  min-width: 0;
}

.maiven-module .maiven-association-column-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  opacity: 0.85;
}

.maiven-module .maiven-association-item {
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.12);
}

.maiven-module .maiven-association-item-text {
  font-weight: 600;
  line-height: 1.32;
  word-break: break-word;
}

.maiven-module .maiven-association-item-image {
  display: block;
  max-height: 56px;
  max-width: 100%;
  border-radius: 6px;
  object-fit: cover;
  margin-top: 6px;
}

.maiven-module .maiven-association-item-link {
  margin-top: 7px;
  font-size: 12px;
  opacity: 0.9;
}

.maiven-module .maiven-association-choice-btn {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 8px;
}

.maiven-module .maiven-wordsearch-grid-wrap {
  width: 100%;
  overflow: auto;
}

.maiven-module .maiven-wordsearch-grid {
  width: 100%;
}

.maiven-module .maiven-wordsearch-cell {
  touch-action: manipulation;
}

@media (max-width: 767.98px) {
  .maiven-module .maiven-game-preview,
  .maiven-module .maiven-hangman-rendered,
  .maiven-module .maiven-memory-rendered,
  .maiven-module .maiven-truefalse-rendered,
  .maiven-module .maiven-association-rendered,
  .maiven-module .maiven-ordering-rendered,
  .maiven-module .maiven-wordsearch-rendered,
  .maiven-module .maiven-hotspot-rendered {
    margin: 12px auto !important;
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .maiven-module .maiven-game-card-header {
    flex-wrap: wrap;
    align-items: flex-start !important;
  }

  .maiven-module .maiven-game-card-header > button {
    width: 100%;
  }

  .maiven-module .maiven-wordsearch-layout {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .maiven-module .maiven-wordsearch-grid-wrap {
    overflow: visible;
  }

  .maiven-module .maiven-wordsearch-cell {
    min-height: 26px !important;
    font-size: 11px !important;
  }
}

.maiven-form-preview-shell {
  align-items: center;
  background: var(--preview-bg);
  color: var(--preview-text);
  display: flex;
  flex: 1 1 auto;
  font-family: var(--preview-font-family);
  justify-content: center;
  min-height: 680px;
  padding: 2rem;
}

.maiven-form-preview-card {
  background: var(--preview-card-bg);
  border: 1px solid var(--preview-border);
  border-radius: var(--preview-radius);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
  max-width: var(--preview-max-width);
  padding: 3rem;
  width: 100%;
}

.maiven-form-preview-align-center {
  text-align: center;
}

.maiven-form-preview-density-compact {
  padding: 2rem;
}

.maiven-form-preview-density-spacious {
  padding: 4rem;
}

.maiven-form-preview-progress {
  color: var(--preview-text);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 2rem;
  opacity: 0.75;
}

.maiven-form-preview-progress div {
  background: var(--preview-secondary);
  border-radius: 999px;
  height: 0.45rem;
  margin-top: 0.5rem;
  overflow: hidden;
}

.maiven-form-preview-progress i {
  background: var(--preview-primary);
  display: block;
  height: 100%;
}

.maiven-form-preview-step {
  color: var(--preview-primary);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.maiven-form-preview-question {
  margin-bottom: 1.5rem;
}

.maiven-form-preview-number {
  color: var(--preview-primary);
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
}

.maiven-form-preview-question h2 {
  color: var(--preview-text);
  font-size: clamp(1.75rem, 4vw, 3.1rem);
  line-height: 1.08;
  margin: 0;
  overflow-wrap: anywhere;
}

.maiven-form-preview-question p {
  color: var(--preview-text);
  font-size: 1rem;
  margin: 0.9rem 0 0;
  opacity: 0.72;
}

.maiven-form-preview-control {
  background: var(--preview-field-bg);
  border: 1px solid var(--preview-border);
  border-radius: calc(var(--preview-radius) * 0.7);
  color: var(--preview-text);
  display: block;
  font: inherit;
  min-height: 3.25rem;
  padding: 0.85rem 1rem;
  width: 100%;
}

.maiven-form-preview-options {
  display: grid;
  gap: 0.75rem;
}

.maiven-form-preview-options label {
  align-items: center;
  background: var(--preview-field-bg);
  border: 1px solid var(--preview-border);
  border-radius: calc(var(--preview-radius) * 0.7);
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0.9rem 1rem;
}

.maiven-form-preview-hidden {
  background: var(--preview-secondary);
  border: 1px dashed var(--preview-primary);
  border-radius: calc(var(--preview-radius) * 0.7);
  color: var(--preview-text);
  padding: 1rem;
}

.maiven-form-preview-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 2rem;
}

.maiven-form-preview-actions .btn-primary {
  background: var(--preview-primary);
  border-color: var(--preview-primary);
  border-radius: var(--preview-button-radius);
}

.maiven-form-preview-actions .btn-outline-secondary {
  border-radius: var(--preview-button-radius);
}

.maiven-form-module--styled {
  background: var(--maiven-form-bg);
  color: var(--maiven-form-text);
  font-family: var(--maiven-form-font-family);
  margin: 1.5rem auto;
  max-width: var(--maiven-form-max-width);
  padding: 1.5rem;
}

.maiven-form-module--styled [data-maiven-form] {
  background: var(--maiven-form-card-bg);
  border: 1px solid var(--maiven-form-border);
  border-radius: var(--maiven-form-radius);
  padding: 1.5rem;
}

.maiven-form-module--styled .maiven-form-field {
  margin-bottom: 1rem;
}

.maiven-form-module--styled label {
  color: var(--maiven-form-text);
  display: block;
  font-weight: 700;
}

.maiven-form-module--styled input:not([type="radio"]):not([type="checkbox"]),
.maiven-form-module--styled textarea,
.maiven-form-module--styled select {
  background: var(--maiven-form-field-bg);
  border: 1px solid var(--maiven-form-border);
  border-radius: calc(var(--maiven-form-radius) * 0.65);
  color: var(--maiven-form-text);
  display: block;
  margin-top: 0.45rem;
  padding: 0.75rem 0.9rem;
  width: 100%;
}

.maiven-form-module--styled small {
  color: var(--maiven-form-text);
  display: block;
  margin-top: 0.35rem;
  opacity: 0.7;
}

.maiven-form-module--styled .maiven-form-option {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  font-weight: 500;
  margin-top: 0.5rem;
}

.maiven-form-module--styled .maiven-form-submit {
  background: var(--maiven-form-primary);
  border: 1px solid var(--maiven-form-primary);
  border-radius: var(--maiven-form-button-radius);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  padding: 0.85rem 1.25rem;
}

.maiven-form-module--styled.maiven-form-button-outline .maiven-form-submit {
  background: transparent;
  color: var(--maiven-form-primary);
}

.maiven-form-module--styled.maiven-form-button-soft .maiven-form-submit {
  background: var(--maiven-form-secondary);
  color: var(--maiven-form-primary);
}

.maiven-form-module--styled .maiven-form-progress {
  background: var(--maiven-form-secondary);
  border-radius: 999px;
  height: 0.4rem;
  margin-bottom: 1rem;
  overflow: hidden;
}

.maiven-form-module--styled .maiven-form-progress-bar {
  background: var(--maiven-form-primary);
  display: block;
  height: 100%;
  width: 25%;
}

.maiven-form-module--styled.maiven-form-align-center {
  text-align: center;
}

.maiven-form-module--styled.maiven-form-density-compact [data-maiven-form] {
  padding: 1rem;
}

.maiven-form-module--styled.maiven-form-density-spacious [data-maiven-form] {
  padding: 2rem;
}

@media (max-width: 992px) {

  .maiven-form-preview-shell {
    min-height: 520px;
    padding: 1rem;
  }

  .maiven-form-preview-card {
    padding: 1.5rem;
  }
}

/* Toast de confirmation d'insertion (au-dessus de la modale) */
.maiven-sg-toast {
  align-items: center;
  background: #111827;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  color: #fff;
  display: flex;
  gap: 0.6rem;
  left: 50%;
  max-width: calc(100vw - 32px);
  opacity: 0;
  padding: 0.75rem 0.85rem 0.75rem 1rem;
  position: fixed;
  transform: translate(-50%, 16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 2000;
  bottom: 24px;
}

.maiven-sg-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.maiven-sg-toast-icon {
  color: #4ade80;
  flex-shrink: 0;
}

.maiven-sg-toast-msg {
  font-size: 0.88rem;
  font-weight: 500;
}

.maiven-sg-toast-undo {
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  margin-left: 0.4rem;
  padding: 0.35rem 0.7rem;
  transition: background-color 0.15s ease;
}

.maiven-sg-toast-undo:hover {
  background: rgba(255, 255, 255, 0.22);
}

.maiven-sg-toast-close {
  background: none;
  border: 0;
  color: #9ca3af;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0 0.15rem;
}

.maiven-sg-toast-close:hover {
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .maiven-sg-toast { transition: opacity 0.25s ease; transform: translate(-50%, 0); }
}
/* Hector document preparation */
:is(#maiven-floating-chat, .maiven-hector-chat) .mfc-msg-prepare .mfc-bubble {
  border: 1px solid var(--mv-primary-100);
  background: var(--mv-primary-50);
  color: #1e3a8a;
}

:is(#maiven-floating-chat, .maiven-hector-chat) .mfc-prepare-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--mv-gray-600);
}

:is(#maiven-floating-chat, .maiven-hector-chat) .mfc-prepare-steps span {
  border: 1px solid var(--mv-primary-200);
  border-radius: 999px;
  padding: 2px 8px;
  background: #ffffff;
}
