/**
 * Multi-AI Chat Interface Styles
 * v5.1 - Clean Version for Manual Upload
 */

/* ============= 1. BASE (collapsed search bar) ============= */

#mac-chat-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  width: 100%;
  max-width: 600px;
  margin: 30px auto;
  position: relative;
  background: #121212;
  border: 1px solid #2b2b2b;
  border-radius: 30px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  height: 60px;
  overflow: hidden;
  z-index: 1000;
  box-sizing: border-box;
  transition:
    width 0.5s cubic-bezier(0.86,0,0.07,1),
    max-width 0.5s cubic-bezier(0.86,0,0.07,1),
    height 0.5s cubic-bezier(0.86,0,0.07,1),
    border-radius 0.5s ease,
    box-shadow 0.4s ease,
    transform 0.5s cubic-bezier(0.86,0,0.07,1),
    top 0.5s cubic-bezier(0.86,0,0.07,1),
    left 0.5s cubic-bezier(0.86,0,0.07,1),
    opacity 0.3s ease;
}

/* hide modal-only content by default */
.mac-header-controls,
.mac-chat-area,
#mac-close-button {
  display: none;
  opacity: 0;
  visibility: hidden;
}

/* collapsed input bar */
.mac-input-area {
  position: relative;
  height: 100%;
  background: transparent;
  display: flex;
  align-items: center;
}


#mac-prompt-input {
  width: 100%;
  height: 60px;
  font-size: 16px;
  border: none;
  background: transparent;
  color: #eee;
  padding: 19px 65px 19px 25px;
  border-radius: 30px;
  box-sizing: border-box;
  outline: none !important;
  line-height: 1.4;
}

#mac-prompt-input::placeholder { color: #9aa0a6; }

#mac-send-button {
  position: absolute;
  right: 6px;
  top: 5px;
  bottom: 5px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  font-size: 22px;
  background: linear-gradient(145deg, #0073e6, #005bb5);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, opacity 0.2s ease, background 0.3s ease;
}
#mac-send-button:hover { background: linear-gradient(145deg, #3399ff, #0073e6); }
#mac-send-button:active { transform: scale(0.96); }
#mac-send-button::before { content: "⮝"; font-weight: 700; line-height: 1; }

/* ============= 2. BACKDROP (only when expanded) ============= */

body.mac-modal-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(4px);

  opacity: 1;
  transition: opacity 0.4s ease;
}

body:not(.mac-modal-open)::before{ opacity:0; pointer-events:none; }

/* ============= 3. EXPANDED (modal) ============= */

#mac-chat-container.is-expanded{
  position: fixed;
  top: 5vh;
  left: 50%;
  transform: translateX(-50%);
  width: 90vw;
  max-width: 900px;
  height: 85vh;
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  background: #1a1a1a;
  /* --- FORCE Z-INDEX --- */
  z-index: 2147483647 !important; /* Make absolutely sure this is highest */
  /* --- END FORCE --- */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Also ensure backdrop z-index is lower (already should be 999) */


/* (rest of your CSS file) */

/* reveal modal contents once expanded */
#mac-chat-container.is-expanded .mac-header-controls,
#mac-chat-container.is-expanded .mac-chat-area,
#mac-chat-container.is-expanded #mac-close-button{
  display: block;
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease;
}

/* close button */
#mac-chat-container.is-expanded #mac-close-button{
  position:absolute; top:10px; right:12px;
  font-size:28px; color:#999; background:none; border:none; cursor:pointer; padding:8px; z-index:10; /* z-index relative to parent */
}
#mac-chat-container.is-expanded #mac-close-button:hover{ color:#fff; }

/* header + tabs */
.mac-header-controls{
  flex-shrink:0;
  border-bottom:1px solid #333;
  background:#1e1e1e;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.mac-toolbar{ padding:10px 15px; border-bottom:1px solid #2b2b2b; }
.mac-toolbar label{ font-size:13px; font-weight:600; color:#aaa; margin-right:6px; }
#mac-default-model-select{
  background:#222; color:#eee; border:1px solid #444; border-radius:4px; padding:3px 6px; font-size:12px;
}
#mac-default-model-select option{ background:#1a1a1a; color:#eee; }

.mac-tabs{ display:flex; flex-wrap:wrap; padding:5px 10px 0 10px; background:#1e1e1e; }
.mac-tab{
  padding:10px 15px; cursor:pointer; font-weight:600; font-size:14px; color:#aaa;
  border-bottom:3px solid transparent; margin-right:8px; transition:all .2s ease;
}
.mac-tab:hover{ color:#fff; }
.mac-tab.active{ color:#4aa3ff; border-bottom-color:#4aa3ff; }
.mac-tab .spinner{
  display:inline-block; width:12px; height:12px; margin-left:6px; vertical-align:middle;
  border:2px solid rgba(255,255,255,.2); border-top-color:#4aa3ff; border-radius:50%; animation:mac-spin 1s linear infinite;
}
@keyframes mac-spin { to{ transform: rotate(360deg); } }

/* chat area */
.mac-chat-area{
  flex-grow:1; min-height:0; overflow-y:auto;
  padding:20px; background:#181818; color:#eee; width:100%; box-sizing:border-box;
}
.mac-chat-window{ display:none; }
.mac-chat-window.active{ display:block; }

.message{
  max-width:80%;
  padding:10px 16px; border-radius:16px; margin-bottom:12px; line-height:1.45; word-wrap:break-word;
  box-shadow:0 1px 2px rgba(0,0,0,.3);
  /* Make sure there's no display:none, opacity:0 etc. here */
}
/* This rule styles ONLY user messages */
.message.user{
  background:#0073e6;
  color:#fff;
  border-bottom-right-radius:4px;
  margin-left:auto;
  /* Make sure there's no display:none, opacity:0 etc. here */
}

/* This rule styles ONLY AI messages */
.message.ai{
  background:#2a2a2a;
  color:#f1f1f1;
  border-bottom-left-radius:4px;
  margin-right:auto;
  white-space:pre-wrap;
  /* Make sure there's no display:none, opacity:0 etc. here */
}
.message.error{ background:#442222; color:#ff8888; border:1px solid #663333; }
.message.pending{ background:#2a2a2a; color:#aaa; font-style:italic; }

.message.system-placeholder {
  background: #222;
  color: #999;
  text-align: center;
  font-style: italic;
  max-width: 100%;
  box-shadow: none;
}


/* input area (modal bottom) */
#mac-chat-container.is-expanded .mac-input-area{
    height: 60px;
  border:1px solid #333; border-radius:25px; background:#1e1e1e;
  padding:8px 10px 8px 15px; flex-shrink:0; display:flex; align-items:flex-end;
  max-width:800px; width:calc(100% - 40px); margin:0 auto 15px auto;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
#mac-chat-container.is-expanded #mac-prompt-input{
  flex-grow:1; border:none; border-radius:0; padding:11px 18px; font-size:14px; line-height:1.4;
  margin-right:10px; min-height:42px; max-height:150px; background:transparent; color:#eee; box-shadow:none; outline:none;
  width: 100%;
  height: auto;
}
#mac-chat-container.is-expanded #mac-send-button{
  position:static; width:42px; height:42px; border-radius:50%; font-size:20px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,#0073e6,#005bb5); color:#fff; border:none; cursor:pointer;
}
#mac-chat-container.is-expanded #mac-send-button:hover{ background:linear-gradient(145deg,#3399ff,#0073e6); }
#mac-chat-container.is-expanded #mac-send-button::before{ content:"⮝"; font-weight:700; }

/* ============= 4. MORPH HINT (optional small scale pop) ============= */
#mac-chat-container.morph-pop { transform: translateX(-50%) scale(0.98); }
#mac-chat-container.is-expanded { transform: translateX(-50%) scale(1); }


/* --- Morph clone styling (temporary element) --- */
#mac-chat-clone {
  pointer-events: none;
  background: #121212;
  border: 1px solid #2b2b2b;
  border-radius: 30px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  z-index: 2147483646; /* One below the real modal */
  transition:
    width 0.5s cubic-bezier(0.86,0,0.07,1),
    max-width 0.5s cubic-bezier(0.86,0,0.07,1),
    height 0.5s cubic-bezier(0.86,0,0.07,1),
    border-radius 0.5s ease,
    box-shadow 0.4s ease,
    transform 0.5s cubic-bezier(0.86,0,0.07,1),
    top 0.5s cubic-bezier(0.86,0,0.07,1),
    left 0.5s cubic-bezier(0.86,0,0.07,1),
    opacity 0.2s ease;
}

/* This rule makes the modal clickable. */
body.mac-modal-open #mac-chat-container.is-expanded {
  pointer-events: auto;
}

/* These rules must be at the end of the file and separate. */
/* Utility class to disable transitions during JS-based state snapping */
#mac-chat-container.no-transition {
  transition: none !important;
}
#mac-chat-container.no-transition .mac-header-controls,
#mac-chat-container.no-transition .mac-chat-area,
#mac-chat-container.no-transition #mac-close-button {
  transition: none !important;
}

/* ============= 5. CUSTOM SCROLLBAR (Hide Default) ============= */

/* --- Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) --- */
.mac-chat-area::-webkit-scrollbar {
  width: 0px !important;  /* Remove scrollbar space */
  background: transparent !important;  /* Optional: just make scrollbar invisible */
}
/* Optional: Hide the draggable scrolling handle */
.mac-chat-area::-webkit-scrollbar-thumb {
  background: transparent !important;
}

/* --- Hide scrollbar for Firefox --- */
.mac-chat-area {
  scrollbar-width: none !important;  /* Firefox */
}

/* --- Hide scrollbar for IE/Edge (Older versions - less common now) --- */
.mac-chat-area {
  -ms-overflow-style: none !important;  /* IE and Edge */
}

/* Ensure scrolling is still enabled (already present in your code) */
/*
.mac-chat-area {
  overflow-y: auto;
}
*/
/* ============= 6. HIDE SCROLLBAR FOR INPUT (Both States) ============= */

/* Apply scrollbar hiding rules directly to the input ID */

/* --- Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) --- */
#mac-prompt-input::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}
#mac-prompt-input::-webkit-scrollbar-thumb {
  background: transparent;
}

/* --- Hide scrollbar for Firefox --- */
/* Needs to be a separate rule */
#mac-prompt-input {
  scrollbar-width: none;  /* Firefox */
}

/* --- Hide scrollbar for IE/Edge (Older versions) --- */
/* Needs to be a separate rule */
#mac-prompt-input {
  -ms-overflow-style: none;  /* IE and Edge */
  /* Ensure overflow is hidden in the collapsed state IF content somehow overflows */
  /* Though the parent container's overflow:hidden should handle this */
   overflow: hidden; 
}

/* Re-ensure overflow-y allows scrolling *when expanded* */
#mac-chat-container.is-expanded #mac-prompt-input {
    overflow-y: auto; /* Allow scrolling only when expanded and needed */
    /* We reset the -ms-overflow-style here if needed, but 'auto' usually suffices */
    /* -ms-overflow-style: auto; */ 
}

/* ============= 7. MESSAGE TIMESTAMPS ============= */

/* Wrapper base styles */
.user-wrapper,
.ai-wrapper,
.error-wrapper { /* Ensure error wrapper exists if needed, or handle in JS */
    display: flex;
    flex-direction: column;
    margin-bottom: 12px; /* Controls space BETWEEN messages */
    max-width: 80%;
    /* Add box-sizing in case padding affects width */
    box-sizing: border-box; 
}

/* Remove margin from individual message bubble */
.message {
    margin-bottom: 2px; /* Small gap between bubble and timestamp */
    /* max-width removed, now on wrapper */
    /* margin-left/right removed, now on wrapper */
}

/* Specific Wrapper Alignment */
.user-wrapper {
    align-items: flex-end; /* Align items (bubble, timestamp) to the right edge */
    margin-left: auto;   /* Push wrapper itself to the right */
    margin-right: 0;
}

.ai-wrapper,
.error-wrapper {
    align-items: flex-start; /* Align items (bubble, timestamp) to the left edge */
    margin-right: auto;    /* Push wrapper itself to the left */
    margin-left: 0;
}

/* Timestamp Styling */
.message-timestamp {
    font-size: 0.75em;
    color: #999;
    padding: 0 10px;    /* Horizontal padding relative to the aligned edge */
    margin-top: 2px;
    /* Ensure timestamp doesn't stretch full width unnecessarily */
    display: inline-block; 
}

#mac-chat-container.is-expanded #mac-prompt-input {
    margin: -20px;
}

/* ============= 9. LOGO WRAPPER STYLES ============= */

#mac-wrapper {
    /* The wrapper must share the same alignment as the chat container */
    width: 100%;
    max-width: 600px; /* Match max-width of #mac-chat-container */
    margin: 30px auto; /* Center it horizontally, taking over the margin from the chat container */
    position: relative;
    z-index: 1001; /* Must be higher than the chat container's collapsed z-index (1000) */
    box-sizing: border-box;
}

/* --- Re-adjust #mac-chat-container --- */
/* The main container should now have 0 margin/auto to sit directly inside the wrapper */
#mac-chat-container {
    /* Remove redundant margin and max-width from the chat container itself */
    margin: 0; 
    max-width: 100vw; /* Take full width of the new wrapper */
    /* NOTE: Its fixed position and high z-index in the expanded state remain critical! */
}

/* Logo Styling */
#mac-logo {
    display: flex;
    justify-content: center; /* Center the logo content */
    align-items: center;
    height: 40px; /* Give it a set height */
    padding: 0 15px;
    margin-bottom: 5px; /* Spacing between logo and chat bar */
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
}

/* Hide logo when the modal is open (via JS class mac-modal-open on body) */
body.mac-modal-open #mac-logo {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}


/* ============= 10. THEME TOGGLE (Light/Dark) ============= */

#mac-theme-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #444;
    background: #1e1e1e;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* FIX: Remove left margin and add right margin for spacing */
    margin-left: 0; 
    margin-right: 15px; /* Add spacing to the right of the button */
    
    flex-shrink: 0;
    overflow: hidden;
    padding: 0;
}

#mac-theme-toggle span {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
    line-height: 1; /* Fix vertical alignment of emojis/icons */
}

/* Default Dark Mode view */
#mac-theme-toggle .icon-dark {
    opacity: 1;
    transform: rotate(0deg);
}
#mac-theme-toggle .icon-light {
    opacity: 0;
    transform: rotate(90deg); /* Start off-screen/rotated */
}

/* Light Mode view */
#mac-chat-container.is-light-mode #mac-theme-toggle .icon-dark {
    opacity: 0;
    transform: rotate(-90deg);
}
#mac-chat-container.is-light-mode #mac-theme-toggle .icon-light {
    opacity: 1;
    transform: rotate(0deg);
}


/* ============= 11. LIGHT MODE OVERRIDES ============= */

#mac-chat-container.is-light-mode,
body.is-light-mode #mac-chat-container.is-expanded {
    background: #fff; /* White background for modal */
    border-color: #ccc;
    color: #333;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* Header and Tabs */
#mac-chat-container.is-light-mode .mac-header-controls {
    background: #f8f8f8;
    border-bottom-color: #ddd;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
#mac-chat-container.is-light-mode .mac-toolbar {
    border-bottom-color: #eee;
}
#mac-chat-container.is-light-mode .mac-toolbar label {
    color: #666;
}
#mac-chat-container.is-light-mode #mac-default-model-select {
    background: #fff;
    color: #333;
    border-color: #ddd;
}
#mac-chat-container.is-light-mode .mac-tab {
    color: #777;
}
#mac-chat-container.is-light-mode .mac-tab:hover {
    color: #333;
}

/* Chat Area */
#mac-chat-container.is-light-mode .mac-chat-area {
    background: #f3f3f3; /* Light grey chat background */
    color: #333;
}

/* Message Bubbles */
#mac-chat-container.is-light-mode .message.ai,
#mac-chat-container.is-light-mode .message.pending {
    background: #e9e9e9; /* Light grey for AI bubbles */
    color: #333;
}
#mac-chat-container.is-light-mode .message.user {
    background: #0073e6; /* User bubble remains blue */
    color: #fff;
}
#mac-chat-container.is-light-mode .message.system-placeholder {
    background: #ddd;
    color: #555;
}

/* Input Area */
#mac-chat-container.is-light-mode .mac-input-area {
    background: #f8f8f8;
    border-color: #ddd;
}
#mac-chat-container.is-light-mode #mac-prompt-input {
    background: transparent;
    color: #333;
}
#mac-chat-container.is-light-mode #mac-prompt-input::placeholder {
    color: #999;
}

/* Backdrop */
body.is-light-mode::before {
    background: rgba(0, 0, 0, 0.15); /* Lighter backdrop when switching to light mode */
}