/* css/features/journal/journal.css — Journal cards, plans, reflection layers, modal */

/* ═══ PLANS & JOURNAL CARDS ═══ */
.plan{background:rgba(30,58,95,.8);border-radius:var(--r3);padding:20px;border:1px solid var(--border);cursor:pointer;transition:all .15s;position:relative}
.plan.sel{border-color:var(--gold)!important;box-shadow:0 0 30px rgba(139,123,184,.2)}
.plan.hot::before{content:"ยอดนิยม";position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold),var(--gold2));color:#fff;font-size:11px;font-weight:700;padding:3px 12px;border-radius:10px}
.orb{position:absolute;border-radius:50%;pointer-events:none;opacity:.08}
.jcard{background:rgba(30,58,95,.7);border-radius:var(--r2);padding:15px;border:1px solid var(--border);cursor:pointer;margin-bottom:9px;transition:border-color .15s}
.jcard:hover{border-color:rgba(139,123,184,.4)}
.jdue{border-color:rgba(45,212,191,.45)!important;background:rgba(45,212,191,.04)}
.empty{text-align:center;padding:40px 20px}
.emj{font-size:46px;margin-bottom:13px;opacity:.4}
.emt{font-size:15px;font-weight:600;color:var(--tx2);margin-bottom:7px}
.emd{font-size:13px;color:var(--tx3);line-height:1.6}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.sb::-webkit-scrollbar{width:6px}
.sb::-webkit-scrollbar-thumb{background:rgba(139,123,184,.3);border-radius:10px}
.sb::-webkit-scrollbar-track{background:transparent}
.chip{padding:9px 6px;border-radius:var(--r1);border:1px solid var(--border);background:rgba(30,58,95,.5);cursor:pointer;text-align:center;font-size:12px;color:var(--tx3);transition:all .15s;line-height:1.4;flex:1}
.chip.sel{border-color:var(--gold);background:rgba(139,123,184,.12);color:var(--gold)}
.fpill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700;white-space:nowrap}
.fdue{background:rgba(45,212,191,.15);color:var(--teal);border:1px solid rgba(45,212,191,.3)}
.fpend{background:var(--bg4);color:var(--tx3);border:1px solid var(--border)}
.fdone{background:rgba(139,123,184,.12);color:var(--grn);border:1px solid rgba(139,123,184,.25)}
.tli{display:flex;gap:13px;align-items:flex-start;padding:11px 0}
.tld{width:10px;height:10px;border-radius:50%;background:var(--gold);flex-shrink:0;margin-top:4px;box-shadow:0 0 8px var(--gold)}
.tld.tp{background:var(--tx3);box-shadow:none}
.tld.td{background:var(--grn)!important;box-shadow:0 0 6px var(--grn)!important}

/* ═══ REFLECTION LAYERS ═══ */
.rl{border-radius:var(--r2);padding:14px 15px;margin-bottom:9px;border:1px solid;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
.rl-i{background:rgba(139,123,184,.06);border-color:rgba(139,123,184,.25)}
.rl-m{background:rgba(59,130,246,.05);border-color:rgba(59,130,246,.2)}
.rl-e{background:rgba(139,123,184,.05);border-color:rgba(139,123,184,.2)}
.rl-q{background:rgba(45,212,191,.05);border-color:rgba(45,212,191,.2)}
.rl-a{background:rgba(139,123,184,.05);border-color:rgba(139,123,184,.2)}
.rl-j{background:rgba(251,113,133,.05);border-color:rgba(251,113,133,.2)}
.rll{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.rlt{font-size:14px;color:var(--tx2);line-height:1.65}
.rli .rll{color:var(--gold)}
.rlm .rll{color:var(--ind2)}
.rle .rll{color:var(--pur2)}
.rlq .rll{color:var(--teal)}
.rla .rll{color:var(--grn)}
.rlj .rll{color:var(--rose)}
.refq{background:linear-gradient(135deg,rgba(139,123,184,.08),rgba(59,130,246,.06));border:1px solid rgba(139,123,184,.2);border-radius:var(--r2);padding:15px;margin-bottom:9px;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
.refql{font-size:10px;color:var(--pur2);font-weight:700;letter-spacing:1.5px;margin-bottom:7px}
.refqt{font-size:14px;color:var(--tx);line-height:1.7;font-style:italic}
.acti{display:flex;gap:9px;align-items:flex-start;padding:9px 12px;background:rgba(139,123,184,.06);border-radius:var(--r1);border-left:2px solid var(--grn);margin-bottom:7px}
.wq{background:rgba(30,58,95,.7);border:1px solid var(--border);border-radius:var(--r2);padding:15px;margin-bottom:11px}
.wql{font-size:12px;color:var(--gold);font-weight:600;margin-bottom:7px}
.theme-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--border)}
.theme-row:last-child{border-bottom:none}
.tph{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--border)}
.tph:last-child{border-bottom:none}
.tphd{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px}
.alert-b{border-radius:var(--r2);padding:13px 15px;display:flex;gap:11px;align-items:center;cursor:pointer;margin-bottom:13px;border:1px solid rgba(45,212,191,.3);background:rgba(45,212,191,.06)}
.lock-ov{background:linear-gradient(180deg,transparent,var(--bg3) 55%);position:absolute;bottom:0;left:0;right:0;padding:22px 20px;display:flex;flex-direction:column;align-items:center;gap:11px}
.emotion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.emo-btn{background:rgba(30,58,95,.6);border:1px solid var(--border);border-radius:var(--r2);padding:18px 10px;cursor:pointer;text-align:center;font-size:28px;transition:all .15s}
.emo-btn:active,.emo-btn.sel{border-color:var(--gold);background:rgba(139,123,184,.12);box-shadow:0 0 16px rgba(139,123,184,.2)}
.stat-row{display:flex;justify-content:space-between;gap:10px;margin-bottom:14px}
.stat-box{flex:1;background:rgba(30,58,95,.7);border:1px solid var(--border);border-radius:var(--r2);padding:14px;text-align:center}
.stat-num{font-size:24px;font-weight:700;color:var(--gold);margin-bottom:3px;text-shadow:0 0 12px rgba(139,123,184,.4)}
.stat-lbl{font-size:11px;color:var(--tx3)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:9999;display:flex;align-items:flex-end;opacity:0;visibility:hidden;transition:all .25s}
.modal-overlay.open{opacity:1;visibility:visible}
.modal-sheet{background:linear-gradient(135deg,#16294D,#1E3A5F);border-radius:var(--r3) var(--r3) 0 0;padding:24px 20px 120px 20px;width:100%;max-width:430px;margin:0 auto;transform:translateY(30px);transition:transform .25s;border:1px solid var(--border);border-bottom:none}
.modal-overlay.open .modal-sheet{transform:translateY(0)}