.hidden { display: none; }

/* Light (300) */
@font-face {
    font-family: 'HUKSans';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url('fonts/HUKSans-Light.woff2') format('woff2'),
    url('fonts/HUKSans-Light.woff') format('woff');
}

@font-face {
    font-family: 'HUKSans';
    font-weight: 300;
    font-style: italic;
    font-display: swap;
    src: url('fonts/HUKSans-LightItalic.woff2') format('woff2'),
    url('fonts/HUKSans-LightItalic.woff') format('woff');
}

/* Regular (400) */
@font-face {
    font-family: 'HUKSans';
    font-weight: 400; /* oder normal */
    font-style: normal;
    font-display: swap;
    src: url('fonts/HUKSans-Regular.woff2') format('woff2'),
    url('fonts/HUKSans-Regular.woff') format('woff');
}

@font-face {
    font-family: 'HUKSans';
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    src: url('fonts/HUKSans-Italic.woff2') format('woff2'),
    url('fonts/HUKSans-Italic.woff') format('woff');
}

/* Bold (700) */
@font-face {
    font-family: 'HUKSans';
    font-weight: 700; /* oder bold */
    font-style: normal;
    font-display: swap;
    src: url('fonts/HUKSans-Bold.woff2') format('woff2'),
    url('fonts/HUKSans-Bold.woff') format('woff');
}

@font-face {
    font-family: 'HUKSans';
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    src: url('fonts/HUKSans-BoldItalic.woff2') format('woff2'),
    url('fonts/HUKSans-BoldItalic.woff') format('woff');
}

/* Black (900) */
@font-face {
    font-family: 'HUKSans';
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    src: url('fonts/HUKSans-Black.woff2') format('woff2'),
    url('fonts/HUKSans-Black.woff') format('woff');
}

@font-face {
    font-family: 'HUKSans';
    font-weight: 900;
    font-style: italic;
    font-display: swap;
    src: url('fonts/HUKSans-BlackItalic.woff2') format('woff2'),
    url('fonts/HUKSans-BlackItalic.woff') format('woff');
}

:root {
    --yellow: #ffed00;
    --blue: #001631;
    --light-gray: #f5f6f7;
    --white: #ffffff;
    --gray-text: #444;
    --frame-area-height: 81px;
    --header-area-height: 56px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--light-gray);
    font-family: "HUKSans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--gray-text);
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.app {
    width: 66.666vw;
    max-width: none;
    height: 100vh;
    background: var(--white);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    background-image: url('./pictures/Logo_Wortbildmarke-1.png'), url('./pictures/welle.svg');
    background-repeat: no-repeat, no-repeat;
    background-size: clamp(96px, 18vw, 150px) auto, 100% auto;
    background-position: right 16px bottom calc(var(--frame-area-height) + 10px), center bottom;

}

@media (max-width: 768px) {
    .app {
        width: 100%;
        background-size: clamp(78px, 22vw, 120px) auto, 130% auto;
        background-position: right 12px bottom calc(var(--frame-area-height) + 8px), center bottom;
    }
}

@media (max-width: 480px) {
    .app {
        background-size: clamp(64px, 26vw, 96px) auto, 160% auto;
        background-position: right 10px bottom calc(var(--frame-area-height) + 6px), center bottom;
    }
}

@media (max-width: 390px) {
    .app {
        background-size: clamp(52px, 22vw, 76px) auto, 175% auto;
        background-position: right 8px bottom calc(var(--frame-area-height) + 18px), center bottom 10px;
    }
}

header {
    background: var(--yellow);
    color: var(--blue);
    min-height: var(--header-area-height);
    padding: 8px 24px;
    display: flex;
    align-items: center;
    font-weight: bold;
    border-bottom: 3px solid var(--blue);
    flex-shrink: 0;
}

header h1 {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.2;
}

.messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scroll-behavior: smooth;
//background: var(--white);
}

.message-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
}
.message-row.user { grid-template-columns: 1fr auto; }

.avatar {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

/* Icon-Mitte auf Höhe erste Textzeile: padding-top(12) + line-height/2(10.5) - avatar/2(17.5) ≈ 5px */
.message-row.bot .avatar { margin-top: 5px; }
.avatar img { width: 100%; height: 100%; object-fit: contain; }

.bubble {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 16px;
    line-height: 1.4;
    word-wrap: break-word;
    font-size: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: relative;
}

.bubble.user {
    justify-self: end;
    background: var(--blue);
    color: var(--white);
    border-bottom-right-radius: 4px;
    white-space: pre-wrap;
}

.bubble.bot {
    justify-self: start;
    background: transparent;
    color: var(--blue);
    border-bottom-left-radius: 4px;
    border: none;
    box-shadow: none;
    white-space: normal;
}

/* Feedback unterhalb der Bot-Antwort */
.message-row.bot {
    grid-template-columns: 40px 1fr;
    align-items: flex-start;
}

.message-row.bot > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.feedback-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    margin-top: 6px;
    padding-top: 2px;
    padding-left: 12px;
    width: 100%;
}

.feedback-btn {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.feedback-btn:hover { opacity: 1; transform: scale(1.1); }
.feedback-btn.active { opacity: 1; color: var(--blue); }

.copy-status {
    font-size: 12px;
    color: var(--blue);
    margin-left: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.composer {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    min-height: var(--frame-area-height);
    gap: 10px;
    padding: 16px;
    border-top: 1px solid #ddd;
    background: #fafafa;
    flex-shrink: 0;
}

.composer input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 15px;
    outline-color: var(--blue);
}

.composer button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: var(--blue);
    color: var(--white);
    cursor: pointer;
    transition: background 0.2s ease;
    width: 48px;
    height: 48px;
}

.composer button:hover { background: #001a55; }
.composer button:disabled { background: #7a89b0; cursor: not-allowed; }
.composer button svg { width: 22px; height: 22px; fill: var(--white); }

.bubble.bot p { margin: 0 0 8px 0; }
.bubble.bot p:last-child { margin-bottom: 0; }
.bubble.bot h1, .bubble.bot h2, .bubble.bot h3 { margin: 8px 0 4px 0; font-size: 1em; }
.bubble.bot ul { margin: 4px 0 4px 20px; padding-left: 10px; }
.bubble.bot li { margin-bottom: 4px; }
.bubble.bot code { background:#eee; padding:2px 4px; border-radius:4px; }
.bubble.bot pre { background:#eee; padding:8px; border-radius:6px; overflow-x:auto; margin:6px 0; }
.bubble.bot a { color: var(--blue); text-decoration: underline; }

.typing-bubble {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  min-width: 60px;
}

.typing-bubble .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--blue);
  border-radius: 50%;
  animation: typing-bounce 1.2s infinite ease-in-out;
}

.typing-bubble .dot:nth-child(2) { animation-delay: 0.2s; }
.typing-bubble .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}