/* Voice Journal */
/* ============ VOICE JOURNAL (Habitually U) ============ */
.vj-section{ max-width:1080px; margin:0 auto; padding:6px 24px 56px; }
.vj-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:22px; }
.vj-eyebrow{ font-size:0.7rem; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; color:#7d9e77; margin-bottom:8px; }
.vj-title{ font-family:Georgia,serif; font-weight:700; color:#243447; font-size:clamp(1.55rem,3.2vw,2.1rem); line-height:1.12; margin:0; }
.vj-sub{ margin:10px 0 0; font-size:0.98rem; color:#5a6a78; line-height:1.6; max-width:560px; }
.vj-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.vj-btn-primary{ display:inline-flex; align-items:center; gap:8px; background:#2f5d3a; color:#fff; border:none; border-radius:999px; padding:12px 22px; font-size:0.88rem; font-weight:800; cursor:pointer; font-family:inherit; transition:.2s; white-space:nowrap; }
.vj-btn-primary:hover{ background:#274d31; transform:translateY(-1px); }
.vj-btn-soft{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:#2f5d3a; border:1.5px solid #cdddc7; border-radius:999px; padding:11px 20px; font-size:0.86rem; font-weight:800; cursor:pointer; font-family:inherit; transition:.2s; white-space:nowrap; }
.vj-btn-soft:hover{ border-color:#7d9e77; background:#f3f7f1; }

/* toolbar: date filters + search */
.vj-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.vj-filters{ display:flex; flex-wrap:wrap; gap:7px; }
.vj-fbtn{ font-size:0.78rem; font-weight:700; color:#46566a; background:#fff; border:1.5px solid #e3e8ea; border-radius:999px; padding:7px 14px; cursor:pointer; font-family:inherit; transition:.15s; white-space:nowrap; }
.vj-fbtn:hover{ border-color:#7d9e77; }
.vj-fbtn.on{ background:#243447; border-color:#243447; color:#fff; }
.vj-search{ position:relative; flex:1; min-width:230px; max-width:340px; }
.vj-search input{ width:100%; box-sizing:border-box; border:1.5px solid #e3e8ea; border-radius:999px; padding:10px 16px 10px 38px; font-size:0.88rem; font-family:inherit; color:#243447; background:#fff; outline:none; transition:.15s; }
.vj-search input:focus{ border-color:#7d9e77; }
.vj-search::before{ content:"🔍"; position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:0.85rem; opacity:.6; }
.vj-custom{ display:none; gap:10px; align-items:center; margin:0 0 14px; flex-wrap:wrap; }
.vj-custom.show{ display:flex; }
.vj-custom label{ font-size:0.78rem; font-weight:700; color:#5a6a78; }
.vj-custom input{ border:1.5px solid #e3e8ea; border-radius:12px; padding:8px 12px; font-family:inherit; font-size:0.84rem; color:#243447; }

/* category filter */
.vj-cats{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px; }
.vj-cbtn{ display:inline-flex; align-items:center; gap:6px; font-size:0.76rem; font-weight:700; color:#46566a; background:#f3f7f1; border:1px solid #e0e9dc; border-radius:999px; padding:6px 13px; cursor:pointer; font-family:inherit; transition:.15s; }
.vj-cbtn:hover{ border-color:#7d9e77; }
.vj-cbtn.on{ background:#e3efde; border-color:#7d9e77; color:#2f5d3a; }

/* timeline cards */
.vj-timeline{ display:flex; flex-direction:column; gap:14px; }
.vj-log{ position:relative; background:#f4f8f2; border:1px solid #e3ece0; border-radius:18px; padding:20px 22px 18px; box-shadow:0 4px 18px rgba(36,52,71,0.04); transition:transform .16s, box-shadow .16s; border-left:3px solid #7d9e77; }
.vj-log:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(36,52,71,0.08); }
.vj-log-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:9px; }
.vj-when{ font-size:0.76rem; font-weight:700; color:#7a8794; }
.vj-when b{ color:#46566a; }
.vj-priv{ display:inline-flex; align-items:center; gap:5px; font-size:0.7rem; font-weight:800; padding:4px 11px; border-radius:999px; white-space:nowrap; }
.vj-priv.private{ background:#eef2f0; color:#5a6a78; }
.vj-priv.care{ background:#e3efde; color:#2f5d3a; }
.vj-priv.partner{ background:#e2eef0; color:#2f5d50; }
.vj-log-title{ font-family:Georgia,serif; font-weight:700; font-size:1.12rem; color:#243447; line-height:1.3; margin:0 0 7px; cursor:pointer; }
.vj-log-title:hover{ color:#2f5d3a; }
.vj-meta-line{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.vj-cat{ display:inline-flex; align-items:center; gap:6px; font-size:0.75rem; font-weight:800; }
.vj-dur{ display:inline-flex; align-items:center; gap:5px; font-size:0.75rem; font-weight:700; color:#7a8794; }
.vj-transcript{ font-size:0.9rem; color:#5a6a78; line-height:1.55; margin:0 0 12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vj-kws{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.vj-kw{ font-size:0.71rem; font-weight:700; color:#4a7a4e; background:rgba(125,164,126,0.15); border-radius:8px; padding:3px 9px; }
.vj-log-acts{ display:flex; flex-wrap:wrap; gap:8px; }
.vj-act{ display:inline-flex; align-items:center; gap:5px; font-size:0.76rem; font-weight:700; color:#46566a; background:#fff; border:1px solid #e0e9dc; border-radius:10px; padding:7px 12px; cursor:pointer; font-family:inherit; transition:.15s; }
.vj-act:hover{ border-color:#7d9e77; background:#f3f7f1; color:#2f5d3a; }
.vj-act.danger{ color:#9a4a4a; }
.vj-act.danger:hover{ border-color:#c98e8e; background:#faf1f1; color:#8a3a3a; }

/* empty state */
.vj-empty{ text-align:center; background:#f6f9f5; border:1px dashed #cdd9ce; border-radius:20px; padding:50px 26px; }
.vj-empty-ico{ font-size:2.6rem; }
.vj-empty-t{ font-family:Georgia,serif; font-weight:700; color:#243447; font-size:1.2rem; margin:12px 0 6px; }
.vj-empty-p{ font-size:0.94rem; color:#5a6a78; max-width:430px; margin:0 auto 18px; line-height:1.6; }

/* AI insights (premium) */
.vj-ai{ margin-top:24px; background:linear-gradient(135deg,#1e2d3d 0%,#26405a 100%); border-radius:22px; padding:28px 30px; position:relative; overflow:hidden; }
.vj-ai-flag{ display:inline-flex; align-items:center; gap:6px; font-size:0.66rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:#cfe3d4; background:rgba(125,164,126,0.22); border:1px solid rgba(125,164,126,0.4); border-radius:999px; padding:5px 13px; margin-bottom:14px; }
.vj-ai-title{ font-family:Georgia,serif; font-weight:700; color:#fff !important; -webkit-text-fill-color:#fff !important; font-size:1.4rem; margin:0 0 6px; }
.vj-ai-sub{ font-size:0.9rem; color:rgba(255,255,255,0.86) !important; -webkit-text-fill-color:rgba(255,255,255,0.86) !important; margin:0 0 18px; line-height:1.55; }
.vj-ai-line{ display:flex; align-items:flex-start; gap:11px; padding:11px 0; border-top:1px solid rgba(255,255,255,0.1); }
.vj-ai-dot{ width:9px; height:9px; border-radius:50%; background:#7d9e77; margin-top:6px; flex-shrink:0; }
.vj-ai-line span{ font-size:0.92rem; color:#fff !important; -webkit-text-fill-color:#fff !important; line-height:1.55; }
.vj-ai-cta{ margin-top:18px; display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,0.12); border:1.5px solid rgba(255,255,255,0.25); color:#fff; border-radius:999px; padding:10px 20px; font-size:0.84rem; font-weight:800; cursor:pointer; font-family:inherit; }
.vj-ai h1,.vj-ai h2,.vj-ai h3,.vj-ai h4,.vj-ai h5,.vj-ai p,.vj-ai span,.vj-ai li{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
.vj-ai .vj-ai-flag{ color:#cfe3d4 !important; -webkit-text-fill-color:#cfe3d4 !important; }

.vj-ai-cta:hover{ background:rgba(255,255,255,0.2); }

/* detail / edit modal */
.vj-modal{ display:none; position:fixed; inset:0; z-index:4000; background:rgba(20,30,45,0.55); backdrop-filter:blur(3px); align-items:center; justify-content:center; padding:20px; }
.vj-modal.open{ display:flex; }
.vj-box{ background:#fff; border-radius:24px; max-width:560px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:0 30px 80px rgba(20,30,45,0.4); padding:30px 30px 26px; position:relative; }
.vj-x{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%; background:#f0f3f1; border:none; font-size:1rem; color:#5a6a78; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.vj-x:hover{ background:#e6eae8; }
.vj-m-cat{ font-size:0.78rem; font-weight:800; margin-bottom:6px; }
.vj-m-title{ font-family:Georgia,serif; font-weight:700; color:#243447; font-size:1.5rem; line-height:1.2; margin:0 0 6px; padding-right:40px; }
.vj-m-when{ font-size:0.8rem; color:#7a8794; font-weight:600; margin-bottom:18px; }
.vj-player{ display:flex; align-items:center; gap:14px; background:#f4f8f2; border:1px solid #e3ece0; border-radius:16px; padding:14px 16px; margin-bottom:20px; }
.vj-play-btn{ width:46px; height:46px; border-radius:50%; background:#2f5d3a; border:none; color:#fff; font-size:1.05rem; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.vj-play-btn:hover{ background:#274d31; }
.vj-wave{ flex:1; height:8px; background:#e0e9dc; border-radius:50px; overflow:hidden; }
.vj-wave-fill{ height:100%; width:0%; background:linear-gradient(90deg,#7d9e77,#4a7a4e); border-radius:50px; transition:width .25s linear; }
.vj-ptime{ font-size:0.78rem; font-weight:700; color:#5a6a78; white-space:nowrap; }
.vj-m-h{ font-size:0.7rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:#7d9e77; margin:0 0 8px; }
.vj-m-transcript{ font-size:0.96rem; color:#3c4a58; line-height:1.7; margin:0 0 20px; background:#f9fbf8; border:1px solid #eef2ec; border-radius:14px; padding:16px 18px; max-height:200px; overflow-y:auto; }
.vj-m-kws{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
.vj-m-notes{ font-size:0.9rem; color:#5a6a78; line-height:1.6; margin:0 0 22px; }
.vj-sharebox{ background:#f6f9f5; border:1px solid #e8efe6; border-radius:16px; padding:18px 18px 16px; margin-bottom:20px; }
.vj-priv-opts{ display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.vj-priv-opt{ display:flex; align-items:center; gap:10px; padding:10px 13px; border:1.5px solid #e3e8ea; border-radius:12px; cursor:pointer; font-size:0.86rem; font-weight:700; color:#46566a; transition:.15s; }
.vj-priv-opt:hover{ border-color:#7d9e77; }
.vj-priv-opt.sel{ border-color:#4a7a4e; background:#e3efde; color:#2f5d3a; }
.vj-priv-opt .vj-radio{ width:18px; height:18px; border-radius:50%; border:2px solid #b6c3b3; flex-shrink:0; position:relative; }
.vj-priv-opt.sel .vj-radio{ border-color:#4a7a4e; }
.vj-priv-opt.sel .vj-radio::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:#4a7a4e; }
.vj-tog-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; }
.vj-tog-row + .vj-tog-row{ border-top:1px solid #e8efe6; }
.vj-tog-label{ font-size:0.86rem; font-weight:700; color:#243447; }
.vj-tog-label small{ display:block; font-weight:600; color:#7a8794; font-size:0.76rem; margin-top:2px; }
.vj-switch{ width:46px; height:26px; border-radius:50px; background:#d4dcd2; border:none; cursor:pointer; position:relative; flex-shrink:0; transition:.2s; }
.vj-switch::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,0.2); }
.vj-switch.on{ background:#4a7a4e; }
.vj-switch.on::after{ left:23px; }
.vj-m-acts{ display:flex; gap:10px; flex-wrap:wrap; }
.vj-field{ margin-bottom:16px; }
.vj-field label{ display:block; font-size:0.74rem; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; color:#7d9e77; margin-bottom:7px; }
.vj-field input, .vj-field select{ width:100%; box-sizing:border-box; border:1.5px solid #e3e8ea; border-radius:12px; padding:11px 14px; font-family:inherit; font-size:0.92rem; color:#243447; outline:none; }
.vj-field input:focus, .vj-field select:focus{ border-color:#7d9e77; }

/* profile snapshot */
.vj-snap{ background:#f4f8f2; border:1px solid #e3ece0; border-radius:24px; padding:28px 30px; box-shadow:0 4px 22px rgba(36,52,71,0.05); margin-bottom:22px; }
.vj-snap-head{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.vj-snap-ico{ width:52px; height:52px; border-radius:15px; background:#e3efde; display:flex; align-items:center; justify-content:center; font-size:1.6rem; flex-shrink:0; }
.vj-snap-eyebrow{ font-size:0.66rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:#7d9e77; margin-bottom:3px; }
.vj-snap-title{ font-family:Georgia,serif; font-weight:700; color:#243447; font-size:1.35rem; margin:0; line-height:1.15; }
.vj-snap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
.vj-snap-stat{ background:#fff; border:1px solid #eef2ec; border-radius:14px; padding:14px 16px; }
.vj-snap-k{ font-size:0.72rem; font-weight:700; color:#7a8794; margin-bottom:5px; display:flex; align-items:center; gap:6px; }
.vj-snap-v{ font-size:1.02rem; font-weight:800; color:#243447; line-height:1.25; }
.vj-snap-v.big{ font-family:Georgia,serif; font-size:1.7rem; color:#2f5d3a; }
.vj-snap-recent{ background:#fff; border:1px solid #eef2ec; border-radius:14px; padding:14px 16px; margin-bottom:20px; }
.vj-snap-recent-k{ font-size:0.72rem; font-weight:700; color:#7a8794; margin-bottom:6px; }
.vj-snap-recent-t{ font-size:0.94rem; font-weight:700; color:#243447; }
.vj-snap-recent-m{ font-size:0.78rem; color:#7a8794; margin-top:3px; }
.vj-trend{ display:inline-flex; align-items:center; gap:5px; color:#2f5d3a; }

@media(max-width:680px){
  .vj-head{ flex-direction:column; align-items:flex-start; }
  .vj-toolbar{ flex-direction:column; align-items:stretch; }
  .vj-search{ max-width:none; }
  .vj-snap-grid{ grid-template-columns:1fr; }
  .vj-box{ padding:24px 20px; }
}