/* ================================================================
   KNW Kids — Teacher Growth Dashboard
   Mobile-First · Professional Growth Companion
   ================================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --app-max-width: 1200px;
    --app-bg: #F5F2EE;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    --card-bg: #FFFFFF;
    --card-radius: 20px;
    --card-shadow: 0 2px 14px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
    --card-shadow-lg: 0 8px 30px rgba(0,0,0,.12);

    /* Journey Stage Colours */
    --learn: #2563EB;
    --learn-bg: #EFF6FF;
    --apply: #D97706;
    --apply-bg: #FFFBEB;
    --reflect: #7C3AED;
    --reflect-bg: #F5F3FF;
    --reflect-border: #DDD6FE;
    --analyze: #059669;
    --analyze-bg: #ECFDF5;
    --continue: #DB2777;
    --continue-bg: #FDF2F8;

    /* Active stage = Reflect */
    --primary: #7C3AED;
    --primary-dark: #5B21B6;
    --primary-mid: #8B5CF6;
    --primary-light: #F5F3FF;
    --primary-border: #DDD6FE;

    --hero-gradient: linear-gradient(150deg, #3B1A8A 0%, #5B21B6 30%, #7C3AED 65%, #9333EA 100%);

    --text-primary: #1C1917;
    --text-body: #44403C;
    --text-secondary: #78716C;
    --text-muted: #A8A29E;
    --text-disabled: #D6D3D1;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-pill: 100px;

    --nav-height: 74px;

    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 150ms;
    --dur-normal: 260ms;
    --dur-slow: 400ms;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
    background: #E2DDD7;
    color: var(--text-primary);
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── App Shell ─────────────────────────────────────────────────── */
.knw-app {
    width: 100%;
    max-width: var(--app-max-width);
    min-height: 100dvh;
    background: var(--app-bg);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Header ────────────────────────────────────────────────────── */
.knw-app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(245,242,238,.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: calc(var(--safe-top) + 14px) var(--space-lg) 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0,0,0,.05);
}

.knw-header-greeting { flex: 1; }

.knw-greeting-time {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1px;
}

.knw-greeting-name {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.knw-greeting-tagline {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 3px;
    line-height: 1.35;
}

.knw-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 3px;
}

.knw-notif-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--card-bg);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--card-shadow);
    transition: transform var(--dur-fast) var(--ease-spring);
}
.knw-notif-btn:active { transform: scale(0.90); }
.knw-notif-btn svg { width: 19px; height: 19px; color: var(--text-body); }

.knw-notif-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: #EF4444;
    border-radius: 50%;
    border: 2px solid var(--app-bg);
}

.knw-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--hero-gradient);
    color: white;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: transform var(--dur-fast) var(--ease-spring);
    flex-shrink: 0;
}
.knw-avatar:active { transform: scale(0.90); }

/* ── Scrollable Content ─────────────────────────────────────────── */
.knw-app-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-md) var(--space-md) calc(var(--nav-height) + var(--safe-bottom) + 24px);
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: 20px;
}

/* ── Section ───────────────────────────────────────────────────── */
.knw-section { margin-bottom: var(--space-md); }

.knw-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 2px;
}

.knw-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.knw-section-link {
    font-size: 13px;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

/* ── Base Card ─────────────────────────────────────────────────── */
.knw-card {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-lg);
    overflow: hidden;
}

.knw-card-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 4px;
}

.knw-card-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.knw-card-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 5px;
    line-height: 1.45;
}

.knw-divider {
    height: 1px;
    background: rgba(0,0,0,.06);
    margin: 18px 0;
}

/* ── Hero Journey Card ─────────────────────────────────────────── */
.knw-card--hero {
    background: var(--hero-gradient);
    color: white;
    padding: 16px 16px 18px;
    position: relative;
    overflow: hidden;
}

.knw-card--hero::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -50px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    pointer-events: none;
}

.knw-card--hero::after {
    content: '';
    position: absolute;
    bottom: -90px;
    left: -60px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    pointer-events: none;
}

/* Journey loop stages */
.knw-journey-stages {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
    z-index: 1;
    align-items: center;
}
.knw-journey-stages::-webkit-scrollbar { display: none; }

.knw-journey-stage {
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: var(--r-pill);
    background: rgba(255,255,255,.10);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    cursor: default;
    white-space: nowrap;
}

.knw-journey-stage--active {
    background: rgba(255,255,255,.22);
    color: white;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

.knw-journey-sep {
    flex-shrink: 0;
    font-size: 9px;
    color: rgba(255,255,255,.25);
    letter-spacing: 0;
}

/* Stage heading */
.knw-hero-stage { position: relative; z-index: 1; }

.knw-stage-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-bottom: 4px;
}

.knw-stage-name {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}

.knw-stage-name-dot {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    flex-shrink: 0;
    opacity: .85;
}

/* Mission block */
.knw-hero-mission { position: relative; z-index: 1; margin: 10px 0 0; }

.knw-mission-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-bottom: 5px;
}

.knw-mission-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: white;
}

/* Progress */
.knw-hero-progress { position: relative; z-index: 1; margin-top: 10px; }

.knw-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}

.knw-progress-label { font-size: 11px; color: rgba(255,255,255,.5); font-weight: 500; }
.knw-progress-value { font-size: 11px; color: rgba(255,255,255,.75); font-weight: 700; }

.knw-progress-track {
    height: 4px;
    background: rgba(255,255,255,.18);
    border-radius: var(--r-pill);
    overflow: hidden;
}

.knw-progress-fill {
    height: 100%;
    background: rgba(255,255,255,.85);
    border-radius: var(--r-pill);
    transition: width 1.2s var(--ease-out);
}

/* Hero CTA */
.knw-hero-cta { position: relative; z-index: 1; margin-top: 12px; }

.knw-btn-hero {
    width: 100%;
    padding: 11px 20px;
    background: white;
    color: var(--primary-dark);
    border: none;
    border-radius: var(--r-lg);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 18px rgba(0,0,0,.22);
    transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
}
.knw-btn-hero:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(0,0,0,.22); }
.knw-btn-hero svg { width: 18px; height: 18px; }

.knw-hero-skip {
    text-align: center;
    margin-top: 8px;
    position: relative;
    z-index: 1;
}

.knw-hero-skip a {
    font-size: 13px;
    color: rgba(255,255,255,.55);
    text-decoration: none;
    cursor: pointer;
    padding: 8px 12px;
    display: inline-block;
    transition: color var(--dur-fast);
    font-family: inherit;
    border: none;
    background: none;
}
.knw-hero-skip a:hover { color: rgba(255,255,255,.80); }

/* ── Mission Card ──────────────────────────────────────────────── */
.knw-mission-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.knw-mission-icon {
    width: 38px;
    height: 38px;
    background: var(--primary-light);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.knw-mission-icon svg { width: 19px; height: 19px; color: var(--primary); }

.knw-mission-header-text {}
.knw-mission-title { font-size: 15px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; }
.knw-mission-meta { font-size: 12px; color: var(--text-muted); margin-top: 1px; }

.knw-mission-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
}

.knw-mission-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.knw-step-badge {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    margin-top: 0px;
    letter-spacing: 0.03em;
}

.knw-step--try .knw-step-badge { background: #DBEAFE; color: #1D4ED8; }
.knw-step--observe .knw-step-badge { background: #D1FAE5; color: #065F46; }
.knw-step--note .knw-step-badge { background: #EDE9FE; color: #5B21B6; }

.knw-step-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.knw-step-text {
    font-size: 14px;
    color: var(--text-body);
    line-height: 1.5;
    font-weight: 500;
}

.knw-mission-btns { display: flex; flex-direction: column; gap: 10px; }

/* ── Buttons ───────────────────────────────────────────────────── */
.knw-btn {
    width: 100%;
    padding: 15px 24px;
    border-radius: var(--r-lg);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: -0.01em;
    transition: transform var(--dur-fast) var(--ease-spring), opacity var(--dur-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    border: none;
}
.knw-btn:active { transform: scale(0.97); }
.knw-btn svg { width: 17px; height: 17px; }

.knw-btn--primary { background: var(--primary); color: white; }
.knw-btn--primary:hover { background: var(--primary-dark); }

.knw-btn--success { background: var(--analyze); color: white; }

.knw-btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--text-disabled);
    padding: 13px 24px;
    font-size: 14px;
    font-weight: 600;
}
.knw-btn--ghost:active { background: var(--app-bg); border-color: var(--text-muted); }

.knw-btn--outline {
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--primary);
    padding: 13px 24px;
}
.knw-btn--outline:active { background: var(--primary-light); }

.knw-btn--success-state {
    background: #D1FAE5;
    color: #065F46;
    border-color: transparent;
    pointer-events: none;
}

/* ── Reflection Card ───────────────────────────────────────────── */
.knw-reflection-section { margin-bottom: 20px; }
.knw-reflection-section:last-of-type { margin-bottom: 0; }

.knw-reflect-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-body);
    margin-bottom: 11px;
}

/* Emotion buttons */
.knw-emotion-group { display: flex; gap: 8px; }

.knw-emotion-btn {
    flex: 1;
    padding: 11px 6px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--text-disabled);
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-body);
    transition: all var(--dur-fast) var(--ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: inherit;
}
.knw-emotion-btn:active { transform: scale(0.94); }

.knw-emotion-btn.active--good  { background: #D1FAE5; border-color: #10B981; color: #065F46; }
.knw-emotion-btn.active--okay  { background: #FEF3C7; border-color: #F59E0B; color: #92400E; }
.knw-emotion-btn.active--hard  { background: #FEE2E2; border-color: #EF4444; color: #991B1B; }

/* Emoji reaction */
.knw-emoji-group { display: flex; gap: 8px; }

.knw-emoji-btn {
    flex: 1;
    height: 52px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--text-disabled);
    background: transparent;
    cursor: pointer;
    font-size: 22px;
    transition: all var(--dur-fast) var(--ease-spring);
    display: flex;
    align-items: center;
    justify-content: center;
}
.knw-emoji-btn:active { transform: scale(0.86); }
.knw-emoji-btn.active {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: 0 0 0 3px var(--primary-border);
    transform: scale(1.07);
}

/* Confidence selector */
.knw-confidence-group {
    display: flex;
    gap: 0;
    background: var(--app-bg);
    padding: 4px;
    border-radius: var(--r-md);
}

.knw-confidence-btn {
    flex: 1;
    padding: 10px 6px;
    border-radius: var(--r-sm);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    transition: all var(--dur-normal) var(--ease-out);
    font-family: inherit;
}
.knw-confidence-btn.active {
    background: white;
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Note textarea */
.knw-reflection-note {
    width: 100%;
    min-height: 80px;
    border: 1.5px solid var(--text-disabled);
    border-radius: var(--r-md);
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text-body);
    font-family: inherit;
    resize: none;
    transition: border-color var(--dur-fast);
    background: transparent;
    line-height: 1.55;
}
.knw-reflection-note::placeholder { color: var(--text-muted); }
.knw-reflection-note:focus { outline: none; border-color: var(--primary); }

/* Voice button */
.knw-voice-btn {
    width: 100%;
    padding: 13px;
    border: 1.5px dashed var(--primary-border);
    border-radius: var(--r-md);
    background: var(--primary-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    transition: all var(--dur-fast) var(--ease-out);
    font-family: inherit;
}
.knw-voice-btn:active { transform: scale(0.98); }
.knw-voice-btn.recording {
    border-color: #EF4444;
    color: #EF4444;
    background: #FEF2F2;
    border-style: solid;
}
.knw-voice-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.knw-autosave {
    text-align: right;
    font-size: 11px;
    color: var(--text-muted);
    min-height: 16px;
    margin-bottom: 8px;
    transition: color var(--dur-fast);
}
.knw-autosave.saving { color: var(--primary); }
.knw-autosave.saved  { color: var(--analyze); }

/* ── AI Mentor Card ────────────────────────────────────────────── */
.knw-card--ai {
    background: linear-gradient(140deg, #FAFAF9 0%, #F7F4F0 100%);
    border: 1px solid rgba(124,58,237,.10);
    position: relative;
}

.knw-card--ai::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #5B21B6 0%, #8B5CF6 50%, #9333EA 100%);
    border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.knw-ai-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.knw-ai-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #7C3AED, #9333EA);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.knw-ai-icon svg { width: 18px; height: 18px; color: white; }

.knw-ai-chip {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--primary);
    background: var(--primary-light);
    padding: 3px 9px;
    border-radius: var(--r-pill);
    border: 1px solid var(--primary-border);
}

.knw-ai-insight {
    font-size: 14px;
    color: var(--text-body);
    line-height: 1.6;
    margin-bottom: 14px;
    padding-left: 13px;
    border-left: 3px solid var(--primary-border);
    font-style: italic;
}

.knw-ai-next {
    background: var(--primary-light);
    border-radius: var(--r-md);
    padding: 13px 14px;
    margin-bottom: 18px;
    border: 1px solid var(--primary-border);
}

.knw-ai-next-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 4px;
}

.knw-ai-next-text {
    font-size: 14px;
    color: var(--text-body);
    font-weight: 600;
    line-height: 1.4;
}

/* ── Growth Snapshot ───────────────────────────────────────────── */
.knw-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.knw-stat-card {
    background: var(--card-bg);
    border-radius: var(--r-lg);
    padding: 16px 14px;
    box-shadow: var(--card-shadow);
}

.knw-stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 11px;
    font-size: 17px;
}

.knw-stat-value {
    font-size: 28px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 2px;
}

.knw-stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.3;
}

.knw-stat-trend {
    font-size: 11px;
    font-weight: 700;
    margin-top: 7px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.knw-stat-trend--up   { color: var(--analyze); }
.knw-stat-trend--warm { color: var(--apply); }
.knw-stat-trend--cool { color: var(--primary); }

/* ── Journal Timeline ──────────────────────────────────────────── */
.knw-timeline {
    position: relative;
    padding-left: 30px;
}

.knw-timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(to bottom, var(--primary-border) 0%, rgba(221,214,254,0) 100%);
    border-radius: 1px;
}

.knw-timeline-entry {
    position: relative;
    margin-bottom: 14px;
    background: var(--card-bg);
    border-radius: var(--r-md);
    padding: 14px 14px;
    box-shadow: var(--card-shadow);
}

.knw-timeline-entry::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2.5px solid var(--primary);
}

.knw-timeline-entry--learn::before  { border-color: var(--learn); }
.knw-timeline-entry--apply::before  { border-color: var(--apply); }
.knw-timeline-entry--reflect::before { border-color: var(--reflect); background: var(--reflect); }
.knw-timeline-entry--skill::before  { border-color: var(--analyze); background: var(--analyze); }

.knw-entry-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.knw-entry-badge--learn   { background: #DBEAFE; color: #1D4ED8; }
.knw-entry-badge--apply   { background: #FEF3C7; color: #92400E; }
.knw-entry-badge--reflect { background: #EDE9FE; color: #5B21B6; }
.knw-entry-badge--skill   { background: #D1FAE5; color: #065F46; }

.knw-entry-text {
    font-size: 14px;
    color: var(--text-body);
    line-height: 1.45;
    font-weight: 500;
}

.knw-entry-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
}

.knw-entry-time { font-size: 11px; color: var(--text-muted); }

.knw-entry-skill {
    font-size: 11px;
    font-weight: 700;
    color: var(--analyze);
    background: #D1FAE5;
    padding: 1px 7px;
    border-radius: var(--r-pill);
}

/* ── Teaching Growth: Section Header ──────────────────────────── */
.knw-tg-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    padding: 0 2px;
}

.knw-tg-header-left { flex: 1; min-width: 0; }

.knw-tg-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 5px;
}

.knw-tg-sparkle { color: var(--primary); flex-shrink: 0; }

.knw-tg-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 4px;
}

.knw-tg-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    font-weight: 400;
}

.knw-tg-journal-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
    padding: 6px 0;
    flex-shrink: 0;
    margin-top: 4px;
    transition: gap var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.knw-tg-journal-link:hover { gap: 8px; opacity: 0.75; }
.knw-tg-journal-link svg { flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); }
.knw-tg-journal-link:hover svg { transform: translateX(2px); }

/* ── Teaching Intelligence Profile Card ────────────────────────── */
.knw-tip-card {
    background: #FFFFFF;
    border-radius: 28px;
    padding: 22px 20px 20px;
    box-shadow: 0 4px 28px rgba(124, 58, 237, 0.09), 0 1px 4px rgba(0,0,0,.04);
    border: 1px solid rgba(124, 58, 237, 0.08);
    position: relative;
    overflow: hidden;
}

.knw-tip-card::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124,58,237,.06) 0%, transparent 65%);
    pointer-events: none;
}

/* Card header row */
.knw-tip-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 18px;
}

.knw-tip-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--primary);
    opacity: 0.65;
    margin-bottom: 3px;
}

.knw-tip-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    line-height: 1.25;
}

.knw-tip-updated {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #059669;
    background: #D1FAE5;
    padding: 4px 9px;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
}
.knw-tip-updated svg { width: 11px; height: 11px; flex-shrink: 0; }

/* Split layout: radar visual + skills */
.knw-tip-layout {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}

.knw-tip-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.knw-tip-radar-svg {
    width: 160px;
    height: 160px;
    display: block;
}

.knw-tip-radar-node {
    animation: tipNodePulse 3s ease-in-out infinite;
}

@keyframes tipNodePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; r: 6; }
}

/* Skill rows */
.knw-tip-skills {}

.knw-tip-skills-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.knw-tip-skill-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 11px;
}
.knw-tip-skill-row:last-child { margin-bottom: 0; }

.knw-tip-skill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 5px;
}

.knw-tip-skill-body { flex: 1; min-width: 0; }

.knw-tip-skill-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    gap: 6px;
}

.knw-tip-skill-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-body);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.knw-tip-skill-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.knw-tip-skill-trend {
    font-size: 11px;
    font-weight: 800;
    color: #059669;
    line-height: 1;
}

.knw-tip-skill-pct {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.knw-tip-skill-track {
    height: 5px;
    background: #F3F0FF;
    border-radius: 100px;
    overflow: hidden;
}

.knw-tip-skill-fill {
    height: 100%;
    border-radius: 100px;
    transition: width 1s cubic-bezier(0.34, 1.1, 0.64, 1);
}

/* AI Insight Chips */
.knw-tip-insights {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.knw-tip-insight {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    flex: 1;
    min-width: 140px;
    cursor: default;
    transition: transform var(--dur-fast) var(--ease-spring),
                box-shadow var(--dur-fast) var(--ease-out);
    outline-offset: 2px;
}
.knw-tip-insight:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.knw-tip-insight:focus-visible {
    outline: 2px solid var(--primary);
}

.knw-tip-insight--star    { background: linear-gradient(135deg, #FEF9C3 0%, #FEF08A 100%); }
.knw-tip-insight--growth  { background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%); }
.knw-tip-insight--focus   { background: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%); }
.knw-tip-insight--streak  { background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%); }
.knw-tip-insight--journal { background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%); }

.knw-tip-insight-icon {
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.knw-tip-insight-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 2px;
}

.knw-tip-insight-desc {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
    font-weight: 400;
}

/* CTA Buttons */
.knw-tip-actions {
    display: flex;
    gap: 10px;
}

.knw-tip-btn-primary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 18px;
    background: linear-gradient(135deg, #7C3AED 0%, #6366F1 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.30);
    transition: transform var(--dur-fast) var(--ease-spring),
                box-shadow var(--dur-fast) var(--ease-out),
                gap var(--dur-fast) var(--ease-out);
}
.knw-tip-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 24px rgba(124, 58, 237, 0.42);
    gap: 9px;
}
.knw-tip-btn-primary:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}
.knw-tip-btn-primary svg { width: 13px; height: 13px; flex-shrink: 0; }

.knw-tip-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 13px 16px;
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid #E5E3F8;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-spring);
}
.knw-tip-btn-ghost:hover {
    background: #F5F3FF;
    border-color: #DDD6FE;
    color: var(--primary);
    transform: translateY(-1px);
}
.knw-tip-btn-ghost:active { transform: scale(0.97); }
.knw-tip-btn-ghost svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Responsive: collapse to single-column on narrow screens ── */
@media (max-width: 500px) {
    .knw-tip-layout {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .knw-tip-radar-svg { width: 150px; height: 150px; }
    .knw-tip-insights { flex-direction: column; }
    .knw-tip-insight { min-width: unset; }
    .knw-tip-actions { flex-direction: column; }
    .knw-tg-section-header { flex-direction: column; gap: 8px; }
    .knw-tg-journal-link { align-self: flex-start; }
}

/* ── Teaching Intelligence Profile (legacy — preserved for compat) */
.knw-card--profile {
    background: linear-gradient(145deg, #1C1917 0%, #292524 100%);
    color: white;
}

.knw-profile-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);
    margin-bottom: 4px;
}

.knw-profile-title {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: white;
    margin-bottom: 20px;
}

.knw-radar-wrap {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
}

.knw-radar-svg-wrap { flex-shrink: 0; width: 130px; height: 130px; }

.knw-radar-legend { flex: 1; padding-top: 6px; }

.knw-radar-item {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
}

.knw-radar-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.knw-radar-name { font-size: 11px; color: rgba(255,255,255,.5); font-weight: 500; flex: 1; line-height: 1.3; }
.knw-radar-val  { font-size: 11px; color: rgba(255,255,255,.8); font-weight: 800; }

.knw-profile-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.knw-profile-chip {
    padding: 6px 12px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-pill);
    font-size: 12px;
    color: rgba(255,255,255,.7);
    font-weight: 500;
}

.knw-profile-actions { display: flex; gap: 10px; }

.knw-btn--profile-solid {
    flex: 1;
    padding: 13px 10px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--r-md);
    color: white;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur-fast) var(--ease-out);
}
.knw-btn--profile-solid:active { background: rgba(255,255,255,.18); }

.knw-btn--profile-ghost {
    flex: 1;
    padding: 13px 10px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--r-md);
    color: rgba(255,255,255,.6);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur-fast) var(--ease-out);
}
.knw-btn--profile-ghost:active { background: rgba(255,255,255,.06); }



/* ── Bottom Navigation ─────────────────────────────────────────── */
.knw-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--app-max-width);
    height: calc(var(--nav-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(0,0,0,.07);
    display: flex;
    align-items: flex-start;
    padding-top: 10px;
    z-index: 200;
}

.knw-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-spring);
    font-family: inherit;
}
.knw-nav-item:active { transform: scale(0.86); }

.knw-nav-icon {
    width: 23px;
    height: 23px;
    color: var(--text-muted);
    transition: color var(--dur-normal) var(--ease-out);
}
.knw-nav-item.active .knw-nav-icon { color: var(--primary); }

.knw-nav-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    transition: color var(--dur-normal) var(--ease-out);
    letter-spacing: 0.02em;
}
.knw-nav-item.active .knw-nav-label { color: var(--primary); }

.knw-nav-pip {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0;
    transition: opacity var(--dur-normal) var(--ease-out);
    margin-top: -1px;
}
.knw-nav-item.active .knw-nav-pip { opacity: 1; }

/* ── Animations ────────────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes recordingPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
    50%       { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}

.knw-recording-pulse { animation: recordingPulse 1.4s ease-in-out infinite; }

.knw-fade-up { animation: fadeUp 0.45s var(--ease-out) both; }

@media (max-width: 430px) {
    .knw-bottom-nav { left: 0; transform: none; }
}

/* ── First Screen (Hero + Chat fill one viewport) ──────────────── */
.knw-first-screen {
    /* header ≈ 80px (incl. safe-top) + nav 74px + content padding 16px */
    min-height: calc(100dvh - 170px - var(--safe-top) - var(--safe-bottom));
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.knw-first-screen > .knw-section {
    margin-bottom: 0;
}

.knw-section--chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

/* ── Chat Window ───────────────────────────────────────────────── */
.knw-chat-window {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Chat header */
.knw-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 11px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background: var(--card-bg);
    flex-shrink: 0;
}

.knw-chat-ai-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--hero-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.knw-chat-ai-avatar svg { width: 18px; height: 18px; color: white; stroke: white; }

.knw-chat-header-info { flex: 1; min-width: 0; }

.knw-chat-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.knw-chat-role {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0;
}

.knw-chat-status {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.knw-chat-status-dot {
    width: 7px;
    height: 7px;
    background: #10B981;
    border-radius: 50%;
    flex-shrink: 0;
    animation: statusPulse 2.5s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* Messages area */
.knw-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    scroll-behavior: smooth;
}

/* Message bubbles */
.knw-chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 82%;
    animation: msgIn 0.22s var(--ease-out) both;
}

.knw-chat-msg--ai   { align-self: flex-start; }
.knw-chat-msg--user { align-self: flex-end; }

@keyframes msgIn {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.knw-chat-bubble {
    padding: 10px 13px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    word-break: break-word;
}

.knw-chat-msg--ai .knw-chat-bubble {
    background: #F3F0F9;
    color: var(--text-body);
    border-bottom-left-radius: 5px;
}

.knw-chat-msg--user .knw-chat-bubble {
    background: var(--primary);
    color: white;
    border-bottom-right-radius: 5px;
}

.knw-chat-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 3px;
    padding: 0 4px;
}
.knw-chat-msg--user .knw-chat-time { text-align: right; }

/* Typing indicator */
.knw-chat-typing {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 14px;
    background: #F3F0F9;
    border-radius: 18px;
    border-bottom-left-radius: 5px;
    width: fit-content;
    align-self: flex-start;
    animation: msgIn 0.22s var(--ease-out) both;
}

.knw-chat-typing-dot {
    width: 6px;
    height: 6px;
    background: var(--text-muted);
    border-radius: 50%;
    animation: typingBounce 1.2s ease-in-out infinite;
}
.knw-chat-typing-dot:nth-child(2) { animation-delay: 0.18s; }
.knw-chat-typing-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0);    opacity: 0.45; }
    30%           { transform: translateY(-5px); opacity: 1;    }
}

/* Quick reply chips */
.knw-chat-quick-replies {
    display: flex;
    gap: 8px;
    padding: 6px 12px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
    transition: opacity var(--dur-fast);
}
.knw-chat-quick-replies:empty { display: none; }
.knw-chat-quick-replies::-webkit-scrollbar { display: none; }

.knw-chat-reply-chip {
    flex-shrink: 0;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--primary-border);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-spring);
    white-space: nowrap;
    font-family: inherit;
    animation: chipIn 0.28s var(--ease-spring) both;
}
.knw-chat-reply-chip:nth-child(2) { animation-delay: 0.06s; }
.knw-chat-reply-chip:nth-child(3) { animation-delay: 0.12s; }
.knw-chat-reply-chip:nth-child(4) { animation-delay: 0.18s; }

@keyframes chipIn {
    from { opacity: 0; transform: translateY(6px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1);      }
}

.knw-chat-reply-chip:active {
    transform: scale(0.93);
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Input bar */
.knw-chat-input-bar {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(0,0,0,.06);
    background: var(--card-bg);
    flex-shrink: 0;
}

.knw-chat-input {
    flex: 1;
    border: 1.5px solid var(--text-disabled);
    border-radius: 22px;
    padding: 9px 14px;
    font-size: 14px;
    color: var(--text-body);
    font-family: inherit;
    resize: none;
    overflow: hidden;
    line-height: 1.45;
    max-height: 90px;
    background: var(--app-bg);
    transition: border-color var(--dur-fast);
}
.knw-chat-input::placeholder { color: var(--text-muted); }
.knw-chat-input:focus { outline: none; border-color: var(--primary); }

.knw-chat-send {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-fast) var(--ease-spring);
    opacity: 0.35;
    pointer-events: none;
}
.knw-chat-send:not([disabled]) {
    opacity: 1;
    pointer-events: auto;
}
.knw-chat-send:active { transform: scale(0.87); }
.knw-chat-send svg { width: 15px; height: 15px; color: white; stroke: white; }

/* ── Chat Attachment Tray ──────────────────────────────────────── */
.knw-chat-attach-tray {
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0 12px;
    flex-shrink: 0;
    background: var(--app-bg);
    border-top: 1px solid transparent;
    transition:
        max-height 0.3s var(--ease-out),
        opacity    0.22s var(--ease-out),
        padding    0.22s var(--ease-out),
        border-color 0.22s var(--ease-out);
}

.knw-chat-attach-tray.open {
    max-height: 96px;
    opacity: 1;
    padding: 12px 12px 10px;
    border-color: rgba(0,0,0,.06);
}

.knw-attach-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    font-family: inherit;
    transition: transform var(--dur-fast) var(--ease-spring);
}
.knw-attach-item:active { transform: scale(0.86); }

.knw-attach-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.knw-attach-icon svg { width: 20px; height: 20px; }

.knw-attach-icon--voice    { background: #EDE9FE; color: #7C3AED; }
.knw-attach-icon--image    { background: #DBEAFE; color: #1D4ED8; }
.knw-attach-icon--video    { background: #D1FAE5; color: #065F46; }
.knw-attach-icon--document { background: #FEF3C7; color: #92400E; }
.knw-attach-icon--location { background: #FEE2E2; color: #B91C1C; }

.knw-attach-item span {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Attach toggle button ("+") */
.knw-chat-attach-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--app-bg);
    border: 1.5px solid var(--text-disabled);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all var(--dur-normal) var(--ease-spring);
}
.knw-chat-attach-btn svg { width: 16px; height: 16px; }
.knw-chat-attach-btn:active { transform: scale(0.88); }
.knw-chat-attach-btn.open {
    background: var(--primary-light);
    border-color: var(--primary-border);
    color: var(--primary);
    transform: rotate(45deg);
}

/* ================================================================
   QUICK REFLECTION — Redesign
   Modern SaaS + wellness-inspired UI
   ================================================================ */

/* ── Card shell ─────────────────────────────────────────────────── */
.knw-refl-card {
    background: #FFFFFF;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
    padding: 24px 20px 28px;
    overflow: hidden;
    position: relative;
}

.knw-refl-card::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167,139,250,.11) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Header ─────────────────────────────────────────────────────── */
.knw-refl-header { margin-bottom: 26px; }

.knw-refl-eyebrow {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    background: linear-gradient(90deg, #7C3AED 0%, #6366F1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 6px;
    display: inline-block;
}

.knw-refl-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin-bottom: 5px;
}

.knw-refl-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    font-weight: 400;
}

/* ── Block spacing ──────────────────────────────────────────────── */
.knw-refl-block { margin-bottom: 22px; }
.knw-refl-block:last-of-type { margin-bottom: 0; }

.knw-refl-block-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

/* ── Emotion cards ──────────────────────────────────────────────── */
.knw-emo-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.knw-emo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 16px 8px;
    background: #FAFAF9;
    border: 2px solid transparent;
    border-radius: 18px;
    cursor: pointer;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: transform 0.22s cubic-bezier(.34,1.56,.64,1),
                box-shadow 0.22s ease,
                border-color 0.18s ease,
                background 0.18s ease;
}

.knw-emo-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(140deg, rgba(167,139,250,.16) 0%, rgba(99,102,241,.08) 100%);
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
}

.knw-emo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(124,58,237,.13);
}

.knw-emo-card.active {
    border-color: #7C3AED;
    background: #F5F3FF;
    box-shadow: 0 0 0 4px rgba(124,58,237,.13), 0 4px 14px rgba(124,58,237,.14);
}
.knw-emo-card.active::after { opacity: 1; }
.knw-emo-card:active { transform: scale(0.93); }

.knw-emo-emoji {
    font-size: 30px;
    line-height: 1;
    display: block;
    transition: transform 0.26s cubic-bezier(.34,1.56,.64,1);
}
.knw-emo-card.active .knw-emo-emoji { transform: scale(1.18); }

.knw-emo-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    transition: color 0.18s ease;
    letter-spacing: 0.01em;
}
.knw-emo-card.active .knw-emo-label { color: var(--primary); }

/* ── Reaction chips ─────────────────────────────────────────────── */
.knw-rxn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.knw-rxn-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 100px;
    border: 1.5px solid rgba(0,0,0,.09);
    background: #FAFAF9;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-body);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.knw-rxn-chip:hover {
    border-color: rgba(124,58,237,.3);
    background: #F5F3FF;
    color: var(--primary);
}

.knw-rxn-chip.active {
    background: linear-gradient(135deg, #7C3AED, #6366F1);
    color: white;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(124,58,237,.28);
}
.knw-rxn-chip:active { transform: scale(0.93); }

/* ── Confidence segmented control ───────────────────────────────── */
.knw-conf-seg {
    position: relative;
    display: flex;
    background: #F5F3FF;
    border-radius: 14px;
    padding: 4px;
}

.knw-conf-opt {
    flex: 1;
    position: relative;
    z-index: 1;
    padding: 10px 8px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.22s ease;
    font-family: inherit;
    text-align: center;
}

.knw-conf-opt--active,
.knw-conf-opt.active { color: var(--primary); }

.knw-conf-slider {
    position: absolute;
    top: 4px;
    bottom: 4px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
    transition: left 0.3s cubic-bezier(.34,1.56,.64,1), width 0.3s ease;
    pointer-events: none;
    will-change: left;
}

/* ── Journal (reflection note) ──────────────────────────────────── */
.knw-refl-note-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 4px;
}

.knw-refl-note-prompt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--primary);
    font-weight: 600;
    font-style: italic;
}
.knw-refl-note-prompt svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: #A78BFA;
}

.knw-journal-wrap {
    background: #F8F7FF;
    border-radius: 16px;
    padding: 14px 14px 10px;
    border: 1.5px solid transparent;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.knw-journal-wrap:focus-within {
    border-color: rgba(124,58,237,.3);
    box-shadow: 0 0 0 4px rgba(124,58,237,.07);
}

.knw-journal-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-body);
    line-height: 1.65;
    resize: none;
    min-height: 90px;
}
.knw-journal-input::placeholder { color: var(--text-muted); font-style: italic; }

.knw-journal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    min-height: 16px;
}

.knw-char-count {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    transition: color 0.18s ease;
}
.knw-char-count.knw-char-count--warn { color: #F59E0B; }
.knw-char-count.knw-char-count--limit { color: #EF4444; }

/* ── Voice card ─────────────────────────────────────────────────── */
.knw-voice-card {
    background: linear-gradient(130deg, #4C1D95 0%, #5B21B6 45%, #7C3AED 100%);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
}

.knw-voice-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    pointer-events: none;
}

.knw-voice-mic {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background: rgba(255,255,255,.18);
    border: 1.5px solid rgba(255,255,255,.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(.34,1.56,.64,1);
    position: relative;
    z-index: 1;
}

.knw-voice-mic::after {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.2);
    animation: voicePulseRing 2.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes voicePulseRing {
    0%, 100% { transform: scale(1);    opacity: 0.7; }
    50%       { transform: scale(1.22); opacity: 0;   }
}

.knw-voice-mic svg { width: 22px; height: 22px; stroke: white; }
.knw-voice-mic:hover { background: rgba(255,255,255,.28); transform: scale(1.07); }
.knw-voice-mic:active { transform: scale(0.92); }

.knw-voice-mic.recording {
    background: rgba(239,68,68,.55);
    border-color: rgba(252,165,165,.6);
    animation: recordingMicPulse 1.4s ease-in-out infinite;
}

@keyframes recordingMicPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); }
    50%       { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
}

.knw-voice-copy { flex: 1; min-width: 0; }

.knw-voice-copy-title {
    font-size: 14px;
    font-weight: 800;
    color: white;
    letter-spacing: -0.01em;
}

.knw-voice-copy-sub {
    font-size: 12px;
    color: rgba(255,255,255,.65);
    margin-top: 2px;
    line-height: 1.4;
}

/* Waveform bars (idle gentle pulse) */
.knw-voice-waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    padding-right: 4px;
}

.knw-voice-waveform span {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,.32);
    animation: waveIdlePulse 1.6s ease-in-out infinite;
}

.knw-voice-waveform span:nth-child(1)  { height: 9px;  animation-delay: 0s;    }
.knw-voice-waveform span:nth-child(2)  { height: 17px; animation-delay: 0.12s; }
.knw-voice-waveform span:nth-child(3)  { height: 11px; animation-delay: 0.22s; }
.knw-voice-waveform span:nth-child(4)  { height: 21px; animation-delay: 0.32s; }
.knw-voice-waveform span:nth-child(5)  { height: 8px;  animation-delay: 0.18s; }
.knw-voice-waveform span:nth-child(6)  { height: 15px; animation-delay: 0.08s; }
.knw-voice-waveform span:nth-child(7)  { height: 10px; animation-delay: 0.28s; }
.knw-voice-waveform span:nth-child(8)  { height: 19px; animation-delay: 0.16s; }
.knw-voice-waveform span:nth-child(9)  { height: 13px; animation-delay: 0.24s; }
.knw-voice-waveform span:nth-child(10) { height: 7px;  animation-delay: 0.36s; }

@keyframes waveIdlePulse {
    0%, 100% { opacity: 0.32; transform: scaleY(1);    }
    50%       { opacity: 0.72; transform: scaleY(1.35); }
}

.knw-voice-card.recording .knw-voice-waveform span {
    background: rgba(255,255,255,.75);
    animation: waveActivePulse 0.5s ease-in-out infinite alternate;
}

@keyframes waveActivePulse {
    from { transform: scaleY(0.6); opacity: 0.5; }
    to   { transform: scaleY(1.4); opacity: 1;   }
}

/* ── Save CTA button ────────────────────────────────────────────── */
.knw-refl-save-btn {
    width: 100%;
    margin-top: 24px;
    padding: 17px 24px;
    background: linear-gradient(135deg, #7C3AED 0%, #6366F1 100%);
    color: white;
    border: none;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: inherit;
    box-shadow: 0 6px 24px rgba(124,58,237,.32), 0 2px 6px rgba(124,58,237,.2);
    transition: transform 0.22s cubic-bezier(.34,1.56,.64,1),
                box-shadow 0.22s ease,
                background 0.28s ease;
    position: relative;
    overflow: hidden;
}

.knw-refl-save-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(255,255,255,.14) 0%, transparent 60%);
    border-radius: inherit;
    pointer-events: none;
}

.knw-refl-save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(124,58,237,.38), 0 2px 6px rgba(124,58,237,.18);
}

.knw-refl-save-btn:active { transform: scale(0.97); }

.knw-refl-save-btn svg { width: 18px; height: 18px; position: relative; }
.knw-refl-save-btn span { position: relative; }

.knw-refl-save-btn.saved {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    box-shadow: 0 6px 24px rgba(5,150,105,.32);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .knw-emo-card, .knw-rxn-chip, .knw-conf-slider,
    .knw-voice-mic::after, .knw-voice-waveform span,
    .knw-refl-save-btn { transition: none; animation: none; }
}