/* =====================================
   SPRING THEME
   ===================================== */
body.spring {
    background-color: #FFF8CC; / Spring background /
    color: #4b5a3d; / Spring text color /
}

body.spring #chat-container {
    background-color: #FFFFFF;
    border-color: #C0D9A3; / Spring border color /
}

body.spring #send-btn {
    background-color: #F5AEBF;
    color: #4b1f29;
}

body.spring textarea,
body.spring #user-input {
    border: 1px solid #C0D9A3;
    background-color: #FFFFFF;
    color: #000;
}

/* SPRING — dropdowns (details/summary) */
body.spring summary {
    background: #E6F2D6;
    padding: 6px;
    cursor: pointer;
}

body.spring details {
    background: #F8FDF3;
    border: 1px solid #C0D9A3;
    
    padding: 4px;
    margin-bottom: 8px;
}

/* SPRING — secondary buttons */
body.spring button.secondary {
    background: #E6F2D6;
    color: #2d4a2d;
    border: 1px solid #C0D9A3;
}

/ SPRING — primary button (send) /
body.spring button.primary {
    background: #F5AEBF;
    color: #4b1f29;
}

/* SPRING — Message styles */
body.spring .msg {
    margin: 6px 0;
    max-width: 80%;
    padding: 6px 8px;
    
    font-size: 13px;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #E6F2D6; / Spring msg background /
    color: #4b5a3d; / Spring msg text color /
}

body.spring .msg.user {
    background: #F5AEBF; / Spring user msg background /
    margin-left: auto;
   

}

body.spring .msg.assistant {
    background: #F8FDF3; / Spring assistant msg background /
    margin-right: auto;
}

body.spring .msg.system {
    background: #FFF8CC; / Spring system msg background /
    margin-right: auto;
    font-style: italic;
    font-size: 12px;
}

body.spring .msg .msg-meta {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 2px;
}

body.spring .msg .msg-body {
    font-size: 13px;
}

body.spring .msg-body code {
    background-color: #C0D9A3; / Spring code background /
    font-family: monospace;
    padding: 2px 4px;
    
}

body.spring .msg-body strong {
    font-weight: bold;
}

body.spring .msg-body em {
    font-style: italic;
}

body.spring .msg-heading {
    margin-top: 10px;
    font-weight: bold;
}

body.spring .msg-heading.h1 { font-size: 1.5em; }
body.spring .msg-heading.h2 { font-size: 1.3em; }
body.spring .msg-heading.h3 { font-size: 1.1em; }

body.spring .msg.assistant h1,
body.spring .msg.assistant h2,
body.spring .msg.assistant h3 {
    margin: 4px 0 2px 0;
    font-weight: 600;
}

body.spring .msg.assistant h1 {
    font-size: 16px;
}

body.spring .msg.assistant h2 {
    font-size: 15px;
}

body.spring .msg.assistant h3 {
    font-size: 14px;
}

body.spring .msg.user h1,
body.spring .msg.user h2,
body.spring .msg.user h3 {
    margin: 4px 0 2px 0;
    font-weight: 600;
}

body.spring .msg code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    padding: 1px 3px;
    
    background: #C0D9A3; / Spring code background /
}


/* =====================================
   SUMMER THEME
   ===================================== */
body.summer {
    background-color: #FFE590; / Summer background /
    color: #5a3d1f; / Summer text color /
}

body.summer #chat-container {
    background-color: #FFFFFF;
    border-color: #CCDD8A; / Summer border color /
}

body.summer #send-btn {
    background-color: #ffbf00;
    color: #fff;
}

body.summer textarea,
body.summer #user-input {
    border: 1px solid #CCDD8A;
    background-color: #FFFFFF;
    color: #000;
}

/ SUMMER — dropdowns /
body.summer summary {
    background: #FFECB5;
    padding: 6px;
    
    cursor: pointer;
}

body.summer details {
    background: #FFF9E6;
    border: 1px solid #FCD34D;
    
    padding: 4px;
    margin-bottom: 8px;
}

/ SUMMER — secondary buttons /
body.summer button.secondary {
    background: #FFECB5;
    color: #5a3d1f;
    border: 1px solid #FCD34D;
}

/ SUMMER — primary /
body.summer button.primary {
    background: #FDE047;
    color: #4a3b15;
}

/ SUMMER — Message styles /
body.summer .msg {
    margin: 6px 0;
    max-width: 80%;
    padding: 6px 8px;
     
    font-size: 13px;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #FFECB5; / Summer msg background /
    color: #5a3d1f; / Summer msg text color /
}

body.summer .msg.user {
    background: #EC83C5; / Summer user msg background /
    margin-left: auto;
}

body.summer .msg.assistant {
    background: #FFF9E6; / Summer assistant msg background /
    margin-right: auto;
}

body.summer .msg.system {
    background: #FFE590; / Summer system msg background /
    margin-right: auto;
    font-style: italic;
    font-size: 12px;
}

body.summer .msg .msg-meta {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 2px;
}

body.summer .msg .msg-body {
    font-size: 13px;
}

body.summer .msg-body code {
    background-color: #FFFFFF / Summer code background /
    font-family: monospace;
    padding: 2px 4px;
    
}

body.summer .msg-body strong {
    font-weight: bold;
}

body.summer .msg-body em {
    font-style: italic;
}

body.summer .msg-heading {
    margin-top: 10px;
    font-weight: bold;
}

body.summer .msg-heading.h1 { font-size: 1.5em; }
body.summer .msg-heading.h2 { font-size: 1.3em; }
body.summer .msg-heading.h3 { font-size: 1.1em; }

body.summer .msg.assistant h1,
body.summer .msg.assistant h2,
body.summer .msg.assistant h3 {
    margin: 4px 0 2px 0;
    font-weight: 600;
}

body.summer .msg.assistant h1 {
    font-size: 16px;
}

body.summer .msg.assistant h2 {
    font-size: 15px;
}

body.summer .msg.assistant h3 {
    font-size: 14px;
}

body.summer .msg.user h1,
body.summer .msg.user h2,
body.summer .msg.user h3 {
    margin: 4px 0 2px 0;
    font-weight: 600;
}

body.summer .msg code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    padding: 1px 3px;
    
    background: #CCDD8A; / Summer code background /
}


/* =====================================
   AUTUMN THEME
   ===================================== */
body.autumn {
    background-color: #E6D146; / Autumn background /
    color: #593127; / Autumn text color /
}

body.autumn #chat-container {
    background-color: #F9EBB0;
    border-color: #774C2E; / Autumn border color /
}

body.autumn #send-btn {
    background-color: #774C2E;
    color: #fff;
}

body.autumn textarea,
body.autumn #user-input {
    border: 1px solid #8E481C;
    background-color: #FFFFFF;
    color: #000;
}

/ AUTUMN — dropdowns /
body.autumn summary {
    background: #F5D9A6;
    padding: 6px;
    
    cursor: pointer;
}

body.autumn details {
    background: #FDF4E3;
    border: 1px solid #8E481C;
    
    padding: 4px;
    margin-bottom: 8px;
}

/ AUTUMN — secondary buttons /
body.autumn button.secondary {
    background: #F5D9A6;
    color: #593127;
    border: 1px solid #8E481C;
}

/ AUTUMN — primary /
body.autumn button.primary {
    background: #8E481C;
    color: #fff;
}

/ AUTUMN — Message styles /
body.autumn .msg {
    margin: 6px 0;
    max-width: 80%;
    padding: 6px 8px;
    
    font-size: 13px;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #F5D9A6; / Autumn msg background /
    color: #593127; / Autumn msg text color /
}

body.autumn .msg.user {
    background: #774C2E; / Autumn user msg background /
    margin-left: auto;
}

body.autumn .msg.assistant {
    background: #F9EBB0; / Autumn assistant msg background /
    margin-right: auto;
}

body.autumn .msg.system {
    background: #E6D146; / Autumn system msg background /
    margin-right: auto;
    font-style: italic;
    font-size: 12px;
}

body.autumn .msg .msg-meta {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 2px;
}

body.autumn .msg .msg-body {
    font-size: 13px;
}

body.autumn .msg-body code {
    background-color: #8E481C; / Autumn code background /
    font-family: monospace;
    padding: 2px 4px;
    
}

body.autumn .msg-body strong {
    font-weight: bold;
}

body.autumn .msg-body em {
    font-style: italic;
}

body.autumn .msg-heading {
    margin-top: 10px;
    font-weight: bold;
}

body.autumn .msg-heading.h1 { font-size: 1.5em; }
body.autumn .msg-heading.h2 { font-size: 1.3em; }
body.autumn .msg-heading.h3 { font-size: 1.1em; }

body.autumn .msg.assistant h1,
body.autumn .msg.assistant h2,
body.autumn .msg.assistant h3 {
    margin: 4px 0 2px 0;
    font-weight: 600;
}

body.autumn .msg.assistant h1 {
    font-size: 16px;
}

body.autumn .msg.assistant h2 {
    font-size: 15px;
}

body.autumn .msg.assistant h3 {
    font-size: 14px;
}

body.autumn .msg.user h1,
body.autumn .msg.user h2,
body.autumn .msg.user h3 {
    margin: 4px 0 2px 0;
    font-weight: 600;
}

body.autumn .msg code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    padding: 1px 3px;
    
    background: #8E481C; / Autumn code background /
}


/* =====================================
   WINTER THEME
   ===================================== */
body.winter {
    background-color: #EBF2F6; / Winter background /
    color: #293D4D; / Winter text color /
}

body.winter #chat-container {
    background-color: #FFFFFF;
    border-color: #93AEC5; / Winter border color /
}

body.winter #send-btn {
    background-color: #293D4D;
    color: #fff;
}

body.winter textarea,
body.winter #user-input {
    border: 1px solid #93AEC5;
    background-color: #FFFFFF;
    color: #000;
}

/* WINTER — dropdowns */
body.winter summary {
    background: #D7E4F3;
    padding: 6px;
    
    cursor: pointer;
}

body.winter details {
    background: #EEF5FB;
    border: 1px solid #93AEC5;
    
    padding: 4px;
    margin-bottom: 8px;
}

/ WINTER — secondary buttons /
body.winter button.secondary {
    background: #D7E4F3;
    color: #1e293b;
    border: 1px solid #93AEC5;
}

/ WINTER — primary /
body.winter button.primary {
    background: #293D4D;
    color: #fff;
}

/ WINTER — Message styles /
body.winter .msg {
    margin: 6px 0;
    max-width: 80%;
    padding: 6px 8px;
     
    font-size: 13px;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #D7E4F3; / Winter msg background /
    color: #293D4D; / Winter msg text color /
}

body.winter .msg.user {
    background: #93AEC5; / Winter user msg background /
    margin-left: auto;
}

body.winter .msg.assistant {
    background: #C6D6E2; / Winter assistant msg background /
    margin-right: auto;
}

body.winter .msg.system {
    background: #EBF2F6; / Winter system msg background /
    margin-right: auto;
    font-style: italic;
    font-size: 12px;
}

body.winter .msg .msg-meta {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 2px;
}

body.winter .msg .msg-body {
    font-size: 13px;
}

body.winter .msg-body pre {
    background-color: #f2f4f5; / Light background for contrast /
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    padding: 12px; / Increased padding for better visual separation /
    
    overflow-x: auto; / Allows horizontal scrolling for wide code blocks /
    margin: 10px 0; / Adds vertical spacing around the block /
    color: #2d3748; / Text color /
    border-left: 4px solid #93AEC5; / Add a left border for visual emphasis /
}

body.winter .msg-body code {
    background-color: #e2e8f0; / Slightly darker than pre for inline code /
    font-family: inherit; / Inherit from pre's font-family /
    padding: 2px 4px;
    
    color: #2d3748; / Text color for inline code /
}

body.winter .msg code {
    background-color: #e2e8f0; / Same as inline code in msg-body /
    padding: 1px 3px;
    
    font-size: 12px;
    color: #2d3748; / Text color /
}

/ Specific styling for indented code blocks /
body.winter .msg-body pre code {
    display: block; / Ensures code blocks take full width /
    padding: 0; / Remove additional padding /
    margin: 0; / Remove additional margin /
    background: none; / Ensures background is controlled by pre /
}

body.winter .msg-body strong {
    font-weight: bold;
}

body.winter .msg-body em {
    font-style: italic;
}

body.winter .msg-heading {
    margin-top: 10px;
    font-weight: bold;
}

body.winter .msg-heading.h1 { font-size: 1.5em; }
body.winter .msg-heading.h2 { font-size: 1.3em; }
body.winter .msg-heading.h3 { font-size: 1.1em; }

body.winter .msg.assistant h1,
body.winter .msg.assistant h2,
body.winter .msg.assistant h3 {
    margin: 4px 0 2px 0;
    font-weight: 600;
}

body.winter .msg.assistant h1 {
    font-size: 16px;
}

body.winter .msg.assistant h2 {
    font-size: 15px;
}

body.winter .msg.assistant h3 {
    font-size: 14px;
}

body.winter .msg.user h1,
body.winter .msg.user h2,
body.winter .msg.user h3 {
    margin: 4px 0 2px 0;
    font-weight: 600;
}




/* =====================================
   LIGHT THEME
   ===================================== */
body.light {
    background-color: #f5f5f5; / Light background /
    color: #000000; / Light text color /
}

body.light #chat-container {
    background-color: #ffffff;
    border-color: #cccccc; / Light border color /
}

body.light #send-btn {
    background-color: #000000;
    color: #ffffff;
}

body.light textarea,
body.light #user-input {
    border: 1px solid #999999;
    background-color: #ffffff;
    color: #000000;
}
body.light summary {
    background: #eaeaea;
    padding: 6px;
    
    cursor: pointer;
}

body.light details {
    background: #ffffff;
    border: 1px solid #cccccc;
    
    padding: 4px;
    margin-bottom: 8px;
}

body.light button.secondary {
    background: #eaeaea;
    border: 1px solid #cccccc;
    color: #000;
}

body.light button.primary {
    background: #000;
    color: #fff;
}

/ LIGHT — Message styles /
body.light .msg {
    margin: 6px 0;
    max-width: 80%;
    padding: 6px 8px;
    
    font-size: 13px;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #eaeaea; / Light msg background /
    color: #000000; / Light msg text color /
}

body.light .msg.user {
    background: #cccccc; / Light user msg background /
    margin-left: auto;
}

body.light .msg.assistant {
    background: #ffffff; / Light assistant msg background /
    margin-right: auto;
}

body.light .msg.system {
    background: #f5f5f5; / Light system msg background /
    margin-right: auto;
    font-style: italic;
    font-size: 12px;
}

body.light .msg .msg-meta {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 2px;
}

body.light .msg .msg-body {
    font-size: 13px;
}

body.light .msg-body code {
    background-color: #cccccc; / Light code background /
    font-family: monospace;
    padding: 2px 4px;
    
}

body.light .msg-body strong {
    font-weight: bold;
}

body.light .msg-body em {
    font-style: italic;
}

body.light .msg-heading {
    margin-top: 10px;
    font-weight: bold;
}

body.light .msg-heading.h1 { font-size: 1.5em; }
body.light .msg-heading.h2 { font-size: 1.3em; }
body.light .msg-heading.h3 { font-size: 1.1em; }

body.light .msg.assistant h1,
body.light .msg.assistant h2,
body.light .msg.assistant h3 {
    margin: 4px 0 2px 0;
    font-weight: 600;
}

body.light .msg.assistant h1 {
    font-size: 16px;
}

body.light .msg.assistant h2 {
    font-size: 15px;
}

body.light .msg.assistant h3 {
    font-size: 14px;
}

body.light .msg.user h1,
body.light .msg.user h2,
body.light .msg.user h3 {
    margin: 4px 0 2px 0;
    font-weight: 600;
}

body.light .msg code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    padding: 1px 3px;
    
    background: #cccccc; / Light code background /
}

/* =====================================
   DARK THEME
   ===================================== */
body.dark {
    background-color: #000000; / Dark background /
    color: #ffffff; / Dark text color /
}

body.dark #chat-container {
    background-color: #111111;
    border-color: #444444; / Dark border color /
}

body.dark #send-btn {
    background-color: #ffffff;
    color: #000000;
}

body.dark textarea,
body.dark #user-input {
    border: 1px solid #555555;
    background-color: #000000;
    color: #ffffff;
}
body.dark summary {
    background: #222;
    padding: 6px;
    
    cursor: pointer;
}

body.dark details {
    background: #111;
    border: 1px solid #444;
    
    padding: 4px;
    margin-bottom: 8px;
}

body.dark button.secondary {
    background: #222;
    border: 1px solid #555;
    color: #eee;
}

body.dark button.primary {
    background: #fff;
    color: #000;
}

/ DARK — Message styles /
body.dark .msg {
    margin: 6px 0;
    max-width: 80%;
    padding: 6px 8px;
    
    font-size: 13px;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #222; / Dark msg background /
    color: #ffffff; / Dark msg text color /
}

body.dark .msg.user {
    background: #444444; / Dark user msg background /
    margin-left: auto;
}

body.dark .msg.assistant {
    background: #333333; / Dark assistant msg background /
    margin-right: auto;
}

body.dark .msg.system {
    background: #000000; / Dark system msg background /
    margin-right: auto;
    font-style: italic;
    font-size: 12px;
}

body.dark .msg .msg-meta {
    font-size: 11px;
    color: #bbbbbb;
    margin-bottom: 2px;
}

body.dark .msg .msg-body {
    font-size: 13px;
}

body.dark .msg-body code {
    background-color: #444444; / Dark code background /
    font-family: monospace;
    padding: 2px 4px;
    
}

body.dark .msg-body strong {
    font-weight: bold;
}

body.dark .msg-body em {
    font-style: italic;
}

body.dark .msg-heading {
    margin-top: 10px;
    font-weight: bold;
}

body.dark .msg-heading.h1 { font-size: 1.5em; }
body.dark .msg-heading.h2 { font-size: 1.3em; }
body.dark .msg-heading.h3 { font-size: 1.1em; }

body.dark .msg.assistant h1,
body.dark .msg.assistant h2,
body.dark .msg.assistant h3 {
    margin: 4px 0 2px 0;
    font-weight: 600;
}

body.dark .msg.assistant h1 {
    font-size: 16px;
}

body.dark .msg.assistant h2 {
    font-size: 15px;
}

body.dark .msg.assistant h3 {
    font-size: 14px;
}

body.dark .msg.user h1,
body.dark .msg.user h2,
body.dark .msg.user h3 {
    margin: 4px 0 2px 0;
    font-weight: 600;
}

body.dark .msg code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    padding: 1px 3px;
    
    background: #444444; / Dark code background /
}

/ Global styles for code blocks, overriding theme-specific settings /
```css
pre {
    background-color: #f2f4f5; / Light background for contrast /
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    padding: 12px; / Increased padding for better visual separation /
    
    overflow-x: auto; / Allows horizontal scrolling for wide code blocks /
    margin: 10px 0; / Adds vertical spacing around the block /
    color: #2d3748; / Text color /
    border-left: 4px solid #93AEC5; / Add a left border for visual emphasis /
}

code {
    background-color: #e2e8f0; / Slightly darker for inline code /
    font-family: inherit; / Inherit from pre's font-family /
    padding: 2px 4px;
    
    color: #2d3748; / Text color for inline code /
}

/ Specific styling for indented code blocks /
pre code {
    display: block; / Ensures code blocks take full width /
    padding: 0; / Remove additional padding /
    margin: 0; / Remove additional margin /
    background: none; / Ensures background is controlled by pre /
}
/* -- temp trouble shooting */

/* Final alignment override */
.msg {
    display: block;
    max-width: 80%;
}

.msg.user {
    margin-left: auto !important;
    align-self: flex-end !important;
}

.msg.assistant {
    margin-right: auto !important;
    align-self: flex-start !important;
}