/*button { font-size: 89%; border-radius: 5px; background: linear-gradient(#289228, darkgreen); padding: 1px 9px; cursor: pointer; color: white; opacity: 0.9; transition: 0.5s ease-in-out; margin-bottom: 6px;}*/
button, button[type="button"], button[type="reset"], button[type="submit"] {
    font-size: 89%;
    border-radius: 5px;
    background: linear-gradient(#8d8e8d, #353535);
    padding: 1px 9px;
    cursor: pointer;
    color: white;
    opacity: 0.9;
    transition: 0.5s ease-in-out;
    margin-bottom: 6px;
    border-color: #343434;
}
button:hover {opacity: 1;}
button:active, .button-active {background: linear-gradient(darkgreen, limegreen); }

/*zrusenie pico zeleny border after click on button*/
button:focus,
[role="button"]:focus,
[type="button"]:focus,
[type="reset"]:focus,
[type="submit"]:focus,
[type="file"]::file-selector-button:focus {
  --pico-border-color: var(--pico-primary-border) !important;
  --pico-box-shadow: none !important;
}


:root {
    --pico-font-size: 1.0rem;
    --pico-form-element-spacing-horizontal: 0.25rem;
    --pico-form-element-spacing-vertical: 0.05rem;
}


.floating-buttons {
    position: sticky;
    top: 0rem;
    z-index: 10;
    background-color: var(--pico-background-color);
    padding: 1rem 0;
}

.floating-panel {
    position: sticky;
    top: 0rem;
    z-index: 20;
    background-color: var(--pico-background-color);
    padding: 1rem 0;
    box-shadow: var(--card-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
}

.message-content {
  /* 1. Turn this container into a CSS Grid */
  display: grid;

  /* 2. Define our 3-column layout */
  grid-template-columns: 1fr minmax(0ch, 85ch) 1fr;
  /*
     1fr          -> The left gutter. Takes up 1 "fraction" of the leftover space.
     minmax(0, 85ch) -> The CENTER column. It will be a maximum of 85ch wide,
                      but can shrink if the screen is smaller.
     1fr          -> The right gutter. Also takes up 1 fraction of leftover space.
  */
  width: 100%;
}

.message-content > * {
  grid-column: 2;
}

/* 4. This is the "breakout" rule! */
/*    Target our special, wide elements and tell them to span ALL columns,
      from the very first grid line (1) to the very last one (-1). */
.message-content > pre,
.message-content > table {
  grid-column: 1 / -1;
  overflow-x: auto;
  justify-self: center;
  max-width: 100%; 
  width: fit-content;
}
/*.messages-container pre {
  max-width: 100%;
  overflow-x: auto; 
}*/

.message-content > pre {
    /* 1. Position: Allow spanning the full grid */
    grid-column: 1 / -1;
    
    /* 2. Alignment: Center the block in the viewport */
    margin-left: auto;
    margin-right: auto;
    
    /* 3. The Floor: Be 85ch, but shrink safely on small screens */
    /* This fixes the "Saboteur" bug while keeping the alignment you want */
    min-width: min(100%, 96ch);
    
    /* 4. The Elasticity: Grow if the code line is long */
    width: fit-content;
    
    /* 5. The Ceiling: Stop growing at the window edge */
    max-width: 100% !important;
    
    /* 6. The Safety: Scroll internally if code exceeds window edge */
    overflow-x: auto;
    
    /* Optional: Reset borders if you want it to look "floating" when centered */
    border-radius: 6px; 
}

.message-user {
    background-color: #2d2d2d; 
    border-left: 4px solid #3498db; /* A nice blue accent border */
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    max-width: 85ch;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    /*scroll-margin-top: -800px; */
    /*takze toto je alignment smerom odspodu hore, element top. (negative number). 
    JS: userMsgEl.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });   
    cize asi to potrebujem nastavit dynamicky, vyska scrollera minus vyska headera (moze sa menit) = toto cislo
    a dosiahnem ze msg user bude na vrchu. To nam vyhovuje, ale nam to nevyhovuje, ak je user msg prilis dlha (vysoka, height).
    Vtedy potrebujeme aby user msg trcal len jeho spodok nejakych 200. 
    */
    scroll-margin-bottom: 600px;
    /* toto je aligmnet tiez odspodu, ale element bottom. JS je rovnaky. Cize len trci spodok userovej dlhej msg a zvysok (600px) je uz odpoved modelu.
      */

}

.selected {
    background-color: var(--primary-focus, rgba(16, 149, 193, 0.125));
}

.resizable-container {
    display: flex;
    height: 100vh;
}

.left-pane {
    flex: 0 0 20%;
    overflow-y: auto;
    padding: 0 0rem 1rem 0rem;
}

/*.right-pane {
    flex: 1;
    overflow-y: auto;
    padding: 0 1rem 1rem 1rem;
}*/

.right-pane {
    flex: 1;
    display: flex;       /* NEW */
    flex-direction: column; /* NEW */
    overflow: hidden;    /* Stop the whole pane from scrolling */
    padding: 0;          /* Remove padding from container, move to children */
    position: relative;
}

.resizer {
    flex: 0 0 5px;
    cursor: col-resize;
    background-color: black;
    user-select: none;
}

.resizer:hover {
    background-color: grey;
}

.loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 1.5rem;
}

.thought {
    background-color: #2d2d2d;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    max-width: 85ch;
    margin-left: auto;
    margin-right: auto;    
}

.thought div:first-child {cursor: pointer; padding: 5px 0;}

ul.left-menu {padding: 0;}

.left-menu li {
  border-radius: 4px;
  list-style: circle;
}

/* You can also make the link text bold */
.left-menu li a {
  font-weight: normal;
  color: #e2e2e2;
  text-decoration: none;
  display: inline;
}

.left-menu li a:hover {
  background: #4c4c4c;
}

/* You can also make the link text bold */
.left-menu li a.selected {
  font-weight: bold;
}

.tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.tags li {
    border: 1px solid grey;
    border-radius: 8px;
    padding: 2px 4px;
    margin: 2px 5px 2px 0px;
    background: #282828;
    cursor: pointer;
    transition: 0.5s ease-in-out;
    list-style: none;
}

.tags li:hover {
  background: #4c4c4c;
}

.tags li:active {
    background: #9C27B0;
    transition: 0.05s ease-in-out;
}

.tags li.tag-active {
  background-color: purple;
}

.sticky-banner{
    position: sticky;
    top: 65px;
    z-index: 10;
}

.message-tag-list {
  background-color: var(--pico-background-color); 
  /* ... your flex, gap, padding, etc. styles ... */
  display: flex;
  gap: 5px;
  padding: 8px 0; /* Add some vertical padding */
  list-style: none;
  margin: 0;
  justify-content: flex-end;
  max-width: 85ch;
  margin-left: auto;
  margin-right: auto;
}

.message-tag-list li {
  font-size: 0.75rem; /* Make them a bit smaller than the main tags */
  background-color: #3a3a3a;
  color: #ccc;
  padding: 2px 6px;
  border-radius: 4px;
  list-style: none;
  cursor: pointer;
  transition: 0.5s ease-in-out;
}

.message-tag-list li:hover {
  background-color: #555;
}

.message-tag-list li:active {
  background-color: #9C
}

.floating-panel h4 {display: inline;
    padding: 0 0.5em;
}

.floating-panel h4 span {
    font-weight: normal;
    font-size: 0.9rem;
    color: #888;
}


.cursor-pointer {cursor: pointer;}

.loading-indicator {
    display: flex;
    flex-direction: column; /* Stack the text vertically */
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 1.5rem;
    /*color: #888;  A softer color */
}
.loading-indicator div {
    padding: 0.25rem 0; /* Add some space between the lines */
}

.loading-indicator div:last-child {
  font-size: 3rem;
}

.new-chat-placeholder {
    text-align: center;
    margin-top: 20vh;
    color: #888;
}

.drag-over {
    /* A nice, subtle highlight effect */
    background-color: rgba(0, 128, 0, 0.1) !important;
    border: 2px dashed green !important;
}


.annotations-container {
    max-width: 85ch;
    margin-left: auto;
    margin-right: auto;
    position: relative; 
    margin-bottom: 10px;
}

.note-display {
    background-color: #222;
    border-left: 4px solid #9C27B0; 
    padding: 10px;
    margin: 10px 0;
    font-style: italic;
    color: #ccc;
    border-radius: 4px;
}

.note-editor {
    margin-top: 10px;
}

.note-editor textarea {
    width: 100%;
    min-height: 80px;
    background-color: #222;
    color: #eee;
    border: 1px solid #555;
}

.answer > p {margin: 0;}

.annotations-ui {
    max-width: 85ch;
    margin: auto;
    text-align: right;
    min-height: 30px;
    position: relative;
}

.annotations-ui-user {
    position: absolute;
    bottom: 5px;
    z-index: 5;
    right: 10px;
}

/* The hamburger/kebab menu button itself */
.actions-menu-button {
    background: #444;
    border: none;
    border-radius: 5px;
    color: white;
    padding: 2px 8px;
    font-size: 1.2rem;
    line-height: 1;
}

/* The dropdown menu that appears on click */
.actions-submenu {
    position: absolute;
    top: 100%; /* Position it right below the button */
    right: 0;
    background: #333;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 5px;
    min-width: 180px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    z-index: 20;
}

/* The dropdown menu that appears on click, but show on the top of the button*/
.actions-submenu2 {
    position: absolute;
    bottom: 100%; /* Positions the bottom of the menu at the top of the button */
    right: 0;
    background: #333;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 5px;
    min-width: 180px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    z-index: 20;
}

.actions-submenu button, .actions-submenu2 button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    margin-bottom: 0;
}
.actions-submenu button:hover, .actions-submenu2 button:hover{
    background: #555;
}

/* Add this new CSS to your main.css file */

.keywords-container {
    margin-top: 15px;
}

.keyword-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    max-width: 85ch;
    margin-left: auto;
    margin-right: auto;
}

.keyword-list li {
    display: flex;
    align-items: center;
    background-color: #3e3e3e;
    color: #eee;
    padding: 4px 8px;
    border-radius: 8px; 
    font-size: 0.8rem;
}

.remove-keyword {
    margin-left: 8px;
    cursor: pointer;
    font-weight: bold;
    color: #aaa;
    font-size: 1.2rem;
    line-height: 0.8;
}

.remove-keyword:hover {
    color: white;
}

input.keyword-input {
    width: 100%;
    background-color: #222;
    color: #eee;
    border: 1px solid #555;
    padding: 8px;
    border-radius: 4px;
}

.keyword-input-wrapper {
  max-width: 85ch;
  margin-left: auto;
  margin-right: auto;
}

.highlight-palette {
    display: inline-flex; /* Use flexbox for alignment */
    gap: 5px;
    padding: 0 10px;
    vertical-align: middle; /* Align it nicely with the buttons */
}

.color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}

.color-swatch:hover {
    transform: scale(1.2);
    border-color: white;
}

.unhighlight-button {
    font-size: 24px;
    text-align: center;
    line-height: 17px; /* Center the symbol vertically */
    color: #aaa;
    background-color: #333;
}

.unhighlight-button:hover {
    background-color: #555;
    color: white;
}

.kokot {background-color: yellow;}


.highlight1 { background-color: #523307; }
.highlight2 { background-color: #013220; }
.highlight3 { background-color: #3e114f; }
.highlight4 { background-color: #4a0d0d; }
/*.highlight5 { background-color: #524307; }*/
.highlight5 { background-color: #071b52; }
.highlight6 { background-color: #08324a; }

/* We can also create a generic style for all highlights */
.highlight1, .highlight2, .highlight3, .highlight4, .highlight5, .highlight6 {
    color: white;
    /*padding: 0.1em 0.2em;*/
    border-radius: 4px;
}

.highlight-selected {
    /* Add a strong visual cue. An outline is better than a box-shadow for performance. */
    /*outline: 2px dotted hotpink;
    outline-offset: 2px;*/
    border-bottom: 1px dashed white;
}

.search-results-container h3 {
    font-size: 1.2rem;
    color: #ccc;
    border-bottom: 1px solid #444;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.search-result-item {
    margin-bottom: 2rem;
}

.search-result-title {
    display: block;
    font-weight: bold;
    color: #cbcbcb;
    text-decoration: none;
    background-color: #252525;
    padding: 0.5rem;
    border: 1px solid grey;
    border-radius: 0 0 8px 8px;
}

.search-result-title span {
    font-weight: normal;
    font-size: 0.9rem;
    color: #888;
}

.search-result-title:hover {
    color: #aaa;
}

/* The default <mark> style from the browser is often yellow.
   Let's make it fit our theme. */
mark {
    background-color: #a040a0; /* A nice purple */
    color: white;
}

.search-summary {
    color: #888;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.highlight-jump {
    /* Create a brief, noticeable flash effect */
    animation: highlight-animation 2s ease-in-out;
}

@keyframes highlight-animation {
    0% {
        background-color: rgba(0, 170, 255, 0); /* Start transparent */
    }
    25% {
        background-color: rgba(0, 170, 255, 0.3); /* Flash to blue */
    }
    100% {
        background-color: rgba(0, 170, 255, 0); /* Fade back to transparent */
    }
}

/* Login / Gatekeeper Styles */
.login-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-color: #1a1a1a; /* Match your dark theme */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.login-card {
    background: #2d2d2d;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    text-align: center;
    max-width: 400px;
    width: 90%;
}

.google-btn {
    background-color: white;
    color: #FFF;
    border: 1px solid #ccc;
    font-weight: bold;
    padding: 10px 20px;
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
}
.google-btn:hover {
    background-color: #8f8e8eff;
    color: white;
    border-color: #ccc;
    opacity: 1;
}

.user-profile-pic {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}

.button-logout {float: right; margin: 0 2px;}

.tag-conversation-info {
    max-width: 112ch;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    font-size: 0.75rem;
    color: #888;
}

.tag-conversation-info a {
    color: gray;
    text-decoration: none;
    position: relative; /* Anchors the pseudo-element */
    display: inline-block; /* Ensures the underline matches the text width */
    padding-bottom: 2px; /* Give the underline a little breathing room */
}

/* The invisible line waiting in the center */
.tag-conversation-info a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0); /* Start with 0 width */
    height: 1px; /* Thickness of the line */
    bottom: 0;
    left: 0;
    background-color: gray;
    transform-origin: bottom center; /* THE MAGIC: Anchors the growth to the center */
    transition: transform 0.3s ease-out; /* The speed of the spread */
}

/* The Trigger */
.tag-conversation-info a:hover::after {
    transform: scaleX(1); /* Expand to 100% width */
}

/* Optional: Make the text slightly brighter on hover so it's not just the line reacting 
cancelled, it's too beautiful (distraction)
.tag-conversation-info a:hover {
    color: #a0a0a0; 
}*/

/* The container for the actual bubbles - This is what scrolls now */
.messages-scroller {
    flex: 1;             /* Take all available height */
    overflow-y: auto;    /* Enable scrolling inside */
    padding: 0 1rem;      /* Add the padding back here */
    padding-bottom: 20px;
    scroll-behavior: smooth;
}

.messages-scroller:focus {
    outline: none;
}

/* The Fixed Footer */
.chat-footer {
    flex: 0 0 auto;      /* Don't shrink */
    background-color: var(--pico-background-color);
    padding-top: 1rem;
    z-index: 50;
    padding-bottom: 0.5rem;
}

/* The "Visual Textarea" Container */
.input-wrapper {
    display: flex;
    align-items: flex-end; /* Align button to bottom of textarea */
    background-color: #2d2d2d; /* Darker background for input area */
    border: 1px solid #555;
    border-radius: 12px;
    padding: 0px;
    transition: border-color 0.2s;
    max-width: 85ch;
    margin: 0 auto; /* Center it */
    flex-direction: column; /* Stack Tray on top of Textarea */
    align-items: stretch;   /* Stretch children to full width */
}

.input-wrapper:focus-within {
    border-color: #3498db; /* Blue glow on focus */
}

/* The Actual Textarea */
.chat-textarea {
    flex: 1;
    background: transparent;
    border: none;
    color: #eee;
    resize: none; /* We handle auto-resize via JS */
    outline: none;
    min-height: 24px;
    max-height: 200px; /* Max 10 rows approx */
    line-height: 1.5;
    font-family: inherit;
    font-size: 1rem;
    padding: 4px;
    overflow-y: auto; /* Scroll if > 10 rows */
    margin: 0;
    width: 100%;
}

/* Kill Pico.css focus effects on the chat input */
.chat-textarea:focus {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    /* Optional: Reset Pico's specific variable if !important feels too aggressive 
    --pico-box-shadow: 0 0 0 0 transparent; */
}

/* The Submit Button */
.send-button {
    background: #343434; /* Subtle button */
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 8px;
    transition: all 0.2s;
    color: #aaa;
    margin-bottom: 2px; /* Align with text baseline */
}

.send-button:hover {
    background: #3498db;
    color: white;
}

.send-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: transparent;
}

.send-button.stop-active { background: linear-gradient(#28a745, #095b00); }
.send-button.stop-active:hover { background: linear-gradient(#a73828, #5b0000); }

.thinking-placeholder {
    color: #888;
    font-family: monospace;
    animation: pulse 2s infinite; /* Optional: gentle pulse */
    max-width: 85ch;
    margin: 0 auto; 
    padding: 0.5rem;
}

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

.footer-meta-bar {
    display: block;
    align-items: center;
    max-width: 113ch;
    margin: 6px auto 0;
    font-size: 0.75rem;
    color: #666;
}

.mini-select {
    background: transparent;
    border: none;
    color: #666;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0;
    margin: 0;
    outline: none;
    transition: color 0.2s;
    font-family: inherit;
    /* Remove default arrow in some browsers for cleaner look, or keep it */
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
}

.mini-select:hover {
    color: #999;
}

.mini-select option {
    background-color: #2d2d2d;
    color: #eee;
    padding: 5px;
}

.token-metrics {
    text-align: right;
    padding: 0 0.5rem;
    float: right;
}

.model-selector-wrapper{
    float: right;
}

/* Header Button */
.info-toggle-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #666;
    color: #888;
    font-family: serif; /* Gives it that classic "Info" look */
    font-weight: bold;
    font-style: italic;
    font-size: 0.8rem;
    cursor: pointer;
    margin-left: 10px;
    padding: 0;
    line-height: 1;
    transition: all 0.2s;
}

.info-toggle-btn:hover {
    border-color: #aaa;
    color: #aaa;
}

/* Active "Pressed" State */
.info-toggle-btn.active-info {
    background: linear-gradient(to bottom, #333, #444); /* Inset shadow effect */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
    color: #ccc;
    border-color: #555;
}

/* Meta Data Base Style */
.message-meta {
    font-size: 0.75rem;
    color: #666;
    font-family: monospace;
}

/* User Bubble Meta (Bottom Right inside the bubble) */
.user-meta {
    text-align: right;
    max-width: 111ch;
    margin: 0 auto;
}

/* Model Bubble Meta (Inside .annotations-ui) */
.model-meta {
    float: right; /* Force it to the left side */
    margin-top: 4px; /* Align vertically with the kebab button */
}

/* Settings Pane Overrides */
.settings-pane {
    background-color: #1e1e1e;
}

/* Settings Menu Specifics */
.settings-menu .menu-parent {
    font-weight: bold;
    color: #eee;
    background-color: transparent; /* Parents usually don't have bg unless hovered */
    border: none;
}

.settings-menu .menu-parent:hover {
    color: white;
    background-color: #333;
}

.settings-menu .arrow {
    display: inline-block;
    width: 15px;
    font-size: 0.7rem;
    color: #888;
}

/* Indent the Submenu */
ul.submenu {
    padding-left: 20px; /* The Tree Indent */
    margin-top: 5px;
    margin-bottom: 10px;
}

/* Tweak submenu items to look smaller/tighter */
ul.submenu li a {
    font-size: 0.9rem;
    padding: 4px 8px;
    border-left: 2px solid transparent; /* Visual guide */
}

ul.submenu li a:hover {
    border-left-color: #555;
}

ul.submenu li a.selected {
    background-color: #2d2d2d;
    border-left-color: #4caf50; /* Green active marker */
    font-weight: normal; /* Don't bold the month, just highlight it */
}

.selected-parent {
    color: white !important;
    border-left: 3px solid #3498db !important; /* Blue marker */
    background-color: #2a2a2a;
}

.billing-header {
    padding: 20px 0;
    border-bottom: 1px solid #444;
    margin-bottom: 20px;
}

.big-total {
    font-size: 2rem;
    font-weight: bold;
    color: #4caf50; /* Money Green */
}

/* Filters */
.filter-chip {
    background: #333;
    border: 1px solid #555;
    border-radius: 16px;
    padding: 4px 12px;
    margin-right: 5px;
    font-size: 0.8rem;
    opacity: 0.5;
    cursor: pointer;
}
.filter-chip.active {
    opacity: 1;
    border-color: #4caf50;
    background: #2e3e2e;
}

/* Day Groups */
.billing-day-group {
    margin-bottom: 30px;
}

.day-header {
    display: flex;
    justify-content: space-between;
    background: #252525;
    padding: 8px 12px;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #444;
}

.day-date { font-weight: bold; color: #ccc; }
.day-total { color: #888; }

/* Table */
.billing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.billing-table td, .billing-table th {
    padding: 8px 12px;
    border-bottom: 1px solid #333;
    text-align: left;
}

.billing-table th { color: #888; font-weight: normal; }
.text-right { text-align: right !important; }
.dim-text { color: #666; }

.badge {
    background: #333;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #aaa;
}

.billing-table tr:hover {
    background-color: #2a2a2a;
}

.header-cost {
    font-size: 0.8rem;
    color: #888;
    margin-left: 10px;
    font-weight: normal;
}

.cost-value {
    color: #ccc;
    font-family: monospace;
}

.cost-label {
    color: #666;
}

.cost-separator {
    margin: 0 5px;
    color: #444;
}

.icon-button {
    background: transparent;
    border: 1px solid #444; /* Subtle border */
    color: #888;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0px 6px;
    margin-right: 8px; /* Space between clip and select */
    border-radius: 4px;
    line-height: 1.5;
    transition: all 0.2s;
    vertical-align: middle;
}

.icon-button:hover {
    border-color: #666;
    color: #ccc;
    background-color: #333;
}

/* TRAY */
.attachment-tray {
    display: flex;
    gap: 10px;
    padding: 8px 8px 4px 8px;
    flex-wrap: wrap;
    width: 100%;       /* Force full width */
    box-sizing: border-box; /* Include padding in width */
    /* border-bottom: 1px solid #444;  Optional separator line */    
}

.att-pill {
    background: #3a3a3a;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 4px;
    padding-right: 8px;
    font-size: 0.8rem;
    color: #ddd;
    border: 1px solid #555;
}

.att-icon img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
    margin-right: 6px;
}

.att-close {
    margin-left: 8px;
    cursor: pointer;
    color: #999;
    font-weight: bold;
}
.att-close:hover { color: white; }

/* GALLERY */
.att-gallery {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
    max-width: 85ch;
    margin: auto;
}

.att-card {
    width: 120px;
    height: 100px;
    background: #222;
    border: 1px solid #444;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s;
}
.att-card:hover { border-color: #777; }

.att-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.att-doc-icon {
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: #2a2a2a;
}

.att-card-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.7);
    color: white;
    font-size: 0.7rem;
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* LIGHTBOX */
.lightbox-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lightbox-img {
    max-width: 95%;
    max-height: 95%;
    box-shadow: 0 0 20px black;
}

.textarea-row {
    display: flex;
    width: 100%;       /* Force full width */
    align-items: flex-end;
    padding: 4px;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 3rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
    z-index: 2001; /* Above image */
}

.lightbox-close:hover {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* Dim the pill while loading */
.att-pill.att-loading {
    opacity: 0.7;
    border-style: dashed;
}

/* Tiny Spinner */
.spinner-small {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-right: 6px;
}

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

/* Interactive state for finished uploads */
.att-pill.att-clickable {
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.att-pill.att-clickable:hover {
    background-color: #444;
    border-color: #777;
}

/* Ensure the close button interactions don't conflict visually */
.att-close:hover {
    color: #ff6b6b; /* Optional: Make the X red on hover for clarity */
}

/* Drag & Drop Feedback for Chat Pane */
.right-pane.drag-over {
    /* Use Box Shadow instead of Border to prevent layout resizing/jumping */
    box-shadow: inset 0 0 0 4px #4caf50;
    position: relative; /* Ensure shadow renders relative to container */
}

/* Optional: Add a "Drop Here" overlay text via pseudo-element */
.right-pane.drag-over::after {
    content: "Drop files to attach";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px 40px;
    border-radius: 8px;
    font-size: 1.5rem;
    pointer-events: none; /* Let the drop pass through to the element */
    z-index: 1000;
}

/*BOOKS in conversations*/

/* Sidebar Row Container */
.sidebar-row {
    padding: 0px 0px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Selected State (Moves from the A to the DIV) */
.sidebar-row.row-selected {
    background-color: #444; /* Or your theme's active color */
}

/* Link 1: The Book */
.book-link {
    color: #888;
    font-weight: bold;
    font-size: 0.85em;
    text-decoration: none;
}
.book-link:hover {
    color: #3498db; /* Blue hover for book */
    text-decoration: underline;
}

/* Separator */
.separator {
    color: #666;
}

/* Link 2: The Chat */
.title-link {
    color: #e2e2e2;
    text-decoration: none;
    font-size: 0.85em;
}
.title-link:hover {
    color: white;
    text-decoration: underline;
}

/* 1. Header Visibility: Don't hide the scroller, hide the contents instead */
.right-pane.input-is-expanded .conversation-turn,
.right-pane.input-is-expanded .new-chat-placeholder,
.right-pane.input-is-expanded .search-results-container,
.right-pane.input-is-expanded .thinking-placeholder {
    display: none !important;
}

/* 2. Prevent the scroller from taking up space */
.right-pane.input-is-expanded .messages-scroller {
    flex: 0 0 auto; /* It only takes as much space as the header needs */
    padding-bottom: 0;
}

/* 3. Make footer fill the rest of the window below the header */
.right-pane.input-is-expanded .chat-footer {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 0; /* Align closer to header */
}

/* 4. Ensure the input wrapper stretches */
.right-pane.input-is-expanded .input-wrapper {
    flex: 1;
    display: flex;          /* Ensure it's a flex container */
    flex-direction: column;
    width: 100%;            /* Force it to try to be wide */
    max-width: 98%;         /* Allow it to be much wider than the standard 85ch */
    margin: 0 auto 10px;    /* Center horizontally */
}

/* Ensure the row inside stretches as well */
.right-pane.input-is-expanded .textarea-row {
    flex: 1;
    display: flex;
    width: 100%;
    align-items: stretch;   /* Vertical stretch for textarea */
}

/* Make sure the textarea itself takes the full width of its row */
.right-pane.input-is-expanded .chat-textarea {
    flex: 1;
    width: 100%;
    max-height: none !important;
    height: 100% !important;
    /*font-family: 'Consolas', 'Monaco', 'Courier New', monospace;*/
}

/* 6. Keep the send button at the bottom right of the expanded area */
.right-pane.input-is-expanded .send-button {
    align-self: flex-end;
    margin-bottom: 10px;
}

/* Container for the code block */
.message-model pre, .message-user pre  {
    position: relative;
}

/* The Copy Button */
button.copy-code-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0; /* Hidden by default */
    transition: all 0.2s ease;
    z-index: 10;
    line-height: 1.2;
}

/* Show button on hover */
.message-model pre:hover .copy-code-btn, .message-user pre:hover .copy-code-btn {
    opacity: 1;
}

.copy-code-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Success state after clicking */
.copy-code-btn.copied {
    color: #4caf50;
    border-color: #4caf50;
}

@media print {
    /* 1. Skryjeme všetko, čo nechceme na papieri (menu, footer, tlačidlá) */
    .left-pane, 
    .resizer, 
    .chat-footer, 
    .floating-buttons, 
    .floating-panel,
    .info-toggle-btn,
    .actions-menu-button,
    .button-logout,
    .sticky-banner {
        display: none !important;
    }

    /* 2. Zrušíme fixné výšky a scrollovanie kontajnerov */
    html, body, .resizable-container, .right-pane, .messages-scroller {
        height: auto !important;
        overflow: visible !important;
        display: block !important;
        position: static !important;
    }

    /* 3. Upravíme šírku obsahu na celú stranu */
    .message-content, 
    .message-user, 
    .thought, 
    .annotations-container,
    .keyword-list {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 4. Farby: Pre šetrenie tonera vynútime biele pozadie a čierny text */
    body {
        background: white !important;
        color: black !important;
    }

    .message-user, .thought, .answer {
        background: #f5f5f5 !important; /* Jemne šedá pre odlíšenie */
        color: black !important;
        border: 1px solid #ddd !important;
        /*page-break-inside: avoid; */ /* Zabráni rozseknutiu bubliny v polovici na dve strany */
        margin-bottom: 15px !important;
    }

    /* 5. Kódové bloky (Pre-formatted text) */
    pre {
        white-space: pre-wrap !important; /* Zalomenie dlhých riadkov kódu */
        background: #f8f8f8 !important;
        border: 1px solid #ccc !important;
        color: black !important;
    }

    /* Odstránime tlačidlá na kopírovanie kódu z tlače */
    .copy-code-btn {
        display: none !important;
    }

    /* Zobrazenie príloh (ak sú obrázky, nech sú vidno) */
    .att-gallery {
        display: block !important;
    }
    /*.att-card {
        break-inside: avoid;
    }*/

    /* Prepis highlightov na pastelové verzie pre biely papier */
    .highlight1 { background-color: #fff9c4 !important; color: black !important; } /* Žltá */
    .highlight2 { background-color: #c8e6c9 !important; color: black !important; } /* Zelená */
    .highlight3 { background-color: #e1bee7 !important; color: black !important; } /* Fialová */
    .highlight4 { background-color: #ffcdd2 !important; color: black !important; } /* Červená/Ružová */
    .highlight5 { background-color: #ffe0b2 !important; color: black !important; } /* Oranžová */
    .highlight6 { background-color: #b3e5fc !important; color: black !important; } /* Modrá */    

    /* Zabezpečíme, aby prehliadač tie farby naozaj vytlačil */
    * {
        -webkit-print-color-adjust: exact !important;   /* Chrome, Safari, Edge */
        print-color-adjust: exact !important;           /* Firefox */
    }

}

/* Mobile & Tablet Optimization */
@media (max-width: 1024px) {
    .resizer {
        display: none !important;
    }

    .left-pane {
        position: fixed;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        z-index: 2000;
        background-color: var(--pico-background-color);
        padding: 1rem;
        flex: none !important;
    }

    /* Add a padding for the right pane so the hamburger is reachable */
    .right-pane {
        flex: 1 1 100%;
        width: 100%;
    }
    
    /* Ensure the sticky header in chat doesn't overlap phone status bars if needed */
    .floating-panel {
        padding-top: 0.5rem;
    }

    /* fix for code blocks on iphone */
    .message-content {
        /* On mobile, gutters are tiny (10px) and content takes the rest */
        grid-template-columns: 10px 1fr 10px;
    }
    
    .message-content > pre {
        /* Ensure the pre block doesn't try to be wider than the phone screen */
        width: 100%;
        box-sizing: border-box;
    }    
}

/* Add a specific close button for the sidebar on mobile 
   so users can go back without selecting a chat */
.mobile-close-sidebar {
    display: none;
    float: right;
    font-size: 1.5rem;
    padding: 0 10px;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .mobile-close-sidebar {
        display: block;
    }
}

/* Specific optimizations for iPhone / Small Screens */
@media (max-width: 600px) {
    
    /* Next: Hide the conversation title H4 in the header */
    .floating-panel h4 {
        display: none !important;
    }

    /* Next: Hide token metrics in the footer */
    .token-metrics {
        display: none !important;
    }

    /* Next: Shorten model selector */
    .mini-select {
        max-width: 130px; /* Reduced from 185px */
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    /* Adjust padding for the header on tiny screens since H4 is gone */
    .floating-panel {
        padding: 0.5rem 0;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    /* Make sure buttons in header stay compact */
    .button-show-left-pane, .button {
        margin-bottom: 0;
    }
    
    /* Ensure footer buttons don't wrap awkwardly */
    .footer-meta-bar {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
}

.scroll-bottom-btn {
    position: absolute;
    bottom: 100px;
    right: 20px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(40, 146, 40, 0.9);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    
    /* Animation logic */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.2s ease;
}

/* The "Visible" state toggled by JS */
.scroll-bottom-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.scroll-bottom-btn:active {
    transform: scale(0.9);
}

/* Hide on Desktop */
@media (min-width: 1025px) {
    .scroll-bottom-btn { display: none !important; }
}

.right-pane.input-is-expanded .scroll-bottom-btn {
    bottom: 20px;
}

.header-context-menu-wrapper {
    display: inline-block;
    vertical-align: middle;
}

/* Ensure the menu appears above other elements if needed */
.header-context-menu-wrapper .actions-submenu {
    min-width: 160px;
    margin-top: 5px;
}