/* Zidan app — calm, autism-friendly design: big targets, predictable layout, soft colors */
:root{
  --bg:#fdf6ec; --card:#ffffff; --ink:#2b3a4a; --muted:#7a8a9a;
  --accent:#2f9e8f; --accent-soft:#dff3ef; --sun:#ffb703; --sun-soft:#fff3d6;
  --border:#eadfc8; --good:#37b24d;
  --shadow:0 6px 20px rgba(80,60,20,.10);
  --radius:24px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink); min-height:100vh; min-height:100dvh;
}
.app{max-width:640px; margin:0 auto; min-height:100vh; min-height:100dvh; position:relative;
  padding-bottom:calc(92px + env(safe-area-inset-bottom));}
.view{padding:1.2rem 1.2rem 1.6rem; animation:fadeUp .22s ease;}
@keyframes fadeUp{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
[hidden]{display:none !important;}
.page-title{font-size:1.7rem; margin:.2rem 0 .3rem; text-align:center;}
.page-sub{text-align:center; color:var(--muted); margin:0 0 1.1rem; font-size:1.05rem;}

/* hero */
.hero{text-align:center; padding:1.6rem 1rem 1.2rem;}
.hero-photo{
  width:120px; height:120px; margin:0 auto .9rem; border-radius:50%;
  background:linear-gradient(135deg,var(--sun-soft),#ffe9b8);
  border:4px solid var(--sun);
  display:flex; align-items:center; justify-content:center; font-size:4rem;
  overflow:hidden;
}
.hero-photo img{width:100%; height:100%; object-fit:cover;}
.hero h1{font-size:2rem; margin:0 0 .2rem;}
.hero-sub{color:var(--muted); font-size:1.1rem; margin:0;}

/* home nav cards */
.home-grid{display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:.6rem;}
.home-card{
  background:var(--card); border:3px solid var(--border); border-radius:var(--radius);
  padding:1.4rem .8rem; cursor:pointer; font-family:inherit; color:var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  min-height:132px; justify-content:center; box-shadow:var(--shadow);
}
.home-card:active{transform:scale(.96); border-color:var(--accent);}
.hc-emoji{font-size:2.6rem;}
.hc-label{font-size:1.15rem; font-weight:700;}

/* generic card grids */
.card-grid{display:grid; grid-template-columns:1fr 1fr; gap:.9rem;}
.person-card{
  background:var(--card); border:3px solid var(--border); border-radius:var(--radius);
  padding:1.1rem .7rem; text-align:center; box-shadow:var(--shadow); cursor:pointer;
  font-family:inherit; color:var(--ink); min-height:150px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem;
}
.person-card:active{transform:scale(.96);}
.person-emoji{font-size:3rem; width:84px; height:84px; border-radius:50%;
  background:var(--accent-soft); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.person-emoji img{width:100%; height:100%; object-fit:cover;}
.person-label{font-size:1.1rem; font-weight:700;}
.empty-note{text-align:center; color:var(--muted); background:var(--card);
  border:3px dashed var(--border); border-radius:var(--radius); padding:1.4rem; margin-top:.4rem;}

/* schedule */
.stars{text-align:center; font-size:1.6rem; min-height:2.2rem; margin-bottom:.4rem; letter-spacing:.15em;}
.schedule-list{display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.1rem;}
.sched-row{
  display:flex; align-items:center; gap:1rem; width:100%; text-align:start;
  background:var(--card); border:3px solid var(--border); border-radius:var(--radius);
  padding:1rem 1.1rem; cursor:pointer; font-family:inherit; color:var(--ink); box-shadow:var(--shadow);
}
.sched-row:active{transform:scale(.98);}
.sched-check{
  flex:0 0 52px; width:52px; height:52px; border-radius:50%;
  border:3px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; background:var(--bg);
}
.sched-row.done .sched-check{background:var(--good); border-color:var(--good); color:#fff;}
.sched-emoji{font-size:2.2rem;}
.sched-text{flex:1;}
.sched-time{font-size:.9rem; color:var(--muted); font-weight:700;}
.sched-label{font-size:1.2rem; font-weight:700;}
.sched-row.done .sched-label{color:var(--muted); text-decoration:line-through;}
.btn-big{
  width:100%; border:none; border-radius:20px; padding:1.1rem; font-size:1.2rem; font-weight:800;
  background:var(--accent); color:#fff; cursor:pointer; font-family:inherit; box-shadow:var(--shadow);
}
.btn-big:active{transform:scale(.98);}

/* feelings */
.feelings-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:.9rem;}
.feeling-card{
  background:var(--card); border:3px solid var(--border); border-radius:var(--radius);
  padding:1.2rem .5rem; font-size:2.8rem; cursor:pointer; font-family:inherit; box-shadow:var(--shadow);
}
.feeling-card:active{transform:scale(.94); border-color:var(--accent);}
.feeling-says{
  margin-top:1.2rem; text-align:center; background:var(--sun-soft);
  border:3px solid var(--sun); border-radius:var(--radius); padding:1.4rem;
  font-size:1.5rem; animation:fadeUp .25s ease;
}
.feeling-says span{font-size:3.4rem;}

/* bubbles */
.score-line{text-align:center; font-size:1.2rem; margin-bottom:.8rem;}
.bubble-area{
  position:relative; height:380px; background:linear-gradient(180deg,#e8f7ff,#fdf6ec);
  border:3px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:1rem;
}
.bubble{
  position:absolute; border-radius:50%; cursor:pointer; border:none;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.9), rgba(255,255,255,.15) 45%, var(--bc, #7cc7ff) 78%);
  box-shadow:inset -4px -6px 10px rgba(0,0,0,.08);
  animation:floatUp linear forwards;
}
@keyframes floatUp{from{transform:translateY(0);} to{transform:translateY(-460px);}}
.bubble.pop{animation:pop .18s ease forwards;}
@keyframes pop{to{transform:scale(1.8); opacity:0;}}

/* tab bar */
.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:640px; z-index:50; display:flex;
  background:var(--card); border-top:3px solid var(--border);
  padding:.6rem .4rem calc(.6rem + env(safe-area-inset-bottom));
}
.tab{
  flex:1; background:none; border:none; color:var(--muted); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  font-size:.78rem; font-weight:700; padding:.45rem .2rem; font-family:inherit;
  border-radius:14px; min-height:60px; justify-content:center;
}
.tab-emoji{font-size:1.5rem;}
.tab.active{color:var(--ink); background:var(--accent-soft);}

@media (min-width:640px){
  .card-grid{grid-template-columns:1fr 1fr 1fr;}
  .feelings-grid{grid-template-columns:repeat(6,1fr);}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

/* ---------- Noor buddy ---------- */
.noor-fab{
  position:fixed; bottom:calc(108px + env(safe-area-inset-bottom)); right:16px; z-index:55;
  width:70px; height:70px; border-radius:50%; border:4px solid #fff;
  background:linear-gradient(135deg,#7cc7ff,#2f9e8f); font-size:2rem; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  animation:fabPulse 2.6s ease-in-out infinite;
}
@keyframes fabPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
.noor{position:fixed; inset:0; z-index:70; background:var(--bg);}
.noor-inner{max-width:640px; width:100%; margin:0 auto; display:flex; flex-direction:column;
  height:100vh; height:100dvh; padding-top:env(safe-area-inset-top);}
.noor-head{display:flex; align-items:center; gap:.7rem; padding:.7rem 1rem;
  background:var(--card); border-bottom:3px solid var(--border);}
.noor-avatar{font-size:2.1rem;}
.noor-title{flex:1; display:flex; flex-direction:column; font-size:1.15rem;}
.noor-title small{color:var(--muted); font-size:.85rem;}
.noor-hbtn{width:48px; height:48px; border-radius:50%; border:3px solid var(--border);
  background:var(--bg); font-size:1.25rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;}
.noor-hbtn.off{opacity:.45;}
.noor-messages{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:1rem; display:flex; flex-direction:column; gap:.7rem;}
.msg{display:flex; gap:.5rem; align-items:flex-end;}
.msg.from-me{justify-content:flex-end;}
.msg-emoji{font-size:1.5rem;}
.msg-bubble{max-width:80%; padding:.8rem 1.05rem; border-radius:20px;
  font-size:1.12rem; line-height:1.5;}
.msg.from-noor .msg-bubble{background:var(--card); border:2px solid var(--border); border-bottom-left-radius:6px;}
.msg.from-me .msg-bubble{background:var(--accent); color:#fff; border-bottom-right-radius:6px;}
.noor-chips{display:flex; gap:.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:.55rem 1rem; scrollbar-width:none;}
.noor-chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto; background:var(--sun-soft); border:2px solid var(--sun); border-radius:999px;
  padding:.65rem 1.05rem; font-size:.98rem; font-weight:700; cursor:pointer;
  font-family:inherit; color:var(--ink);}
.chip:active{transform:scale(.95);}
.noor-input-row{display:flex; gap:.5rem; align-items:center;
  padding:.7rem 1rem calc(.8rem + env(safe-area-inset-bottom));
  background:var(--card); border-top:3px solid var(--border);}
#noor-input{flex:1; min-width:0; border:3px solid var(--border); border-radius:999px;
  padding:.85rem 1.1rem; font-size:1.05rem; font-family:inherit; outline:none; background:#fff;}
#noor-input:focus{border-color:var(--accent);}
.noor-round-btn{width:54px; height:54px; flex:0 0 54px; border-radius:50%; border:none;
  font-size:1.45rem; cursor:pointer; background:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;}
.noor-round-btn:active{transform:scale(.92);}
.noor-send{background:var(--accent); color:#fff;}
#noor-mic.listening{background:#ff6b6b; animation:fabPulse 1s infinite;}
.breath-wrap{text-align:center; padding:.4rem;}
.breath-circle{width:150px; height:150px; margin:.3rem auto; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #cdeaff, #7cc7ff 72%);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.05rem; color:#1c4a6e;
  transition:transform 4s ease-in-out;}
.breath-circle.in{transform:scale(1.45);}
.breath-circle.hold{transform:scale(1.45);}
.breath-circle.out{transform:scale(1);}
.breath-stop{margin-top:.7rem; font-size:1rem; padding:.8rem 1.4rem; width:auto;}