/* Voice notes & AI meeting notes — floating non-blocking panel. */

.voice-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1180;
  width: 390px;
  max-width: calc(100vw - 32px);
  background: var(--bg-modal, var(--surface, #fff));
  color: var(--text, #1f2230);
  border: 1px solid var(--border, #ececf1);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(20, 22, 40, .06), 0 18px 48px rgba(20, 22, 40, .22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: voice-rise .2s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--font-body, var(--font, inherit));
}
@keyframes voice-rise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .voice-panel { animation: none; } }

.voice-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 12px 13px 15px;
  border-bottom: 1px solid var(--border, #ececf1);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, #5b5bd6) 8%, var(--bg-modal, #fff)), var(--bg-modal, #fff));
}
.voice-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display, inherit);
  font-weight: 650;
  font-size: 14.5px;
  flex: 1;
}
.voice-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  color: #fff; background: var(--accent, #5b5bd6);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent, #5b5bd6) 40%, transparent), inset 0 1px 0 rgba(255,255,255,0.25);
}
.voice-ic svg { width: 15px !important; height: 15px !important; }
.voice-ic svg, .voice-btn svg, .voice-close svg { width: 17px; height: 17px; }

.voice-rec { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted, #5c6274); font-variant-numeric: tabular-nums; }
.voice-rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #e5484d; animation: voice-pulse 1.1s ease-in-out infinite; }
@keyframes voice-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .voice-rec-dot { animation: none; } }

.voice-close { border: 0; background: transparent; color: var(--muted, #5c6274); cursor: pointer; border-radius: 8px; padding: 4px; display: inline-flex; }
.voice-close:hover { background: var(--bg-hover, rgba(0, 0, 0, .05)); color: var(--text, #1f2230); }

.voice-body { padding: 12px 14px 4px; }
.voice-text {
  width: 100%;
  min-height: 132px;
  max-height: 40vh;
  resize: vertical;
  border: 1px solid var(--border, #ececf1);
  border-radius: 10px;
  background: var(--bg, #fbfbfd);
  color: var(--text, #1f2230);
  padding: 10px 12px;
  font-family: var(--font-body, inherit);
  font-size: 14px;
  line-height: 1.55;
  outline: none;
}
.voice-text:focus { border-color: var(--accent, #5b5bd6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #5b5bd6) 22%, transparent); }
.voice-interim { min-height: 18px; padding: 4px 2px 0; font-size: 13px; color: var(--faint, #9096a8); font-style: italic; }
.voice-interim:empty { min-height: 0; }
.voice-unsupported { margin: 6px 2px 2px; font-size: 12.5px; color: var(--muted, #5c6274); background: var(--bg, #f4f4f8); border-radius: 8px; padding: 8px 10px; }

.voice-dest-row { display: flex; align-items: center; gap: 10px; padding: 6px 14px 2px; }
.voice-dest-label { font-size: 12px; color: var(--muted, #5c6274); }
.voice-seg { display: inline-flex; background: var(--bg, #f0f0f4); border-radius: 8px; padding: 2px; gap: 2px; }
.voice-seg button {
  border: 0; background: transparent; color: var(--muted, #5c6274);
  font: inherit; font-size: 12.5px; padding: 4px 9px; border-radius: 6px; cursor: pointer;
}
.voice-seg button.active { background: var(--surface, #fff); color: var(--text, #1f2230); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.voice-seg button:disabled { opacity: .4; cursor: not-allowed; }

.voice-controls { display: flex; align-items: center; gap: 8px; padding: 10px 14px 12px; }
.voice-spacer { flex: 1; }
.voice-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border, #ececf1); background: var(--surface, #fff); color: var(--text, #1f2230);
  font: inherit; font-size: 13px; font-weight: 500; padding: 7px 11px; border-radius: 9px; cursor: pointer;
  transition: background .12s, border-color .12s, transform .06s;
}
.voice-btn:hover { background: var(--bg-hover, rgba(0, 0, 0, .04)); }
.voice-btn:active { transform: translateY(1px); }
.voice-btn:disabled { opacity: .5; cursor: not-allowed; }
.voice-btn.voice-clear { padding: 7px 9px; color: var(--muted, #5c6274); }
.voice-record.is-rec {
  background: color-mix(in srgb, #e5484d 12%, var(--surface, #fff));
  border-color: color-mix(in srgb, #e5484d 45%, var(--border, #ececf1)); color: #e5484d;
  animation: voice-rec-glow 1.4s ease-in-out infinite;
}
@keyframes voice-rec-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(229,72,77,0.4); } 50% { box-shadow: 0 0 0 5px rgba(229,72,77,0); } }
@media (prefers-reduced-motion: reduce) { .voice-record.is-rec { animation: none; } }
.voice-btn.primary { background: var(--accent, #5b5bd6); border-color: var(--accent, #5b5bd6); color: #fff; }
.voice-btn.primary:hover { background: color-mix(in srgb, var(--accent, #5b5bd6) 88%, #000); }

.voice-status { min-height: 16px; padding: 0 14px 12px; font-size: 12.5px; color: var(--muted, #5c6274); }
.voice-status:empty { padding-bottom: 0; min-height: 0; }
.voice-status.warn { color: #d9822b; }

@media (max-width: 560px) {
  .voice-panel { left: 12px; right: 12px; bottom: 12px; width: auto; }
}