/* Reflection System - Lake Wequaquet */

/* Empty State */
.reflect-empty { text-align: center; padding: 40px 20px; color: #607080; }
.reflect-empty-icon { font-size: 3rem; margin-bottom: 16px; opacity: 0.5; }
.reflect-empty-hint { font-size: 0.75rem; color: #506070; margin-top: 12px; }

/* Container */
.reflect-container { padding: 10px 0; }
.reflect-header { margin-bottom: 20px; }
.reflect-title { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: #506070; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.reflect-themes { display: flex; flex-wrap: wrap; gap: 8px; }
.reflect-theme-tag { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: #8090a0; background: rgba(80,120,160,0.15); padding: 4px 10px; border-radius: 12px; }
.reflect-theme-tag small { opacity: 0.6; }
.reflect-section-title { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: #506070; text-transform: uppercase; letter-spacing: 1px; margin: 20px 0 12px; }

/* Insights */
.reflect-insights { margin-bottom: 20px; }
.reflect-insight { background: rgba(60,80,100,0.15); border-left: 3px solid rgba(100,150,200,0.3); padding: 12px 16px; margin-bottom: 10px; border-radius: 0 6px 6px 0; }
.reflect-insight.combination { border-left-color: rgba(150,120,200,0.5); }
.reflect-insight.prompt { border-left-color: rgba(200,150,100,0.5); background: rgba(100,80,60,0.1); font-style: italic; }
.insight-themes { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: #9080b0; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.insight-text { font-family: 'Crimson Text', serif; font-size: 1rem; color: #b0c0d0; line-height: 1.5; }

/* Actions */
.reflect-actions { display: flex; gap: 10px; margin: 20px 0; }
.reflect-btn { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: #7090b0; background: rgba(60,100,140,0.2); border: 1px solid rgba(100,150,200,0.2); padding: 10px 16px; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
.reflect-btn:hover { background: rgba(60,100,140,0.35); color: #90b0d0; }
.reflect-btn.primary { background: rgba(100,140,180,0.3); color: #a0c0e0; }
.reflect-btn.primary:hover { background: rgba(100,140,180,0.45); }
.reflect-btn.small { padding: 6px 12px; font-size: 0.6rem; }

/* Journal */
.reflect-journal { margin: 20px 0; }
.reflect-textarea { width: 100%; min-height: 100px; background: rgba(30,40,50,0.5); border: 1px solid rgba(100,150,200,0.15); border-radius: 6px; padding: 12px; font-family: 'Crimson Text', serif; font-size: 1rem; color: #b0c0d0; resize: vertical; box-sizing: border-box; }
.reflect-textarea:focus { outline: none; border-color: rgba(100,150,200,0.4); }
.reflect-textarea::placeholder { color: #506070; }

/* History */
.reflect-history { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(100,150,200,0.1); }
.reflect-history-item { background: rgba(40,50,60,0.3); padding: 12px; border-radius: 6px; margin-bottom: 10px; }
.history-date { font-family: 'IBM Plex Mono', monospace; font-size: 0.55rem; color: #506070; margin-bottom: 4px; }
.history-themes { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: #708090; margin-bottom: 6px; }
.history-text { font-family: 'Crimson Text', serif; font-size: 0.9rem; color: #8090a0; line-height: 1.4; }
.history-prompt { font-family: 'Crimson Text', serif; font-size: 0.85rem; color: #8090a0; font-style: italic; margin-bottom: 8px; }
.history-responses { display: flex; flex-wrap: wrap; gap: 4px; }
.history-tag { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: #8090a0; background: rgba(60,70,80,0.4); padding: 4px 10px; border-radius: 12px; }

/* Reflection Session */
.reflection-session { padding: 10px 0; }
.reflect-back { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: #6080a0; background: none; border: 1px solid rgba(100,150,200,0.2); padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-bottom: 20px; }
.reflect-back:hover { background: rgba(100,150,200,0.1); }

/* Reflection Prompt */
.reflection-prompt { background: rgba(50,60,80,0.3); padding: 24px; border-radius: 12px; margin-bottom: 24px; border-left: 3px solid rgba(100,150,200,0.4); }
.reflection-prompt::before { content: 'Consider this...'; display: block; font-size: 0.65rem; color: #607080; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.prompt-text { font-family: 'Crimson Text', Georgia, serif; font-size: 1.25rem; line-height: 1.6; color: #c0d0e8; font-style: italic; }
.prompt-themes { margin-top: 16px; font-size: 0.7rem; color: #607080; }
.prompt-themes::before { content: 'themes: '; }
.reshuffle-btn { background: rgba(100,120,150,0.2); border: 1px solid rgba(100,150,200,0.2); color: #7090b0; padding: 6px 12px; border-radius: 4px; font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; cursor: pointer; margin-top: 16px; transition: all 0.2s; }
.reshuffle-btn:hover { background: rgba(100,150,200,0.3); color: #a0c0e0; }

/* Dimensions */
.reflection-dimensions { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
.dimension-group { background: rgba(40,50,60,0.2); padding: 16px; border-radius: 8px; }
.dimension-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: #6080a0; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.dimension-options { display: flex; flex-wrap: wrap; gap: 8px; }
.response-tag { display: flex; align-items: center; gap: 8px; font-family: 'Crimson Text', serif; font-size: 0.95rem; color: #90a0b0; background: rgba(60,70,80,0.3); border: 1px solid rgba(100,120,140,0.2); padding: 10px 16px; border-radius: 20px; cursor: pointer; transition: all 0.2s; }
.response-tag:hover { background: rgba(80,100,120,0.3); color: #b0c0d0; border-color: rgba(120,150,180,0.3); }
.response-tag.selected { background: rgba(100,140,180,0.3); color: #d0e0f0; border-color: rgba(140,180,220,0.5); box-shadow: 0 0 12px rgba(100,150,200,0.2); }
.tag-icon { font-size: 1.1rem; }
.tag-label { white-space: nowrap; }

/* Submit */
.reflection-submit { text-align: center; padding: 20px 0; }
.submit-hint { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: #506070; margin-top: 10px; }

/* Followup */
.followup-context { background: rgba(80,60,100,0.15); padding: 16px; border-radius: 8px; margin-bottom: 20px; border-left: 3px solid rgba(150,100,200,0.3); }
.followup-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: #9080b0; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.followup-previous { display: flex; flex-wrap: wrap; gap: 6px; }

/* Complete State */
.reflection-complete { text-align: center; padding: 40px 20px; }
.complete-icon { font-size: 3rem; margin-bottom: 16px; }
.complete-title { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; color: #a0b0c0; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 24px; }
.synthesis-container { background: rgba(50,60,80,0.3); padding: 24px 28px; border-radius: 12px; margin-bottom: 24px; border-left: 3px solid rgba(100,150,200,0.4); text-align: left; }
.synthesis-text { font-family: 'Crimson Text', Georgia, serif; font-size: 1.1rem; line-height: 1.7; color: #c0d0e8; }
.reflection-quote { background: rgba(80,70,60,0.2); padding: 20px 24px; border-radius: 10px; margin-bottom: 24px; border-left: 3px solid rgba(180,150,100,0.4); text-align: left; }
.quote-text { font-family: 'Crimson Text', Georgia, serif; font-size: 1rem; line-height: 1.6; color: #d0c8b8; font-style: italic; margin-bottom: 12px; }
.quote-source { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: #a09080; }
.quote-tradition { color: #807060; }
.complete-summary { margin-bottom: 24px; }
.summary-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.55rem; color: #607080; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.summary-responses { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.complete-tag { font-family: 'Crimson Text', serif; font-size: 0.95rem; color: #b0c0d0; background: rgba(80,100,120,0.25); padding: 8px 16px; border-radius: 16px; }
.complete-actions { display: flex; justify-content: center; gap: 12px; }

/* Pattern Insight */
.pattern-insight { background: rgba(100,80,60,0.2); padding: 20px; border-radius: 12px; margin-bottom: 24px; border-left: 3px solid rgba(200,150,100,0.4); text-align: left; }
.insight-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: #a08060; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }

/* Patterns View */
.patterns-view { padding: 10px 0; }
.patterns-title { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; color: #a0b0c0; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.patterns-subtitle { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: #607080; margin-bottom: 24px; }
.pattern-group { margin-bottom: 20px; background: rgba(40,50,60,0.2); padding: 16px; border-radius: 8px; }
.pattern-dimension { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: #8090a0; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.pattern-bars { display: flex; flex-direction: column; gap: 8px; }
.pattern-bar { display: flex; align-items: center; gap: 10px; }
.bar-label { font-family: 'Crimson Text', serif; font-size: 0.85rem; color: #90a0b0; width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { flex: 1; height: 8px; background: rgba(60,70,80,0.3); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, rgba(100,140,180,0.6), rgba(140,180,220,0.4)); border-radius: 4px; transition: width 0.3s; }
.bar-count { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: #607080; width: 24px; text-align: right; }
.patterns-insight { font-family: 'Crimson Text', serif; font-size: 1rem; color: #a0b0c0; font-style: italic; padding: 20px; background: rgba(60,80,100,0.15); border-radius: 8px; margin-top: 20px; }