/* app/static/css/math_keyboard.css */

/* =========================
   Buttons / wrappers
   ========================= */

/* Бутон "Формула" до textarea */
.math-insert-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .6rem;
  border-radius: .55rem;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(15,23,42,.55);
  color: rgba(226,232,240,.95);
  font-size: .9rem;
}
.math-insert-btn:hover {
  border-color: rgba(148,163,184,.6);
  background: rgba(15,23,42,.75);
}

/* Контейнер над textarea (за да сложим бутон горе вдясно) */
.math-textarea-wrap { position: relative; }
.math-textarea-wrap .math-insert-btn {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 2;
}

/* =========================
   Modal
   ========================= */

.math-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9998;
}

.math-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(860px, calc(100vw - 24px));
  background: rgba(2,6,23,.98);
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 16px;
  box-shadow: 0 20px 80px rgba(0,0,0,.5);
  z-index: 9999;
  overflow: hidden;
}

.math-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(148,163,184,.18);
  color: rgba(226,232,240,.95);
  font-weight: 700;
}

.math-modal-body { padding: 1rem; }

.math-modal-actions {
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
  padding: .75rem 1rem 1rem;
}

.math-modal-actions button {
  border-radius: .65rem;
  padding: .45rem .8rem;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(15,23,42,.7);
  color: rgba(226,232,240,.95);
}
.math-modal-actions button.primary {
  border-color: rgba(56,189,248,.35);
  background: rgba(56,189,248,.15);
}
.math-modal-actions button:hover { filter: brightness(1.08); }

/* =========================
   MathLive field styling
   ========================= */

math-field.math-modal-field {
  width: 100%;
  min-height: 54px;
  padding: .35rem .5rem;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(15,23,42,.55);
  color: rgba(226,232,240,.95);
    /* ✅ 2x по-голям текст/цифри във формулното поле */
  font-size: 2rem;
  line-height: 1.2;

}

/* WYSIWYG wrapper (ако го ползваш) */
.math-editor-wrapper { position: relative; }
.math-keyboard-toggle {
  position: absolute;
  top: .4rem;
  right: .45rem;
  border-radius: .65rem;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(15,23,42,.7);
  color: rgba(226,232,240,.95);
  padding: .35rem .55rem;
}
.math-keyboard-toggle:hover { filter: brightness(1.08); }

/* Виртуалната клавиатура да е над backdrop-а */
.ML__keyboard,
.ML__virtual-keyboard {
  z-index: 10000 !important;
}

/* =========================
   Dark theme fixes (caret, selection, slots)
   ========================= */

/* 1) CSS variables (MathLive ги чете в много версии) */
math-field {
  --caret-color: #e6eaf2;
  --selection-background-color: rgba(59,130,246,0.28);
  --selection-color: #e6eaf2;
    /* === FIX: маха белия "caret highlight" (contains highlight) === */
  --contains-highlight-background-color: transparent !important;
  --contains-highlight-outline-color: transparent !important;
  --contains-highlight-color: transparent !important;

  /* fallback имена (в зависимост от версията) */
  --highlight-color: transparent !important;
  --highlight-text: transparent !important;

  --placeholder-color: rgba(226,232,240,0.55);

  /* важни за "празните кутии" при корен/степен */
  --prompt-background-color: rgba(15,23,42,0.85);
  --prompt-border-color: rgba(59,130,246,0.45);
  --prompt-text-color: rgba(226,232,240,0.85);
}

/* 2) Caret да е видим и да няма бял block */
math-field .ML__caret,
math-field .ML__caret:after {
  background: transparent !important;
  border-left: 2px solid #e6eaf2 !important;
}
math-field .ML__caret--block {
  background: rgba(59,130,246,0.28) !important;
}

/* 3) Native selection (contenteditable) да не е бяла */
math-field ::selection,
math-field *::selection {
  background: rgba(59,130,246,0.28) !important;
  color: #e6eaf2 !important;
}
math-field ::-moz-selection,
math-field *::-moz-selection {
  background: rgba(59,130,246,0.28) !important;
  color: #e6eaf2 !important;
}

/* 4) Prompt/placeholder/ghost (ако са HTML елементи) */
math-field .ML__prompt,
math-field .ML__placeholder,
math-field .ML__ghost {
  background: rgba(15,23,42,0.85) !important;
  color: rgba(226,232,240,0.95) !important;
  outline: 1px solid rgba(59,130,246,0.45) !important;
  border-radius: 4px;
}
math-field .ML__prompt *,
math-field .ML__placeholder *,
math-field .ML__ghost * {
  background: transparent !important;
}

/* 5) Празните "кутии" често са SVG rect → правим ги тъмни */
math-field svg rect {
  fill: rgba(15,23,42,0.85) !important;
  stroke: rgba(59,130,246,0.45) !important;
  stroke-width: 1.2 !important;
}

/* 6) Някои версии ползват <mark>/<ins> за placeholder box */
math-field mark,
math-field ins {
  background: rgba(15,23,42,0.85) !important;
  color: rgba(226,232,240,0.95) !important;
  outline: 1px solid rgba(59,130,246,0.45) !important;
  border-radius: 4px;
}

/* 7) Last resort: ако MathLive е инжектирал inline "white background" */
math-field [style*="background: white"],
math-field [style*="background:white"],
math-field [style*="background: #fff"],
math-field [style*="background:#fff"],
math-field [style*="background: rgb(255, 255, 255)"] {
  background: rgba(15,23,42,0.85) !important;
  color: rgba(226,232,240,0.95) !important;
  outline: 1px solid rgba(59,130,246,0.45) !important;
}
/* =========================================================
   FX inside input (modern embedded style)
   ========================================================= */

.math-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* input */
.math-input-wrap > input.math-input {
  width: 100%;
  height: 40px;
  padding-right: 46px;   /* място за fx бутона */
}

/* FX бутон вътре */
.math-input-wrap .math-insert-icon-btn {
  position: absolute;
  right: 6px;

  top: 50%;
  transform: translateY(-50%);

  height: 30px;
  width: 34px;
  border-radius: 8px;
  border: 1px solid rgba(59,130,246,.35);
  background: rgba(59,130,246,.12);
  color: #60a5fa;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: all .2s ease;
}

/* fx текст */
.math-fx {
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1;
}

/* hover */
.math-insert-icon-btn:hover {
  background: rgba(59,130,246,.25);
  border-color: rgba(59,130,246,.6);
}
/* =========================================================
   Exam Builder options: input-ите да са full width (до края)
   Работи за single/multi choice редовете с "Формула" бутон
   ========================================================= */

/* Редът с опцията (A/B/C/D) да е flex и да позволява разтягане */
.answer-row,
.choice-row,
.option-row,
.answer-item {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Wrapper-ът около input-а + бутона "Формула" да заема целия остатък */
.answer-row .math-textarea-wrap,
.choice-row .math-textarea-wrap,
.option-row .math-textarea-wrap,
.answer-item .math-textarea-wrap {
  flex: 1 1 auto;
  min-width: 0;            /* важно за да не се реже */
}

/* Самият input да се разтегне */
.answer-row .math-textarea-wrap > input.math-input,
.choice-row .math-textarea-wrap > input.math-input,
.option-row .math-textarea-wrap > input.math-input,
.answer-item .math-textarea-wrap > input.math-input {
  width: 100% !important;
  flex: 1 1 auto;
  min-width: 0;
}

/* Бутонът "Формула" да не свива input-а */
.math-textarea-wrap .math-insert-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
/* =========================================================
   FIX: Options inputs да са до края (за новия .math-input-wrap)
   ========================================================= */

/* wrapper-ът с input+fx да заема целия остатък в реда */
.answer-row .math-input-wrap,
.choice-row .math-input-wrap,
.option-row .math-input-wrap,
.answer-item .math-input-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

/* input вътре да се разтяга на 100% */
.answer-row .math-input-wrap > input.math-input,
.choice-row .math-input-wrap > input.math-input,
.option-row .math-input-wrap > input.math-input,
.answer-item .math-input-wrap > input.math-input {
  width: 100% !important;
  flex: 1 1 auto;
  min-width: 0;
}
/* FIX mobile MathLive keyboard */
.ML__keyboard,
.ML__virtual-keyboard {
  z-index: 100000 !important;
}

.math-modal {
  z-index: 99990 !important;
}

.math-modal-backdrop {
  z-index: 99980 !important;
}

.math-modal-field {
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}

.math-modal button {
  touch-action: manipulation;
}
  .math-modal {
    top: 20% !important;}
/* Mobile fix: качва прозореца "Вмъкни формула" нагоре,
   за да не се скрива бутонът "Вмъкни" от клавиатурата */
@media (max-width: 768px) {
  .math-modal {
    top: 10% !important;
    transform: translateX(-50%) !important;
    max-height: calc(100vh - 260px) !important;
    overflow-y: auto !important;
  }

  .math-modal-body {
    max-height: calc(100vh - 360px) !important;
    overflow-y: auto !important;
  }

  .math-modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    background: #050816 !important;
    padding-top: 10px !important;
    z-index: 5 !important;
  }
}
/* iPhone app custom HTML math keyboard */
.ios-math-keyboard {
  margin-top: .75rem;
  padding: .55rem;
  border-radius: 14px;
  background: #cfd5dd;
  color: #111827;
  max-height: 42vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
}

.ios-math-tabs {
  display: flex;
  gap: .35rem;
  margin-bottom: .5rem;
}

.ios-math-tabs button {
  flex: 1;
  border: 0;
  border-radius: 8px;
  padding: .4rem .45rem;
  background: rgba(255,255,255,.45);
  color: #111827;
  font-weight: 700;
  font-size: .9rem;
}

.ios-math-tabs button.active {
  background: #ffffff;
}

.ios-math-row {
  display: flex;
  gap: .35rem;
  margin-bottom: .4rem;
}

.ios-math-key {
  flex: 1 1 0;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: #f8fafc;
  color: #111827;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
  touch-action: manipulation;
}

.ios-math-key:active {
  transform: translateY(1px);
  filter: brightness(.94);
}

.ios-math-key.wide {
  flex: 3 1 0;
}

@media (max-width: 768px) {
  .math-modal {
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 20px) !important;
    overflow-y: auto !important;
  }

  .math-modal-body {
    max-height: none !important;
    overflow-y: visible !important;
  }

  .math-modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    background: #050816 !important;
    padding-top: 10px !important;
    z-index: 5 !important;
  }
}
/* iPhone: скрий MathLive virtual keyboard напълно */
body.ios-html-math-keyboard .ML__keyboard,
body.ios-html-math-keyboard .ML__virtual-keyboard,
body.ios-html-math-keyboard math-virtual-keyboard {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* =========================================================
   Ученически WYSIWYG отговор:
   формулата се вижда, textarea с бектиците е скрито
   ========================================================= */

.math-editor-wrapper {
  position: relative;
  width: 100%;
}

.math-editor-wrapper .math-answer-source {
  display: none !important;
}

.math-editor-wrapper .math-input-wrap {
  width: 100%;
  align-items: stretch;
}

.math-editor-wrapper
.math-input-wrap
> math-field.math-editor {
  display: block;
  width: 100%;
  min-height: 132px;
  box-sizing: border-box;

  padding:
    14px
    54px
    14px
    14px;

  border:
    1px solid
    rgba(148, 163, 184, .45);

  border-radius: 12px;

  background:
    var(--bs-body-bg, #ffffff);

  color:
    var(--bs-body-color, #0f172a);

  font-size: 1.45rem;
  line-height: 1.55;

  overflow-x: auto;
}

.math-editor-wrapper
.math-input-wrap
> math-field.math-editor:focus-within {
  border-color: #60a5fa;

  box-shadow:
    0 0 0 4px
    rgba(96, 165, 250, .18);

  outline: none;
}

/* Светъл изглед на изпита */
#exam-root.exam-light-ui
.math-editor-wrapper
.math-input-wrap
> math-field.math-editor {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;

  --caret-color: #0f172a;
  --selection-color: #0f172a;
}

#exam-root.exam-light-ui
.math-editor-wrapper
.math-input-wrap
> math-field.math-editor:focus-within {
  border-color: #60a5fa !important;
}

/* fx бутонът да стои горе вдясно */
.math-editor-wrapper
.math-input-wrap
.math-insert-icon-btn {
  top: 12px;
  transform: none;
}
/*
 * Скриваме вградената икона за клавиатура
 * на видимото поле за ученически отговор.
 */
.math-editor-wrapper
math-field.math-editor::part(virtual-keyboard-toggle) {
  display: none !important;
}

/*
 * Скриваме менюто с трите линии.
 */
.math-editor-wrapper
math-field.math-editor::part(menu-toggle) {
  display: none !important;
}/* =========================================================
   Нормално поле за текст + визуални формули
   ========================================================= */

.math-editor-wrapper
.math-input-wrap
> .math-answer-editor {
  display: block;
  width: 100%;
  min-height: 132px;
  box-sizing: border-box;

  padding:
    14px
    54px
    14px
    14px;

  border:
    1px solid
    rgba(148, 163, 184, .45);

  border-radius: 12px;

  background:
    var(--bs-body-bg, #ffffff);

  color:
    var(--bs-body-color, #0f172a);

  font-size: 1.15rem;
  line-height: 1.55;

  white-space: pre-wrap;
  overflow-wrap: anywhere;

  outline: none;
  cursor: text;

  -webkit-user-select: text;
  user-select: text;
}

/*
 * При фокус се отваря нормалната
 * системна клавиатура на телефона.
 */
.math-editor-wrapper
.math-input-wrap
> .math-answer-editor:focus {
  border-color: #60a5fa;

  box-shadow:
    0 0 0 4px
    rgba(96, 165, 250, .18);
}

/* Placeholder */
.math-answer-editor.is-empty::before {
  content: attr(data-placeholder);
  color: rgba(148, 163, 184, .75);
  pointer-events: none;
}

/*
 * Визуална формула вътре
 * в нормалния текст.
 */
.math-inline-token {
  display: inline-block;
  vertical-align: middle;
  margin: 0 .08em;

  user-select: all;
  -webkit-user-select: all;
}

math-field.math-inline-render {
  display: inline-block;

  width: auto;
  min-width: 0;
  min-height: 0;

  padding: 0;
  margin: 0;

  border: 0 !important;
  background: transparent !important;
  color: inherit !important;

  font-size: 1.15em;
  line-height: 1;

  pointer-events: none;

  --caret-color: transparent;
  --selection-background-color:
    transparent;
}

/*
 * Скритото textarea продължава
 * да се изпраща към сървъра.
 */
.math-editor-wrapper
.math-answer-source {
  display: none !important;
}

/*
 * fx остава горе вдясно.
 */
.math-editor-wrapper
.math-input-wrap
.math-insert-icon-btn {
  top: 12px;
  transform: none;
}

/* Светла тема */
#exam-root.exam-light-ui
.math-answer-editor {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
/* ======================================
   ХИМИЯ – мобилна математическа клавиатура
====================================== */

.ios-math-keyboard .ios-math-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 5px;
  -webkit-overflow-scrolling: touch;
}

.ios-math-keyboard .ios-math-tabs button {
  flex: 0 0 auto;
  min-width: 55px;
  padding: 8px 10px;
}

.ios-math-keyboard .ios-math-row .ios-math-key {
  min-width: 0;
  font-size: 0.88rem;
  padding: 7px 3px;
}