/* ================================================
   Mistral Hebrew Translator — Frontend CSS
   RTL · Bilingue · Modern
   ================================================ */

.mht-widget {
  --accent:        #4f6ef7;
  --accent-dark:   #3a55d4;
  --accent-glow:   rgba(79,110,247,.15);
  --he-color:      #1e40af;
  --he-bg:         #dbeafe;
  --fr-color:      #991b1b;
  --fr-bg:         #fee2e2;

  /* Light */
  --bg:            #f7f8fc;
  --surface:       #ffffff;
  --border:        #e2e5ef;
  --text:          #1a1c2e;
  --muted:         #6b7280;
  --key-bg:        #ffffff;
  --key-border:    #d1d5db;
  --key-hover:     #f0f4ff;
  --nikud-bg:      #f9fafb;
  --shadow:        0 2px 20px rgba(0,0,0,.07);
  --radius:        12px;
  --font:          'Segoe UI','Arial Hebrew',Arial,sans-serif;
}

.mht-theme-dark {
  --bg:            #0f1117;
  --surface:       #1a1d2e;
  --border:        #2a2d3e;
  --text:          #e8eaf6;
  --muted:         #8892a4;
  --key-bg:        #252840;
  --key-border:    #3a3d54;
  --key-hover:     #2e3250;
  --nikud-bg:      #1e2038;
  --shadow:        0 4px 32px rgba(0,0,0,.4);
  --he-color:      #93c5fd;
  --he-bg:         #1e3a5f;
  --fr-color:      #fca5a5;
  --fr-bg:         #5f1e1e;
}

.mht-widget *,
.mht-widget *::before,
.mht-widget *::after { box-sizing: border-box; }

.mht-widget {
  font-family:    var(--font);
  color:          var(--text);
  background:     var(--bg);
  border:         1px solid var(--border);
  border-radius:  var(--radius);
  box-shadow:     var(--shadow);
  width:          100%;
  max-width:      780px;
  margin:         24px auto;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
}

/* ── Top bar ── */
.mht-topbar {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       12px 16px;
  background:    var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap:     wrap;
}

.mht-badge {
  display:       flex;
  align-items:   center;
  gap:           6px;
  padding:       5px 12px;
  border-radius: 20px;
  font-size:     13px;
  font-weight:   500;
}
.mht-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mht-badge-he { background: var(--he-bg); color: var(--he-color); }
.mht-badge-he .mht-badge-dot { background: var(--he-color); }
.mht-badge-fr { background: var(--fr-bg); color: var(--fr-color); }
.mht-badge-fr .mht-badge-dot { background: var(--fr-color); }

.mht-swap {
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: 8px;
  width:         32px; height: 32px;
  cursor:        pointer;
  font-size:     16px;
  display:       flex; align-items: center; justify-content: center;
  color:         var(--muted);
  transition:    background .15s, transform .12s;
}
.mht-swap:hover { background: var(--key-hover); transform: rotate(20deg); }

.mht-dir-label {
  font-size:   12px;
  color:       var(--muted);
  margin-left: auto;
  font-style:  italic;
}

/* ── Panels ── */
.mht-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 540px) {
  .mht-panels { grid-template-columns: 1fr; }
}

.mht-panel {
  display:        flex;
  flex-direction: column;
  padding:        14px;
}
.mht-panel:first-child {
  border-right: 1px solid var(--border);
}
@media (max-width: 540px) {
  .mht-panel:first-child { border-right: none; border-bottom: 1px solid var(--border); }
}

.mht-panel-label {
  display:       flex;
  align-items:   center;
  gap:           8px;
  margin-bottom: 8px;
}
.mht-plabel-text {
  font-size:   11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color:       var(--muted);
  flex:        1;
}
.mht-panel-actions { display: flex; gap: 6px; }

.mht-btn-clear,
.mht-btn-action {
  display:       flex;
  align-items:   center;
  gap:           4px;
  background:    none;
  border:        1px solid var(--border);
  border-radius: 7px;
  padding:       3px 9px;
  font-size:     11px;
  color:         var(--muted);
  cursor:        pointer;
  transition:    background .15s, color .15s;
}
.mht-btn-clear:hover,
.mht-btn-action:hover { background: var(--key-hover); color: var(--text); border-color: var(--accent); }
.mht-btn-action.copied { color: #16a34a; border-color: #16a34a; }

textarea.mht-src,
textarea.mht-tgt {
  flex:        1;
  width:       100%;
  min-height:  130px;
  border:      1px solid var(--border);
  border-radius: 10px;
  padding:     10px 12px;
  font-family: var(--font);
  font-size:   15px;
  line-height: 1.65;
  color:       var(--text);
  background:  var(--surface);
  resize:      vertical;
  outline:     none;
  transition:  border-color .15s;
}
textarea.mht-src { direction: rtl; text-align: right; }
textarea.mht-src:focus,
textarea.mht-tgt:focus { border-color: var(--accent); }
textarea.mht-tgt[readonly] { background: var(--bg); color: var(--muted); }

.mht-panel-footer {
  display:     flex;
  align-items: center;
  gap:         6px;
  margin-top:  6px;
  font-size:   11px;
  color:       var(--muted);
  min-height:  18px;
}
.mht-charcount { margin-left: auto; }

/* ── Translate row ── */
.mht-translate-row {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             10px;
  padding:         12px 0 4px;
}

.mht-btn-translate {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       9px 32px;
  background:    var(--accent);
  color:         #fff;
  border:        none;
  border-radius: 10px;
  font-size:     14px;
  font-weight:   500;
  cursor:        pointer;
  transition:    background .15s, transform .1s;
}
.mht-btn-translate:hover  { background: var(--accent-dark); }
.mht-btn-translate:active { transform: scale(.97); }
.mht-btn-translate:disabled { opacity: .6; cursor: not-allowed; }

/* spinner */
.mht-spinner {
  width:  18px; height: 18px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: mht-spin .7s linear infinite;
  display: none;
}
.mht-widget.mht-loading .mht-spinner { display: block; }
@keyframes mht-spin { to { transform: rotate(360deg); } }

.mht-status {
  text-align: center;
  font-size:  12px;
  color:      var(--muted);
  min-height: 18px;
  padding:    2px 0 6px;
}
.mht-status.ok { color: #16a34a; }
.mht-status.err { color: #dc2626; }

/* ── Keyboard wrap ── */
.mht-kbd-wrap {
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.mht-kbd-header {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     8px 14px;
  background:  var(--surface);
  border-bottom: 1px solid var(--border);
  font-size:   12px;
  color:       var(--muted);
}
.mht-kbd-hint { margin-right: auto; font-size: 11px; }
.mht-kbd-toggle {
  background:    none;
  border:        none;
  cursor:        pointer;
  font-size:     11px;
  color:         var(--accent);
  font-weight:   500;
  padding:       2px 6px;
  border-radius: 4px;
}
.mht-kbd-toggle:hover { background: var(--accent-glow); }

.mht-kbd-rows {
  padding:        10px 8px 6px;
  display:        flex;
  flex-direction: column;
  gap:            5px;
  direction:      rtl;
}
.mht-kbd-row {
  display:         flex;
  gap:             4px;
  justify-content: center;
}

.mht-key {
  min-width:       36px;
  height:          38px;
  padding:         0 5px;
  background:      var(--key-bg);
  border:          1px solid var(--key-border);
  border-radius:   7px;
  cursor:          pointer;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  color:           var(--text);
  font-size:       17px;
  line-height:     1;
  position:        relative;
  transition:      background .1s, transform .08s;
  user-select:     none;
}
.mht-key:hover  { background: var(--key-hover); border-color: var(--accent); }
.mht-key:active { transform: scale(.9); background: var(--accent-glow); }

.mht-key-lat {
  font-size:   7.5px;
  color:       var(--muted);
  font-family: sans-serif;
  position:    absolute;
  bottom:      3px;
  right:       4px;
  line-height: 1;
}
.mht-key-special {
  min-width:   54px;
  font-size:   12px;
  color:       var(--muted);
  background:  var(--nikud-bg);
}
.mht-key-space {
  min-width:   180px;
  font-size:   12px;
  color:       var(--muted);
  background:  var(--nikud-bg);
}

/* Nikud */
.mht-nikud-section {
  padding:     4px 8px 10px;
}
.mht-nikud-title {
  font-size:     10px;
  color:         var(--muted);
  text-align:    center;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 5px;
}
.mht-nikud-row {
  display:         flex;
  flex-wrap:       wrap;
  gap:             4px;
  justify-content: center;
}
.mht-nikud-btn {
  min-width:       46px;
  height:          32px;
  background:      var(--nikud-bg);
  border:          1px dashed var(--key-border);
  border-radius:   7px;
  cursor:          pointer;
  font-size:       16px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--text);
  transition:      background .1s;
}
.mht-nikud-btn:hover { background: var(--accent-glow); border-color: var(--accent); }