/* Root variables */
:root {
    --mantaro-brown: #4d4440;
    --mantaro-orange: #f7941d;
    --light-gray: #f0f0f0; /* Added for suggestion boxes */
    --border-gray: #ddd; /* Added for suggestion boxes */
}

/* Base styles */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #ffffff; /* Explicitly set a background color */
}

/* Header styles */
.header {
    background-color: var(--mantaro-brown);
    padding: 10px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #5d534f;
}

.header-logo {
    height: 60px;
}

/* ============================================================================
   NEW: Session status bar styling
   ============================================================================ */
.session-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border-bottom: 2px solid var(--mantaro-orange);
    font-size: 12px;
    color: #ccc;
    font-family: 'Courier New', monospace;
    margin-bottom: 10px;
}

.session-status span {
    margin: 0 8px;
}

.session-status .warning {
    color: var(--mantaro-orange);
    font-weight: bold;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
/* ============================================================================ */

/* Chat container */
.chat-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    /* Full height minus header and input box - UPDATED for larger mobile input */
    height: calc(100vh - 80px - 90px); 
}

/* JANICE'S NEW PROMPT SUGGESTION STYLES START HERE */
#prompt-suggestions-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-grow: 1; /* Allows it to take up the available space */
    color: #333;
}

.prompt-header .prompt-icon {
    width: 60px;
    height: 60px;
    opacity: 0.5;
    margin-bottom: 20px;
}

.prompt-header h1 {
    font-size: 2.5em;
    font-weight: bold;
    margin: 0 0 10px 0;
}

.prompt-header .subtitle {
    font-size: 1.1em;
    color: #666;
    margin-bottom: 20px;
}

.prompt-header p {
    font-size: 1.1em;
    color: #555;
    max-width: 600px;
    margin: 0 auto 30px auto;
}

.prompt-suggestions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap; /* Allows suggestions to wrap on smaller screens */
}

.suggestion-box {
    background-color: #fff;
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    padding: 15px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 1em;
    max-width: 250px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.suggestion-box:hover {
    background-color: var(--light-gray);
}

.hidden {
    display: none !important;
}
/* JANICE'S NEW PROMPT SUGGESTION STYLES END HERE */


#chat-box {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 20px;
    /* MOBILE OPTIMIZATION: Add padding so messages don't hide behind input */
    padding-bottom: 20px;
}

/* ============================================================================
   MODIFIED: Message styles - Fix width issue on desktop
   ============================================================================ */
.message {
    /* CHANGED: Increased max-width from 70% to 85% for better desktop display */
    max-width: 85%;
    margin: 10px;
    padding: 15px;
    border-radius: 15px;
    font-size: 16px;
    line-height: 1.4;
    display: flex;       /* Make messages flex containers */
    flex-direction: column; /* Stack content vertically */
    /* NEW: Ensure proper word wrapping */
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* ============================================================================ */

.user-message {
    background-color: var(--mantaro-orange);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 0;
}

.ai-message {
    background-color: var(--mantaro-brown);
    color: white;
    align-self: flex-start;
    border-bottom-left-radius: 0;
}

/* Markdown styles within AI messages */
.ai-message h2 {
    font-size: 1.2em;
    margin: 10px 0 5px 0;
    color: #fff;
}

.ai-message ul, .ai-message ol {
    margin: 5px 0 5px 20px;
    padding: 0;
}

.ai-message p {
    margin: 8px 0;
}

.ai-message strong {
    color: var(--mantaro-orange);
}

/* ============================================================================
   NEW: LaTeX/Math formula styling
   ============================================================================ */
.ai-message code {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.95em;
}

/* Inline math */
.ai-message .katex {
    font-size: 1.1em;
}

/* Display math (block) */
.ai-message .katex-display {
    margin: 10px 0;
    overflow-x: auto;
    overflow-y: hidden;
}
/* ============================================================================ */

/* Input area styles - MOBILE OPTIMIZED */
.input-container {
    background-color: var(--mantaro-brown);
    padding: 15px;
    border-top: 2px solid #5d534f;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    /* MOBILE OPTIMIZATION: Better shadow and z-index */
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    z-index: 999;
    /* MOBILE OPTIMIZATION: iOS safe area support */
    padding-bottom: max(15px, env(safe-area-inset-bottom));
}

/* MOBILE OPTIMIZED INPUT FIELD */
#user-input {
    flex-grow: 1;
    border: 2px solid #666;
    border-radius: 8px;
    /* MOBILE OPTIMIZATION: Larger padding and height */
    padding: 14px 16px;
    min-height: 48px;
    /* MOBILE OPTIMIZATION: 16px prevents iOS auto-zoom */
    font-size: 16px;
    margin-right: 10px;
    background-color: #fff;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* MOBILE OPTIMIZATION: Focus state with Mantaro orange */
#user-input:focus {
    outline: none;
    border-color: var(--mantaro-orange);
    box-shadow: 0 0 0 3px rgba(247, 148, 29, 0.2);
}

/* General button style for the main send button - MOBILE OPTIMIZED */
button {
    background-color: var(--mantaro-orange);
    color: white;
    border: none;
    /* MOBILE OPTIMIZATION: Larger touch target */
    padding: 14px 24px;
    min-height: 48px;
    min-width: 80px;
    border-radius: 8px;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

button:hover {
    background-color: #d97d0d;
}

/* MOBILE OPTIMIZATION: Active/pressed state for touch feedback */
button:active {
    transform: scale(0.96);
    background-color: #c76f0a;
}

/* --- NEW, MORE SPECIFIC BUTTON STYLING --- */
.button {
    background-color: #007bff;
    color: white;
    padding: 8px 12px;
    border: 1px solid #007bff; /* Added for consistency */
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    vertical-align: middle; /* Align buttons on the same baseline */
    margin-top: 5px;
    margin-right: 5px;
    min-width: 170px;  /* Increased width for better look */
    text-align: center;
    box-sizing: border-box;
    font-family: Arial, sans-serif; /* Explicitly set font */
    font-size: 14px; /* Explicitly set font size */
    line-height: 1.5; /* Standard line height */
}

.button:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 900px;
    position: relative;
    border-radius: 8px;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

#kicanvas-container {
    width: 100%;
    height: 600px;
    border: 1px solid #ccc;
    margin-top: 15px;
}

/* ============================================================================
   NEW: Character counter styling
   ============================================================================ */
.char-counter {
    display: none;
    position: absolute;
    top: -25px;
    right: 90px;
    font-size: 11px;
    color: #ccc;
    font-family: 'Courier New', monospace;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 1000;
}

.char-counter.over-limit {
    color: #ff6b6b;
    font-weight: bold;
}

/* Position input container relatively for absolute positioning of counter */
.input-container {
    position: relative;
}
/* ============================================================================ */

/* ========================================
   MOBILE OPTIMIZATION MEDIA QUERIES
   ======================================== */

/* Tablets and smaller */
@media (max-width: 768px) {
    .chat-container {
        padding: 0 10px;
        /* Adjust for mobile input height */
        height: calc(100vh - 80px - 100px);
    }
    
    .message {
        max-width: 90%;
        font-size: 15px;
    }
    
    .input-container {
        padding: 12px;
        gap: 8px;
    }
    
    #user-input {
        font-size: 16px; /* Keep at 16px to prevent zoom */
        padding: 12px 14px;
    }
    
    button {
        padding: 12px 20px;
        min-width: 70px;
    }
    
    /* ============================================================================
       NEW: Mobile session status styling
       ============================================================================ */
    .session-status {
        font-size: 11px;
        padding: 6px 12px;
        flex-wrap: wrap;
    }
    
    .session-status span {
        margin: 2px 4px;
    }
    /* ============================================================================ */
}

/* Mobile phones */
@media (max-width: 480px) {
    .header {
        padding: 8px 10px;
    }
    
    .header-logo {
        height: 50px;
    }
    
    .chat-container {
        margin: 10px auto;
        padding: 0 8px;
        /* Further adjust for smaller screens */
        height: calc(100vh - 70px - 100px);
    }
    
    .message {
        max-width: 95%;
        padding: 12px;
        font-size: 15px;
    }
    
    .input-container {
        padding: 10px 8px;
        /* Extra padding for very small devices */
        padding-bottom: max(10px, calc(env(safe-area-inset-bottom) + 5px));
    }
    
    #user-input {
        font-size: 16px; /* Critical: prevents iOS zoom */
        padding: 12px;
        margin-right: 8px;
        border-radius: 6px;
    }
    
    button {
        padding: 12px 16px;
        min-width: 65px;
        font-size: 15px;
    }
    
    /* Adjust prompt suggestions for mobile */
    .prompt-header h1 {
        font-size: 2em;
    }
    
    .prompt-header p {
        font-size: 1em;
        padding: 0 10px;
    }
    
    .suggestion-box {
        font-size: 0.9em;
        padding: 12px 16px;
        max-width: 100%;
    }
    
    /* ============================================================================
       NEW: Compact session status for small phones
       ============================================================================ */
    .session-status {
        font-size: 10px;
        padding: 5px 8px;
        justify-content: center;
    }
    
    .session-status span {
        margin: 2px 3px;
        font-size: 10px;
    }
    /* ============================================================================ */
}

/* iOS specific optimizations */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific styles */
    #user-input {
        /* Prevent iOS from adding inner shadow */
        -webkit-appearance: none;
        appearance: none;
    }
    
    button {
        /* Prevent iOS button styling */
        -webkit-appearance: none;
        appearance: none;
    }
    
    .input-container {
        /* Ensure proper spacing on iOS devices with notches */
        padding-bottom: max(15px, calc(env(safe-area-inset-bottom) + 10px));
    }
}
/* Consistent styling for markdown tables in AI replies */
.ai-message table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 12px 0;
  background: transparent;
  color: #fff;
}
.ai-message th, .ai-message td {
  border: 1px solid rgba(255,255,255,0.15);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.ai-message th {
  background: rgba(255,255,255,0.06);
  font-weight: 700;
}

/* Preserve alignment for ASCII “pipe” rows if fenced as code */
.ai-message pre, .ai-message code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
.ai-message pre {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
}

/* CHANGE: Contact button in header */
.contact-button {
    background-color: var(--mantaro-brown);
    color: #ffffff;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 600;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease, transform 0.05s ease;
    /* Ensure it sits at the far right of the header flex row */
    margin-left: auto;
}

.contact-button:hover {
    background-color: #d97d0d;
}

.contact-button:active {
    transform: translateY(1px);
}

/* BEGIN ADD: ensure MathJax adopts AI text color and spacing */
.ai-message .mjx-container {
    color: inherit;        /* inherit white color from .ai-message */
    line-height: 1.4;
}
.ai-message .mjx-block {
    margin: 10px 0;        /* space display equations */
}
/* END ADD */

/* Mobile sizing for the contact button */
@media (max-width: 480px) {
    .contact-button {
        padding: 6px 12px;
        font-size: 15px;
        border-radius: 5px;
    }
}
/* MathJax spacing and alignment inside AI messages */
.ai-message {
  line-height: 1.5;                    /* base line height for text */
}

/* Core MathJax container tweaks */
.ai-message .mjx-container {
  color: inherit;                        /* inherit white text color */
  line-height: 1.35;                     /* slightly tighter line height inside formulas */
  font-size: 0.96em;                     /* reduce formula size a touch for balance */
}

/* Display (block) equations: reduce default top/bottom margin and left-align */
.ai-message .mjx-container[jax="CHTML"][display="true"] {
  margin: 6px 0 10px !important;         /* default is ~1em; make it tighter */
  text-align: left !important;           /* left-align instead of centered */
}

/* Extra nicety: ensure a bit of space before a block formula that follows text */
.ai-message p + .mjx-container[jax="CHTML"][display="true"],
.ai-message li + .mjx-container[jax="CHTML"][display="true"],
.ai-message br + .mjx-container[jax="CHTML"][display="true"] {
  margin-top: 6px !important;
}

/* Optional: slightly tighten fraction bar and script spacing without harming readability */
/* Uncomment if you still feel formulas are visually "tall"
.ai-message .mjx-fraction {
  margin-top: 0.05em !important;
  margin-bottom: 0.05em !important;
}
*/

/* ─────────────────  BULLET-LINE / MATHJAX FIX  ───────────────── */
/*  keep the list rhythm and let long plain-text wrap normally    */
.ai-message li {                                              
  margin: 6px 0;                 /* same spacing you had      */
  list-style-position: inside;   /* bullet stays visible      */
}

/* kill the paragraph break that markdown inserts inside <li>    */
.ai-message li > p {
  display: inline;               /* becomes inline            */
  margin: 0;                     /* remove extra spacing      */
}

/* ensure inline MathJax sits like a character                   */
.ai-message li .mjx-container[jax="CHTML"]:not([display="true"]) {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 2px !important;      /* tiny side gap             */
  white-space: nowrap;           /* formula never splits      */
}