/* Arabic Tutor Pro – tutor.css */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Amiri:ital,wght@0,400;0,700;1,400&display=swap');

.htp-wrap{
  --htp-p:var(--htp-p);--htp-a:#c9a84c;
  --htp-pl:color-mix(in srgb,var(--htp-p) 12%,white);
  --htp-pm:color-mix(in srgb,var(--htp-p) 25%,white);
  --htp-al:color-mix(in srgb,var(--htp-a) 15%,white);
  --htp-dk:color-mix(in srgb,var(--htp-p) 70%,black);--htp-tx:#1c2c22;--htp-mu:#6b8070;
  --htp-bd:#d4e8db;--htp-bg:#f6fbf8;--htp-wh:#fff;
  --htp-sh:0 8px 40px rgba(26,107,60,.12);
  --htp-h:700px;
  font-family:'Cairo',sans-serif;direction:rtl;
  background:var(--htp-wh);border-radius:18px;
  box-shadow:var(--htp-sh);border:1.5px solid var(--htp-bd);
  display:flex;flex-direction:column;max-width:900px;margin:0 auto;overflow:hidden;
}

/* Header */
.htp-head{
  background:linear-gradient(135deg,var(--htp-p),var(--htp-dk));
  color:#fff;flex-shrink:0;
}
.htp-brand{display:flex;align-items:center;gap:14px;padding:16px 24px 12px;}
.htp-moon{font-size:36px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));}
.htp-brand-name{font-size:20px;font-weight:800;line-height:1.2;}
.htp-brand-sub{font-size:12px;opacity:.75;}
.htp-tabs{display:flex;border-top:1px solid rgba(255,255,255,.12);padding:0 24px;}
.htp-tab{
  background:none;border:none;border-bottom:3px solid transparent;
  color:rgba(255,255,255,.65);padding:11px 20px;font-family:'Cairo',sans-serif;
  font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;
}
.htp-tab:hover{color:#fff;}
.htp-tab-on{color:#fff;border-bottom-color:var(--htp-a);}

/* Panels */
.htp-panel{display:none;flex:1;overflow:hidden;min-height:var(--htp-h);max-height:var(--htp-h);}
.htp-panel-on{display:flex;flex-direction:column;}

/* ── CURRICULUM ──────────────────────────────────────────── */
.htp-cur-wrap{display:flex;flex:1;overflow:hidden;height:100%;}
.htp-sidebar{
  width:200px;flex-shrink:0;background:var(--htp-bg);
  border-left:1px solid var(--htp-bd);
  overflow-y:scroll;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:14px 10px;
}
.htp-sec-btn{
  width:100%;background:none;border:none;text-align:right;
  font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;
  color:var(--htp-tx);padding:9px 10px;border-radius:10px;
  cursor:pointer;display:flex;align-items:center;gap:8px;
  transition:all .15s;margin-bottom:4px;
}
.htp-sec-btn:hover{background:var(--htp-pl);color:var(--htp-p);}
.htp-sec-on{background:var(--htp-p)!important;color:#fff!important;}
.htp-content{
  flex:1;overflow-y:scroll;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:20px;
}
.htp-sec{display:none;}
.htp-sec-show{display:block;animation:atpFade .2s ease;}
.htp-sec-head{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;color:var(--htp-p);margin-bottom:16px;}
.htp-item{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border:1.5px solid var(--htp-bd);border-radius:11px;
  margin-bottom:9px;background:var(--htp-wh);transition:all .2s;
}
.htp-item:hover{border-color:var(--htp-p);box-shadow:0 2px 10px rgba(26,107,60,.08);}
.htp-dot{width:8px;height:8px;background:var(--htp-a);border-radius:50%;flex-shrink:0;}
.htp-item-name{flex:1;font-size:14px;font-weight:600;color:var(--htp-tx);}
.htp-explain-btn{
  background:var(--htp-pl);color:var(--htp-p);border:1.5px solid var(--htp-pm);
  padding:6px 13px;border-radius:8px;font-family:'Cairo',sans-serif;
  font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;
  flex-shrink:0;transition:all .2s;
}
.htp-explain-btn:hover{background:var(--htp-p);color:#fff;}
.htp-explain-box{
  border:2px solid var(--htp-p);border-radius:14px;margin-top:16px;
  overflow:hidden;box-shadow:0 4px 20px rgba(26,107,60,.12);background:var(--htp-wh);
}
.htp-explain-head{
  background:var(--htp-pl);padding:11px 16px;border-bottom:1px solid var(--htp-bd);
  display:flex;align-items:center;justify-content:space-between;
  font-weight:700;color:var(--htp-p);font-size:14px;
}
.htp-explain-close{
  background:none;border:none;color:var(--htp-mu);cursor:pointer;
  font-family:'Cairo',sans-serif;font-size:13px;padding:4px 8px;border-radius:6px;
}
.htp-explain-close:hover{background:var(--htp-bd);}
.htp-explain-body{padding:18px;font-size:14px;line-height:1.9;color:var(--htp-tx);}

/* ── PRACTICE ────────────────────────────────────────────── */
.htp-practice-wrap{
  padding:18px;overflow-y:scroll;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:14px;flex:1;
}
.htp-pills{display:flex;flex-wrap:wrap;gap:8px;}
.htp-pill{
  background:var(--htp-bg);border:1.5px solid var(--htp-bd);border-radius:20px;
  padding:7px 15px;font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;
  color:var(--htp-mu);cursor:pointer;transition:all .15s;
}
.htp-pill:hover{border-color:var(--htp-p);color:var(--htp-p);}
.htp-pill-on{background:var(--htp-p);border-color:var(--htp-p);color:#fff;}
.htp-pill-gold{border-color:var(--htp-a);color:#7a5c10;}
.htp-pill-gold.htp-pill-on{background:var(--htp-a);border-color:var(--htp-a);color:#fff;}
.htp-pill-blue{border-color:#4a6cf7;color:#2a3db0;}
.htp-pill-blue.htp-pill-on{background:#4a6cf7;border-color:#4a6cf7;color:#fff;}

/* Text editor */
.htp-editor{border:1.5px solid var(--htp-bd);border-radius:13px;overflow:hidden;}
.htp-editor-top{
  background:var(--htp-bg);padding:9px 13px;border-bottom:1px solid var(--htp-bd);
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;font-weight:600;color:var(--htp-mu);
}
.htp-clear{background:none;border:none;color:var(--htp-mu);font-family:'Cairo',sans-serif;font-size:12px;cursor:pointer;padding:3px 8px;border-radius:6px;}
.htp-clear:hover{background:var(--htp-bd);}
.htp-textarea{width:100%;padding:13px 15px;border:none;resize:vertical;font-family:'Cairo',sans-serif;font-size:15px;line-height:1.8;color:var(--htp-tx);background:#fff;box-sizing:border-box;direction:rtl;}
.htp-textarea:focus{outline:none;}
.htp-editor-bot{background:var(--htp-bg);padding:9px 13px;border-top:1px solid var(--htp-bd);display:flex;align-items:center;justify-content:space-between;}
.htp-chars{font-size:12px;color:var(--htp-mu);}
.htp-btn-primary{
  background:var(--htp-p);color:#fff;border:none;padding:9px 20px;
  border-radius:9px;font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;
  cursor:pointer;transition:all .2s;box-shadow:0 4px 12px rgba(26,107,60,.25);
}
.htp-btn-primary:hover{background:var(--htp-dk);transform:translateY(-1px);}
.htp-btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.htp-result{border:1.5px solid var(--htp-bd);border-radius:13px;overflow:hidden;}
.htp-result-head{background:var(--htp-pl);padding:9px 15px;border-bottom:1px solid var(--htp-bd);display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--htp-p);}
.htp-copy{background:var(--htp-p);color:#fff;border:none;padding:4px 11px;border-radius:6px;font-family:'Cairo',sans-serif;font-size:12px;font-weight:600;cursor:pointer;}
.htp-result-body{padding:15px;font-size:14px;line-height:1.9;color:var(--htp-tx);}
.htp-lbl{font-size:12px;font-weight:700;color:var(--htp-mu);text-transform:uppercase;letter-spacing:.4px;margin:0 0 8px;}
.htp-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.htp-qbtn{background:var(--htp-bg);border:1.5px solid var(--htp-bd);border-radius:10px;padding:10px 13px;font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;color:var(--htp-tx);cursor:pointer;transition:all .15s;text-align:right;}
.htp-qbtn:hover{background:var(--htp-al);border-color:var(--htp-a);color:#7a5c10;}

/* MCQ Settings */
.htp-mcq-settings{display:flex;flex-wrap:wrap;gap:12px;}
.htp-field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:130px;}
.htp-field label{font-size:12px;font-weight:700;color:var(--htp-mu);}
.htp-mcq-topic,.htp-mcq-count,.htp-mcq-diff,.htp-fc-topic{
  border:1.5px solid var(--htp-bd);border-radius:9px;padding:8px 10px;
  font-family:'Cairo',sans-serif;font-size:13px;color:var(--htp-tx);
  background:var(--htp-wh);direction:rtl;cursor:pointer;
}
.htp-mcq-topic:focus,.htp-mcq-count:focus,.htp-mcq-diff:focus,.htp-fc-topic:focus{outline:none;border-color:var(--htp-p);}
.htp-mcq-settings,.htp-fc-mode>*:not(.htp-fc-zone){margin-bottom:10px;}
.htp-mcq-progress,.htp-fc-progress{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--htp-mu);font-weight:600;padding:8px 0;}

/* MCQ Cards */
.htp-mcq-card{background:var(--htp-wh);border:2px solid var(--htp-bd);border-radius:13px;padding:18px;margin-top:12px;box-shadow:0 2px 10px rgba(26,107,60,.06);}
.htp-mcq-q{font-size:15px;font-weight:700;color:var(--htp-tx);margin-bottom:13px;line-height:1.7;}
.htp-mcq-opts{display:flex;flex-direction:column;gap:8px;}
.htp-mcq-opt{width:100%;text-align:right;background:var(--htp-bg);border:1.5px solid var(--htp-bd);border-radius:10px;padding:11px 15px;font-family:'Cairo',sans-serif;font-size:14px;font-weight:600;color:var(--htp-tx);cursor:pointer;transition:all .15s;}
.htp-mcq-opt:hover:not(:disabled){background:var(--htp-pl);border-color:var(--htp-p);color:var(--htp-p);}
.htp-mcq-opt:disabled{cursor:default;}
.htp-opt-right{background:#d4f4e0!important;border-color:#2a9e58!important;color:#1a5e34!important;}
.htp-opt-wrong{background:#fde8e8!important;border-color:#d93025!important;color:#8c1d1d!important;}
.htp-mcq-fb{margin-top:10px;padding:10px 14px;border-radius:9px;font-size:14px;font-weight:700;}
.htp-fb-ok{background:#d4f4e0;color:#1a5e34;}
.htp-fb-no{background:#fde8e8;color:#8c1d1d;}
.htp-mcq-exp{margin-top:10px;padding:12px 15px;background:var(--htp-al);border-right:4px solid var(--htp-a);border-radius:0 10px 10px 0;font-size:13px;line-height:1.8;}

/* Flashcards */
.htp-fc-zone{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:12px;}
.htp-fc{height:160px;perspective:900px;cursor:pointer;}
.htp-fc-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.htp-fc-flipped .htp-fc-in{transform:rotateY(180deg);}
.htp-fc-face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;text-align:center;font-family:'Cairo',sans-serif;}
.htp-fc-front{background:linear-gradient(135deg,var(--htp-p),var(--htp-dk));color:#fff;}
.htp-fc-back{background:var(--htp-al);border:2px solid var(--htp-a);color:var(--htp-tx);transform:rotateY(180deg);}
.htp-fc-text{font-size:14px;font-weight:700;line-height:1.6;}
.htp-fc-hint{font-size:11px;opacity:.65;margin-top:8px;}

/* ── CHAT ────────────────────────────────────────────────── */
.htp-chat-wrap{display:flex;flex-direction:column;flex:1;height:100%;overflow:hidden;}
.htp-msgs{
  flex:1;
  overflow-y:scroll;          /* KEY: scroll inside, not page */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:18px;display:flex;flex-direction:column;gap:14px;
}
.htp-msg{display:flex;gap:10px;align-items:flex-start;}
.htp-bot{flex-direction:row;}
.htp-user{flex-direction:row-reverse;}
.htp-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;background:var(--htp-pl);box-shadow:0 2px 8px rgba(26,107,60,.15);}
.htp-user .htp-avatar{background:var(--htp-al);}
.htp-msg-inner{display:flex;flex-direction:column;max-width:78%;}
.htp-bot .htp-msg-inner{align-items:flex-start;}
.htp-user .htp-msg-inner{align-items:flex-end;}
.htp-bubble{padding:11px 15px;border-radius:16px;font-size:14px;line-height:1.8;color:var(--htp-tx);box-shadow:0 2px 8px rgba(0,0,0,.05);}
.htp-bot .htp-bubble{background:var(--htp-bg);border:1px solid var(--htp-bd);border-top-right-radius:4px;}
.htp-user .htp-bubble{background:var(--htp-p);color:#fff;border-top-left-radius:4px;}
.htp-bubble p{margin:0 0 7px;} .htp-bubble p:last-child{margin-bottom:0;}
.htp-bubble ul{margin:7px 0;padding-right:18px;} .htp-bubble li{margin-bottom:4px;}
.htp-dots{display:flex;gap:4px;align-items:center;padding:4px 0;}
.htp-dots span{width:7px;height:7px;background:var(--htp-p);border-radius:50%;animation:atpBounce .9s infinite;}
.htp-dots span:nth-child(2){animation-delay:.15s;}
.htp-dots span:nth-child(3){animation-delay:.3s;}
.htp-suggests{padding:9px 15px 7px;display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--htp-bd);background:var(--htp-bg);flex-shrink:0;}
.htp-sug{background:var(--htp-wh);border:1.5px solid var(--htp-bd);border-radius:20px;padding:5px 11px;font-family:'Cairo',sans-serif;font-size:12px;font-weight:600;color:var(--htp-tx);cursor:pointer;transition:all .15s;}
.htp-sug:hover{background:var(--htp-p);border-color:var(--htp-p);color:#fff;}
.htp-input-row{display:flex;align-items:flex-end;gap:10px;padding:11px 15px;border-top:1px solid var(--htp-bd);background:var(--htp-wh);flex-shrink:0;}
.htp-input{flex:1;border:1.5px solid var(--htp-bd);border-radius:12px;padding:9px 13px;font-family:'Cairo',sans-serif;font-size:14px;resize:none;color:var(--htp-tx);direction:rtl;transition:border-color .2s,box-shadow .2s;max-height:120px;background:var(--htp-wh);}
.htp-input:focus{outline:none;border-color:var(--htp-p);box-shadow:0 0 0 3px rgba(26,107,60,.1);}
.htp-send{width:42px;height:42px;background:var(--htp-p);border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;box-shadow:0 3px 12px rgba(26,107,60,.3);}
.htp-send:hover{background:var(--htp-dk);transform:scale(1.05);}
.htp-send svg{width:18px;height:18px;}
.htp-send:disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* TTS */
.htp-tts-bar{padding:5px 2px 2px;display:flex;}
.htp-explain-body .htp-tts-bar,.htp-result-body .htp-tts-bar{padding:9px 18px 13px;border-top:1px solid var(--htp-bd);margin-top:4px;}
.htp-tts-btn{background:transparent;border:1.5px solid var(--htp-bd);border-radius:20px;padding:5px 15px;font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;color:var(--htp-p);cursor:pointer;transition:all .2s;}
.htp-tts-btn:hover{background:var(--htp-p);border-color:var(--htp-p);color:#fff;}
.htp-tts-active{background:#b91c1c!important;border-color:#b91c1c!important;color:#fff!important;}

/* Spinner */
.htp-spin{width:22px;height:22px;border:3px solid var(--htp-bd);border-top-color:var(--htp-p);border-radius:50%;animation:atpSpin .7s linear infinite;flex-shrink:0;}
.htp-explain-loading,.htp-result-loading{display:flex;align-items:center;gap:11px;padding:18px;font-size:14px;color:var(--htp-mu);font-weight:600;}

/* AI content */
.htp-ai h1,.htp-ai h2,.htp-ai h3{color:var(--htp-p);margin:14px 0 7px;}
.htp-ai h3{font-size:15px;}
.htp-ai p{margin:0 0 9px;}
.htp-ai ul,.htp-ai ol{padding-right:18px;margin:7px 0;}
.htp-ai li{margin-bottom:5px;}
.htp-ai strong{color:var(--htp-p);}
.htp-ai em{font-family:'Amiri',serif;font-size:16px;color:#5a3a10;}
.htp-ai blockquote{border-right:4px solid var(--htp-a);padding:8px 15px;margin:9px 0;background:var(--htp-al);border-radius:0 8px 8px 0;font-family:'Amiri',serif;font-size:16px;}

.htp-err{color:#c00;}
.htp-hide{display:none;}

/* Scrollbars */
.htp-msgs::-webkit-scrollbar,.htp-content::-webkit-scrollbar,.htp-sidebar::-webkit-scrollbar,.htp-practice-wrap::-webkit-scrollbar{width:5px;}
.htp-msgs::-webkit-scrollbar-track,.htp-content::-webkit-scrollbar-track,.htp-practice-wrap::-webkit-scrollbar-track{background:transparent;}
.htp-msgs::-webkit-scrollbar-thumb,.htp-content::-webkit-scrollbar-thumb,.htp-practice-wrap::-webkit-scrollbar-thumb{background:var(--htp-bd);border-radius:3px;}

@keyframes atpFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes atpSpin{to{transform:rotate(360deg)}}
@keyframes atpBounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}

@media(max-width:640px){
  .htp-sidebar{width:150px;} .htp-brand-name{font-size:17px;}
  .htp-tab{padding:10px 12px;font-size:13px;} .htp-quick-grid{grid-template-columns:1fr;}
  .htp-panel{min-height:500px;max-height:500px;} .htp-fc-zone{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
  .htp-cur-wrap{flex-direction:column;}
  .htp-sidebar{width:100%;height:auto;border-left:none;border-bottom:1px solid var(--htp-bd);display:flex;flex-wrap:wrap;gap:5px;padding:9px;}
  .htp-sec-btn{width:auto;} .htp-fc-zone{grid-template-columns:1fr;}
}