/* Note8 v3.5.8 — Styles */
.ns-btn-apply{ display:none !important; }

/* v3.5.8: Styled display div replacing visible textarea ====================
   The hidden textarea behind it remains the data source of truth for export,
   grammar, save, and recovery logic. The div is purely a prettier mirror
   that supports per-line gradient fade (newest = bold/dark, older = grey).
=========================================================================== */
.ns-display-wrap{position:relative;width:100%}
.ns-display{
  width:100%;
  min-height:9em;
  max-height:14em;
  overflow-y:auto;
  padding:.5rem .65rem;
  border:1px solid #ccc;
  border-radius:.35rem;
  background:#fff;
  font-family:inherit;
  font-size:var(--ns-font-size, 14px);
  line-height:1.5;
  white-space:pre-wrap;
  word-wrap:break-word;
  user-select:text;          /* allow copy/highlight */
  -webkit-user-select:text;
  cursor:text;
  box-sizing:border-box;
}
/* Empty-state placeholder — matches textarea look */
.ns-display:empty::before{
  content:attr(data-placeholder);
  color:#9ca3af;
  font-style:italic;
}
/* Per-line tint: top 3 lines bright, then progressive grey fade */
.ns-display .ns-line{display:block;margin:0;padding:0}
.ns-display .ns-line-interim{color:#1d4ed8;font-weight:700;font-style:italic}        /* current speaking ▸ */
.ns-display .ns-line-fresh-1{color:#000;font-weight:700}                              /* most recent finalized */
.ns-display .ns-line-fresh-2{color:#1f2937;font-weight:600}                           /* 2nd newest */
.ns-display .ns-line-fresh-3{color:#374151;font-weight:500}                           /* 3rd newest */
.ns-display .ns-line-old-1 {color:#6b7280;font-weight:400}                            /* fading */
.ns-display .ns-line-old-2 {color:#9ca3af;font-weight:400}
.ns-display .ns-line-old-3 {color:#b3b8c2;font-weight:400}
.ns-display .ns-line-old-4 {color:#c8ccd4;font-weight:400}                            /* faintest */

/* Hidden textarea — invisible but keeps DOM presence for selection/export logic */
.ns-hidden-input{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}


/* v3.5.7: Recovery banner (shown when unsaved session detected on page load) */
.ns-recovery{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;margin:.5rem 0 .8rem 0;background:#fffbeb;border:2px solid #f59e0b;border-radius:.5rem;flex-wrap:wrap}
.ns-recovery-icon{font-size:1.5em;flex-shrink:0}
.ns-recovery-msg{flex:1;min-width:200px;font-size:.9em;line-height:1.35}
.ns-recovery-msg strong{display:block;color:#92400e;margin-bottom:.15rem}
.ns-recovery-msg span{color:#78350f;font-size:.9em}
.ns-btn-recover{background:#16a34a !important;color:#fff !important;border-color:#15803d !important;font-weight:600}
.ns-btn-recover:hover{background:#15803d !important}
.ns-btn-discard{background:#fff !important;color:#991b1b !important;border-color:#dc2626 !important}
.ns-btn-discard:hover{background:#fee2e2 !important}
@media (max-width:520px){
  .ns-recovery-msg{flex-basis:100%;width:100%}
}
.ns-row{margin:.5rem 0;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.ns-btn{padding:.45rem .7rem;border:1px solid #ddd;border-radius:.45rem;background:#fafafa;cursor:pointer;font-size:.85em;white-space:nowrap}
.ns-btn:disabled{opacity:.5;cursor:default}
.ns-btn-toggle{background:#eef7ff}
.ns-btn-toggle.is-off{background:#fff1f1}
.ns-btn-grammar{background:#f0fff4;border-color:#cde7d8}
.ns-btn-apply{background:#fff7e6;border-color:#f1d7a8}
.ns-status{font-size:.9em;color:#666;margin-left:.5rem}

/* v3.5.6: Timer with ON/OFF toggle */
.ns-timer-row{display:flex;align-items:center;gap:.6rem;margin:.4rem 0 .3rem 0;flex-wrap:wrap}

/* Rec Time label sits above the ON/OFF toggle */
.ns-timer-toggle-wrap{display:flex;flex-direction:column;align-items:center;gap:.15rem}
.ns-timer-toggle-caption{font-size:.7em;color:#444;font-weight:600;letter-spacing:.5px;text-transform:uppercase;line-height:1}

/* iOS-style slider switch with ON / OFF text labels on each side */
.ns-timer-toggle{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;user-select:none;font-size:.75em;font-weight:600}
.ns-timer-toggle.is-disabled{opacity:.55;cursor:not-allowed}
.ns-timer-toggle-on{color:#9ca3af;transition:color .15s}
.ns-timer-toggle-off{color:#dc2626;transition:color .15s}
.ns-timer-toggle input[type=checkbox]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.ns-timer-toggle-slider{position:relative;width:36px;height:18px;background:#dc2626;border-radius:18px;transition:background .15s;flex-shrink:0}
.ns-timer-toggle-slider::before{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.ns-timer-toggle input[type=checkbox]:checked + .ns-timer-toggle-slider{background:#16a34a}
.ns-timer-toggle input[type=checkbox]:checked + .ns-timer-toggle-slider::before{left:20px}
.ns-timer-toggle input[type=checkbox]:checked ~ .ns-timer-toggle-off{color:#9ca3af}
.ns-timer-toggle:has(input:checked) .ns-timer-toggle-on{color:#16a34a}

/* Countdown display */
.ns-timer-display{font-family:"Courier New",monospace;font-size:1.1em;font-weight:bold;background:#fff;border:2px solid #333;border-radius:.3rem;padding:.2rem .5rem;min-width:70px;text-align:center;letter-spacing:1px}
.ns-timer-display.is-disabled{color:#9ca3af;border-color:#d1d5db;background:#f3f4f6}
.ns-timer-display.is-running{background:#fff8dc;border-color:#d97706;color:#b45309}
.ns-timer-display.is-warning{background:#fee2e2;border-color:#dc2626;color:#991b1b;animation:ns-timer-blink 1s infinite}
@keyframes ns-timer-blink{50%{opacity:.5}}

/* Dropdown + custom input wrap as a unit (so they break together on mobile) */
.ns-timer-controls{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.ns-timer-preset{padding:.35rem .5rem;font-size:.85em;border:1px solid #ccc;border-radius:.35rem;background:#fff;cursor:pointer}
.ns-timer-preset:disabled{opacity:.5;cursor:not-allowed;background:#f3f4f6}
.ns-timer-custom{width:70px;padding:.35rem .4rem;font-size:.85em;border:1px solid #ccc;border-radius:.35rem}
.ns-timer-custom:disabled{opacity:.5;cursor:not-allowed;background:#f3f4f6}

/* On narrow screens, force the dropdown row to wrap below the display */
@media (max-width:520px){
  .ns-timer-controls{flex-basis:100%;width:100%}
}

/* Side-by-side grid (non-translation mode) */
.ns-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.5rem}

/* Stacked layout (translation mode) */
.ns-stack{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem}
.ns-stack .ns-col{width:100%}

/* Textareas with configurable font size */
.ns-col textarea{width:100%;border:1px solid #ddd;border-radius:.35rem;padding:.5rem;min-height:140px;font-family:inherit;font-size:var(--ns-font-size, 14px);line-height:1.5}

/* Mic / Tape source buttons */
.ns-btn-mic{background:#eef7ff;border-color:#b3d4f7}
.ns-btn-mic.is-active{background:#2563eb;color:#fff;border-color:#1e4fba}
.ns-btn-tape{background:#fef3e2;border-color:#f0d4a0}
.ns-btn-tape.is-active{background:#d97706;color:#fff;border-color:#b45309}

/* v2.2.14: Translation language dropdown */
.ns-trans-toggle-row{margin-bottom:.3rem}
.ns-trans-select{padding:.4rem .6rem;font-size:.85em;border:1px solid #ccc;border-radius:.4rem;background:#fff;cursor:pointer;min-width:160px}
.ns-trans-select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,0.15)}

@media (max-width: 720px){ .ns-grid{grid-template-columns:1fr} }