/* ========== PAGE LAYOUT & STRUCTURE ========== */

/* Body wrapper - applies background image to entire page and centers main container.
   Background image with semi-transparent dark overlay for readability. */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-primary);
    /* background-color entfernt damit Slideshow sichtbar ist */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Main application container - fixed size flex column taking full viewport height (100vh).
   Max-width: 1350px ensures responsive scaling on larger screens; includes all major UI sections.
   Background is transparent to show the body background image beneath. */
.container {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 1313px;
    padding-left: 30px;
    padding-right: 30px;
    height: 100vh;
    background: linear-gradient(0.5turn, var(--bg-primary), var(--bg-secondary));
    /*background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);*/
    /*background-color: var(--bg-secondary);*/
    border-left: 1px solid var(--border-primary);
    border-right: 1px solid var(--border-primary);
    /*background-color: rgba(0, 0, 0, 0.8);*/

    /*background: transparent;
    overflow: hidden;*/
}

/* Adjust container when menu is present */
.container.has-menu {
    margin-top: 40px;
    height: calc(100vh - 40px);
}

/* Results display area - scrollable flex column that grows to fill available space.
   Contains all optimization results, user inputs, and system responses from script.js. */
.results-area {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ========== CONTROLS & INPUT SECTION ========== */

/* Wrapper for input textarea and control buttons - flexbox with centered alignment.
   Horizontally arranges input-area and controls-area with 15px gap; centered in viewport. */
.controls-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px 0px;
}

/* Control buttons container - houses C, F, T, E buttons arranged vertically.
   Dark background with border; positioned right side of textarea in controls-wrapper. */
.controls-area {
    padding: 8px 8px;
    background-color: var(--bg-controls-input-left-right);
    /*box-shadow: 0 0 13px rgb(0, 0, 0);*/
    /*border: var(--border-size-thick) solid var(--border-secondary);*/
    border: var(--border-size-thick-left-right) solid var(--border-secondary);
    border-radius: 28px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: auto;
    flex-shrink: 0;

}

.controls-area:hover {
    box-shadow: 0 0 12px #000000;
}


/* Control buttons container - houses C, F, T, E buttons arranged vertically.
   Dark background with border; positioned right side of textarea in controls-wrapper. */
.controls-area-prompt {
    /*padding: 8px 8px;*/
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 3px;
    padding-top: 8px;
    background: linear-gradient(5deg, var(--bg-input-gradient-start) 45%, var(--bg-input-gradient-end) 100%);
    /*background: var(--bg-controls-input);/*#100938;*/
    border: var(--border-size-thick) solid var(--border-secondary);
    border-radius: 32px;
    display: flex;
    align-items: top;
    flex-wrap: wrap;
    width: auto;
    flex-shrink: 0;
    transition: all 0.3s ease;
    outline: none;
}

/* Hover state for controls-area-info - enhances visibility with brighter background and glow effect.
   Provides visual feedback when user hovers over the info controls area. */
.controls-area-prompt:hover {
    background: linear-gradient(5deg, var(--bg-input-gradient-start-hover) 45%, var(--bg-input-gradient-end-hover) 100%);
    border: var(--border-size-thick) solid var(--border-tertiary);
    box-shadow: 0 0 12px #000000; /*var(--border-tertiary);*/
    cursor: pointer;
}

/* Button group container - arranges control buttons (C, F, T, E) vertically with spacing.
   Flexbox with column direction; buttons centered horizontally and vertically; part of controls-area. */
.control-group-buttons {
    display: flex;
    flex-direction: column;
    padding: 0px;
    gap: 0px;
    align-items: center;
    align-self: center;
}

/* Label styling within controls area - bold text for form labels.
   Currently unused but provides consistent styling if form elements are added. */
.controls-area label {
    font-weight: bold;
    margin-right: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Unified styling for select dropdowns, text inputs, and buttons within controls.
   Gray border and rounded corners for consistent appearance; font-size matches controls. */
.controls-area select,

.controls-area input[type="text"],

.controls-area button {
    padding: 8px 12px;
    border: 1px solid #969696;
    border-radius: 24px;
    font-size: 12px;
}

/* Text input styling within controls area - responsive width with max constraint.
   Flex-grow allows expansion; max-width prevents excessive stretching. */
.controls-area input[type="text"] {
    flex-grow: 1;
    max-width: 900px; /* Limit width for better aesthetics */
}

/* ========== TEXTAREA & MESSAGE DISPLAY ========== */

/* Main user input textarea - dynamically adjusts height based on content.
   No max-height constraint; height grows automatically as user types.
   outline: none removes default browser focus outline for cleaner appearance. */
#prompt-input {
    flex: 0 0 auto;
    border: 0px;
    padding: 8px;
    color: var(--text-primary);
    background: #00000000;
    border-radius: 10px;
    resize: none;
    font-size: 14px;
    min-height: 70px;
    max-height: 200px;
    width: var(--prompt-input_width);
    box-sizing: border-box;
    transition: height 0.2s ease;
    outline: none;
    overflow: hidden;
}

/* Base message container - applies to all message types displayed in results-area.
   Margin and padding provide spacing between messages; border-radius matches UI theme. */
.message {
    background-color: var(--bg-tertiary);
    margin-bottom: 15px;
    padding: 10px 15px;
    border-radius: 24px;
    line-height: 1.5;
}

/* User input message - displayed on right side with dark background.
   Shows original user prompt; 800px max width with right alignment; created by script.js. */
.message.user {
    /*background: linear-gradient( rgb(29, 0, 53) 70%, rgba(29, 0, 53, 0.4) 70%);
    background: linear-gradient( #181800 20%, #130f00 90%);*/
    background-color: var(--bg-message-user);
    border: 1px solid;
    border-color: var(--border-secondary);
    border-radius: 24px;
    align-self: flex-end;
    text-align: right;
    width: 800px;
    transition: all 0.2s ease;
    color: var(--text-primary);
    cursor: pointer;
    /*font-size: 14px;*/
}

/* Hover state for user messages - green border, lifted effect with shadow.
   Smooth 0.2s transition creates polished visual feedback when user hovers over their messages. */
.message.user:hover {
    /*background: linear-gradient( rgb(44, 0, 80) 70%, rgba(44, 0, 80, 0.4) 70%);*/
    /*background: linear-gradient( #0c001b 20%, #351b41 90%);*/
    background-color: var(--bg-message-user-hover);
}

/* System response message - displays final output/result from LLM execution (purple tint).
   Left-aligned; full width with max-width constraint; contains generated content from LLM. */
.message.system {
   background-color: var(--bg-message-system);
    border: 1px solid;
    border-color: var(--border-secondary);
    border-radius: 24px;
    align-self: flex-start;
    text-align: left;
    color: var(--text-primary);
    max-width: 1200px;
    box-sizing: border-box;
}

/* Hover state for system messages - green border, lifted effect without shadow.
   Smooth 0.2s transition creates polished visual feedback when user hovers over their messages. */
.message.system:hover {
   background-color: var(--bg-message-system-hover);
}

/* Welcome message at top of results area - sticky positioning keeps it visible while scrolling.
   Center-aligned with large font; contains "Green Prompt Optimizer" welcome text. */
.message.system_start {
    position: sticky;
    top: -20px;
    z-index: 1;
    background-color: #7e7e7e;
    align-self: center;
    text-align: center;
    font-size: 30px;
    color: white;
    width: auto;
}

/* ========== TEXT STYLING & ICONS ========== */

/* Green accent text for brand name "Green Prompt" in welcome message.
   Bright green color (#00a108) provides visual focus; larger bold font size. */
.green-text {
    color: rgb(0, 161, 8);
    font-size: 34px;
    font-style: bold;
    font-weight: bold;
}

/* Bold text styling within messages - dark gray color for emphasis.
   Used for labels and emphasized content within message boxes. */
.message strong {
    color: #333333;
}

/* Copy icon button - displayed next to messages for copying content to textarea.
   Purple color; changes shade on hover; cursor indicates clickable element. */
.copy-icon {
    cursor: pointer;
    margin-left: 10px;
    font-size: 1.2em;
    color: #463e88;
}

/* Copy icon hover state - darker purple indicates active interaction.
   Provides visual feedback when user hovers over copy button. */
.copy-icon:hover {
    color: #262141;
}

/* ========== MARKDOWN FORMATTING STYLES ========== */

/* Headings in formatted content */
.message h1,
.message h2,
.message h3,
.message h4,
.message h5,
.message h6 {
    margin-top: 15px;
    margin-bottom: 10px;
    color: var(--text-primary);
    font-weight: bold;
}

.message h1 {
    font-size: 24px;
    border-bottom: 2px solid #444444;
    padding-bottom: 8px;
}

.message h2 {
    font-size: 20px;
    color: #00a108;
}

.message h3 {
    font-size: 18px;
    color: #90ee90;
}

/* Paragraphs in formatted content */
.message p {
    margin: 10px 0;
    line-height: 1.6;
}

/* Lists in formatted content */
.message ul,
.message ol {
    margin: 10px 0;
    padding-left: 25px;
    color: var(--text-primary);
}

.message li {
    margin: 5px 0;
    line-height: 1.6;
}

/* Code blocks - monospace with dark background */
.message pre {
    background-color: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: 6px;
    padding: 12px;
    overflow-x: auto;
    margin: 10px 0;
}

.message pre code {
    color: var(--code-text);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
}

/* Inline code */
.message code.inline-code {
    background-color: #1a1a1a;
    border: 1px solid #333333;
    border-radius: 3px;
    padding: 2px 6px;
    color: #90ee90;
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

/* Links in formatted content */
.message a {
    color: #5a9fd4;
    text-decoration: none;
    border-bottom: 1px dotted #5a9fd4;
    transition: all 0.2s ease;
}

.message a:hover {
    color: #7cb5e0;
    border-bottom-color: #7cb5e0;
}

/* Strong (bold) text in formatted content */
.message strong {
    color: #90ee90;
    font-weight: bold;
}

/* Emphasis (italic) text in formatted content */
.message em {
    color: #ffff99;
    font-style: italic;
}

/* Optimized prompt content container */
.optimized-prompt-content {
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
}

/* ========== TABLE FORMATTING ========== */

/* Tables in formatted content */
.message table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    background-color: #1a1a1a;
    border: 1px solid #444444;
    border-radius: 6px;
    overflow: hidden;
}

/* Table headers */
.message thead {
    background-color: #262626;
}

.message th {
    padding: 12px 15px;
    text-align: left;
    color: #90ee90;
    font-weight: bold;
    border-bottom: 2px solid #444444;
    font-size: 13px;
}

/* Table cells */
.message td {
    padding: 10px 15px;
    color: #ffffff;
    border-bottom: 1px solid #333333;
    font-size: 13px;
}

/* Alternate row colors for better readability */
.message tbody tr:nth-child(odd) {
    background-color: #0f0f0f;
}

.message tbody tr:nth-child(even) {
    background-color: #1a1a1a;
}

/* Hover effect on rows */
.message tbody tr:hover {
    background-color: #252525;
}

/* Last row bottom border */
.message tbody tr:last-child td {
    border-bottom: none;
}

/* ========== BLOCKQUOTE FORMATTING ========== */

/* Blockquotes in formatted content */
.message blockquote {
    margin: 15px 0;
    padding: 12px 15px;
    border-left: 4px solid #00a108;
    background-color: #0f0f0f;
    border-radius: 4px;
    font-style: italic;
    color: #e0e0e0;
    font-size: 14px;
    line-height: 1.6;
}

/* Blockquote text styling */
.message blockquote strong {
    color: #90ee90;
    font-weight: bold;
    font-style: normal;
}

.message blockquote em {
    color: #ffff99;
    font-style: italic;
}

.message blockquote a {
    color: #5a9fd4;
    border-bottom-color: #5a9fd4;
}

.message blockquote a:hover {
    color: #7cb5e0;
    border-bottom-color: #7cb5e0;
}

/* ========== HORIZONTAL RULE FORMATTING ========== */

/* Horizontal rules for section separation */
.message hr {
    margin: 25px 0;
    border: none;
    border-top: 2px solid #00a108;
    background: none;
    height: 0;
}

/* Alternative styling - can be adjusted based on preference */
.message hr:hover {
    border-top-color: #00d911;
    transition: border-top-color 0.3s ease;
}

/* ========== STATUS DISPLAY STYLES ========== */

/* Status display clickable elements - hover effect for chatbot, format, tonality */
#status-chatbot,
#status-format,
#status-tonality {
    /*transition: all 0.2s ease;*/
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-tertiary);
}

#status-chatbot:hover,
#status-format:hover,
#status-tonality:hover {
    color: var(--status-button-font-hover);
    background-color: var(--status-button-bg-hover);
    border-radius: 6px;
    padding: 4px 12px;
    border: 1px solid var(--status-button-border-hover);
}

/* Slideshow Container - holds all slide layers */
.slideshow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;  /* Behind everything */
}

/* Each slide - positioned on top of each other */
.slideshow-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;  /* Start invisible */
    animation: slideshow-fade 20s infinite;  /* 20 seconds per cycle */
}

/* Individual slide images */
.slide1 {
    background-image: url("../images/image010.jpg");
    animation-delay: 0s;
}

.slide2 {
    background-image: url("../images/image009.jpg");
    animation-delay: 5s;  /* Start after 5 seconds */
}

.slide3 {
    background-image: url("../images/image008.jpg");
    animation-delay: 10s;  /* Start after 10 seconds */
}

.slide4 {
    background-image: url("../images/image007.jpg");
    animation-delay: 15s;  /* Start after 15 seconds */
}

/* Fade Animation - smooth opacity transitions */
@keyframes slideshow-fade {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;  /* Fade in over 1 second (5% of 20s) */
    }
    25% {
        opacity: 1;  /* Stay visible */
    }
    30% {
        opacity: 0;  /* Fade out over 1 second */
    }
    100% {
        opacity: 0;  /* Stay invisible */
    }
}

/* Chat Isolation Toggle Styles */
#chat-isolation-toggle {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#chat-isolation-toggle:hover {
    opacity: 1.0;
}

#chat-isolation-toggle:active {
    transform: scale(0.98);
}

#context-icon {
    transition: all 0.3s ease;
}

#status-context {
    transition: color 0.3s ease;
}

/* Chat Isolation Info Popup Specific Styles */
#chat-isolation-info-popup .popup-content ul {
    list-style-type: none;
}

#chat-isolation-info-popup .popup-content ul li {
    margin-bottom: 8px;
    padding-left: 5px;
}

#chat-isolation-info-popup .popup-content ul li:before {
    content: "• ";
    margin-right: 8px;
    font-weight: bold;
}

/* Chat Rename Popup Styles */
#chat-rename-popup {
    max-width: 400px;
}

#chat-rename-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 8px;
    background: var(--bg-controls-input);
    color: var(--text-primary);
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

#chat-rename-input:focus {
    outline: none;
    border-color: #2196F3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

.btn-primary, .btn-secondary {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
}

.btn-primary {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1976D2, #1565C0);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
}

.btn-secondary {
    background: var(--bg-controls-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color, #ccc);
}

.btn-secondary:hover {
    background: var(--bg-controls-hover, #f5f5f5);
    border-color: #999;
}

.btn-secondary:active {
    transform: scale(0.98);
}