:root {
    --primary: #2563eb;
    --primary-700: #1d4ed8;
    --ring: rgba(37, 99, 235, .25);
    --bg: #f7fafc;
    --card: #ffffff;
    --ink: #0f172a;
    --muted: #64748b;
    --border: #e5e7eb;
    --radius: 14px;
    --radius-lg: 18px;
    --shadow: 0 10px 30px rgba(2, 6, 23, .08);
    --transition: .22s ease;
    --text-sm: 0.95rem;
    --text-md: 1.1rem;
    /* source text size */
    --text-lg: 1.375rem;
    /* result text size */
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%;
    margin: 0;
    font-family: 'Inter', system-ui, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(900px 600px at 10% -10%, #e0e7ff 0%, transparent 60%),
        radial-gradient(700px 500px at 100% 0%, #d1fae5 0%, transparent 55%),
        var(--bg);
    display: grid;
    place-items: center;
    overflow-x: hidden;
}

/* Soft blobs */
.bg-soft {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

.blob {
    position: absolute;
    filter: blur(60px);
    opacity: .35;
    border-radius: 999px
}

.blob-a {
    width: 420px;
    height: 420px;
    left: -90px;
    top: -80px;
    background: #a5b4fc
}

.blob-b {
    width: 520px;
    height: 520px;
    right: -120px;
    top: -60px;
    background: #99f6e4
}

/* --------- Card (Login) ---------- */
.card {
    width: min(92vw, 420px);
    padding: 28px 26px 30px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    text-align: center;
    animation: fade-in .6s ease both;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.logo {
    font-size: 1.55rem;
    font-weight: 800;
    margin-bottom: 6px;
    color: #0b1220
}

.subtitle {
    font-size: var(--text-sm);
    color: var(--muted);
    margin-bottom: 20px
}

.field {
    position: relative;
    margin-bottom: 14px
}

.field input {
    width: 100%;
    padding: 12px 44px 12px 12px;
    background: #f8fafc;
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    transition: var(--transition);
}

.field input::placeholder {
    color: #94a3b8
}

.field input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 5px var(--ring)
}

.toggle-password {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1rem;
    color: #64748b;
    transition: var(--transition)
}

.toggle-password:hover {
    color: #0b1220
}

.btn {
    width: 100%;
    padding: 13px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, var(--primary), #60a5fa);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 8px 24px rgba(37, 99, 235, .28)
}

/* Compact pill just big enough for its text */
/* Compact, natural-size Translate button */
.btn-translate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    /* smaller padding */
    font-size: .85rem;
    font-weight: 800;
    /* smaller text */
    color: #fff;
    background: linear-gradient(90deg, var(--primary), #60a5fa);
    border: none;
    border-radius: 999px;
    /* pill */
    box-shadow: 0 4px 12px rgba(37, 99, 235, .16);
    /* lighter shadow */
    width: auto;
    min-width: unset;
    /* only as wide as text */
    cursor: pointer;
    transition: var(--transition);
}

.btn-translate i {
    font-size: .9rem;
    line-height: 1;
}

/* smaller icon */
.btn-translate:hover,
.btn-translate:focus-visible {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.btn-translate:disabled {
    opacity: .7;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 3px 8px rgba(2, 6, 23, .10);
}


.btn-translate:disabled {
    opacity: .7;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 6px 16px rgba(2, 6, 23, .10);
}


.btn-translate i {
    font-size: .95rem;
    line-height: 1;
}

.btn-translate:hover,
.btn-translate:focus-visible {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.btn-translate:disabled {
    opacity: .7;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 4px 10px rgba(2, 6, 23, .10);
}





.btn:hover,
.btn:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px)
}

#message {
    margin-top: 12px;
    font-size: .95rem;
    font-weight: 600;
    min-height: 1.1em
}

.error {
    color: #dc2626
}

.success {
    color: #059669
}

/* --------- Logout button --------- */
/* --------- Logout icon (inside card) --------- */
.logout-icon {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 10px rgba(2, 6, 23, .06);
    font-size: .8rem;
    color: #0b1220;
}

.logout-icon:hover {
    background: #f8fafc
}

/* --------- Translator --------- */
.translator {
    position: relative;
    width: min(98vw, 1400px);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow);
    padding: 20px 22px 24px;
    animation: fade-in .6s ease both;
}

.translator-header {
    text-align: center;
    margin-bottom: 8px
}

.translator-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0b1220;
    letter-spacing: .2px
}

.translator-sub {
    color: var(--muted);
    font-size: .95rem
}

/* Language selectors */
.lang-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px 0 18px;
}

.select-wrap {
    display: grid;
    gap: 6px
}

.select-label {
    font-size: .85rem;
    color: #475569
}

.select-label {
    display: none;
}


.lang-row select {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: #0b1220;
    font-weight: 700;
    outline: none;
    transition: var(--transition);
    min-width: 240px;
    box-shadow: 0 6px 16px rgba(2, 6, 23, .06);
}


.lang-row select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 5px var(--ring)
}

.swap-btn {
    height: 40px;
    width: 40px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    font-size: 1rem;
    color: #0b1220;
    transition: var(--transition);
    box-shadow: 0 6px 16px rgba(2, 6, 23, .06);
}

.swap-btn:hover {
    transform: rotate(90deg) scale(1.03);
    background: #f8fafc;
}


.swap-btn:hover {
    transform: rotate(90deg);
    background: #f8fafc
}

/* Always stacked panes (upper + lower) */
.panes {
    display: grid;
    grid-template-rows: auto auto;
    gap: 14px;
    margin-top: 6px;
}

.pane {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
}

.pane-head {
    display: none;
}


.pane-title {
    font-weight: 800;
    color: #0b1220
}

.count-pill {
    font-size: .8rem;
    color: #475569;
    border: 1px solid var(--border);
    padding: 4px 8px;
    border-radius: 999px;
    background: #f8fafc
}

/* Bigger text areas */
textarea {
    width: 100%;
    min-height: 132px;
    padding: 14px;
    background: #f8fafc;
    color: #0b1220;
    border: 1px solid var(--border);
    border-radius: 12px;
    line-height: 1.6;
    resize: vertical;
    outline: none;
    transition: var(--transition);
}

/* Mic icon for Source textarea */
.mic-icon {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: .8rem;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(2, 6, 23, .06);
    transition: var(--transition);
}

.mic-icon {
    width: 24px;
    height: 24px;
}

/* NEW: Floating TTS popup under selection */
.tts-pop {
    position: absolute;
    min-width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0 8px;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: #0b1220;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(2, 6, 23, .10);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: var(--transition);
}

.tts-pop.visible {
    opacity: 1;
    pointer-events: auto;
}

.tts-pop i {
    font-size: .9rem;
}





/* Reveal icons on hover/focus */
.textarea-wrap:hover .mic-icon,
.textarea-wrap:focus-within .mic-icon,
.textarea-wrap:hover .clear-icon,
.textarea-wrap:focus-within .clear-icon {
    opacity: 1;
    pointer-events: auto;
}

/* Recording state (subtle) */
/* Mic button base (you already have this) */
/* .mic-icon{ ... } */

/* Active listening state: color + soft pulse */
.mic-icon.recording {
    opacity: 1;
    /* always visible while on */
    pointer-events: auto;
    /* always clickable while on */
    color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 6px var(--ring);
    position: relative;
    animation: mic-pulse 1.2s ease-in-out infinite;
}

.mic-icon.recording::after {
    content: '';
    position: absolute;
    inset: -3px;
    /* was -8px */
    border-radius: 9999px;
    border: 2px solid var(--primary);
    opacity: .45;
    animation: ring-ping 1.2s ease-out infinite;
}

@keyframes mic-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ring-ping {
    0% {
        transform: scale(0.9);
        opacity: .45;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.textarea-wrap:hover .mic-icon,
.textarea-wrap:focus-within .mic-icon,
.mic-icon.recording {
    opacity: 1;
    pointer-events: auto;
}


/* Clear icon for Source textarea */
.textarea-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.clear-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: .8rem;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(2, 6, 23, .06);
    transition: var(--transition);
}

.textarea-wrap:hover .clear-icon,
.textarea-wrap:focus-within .clear-icon {
    opacity: 1;
    pointer-events: auto;
}

.clear-icon:hover {
    background: #f3f4f6;
    color: #0b1220;
}


textarea::placeholder {
    color: #94a3b8
}

textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 5px var(--ring)
}

#sourceText,
#resultText {
    font-size: 30px;
}

#resultText {
    min-height: 156px;
}


.pane-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    /* left align */
    margin-top: 10px;
}


.btn-secondary {
    padding: 9px 12px;
    font-weight: 700;
    color: #0b1220;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition)
}

.btn-secondary:hover {
    background: #f3f4f6
}

.controls {
    display: flex;
    justify-content: center;
    margin-top: 16px
}

/* Utility */
.hidden {
    display: none !important
}

/* --- OCR spinner --- */
.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    /* center it */
    border: 4px solid rgba(2, 6, 23, .12);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    z-index: 5;
    /* above mic/clear buttons */
    background: transparent;
}

.spinner.hidden {
    display: none;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}



/* === Right-side tools for Source textarea === */
.input-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.input-row .textarea-wrap {
    flex: 1;
    /* textarea takes the width */
    position: relative;
    /* keeps spinner centered inside */
}

.side-tools {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: stretch;
    justify-content: flex-start;
}

/* make these buttons look like your existing mic/clear, but not absolute */
.side-tools .tool-btn {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: .9rem;
    box-shadow: 0 4px 10px rgba(2, 6, 23, .06);
    cursor: pointer;
    transition: var(--transition);
}

.side-tools .tool-btn:hover {
    background: #f3f4f6;
    color: #0b1220;
}

/* override the old absolute positioning for these two when in side-tools */
.side-tools .mic-icon,
.side-tools .clear-icon {
    position: static;
    /* no absolute positioning */
    opacity: 1;
    /* always visible */
    pointer-events: auto;
}



/* === Keep mic + X INSIDE the source box on the right === */
.with-tools textarea {
    /* add room so text doesn't sit under the buttons */
    padding-right: 56px;
}

.with-tools .inline-tools {
    position: absolute;
    top: 12px;
    /* start near top-right */
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.with-tools .mic-icon,
.with-tools .clear-icon {
    position: static;
    /* cancel the old absolute positions */
    opacity: 1;
    /* always visible */
    pointer-events: auto;
    width: 28px;
    height: 28px;
    /* tidy size */
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: .9rem;
    box-shadow: 0 4px 10px rgba(2, 6, 23, .06);
    transition: var(--transition);
}

.with-tools .mic-icon:hover,
.with-tools .clear-icon:hover {
    background: #f3f4f6;
    color: #0b1220;
}


/* --- Student search to the right of Translate --- */
.student-search.fancy {
    position: relative;
    min-width: 200px;
    width: 50%;
    /* was 80% */
    max-width: 265px;
    /* cap so it never gets too long */
    flex: 0 0 50%;
    /* match the width percentage above */
}



/* Make the input fill the container and reserve space on the right */
.student-search.fancy input {
    width: 100%;
    padding: 12px 44px 12px 14px;
    /* room for loader/clear on the right */
    background: linear-gradient(#fff, #f8fafc);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 999px;
    /* pill */
    outline: none;
    transition: var(--transition);
    box-shadow: 0 6px 18px rgba(2, 6, 23, .06);
}

/* Clear (×) button on the far right of the input */
.clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    font-size: 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: 0 2px 6px rgba(2, 6, 23, .08);
    cursor: pointer;
    display: none;
    /* hidden by default */
    user-select: none;
}

.student-search:hover .clear-btn {
    display: inline-block;
}

/* show on hover */
.student-search.loading .clear-btn {
    display: none;
}

/* hide while loading */
.clear-btn:hover {
    background: #f8fafc;
}

.clear-btn:active {
    transform: translateY(-50%) scale(.96);
}

.student-search.fancy input::placeholder {
    color: #9aa4b2;
}

.student-search.fancy input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 6px var(--ring);
}

/* left icon inside the input */
.student-search .icon-left {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .95rem;
    color: #9aa4b2;
    pointer-events: none;
}

/* tiny spinner on the right (shown when .loading on container) */
.student-search .loader {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(2, 6, 23, .14);
    border-top-color: var(--primary);
    border-radius: 999px;
    /* use centered spin so translateY stays applied while rotating */
    animation: spin-centered .8s linear infinite;
    display: none;
}

.student-search.loading .loader {
    display: block;
}

/* Suggestions dropdown */
.suggest-list {
    position: absolute;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 0;
    list-style: none;
    display: none;
    z-index: 10;
}

.suggest-list.open {
    display: block;
}

.suggest-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: .98rem;
}

.suggest-list li:hover {
    background: #f8fafc;
}

.suggest-list li.empty {
    color: #94a3b8;
    cursor: default;
}

.suggest-list mark {
    background: #dbeafe;
    color: #1e3a8a;
    border-radius: 4px;
    padding: 0 2px;
}


@keyframes spin-centered {
    from {
        transform: translateY(-50%) rotate(0deg);
    }

    to {
        transform: translateY(-50%) rotate(360deg);
    }
}



/* --- Toast message --- */
/* Toast */
.toast{
  position: fixed; top: 16px; right: 16px;
  background: linear-gradient(135deg, #f59e0b, #f97316); /* amber → orange */
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 14px 32px rgba(249, 115, 22, .35);
  transform: translateY(-10px) scale(.98);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
  z-index: 9999;
}
.toast.show{ opacity: 1; transform: translateY(0) scale(1); }

/* little warning icon before text */
.toast::before{
  content: '⚠️';
  margin-right: 8px;
}


/* Bottom, centered reminder variant */
.toast-bottom{
  top: auto;
  right: auto;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(10px) scale(.98);
}
.toast-bottom.show{
  transform: translateX(-50%) translateY(0) scale(1);
}



/* ===== Notes card ===== */
.notes-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Header with soft tint */
.notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(1200px 1200px at -20% -40%, rgba(37,99,235,.06), transparent 40%),
    radial-gradient(900px 900px at 120% 20%, rgba(37,99,235,.04), transparent 35%),
    #fff;
}

.notes-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--ink);
}
.notes-title i {
  font-size: 1.05rem;
  color: var(--primary);
}

/* Header tools */
.notes-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* NEW: toolbar for the note editor */
.notes-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.toolbar-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  display: inline-block;
}

.notes-toolbar .icon-btn b,
.notes-toolbar .icon-btn i,
.notes-toolbar .icon-btn u { font-weight: 700; }

.notes-toolbar .color-swatch { font-weight: 700; }
.notes-toolbar .color-swatch[data-color="blue"]    { color: #2563eb; }
.notes-toolbar .color-swatch[data-color="red"]     { color: #dc2626; }
.notes-toolbar .color-swatch[data-color="magenta"] { color: #d946ef; }

.notes-count {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
}

/* Reusable tiny icon button */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(2,6,23,.04);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  cursor: pointer;
}
.icon-btn i { font-size: 1.05rem; color: var(--muted); }
.icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(2,6,23,.08);
  border-color: rgba(37,99,235,.25);
}
.icon-btn:active { transform: translateY(0); }
.icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--ring);
}

/* Notes textarea styling */
.notes-wrap textarea {
  min-height: 500px;              /* roomy by default */
  resize: vertical;               /* let them grow/shrink */
  padding: 16px 16px 18px 16px;   /* a touch more padding */
  font-size: var(--text-md);
  line-height: 1.6;
  background:
    linear-gradient(transparent 31px, rgba(37,99,235,.08) 32px) repeat-y,
    #fff;
  background-size: 100% 32px;     /* faint ruled lines */
}

/* Subtle focus ring reuse */
.notes-wrap textarea:focus {
  box-shadow: 0 0 0 4px var(--ring);
  border-color: var(--primary);
}

/* --- Split notes into two sections --- */
.notes-split {
  display: grid;
  gap: 12px;
}

/* Different heights for top and bottom notes */
#notesTop {
  min-height: 160px;     /* smaller top box */
  font-size: 30px;       /* NEW: bigger text for learners */
}


#notesBottom {
  min-height: 360px;     /* larger bottom box */
  font-size: 30px;       /* NEW: bigger text for learners */
}



/* Clear, elegant divider between the two sections */
.notes-divider {
  height: 1px;
  border: 0;
  background:
    linear-gradient(to right, transparent, rgba(15, 23, 42, .15), transparent);
}


/* Hide the shadow textareas used for storage */
.hidden-note { display: none; }

/* Rich note editor/viewer */
.notes-rich {
  min-height: 160px;              /* default for top; bottom will be taller below */
  padding: 16px 16px 18px;
  font-size: 30px;                /* your requested size */
  line-height: 1.6;
  color: #0b1220;
  background:
    linear-gradient(transparent 31px, rgba(37,99,235,.08) 32px) repeat-y,
    #fff;                         /* faint ruled lines, same look as before */
  background-size: 100% 32px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Focus ring for contenteditable like textarea */
.notes-rich:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--ring);
}

/* Different heights for each box */
#notesTopRich    { min-height: 160px; }  /* smaller top box */
#notesBottomRich { min-height: 360px; }  /* larger bottom box */

/* ===== Mask feature ===== */
.mask-toggle{
  position: fixed;

  /* stick to the absolute corner, with safe-area support on phones */
  left: env(safe-area-inset-left, 0px);
  bottom: env(safe-area-inset-bottom, 0px);

  z-index: 2147483647; /* always on top, even above the mask */
  margin: 0;
  padding: 10px 14px;
  font-weight: 800;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: #0b1220;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: var(--transition);
}

.mask-toggle:hover{ background:#f8fafc; transform: translateY(-1px); }
.mask-toggle.active{
  color:#fff; background: linear-gradient(90deg, var(--primary), #60a5fa);
  border-color: transparent;
}

.mask-overlay{
  position: fixed;
  inset: 0;                     /* full screen */
  background: #fff;
  z-index: 10000;

  /* center content nicely */
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 64px);
  cursor: pointer;              /* hint you can click to close */
}

/* Centered content container */
.mask-content{
  text-align: center;
  max-width: 1100px;
}

/* Big, beautiful headline with a soft gradient */
.mask-line{
  font-size: clamp(28px, 6vw, 72px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: .2px;

  /* gradient text */
  background: linear-gradient(90deg, var(--primary), #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* subtle depth */
  text-shadow: 0 2px 0 rgba(0,0,0,.03);
  margin: 0 auto;
}

/* Small hint underneath */
.mask-hint{
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  opacity: .85;
}


body.masked { overflow: hidden; } /* prevent scroll under the mask */

@media (max-width: 480px){
  .mask-overlay{ inset: 6px; border-radius: 12px; }
  .mask-toggle{ left:12px; bottom:12px; }
}