/* NLP Therapist — New Design (v6.0) — Core + Home + Tools + Chat */
:root {
  --bg-from:#f5f5f7; --bg-to:#e8e8ed;
  --surface:rgba(255,255,255,.8); --surface-solid:#fff;
  --card-glass:rgba(255,255,255,.7); --card-solid:#fff;
  --primary:#7c4dff; --primary-from:#A78BFA; --primary-to:#C084FC;
  --text:#1a1a2e; --text-secondary:#6b7280; --dim:#9ca3af;
  --accent:#10b981; --danger:#ff5252;
  --border:rgba(0,0,0,.08); --border-card:rgba(0,0,0,.06);
  --glow:none; --glow-sm:none; --glow-lg:none;
  --card-breath-from:#D1F4E0; --card-breath-to:#B8F1CC; --card-breath-border:#A8E7BC;
  --card-progress-from:#E8D5F2; --card-progress-to:#DCC7E8; --card-progress-border:#E8C5F4;
  --card-main-from:#E8D5F2; --card-main-via:#F4E4F7; --card-main-to:#E0E7FF;
  --card-featured-from:#E8D5F2; --card-featured-via:#FCCFEE; --card-featured-to:#E0E7FF;
  --icon-bg:rgba(255,255,255,.7); --icon-accent:#059669; --icon-primary:#7c3aed;
  --bubble-user-from:#A78BFA; --bubble-user-to:#C084FC;
  --bubble-ai-bg:#fff; --bubble-ai-border:rgba(0,0,0,.08);
  --mood-sel-from:#e9d5ff; --mood-sel-to:#d8b4fe; --mood-ring:#a78bfa;
  --mood-bg:#fff; --mood-border:rgba(0,0,0,.06);
  --radius:16px; --radius-lg:24px; --radius-xl:32px; --radius-btn:20px;
  --tab-active-bg:rgba(124,77,255,.12); --tab-active-color:#7c4dff;
  --quote-from:#FAE8F7; --quote-to:#F3E8FA; --quote-border:transparent;
  --tip-from:#ffe4e6; --tip-to:#fecdd3; --tip-border:#fda4af; --tip-icon:#db2777;
  --benefit-bg:rgba(255,255,255,.6);
  --frame-color:#fff;
}
[data-theme="dark"] {
  --bg-from:#0a0a1f; --bg-to:#12121f;
  --surface:rgba(26,26,62,.6); --surface-solid:#0f0f2a;
  --card-glass:rgba(26,26,62,.6); --card-solid:#1a1a3e;
  --primary:#818cf8; --primary-from:#4f46e5; --primary-to:#7c3aed;
  --text:#f0f0ff; --text-secondary:#9ca3af; --dim:#6b7280;
  --accent:#34d399; --danger:#ff5252;
  --border:rgba(99,102,241,.3); --border-card:rgba(99,102,241,.4);
  --glow:0 0 25px rgba(99,102,241,.5); --glow-sm:0 0 20px rgba(99,102,241,.3); --glow-lg:0 0 50px rgba(99,102,241,.4);
  --card-breath-from:#1a2a3e; --card-breath-to:#1a2e3e; --card-breath-border:rgba(16,185,129,.4);
  --card-progress-from:#1a1a3e; --card-progress-to:#1e1e42; --card-progress-border:rgba(99,102,241,.4);
  --card-main-from:#1a1a3e; --card-main-via:#1e1e42; --card-main-to:#1a1a3e;
  --card-featured-from:#1a1a3e; --card-featured-via:#1e1e42; --card-featured-to:#1a1a3e;
  --icon-bg:rgba(99,102,241,.2); --icon-accent:#34d399; --icon-primary:#818cf8;
  --bubble-user-from:#4f46e5; --bubble-user-to:#7c3aed;
  --bubble-ai-bg:rgba(26,26,62,.6); --bubble-ai-border:rgba(99,102,241,.3);
  --mood-sel-from:#4f46e5; --mood-sel-to:#7c3aed; --mood-ring:#818cf8;
  --mood-bg:rgba(26,26,62,.6); --mood-border:rgba(99,102,241,.3);
  --tab-active-bg:rgba(99,102,241,.15); --tab-active-color:#818cf8;
  --quote-from:rgba(26,26,62,.6); --quote-to:rgba(30,30,66,.6); --quote-border:rgba(99,102,241,.3);
  --tip-from:rgba(62,26,42,.6); --tip-to:rgba(62,26,58,.6); --tip-border:rgba(236,72,153,.4); --tip-icon:#f472b6;
  --benefit-bg:rgba(99,102,241,.1);
  --frame-color:#000;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background-color:var(--frame-color);background-image:linear-gradient(to bottom,var(--bg-from),var(--bg-to));color:var(--text);
  overflow:hidden;transition:background .3s,color .3s}

.ico{width:1em;height:1em;display:inline-block;vertical-align:middle}
.ico-lg{width:1.4em;height:1.4em}
.ico-hero{width:60px;height:60px}
.screen{display:none;flex-direction:column;height:100dvh;position:relative;overflow:hidden;overscroll-behavior:none}
.screen.active{display:flex}

/* ── Tab system (Figma floating pill) ── */
.tab-bar-wrap{padding:8px 24px 0;flex-shrink:0;
  padding-bottom:calc(env(safe-area-inset-bottom, 0px) / 3);background:transparent}
.tab-bar{display:flex;border-radius:40px;padding:6px 8px;
  background:#1a1a2e;justify-content:center;gap:4px}
[data-theme="dark"] .tab-bar{background:#0f0f2a;
  box-shadow:0 0 20px rgba(99,102,241,.4);border:1px solid rgba(99,102,241,.25)}
.tab-btn{width:56px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:rgba(255,255,255,.45);cursor:pointer;
  padding:0;transition:all .25s;border-radius:22px;position:relative}
.tab-btn .ico{width:22px;height:22px}
.tab-btn span{display:none}
.tab-btn.active{color:#1a1a2e;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}
[data-theme="dark"] .tab-btn.active{color:#0f0f2a;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.3)}
.tab-content{display:none;flex:1;overflow-y:auto;padding:20px 16px;-webkit-overflow-scrolling:touch}
.tab-content.active{display:flex;flex-direction:column}
#mainApp{flex-direction:column;height:100dvh}

/* ── App frame (top + bottom borders) ── */
.app-frame-top{height:calc(env(safe-area-inset-top, 4px));min-height:4px;background:var(--frame-color);flex-shrink:0}
.app-frame-bottom{height:1px;background:var(--frame-color);flex-shrink:0}

/* ── Home Tab ── */
.home-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.home-hdr-left{flex:1}
.home-greeting{font-size:24px;font-weight:700;margin-bottom:2px}
.home-date{font-size:13px;color:var(--text-secondary)}
.home-stats{display:flex;gap:16px;font-size:13px;color:var(--text-secondary);margin-top:4px}
.btn-theme-toggle{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);
  background:var(--card-glass);backdrop-filter:blur(10px);cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--text);
  transition:all .2s;box-shadow:var(--glow)}
.btn-theme-toggle:active{transform:scale(.92)}

/* Mood */
.mood-q{color:var(--text-secondary);font-size:14px;margin-bottom:10px;text-align:center}
.mood-row{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
.mood-btn{width:52px;height:52px;font-size:26px;border-radius:16px;border:1px solid var(--mood-border);
  background:var(--mood-bg);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.mood-btn:active{transform:scale(.9)}
.mood-btn.sel{background:linear-gradient(135deg,var(--mood-sel-from),var(--mood-sel-to));
  box-shadow:0 0 20px rgba(99,102,241,.5);transform:scale(1.1);border-color:var(--mood-ring)}
.mood-done{text-align:center;font-size:15px;color:var(--text-secondary);margin-bottom:16px}

/* Main feature card */
.main-card{position:relative;overflow:hidden;border-radius:var(--radius-xl);
  background:linear-gradient(135deg,var(--card-main-from),var(--card-main-via),var(--card-main-to));
  border:1px solid var(--border-card);padding:32px 24px;margin-bottom:20px;
  box-shadow:0 4px 20px rgba(0,0,0,.06);text-align:center}
[data-theme="dark"] .main-card{box-shadow:var(--glow-lg)}
.main-card .blur-orb{position:absolute;width:160px;height:160px;border-radius:50%;filter:blur(60px);opacity:.3}
.main-card .blur-orb.top-r{top:-40px;right:-40px;background:#c084fc}
[data-theme="dark"] .main-card .blur-orb.top-r{background:#6366f1}
.main-card .blur-orb.bot-l{bottom:-40px;left:-40px;background:#93c5fd}
[data-theme="dark"] .main-card .blur-orb.bot-l{background:#7c3aed}
.main-card-inner{position:relative;z-index:1}
.avatar-circle{width:80px;height:80px;border-radius:50%;overflow:hidden;margin:0 auto 14px;
  box-shadow:0 4px 20px rgba(0,0,0,.12)}
[data-theme="dark"] .avatar-circle{box-shadow:0 0 40px rgba(99,102,241,.8)}
.avatar-circle img{width:100%;height:100%;object-fit:cover}
.main-card h2{font-size:20px;font-weight:600;margin-bottom:6px}
.main-card .sub{color:var(--text-secondary);font-size:14px;line-height:1.5;margin-bottom:20px;max-width:300px;margin-left:auto;margin-right:auto}
.btn-go{width:100%;background:linear-gradient(135deg,var(--primary-from),var(--primary-to));
  color:#fff;border:none;border-radius:var(--radius-btn);padding:15px 24px;font-size:17px;
  font-weight:600;cursor:pointer;transition:all .15s;display:flex;align-items:center;
  justify-content:center;gap:8px;box-shadow:0 4px 20px rgba(124,77,255,.25)}
[data-theme="dark"] .btn-go{box-shadow:0 0 25px rgba(99,102,241,.6)}
.btn-go:active{transform:scale(.96)}
.btn-sm{padding:10px 24px;font-size:14px}

/* Feature grid (breathing + progress) */
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.feature-card{border-radius:var(--radius-lg);padding:20px 16px;cursor:pointer;
  transition:all .15s;text-align:left;border:1px solid transparent;background:red}
.feature-card:active{transform:scale(.97)}
.feature-card.breath{background:linear-gradient(135deg,var(--card-breath-from),var(--card-breath-to));border-color:var(--card-breath-border)}
[data-theme="dark"] .feature-card.breath{box-shadow:0 0 25px rgba(16,185,129,.3)}
.feature-card.progress{background:linear-gradient(135deg,var(--card-progress-from),var(--card-progress-to));border-color:var(--card-progress-border)}
[data-theme="dark"] .feature-card.progress{box-shadow:0 0 25px rgba(99,102,241,.3)}
.feature-card .fc-icon{width:48px;height:48px;border-radius:16px;background:var(--icon-bg);
  backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.feature-card .fc-icon .ico{width:24px;height:24px}
.feature-card.breath .fc-icon{color:var(--icon-accent)}
.feature-card.progress .fc-icon{color:var(--icon-primary)}
.feature-card h3{font-size:14px;font-weight:600;margin-bottom:2px}
.feature-card p{font-size:12px;color:var(--text-secondary)}

/* Quote */
.quote-card{border-radius:var(--radius-lg);padding:20px;
  background:linear-gradient(135deg,var(--quote-from),var(--quote-to));
  border:1px solid var(--quote-border);box-shadow:0 2px 8px rgba(0,0,0,.04);margin-bottom:20px}
[data-theme="dark"] .quote-card{box-shadow:var(--glow-sm)}
.quote-card .qt{font-size:14px;color:var(--text-secondary);font-style:italic;text-align:center;line-height:1.6}
.quote-card .qa{font-size:12px;color:var(--dim);text-align:center;margin-top:6px}

/* ── Tools Tab ── */
#toolsTab h2{font-size:24px;font-weight:700;margin-bottom:4px}
.tools-subtitle{font-size:13px;color:var(--text-secondary);margin-bottom:20px}

/* Featured tool card */
.featured-tool{position:relative;overflow:hidden;border-radius:var(--radius-xl);
  background:linear-gradient(135deg,var(--card-featured-from),var(--card-featured-via),var(--card-featured-to));
  border:1px solid var(--border-card);padding:24px;margin-bottom:20px;box-shadow:0 4px 20px rgba(0,0,0,.06)}
[data-theme="dark"] .featured-tool{box-shadow:var(--glow-lg)}
.featured-tool .blur-orb{position:absolute;width:160px;height:160px;border-radius:50%;filter:blur(60px);opacity:.3}
.featured-tool .blur-orb.top-r{top:-40px;right:-40px;background:#c084fc}
[data-theme="dark"] .featured-tool .blur-orb.top-r{background:#6366f1}
.featured-tool .blur-orb.bot-l{bottom:-40px;left:-40px;background:#93c5fd}
[data-theme="dark"] .featured-tool .blur-orb.bot-l{background:#7c3aed}
.featured-tool-inner{position:relative;z-index:1}
.featured-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--icon-primary);margin-bottom:10px}
.featured-badge .ico{width:16px;height:16px}
.featured-tool h3{font-size:20px;font-weight:600;margin-bottom:6px}
.featured-tool p{font-size:14px;color:var(--text-secondary);line-height:1.5;margin-bottom:16px}
.btn-glass{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;
  border-radius:var(--radius-btn);background:var(--icon-bg);backdrop-filter:blur(8px);
  border:none;cursor:pointer;font-size:15px;font-weight:500;color:var(--text);
  transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.06)}
[data-theme="dark"] .btn-glass{box-shadow:0 0 20px rgba(99,102,241,.4)}
.btn-glass:active{transform:scale(.96)}
.btn-glass .ico{width:20px;height:20px;color:var(--icon-primary)}

/* Practice cards */
.practice-card{border-radius:var(--radius-lg);padding:20px;margin-bottom:12px;
  border:1px solid transparent;cursor:pointer;transition:all .15s;
  box-shadow:0 2px 8px rgba(0,0,0,.05)}
[data-theme="dark"] .practice-card{background:var(--card-glass);border-color:var(--border);box-shadow:var(--glow-sm)}
.practice-card:active{transform:scale(.98)}
.practice-card.green{background:linear-gradient(135deg,#D1F4E0,#B8F1CC);border-color:#A8E7BC}
.practice-card.purple{background:linear-gradient(135deg,#E8D5F2,#FCCFEE);border-color:#E8C5F4}
.practice-card.blue{background:linear-gradient(135deg,#E0E7FF,#C7D2FE);border-color:#C7D2FE}
.practice-card.mint{background:linear-gradient(135deg,#A7F3D0,#6EE7B7);border-color:#6EE7B7}
.pc-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.pc-icon{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.pc-icon .ico{width:24px;height:24px}
.pc-icon.green-bg{background:#E0F9EC;color:#059669}
[data-theme="dark"] .pc-icon{background:var(--icon-bg);color:var(--icon-primary)}
.pc-icon.purple-bg{background:#F4E4F7;color:#7c3aed}
.pc-icon.blue-bg{background:#E0E7FF;color:#4f46e5}
.pc-icon.mint-bg{background:#D1FAE5;color:#059669}
.pc-meta{flex:1}
.pc-meta h4{font-size:16px;font-weight:600;margin-bottom:2px}
.pc-meta-info{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-secondary)}
.pc-meta-info .dot{display:inline-block}
.pc-desc{font-size:13px;color:var(--text-secondary);margin-bottom:10px;line-height:1.4}
.pc-benefits{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.pc-chip{padding:4px 12px;border-radius:20px;font-size:12px;color:var(--text-secondary);
  background:var(--benefit-bg);backdrop-filter:blur(4px);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.btn-practice{width:100%;padding:12px;border-radius:var(--radius-btn);border:none;cursor:pointer;
  font-size:14px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--icon-bg);backdrop-filter:blur(8px);color:var(--text);transition:all .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.04)}
[data-theme="dark"] .btn-practice{box-shadow:0 0 15px rgba(99,102,241,.2)}
.btn-practice:active{transform:scale(.97)}
.btn-practice .ico{width:16px;height:16px}

/* Tip card */
.tip-card{border-radius:var(--radius-lg);padding:20px;margin-top:8px;
  background:linear-gradient(135deg,var(--tip-from),var(--tip-to));
  border:1px solid var(--tip-border);display:flex;gap:12px;align-items:flex-start;
  box-shadow:0 2px 8px rgba(0,0,0,.05)}
[data-theme="dark"] .tip-card{box-shadow:0 0 25px rgba(236,72,153,.3)}
.tip-card .tip-ico{font-size:24px;color:var(--tip-icon);flex-shrink:0;margin-top:2px}
.tip-card h4{font-size:14px;font-weight:600;margin-bottom:4px}
.tip-card p{font-size:13px;color:var(--text-secondary);line-height:1.5}

/* ── Chat Tab ── */
.chat-tab{padding:0 !important;overflow:hidden !important}
.chat-hdr{display:flex;align-items:center;gap:12px;padding:16px;flex-shrink:0;
  background:var(--surface);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);box-shadow:0 1px 4px rgba(0,0,0,.04)}
[data-theme="dark"] .chat-hdr{box-shadow:var(--glow-sm)}
.chat-hdr-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.1)}
[data-theme="dark"] .chat-hdr-avatar{box-shadow:0 0 30px rgba(99,102,241,.7)}
.chat-hdr-avatar img{width:100%;height:100%;object-fit:cover}
.chat-hdr-info h2{font-size:18px;font-weight:700;margin:0}
.chat-hdr-info p{font-size:11px;color:var(--text-secondary);margin:0}
.ai-chat-msgs{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.ai-chat-input{display:flex;gap:8px;padding:10px 14px;background:var(--surface);
  backdrop-filter:blur(10px);border-top:1px solid var(--border);align-items:flex-end;flex-shrink:0}
.ai-chat-input textarea{flex:1;background:var(--card-glass);color:var(--text);border:1px solid var(--border);
  border-radius:16px;padding:10px 14px;font-size:15px;resize:none;outline:none;font-family:inherit}
.ai-chat-input textarea:focus{border-color:var(--primary)}
.ai-welcome{text-align:center;padding:40px 20px;margin:auto}
.ai-welcome-ico{font-size:48px;margin-bottom:12px}
.ai-welcome p{font-size:15px;line-height:1.5;margin:6px 0}
.ai-welcome .dim{color:var(--dim);font-size:13px;margin-top:8px}
.chat-limit-info{text-align:center;font-size:12px;color:var(--dim);padding:4px 16px;flex-shrink:0}
.chat-limit-info.limit-reached{color:var(--danger);font-weight:600}

/* Chat messages */
.msg{max-width:80%;padding:12px 16px;border-radius:20px;font-size:14px;line-height:1.5;
  animation:msgIn .25s ease-out}
.msg.bot{background:var(--bubble-ai-bg);border:1px solid var(--bubble-ai-border);
  align-self:flex-start;border-bottom-left-radius:6px}
.msg.user{background:linear-gradient(135deg,var(--bubble-user-from),var(--bubble-user-to));
  color:#fff;align-self:flex-end;border-bottom-right-radius:6px}
[data-theme="dark"] .msg.user{box-shadow:0 0 20px rgba(99,102,241,.5)}

/* Icon + send button */
.icb{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary-from),var(--primary-to));color:#fff;transition:all .2s}
.icb:active{transform:scale(.9)}
.icb .ico{width:18px;height:18px}
.icb.rec{background:var(--danger);animation:pulse 1s infinite}

/* ── Animations ── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,82,82,.4)}70%{box-shadow:0 0 0 10px transparent}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wiggle{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.diag-wiggle{animation:wiggle .6s ease-in-out 0.3s 3}