/* =====================================================
   Mistral Hebrew Voice Assistant — Frontend Styles
   RTL · Hebrew · Modern
   ===================================================== */

/* ── Tokens ── */
.mhv-widget {
  --mhv-radius:      16px;
  --mhv-radius-msg:  12px;
  --mhv-font:        'Segoe UI', 'Arial Hebrew', Arial, sans-serif;
  --mhv-transition:  0.25s ease;

  /* Light theme */
  --bg:              #f7f8fc;
  --surface:         #ffffff;
  --border:          #e2e5ef;
  --text:            #1a1c2e;
  --text-muted:      #6b7280;
  --accent:          #4f6ef7;
  --accent-glow:     rgba(79,110,247,0.18);
  --user-bg:         #4f6ef7;
  --user-text:       #ffffff;
  --ai-bg:           #eef0fb;
  --ai-text:         #1a1c2e;
  --mic-idle:        #4f6ef7;
  --mic-active:      #ef4444;
  --mic-speaking:    #10b981;
  --bar-color:       #4f6ef7;
  --shadow:          0 4px 24px rgba(0,0,0,0.08);
}

/* Dark theme */
.mhv-theme-dark {
  --bg:              #0f1117;
  --surface:         #1a1d2e;
  --border:          #2a2d3e;
  --text:            #e8eaf6;
  --text-muted:      #8892a4;
  --accent:          #6c8aff;
  --accent-glow:     rgba(108,138,255,0.2);
  --user-bg:         #6c8aff;
  --user-text:       #ffffff;
  --ai-bg:           #252840;
  --ai-text:         #e8eaf6;
  --mic-idle:        #6c8aff;
  --mic-active:      #f87171;
  --mic-speaking:    #34d399;
  --bar-color:       #6c8aff;
  --shadow:          0 4px 32px rgba(0,0,0,0.4);
}

/* ── Widget shell ── */
.mhv-widget {
  display:        flex;
  flex-direction: column;
  width:          100%;
  max-width:      600px;
  height:         var(--mhv-height, 480px);
  background:     var(--bg);
  border:         1px solid var(--border);
  border-radius:  var(--mhv-radius);
  box-shadow:     var(--shadow);
  font-family:    var(--mhv-font);
  color:          var(--text);
  overflow:       hidden;
  margin:         24px auto;
  direction:      rtl;
}

/* ── Header ── */
.mhv-header {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         14px 18px;
  background:      var(--surface);
  border-bottom:   1px solid var(--border);
  flex-shrink:     0;
}

.mhv-logo { font-size: 1.4rem; }

.mhv-title {
  margin:      0;
  font-size:   1.05rem;
  font-weight: 700;
  flex:        1;
  color:       var(--text);
}

.mhv-btn-clear {
  background:  none;
  border:      none;
  cursor:      pointer;
  font-size:   1.1rem;
  padding:     4px 6px;
  border-radius: 8px;
  transition:  background var(--mhv-transition);
  color:       var(--text-muted);
}
.mhv-btn-clear:hover { background: var(--accent-glow); }

/* ── Messages ── */
.mhv-messages {
  flex:       1;
  overflow-y: auto;
  padding:    16px;
  display:    flex;
  flex-direction: column;
  gap:        12px;
  scroll-behavior: smooth;
}

.mhv-messages::-webkit-scrollbar { width: 4px; }
.mhv-messages::-webkit-scrollbar-track { background: transparent; }
.mhv-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Message bubbles */
.mhv-msg {
  display:    flex;
  flex-direction: column;
  max-width:  80%;
  animation:  mhv-pop 0.2s ease;
}

.mhv-msg-user  { align-self: flex-start; align-items: flex-start; }
.mhv-msg-ai    { align-self: flex-end;   align-items: flex-end;   }

.mhv-msg-label {
  font-size:   0.7rem;
  color:       var(--text-muted);
  margin-bottom: 4px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.mhv-msg-bubble {
  padding:       10px 14px;
  border-radius: var(--mhv-radius-msg);
  line-height:   1.6;
  font-size:     0.92rem;
  word-break:    break-word;
}

.mhv-msg-user .mhv-msg-bubble {
  background:         var(--user-bg);
  color:              var(--user-text);
  border-bottom-right-radius: 4px;
}

.mhv-msg-ai .mhv-msg-bubble {
  background:      var(--ai-bg);
  color:           var(--ai-text);
  border-bottom-left-radius: 4px;
}

/* Typing indicator */
.mhv-typing .mhv-msg-bubble {
  display:    flex;
  gap:        5px;
  align-items: center;
  padding:    12px 16px;
}

.mhv-dot {
  width:  8px;
  height: 8px;
  background:    var(--accent);
  border-radius: 50%;
  animation: mhv-bounce 1.2s infinite;
}
.mhv-dot:nth-child(2) { animation-delay: 0.2s; }
.mhv-dot:nth-child(3) { animation-delay: 0.4s; }

/* ── Status bar ── */
.mhv-status {
  display:    flex;
  align-items: center;
  gap:        8px;
  padding:    6px 18px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size:  0.78rem;
  color:      var(--text-muted);
  flex-shrink: 0;
}

.mhv-status-dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--text-muted);
  transition:    background var(--mhv-transition);
  flex-shrink:   0;
}

.mhv-widget.state-listening  .mhv-status-dot { background: var(--mic-active);   animation: mhv-pulse 0.8s infinite; }
.mhv-widget.state-processing .mhv-status-dot { background: var(--accent);        animation: mhv-pulse 1.2s infinite; }
.mhv-widget.state-speaking   .mhv-status-dot { background: var(--mic-speaking);  animation: mhv-pulse 0.9s infinite; }

/* ── Visualizer bars ── */
.mhv-visualizer {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             4px;
  height:          40px;
  padding:         0 18px;
  flex-shrink:     0;
  opacity:         0;
  transition:      opacity var(--mhv-transition);
}

.mhv-widget.state-listening .mhv-visualizer,
.mhv-widget.state-speaking  .mhv-visualizer { opacity: 1; }

.mhv-bar {
  width:         4px;
  height:        6px;
  background:    var(--bar-color);
  border-radius: 3px;
  transition:    height 0.1s ease;
}

.mhv-widget.state-listening .mhv-bar {
  animation: mhv-wave 0.8s ease-in-out infinite alternate;
}
.mhv-widget.state-speaking .mhv-bar {
  animation: mhv-wave 0.5s ease-in-out infinite alternate;
}
.mhv-bar:nth-child(1)  { animation-delay: 0.0s; }
.mhv-bar:nth-child(2)  { animation-delay: 0.07s; }
.mhv-bar:nth-child(3)  { animation-delay: 0.14s; }
.mhv-bar:nth-child(4)  { animation-delay: 0.21s; }
.mhv-bar:nth-child(5)  { animation-delay: 0.28s; }
.mhv-bar:nth-child(6)  { animation-delay: 0.35s; }
.mhv-bar:nth-child(7)  { animation-delay: 0.28s; }
.mhv-bar:nth-child(8)  { animation-delay: 0.21s; }
.mhv-bar:nth-child(9)  { animation-delay: 0.14s; }
.mhv-bar:nth-child(10) { animation-delay: 0.07s; }
.mhv-bar:nth-child(11) { animation-delay: 0.03s; }
.mhv-bar:nth-child(12) { animation-delay: 0.0s; }

/* ── Mic button ── */
.mhv-controls {
  display:         flex;
  justify-content: center;
  padding:         8px 18px 4px;
  flex-shrink:     0;
}

.mhv-btn-mic {
  width:         64px;
  height:        64px;
  border-radius: 50%;
  border:        none;
  background:    var(--mic-idle);
  color:         #fff;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    background var(--mhv-transition), transform 0.15s ease, box-shadow var(--mhv-transition);
  box-shadow:    0 4px 16px var(--accent-glow);
}

.mhv-btn-mic svg { width: 26px; height: 26px; }
.mhv-btn-mic:hover { transform: scale(1.07); box-shadow: 0 6px 24px var(--accent-glow); }

.mhv-widget.state-listening  .mhv-btn-mic { background: var(--mic-active);  animation: mhv-mic-pulse 1s infinite; }
.mhv-widget.state-processing .mhv-btn-mic { background: var(--accent);      cursor: not-allowed; }
.mhv-widget.state-speaking   .mhv-btn-mic { background: var(--mic-speaking); }

/* ── Text input ── */
.mhv-text-input {
  display:       flex;
  gap:           8px;
  padding:       10px 14px;
  background:    var(--surface);
  border-top:    1px solid var(--border);
  flex-shrink:   0;
}

.mhv-input {
  flex:          1;
  padding:       8px 12px;
  border:        1px solid var(--border);
  border-radius: 10px;
  background:    var(--bg);
  color:         var(--text);
  font-family:   var(--mhv-font);
  font-size:     0.88rem;
  outline:       none;
  transition:    border-color var(--mhv-transition);
  direction:     rtl;
}
.mhv-input:focus { border-color: var(--accent); }
.mhv-input::placeholder { color: var(--text-muted); }

.mhv-btn-send {
  padding:       8px 14px;
  background:    var(--accent);
  color:         #fff;
  border:        none;
  border-radius: 10px;
  cursor:        pointer;
  font-size:     1rem;
  transition:    background var(--mhv-transition), transform 0.1s;
}
.mhv-btn-send:hover  { background: var(--mic-idle); transform: scale(1.05); }
.mhv-btn-send:active { transform: scale(0.97); }

/* ── Animations ── */
@keyframes mhv-pop {
  from { opacity:0; transform: scale(0.92) translateY(6px); }
  to   { opacity:1; transform: scale(1)    translateY(0); }
}
@keyframes mhv-bounce {
  0%,80%,100% { transform: translateY(0); }
  40%         { transform: translateY(-6px); }
}
@keyframes mhv-pulse {
  0%,100% { opacity:1; }
  50%     { opacity:0.4; }
}
@keyframes mhv-mic-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50%     { box-shadow: 0 0 0 12px rgba(239,68,68,0); }
}
@keyframes mhv-wave {
  from { height: 4px; }
  to   { height: 28px; }
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .mhv-widget { border-radius: 0; margin: 0; max-width: 100%; }
  .mhv-btn-mic { width: 56px; height: 56px; }
}