/* ============================================================
   Math Whiteboard – Plugin Stylesheet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@600;700&display=swap');

:root {
  --wb-bg:          #f0f2f5;
  --wb-toolbar-bg:  #1a1a2e;
  --wb-toolbar-h:   52px;
  --wb-accent:      #4f8ef7;
  --wb-accent2:     #e84393;
  --wb-btn-hover:   #2a2a4a;
  --wb-btn-active:  #4f8ef7;
  --wb-radius:      10px;
  --wb-shadow:      0 8px 40px rgba(0,0,0,.18);
  --wb-font:        'DM Mono', monospace;
  --wb-font-head:   'Syne', sans-serif;
  --wb-status-h:    28px;
}

/* ── Wrapper ── */
.math-wb-wrap {
  position:     relative;
  display:      flex;
  flex-direction: column;
  width:        100%;
  border-radius: var(--wb-radius);
  box-shadow:   var(--wb-shadow);
  overflow:     hidden;
  font-family:  var(--wb-font);
  background:   var(--wb-bg);
  user-select:  none;
}

/* ── Toolbar ── */
.math-wb-toolbar {
  display:        flex;
  flex-wrap:      wrap;
  align-items:    center;
  gap:            6px;
  padding:        6px 10px;
  background:     var(--wb-toolbar-bg);
  min-height:     var(--wb-toolbar-h);
  border-bottom:  2px solid #0d0d1e;
}

.math-wb-toolbar-group {
  display:      flex;
  align-items:  center;
  gap:          4px;
  padding:      0 6px;
  border-right: 1px solid #2f2f5a;
}
.math-wb-toolbar-group:last-child { border-right: none; }

/* ── Buttons ── */
.math-wb-btn {
  background:     transparent;
  border:         1px solid transparent;
  color:          #a0a8cc;
  border-radius:  6px;
  width:          34px;
  height:         34px;
  font-size:      16px;
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  justify-content: center;
  transition:     background .15s, color .15s, border-color .15s, transform .1s;
  font-family:    var(--wb-font);
  padding:        0;
  line-height:    1;
}
.math-wb-btn:hover  { background: var(--wb-btn-hover); color: #fff; transform: translateY(-1px); }
.math-wb-btn.active { background: var(--wb-btn-active); color: #fff; border-color: #7eaaff; }
.math-wb-btn:active { transform: scale(.93); }

/* ── Color pickers ── */
.math-wb-color,
.math-wb-fill-color {
  width:          30px;
  height:         30px;
  border:         2px solid #3a3a6a;
  border-radius:  6px;
  cursor:         pointer;
  padding:        2px;
  background:     transparent;
}

/* ── Select dropdowns ── */
.math-wb-select {
  background:     #252545;
  color:          #ccd0e8;
  border:         1px solid #3a3a6a;
  border-radius:  6px;
  padding:        4px 6px;
  font-size:      12px;
  font-family:    var(--wb-font);
  cursor:         pointer;
  outline:        none;
}
.math-wb-select:focus { border-color: var(--wb-accent); }

/* ── Canvas area ── */
.math-wb-canvas-wrap {
  flex:           1;
  position:       relative;
  overflow:       hidden;
}

.math-wb-canvas {
  display:        block;
  width:          100%;
  height:         100%;
  cursor:         crosshair;
  touch-action:   none;
}

/* ── Background types applied via JS class ── */
.math-wb-canvas-wrap.bg-white   { background: #fff; }
.math-wb-canvas-wrap.bg-grid    { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='%23c8d0e0' stroke-width='1'/%3E%3C/svg%3E"); }
.math-wb-canvas-wrap.bg-dotted  { background: #fff radial-gradient(circle, #b0b8cc 1px, transparent 1px) 0 0 / 28px 28px; }
.math-wb-canvas-wrap.bg-ruled   { background: #fff repeating-linear-gradient(transparent, transparent 27px, #b8c4d8 28px); }
.math-wb-canvas-wrap.bg-dark    { background: #12122a; }

/* ── Graph panel ── */
.math-wb-graph-panel {
  position:       absolute;
  top:            0; left: 0; right: 0; bottom: var(--wb-status-h);
  background:     #fff;
  z-index:        20;
  display:        flex;
  flex-direction: column;
}
.math-wb-graph-panel.hidden { display: none; }

.math-wb-graph-header {
  display:        flex;
  align-items:    center;
  gap:            12px;
  padding:        8px 14px;
  background:     var(--wb-toolbar-bg);
  color:          #fff;
  font-family:    var(--wb-font-head);
  font-size:      14px;
}
.math-wb-graph-header span { flex: 1; }

.math-wb-graph-insert,
.math-wb-graph-close {
  background:     var(--wb-accent);
  color:          #fff;
  border:         none;
  border-radius:  6px;
  padding:        5px 12px;
  cursor:         pointer;
  font-size:      12px;
  font-family:    var(--wb-font);
}
.math-wb-graph-close { background: #555; }
.math-wb-graph-insert:hover { background: #3a7aee; }
.math-wb-graph-close:hover  { background: #333; }

.math-wb-graph-calc { flex: 1; }

/* ── LaTeX overlay ── */
.math-wb-latex-overlay {
  position:       absolute;
  inset:          0;
  background:     rgba(10,10,30,.65);
  backdrop-filter: blur(4px);
  z-index:        30;
  display:        flex;
  align-items:    center;
  justify-content: center;
}
.math-wb-latex-overlay.hidden { display: none; }

.math-wb-latex-box {
  background:     #1e1e38;
  border:         1px solid #3a3a6a;
  border-radius:  12px;
  padding:        24px 28px;
  width:          min(560px, 95vw);
  box-shadow:     0 20px 60px rgba(0,0,0,.5);
}
.math-wb-latex-box label {
  display:        block;
  font-family:    var(--wb-font-head);
  color:          var(--wb-accent);
  font-size:      13px;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom:  10px;
}
.math-wb-latex-input {
  width:          100%;
  background:     #12122a;
  border:         1px solid #3a3a6a;
  border-radius:  7px;
  color:          #e0e4ff;
  font-family:    var(--wb-font);
  font-size:      15px;
  padding:        10px 12px;
  outline:        none;
  box-sizing:     border-box;
  margin-bottom:  12px;
}
.math-wb-latex-input:focus { border-color: var(--wb-accent); }

.math-wb-latex-preview {
  background:     #fff;
  border-radius:  8px;
  min-height:     54px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  padding:        10px;
  font-size:      22px;
  margin-bottom:  14px;
  overflow:       auto;
}

.math-wb-latex-actions {
  display:        flex;
  gap:            10px;
  margin-bottom:  16px;
}
.math-wb-latex-insert,
.math-wb-latex-cancel {
  flex:           1;
  padding:        9px;
  border:         none;
  border-radius:  7px;
  cursor:         pointer;
  font-family:    var(--wb-font-head);
  font-size:      13px;
  transition:     opacity .15s;
}
.math-wb-latex-insert { background: var(--wb-accent); color: #fff; }
.math-wb-latex-cancel { background: #2e2e52; color: #aaa; }
.math-wb-latex-insert:hover { opacity: .85; }
.math-wb-latex-cancel:hover { opacity: .85; }

.math-wb-latex-snippets {
  display:        flex;
  flex-wrap:      wrap;
  gap:            6px;
}
.math-wb-latex-snippets span {
  background:     #252545;
  color:          #ccd0e8;
  border:         1px solid #3a3a6a;
  border-radius:  5px;
  padding:        3px 9px;
  font-size:      12px;
  cursor:         pointer;
  transition:     background .12s, border-color .12s;
}
.math-wb-latex-snippets span:hover {
  background:     var(--wb-accent);
  color:          #fff;
  border-color:   var(--wb-accent);
}

/* ── Status bar ── */
.math-wb-status {
  position:       absolute;
  bottom:         0; left: 0; right: 0;
  height:         var(--wb-status-h);
  background:     rgba(26,26,46,.9);
  color:          #6a70a0;
  font-size:      11px;
  display:        flex;
  align-items:    center;
  gap:            16px;
  padding:        0 12px;
  pointer-events: none;
  font-family:    var(--wb-font);
}
.math-wb-status-msg { color: var(--wb-accent); margin-left: auto; }

/* ── Protractor overlay (drawn by JS, placeholder) ── */
.math-wb-protractor-overlay {
  pointer-events: none;
  position:       absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 5;
}