/* ======================================================
   مساعد الدراسات الاجتماعية — النمط الكامل
   ====================================================== */

/* ── Base ── */
.ssa-wrapper {
    max-width: 860px;
    margin: 24px auto;
    font-family: 'Cairo','Tajawal','Segoe UI',Tahoma,Arial,sans-serif;
    direction: rtl;
    color: #1c2a35;
    border-radius: 18px;
    box-shadow: 0 6px 40px rgba(0,0,0,.12);
    overflow: hidden;
    border: 1px solid #c8dff0;
}

/* ── Header ── */
.ssa-header {
    background: linear-gradient(135deg,#1a5276 0%,#2980b9 60%,#1abc9c 100%);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 18px;
    color:#fff;
}
.ssa-header-icon { font-size:46px;line-height:1; }
.ssa-header-text h2 { margin:0 0 4px;font-size:22px;font-weight:800;color:#fff!important; }
.ssa-header-text p  { margin:0;font-size:13px;opacity:.85;color:#d6eff9!important; }

/* ── Tabs ── */
.ssa-tabs {
    display:flex;
    background:#f0f7ff;
    border-bottom:2px solid #cde4f5;
}
.ssa-tab {
    flex:1;
    padding:13px 10px;
    border:none;
    background:transparent;
    font-size:14px;
    font-weight:700;
    color:#5d7e9a;
    cursor:pointer;
    font-family:inherit;
    transition:all .2s;
    border-bottom:3px solid transparent;
    margin-bottom:-2px;
}
.ssa-tab:hover { color:#1a5276;background:#e0f0fb; }
.ssa-tab.active { color:#1a5276;background:#fff;border-bottom-color:#2980b9; }

/* ── Tab Content ── */
.ssa-tab-content { background:#fff; }

/* ── Unit Bar ── */
.ssa-unit-bar {
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:14px 20px 10px;
    background:#f7fbff;
    border-bottom:1px solid #ddeef9;
    flex-wrap:wrap;
}
.ssa-unit-label { font-weight:700;color:#1a5276;font-size:13px;white-space:nowrap;padding-top:5px; }
.ssa-unit-chips { display:flex;flex-wrap:wrap;gap:7px; }
.ssa-chip {
    padding:5px 12px;
    border:2px solid #c5dff0;
    background:#fff;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    color:#2c6e99;
    cursor:pointer;
    font-family:inherit;
    transition:all .2s;
    white-space:nowrap;
}
.ssa-chip:hover   { border-color:#2980b9;background:#eaf4fb; }
.ssa-chip.active  { background:#1a5276;border-color:#1a5276;color:#fff; }

/* ── CHAT BOX ── */
.ssa-chat-box {
    min-height:280px;
    max-height:420px;
    overflow-y:auto;
    padding:18px 16px;
    display:flex;
    flex-direction:column;
    gap:14px;
    background:#f9fdff;
}

/* ── Bubbles ── */
.ssa-bubble {
    display:flex;
    gap:10px;
    align-items:flex-start;
    max-width:88%;
    animation:ssaFadeIn .25s ease;
}
@keyframes ssaFadeIn{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.ssa-bubble-bot  { align-self:flex-start; }
.ssa-bubble-user { align-self:flex-end;flex-direction:row-reverse; }

.ssa-avatar { font-size:22px;flex-shrink:0;padding-top:2px; }

.ssa-bubble-text {
    padding:12px 16px;
    border-radius:16px;
    font-size:15px;
    line-height:1.75;
    direction:rtl;
    text-align:right;
}
.ssa-bubble-bot  .ssa-bubble-text { background:#fff;border:1.5px solid #cde4f5;border-top-right-radius:4px; }
.ssa-bubble-user .ssa-bubble-text { background:linear-gradient(135deg,#2980b9,#1a5276);color:#fff;border-top-left-radius:4px; }
.ssa-bubble.ssa-thinking .ssa-bubble-text { background:#f0f7ff;color:#7aabcf; }

/* animated thinking dots */
.ssa-dots span {
    display:inline-block;width:7px;height:7px;border-radius:50%;
    background:#7aabcf;margin:0 2px;
    animation:ssaBounce 1.1s infinite;
}
.ssa-dots span:nth-child(2){ animation-delay:.2s; }
.ssa-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes ssaBounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }

/* ── CHAT INPUT ── */
.ssa-chat-input-row {
    display:flex;
    gap:10px;
    padding:12px 16px;
    background:#fff;
    border-top:1px solid #ddeef9;
    align-items:flex-end;
}
.ssa-chat-textarea {
    flex:1;
    padding:11px 14px;
    border:2px solid #c5dff0;
    border-radius:12px;
    font-size:15px;
    font-family:'Cairo','Tajawal','Segoe UI',Tahoma,Arial,sans-serif!important;
    resize:none;
    /* ── ARABIC FIX ── */
    direction:rtl!important;
    text-align:right!important;
    unicode-bidi:plaintext;
    line-height:1.6;
    color:#1c2a35;
    transition:border-color .2s;
}
.ssa-chat-textarea:focus { outline:none;border-color:#2980b9;box-shadow:0 0 0 3px rgba(41,128,185,.1); }
.ssa-chat-btns { display:flex;flex-direction:column;gap:6px; }
.ssa-btn-send {
    padding:10px 18px;
    background:linear-gradient(135deg,#2980b9,#1abc9c);
    color:#fff;border:none;border-radius:10px;
    font-size:14px;font-weight:700;cursor:pointer;
    font-family:inherit;transition:all .2s;white-space:nowrap;
}
.ssa-btn-send:hover { transform:translateY(-1px);box-shadow:0 4px 12px rgba(26,188,156,.3); }
.ssa-btn-send:disabled { opacity:.55;cursor:not-allowed;transform:none; }
.ssa-btn-mic {
    padding:10px 12px;background:#f0f7ff;border:2px solid #c5dff0;
    border-radius:10px;cursor:pointer;font-size:16px;
}
.ssa-btn-mic:hover { background:#ddeef9; }
.ssa-hint { text-align:center;font-size:12px;color:#8da9be;margin:4px 0 8px;padding:0 16px; }
.ssa-hint kbd { background:#edf4fb;border:1px solid #bbd4e8;border-radius:4px;padding:1px 5px;font-size:11px; }

/* ── QUIZ OPTIONS ── */
.ssa-quiz-options {
    display:flex;align-items:center;gap:14px;
    padding:14px 20px;background:#f7fbff;
    border-bottom:1px solid #ddeef9;flex-wrap:wrap;
}
.ssa-select {
    padding:7px 12px;border:2px solid #c5dff0;border-radius:8px;
    font-size:14px;font-family:inherit;color:#1a5276;background:#fff;cursor:pointer;
}

/* ── Progress Bar ── */
.ssa-quiz-progress-bar {
    height:8px;background:#e8f4fb;
    border-radius:0;overflow:hidden;
}
.ssa-quiz-progress-fill {
    height:100%;background:linear-gradient(90deg,#2980b9,#1abc9c);
    transition:width .4s ease;border-radius:0 4px 4px 0;
}
.ssa-quiz-progress-label {
    text-align:center;font-size:13px;font-weight:700;
    color:#5d7e9a;padding:6px;background:#f7fbff;
}

/* ── Question Card ── */
.ssa-question-card {
    padding:22px 24px;
    transition:opacity .3s;
}
.ssa-q-number {
    font-size:12px;font-weight:700;color:#7aabcf;
    text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;
}
.ssa-q-text {
    font-size:17px;font-weight:700;color:#1a3a5c;line-height:1.7;
    margin-bottom:18px;
}

/* ── MCQ Options ── */
.ssa-q-options { display:flex;flex-direction:column;gap:10px;margin-bottom:18px; }
.ssa-option-btn {
    display:flex;align-items:center;gap:10px;
    padding:12px 16px;
    border:2px solid #c5dff0;background:#f8fbff;
    border-radius:12px;cursor:pointer;font-size:15px;
    font-family:inherit;color:#1c2a35;text-align:right;
    direction:rtl;transition:all .2s;
}
.ssa-option-btn:hover:not(:disabled) { border-color:#2980b9;background:#eaf4fb; }
.ssa-option-btn.selected  { border-color:#2980b9;background:#dbeeff;font-weight:700; }
.ssa-option-btn.correct   { border-color:#1abc9c!important;background:#e8faf5!important;color:#0e7a5a;font-weight:700; }
.ssa-option-btn.wrong     { border-color:#e74c3c!important;background:#fdf2f0!important;color:#c0392b; }
.ssa-option-btn:disabled  { cursor:default; }
.ssa-opt-letter { font-weight:800;color:#2980b9;min-width:22px; }

/* True/False */
.ssa-tf-btn { justify-content:center;font-size:16px;font-weight:700;padding:14px; }

/* Written input */
.ssa-written-input {
    width:100%;padding:12px 14px;
    border:2px solid #c5dff0;border-radius:12px;
    font-size:15px;font-family:'Cairo','Tajawal','Segoe UI',Tahoma,Arial,sans-serif!important;
    direction:rtl!important;text-align:right!important;unicode-bidi:plaintext;
    resize:vertical;line-height:1.6;margin-bottom:14px;box-sizing:border-box;
}
.ssa-written-input:focus { outline:none;border-color:#2980b9; }

/* Confirm button */
.ssa-btn-confirm {
    padding:12px 28px;
    background:linear-gradient(135deg,#2980b9,#1a5276);
    color:#fff;border:none;border-radius:12px;
    font-size:15px;font-weight:700;cursor:pointer;
    font-family:inherit;transition:all .2s;
}
.ssa-btn-confirm:hover:not(:disabled) { transform:translateY(-2px);box-shadow:0 4px 14px rgba(26,82,118,.3); }
.ssa-btn-confirm:disabled { opacity:.45;cursor:not-allowed; }

/* ── Feedback Card ── */
.ssa-feedback-card {
    margin:0 20px 20px;padding:20px;
    border-radius:14px;background:#f7fbff;
    border:2px solid #cde4f5;
    animation:ssaFadeIn .3s ease;
}
.ssa-feedback-verdict { font-size:19px;font-weight:800;margin-bottom:12px; }
.ssa-verdict-correct { color:#0e7a5a; }
.ssa-verdict-wrong   { color:#c0392b; }
.ssa-verdict-neutral { color:#2980b9; }
.ssa-verdict-loading { color:#7aabcf;font-size:15px; }
.ssa-feedback-explanation { font-size:15px;line-height:1.8;color:#2c3e50;margin-bottom:14px; }

/* Buttons inside feedback */
.ssa-btn-voice-inline {
    margin-left:8px;padding:7px 14px;
    background:#eaf4fb;border:1.5px solid #aad4f0;
    border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;
    font-family:inherit;color:#1a5276;
}
.ssa-btn-voice-inline:hover { background:#d4eaf8; }
.ssa-btn-next {
    padding:11px 24px;
    background:linear-gradient(135deg,#1abc9c,#16a085);
    color:#fff;border:none;border-radius:10px;
    font-size:15px;font-weight:700;cursor:pointer;
    font-family:inherit;margin-top:8px;transition:all .2s;
}
.ssa-btn-next:hover { transform:translateY(-1px);box-shadow:0 4px 12px rgba(26,188,156,.35); }

/* ── Score Screen ── */
.ssa-score-screen {
    text-align:center;padding:40px 24px;
    animation:ssaFadeIn .4s ease;
}
.ssa-score-emoji { font-size:60px;line-height:1;margin-bottom:12px; }
.ssa-score-screen h3 { font-size:22px;color:#1a5276;margin:0 0 20px; }
.ssa-score-circle {
    display:inline-flex;align-items:baseline;gap:4px;
    background:linear-gradient(135deg,#eaf4fb,#d0ecf8);
    border:3px solid #2980b9;border-radius:50%;
    width:110px;height:110px;
    justify-content:center;
    margin-bottom:14px;
}
#ssa-score-num { font-size:44px;font-weight:900;color:#1a5276; }
#ssa-score-den { font-size:20px;font-weight:700;color:#7aabcf; }
#ssa-score-pct { font-size:16px;color:#5d7e9a;font-weight:700;margin-bottom:20px; }
.ssa-review-list { text-align:right;max-width:600px;margin:0 auto 24px;display:flex;flex-direction:column;gap:10px; }
.ssa-review-item {
    background:#f7fbff;border:1.5px solid #cde4f5;
    border-radius:10px;padding:12px 16px;font-size:14px;line-height:1.7;
}
.ssa-r-wrong   { color:#c0392b;font-size:13px; }
.ssa-r-correct { color:#0e7a5a;font-size:13px;font-weight:700; }

/* ── Summary ── */
.ssa-sum-result { border-top:1px solid #ddeef9; }
.ssa-sum-header {
    display:flex;align-items:center;gap:10px;
    padding:12px 20px;background:#f0f7ff;border-bottom:1px solid #ddeef9;
    font-weight:700;color:#1a5276;flex-wrap:wrap;
}
.ssa-sum-header>span:first-child { flex:1; }
.ssa-btn-copy {
    padding:6px 14px;background:#fff;border:1.5px solid #c5dff0;
    border-radius:7px;cursor:pointer;font-size:13px;font-weight:600;
    font-family:inherit;color:#2c6e99;
}
.ssa-btn-copy:hover { background:#eaf4fb; }
.ssa-response-content {
    padding:20px 24px;font-size:15px;line-height:1.85;
    color:#2c3e50;direction:rtl;text-align:right;
}
.ssa-response-content h3,.ssa-response-content h4,.ssa-response-content h5 {
    color:#1a5276;margin:16px 0 8px;border-right:4px solid #2980b9;padding-right:10px;
}
.ssa-response-content ul,.ssa-response-content ol { padding-right:22px;margin:8px 0; }
.ssa-response-content li { margin-bottom:5px; }
.ssa-response-content strong { color:#1a5276; }
.ssa-response-content p { margin:0 0 10px; }

/* ── Generic ── */
.ssa-btn-primary {
    padding:11px 22px;
    background:linear-gradient(135deg,#2980b9,#1abc9c);
    color:#fff;border:none;border-radius:10px;
    font-size:14px;font-weight:700;cursor:pointer;
    font-family:inherit;transition:all .2s;
}
.ssa-btn-primary:hover { transform:translateY(-1px);box-shadow:0 4px 14px rgba(26,188,156,.3); }
.ssa-btn-primary:disabled { opacity:.5;cursor:not-allowed;transform:none; }

.ssa-loading {
    display:flex;flex-direction:column;align-items:center;gap:12px;
    padding:36px;background:#f9fdff;
}
.ssa-loading p { color:#2980b9;font-weight:700;margin:0;font-size:15px; }
.ssa-loading-dots { display:flex;gap:7px; }
.ssa-loading-dots span {
    width:11px;height:11px;background:#2980b9;border-radius:50%;
    animation:ssaBounce 1.1s infinite;
}
.ssa-loading-dots span:nth-child(2){ animation-delay:.2s;background:#1abc9c; }
.ssa-loading-dots span:nth-child(3){ animation-delay:.4s;background:#1a5276; }

.ssa-error {
    padding:14px 20px;background:#fdf2f0;border-top:1px solid #f5c6bc;
    color:#c0392b;font-size:14px;font-weight:600;
}

/* ── Responsive ── */
@media(max-width:600px){
    .ssa-header { padding:16px; }
    .ssa-header-icon { font-size:34px; }
    .ssa-header-text h2 { font-size:17px; }
    .ssa-tabs .ssa-tab { font-size:12px;padding:10px 6px; }
    .ssa-question-card { padding:16px; }
    .ssa-q-text { font-size:15px; }
    .ssa-option-btn { font-size:14px; }
    .ssa-score-circle { width:90px;height:90px; }
    #ssa-score-num { font-size:36px; }
}