/* ══════════════════════════════════════════════════════════════════
   NOTES MODULE — Radim Branding v2.0 (Sprint A+B)
   Prefix .nt-* — all colors via var(--radim-*)
   ══════════════════════════════════════════════════════════════════ */

#module-notes {
    color: var(--radim-text, #2d3748);
    background: var(--radim-bg, #f8fafa);
    padding: var(--radim-space-4, 20px) var(--radim-space-3, 14px);
    min-height: 100%;
}

.nt-module {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--radim-space-3, 14px);
}

.nt-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── Radim avatar card ────────────────────────────────────────── */
.nt-avatar-card {
    display: flex;
    gap: var(--radim-space-4, 18px);
    align-items: center;
    padding: var(--radim-space-4, 18px);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 6%, var(--radim-surface, #fff)) 0%,
        var(--radim-surface, #fff) 70%);
    border: 1px solid color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 20%, var(--radim-border, #e2e8f0));
    border-radius: var(--radim-radius-xl, 18px);
    box-shadow: var(--radim-shadow-sm, 0 2px 8px rgba(0,0,0,0.04));
}

.nt-avatar-img {
    width: 88px; height: 88px; flex: 0 0 88px;
    object-fit: cover; object-position: center 6%;
    border-radius: 50%;
    border: 3px solid var(--radim-primary, var(--radim-primary));
    background: var(--radim-surface, #fff);
    box-shadow: var(--radim-shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
}

.nt-avatar-speech { flex: 1 1 auto; min-width: 0; }

.nt-avatar-name {
    font-size: var(--radim-font-sm, 0.875rem);
    font-weight: 700;
    color: var(--radim-primary, var(--radim-primary));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}

.nt-avatar-text {
    margin: 0 0 var(--radim-space-3, 12px);
    color: var(--radim-text, #2d3748);
    font-size: var(--radim-font-lg, 1.125rem);
    line-height: 1.5;
}

.nt-quick-picks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--radim-space-2, 8px);
}

/* ─── Buttons ──────────────────────────────────────────────────── */
.nt-btn {
    padding: 10px 16px;
    background: var(--radim-surface, #fff);
    color: var(--radim-text, #2d3748);
    border: 1.5px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-lg, 12px);
    font: inherit;
    font-size: var(--radim-font-base, 1rem);
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    transition: transform var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                border-color var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                background var(--radim-dur-fast, 0.15s) var(--radim-ease, ease);
}

.nt-btn:hover { transform: translateY(-1px); border-color: var(--radim-primary, var(--radim-primary)); }

.nt-btn:focus-visible {
    outline: 3px solid var(--radim-primary, var(--radim-primary));
    outline-offset: 2px;
}

.nt-btn-primary {
    background: var(--radim-primary, var(--radim-primary));
    color: #fff;
    border-color: var(--radim-primary, var(--radim-primary));
}

.nt-btn-primary:hover { background: color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 85%, #000); }

.nt-btn-ghost {
    background: transparent;
}

.nt-btn-sm {
    padding: 6px 12px;
    font-size: var(--radim-font-sm, 0.875rem);
    min-height: 36px;
}

.nt-btn-danger {
    color: #b91c1c;
    border-color: color-mix(in srgb, #d64545 30%, var(--radim-border, #e2e8f0));
}

.nt-btn-danger:hover {
    background: color-mix(in srgb, #d64545 10%, var(--radim-surface, #fff));
    border-color: #b91c1c;
}

.nt-link {
    background: none;
    border: none;
    color: var(--radim-primary, var(--radim-primary));
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

/* ─── Editor ───────────────────────────────────────────────────── */
.nt-editor {
    padding: var(--radim-space-3, 14px);
    background: var(--radim-surface, #fff);
    border: 1px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-xl, 18px);
    box-shadow: var(--radim-shadow-xs, 0 1px 3px rgba(0,0,0,0.04));
}

.nt-textarea {
    width: 100%;
    padding: 14px 16px;
    font: inherit;
    font-size: var(--radim-font-lg, 1.125rem);
    line-height: 1.6;
    border: 1.5px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-lg, 12px);
    background: var(--radim-surface, #fff);
    color: var(--radim-text, #2d3748);
    min-height: 120px;
    resize: vertical;
    font-family: Georgia, 'Times New Roman', serif;
}

.nt-textarea:focus {
    outline: none;
    border-color: var(--radim-primary, var(--radim-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 20%, transparent);
}

.nt-editor-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: var(--radim-space-2, 10px);
    align-items: center;
}

.nt-draft-status {
    margin-left: auto;
    font-size: var(--radim-font-xs, 0.75rem);
    color: var(--radim-text-muted, #6b7b8a);
    font-style: italic;
}

/* ─── Search ───────────────────────────────────────────────────── */
.nt-search-wrap {
    position: relative;
}

.nt-search-input {
    width: 100%;
    padding: 12px 44px 12px 16px;
    font: inherit;
    font-size: var(--radim-font-base, 1rem);
    border: 1.5px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-xl, 18px);
    background: var(--radim-surface, #fff);
    color: var(--radim-text, #2d3748);
    min-height: 46px;
}

.nt-search-input:focus {
    outline: none;
    border-color: var(--radim-primary, var(--radim-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 20%, transparent);
}

.nt-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--radim-border, #e2e8f0);
    color: var(--radim-text, #2d3748);
    cursor: pointer;
    font-size: 0.9rem;
}

.nt-search-clear:hover { background: color-mix(in srgb, #000 10%, var(--radim-border, #e2e8f0)); }

/* ─── Category chips ───────────────────────────────────────────── */
.nt-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.nt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--radim-surface, #fff);
    color: var(--radim-text, #2d3748);
    border: 1.5px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-2xl, 999px);
    font: inherit;
    font-size: var(--radim-font-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    min-height: 38px;
    transition: border-color var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                background var(--radim-dur-fast, 0.15s) var(--radim-ease, ease);
}

.nt-chip:hover { border-color: var(--radim-primary, var(--radim-primary)); }

.nt-chip-active {
    background: var(--radim-primary, var(--radim-primary));
    color: #fff;
    border-color: var(--radim-primary, var(--radim-primary));
}

.nt-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 20%, var(--radim-surface, #fff));
    color: var(--radim-primary, var(--radim-primary));
    font-size: var(--radim-font-xs, 0.7rem);
    font-weight: 700;
}

.nt-chip-active .nt-chip-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.nt-chip:focus-visible {
    outline: 3px solid var(--radim-primary, var(--radim-primary));
    outline-offset: 2px;
}

/* ─── Notes list + card ────────────────────────────────────────── */
.nt-notes-list {
    display: flex;
    flex-direction: column;
    gap: var(--radim-space-2, 10px);
}

.nt-note-card {
    padding: var(--radim-space-3, 14px) var(--radim-space-4, 18px);
    background: var(--radim-surface, #fff);
    border: 1.5px solid var(--radim-border, #e2e8f0);
    border-left: 4px solid var(--radim-primary, var(--radim-primary));
    border-radius: var(--radim-radius-lg, 12px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: var(--radim-shadow-xs, 0 1px 3px rgba(0,0,0,0.04));
    transition: transform var(--radim-dur-fast, 0.15s) var(--radim-ease, ease),
                box-shadow var(--radim-dur-fast, 0.15s) var(--radim-ease, ease);
}

.nt-note-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--radim-shadow-md, 0 6px 18px rgba(0,0,0,0.08));
}

.nt-note-pinned {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 8%, var(--radim-surface, #fff)),
        var(--radim-surface, #fff) 60%);
    border-left-color: var(--radim-primary, var(--radim-primary));
    border-left-width: 6px;
}

.nt-note-important {
    border-left-color: #ED8936;
}

.nt-note-important.nt-note-pinned {
    border-left-color: #ED8936;
    background: linear-gradient(135deg,
        color-mix(in srgb, #ED8936 10%, var(--radim-surface, #fff)),
        var(--radim-surface, #fff) 60%);
}

.nt-note-crisis {
    border-left-color: #d64545;
    border-left-width: 6px;
    background: color-mix(in srgb, #d64545 4%, var(--radim-surface, #fff));
}

.nt-note-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: var(--radim-font-sm, 0.875rem);
}

.nt-note-category {
    padding: 3px 10px;
    background: color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 12%, var(--radim-surface, #fff));
    color: var(--radim-primary, var(--radim-primary));
    border-radius: var(--radim-radius-2xl, 999px);
    font-weight: 600;
}

.nt-note-pin-badge {
    padding: 3px 10px;
    background: color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 20%, var(--radim-surface, #fff));
    color: var(--radim-primary, var(--radim-primary));
    border-radius: var(--radim-radius-2xl, 999px);
    font-size: var(--radim-font-xs, 0.75rem);
    font-weight: 700;
}

.nt-note-important-badge {
    padding: 3px 10px;
    background: color-mix(in srgb, #ED8936 20%, var(--radim-surface, #fff));
    color: #c2410c;
    border-radius: var(--radim-radius-2xl, 999px);
    font-size: var(--radim-font-xs, 0.75rem);
    font-weight: 700;
}

.nt-note-shared-badge {
    padding: 3px 10px;
    background: color-mix(in srgb, #7C3AED 18%, var(--radim-surface, #fff));
    color: #6d28d9;
    border-radius: var(--radim-radius-2xl, 999px);
    font-size: var(--radim-font-xs, 0.75rem);
    font-weight: 700;
}

.nt-note-shared {
    border-left: 4px solid #7C3AED;
}

.nt-note-date {
    margin-left: auto;
    color: var(--radim-text-muted, #6b7b8a);
    font-size: var(--radim-font-xs, 0.75rem);
}

.nt-note-body {
    font-size: var(--radim-font-lg, 1.125rem);
    line-height: 1.6;
    color: var(--radim-text, #2d3748);
    white-space: pre-wrap;
    word-break: break-word;
    font-family: Georgia, 'Times New Roman', serif;
}

.nt-note-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed var(--radim-border, #e2e8f0);
}

.nt-crisis-panel {
    padding: 12px 14px;
    background: color-mix(in srgb, #d64545 8%, var(--radim-surface, #fff));
    border: 1px solid color-mix(in srgb, #d64545 30%, var(--radim-border, #e2e8f0));
    border-radius: var(--radim-radius-md, 10px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--radim-font-sm, 0.875rem);
}

.nt-crisis-panel strong { color: #b91c1c; }

.nt-crisis-link {
    display: block;
    padding: 8px 12px;
    background: #d64545;
    color: #fff;
    text-decoration: none;
    border-radius: var(--radim-radius-md, 10px);
    font-weight: 700;
    text-align: center;
}

.nt-crisis-link:hover { background: #b91c1c; color: #fff; }

/* ─── Empty state ──────────────────────────────────────────────── */
.nt-empty {
    padding: var(--radim-space-5, 40px) var(--radim-space-3, 14px);
    text-align: center;
    color: var(--radim-text-muted, #6b7b8a);
    background: var(--radim-surface, #fff);
    border: 1px dashed var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-xl, 18px);
    font-size: var(--radim-font-lg, 1.125rem);
}

/* ─── Stats footer ─────────────────────────────────────────────── */
.nt-stats-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--radim-space-2, 10px) var(--radim-space-3, 14px);
    color: var(--radim-text-muted, #6b7b8a);
    font-size: var(--radim-font-sm, 0.875rem);
}

/* ─── Toast ────────────────────────────────────────────────────── */
.nt-toast,
.nt-undo-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    background: var(--radim-text, #2d3748);
    color: #fff;
    border-radius: var(--radim-radius-lg, 12px);
    font-weight: 600;
    z-index: 10002;
    box-shadow: var(--radim-shadow-lg, 0 10px 30px rgba(0,0,0,0.25));
    animation: ntToastIn 0.2s ease;
}

.nt-undo-toast {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--radim-primary, var(--radim-primary));
}

.nt-undo-btn {
    background: rgba(255,255,255,0.2);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.4);
    padding: 6px 14px;
    border-radius: var(--radim-radius-md, 10px);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.nt-undo-btn:hover { background: rgba(255,255,255,0.3); }

.nt-toast-hide {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
}

@keyframes ntToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ─── Dictation overlay ───────────────────────────────────────── */
.nt-dict-overlay,
.nt-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 40, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    z-index: 10001;
    padding: var(--radim-space-3, 14px);
    animation: ntFadeIn 0.2s ease;
}

@keyframes ntFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.nt-dict-box,
.nt-modal-box {
    width: 100%;
    max-width: 460px;
    background: var(--radim-surface, #fff);
    border-radius: var(--radim-radius-xl, 18px);
    padding: var(--radim-space-4, 20px);
    box-shadow: var(--radim-shadow-lg, 0 10px 30px rgba(0,0,0,0.25));
    border: 2px solid var(--radim-primary, var(--radim-primary));
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 85vh;
    overflow-y: auto;
}

.nt-dict-box h3,
.nt-modal-box h3 {
    margin: 0;
    color: var(--radim-text, #2d3748);
    font-size: var(--radim-font-xl, 1.25rem);
}

.nt-dict-hint,
.nt-modal-sub {
    color: var(--radim-text-muted, #6b7b8a);
    font-size: var(--radim-font-sm, 0.9rem);
    margin: 0;
}

.nt-dict-pulse {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 20px 0;
}

.nt-dict-pulse span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--radim-primary, var(--radim-primary));
    animation: ntPulse 1.2s ease-in-out infinite;
}

.nt-dict-pulse span:nth-child(2) { animation-delay: 0.2s; }
.nt-dict-pulse span:nth-child(3) { animation-delay: 0.4s; }

.nt-dict-pulse.nt-dict-done span {
    animation: none;
    background: #4CAF50;
}

@keyframes ntPulse {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50%      { transform: scale(1.2); opacity: 1;   }
}

.nt-dict-preview {
    padding: 12px 14px;
    background: color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 6%, var(--radim-surface, #fff));
    border: 1px solid var(--radim-border, #e2e8f0);
    border-radius: var(--radim-radius-md, 10px);
    min-height: 60px;
    font-size: var(--radim-font-base, 1rem);
    line-height: 1.5;
    color: var(--radim-text, #2d3748);
    white-space: pre-wrap;
}

.nt-dict-actions,
.nt-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.nt-modal-content {
    padding: 12px 14px;
    background: color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 5%, var(--radim-surface, #fff));
    border-left: 4px solid var(--radim-primary, var(--radim-primary));
    border-radius: 0 var(--radim-radius-md, 10px) var(--radim-radius-md, 10px) 0;
    font-size: var(--radim-font-base, 1rem);
    line-height: 1.6;
    color: var(--radim-text, #2d3748);
    white-space: pre-wrap;
}

.nt-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid color-mix(in srgb, var(--radim-primary, var(--radim-primary)) 20%, transparent);
    border-top-color: var(--radim-primary, var(--radim-primary));
    border-radius: 50%;
    animation: ntSpin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

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

/* ─── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    #module-notes { padding: var(--radim-space-3, 14px) var(--radim-space-2, 10px); }
    .nt-avatar-card { flex-direction: column; text-align: center; }
    .nt-avatar-img { width: 72px; height: 72px; flex: 0 0 72px; }
    .nt-quick-picks { justify-content: center; }
    .nt-note-actions { justify-content: center; }
    .nt-note-actions .nt-btn-sm { flex: 1 1 auto; justify-content: center; }
    .nt-draft-status { flex: 1 1 100%; margin: 4px 0 0; text-align: center; }
}

@media (prefers-contrast: more) {
    .nt-avatar-card, .nt-editor, .nt-note-card, .nt-btn, .nt-chip,
    .nt-search-input, .nt-dict-box, .nt-modal-box {
        border-color: #000 !important;
        border-width: 2px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nt-btn, .nt-chip, .nt-note-card, .nt-dict-pulse span, .nt-spinner {
        animation: none;
        transition: none;
    }
    .nt-btn:hover, .nt-note-card:hover { transform: none; }
}

/* ═══ Confirm delete dialog (UX-fix) ═══════════════════════════════ */
.nt-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10005;
    opacity: 0;
    transition: opacity 0.18s ease;
    padding: 16px;
}
.nt-confirm-overlay.nt-confirm-shown { opacity: 1; }
.nt-confirm-overlay.nt-confirm-closing { opacity: 0; }

.nt-confirm-card {
    background: white;
    border-radius: 18px;
    padding: 22px 22px 18px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.22s ease;
    text-align: center;
}
.nt-confirm-overlay.nt-confirm-shown .nt-confirm-card {
    transform: translateY(0) scale(1);
}

.nt-confirm-icon {
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 8px;
}

.nt-confirm-title {
    font-size: 1.2rem;
    color: #1a4a44;
    margin: 0 0 14px;
    font-weight: 700;
}

.nt-confirm-note {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 14px;
    text-align: left;
}
.nt-confirm-note strong {
    color: #1a4a44;
    font-size: 1rem;
    display: block;
    margin-bottom: 4px;
}
.nt-confirm-note p {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.45;
}

.nt-confirm-info {
    background: #dcfce7;
    border-left: 3px solid #16a34a;
    border-radius: 8px;
    padding: 10px 12px;
    color: #14532d;
    font-size: 0.92rem;
    text-align: left;
    margin: 0 0 18px;
    line-height: 1.5;
}

.nt-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.nt-confirm-btn {
    flex: 1;
    min-height: 48px;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all 0.15s ease;
}

.nt-confirm-cancel {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}
.nt-confirm-cancel:hover { background: #e2e8f0; }

.nt-confirm-yes {
    background: #dc2626;
    color: white;
}
.nt-confirm-yes:hover { background: #b91c1c; }

.nt-confirm-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--radim-primary, #5BA8A0) 50%, transparent);
    outline-offset: 2px;
}