/* Wrapper */
.gc-case-chat {
max-width: 900px;
margin: 0 auto;
background: #F4F6F9;
border-radius: 6px;
padding: 20px 24px;
box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.65);
/*font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;*/
color: #000000;
}
/* Header */
.gc-case-header {
margin-bottom: 16px;
}
.gc-case-title h3 {
color: #004489;
}
/* Steps */
.gc-steps {
display: flex;
flex-direction: column;
gap: 18px;
}
.gc-step {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Bubbles */
.gc-bubble {
padding: 10px 14px;
border-radius: 6px;
line-height: 1.45;
position: relative;
max-width: 80%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.09);
background: #ffffff;
white-space: pre-line; 
}
.gc-bubble strong {
display: block;
margin-bottom: -15px;
}
.gc-bubble-client {
align-self: flex-start;
border-left: 4px solid #004489;
}
.gc-bubble-agent {
align-self: flex-end;
text-align: left;
}
/* Antwortoptionen */
.gc-option {
display: block;
text-decoration: none;
transition: 
    background-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.gc-bubble.gc-bubble-agent.gc-option {
color: black;
  }
.gc-option:hover {
cursor: pointer;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
background-color: rgba(0,0,0,0.02);
}
/* Blur (für zukünftige Runden) */
.gc-blurred {
filter: blur(4px);
position: relative;
box-shadow: none;
}
.gc-blurred::after {
content: "Wird später freigeschaltet";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 600;
color: #004489;
background: rgba(244,246,249,0.8);
border-radius: inherit;
text-align: center;
}
/* Disabled (frühere Runden nach Auswahl) */
.gc-disabled {
cursor: default !important;
pointer-events: none !important;
opacity: 0.9;
}
/* Ergebnis-Highlight */
.gc-option-correct {
background-color: #DBE2E9 !important;
border-color: #004489 !important;
}
.gc-option-wrong {
background-color: #FDE2E2 !important;
border-color: #CC0000 !important;
}
/* Responsive */
@media (max-width: 768px) {
.gc-case-chat {
padding: 16px 14px;
    }
.gc-bubble {
max-width: 100%;
    }
}