/* ============================================================
   Frontend Styles für Q&A Chat
   ============================================================ */

:root {
    --bg:        #f0f2f5;
    --surface:   #ffffff;
    --text:      #1a1a2e;
    --text-mute: #6b7280;
    --primary:   #2563eb;
    --primary-d: #1d4ed8;
    --user-bg:   #2563eb;
    --user-fg:   #ffffff;
    --bot-bg:    #f3f4f6;
    --bot-fg:    #1a1a2e;
    --border:    #e5e7eb;
    --radius:    12px;
    --shadow:    0 1px 3px rgba(0,0,0,.08);
}

* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); }

/* ---- Chat-Container ---- */
.qa-container {
    max-width:800px; margin:0 auto;
    height:100vh; display:flex; flex-direction:column;
}

/* ---- Header ---- */
.qa-header {
    background:var(--surface); border-bottom:1px solid var(--border);
    padding:.8rem 1.2rem; display:flex; align-items:center; gap:.5rem;
    box-shadow:var(--shadow); flex-shrink:0;
}
.qa-header h1 { font-size:1.1rem; font-weight:600; }
.qa-header small { color:var(--text-mute); font-size:.8rem; margin-left:auto; }
.qa-model-badge {
    background:#eff6ff; color:var(--primary); font-size:.75rem;
    padding:.2rem .6rem; border-radius:12px; margin-left:auto;
}

/* ---- Messages ---- */
.qa-messages {
    flex:1; overflow-y:auto; padding:1rem;
    display:flex; flex-direction:column; gap:.8rem;
}
.qa-welcome {
    text-align:center; padding:3rem 1rem; color:var(--text-mute);
}
.welcome-icon { font-size:3rem; margin-bottom:.5rem; }
.qa-welcome h2 { font-size:1.2rem; color:var(--text); margin-bottom:.3rem; }

.qa-message {
    max-width:85%; padding:.8rem 1rem; border-radius:var(--radius);
    font-size:1rem; line-height:1.5;
    animation:fadeIn .2s ease;
}
.qa-message-user {
    align-self:flex-end;
    background:var(--user-bg); color:var(--user-fg);
    border-bottom-right-radius:4px;
}
.qa-message-assistant {
    align-self:flex-start;
    background:var(--bot-bg); color:var(--bot-fg);
    border-bottom-left-radius:4px;
}
.qa-message-assistant p { margin-bottom:.5rem; }
.qa-message-assistant p:last-child { margin-bottom:0; }
.qa-message-assistant code {
    background:rgba(0,0,0,.06); padding:.1rem .3rem; border-radius:4px;
    font-family:ui-monospace,monospace; font-size:.9em;
}
.qa-message-assistant pre {
    background:rgba(0,0,0,.06); padding:.6rem; border-radius:8px;
    overflow-x:auto; font-size:.85rem;
}
.qa-message-assistant ul { padding-left:1.2rem; }

@keyframes fadeIn {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ---- Input ---- */
.qa-input-area {
    background:var(--surface); border-top:1px solid var(--border);
    padding:.8rem 1rem; flex-shrink:0;
}
.qa-input-form {
    display:flex; gap:.5rem; max-width:800px; margin:0 auto;
}
.qa-input-form textarea {
    flex:1; padding:.6rem .8rem; border:1px solid var(--border);
    border-radius:var(--radius); font-family:inherit; font-size:1rem;
    resize:none; min-height:44px; max-height:120px; line-height:1.4;
}
.qa-input-form textarea:focus {
    outline:none; border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.qa-input-form button {
    width:44px; height:44px; border:none; border-radius:var(--radius);
    background:var(--primary); color:#fff; font-size:1.1rem;
    cursor:pointer; transition:background .15s; flex-shrink:0;
}
.qa-input-form button:hover { background:var(--primary-d); }
.qa-input-form button:disabled { opacity:.5; cursor:not-allowed; }

/* ---- Responsive ---- */
@media (max-width:600px) {
    .qa-container { max-width:none; }
    .qa-header { padding:.6rem .8rem; }
    .qa-header h1 { font-size:1rem; }
    .qa-messages { padding:.6rem; }
    .qa-message { max-width:92%; font-size:1rem; }
    .qa-input-area { padding:.6rem .8rem; }
}