/* Bestehendes CSS bleibt gleich, füge folgendes unten hinzu: */

.crypto-research-sidebar {
    background-color: #131314;
    color: #e3e3e3;
    font-family: 'Roboto', sans-serif;
    border-radius: 16px;
    padding: 24px;
    max-width: 100%;
    box-sizing: border-box;
}

.research-header h3, .research-welcome h4 { margin: 0 0 16px 0; color: #ffffff; font-weight: 400;}
.research-header h3 { color: #c4c7c5; font-size: 15px; }
.research-welcome h4 { font-size: 19px; }

.suggested-questions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.suggested-q-btn {
    background-color: #1e1f20; border: 1px solid #444746; color: #e3e3e3;
    border-radius: 12px; padding: 14px 16px; text-align: left; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; font-size: 14px;
}
.suggested-q-btn:hover { background-color: #282a2c; border-color: #8e918f; }
.sparkle-icon { color: #a8c7fa; font-size: 14px; }

/* Sprachneutraler Google Loader */
.research-response-box { background-color: #1e1f20; border: 1px solid #333537; border-radius: 14px; padding: 18px; margin-bottom: 24px; }
.response-loading { display: flex; justify-content: center; padding: 10px 0; }
.response-loading::after {
    content: ""; width: 20px; height: 20px; border: 2px solid #444746;
    border-top-color: #a8c7fa; border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* CSS für Textarea und Senden Button */
.research-input-container { display: flex; background-color: #1e1f20; border: 1px solid #444746; border-radius: 28px; padding: 10px 16px; align-items: center; }
#researchInput { background: transparent; border: none; color: #ffffff; flex-grow: 1; resize: none; height: 22px; font-size: 15px; outline: none; }
.send-btn { background: #a8c7fa; color: #042f62; border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: 8px; }
.send-btn:disabled { background: #3c4043; color: #80868b; cursor: not-allowed; }

/* Skeleton Loader für den allerersten Ladevorgang */
.ui-skeleton-loader {
    height: 48px;
    background: linear-gradient(90deg, #1e1f20 25%, #2c2d30 50%, #1e1f20 75%);
    background-size: 200% 100%;
    animation: loading-skeleton 1.5s infinite;
    border-radius: 12px;
}
@keyframes loading-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}