/* 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');

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

/* Header */
.atp-head{
  background:linear-gradient(135deg,var(--atp-p),var(--atp-dk));
  color:#fff;flex-shrink:0;
}
.atp-brand{display:flex;align-items:center;gap:14px;padding:16px 24px 12px;}
.atp-moon{font-size:36px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));}
.atp-brand-name{font-size:20px;font-weight:800;line-height:1.2;}
.atp-brand-sub{font-size:12px;opacity:.75;}
.atp-tabs{display:flex;border-top:1px solid rgba(255,255,255,.12);padding:0 24px;}
.atp-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;
}
.atp-tab:hover{color:#fff;}
.atp-tab-on{color:#fff;border-bottom-color:var(--atp-a);}

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

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

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

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

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

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

/* Flashcards */
.atp-fc-zone{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:12px;}
.atp-fc{height:160px;perspective:900px;cursor:pointer;}
.atp-fc-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.atp-fc-flipped .atp-fc-in{transform:rotateY(180deg);}
.atp-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;}
.atp-fc-front{background:linear-gradient(135deg,var(--atp-p),var(--atp-dk));color:#fff;}
.atp-fc-back{background:var(--atp-al);border:2px solid var(--atp-a);color:var(--atp-tx);transform:rotateY(180deg);}
.atp-fc-text{font-size:14px;font-weight:700;line-height:1.6;}
.atp-fc-hint{font-size:11px;opacity:.65;margin-top:8px;}

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

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

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

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

.atp-err{color:#c00;}
.atp-hide{display:none!important;}

/* Scrollbars */
.atp-msgs::-webkit-scrollbar,.atp-content::-webkit-scrollbar,.atp-sidebar::-webkit-scrollbar,.atp-practice-wrap::-webkit-scrollbar{width:5px;}
.atp-msgs::-webkit-scrollbar-track,.atp-content::-webkit-scrollbar-track,.atp-practice-wrap::-webkit-scrollbar-track{background:transparent;}
.atp-msgs::-webkit-scrollbar-thumb,.atp-content::-webkit-scrollbar-thumb,.atp-practice-wrap::-webkit-scrollbar-thumb{background:var(--atp-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){
  .atp-sidebar{width:150px;} .atp-brand-name{font-size:17px;}
  .atp-tab{padding:10px 12px;font-size:13px;} .atp-quick-grid{grid-template-columns:1fr;}
  .atp-panel{min-height:500px;max-height:500px;} .atp-fc-zone{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
  .atp-cur-wrap{flex-direction:column;}
  .atp-sidebar{width:100%;height:auto;border-left:none;border-bottom:1px solid var(--atp-bd);display:flex;flex-wrap:wrap;gap:5px;padding:9px;}
  .atp-sec-btn{width:auto;} .atp-fc-zone{grid-template-columns:1fr;}
}