/* diagnostic/css/diagnostic.css */
.box { background:#fff; border-radius:10px; padding:14px; box-shadow:0 2px 8px rgba(0,0,0,0.04); margin-bottom:12px; }
.select-full { width:100%; padding:8px; border-radius:6px; }
.module-link { display:block; padding:8px 10px; margin:6px 0; color:#111; text-decoration:none; border-radius:6px; background:#f1f5f9; }
.module-link.active { background:#1e6be0; color:#fff; }

.answers {
    border-top: 1px solid rgba(0,0,0,0.2);
    margin-top: 30px;
    padding-top: 30px;
}

/* answer row layout */
.answer-row {
    display:flex;
    align-items:center; /* center vertically */
    gap:12px;
    margin:8px 0;
    margin:20px 0;
}
.ans-btn {
    padding:10px 14px;
    background:#1e6be0;
    color:#fff;
    border:none;
    border-radius:6px;
    cursor:pointer;
}
.ans-btn:hover { background:#1459bb; }
.ans-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(70%);
}
.answer-solution {
    flex:1;
    font-size:0.95rem;
    color:#333;
}
.button { display:inline-block; padding:8px 12px; background:#e7e7e7; border-radius:6px; text-decoration:none; color:#000; margin-right:8px; }
.hint { color:#666; font-size:0.85rem; margin-top:4px; }

a,
a:visited,
a:hover,
a:active,
a:focus {
  color: inherit;
  text-decoration: none;
}

/* PURE BUTTON MODE – tlačítka vedle sebe, centrovaná, zalomení podle šířky */

.answers.pure-buttons {
    display: flex;
    flex-wrap: wrap;        /* když se nevejdou → nový řádek */
    justify-content: center; /* centrování na každém řádku */
    gap: 20px;              /* stejné rozestupy mezi tlačítky */
    margin-top: 20px;
}

.answers.pure-buttons .answer-row {
    margin: 0;              /* odstraníme default okraje, flex je řeší */
}

.answers.pure-buttons .ans-btn {
    min-width: 150px;       /* volitelné, drží minimální šířku */
    padding: 10px 20px;
}

/* QR MODAL */
.qr-modal { position: fixed; inset: 0; z-index: 1000; }
.qr-modal__backdrop { position:absolute; inset:0; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px); }
.qr-modal__content {
    position: relative;
    max-width: 380px;
    margin: 10vh auto 0 auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 18px 18px 22px 18px;
}
.qr-modal__close {
    position:absolute; top:6px; right:8px;
    border:none; background:transparent; font-size:24px; line-height:1; cursor:pointer;
}
.qr-modal__imgwrap { display:flex; justify-content:center; align-items:center; padding: 14px 0; }
.qr-modal__imgwrap img { width: 240px; height: 240px; image-rendering: pixelated; }
.qr-modal__link { text-align:center; margin-top:8px; }

/* AI Chat Container */
.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
}
.chat-header {
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.message {
    display: flex;
    max-width: 80%;
}
.message.user {
    align-self: flex-end;
}
.message.assistant {
    align-self: flex-start;
}
.message-content {
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 15px;
    line-height: 1.4;
}
.message.user .message-content {
    background: #007bff;
    color: #fff;
    border-bottom-right-radius: 2px;
}
.message.assistant .message-content {
    background: #e9ecef;
    color: #333;
    border-bottom-left-radius: 2px;
}
.message-options {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.option-btn {
    background: #fff;
    border: 1px solid #007bff;
    color: #007bff;
    padding: 5px 12px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}
.option-btn:hover {
    background: #007bff;
    color: #fff;
}
.chat-input-form {
    padding: 15px 20px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
}
.chat-input-form input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    outline: none;
}
.btn-send {
    background: #007bff;
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-icon {
    color: #666;
    text-decoration: none;
    display: flex;
    align-items: center;
}

/* Additional specific styles for diagnostic/chat */
.m-0 { margin: 0; }
.ml-25 { margin-left: 25px; }
.mb-50 { margin-bottom: 50px; }
.mt--10 { margin-top: -10px; }
.max-w-380 { max-width: 380px; }
.max-w-420 { max-width: 420px; }
.max-w-450 { max-width: 450px; }
.max-w-500 { max-width: 500px; }
.text-center { text-align: center; }
.fs-80 { font-size: 80%; }
.fs-90 { font-size: 90%; }
.bg-light-yellow { background: #fffdf0; }
.border-yellow { border: 1px solid #fdd835; }
.bg-yellow-icon { background: #fbc02d; }
.c-yellow-text { color: #856404; }
.bg-blue-link { background-color: #e3f2fd; }
.border-blue-left { border-left-color: #2196f3; }
.h-120 { height: 120px; }
.w-120 { width: 120px; }
.p-12 { padding: 12px; }
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }
.fs-0-85 { font-size: 0.85em; }
.fs-0-75 { font-size: 0.75em; }
.fs-1-1 { font-size: 1.1em; font-weight: 600; }
.fs-1-3 { font-size: 1.3em; }
.ls-0-5 { letter-spacing: 0.5px; }

@media print {
    body * { visibility: hidden; }
    #qrModal, #qrModal * { visibility: visible; }
    #qrModal { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block !important; }
    .qr-modal__backdrop, .qr-modal__close, .qr-modal__link, .btn { display: none !important; }
    .qr-modal__content {
        position: static;
        margin: 0;
        padding: 0;
        box-shadow: none;
        max-width: none;
        text-align: center;
    }
    .qr-modal__content h3 {
        margin: 0 0 10px 0;
        font-size: 14pt;
    }
    .qr-modal__imgwrap { padding: 0; }
    .qr-modal__imgwrap img {
        width: 3cm !important;
        height: 3cm !important;
    }
    .no-print { display: none; }
}

.pointer { cursor: pointer; }
.p-0 { padding: 0; }
.inline-block { display: inline-block; }
.mr-8 { margin-right: 8px; }
.bg-smart-toy { background-color: #e3f2fd; border-left-color: #2196f3; }
.items-start { align-items: flex-start; }
.rounded-full { border-radius: 50%; }
.fs-32 { font-size: 32px; }
.uppercase { text-transform: uppercase; }
.shadow-sm { box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.normal { font-weight: normal; }
.medium { font-weight: 500; }
.mb-0 { margin-bottom: 0; }
.c-666 { color: #666; }
.c-888 { color: #888; }
.c-blue { color: #1e6be0; }
.block { display: block; }
.m-0-auto { margin: 0 auto; }
.border-eee { border: 1px solid #eee; }
.fs-0-85 { font-size: 0.85em; }
.fs-0-75 { font-size: 0.75em; }