/* ==========================================================================
   chatbot.css — AI Assistant chat widget
   --------------------------------------------------------------------------
   The assistant is a deliberate, branded panel: it keeps a friendly pale-blue
   surface in BOTH light and dark mode (it reads as a bright floating panel on
   the dark page, and the border + shadow define it on the light page). Because
   the panel is always light, its text colours are FIXED dark values (not the
   --ins-text token) so content stays legible on the pale-blue surface in both
   modes — this is what keeps the assistant's markdown section headers readable
   in dark mode. The brand accent (white-label) still owns the header, the user
   bubble and the Send button via the --ins-* brand tokens.
   ========================================================================== */

#chatbot-container {
    /* --- Self-contained chat palette (same in light & dark) --- */
    --chat-bg:        #cfe1fb;   /* soft-blue modal canvas        */
    --chat-surface:   #ffffff;   /* response card                 */
    --chat-input-bg:  #eaf2ff;   /* input well                    */
    --chat-text:      #1f2733;   /* fixed dark text (legible on the blue) */
    --chat-muted:     #5b6675;
    --chat-subtle:    #8a94a3;
    --chat-border:    #aecdf2;   /* blue border                   */
    --chat-link:      #0a58ca;
    --chat-brand:     var(--ins-brand);     /* header (navy / brand) */
    --chat-brand-2:   var(--ins-brand-2);   /* user bubble + Send    */
    --chat-on-brand:  var(--ins-on-brand);

    /* --- Core Positioning --- */
    position: fixed;   /* Position relative to the viewport */
    /* left, top, bottom, right are now controlled by JS */
    z-index: 1050;     /* Ensure it's on top */

    /* --- Sizing --- */
    width: 360px;
    max-height: 80vh;
    min-height: 200px;

    /* --- Appearance --- */
    background-color: var(--chat-bg);
    border: 1px solid var(--chat-border);
    border-radius: var(--ins-radius);
    box-shadow: var(--ins-shadow);

    /* --- Internal Layout (Flexbox) --- */
    display: flex;
    flex-direction: column;
    font-family: var(--ins-font-ui);
    font-size: 0.9rem;
    color: var(--chat-text);
    overflow: hidden;
  }
  /* Header Styling */
  #chatbot-header {
    padding: 10px 15px;
    background-color: var(--chat-brand);   /* brand accent (matches navbar) */
    color: var(--chat-on-brand);
    border-bottom: 1px solid var(--chat-border);
    border-top-left-radius: var(--ins-radius);
    border-top-right-radius: var(--ins-radius);

    /* --- Flexbox for Title and Close Button --- */
    display: flex;
    justify-content: space-between; /* Title left, button right */
    align-items: center;
    flex-shrink: 0;
  }
  #chatbot-header span { /* Target the title span specifically */
     font-weight: 600;
     font-size: 0.95rem;   /* keep the title proportionate to the widget */
  }

  /* Style for the image icon in the header */
  .chatbot-header-icon {
    height: 40px; /* Increased height */
    width: auto; /* Maintain aspect ratio */
    margin-right: 8px; /* Space between icon and text */
    vertical-align: middle; /* Align icon nicely with text */
  }

  /* Close Button Styling */
  #chatbot-close-button {
    background: none;
    border: none;
    font-size: 1.5em;
    font-weight: normal;
    line-height: 1;
    color: var(--chat-on-brand);
    cursor: pointer;
    padding: 0 0.25rem;
    margin: 0;
    opacity: 0.85;
  }
  #chatbot-close-button:hover {
    opacity: 1;
  }

  /* Info / help button in the header (IN-157) */
  #chatbot-info-button {
    background: none;
    border: none;
    font-size: 1.05em;
    line-height: 1;
    color: var(--chat-on-brand);
    cursor: pointer;
    padding: 0 0.3rem;
    margin: 0;
    opacity: 0.85;
  }
  #chatbot-info-button:hover { opacity: 1; }

  /* How-to / help overlay — covers the body, stays inside the widget (IN-157) */
  #chatbot-help {
    position: absolute;
    inset: 0;
    background-color: var(--chat-bg);   /* pale-blue canvas, matches the panel */
    color: var(--chat-text);
    padding: 16px 18px;
    overflow-y: auto;
    z-index: 5;
    display: none;
  }
  #chatbot-help.open { display: block; }
  #chatbot-help h4 {
    font-size: 0.95rem; font-weight: 600; margin: 0 0 6px; color: var(--chat-text);
  }
  #chatbot-help h5 {
    font-size: 0.85rem; font-weight: 600; margin: 14px 0 4px; color: var(--chat-text);
  }
  #chatbot-help h5 i { color: var(--chat-brand-2); margin-right: 5px; }
  #chatbot-help p {
    font-size: 0.82rem; line-height: 1.45; margin: 0 0 6px; color: var(--chat-text);
  }
  #chatbot-help .chatbot-help-tip {
    color: var(--chat-muted); font-size: 0.8rem;
  }
  /* Example questions — illustrative only, not interactive */
  #chatbot-help .chatbot-help-examples {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
  }
  #chatbot-help .chatbot-help-examples li {
    background: var(--chat-surface);
    border: 1px solid var(--chat-border);
    border-radius: 0.4rem;
    color: var(--chat-text);
    font-size: 0.82rem;
    font-style: italic;
    padding: 7px 10px;
    margin: 5px 0;
  }
  #chatbot-help-close {
    position: absolute;
    top: 8px; right: 10px;
    background: none; border: none;
    font-size: 1.35em; line-height: 1;
    color: var(--chat-muted);
    cursor: pointer;
  }
  #chatbot-help-close:hover { color: var(--chat-text); }

  /* Body (contains history and input area) */
  #chatbot-body {
    flex-grow: 1;          /* Takes up remaining vertical space */
    display: flex;
    flex-direction: column;
    min-height: 0;         /* Important for flex-grow to work correctly */
    position: relative;    /* positioning context for the help overlay (IN-157) */
  }

  /* Chat History Area */
  #chatbot-history {
    flex-grow: 1;          /* Takes available space */
    overflow-y: auto;      /* Scrollbar if needed */
    padding: 10px;
    background-color: var(--chat-bg);   /* pale-blue modal canvas */
    border-bottom: 1px solid var(--chat-border);
    word-wrap: break-word; /* Wrap long lines */
  }

  #chatbot-input-area {
    padding: 10px;
    background-color: var(--chat-bg);
    flex-shrink: 0;
    border-top: 1px solid var(--chat-border);
  }

  #chatbot-form {
    display: flex;
    margin-bottom: 5px;
  }

  #chatbot-input {
    flex-grow: 1;
    padding: 8px;
    background-color: var(--chat-input-bg);
    color: var(--chat-text);
    border: 1px solid var(--chat-border);
    border-radius: var(--ins-radius-sm);
    font-size: 0.9rem;
  }
  #chatbot-input::placeholder { color: var(--chat-subtle); }
  #chatbot-input:focus {
    outline: none;
    border-color: var(--chat-brand-2);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--chat-brand-2) 25%, transparent);
  }

  #chatbot-submit {
    margin-left: 5px;
    padding: 8px 12px;
    background-color: var(--chat-brand-2);
    color: var(--chat-on-brand);
    border: none;
    border-radius: var(--ins-radius-sm);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
  }
  #chatbot-submit:hover {
    background-color: color-mix(in srgb, var(--chat-brand-2) 85%, black);
  }
  #chatbot-submit:disabled {
    background-color: var(--chat-subtle);
    cursor: not-allowed;
  }

  /* Status/Error Messages */
  #chatbot-status, #chatbot-error {
    font-size: 0.8em;
    margin-top: 5px;
    display: none; /* Hidden by default */
  }
  #chatbot-status { color: var(--chat-muted); }
  #chatbot-error { color: var(--ins-danger); }

  /* Clear Button */
  #chatbot-clear {
    margin-top: 5px;
    font-size: 0.8em;
    padding: 3px 6px;
    cursor: pointer;
    background-color: var(--chat-subtle);
    color: var(--chat-on-brand);
    border: none;
    border-radius: var(--ins-radius-sm);
    float: right; /* Position clear button to the right */
  }
  #chatbot-clear:hover {
    background-color: var(--chat-muted);
  }

  /* Chat Message Styles */
  .chatbot-message { padding: 8px 12px; border-radius: 0.5rem; margin-bottom: 8px; max-width: 85%; word-wrap: break-word; line-height: 1.4; }
  .user-message { background-color: var(--chat-brand-2); color: var(--chat-on-brand); margin-left: auto; border-bottom-right-radius: 0; }
  .ai-message { background-color: var(--chat-surface); color: var(--chat-text); border: 1px solid var(--chat-border); box-shadow: var(--ins-shadow-sm); margin-right: auto; border-bottom-left-radius: 0; }
  .thinking-message { font-style: italic; color: var(--chat-muted); margin-right: auto; background-color: var(--chat-surface); border: 1px solid var(--chat-border); padding: 8px 12px; border-radius: 0.5rem; margin-bottom: 8px; }

  /* --- Markdown rendered inside assistant replies ---------------------------
     The assistant returns markdown that's converted to real HTML, so style the
     content to fit the narrow chat column. `color: inherit` everywhere keeps it
     pinned to the bubble's fixed dark text, so section headers stay legible on
     the pale surface in both light and dark mode. */
  .ai-message > :first-child { margin-top: 0; }
  .ai-message > :last-child  { margin-bottom: 0; }
  .ai-message h1,
  .ai-message h2,
  .ai-message h3,
  .ai-message h4,
  .ai-message h5,
  .ai-message h6 {
    color: inherit;
    font-family: var(--ins-font-ui);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0.7em 0 0.3em;
  }
  .ai-message h1 { font-size: 1.15rem; }
  .ai-message h2 { font-size: 1.05rem; }
  .ai-message h3 { font-size: 1rem; }
  .ai-message h4,
  .ai-message h5,
  .ai-message h6 { font-size: 0.92rem; }
  .ai-message p { margin: 0 0 0.5em; }
  .ai-message ul,
  .ai-message ol { margin: 0 0 0.5em; padding-left: 1.25em; }
  .ai-message li { margin-bottom: 0.2em; }
  .ai-message a { color: var(--chat-link); text-decoration: underline; }
  .ai-message code {
    font-family: var(--ins-font-mono);
    font-size: 0.85em;
    background: color-mix(in srgb, var(--chat-text) 10%, transparent);
    padding: 0.1em 0.35em;
    border-radius: var(--ins-radius-sm);
  }
  .ai-message pre {
    background: color-mix(in srgb, var(--chat-text) 8%, transparent);
    padding: 0.6em 0.75em;
    border-radius: var(--ins-radius-sm);
    overflow-x: auto;
    margin: 0 0 0.5em;
  }
  .ai-message pre code { background: none; padding: 0; }

  /* Minimize Button Styling */
  #chatbot-minimize-button {
    background: none;
    border: none;
    font-size: 1.2em; /* Slightly smaller than close */
    line-height: 1;
    color: var(--chat-on-brand);
    cursor: pointer;
    padding: 0 0.5rem;
    margin: 0;
    vertical-align: middle;
    opacity: 0.85;
  }
  #chatbot-minimize-button:hover {
    opacity: 1;
  }

  /* Styling for Minimized State */
  #chatbot-container.minimized #chatbot-body {
    display: none; /* Hide the body */
  }

  #chatbot-container.minimized {
    min-height: 0; /* Allow shrinking */
    height: auto; /* Adjust height to content (header only) */
  }