@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600;700;800&display=swap');

/* =====================================================
   H5P Global
   ===================================================== */
.h5p-content, .h5p-container, .h5p-iframe-wrapper,
[class*="h5p-"] {
    font-family: 'Assistant','Heebo',Arial,sans-serif !important;
}
.h5p-content, .h5p-container, .h5p-iframe-wrapper {
    direction: rtl !important;
    text-align: right !important;
}
.h5p-course-presentation .h5p-element{
    font-size: .6em;
}
/* =====================================================
   כפתור שליחה H5P
   ===================================================== */
.h5p-submit-wrapper {
    text-align: center;
    padding: 25px;
    margin-top: 15px;
    font-family: 'Assistant', sans-serif;
}
.h5p-submit-btn {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    border: none;
    border-radius: 30px;
    padding: 18px 50px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(17,153,142,.4);
    transition: all .3s;
    font-family: 'Assistant', sans-serif;
}
.h5p-submit-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(17,153,142,.5);
}
.h5p-submit-btn:disabled { opacity:.7; cursor:not-allowed; }

/* הצלחה */
.h5p-submit-success {
    background: linear-gradient(135deg,#11998e 0%,#38ef7d 100%);
    color: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    font-family: 'Assistant', sans-serif;
}
.h5p-submit-success .checkmark { font-size:60px; display:block; margin-bottom:15px; }
.h5p-submit-success h3 { margin:0 0 10px; font-size:28px; font-weight:700; }
.h5p-submit-success p  { margin:5px 0; font-size:18px; opacity:.9; }

/* מסך מלא */
.h5p-fullscreen-message {
    background:#fff3cd; color:#856404;
    padding:20px 30px; border-radius:12px; text-align:center;
    border:2px solid #ffc107;
    animation: pulse 2s infinite;
    font-family: 'Assistant', sans-serif;
}
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.02)} }
.h5p-fullscreen-message p     { margin:0 0 8px; font-size:18px; font-weight:700; }
.h5p-fullscreen-message small { opacity:.8; font-size:14px; }

/* =====================================================
   טופס פרטי תלמיד (overlay)
   ===================================================== */
.h5p-student-overlay {
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,.6);
    display:flex; align-items:center; justify-content:center;
    z-index:999999; direction:rtl;
}
.h5p-student-form {
    background:white; padding:30px 40px; border-radius:15px;
    min-width:350px; box-shadow:0 10px 40px rgba(0,0,0,.3);
    font-family:'Assistant',sans-serif;
}
.h5p-student-form h3 { margin:0 0 25px; text-align:center; font-size:24px; font-weight:700; color:#333; }
.h5p-student-form .form-group { margin-bottom:20px; }
.h5p-student-form label { display:block; margin-bottom:8px; color:#555; font-weight:600; }
.h5p-student-form input,
.h5p-student-form select {
    width:100%; padding:12px 15px;
    border:2px solid #e0e0e0; border-radius:8px;
    font-size:16px; box-sizing:border-box;
    font-family:'Assistant',sans-serif;
    transition:border-color .2s;
}
.h5p-student-form input:focus,
.h5p-student-form select:focus { outline:none; border-color:#11998e; }
.h5p-student-form .form-buttons { display:flex; gap:10px; margin-top:25px; }
.h5p-student-form .btn-submit {
    flex:2; background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%);
    color:white; border:none; padding:14px; border-radius:8px;
    font-size:16px; font-weight:700; cursor:pointer;
    font-family:'Assistant',sans-serif;
}
.h5p-student-form .btn-cancel {
    flex:1; background:#f5f5f5; color:#666;
    border:none; padding:14px; border-radius:8px;
    font-size:16px; cursor:pointer;
    font-family:'Assistant',sans-serif;
}

/* =====================================================
   Chat Quiz
   ===================================================== */
.chat-quiz-container {
    max-width:520px; margin:30px auto;
    border-radius:20px; overflow:hidden;
    box-shadow:0 5px 30px rgba(0,0,0,.15);
    font-family:'Assistant','Heebo',Arial,sans-serif;
    background:#f5f5f5;
}
.chat-header {
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    color:white; padding:15px 20px;
    display:flex; align-items:center; gap:12px;
}
.chat-avatar {
    font-size:32px; width:45px; height:45px;
    background:white; border-radius:50%;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.chat-avatar .avatar-image { width:100%; height:100%; object-fit:cover; }
.chat-name { font-size:18px; font-weight:600; }

.chat-messages {
    height:400px; overflow-y:auto;
    padding:20px; background:#f5f5f5;
}
.chat-messages::-webkit-scrollbar { width:6px; }
.chat-messages::-webkit-scrollbar-thumb { background:#ccc; border-radius:3px; }

/* הודעות */
.chat-message {
    display:flex; align-items:flex-start; gap:10px;
    margin-bottom:20px;
    animation:slideIn .3s ease;
}
@keyframes slideIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.chat-message .message-avatar {
    font-size:24px; width:38px; height:38px;
    background:white; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 5px rgba(0,0,0,.1); flex-shrink:0; overflow:hidden;
}
.chat-message .message-avatar .avatar-image { width:100%; height:100%; object-fit:cover; }

.chat-message .message-bubble {
    background:white; padding:12px 18px;
    border-radius:18px; border-top-right-radius:5px;
    max-width:75%; box-shadow:0 1px 3px rgba(0,0,0,.1);
    font-size:15px; line-height:1.5; position:relative;
}
.chat-message .message-bubble::before {
    content:''; position:absolute; top:0; right:-8px;
    border:8px solid transparent; border-top-color:white; border-right:0;
}
.chat-message.user-message { flex-direction:row-reverse; }
.chat-message.user-message .message-avatar { background:#667eea; color:white; font-size:16px; }
.chat-message.user-message .message-bubble {
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    color:white; border-radius:18px; border-top-left-radius:5px;
}
.chat-message.user-message .message-bubble::before {
    right:auto; left:-8px;
    border-top-color:#667eea; border-left:0; border-right:8px solid transparent;
}

/* typing */
.typing-indicator { display:flex; gap:4px; padding:15px 18px; }
.typing-indicator span {
    width:8px; height:8px; background:#999;
    border-radius:50%; animation:typing 1.4s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay:.2s; }
.typing-indicator span:nth-child(3) { animation-delay:.4s; }
@keyframes typing {
    0%,60%,100%{transform:translateY(0)}
    30%{transform:translateY(-8px)}
}

/* input area */
.chat-input-area {
    background:white; padding:15px;
    display:flex; gap:10px; border-top:1px solid #eee;
}
.chat-input {
    flex:1; border:2px solid #e0e0e0; border-radius:25px;
    padding:12px 20px; font-size:15px; outline:none;
    transition:border-color .2s; font-family:'Assistant',sans-serif;
}
.chat-input:focus  { border-color:#667eea; }
.chat-input:disabled { background:#f5f5f5; cursor:not-allowed; }
.chat-send-btn {
    background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
    color:white; border:none; border-radius:50%;
    width:48px; height:48px; cursor:pointer;
    font-size:14px; transition:transform .2s,opacity .2s;
    display:flex; align-items:center; justify-content:center;
}
.chat-send-btn:hover:not(:disabled) { transform:scale(1.1); }
.chat-send-btn:disabled { opacity:.5; cursor:not-allowed; }

/* registration form */
.chat-registration-form {
    background:white; border-radius:15px; padding:20px;
    margin:10px 0; box-shadow:0 2px 10px rgba(0,0,0,.1);
}
.chat-registration-form .form-field { margin-bottom:15px; }
.chat-registration-form label { display:block; margin-bottom:5px; font-weight:600; color:#333; }
.chat-registration-form input,
.chat-registration-form select {
    width:100%; padding:12px 15px;
    border:2px solid #e0e0e0; border-radius:10px;
    font-size:15px; box-sizing:border-box;
    font-family:'Assistant',sans-serif;
}
.chat-registration-form input[readonly] { cursor:default; }
.chat-submit-btn {
    background:linear-gradient(135deg,#11998e 0%,#38ef7d 100%);
    color:white; border:none; border-radius:25px;
    padding:15px 40px; font-size:18px; font-weight:600;
    cursor:pointer; width:100%; margin-top:10px;
    transition:transform .2s,box-shadow .2s;
    box-shadow:0 4px 15px rgba(17,153,142,.3);
    font-family:'Assistant',sans-serif;
}
.chat-submit-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(17,153,142,.4); }
.form-error { color:#e74c3c; margin-top:10px; font-size:14px; text-align:center; }
.loading-spinner { text-align:center; padding:20px; color:#667eea; font-weight:600; }

/* הודעת סיום */
.chat-completed {
    text-align:center; padding:30px; color:#11998e;
}
.chat-completed .checkmark { font-size:60px; margin-bottom:15px; }
.chat-completed h3 { margin:0 0 8px; font-size:22px; }
.chat-completed p  { margin:5px 0; color:#555; }
.chat-completed strong { color:#11998e; }

/* =====================================================
   Chat Chooser
   ===================================================== */
.chat-chooser-wrapper {
    max-width: 520px;
    margin: 30px auto;
    font-family: 'Assistant', 'Heebo', Arial, sans-serif;
}

/* מצב נעול */
.chooser-waiting {
    background: #f8faff;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    color: #94a3b8;
}
.chooser-lock { font-size: 36px; margin-bottom: 10px; }
.chooser-waiting p { margin: 0; font-size: 15px; }

/* מצב פעיל */
.chooser-active {
    background: white;
    border-radius: 20px;
    padding: 32px 28px;
    box-shadow: 0 6px 30px rgba(0,0,0,.12);
    text-align: center;
    animation: fadeInUp .4s ease;
}
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:translateY(0); }
}
.chooser-active h3 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
}
.chooser-subtitle {
    color: #64748b;
    font-size: 15px;
    margin: 0 0 24px;
}
.chooser-buttons {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.chooser-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border: none;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    font-family: 'Assistant', sans-serif;
    position: relative;
}
.chooser-btn::before {
    content: '';
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.chooser-btn-a::before {
    background-image: url('https://hashalhevet.org.il/wp-content/uploads/2026/02/מינג-ורוז-04.png');
}

.chooser-btn-b::before {
    background-image: url('https://hashalhevet.org.il/wp-content/uploads/2026/02/מינג-ורוז-05.png');
}
.chooser-btn-a {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102,126,234,.35);
}
.chooser-btn-b {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(17,153,142,.35);
}
.chooser-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.chooser-arrow {
    font-size: 20px;
    opacity: .8;
}

/* =====================================================
   תמונה בצ'אט
   ===================================================== */
.message-image {
    padding: 6px !important;
    background: white;
    max-width: 85% !important;
}
.chat-img {
    width: 100%;
    max-width: 320px;
    border-radius: 12px;
    display: block;
    cursor: zoom-in;
    transition: transform .2s;
}
.chat-img:hover { transform: scale(1.02); }
.chat-img-caption {
    margin: 6px 4px 2px;
    font-size: 13px;
    color: #64748b;
    font-style: italic;
}

/* lightbox פשוט */
.chat-img-lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.85);
    display: flex; align-items: center; justify-content: center;
    z-index: 999999; cursor: zoom-out;
    animation: fadeInUp .2s ease;
}
.chat-img-lightbox img {
    max-width: 90vw; max-height: 90vh;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,.5);
}