/* =============================================================================
   CropInsight — Mobile-first UI
   Brand: brown #5C4A1E, accent #8B1A1A, growth #4CAF50, warning #FFC107
   Tabs: Home · My Plants · Add · Profile (bottom nav)
   Inserted into /farmerapp/ Elementor page — wraps content in #ci-app.
   ============================================================================= */
:root{
  --ci-brand:#5C4A1E; --ci-accent:#8B1A1A; --ci-growth:#4CAF50;
  --ci-warn:#FFC107;  --ci-muted:#757575;  --ci-bg:#FAFAF7;
  --ci-card:#FFFFFF;  --ci-text:#222;     --ci-border:#E8E4DA;
}
#ci-app *{box-sizing:border-box}
#ci-app{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ci-text); background:var(--ci-bg);
  max-width:560px; margin:0 auto; min-height:100vh;
  padding-bottom:84px; /* room for bottom nav */
  position:relative;
}

/* ---------- top bar ---------- */
#ci-topbar{
  position:sticky; top:0; z-index:50;
  background:var(--ci-brand); color:#fff;
  padding:.75rem 1rem; display:flex; align-items:center; gap:.6rem;
  border-bottom:1px solid rgba(0,0,0,.1);
}
#ci-topbar .logo{
  width:36px; height:36px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  text-decoration:none; cursor:pointer; transition:transform .15s;
}
#ci-topbar .logo:active{transform:scale(.92)}
#ci-topbar .logo img{width:30px; height:30px; object-fit:cover; border-radius:50%}
#ci-topbar .title{flex:1; font-weight:700; font-size:1.05rem}
#ci-topbar .lang-toggle{
  background:rgba(255,255,255,.2); color:#fff; border:none;
  padding:.3rem .7rem; border-radius:14px; font-size:.78rem; cursor:pointer;
}

/* ---------- views (SPA tabs) ---------- */
.ci-view{display:none; padding:1rem}
.ci-view.active{display:block}

/* ---------- cards ---------- */
.ci-card{
  background:var(--ci-card); border-radius:14px;
  border:1px solid var(--ci-border);
  padding:1rem; margin-bottom:.9rem;
  box-shadow:0 2px 8px rgba(92,74,30,.04);
}
.ci-card h3{margin:0 0 .5rem; font-size:1.02rem; color:var(--ci-brand)}
.ci-card p{margin:.25rem 0; font-size:.92rem; color:var(--ci-text)}
.ci-muted{color:var(--ci-muted); font-size:.85rem}

/* ---------- hero (Home) ---------- */
.ci-hero{
  background:linear-gradient(135deg,#5C4A1E 0%,#8B6914 100%);
  color:#fff; border-radius:14px; padding:1.2rem;
  margin-bottom:1rem;
}
.ci-hero h2{margin:0 0 .3rem; font-size:1.3rem}
.ci-hero p{margin:0; opacity:.95; font-size:.92rem}
.ci-hero .cta{
  display:inline-block; margin-top:.8rem;
  background:#fff; color:var(--ci-brand); padding:.55rem 1rem;
  border-radius:24px; font-weight:700; text-decoration:none; font-size:.9rem;
  border:none; cursor:pointer;
}

/* ---------- trivia rotator ---------- */
.ci-trivia-card{
  background:#FFF8E1; border-left:4px solid var(--ci-warn);
  border-radius:8px; padding:.8rem; margin-bottom:.8rem;
}
.ci-trivia-card .kind-tag{
  display:inline-block; font-size:.7rem; font-weight:700;
  background:var(--ci-warn); color:var(--ci-brand);
  padding:.1rem .5rem; border-radius:10px; margin-bottom:.35rem;
}
.ci-trivia-card a{color:var(--ci-accent); text-decoration:none}

/* ---------- plant grid (My Plants) ---------- */
.ci-plant-list{display:grid; grid-template-columns:1fr; gap:.7rem}
.ci-plant-row{
  background:var(--ci-card); border:1px solid var(--ci-border);
  border-radius:12px; padding:.8rem; display:flex; gap:.7rem; align-items:center;
  cursor:pointer; transition:transform .1s, box-shadow .1s;
}
.ci-plant-row:active{transform:scale(.99); box-shadow:0 1px 4px rgba(0,0,0,.08)}
.ci-plant-emoji{
  width:48px; height:48px; border-radius:50%; background:#F5EFE0;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  flex-shrink:0;
}
.ci-plant-info{flex:1; min-width:0}
.ci-plant-info .name{font-weight:700; font-size:.98rem; color:var(--ci-text)}
.ci-plant-info .meta{font-size:.78rem; color:var(--ci-muted)}
.ci-plant-band{
  font-size:.72rem; font-weight:700; padding:.2rem .5rem;
  border-radius:10px; color:#fff; white-space:nowrap;
}
.ci-band-healthy {background:var(--ci-growth)}
.ci-band-mild    {background:var(--ci-warn); color:#5C4A1E}
.ci-band-moderate{background:#FF9800}
.ci-band-severe  {background:var(--ci-accent)}

/* ---------- empty state ---------- */
.ci-empty{
  text-align:center; padding:2rem 1rem; color:var(--ci-muted);
}
.ci-empty .icon{font-size:3rem; margin-bottom:.5rem}

/* ---------- Add tab (snap + analyse) ---------- */
.ci-add-step{display:none}
.ci-add-step.active{display:block}
.ci-snap-area{
  background:#fff; border:2px dashed var(--ci-border);
  border-radius:14px; padding:1.5rem; text-align:center;
}
.ci-snap-area .icon{font-size:3rem; margin-bottom:.4rem}
.ci-btn{
  display:inline-block; padding:.7rem 1.4rem; border-radius:24px;
  background:var(--ci-brand); color:#fff; border:none; cursor:pointer;
  font-weight:700; font-size:.95rem; text-decoration:none;
  transition:opacity .15s;
}
.ci-btn:hover{opacity:.9}
.ci-btn.secondary{background:#F5EFE0; color:var(--ci-brand)}
.ci-btn.danger{background:var(--ci-accent)}
.ci-btn[disabled]{opacity:.5; cursor:not-allowed}
.ci-btn-row{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem}

.ci-progress{
  width:100%; height:6px; background:#E8E4DA; border-radius:3px;
  margin:.5rem 0; overflow:hidden;
}
.ci-progress .bar{
  height:100%; background:linear-gradient(90deg,var(--ci-growth),var(--ci-brand));
  width:0%; transition:width .25s ease;
}
.ci-status{font-size:.85rem; color:var(--ci-muted); margin:.3rem 0}

/* ---------- result panel ---------- */
.ci-result{padding:0}
.ci-result-images{display:grid; grid-template-columns:1fr 1fr 1fr; gap:.4rem; margin-bottom:.8rem}
.ci-result-images img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; border:1px solid var(--ci-border)}
.ci-result-images .label{font-size:.7rem; color:var(--ci-muted); text-align:center; margin-top:.2rem; font-weight:700}
.ci-ecsi-big{
  display:flex; align-items:baseline; gap:.4rem; margin-bottom:.3rem;
}
.ci-ecsi-big .num{font-size:2.2rem; font-weight:800; line-height:1}
.ci-ecsi-big .unit{color:var(--ci-muted); font-size:.9rem}
.ci-palette-bar{
  height:14px; border-radius:7px; margin:.5rem 0;
  background:linear-gradient(90deg,#A50026,#F46D43,#FEE08B,#A6D96A,#006837);
  position:relative;
}
.ci-palette-bar .marker{
  position:absolute; top:-4px; width:0; height:0;
  border-left:6px solid transparent; border-right:6px solid transparent;
  border-top:8px solid #222; transform:translateX(-50%);
}

/* ---------- Pak Ali chat ---------- */
.ci-chat{
  display:flex; flex-direction:column; gap:.5rem;
  max-height:60vh; overflow-y:auto; padding:.5rem;
  background:#F5EFE0; border-radius:12px;
}
.ci-msg{display:flex; gap:.5rem; align-items:flex-end}
.ci-msg.user{flex-direction:row-reverse}
.ci-msg .avatar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:var(--ci-brand); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.85rem; overflow:hidden;
}
.ci-msg .avatar img{width:100%; height:100%; object-fit:cover}
.ci-msg .bubble{
  max-width:75%; padding:.6rem .85rem; border-radius:14px;
  background:#fff; font-size:.92rem; line-height:1.4;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.ci-msg.user .bubble{background:var(--ci-brand); color:#fff}
.ci-chat-input{
  display:flex; gap:.5rem; margin-top:.6rem;
}
.ci-chat-input input{
  flex:1; padding:.7rem .9rem; border:1px solid var(--ci-border);
  border-radius:22px; font-size:.95rem; outline:none;
}
.ci-chat-input input:focus{border-color:var(--ci-brand)}
.ci-chat-input button{
  padding:.6rem 1rem; border-radius:22px; border:none;
  background:var(--ci-brand); color:#fff; font-weight:700; cursor:pointer;
}

/* ---------- Profile ---------- */
.ci-profile-avatar{
  width:80px; height:80px; border-radius:50%; background:var(--ci-brand);
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-size:2rem; font-weight:700; margin:0 auto .8rem;
}
.ci-profile-stat{
  display:flex; justify-content:space-between; padding:.7rem 0;
  border-bottom:1px solid var(--ci-border); font-size:.95rem;
}
.ci-profile-stat:last-child{border-bottom:none}
.ci-profile-stat .label{color:var(--ci-muted)}
.ci-profile-stat .val{font-weight:700; color:var(--ci-text)}

/* ---------- bottom nav ---------- */
#ci-nav{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:560px;
  background:#fff; border-top:1px solid var(--ci-border);
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:.4rem 0 max(.4rem,env(safe-area-inset-bottom));
  z-index:100; box-shadow:0 -2px 12px rgba(0,0,0,.06);
}
.ci-tab-btn{
  background:none; border:none; padding:.45rem .2rem;
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  font-size:.7rem; color:var(--ci-muted); cursor:pointer;
  transition:color .15s;
}
.ci-tab-btn .ico{font-size:1.35rem; line-height:1}
.ci-tab-btn.active{color:var(--ci-brand); font-weight:700}
.ci-tab-btn.add-tab{
  position:relative;
}
.ci-tab-btn.add-tab .ico{
  background:var(--ci-brand); color:#fff;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-top:-12px; box-shadow:0 3px 8px rgba(92,74,30,.3);
  font-size:1.5rem;
}
.ci-tab-btn.add-tab.active .ico{background:var(--ci-accent)}

/* ---------- modal ---------- */
.ci-modal{
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.55);
  display:none; align-items:flex-end; justify-content:center;
  padding:1rem;
}
.ci-modal.show{display:flex}
.ci-modal-content{
  background:#fff; border-radius:18px 18px 8px 8px;
  width:100%; max-width:500px; padding:1.2rem;
  max-height:90vh; overflow-y:auto;
}
.ci-modal h3{margin:0 0 .8rem; color:var(--ci-brand)}
.ci-modal label{display:block; font-size:.85rem; color:var(--ci-muted); margin:.5rem 0 .2rem}
.ci-modal input, .ci-modal select, .ci-modal textarea{
  width:100%; padding:.6rem .8rem; border:1px solid var(--ci-border);
  border-radius:8px; font-size:.95rem; outline:none;
}
.ci-modal input:focus, .ci-modal select:focus, .ci-modal textarea:focus{
  border-color:var(--ci-brand);
}

/* ---------- chart simple ---------- */
.ci-chart-wrap{position:relative; height:200px; margin:.5rem 0}
.ci-chart-wrap canvas{width:100%; height:100%}

/* ---------- chat mode toggle (Pak Ali tabs in result view) ---------- */
.ci-mode-tabs{
  display:flex; background:#F5EFE0; border-radius:8px; padding:.2rem;
  margin-bottom:.6rem;
}
.ci-mode-tabs button{
  flex:1; padding:.45rem; background:none; border:none;
  font-size:.85rem; font-weight:700; color:var(--ci-muted); cursor:pointer;
  border-radius:6px;
}
.ci-mode-tabs button.active{background:#fff; color:var(--ci-brand);
  box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* small screen tweaks */
@media (max-width:380px){
  #ci-app{font-size:.95rem}
  .ci-card{padding:.8rem}
  .ci-ecsi-big .num{font-size:1.9rem}
}