/* ============================================================
   APPEND to /JackalL/frontend/styles/main.css
   Live tutor panel styles
   ============================================================ */

/* ---------- Sub-tab nav ---------- */
.subtabs {
  display: flex; gap: 4px;
  padding: 16px 28px 0;
  border-bottom: 1px solid var(--border-light);
}
.subtab {
  padding: 10px 16px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: color 0.15s, border-color 0.15s;
}
.subtab:hover { color: var(--text-primary); }
.subtab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 500;
}
.subtab-badge {
  background: var(--danger); color: #fff;
  font-size: 9px; padding: 1px 6px; border-radius: 999px;
  font-weight: 500;
  animation: pulse-red 1.5s infinite;
}
@keyframes pulse-red { 50% { opacity: 0.6; } }

.subpanel { display: none; flex-direction: column; flex: 1; min-height: 0; }
.subpanel.active { display: flex; }

/* ---------- Live header ---------- */
.live-header {
  padding: 14px 28px;
  display: flex; align-items: center; gap: 14px;
  border-bottom: 0.5px solid var(--border-light);
}
.tutor-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(114,216,239,0.15);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; font-size: 14px;
  position: relative;
  flex-shrink: 0;
}
.tutor-avatar::after {
  content: '';
  position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--bg-primary);
}
.tutor-meta h4 { margin: 0; font-size: 14px; font-weight: 500; }
.tutor-meta .sub { font-size: 11px; color: var(--text-secondary); margin: 2px 0 0; }
.tutor-meta .pulse-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); margin-right: 4px;
  animation: pulse-live 1.6s infinite;
}
@keyframes pulse-live { 50% { opacity: 0.3; } }

.live-header-controls { margin-left: auto; display: flex; gap: 6px; }
.hctrl {
  background: transparent; border: 0.5px solid var(--border-light);
  color: var(--text-secondary);
  padding: 6px 12px; border-radius: 6px;
  font-size: 11px; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  font-family: inherit;
  transition: all 0.15s;
}
.hctrl:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Chat scroll area ---------- */
.live-chat {
  padding: 20px 28px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  flex: 1;
  min-height: 300px;
  max-height: calc(100vh - 320px);
}

/* Message blocks */
.msg { display: flex; gap: 12px; max-width: 85%; }
.msg.user { margin-left: auto; flex-direction: row-reverse; }
.msg-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 500; flex-shrink: 0;
}
.msg.tutor .msg-avatar { background: rgba(114,216,239,0.15); color: var(--accent); }
.msg.user .msg-avatar { background: rgba(245,158,11,0.15); color: var(--warning); }

.msg-body { flex: 1; min-width: 0; }
.msg-bubble {
  background: var(--bg-secondary);
  padding: 12px 16px;
  border-radius: 14px;
  border: 0.5px solid var(--border-light);
  line-height: 1.5;
}
.msg.tutor .msg-bubble { border-bottom-left-radius: 4px; }
.msg.user .msg-bubble {
  background: rgba(114,216,239,0.08);
  border-color: rgba(114,216,239,0.2);
  border-bottom-right-radius: 4px;
}

/* Bubble content segments */
.seg-fr {
  font-size: 16px;
  color: var(--text-primary);
}
.seg-fr.speaking { color: var(--accent); }
.seg-en {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
}
.seg-en.speaking { color: var(--text-primary); font-style: normal; }

.seg-gloss {
  display: block;
  font-size: 11px; color: var(--text-muted);
  margin-top: 4px;
  padding-top: 4px;
  border-top: 0.5px solid var(--border-light);
}

.bubble-input-method {
  font-size: 10px; color: var(--text-muted);
  margin-top: 4px; letter-spacing: 0.05em;
}

.msg-actions {
  display: flex; gap: 6px; margin-top: 6px;
  padding-left: 4px;
  flex-wrap: wrap;
}
.msg.user .msg-actions { justify-content: flex-end; padding-right: 4px; padding-left: 0; }
.act {
  background: transparent;
  border: 0.5px solid var(--border-light);
  color: var(--text-muted);
  padding: 3px 9px; border-radius: 5px;
  font-size: 10px; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  font-family: inherit;
  transition: all 0.15s;
}
.act:hover { color: var(--accent); border-color: var(--accent); }

/* Inline feedback callout */
.feedback {
  margin: -6px 0 0 40px;
  background: rgba(245,158,11,0.08);
  border-left: 2px solid var(--warning);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  font-size: 12px;
  max-width: 75%;
}
.feedback-label {
  font-size: 10px; color: var(--warning);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 4px;
  font-weight: 500;
}
.feedback-body { color: var(--text-primary); line-height: 1.5; }
.feedback-fix {
  margin-top: 6px; padding-top: 6px;
  border-top: 0.5px solid rgba(245,158,11,0.2);
  color: var(--text-secondary);
  line-height: 1.5;
}
.feedback-fix strong { color: var(--text-primary); font-weight: 500; }
.feedback-fix em { color: var(--text-muted); font-style: normal; }

/* Speaking bars beside the active segment */
.speaking-indicator {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 8px; vertical-align: middle;
}
.speaking-bar {
  width: 2px; background: var(--accent); border-radius: 1px;
  animation: speak 0.8s ease-in-out infinite;
}
.speaking-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
.speaking-bar:nth-child(2) { height: 12px; animation-delay: 0.15s; }
.speaking-bar:nth-child(3) { height: 8px; animation-delay: 0.3s; }
@keyframes speak {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

/* Typing indicator */
.typing {
  display: inline-flex; gap: 3px; padding: 8px 0;
}
.typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-muted);
  animation: dot 1.3s infinite ease-in-out;
}
.typing span:nth-child(1) { animation-delay: 0s; }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot {
  0%, 60%, 100% { transform: scale(0.6); opacity: 0.4; }
  30% { transform: scale(1); opacity: 1; }
}

/* Quick suggestions */
.quick-bar {
  padding: 10px 28px 0;
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
  min-height: 0;
}
.quick-bar:empty { padding: 0; }
.quick-bar-label {
  font-size: 11px; color: var(--text-muted);
  margin-right: 4px;
}
.qchip {
  background: var(--bg-secondary);
  border: 0.5px solid var(--border-light);
  color: var(--text-secondary);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  font-family: inherit;
  transition: all 0.15s;
}
.qchip:hover { color: var(--accent); border-color: var(--accent); }
.qchip .fr { color: var(--accent); }

/* ---------- Composer ---------- */
.composer {
  padding: 14px 28px 20px;
  border-top: 0.5px solid var(--border-light);
}
.composer-row {
  display: flex; gap: 8px; align-items: center;
}
.mic-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-secondary);
  border: 0.5px solid var(--border-light);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
  transition: all 0.2s;
  position: relative;
  font-family: inherit;
}
.mic-btn:hover { color: var(--accent); border-color: var(--accent); }
.mic-btn.recording {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.mic-btn.recording::after {
  content: ''; position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  border-radius: 50%;
  border: 2px solid var(--danger);
  animation: ripple 1.4s infinite;
}
@keyframes ripple {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

.text-wrap {
  flex: 1;
  background: var(--bg-secondary);
  border: 0.5px solid var(--border-light);
  border-radius: 10px;
  padding: 0 14px;
  display: flex; align-items: center;
  transition: border-color 0.15s;
}
.text-wrap:focus-within { border-color: var(--accent); }
.text-wrap input {
  flex: 1;
  background: transparent; border: none; outline: none;
  color: var(--text-primary);
  font-size: 14px; font-family: inherit;
  padding: 11px 0;
}
.text-wrap input::placeholder { color: var(--text-muted); }

.send-btn {
  background: var(--accent); color: var(--bg-primary);
  border: none; padding: 11px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 500; cursor: pointer;
  font-family: inherit;
  display: flex; align-items: center; gap: 6px;
  transition: background 0.15s;
}
.send-btn:hover { background: var(--accent-dark); }
.send-btn:disabled { opacity: 0.5; cursor: wait; }

.composer-hint {
  margin-top: 8px;
  font-size: 10px; color: var(--text-muted);
  display: flex; justify-content: space-between;
}
.composer-hint kbd {
  background: var(--bg-tertiary);
  border: 0.5px solid var(--border-light);
  padding: 1px 5px; border-radius: 3px;
  font-size: 10px; font-family: ui-monospace, monospace;
}

/* Recording state */
.rec-state {
  margin-top: 8px;
  background: var(--bg-secondary);
  border: 0.5px solid var(--danger);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
}
.rec-state.hidden { display: none; }

.rec-wave {
  flex: 1; display: flex; align-items: center; gap: 2px; height: 20px;
  overflow: hidden;
}
.rec-bar {
  flex: 1; background: var(--danger); border-radius: 1px; max-width: 3px;
  animation: wave 0.6s ease-in-out infinite alternate;
}
.rec-bar:nth-child(odd) { animation-delay: 0.1s; }
.rec-bar:nth-child(3n) { animation-delay: 0.2s; }
.rec-bar:nth-child(5n) { animation-delay: 0.3s; }
@keyframes wave {
  from { height: 4px; }
  to { height: 20px; }
}
.rec-timer {
  font-size: 12px; font-family: ui-monospace, monospace;
  color: var(--danger);
  min-width: 32px;
}
.rec-text { font-size: 12px; color: var(--text-secondary); }
.rec-cancel {
  background: transparent; border: none;
  color: var(--text-muted); font-size: 16px; cursor: pointer;
  padding: 0 4px;
}
.rec-cancel:hover { color: var(--danger); }

/* Responsive */
@media (max-width: 700px) {
  .subtabs { padding: 12px 16px 0; overflow-x: auto; }
  .live-header, .live-chat, .composer, .quick-bar { padding-left: 16px; padding-right: 16px; }
  .msg, .feedback { max-width: 95%; }
  .live-chat { max-height: calc(100vh - 400px); }
}

/* ============================================================
   APPEND to /JackalL/frontend/styles/main.css
   Welcome state + large button + FR/EN mic language toggle
   ============================================================ */

/* Welcome screen shown before the session starts */
.live-welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 28px;
    text-align: center;
    gap: 14px;
    min-height: 360px;
  }
  .live-welcome.hidden { display: none; }
  
  .welcome-icon {
    font-size: 42px;
    opacity: 0.8;
  }
  .welcome-title {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: var(--text-primary);
  }
  .welcome-sub {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 440px;
    line-height: 1.5;
  }
  .welcome-tip {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--text-muted);
  }
  
  .btn-large {
    padding: 11px 28px;
    font-size: 14px;
    border-radius: 8px;
    margin-top: 8px;
  }
  
  /* Paused status dot in the header (before session starts) */
  .tutor-avatar.paused::after {
    background: var(--text-muted);
    animation: none;
  }
  .pulse-dot.paused {
    background: var(--text-muted);
    animation: none;
  }
  
  /* Hide helpers */
  .live-chat.hidden,
  .composer.hidden {
    display: none;
  }
  
  /* FR/EN language toggle next to mic */
  .lang-toggle {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
  }
  .lang-opt {
    padding: 6px 10px;
    font-size: 11px;
    font-family: ui-monospace, monospace;
    color: var(--text-secondary);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.04em;
  }
  .lang-opt:hover { color: var(--text-primary); }
  .lang-opt.active {
    background: var(--accent);
    color: var(--bg-primary);
    font-weight: 500;
  }

  /* ============================================================
   APPEND to /JackalL/frontend/styles/main.css
   Difficulty select, mode chips, pronunciation, enhanced suggestions,
   mode-badge on tutor messages
   ============================================================ */

/* Difficulty dropdown in the header */
.hctrl-select {
    background: var(--bg-secondary);
    border: 0.5px solid var(--border-light);
    color: var(--text-secondary);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    outline: none;
  }
  .hctrl-select:hover { border-color: var(--accent); color: var(--accent); }
  .hctrl-select:focus { border-color: var(--accent); }
  
  /* Mode-override chips above composer */
  .mode-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: center;
    padding: 0 0 10px;
    margin-bottom: 10px;
    border-bottom: 0.5px solid var(--border-light);
  }
  .mode-chip-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-right: 2px;
  }
  .mode-chip {
    background: var(--bg-secondary);
    border: 0.5px solid var(--border-light);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
  }
  .mode-chip:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
  }
  .mode-chip.active {
    background: rgba(114, 216, 239, 0.12);
    border-color: var(--accent);
    color: var(--accent);
  }
  
  /* Mode badge shown at the top of tutor messages */
  .mode-badge {
    display: inline-block;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 3px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
  }
  .mode-badge.converse { background: rgba(114, 216, 239, 0.1); color: var(--accent); }
  .mode-badge.teach    { background: rgba(93, 202, 165, 0.12); color: #5DCAA5; }
  .mode-badge.suggest  { background: rgba(245, 158, 11, 0.12); color: var(--warning); }
  .mode-badge.answer   { background: rgba(237, 147, 177, 0.12); color: #ED93B1; }
  
  /* Pronunciation shown under each French segment */
  .seg-pronunciation {
    display: block;
    font-size: 10px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    margin-top: 2px;
    padding-top: 2px;
  }
  
  /* Enhanced suggested-reply chips (with pronunciation + note) */
  .qchip {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 7px 12px;
    max-width: 280px;
  }
  .qchip-line {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
  }
  .qchip .qchip-fr {
    color: var(--accent);
    font-weight: 500;
    font-size: 13px;
  }
  .qchip .qchip-en {
    color: var(--text-secondary);
    font-size: 11px;
  }
  .qchip .qchip-pr {
    font-family: ui-monospace, monospace;
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.03em;
  }
  .qchip .qchip-note {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--bg-tertiary);
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: auto;
  }
  
  /* In suggest mode, render replies as bigger vertical cards */
  .suggest-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 0 40px;
    max-width: 75%;
  }
  .suggest-card {
    background: var(--bg-secondary);
    border: 0.5px solid rgba(245, 158, 11, 0.25);
    border-left: 2px solid var(--warning);
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .suggest-card:hover { background: var(--bg-tertiary); }
  .suggest-card-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 10px;
    margin-bottom: 2px;
  }
  .suggest-card-fr {
    font-size: 15px;
    color: var(--accent);
    font-weight: 500;
  }
  .suggest-card-note {
    font-size: 9px;
    color: var(--warning);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .suggest-card-pr {
    font-size: 10px;
    font-family: ui-monospace, monospace;
    color: var(--text-muted);
    margin-bottom: 2px;
  }
  .suggest-card-en {
    font-size: 12px;
    color: var(--text-secondary);
  }
  
  /* Small speak button inline in suggestion cards */
  .suggest-card-speak {
    float: right;
    background: transparent;
    border: 0.5px solid var(--border-light);
    color: var(--text-muted);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 10px;
    cursor: pointer;
    margin-left: 6px;
  }
  .suggest-card-speak:hover {
    color: var(--warning);
    border-color: var(--warning);
  }
  
  /* Pronunciation under user's typed French bubble too */
  .user-pronunciation {
    display: block;
    font-size: 10px;
    font-family: ui-monospace, monospace;
    color: var(--text-muted);
    margin-top: 4px;
    letter-spacing: 0.03em;
  }


  /* ============================================================
   APPEND to /JackalL/frontend/styles/live_tutor.css
   Inline "Try" suggestions persisted in tutor messages, and
   corrected-version footer on user bubbles.
   ============================================================ */

/* "Try:" footer attached to a tutor bubble — persists in chat log */
.inline-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 0.5px dashed var(--border-light);
}
.inline-suggestions-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 2px;
}
.inline-suggest-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  background: rgba(114, 216, 239, 0.08);
  border: 0.5px solid rgba(114, 216, 239, 0.2);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
  max-width: 100%;
}
.inline-suggest-chip:hover {
  background: rgba(114, 216, 239, 0.15);
  border-color: var(--accent);
}
.inline-suggest-chip .isc-fr {
  color: var(--accent);
  font-weight: 500;
}
.inline-suggest-chip .isc-en {
  color: var(--text-secondary);
}
.inline-suggest-chip .isc-pr {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 4px;
}

/* User bubble — pronunciation hint slot */
.user-bubble .user-pronunciation {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin-top: 4px;
  display: block;
}
.user-bubble .user-pronunciation:empty { display: none; }

/* Corrected-version footer when feedback flagged a mistake */
.user-corrected {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 0.5px dashed rgba(93, 202, 165, 0.3);
  font-size: 12px;
}
.user-corrected-label {
  font-size: 10px;
  color: #5DCAA5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.user-corrected-fr {
  color: var(--accent);
  font-weight: 500;
}
.user-corrected-pr {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-muted);
}
.user-corrected-speak {
  background: transparent;
  border: 0.5px solid rgba(114, 216, 239, 0.3);
  color: var(--accent);
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  transition: all 0.15s;
}
.user-corrected-speak:hover {
  background: var(--accent);
  color: var(--bg-primary);
}

/* Click-to-play affordance on user bubbles that have audio */
.user-bubble[style*="cursor: pointer"]:hover {
  background: var(--bg-tertiary);
}

/* Feedback callout pronunciation styling */
.feedback-pr {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-muted);
}

/* ============================================================
   APPEND to /JackalL/frontend/styles/live_tutor.css
   Block-level segments — each French sentence is its own row,
   English explanations are paragraphs, every French segment has
   its own ▶ play button. Replaces the old inline span layout.
   ============================================================ */

/* Each segment is now a block row */
.seg-block {
  display: block;
  margin: 0;
  padding: 0;
}

/* Spacing between segments */
.seg-block + .seg-block {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px dashed rgba(244, 244, 244, 0.05);
}

/* English block — paragraph style */
.seg-block-en {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  font-style: italic;
}

/* French block — text + per-sentence speak button on the right */
.seg-fr-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  border-radius: 6px;
  padding: 4px 6px;
  margin: -4px -6px 0;
  transition: background 0.12s;
}
.seg-fr-row:hover {
  background: rgba(114, 216, 239, 0.05);
}

/* Override the old inline .seg-fr behavior to be block-level inside the row */
.seg-block .seg-fr {
  font-size: 16px;
  color: var(--text-primary);
  line-height: 1.4;
  flex: 1;
  min-width: 0;
  display: block;
}

/* Per-French-segment speak button */
.seg-fr-speak {
  background: transparent;
  border: 0.5px solid var(--border-light);
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  font-family: inherit;
  padding: 0;
}
.seg-fr-speak:hover {
  background: var(--accent);
  color: var(--bg-primary);
  border-color: var(--accent);
}

/* Pronunciation + translation now sit cleanly under the French row */
.seg-block .seg-pronunciation {
  display: block;
  margin: 4px 6px 0;
  padding: 0;
  border: none;
  font-size: 10px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

.seg-block .seg-gloss {
  display: block;
  margin: 4px 6px 0;
  padding: 0;
  border: none;
  font-size: 11px;
  color: var(--text-muted);
}

/* Tighten when the very first segment is English (don't add top border) */
.msg-bubble > .seg-block:first-child,
.msg-bubble > .mode-badge + .seg-block {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}