/* MathLive-style docked keyboard (not floating MathLive VK) + wider message field */

.wptc-math-panel {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  width: 100%;
  box-sizing: border-box;
}
.wptc-math-panel.wptc-math-open {
  display: flex;
}
.wptc-math-panel math-field {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid #94a3b8;
  border-radius: 8px;
  background: #fff;
  font-size: 20px;
  box-sizing: border-box;
}
.wptc-math-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}
.wptc-math-actions button {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #1e293b;
  border-radius: 8px;
  padding: 10px 16px;
  min-height: 44px;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
}
.wptc-math-actions button.primary {
  background: #3d7eff;
  border-color: #3d7eff;
  color: #fff;
  flex: 1;
}
.wptc-math-hint {
  font-size: 11px;
  color: #6b7280;
  margin: 0;
}

.wptc-math-toggle {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #3d7eff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
}
.wptc-math-toggle.wptc-math-active,
.wptc-math-toggle[aria-pressed="true"] {
  background: #3d7eff;
  color: #fff;
  border-color: #3d7eff;
}

/* Footer / message field — wider, one line, vertical scroll */
#wptc-chat-widget footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
}
#wptc-chat-widget footer .wptc-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
}
/* Widget message field — compact */
#wptc-chat-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  max-height: 64px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.35;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  outline: none;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
#wptc-chat-input:focus {
  border-color: #3d7eff;
}

/* Shortcode message field — wider area, one line + vertical scroll */
#wtb-shortcode-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  max-height: 96px;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.35;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  outline: none;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
}
#wtb-shortcode-input:focus {
  border-color: #3d7eff;
}

.wtb-shortcode-input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.wtb-shortcode-input-row .wptc-math-panel {
  order: -1;
  width: 100%;
}
.wtb-shortcode-input-row #wtb-shortcode-input {
  flex: 1 1 100%;
}

/* ===== MathLive-style docked board (bottom of viewport) ===== */
.wptc-mlboard {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 2147483000;
  background: #1a1d23;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.35);
  padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.wptc-mlboard[hidden] {
  display: none !important;
}

.wptc-mlboard-tabs {
  display: flex;
  gap: 8px;
  padding: 4px 4px 10px;
  justify-content: flex-start;
}
.wptc-mlboard-tab {
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  min-height: 36px;
  background: #2a2e36;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.wptc-mlboard-tab.is-active {
  background: #3d7eff;
  color: #fff;
}

.wptc-mlboard-keys {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wptc-mlboard-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.wptc-mlboard-key {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  border: none;
  border-radius: 8px;
  background: #2f3540;
  color: #f1f5f9;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.wptc-mlboard-key.wide {
  flex: 1.35 1 0;
  font-size: 12px;
  background: #4a5568;
}
.wptc-mlboard-key.action {
  background: #4a5568;
}
.wptc-mlboard-key.accent {
  background: #3d7eff;
  color: #fff;
}
.wptc-mlboard-key:active {
  filter: brightness(1.2);
}

/* Up/down/left/right pad, sharing the bottom control row (rather than
   taking a row of its own) so it doesn't add extra height - used to
   step between a fraction's numerator/denominator and, in a matrix,
   move between cells/rows, which plain left/right alone couldn't
   reach. */
.wptc-mlboard-row.has-dpad {
  justify-content: flex-start;
}
.wptc-mlboard-dpad {
  flex: 0 0 auto;
  width: 84px;
  height: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 2px;
}
.wptc-mlboard-dpad button {
  border: none;
  border-radius: 6px;
  background: #4a5568;
  color: #f1f5f9;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.wptc-mlboard-dpad button:active {
  filter: brightness(1.2);
}
.wptc-mlboard-dpad .dp-up { grid-column: 2; grid-row: 1; }
.wptc-mlboard-dpad .dp-left { grid-column: 1; grid-row: 2; }
.wptc-mlboard-dpad .dp-right { grid-column: 3; grid-row: 2; }
.wptc-mlboard-dpad .dp-down { grid-column: 2; grid-row: 3; }


/* The docked math keyboard is an overlay, not part of document flow. */
body.wptc-mlboard-open #wptc-chat-widget,
body.wptc-mlboard-open #wtb-shortcode-chat {
  scroll-margin: 0 !important;
}

/* Never animate the chatbot when the math keyboard is active. */
#wptc-chat-widget.wptc-math-kb-open {
  transition: none !important;
}

/* Hide real MathLive floating keyboard if library present */
.ML__keyboard,
.ml__keyboard,
.ML__virtual-keyboard,
#wptc-ml-keyboard-host {
  display: none !important;
  pointer-events: none !important;
  height: 0 !important;
}

/* Hide PWA zoom while keyboard open */
body.wptc-mlboard-open #waokmath-pwa-zoom {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Mobile: lift widget */
@media (max-width: 768px) {
  /* FIX: this used to apply to #wptc-chat-widget unconditionally (not
     scoped to .wptc-math-kb-open), so it forced full-bleed width with
     !important on every mobile view all the time, silently overriding
     the narrower right-anchored width set in chat.css regardless of
     whether the math keyboard was even open. The math-kb-open-specific
     rule right below is what actually needs the full-width layout (it
     needs the room while the keyboard panel is open), so the
     always-on version above it has simply been removed. */
  body.wptc-mlboard-open #wptc-chat-widget.wptc-open,
  #wptc-chat-widget.wptc-math-kb-open {
    left: auto !important;
    right: 12px !important;
    width: min(360px, calc(100vw - 24px)) !important;
    overflow: visible !important;
    transform: none !important;
    border-radius: 14px !important;
    z-index: 2147483001 !important;
  }
  body.wptc-mlboard-open #wptc-chat-widget footer {
    flex-shrink: 0;
    background: #fff;
  }
  body.wptc-mlboard-open .wptc-mlboard {
    max-height: min(40vh, 280px);
    overflow-y: auto;
  }
  .wptc-mlboard {
    max-height: 50vh;
    overflow-y: auto;
  }
  .wptc-mlboard-dpad {
    width: 66px;
    height: 48px;
  }
  .wptc-mlboard-dpad button {
    font-size: 10px;
  }
  /* Let the shared control row wrap on narrow phones rather than
     squeezing every button unreadably thin. */
  .wptc-mlboard-row.has-dpad {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

/* Tablet: centered keyboard, but keep typing box visible above it */
@media (min-width: 769px) and (max-width: 1024px) {
  .wptc-mlboard {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(640px, 92vw);
    max-width: 640px;
    border-radius: 14px 14px 0 0;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    max-height: 42vh;
    overflow-y: auto;
  }
  .wptc-mlboard-key {
    min-height: 44px;
    font-size: 14px;
  }
  /* Keyboard-open widget: keep right-anchored; vertical position/max-height
     are set in JS from visualViewport + keyboard height so 50% tablet
     "desktop" zoom still keeps the message/math-field above the keys. */
  body.wptc-mlboard-open #wptc-chat-widget.wptc-open,
  #wptc-chat-widget.wptc-math-kb-open {
    left: auto !important;
    right: 12px !important;
    width: min(420px, calc(100vw - 24px)) !important;
    overflow: visible !important;
    transform: none !important;
    border-radius: 14px !important;
    z-index: 2147483001 !important;
  }
  body.wptc-mlboard-open #wptc-chat-widget footer {
    position: relative;
    z-index: 2;
    background: #fff;
    flex-shrink: 0;
  }
  body.wptc-mlboard-open #wptc-chat-widget #wptc-chat-log {
    flex: 1 1 auto;
    min-height: 40px;
  }
  /* Cap keyboard height so the message area always has room */
  body.wptc-mlboard-open .wptc-mlboard {
    max-height: min(42vh, 320px);
    overflow-y: auto;
  }
  #wptc-chat-input {
    min-height: 44px;
    max-height: 72px;
  }
  #wtb-shortcode-chat {
    /* Never constrain/expand past the theme content column on tablets */
    width: 100%;
    max-width: 100%;
  }
  #wtb-shortcode-input {
    min-height: 48px;
    max-height: 96px;
  }
  /* The keyboard is a fixed overlay. Do NOT add bottom margin to the
     shortcode container: doing so reflows the page and makes the widget
     jump/scroll every time a MathLive key is entered. */
  body.wptc-mlboard-open #wtb-shortcode-chat {
    margin-bottom: 0 !important;
  }
}

/* Desktop only: wide centered keyboard */
@media (min-width: 1025px) {
  .wptc-mlboard {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(920px, 96vw);
    max-width: 960px;
    border-radius: 14px 14px 0 0;
    padding: 10px 14px 14px;
  }
  .wptc-mlboard-key {
    min-height: 48px;
    max-width: none;
    font-size: 16px;
  }
  .wptc-mlboard-key.wide {
    font-size: 13px;
  }
  .wptc-mlboard-dpad {
    width: 104px;
    height: 72px;
  }
  .wptc-mlboard-dpad button {
    font-size: 15px;
  }
  #wptc-chat-input {
    min-height: 44px;
    max-height: 72px;
  }
  #wtb-shortcode-chat {
    width: 100%;
    max-width: 100%;
  }
  #wtb-shortcode-input {
    min-height: 48px;
    max-height: 96px;
  }
}


/* v1.7.1: keep shortcode message composer wide; do not let the MathLive CSS
 * collapse the input to a narrow/full-row wrapped field.
 * FIX: width/max-width here used to be !important, which silently
 * overrode every later width fix made in shortcode.css/shortcode.js
 * (including the JS-measured breakout), since stylesheet !important
 * beats a plain inline style. Dropped !important from just those two
 * properties so shortcode.js can actually control the width; kept it
 * on the flex layout rules below, which aren't in conflict with that. */
@media (min-width: 769px) {
  #wtb-shortcode-chat {
    /* Stay inside the theme column on tablet/desktop with sidebars.
       Do not force 1800px / 420px-style widths that reflow the post. */
    width: 100%;
    max-width: 100%;
  }

  .wtb-shortcode-input-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .wtb-shortcode-input-row #wtb-shortcode-input {
    flex: 1 1 auto !important;
    width: auto !important;
    /* min-width: 220px was forcing the shortcode (and parent column)
       wider than sidebar layouts on tablets (~769–1024px). */
    min-width: 0 !important;
  }

  .wtb-shortcode-input-row #wtb-shortcode-send,
  .wtb-shortcode-input-row #wtb-math-toggle {
    flex: 0 0 auto !important;
  }

  .wtb-shortcode-input-row:has(.wptc-math-panel:not([hidden])) {
    flex-wrap: wrap !important;
  }

  .wtb-shortcode-input-row:has(.wptc-math-panel:not([hidden])) .wptc-math-panel {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  #wtb-shortcode-chat {
    width: 100%;
    max-width: 100%;
  }
}