@font-face {
    font-family: 'Iconfont';
    src: url("files/fonts/ConwinIcons.ttf?v=5") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "Moderat";
    src: local("Moderat-Light"), local("Moderat-Light"), url("files/fonts/Moderat-Light.woff2") format("woff2"), url("files/fonts/Moderat-Light.woff") format("woff"), url("files/fonts/Moderat-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Moderat";
    src: local("Moderat-Regular"), local("Moderat-Regular"), url("files/fonts/Moderat-Regular.woff2") format("woff2"), url("files/fonts/Moderat-Regular.woff") format("woff"), url("files/fonts/Moderat-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Moderat";
    src: local("Moderat-Medium"), local("Moderat-Medium"), url("files/fonts/Moderat-Medium.woff2") format("woff2"), url("files/fonts/Moderat-Medium.woff") format("woff"), url("files/fonts/Moderat-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

.conwin-icon,
.conwin-icon::before {
    font-family: 'Iconfont' !important;
    font-size: 24px;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
}

/* Icon definitions removed. See files/css/conwin-icons-fix.css */

:root {
    /* Conwin Nightmode Colors - Updated from Screenshot */
    --cw-dark-1: #232d2a;
    /* Darker Green for Panels/Sidebar */
    --cw-dark-2: #161e1b;
    /* Darkest Green for Background */
    --cw-light-green: #232d2a;
    /* Reused for secondary backgrounds if needed, or keeping legacy name but dark value */
    --cw-neon: #E0FD0A;
    /* Neon stays same */
    --cw-white: #FFFFFF;
    /* White */

    /* Layout & Semantic Colors */
    --bg-color: var(--cw-dark-2);
    /* #161e1b */
    --sidebar-bg: var(--cw-dark-1);
    /* #232d2a */
    --sidebar-width: 68px;
    --panel-radius: 16px;

    --text-primary: #ECECEC;
    /* Off-white for reading comfort */
    --text-secondary: #A0A0A0;
    /* Medium Grey */

    --accent-color: var(--cw-neon);
    /* Neon is now the primary accent */
    --accent-neon: var(--cw-neon);

    --white: var(--cw-white);
    --hover-bg: rgba(255, 255, 255, 0.05);
    /* White with low opacity for hover on dark */
    --input-bg: #2C3633;
    /* Slightly lighter than panel for contrast */

    /* Typography System */
    --font-primary: 'Moderat', sans-serif;
    --font-weight-light: 300;
    --font-weight-medium: 500;

    /* Semantic Typography */
    /* Small headlines and titles -> Medium */
    --font-weight-title: var(--font-weight-medium);
    /* Everything else -> Light */
    --font-weight-body: var(--font-weight-light);
}

body,
html {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-body);
    background-color: var(--bg-color);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

strong,
b {
    font-weight: var(--font-weight-title);
}

#conwin-chatbot-layout {
    display: flex;
    height: 100vh;
    padding: 12px;
    box-sizing: border-box;
    gap: 12px;
    position: relative;
    /* Ensure absolute sidebar is relative to this */
}

/* Sidebar */
/* Sidebar */
.sidebar {
    width: 68px;
    /* Narrower collapsed by default */
    min-width: 68px;
    display: flex;
    flex-direction: column;
    padding: 32px 14px 0px 14px;
    /* Reduced bottom padding to move items lower */
    background-color: var(--sidebar-bg);
    border-radius: var(--panel-radius);
    color: var(--text-secondary);
    font-size: 14px;
    box-sizing: border-box;
    transition: width 0.3s ease, min-width 0.3s ease, padding 0.3s ease;
    overflow-x: hidden;
    z-index: 100;
    position: absolute;
    /* Overlay behavior */
    height: calc(100% - 24px);
    /* Full height minus padding */
    top: 12px;
    left: 12px;
}

.sidebar:hover {
    width: 280px;
    min-width: 280px;
    padding: 32px 24px 0px 24px;
    /* Reduced bottom padding to move items lower */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    /* Add shadow for depth when overlaying */
}

/* Toggle button removed */

.menu-section {
    margin-bottom: 32px;
}

.menu-section h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 16px;
    opacity: 0.9;
    font-weight: var(--font-weight-title);
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.2s;
}

.sidebar:not(:hover) .menu-section h3 {
    opacity: 0;
    height: 0;
    margin: 0;
}

.main-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar:not(:hover) .nav-item {
    justify-content: center;
    padding: 10px 0;
}

.sidebar:not(:hover) .nav-item span:not(.conwin-icon) {
    display: none;
}

.nav-item:hover {
    background-color: var(--hover-bg);
    color: var(--cw-white);
}

.nav-item.active {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--cw-neon);
}

.nav-item .conwin-icon {
    font-size: 20px;
    opacity: 0.9;
    min-width: 20px;
    /* Prevent squishing */
}

.menu-spacer {
    flex: 1;
    min-height: 20px;
}

.user-section,
.contact-section {
    transition: opacity 0.2s;
    opacity: 1;
    margin-top: 20px;
}

.sidebar:not(:hover) .user-section,
.sidebar:not(:hover) .contact-section {
    display: none;
    opacity: 0;
}

.user-section p {
    margin: 4px 0;
    white-space: nowrap;
}

.user-section .meta-info {
    font-size: 13px;
    opacity: 0.7;
}

.contact-section p {
    margin: 4px 0;
    white-space: nowrap;
}

.contact-section a {
    color: var(--text-secondary);
    text-decoration: none;
}

.contact-section a:hover {
    color: var(--cw-white);
    text-decoration: underline;
}

.contact-section .hours {
    margin-top: 12px;
    font-size: 13px;
    opacity: 0.7;
}

.footer-links {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 24px;
}

.footer-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    padding: 4px 0;
    transition: color 0.2s;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar:not(:hover) .footer-link {
    justify-content: center;
}

.sidebar:not(:hover) .footer-link span:not(.footer-icon) {
    display: none;
}

.footer-link:hover {
    color: var(--cw-white);
}

.footer-link .conwin-icon {
    font-size: 18px;
    opacity: 0.8;
}

.footer-link .footer-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
}

/* Main Area */
.main-area {
    display: flex;
    flex: 1;
    gap: 12px;
    background: transparent;
    border-radius: var(--panel-radius);
    overflow: hidden;
    margin-left: 80px;
    /* 68px sidebar + 12px gap to prevent content from being hidden */
}

/* Chat Panel */
.chat-panel {
    flex: 1;
    background-color: transparent;
    /* Removed white background */
    border-radius: var(--panel-radius);
    display: flex;
    flex-direction: column;
    position: relative;
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); Removed shadow */
}

.chat-history {
    flex: 1;
    overflow-y: auto;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    scroll-behavior: smooth;
}

/* Custom Scrollbar - Dark Mode */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* Messages */
.message {
    display: flex;
    align-items: center;
    /* Vertically center items (bubble and arrow) */
    max-width: 85%;
    line-height: 1.6;
    animation: fadeIn 0.3s ease-out;
    gap: 8px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.user {
    align-self: flex-end;
    background-color: transparent;
    /* No bubble bg for user, just text? OR keep bubble? Screenshot shows dark mode. Usually user bubble is distinct. Let's make it subtle or just text depending on pref. Let's use Sidebar Dark for bubble for now to be safe.*/
    background-color: var(--cw-dark-1);
    padding: 14px 24px;
    border-radius: 24px 24px 4px 24px;
    color: var(--cw-white);
}

.message.assistant {
    align-self: flex-start;
    padding: 0;
    max-width: 90%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.bot-avatar {
    width: 32px;
    height: 32px;
    background-color: var(--cw-neon);
    color: var(--cw-dark-1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-title);
    font-family: var(--font-primary);
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 0;
}

.message-content {
    font-weight: var(--font-weight-body);
    /* Moderat Light */
    font-size: 16px !important;
    line-height: 1.5;
    padding-top: 4px;
    padding-bottom: 4px;
    /* Lower text to center with 32px icon */
}

.message.assistant .message-content,
.message.assistant.welcome .message-content {
    padding-left: 0;
    color: #CDE2BA;
}

.message.user .message-content {
    color: var(--cw-white);
}

.message-content p {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.message-content p+p {
    margin-top: 12px;
}

/* Message Actions */
.message-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    margin-left: 10px;
    opacity: 0;
    transition: opacity 0.2s;
}

.message.assistant:hover .message-actions {
    opacity: 1;
}

.action-icon {
    background: transparent;
    border: none;
    color: #8E8E8E;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.action-icon:hover {
    background-color: var(--hover-bg);
    color: var(--cw-white);
}

.action-icon span {
    font-size: 18px;
}

/* Image containment in Canvas */
.content-block img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
    display: block;
}

/* Input Area */
.input-area {
    padding: 20px 40px;
    background: transparent;
    border-radius: 0 0 var(--panel-radius) var(--panel-radius);
}

.input-wrapper {
    background: var(--input-bg);
    border-radius: 12px;
    /* Less rounded corners to match screenshot usually? Or keep 36px. Screenshot input looks rectangular with rounded corners. */
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    transition: background 0.2s;
    height: 64px;
    /* Taller input */
    box-sizing: border-box;
    border: 1px solid #3A4A46;
    /* Subtle border */
}

.input-wrapper:focus-within {
    background: #333F3C;
    border-color: #4A5A56;
}

.input-wrapper input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0 16px;
    outline: none;
    font-size: 16px;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-body);
}

.input-wrapper input::placeholder {
    color: #666;
}

.attach-btn,
.voice-btn,
.send-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.voice-btn {
    margin-right: 15px;
    /* Spacing before send button */
}

.attach-btn:hover,
.voice-btn:hover {
    background-color: var(--hover-bg);
    color: var(--cw-white);
}

.send-btn {
    background-color: var(--cw-neon);
    color: var(--cw-dark-2);
    border-radius: 6px;
    width: auto;
    /* Allow width for text if needed */
    padding: 0 16px;
    font-weight: var(--font-weight-body);
}

.send-btn span {
    display: none;
    /* Hide icon if we want text "Senden" or see below */
}

/* Re-enabling icon for now as HTML has icon inside, unless we change HTML to text "Senden". 
   Wait, screenshot shows "Senden" text button in yellow.
*/
.send-btn::after {
    content: "Senden";
    font-family: var(--font-primary);
    font-weight: var(--font-weight-body);
}

.send-btn .conwin-icon {
    display: none;
}

.send-btn:hover {
    background-color: #CDE2BA;
    /* Light green hover */
    color: var(--cw-dark-2);
}

/* Canvas Panel */
.canvas-panel {
    flex: 1;
    background-color: var(--sidebar-bg);
    /* Use sidebar dark for canvas base */
    border-radius: var(--panel-radius);
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 320px;
    border-left: 1px solid #333;
}

.canvas-header {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
}

.nav-controls {
    display: flex;
    gap: 8px;
}

.icon-btn-small {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn-small:hover,
.close-canvas-btn:hover {
    background-color: var(--hover-bg);
    color: var(--cw-white);
}

.close-canvas-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas-content {
    flex: 1;
    overflow-y: auto;
    padding: 40px;
}

.canvas-content h1 {
    font-size: 28px;
    font-weight: var(--font-weight-body);
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--cw-white);
}

.source-ref {
    color: var(--cw-neon);
    /* Neon accent for source */
    font-size: 13px;
    margin-bottom: 32px;
    font-style: normal;
    opacity: 1;
}

/* Info Cards */
.content-block p {
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 24px;
}

.info-card,
.action-card {
    background: rgba(255, 255, 255, 0.03);
    /* Very subtle card bg */
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
}

.info-card:hover,
.action-card:hover {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none;
}

.info-card .card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: var(--font-weight-title);
    cursor: pointer;
    color: var(--text-primary);
}

.info-card .arrow {
    margin-left: auto;
    font-size: 24px;
    color: var(--text-secondary);
}

.action-card .card-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    align-items: flex-start;
}

.action-card .icon {
    color: var(--cw-neon);
    font-size: 20px;
    margin-top: 2px;
}

.action-card .card-text {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.action-card .card-text strong {
    margin-bottom: 4px;
    color: var(--text-primary);
}

.action-card .card-text span {
    color: var(--text-secondary);
    opacity: 0.9;
}

.card-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.card-actions button,
.card-actions a {
    flex: 1;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #444;
    border: 1px solid #444;
    background: transparent;
    font-weight: var(--font-weight-body);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary);
    text-decoration: none;
    /* Added to remove default link styling */
}

.card-actions button:hover,
.card-actions a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #666;
    color: var(--text-primary);
}

/* Related Topics */
.related-topics {
    margin-top: 48px;
    border-top: 1px solid #333;
    padding-top: 24px;
}

.related-topics h3 {
    font-size: 12px;
    color: var(--text-secondary);
    letter-spacing: 0.8px;
    margin-bottom: 16px;
    font-weight: var(--font-weight-title);
    text-transform: uppercase;
}

.topic-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #333;
    cursor: pointer;
    transition: opacity 0.2s;
}

.topic-link:last-child {
    border-bottom: none;
}

.topic-link:hover {
    opacity: 1;
    transform: translateX(4px);
}

.topic-link:hover strong {
    color: var(--cw-neon);
}

.topic-content {
    display: flex;
    flex-direction: column;
}

.topic-content strong {
    font-size: 15px;
    margin-bottom: 4px;
    color: var(--text-primary);
    transition: color 0.2s;
}

.topic-content span {
    font-size: 13px;
    color: var(--text-secondary);
}

.welcome-suggestions {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.welcome-suggestion {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.welcome-suggestion .conwin-icon {
    font-size: 20px;
    color: var(--cw-neon);
    transition: transform 0.2s;
}

.welcome-suggestion span:not(.conwin-icon) {
    font-size: 15px;
    color: var(--text-primary);
}

.welcome-suggestion:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(205, 226, 186, 0.2);
    transform: translateX(4px);
}

.welcome-suggestion:hover .conwin-icon {
    transform: scale(1.1);
}

/* Markdown Styling */
.message-content {
    font-size: 15px;
    color: var(--text-primary);
}

.message-content strong {
    font-weight: var(--font-weight-title);
    color: var(--cw-neon);
    /* Neon for emphasis in markdown? Or White? Screenshot has yellow accents. */
}

.message-content h1,
.message-content h2,
.message-content h3 {
    font-weight: var(--font-weight-title);
    margin-top: 1.2em;
    margin-bottom: 0.5em;
    color: var(--cw-white);
}

.message-content code {
    background: #333;
    padding: 2px 5px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.95em;
    color: #E2E2E2;
}

.message-content pre {
    background: #111;
    color: #E2E2E2;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 12px 0;
    border: 1px solid #333;
}


.message-content ul,
.message-content ol {
    padding-left: 24px;
    margin: 12px 0;
}

.message-content li {
    margin-bottom: 6px;
}

.message-content a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: var(--font-weight-title);
}

.message-content a:hover {
    text-decoration: underline;
    color: var(--cw-neon);
    /* Neon link hover? Maybe keep dark green for link legibility but neon underline? Just keep underline. */
}

.message-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-top: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Loading Animation */
.loading-dot {
    width: 6px;
    height: 6px;
    background-color: var(--text-secondary);
    border-radius: 50%;
    display: inline-block;
    animation: bounce 1.4s infinite ease-in-out both;
    margin: 0 2px;
}

.loading-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.loading-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

/* Error Message */
.error {
    color: #d32f2f;
}

/* Canvas Link in Chat */
.message-actions-row {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
}

.canvas-link {
    background: none;
    border: none;
    color: var(--cw-neon);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
    width: 32px;
    height: 32px;
}

.canvas-link:hover {
    background: rgba(204, 255, 0, 0.1);
    transform: scale(1.1);
}

.canvas-link .conwin-icon {
    font-size: 20px;
}

/* Related Topics in Canvas */
.related-topics {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.related-topics h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.related-chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.related-chip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Moderat', sans-serif;
    font-size: 15px;
    color: var(--text-primary);
}

.related-chip:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(205, 226, 186, 0.2);
    transform: translateX(4px);
}

.related-chip:hover .conwin-icon {
    transform: scale(1.1);
}

.related-chip .conwin-icon {
    font-size: 20px;
    color: var(--cw-neon);
    transition: transform 0.2s;
    flex-shrink: 0;
}

/* ===== BROSCHÜREN GRID ===== */

.broschueren-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.broschuere-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    font-family: 'Moderat', sans-serif;
    color: var(--text-primary);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    /* For arrow positioning if needed, or flex is fine */
}

/* Ensure bright arrow */
.broschuere-arrow {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
    /* Slightly brighter default */
    flex-shrink: 0;
    transition: transform 0.2s, color 0.2s;
    margin-left: auto;
    /* Push to far right */
}

/* Hover state for arrow - make it very bright/neon */
.broschuere-btn:hover .broschuere-arrow {
    color: var(--cw-neon);
    transform: translateX(4px);
    opacity: 1;
}

.broschuere-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(205, 226, 186, 0.2);
    transform: translateX(4px);
}

.broschuere-btn:hover strong {
    color: var(--cw-neon);
}

.broschuere-btn>.conwin-icon:first-child {
    font-size: 20px;
    color: var(--cw-neon);
    flex-shrink: 0;
}

.broschuere-btn-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.broschuere-btn-text strong {
    font-size: 15px;
    font-weight: var(--font-weight-title);
    color: var(--text-primary);
    transition: color 0.2s;
}

.broschuere-btn-text span {
    font-size: 13px;
    color: var(--text-secondary);
}

.broschuere-arrow {
    font-size: 18px;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: transform 0.2s, color 0.2s;
}

.broschuere-btn:hover .broschuere-arrow {
    color: var(--cw-neon);
    transform: translateX(4px);
}

/* ===== FLIPBOOK STYLES ===== */

.flipbook-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--cw-dark-2);
    z-index: 1000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.flipbook-overlay.active {
    display: flex;
}

.flipbook-close-btn {
    position: absolute;
    top: 16px;
    right: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 1010;
}

.flipbook-close-btn .conwin-icon {
    font-size: 18px;
}

.flipbook-close-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--cw-white);
}

.flipbook-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    padding: 20px 40px;
    box-sizing: border-box;
}

.flipbook-viewport {
    flex: 1;
    max-width: 1200px;
    height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    perspective: 2000px;
}

.flipbook-book {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.flipbook-single {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flipbook-page-wrap {
    position: relative;
    display: inline-block;
}

.flipbook-page-wrapper {
    position: relative;
}

.flipbook-page {
    display: block;
}

/* Toolbar */
.flipbook-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    background: rgba(35, 45, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.flipbook-tool-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
}

.flipbook-tool-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--cw-white);
}

.flipbook-tool-btn .conwin-icon {
    font-size: 16px;
}

.flipbook-tool-btn .toolbar-label {
    position: absolute;
    bottom: 1px;
    right: 3px;
    font-size: 10px;
    font-size: 10px;
    font-weight: var(--font-weight-title);
    color: inherit;
    font-family: var(--font-primary);
}

.flipbook-toolbar-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 4px;
}

.flipbook-page-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: var(--font-weight-body);
}

.flipbook-page-input {
    width: 36px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: 'Moderat', sans-serif;
    font-size: 13px;
    text-align: center;
    padding: 1px 2px 3px 2px;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.flipbook-page-input::-webkit-outer-spin-button,
.flipbook-page-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.flipbook-page-input:focus {
    border-color: var(--cw-neon);
    background: rgba(255, 255, 255, 0.1);
}

.flipbook-page-total {
    color: var(--text-secondary);
    margin-bottom: 2px;
    /* Shift total page count up slightly */
}

.flipbook-page-total::before {
    content: "/ ";
}


/* ===== FLIPBOOK SEARCH PANEL ===== */

.flipbook-search-panel {
    position: absolute;
    bottom: 72px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    max-height: 460px;
    background: var(--cw-dark-1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    display: none;
    flex-direction: column;
    z-index: 1020;
    overflow: hidden;
}

.flipbook-search-panel.active {
    display: flex;
}

.flipbook-search-header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.flipbook-search-input-wrap {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0 12px;
    transition: border-color 0.2s ease;
}

.flipbook-search-input-wrap:focus-within {
    border-color: var(--cw-neon);
}

.flipbook-search-icon {
    font-size: 16px;
    color: var(--text-secondary);
    margin-right: 8px;
    flex-shrink: 0;
}

.flipbook-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: 'Moderat', sans-serif;
    font-size: 14px;
    padding: 10px 0;
    width: 100%;
}

.flipbook-search-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.flipbook-search-clear {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.flipbook-search-clear .conwin-icon {
    font-size: 12px;
}

.flipbook-search-clear:hover {
    color: var(--cw-white);
    background: rgba(255, 255, 255, 0.1);
}

.flipbook-search-clear.visible {
    display: flex;
}

.flipbook-search-status {
    font-family: 'Moderat', sans-serif;
    font-size: 12px;
    color: var(--text-secondary);
    padding-top: 8px;
    display: none;
}

.flipbook-search-status.visible {
    display: block;
}

.flipbook-search-results {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    max-height: 340px;
}

.flipbook-search-results::-webkit-scrollbar {
    width: 4px;
}

.flipbook-search-results::-webkit-scrollbar-track {
    background: transparent;
}

.flipbook-search-results::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
}

.flipbook-search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.flipbook-search-result-item:last-child {
    border-bottom: none;
}

.flipbook-search-result-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.flipbook-search-result-item.active {
    background: rgba(224, 253, 10, 0.06);
}

.flipbook-search-result-page {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--font-weight-title);
    color: var(--cw-neon);
    background: rgba(224, 253, 10, 0.08);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 1px;
}

.flipbook-search-result-text {
    font-family: 'Moderat', sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.flipbook-search-result-text mark {
    background: none;
    color: var(--cw-white);
    color: var(--cw-white);
    font-weight: var(--font-weight-title);
}

.flipbook-search-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-family: 'Moderat', sans-serif;
    font-size: 13px;
}

.flipbook-search-loading {
    padding: 20px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-family: 'Moderat', sans-serif;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.flipbook-search-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--cw-neon);
    border-radius: 50%;
    animation: flipbookSearchSpin 0.6s linear infinite;
}

@keyframes flipbookSearchSpin {
    to {
        transform: rotate(360deg);
    }
}

.flipbook-search-btn-active {
    color: var(--cw-neon) !important;
    background: rgba(224, 253, 10, 0.1) !important;
}

/* Conwin Icons */
.cw-wiki::before {
    content: "\0030";
}

/* checklist */
.cw-chat::before {
    content: "\00d7";
}

/* chat */
.cw-search::before {
    content: "\0072";
}

/* search */
.cw-pin::before {
    content: "\0056";
}

/* geopin */
.cw-settings::before {
    content: "\0043";
}

/* gear */
.cw-add::before {
    content: "\00c8";
}

/* plus */
.cw-mic::before {
    content: "\0035";
}

/* microphone */
.cw-send::before {
    content: "\006c";
}

/* send */
.cw-prev::before {
    content: "\0062";
}

/* arrow-left */
.cw-next::before {
    content: "\0063";
}

/* arrow-right */
.cw-hotkeys::before {
    content: "\014c";
}

/* hotkeys */
.cw-wiki-handbuch::before {
    content: "\007b";
}

/* arrow-right */

.cw-close::before {
    content: "\0059";
}

/* close */
.cw-zoom-in::before {
    content: "\0165";
}

/* zoom_plus */
.cw-zoom-out::before {
    content: "\0164";
}

/* zoom_minus */
.cw-print::before {
    content: "\00dd";
}

/* printer */
.cw-download::before {
    content: "\0079";
}

/* download */
.cw-fullscreen-enter::before {
    content: "\006a";
}

/* full-screen */
.cw-fullscreen-exit::before {
    content: "\006d";
}

/* end-full-screen */
.cw-arrow-right::before {
    content: "\005a";
}

/* arrow-right */
.cw-arrow-details::before {
    content: "\0042";
}

/* arrow-right */
.cw-info::before {
    content: "\0028";
}

/* info */
.cw-time::before {
    content: "\007b";
}

/* timer */
.cw-phone::before {
    content: "\0033";
}

/* phone */
.cw-globe::before {
    content: "\0037";
}

/* world */
.cw-mail::before {
    content: "\0156";
}

/* e-mail-alt-1 */
.cw-menu::before {
    content: "\003d";
}

/* menu */

/* Extra requested icons */
.cw-copy::before {
    content: "\00b9";
}

.cw-thumb-up::before {
    content: "\0059";
}

.cw-thumb-down::before {
    content: "\0058";
}

.cw-user::before {
    content: "\0154";
}

.cw-support::before {
    content: "\0182";
}

/* ===== STREAMING PROGRESS BAR (Apple Style) ===== */
.streaming-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: var(--cw-neon);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Adjustments for message layout */
.message-top-row {
    width: 100%;
}

/* Ensure the arrow button is visible and styled correctly in its new position */
.message-actions-row .canvas-link {
    opacity: 0.8;
    color: var(--cw-neon);
    /* Ensure color matches neon arrow request explicitly if not inherited */
}

.message-actions-row .canvas-link:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

/* New Arrow Button (Large) */
.canvas-link-large {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    /* Default color similar to screenshot arrow */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s;
    width: 40px;
    height: 40px;
}

.canvas-link-large .conwin-icon {
    font-size: 24px;
    /* Larger icon */
}

.canvas-link-large:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--cw-neon);
}

/* Canvas Loading Wrapper */
.canvas-loading-wrapper {
    animation: fadeIn 0.3s ease-out;
}