/* ---- Defaults / tokens ---- */
:root {

    --chat-bg: #fff;
    --chat-header-bg: #3ca649;
    --chat-header-text: #fff;
    --chat-border: #e6e8ec;
    --chat-user-bubble: #e8f5e9;
    --chat-user-text: #0a0a0a;
    --chat-bot-bubble: #ffffff;
    --chat-bot-text: #0a0a0a;
    --chat-code-bg: #f6f8fa;
    --chat-copy-btn-bg: #f0f3f7;
    --chat-copy-btn-text: #334155;
    --chat-divider: #edf1f5;
    --chat-accent: #00c853;

    --bubble-user-bg: #EAF3FF;        /* light blue */
    --bubble-user-border: #CFE2FF;
    --bubble-agent-bg: #F7F3FF;       /* light lilac */
    --bubble-agent-border: #E6DCFF;
    --bubble-radius: 18px;
    --bubble-shadow: 0 2px 10px rgba(16,24,40,.06);
    --text-strong: #0F172A;           /* dark slate */
    --text-muted: #637587;            /* timestamp/name */
    --name-weight: 600;

    
    .chat-light {
        --chat-bg: #e8e8e8;
        --chat-header-bg: #3ca649;
        --chat-header-text: #ffffff;
        --chat-user-bubble: #e0ecff;
        --chat-user-text: #333333;
        --chat-bot-bubble: #ffffff;
        --chat-bot-text: #333333;
        --chat-border: #dddddd;
        --chat-divider: #eee;
        --chat-code-bg: #f6f8fa;
        --chat-copy-btn-bg: #ffffff;
        --chat-copy-btn-text: #000000;

            /* Surfaces */
        --chat-bg: #ffffff;
        --chat-header-bg: #2f3845;        /* subtle blue-grey bar */
        --chat-header-text: #ffffff;
        --chat-border: #e6e8ec;
        --chat-divider: #edf1f5;
      
        /* Text */
      
        --chat-user-text: #0f172a;
        --text-strong: #0f172a;
        --text-muted: #637587;
      
        /* Bubbles (light, like your screenshot) */
        --bubble-user-bg: #eaf3ff;        /* light blue */
        --bubble-user-border: #cfe2ff;
        --bubble-agent-bg: #f7f3ff;       /* light lilac */
        --bubble-agent-border: #e6dcff;
      
        /* Code / Buttons */
        --chat-code-bg: #f6f8fa;
        --chat-copy-btn-bg: #f0f3f7;
        --chat-copy-btn-text: #334155;
        --chat-accent: #00c853;
      }
      
      .chat-dark {
        --chat-bg: radial-gradient(circle at top left, #000000, #1c0c0d 60%) !important;/*#1e1e1e;*/
        --chat-header-bg: #3ca649;
        --chat-header-text: #ffffff;
        --chat-user-bubble: #336699;
        --chat-user-text: #333333;
        --chat-bot-bubble: #2a2a2a;
        --chat-bot-text: #333333;
        --chat-border: #444444;
        --chat-divider: #555555;
        --chat-code-bg: #2d2d2d;
        --chat-copy-btn-bg: #333333;
        --chat-copy-btn-text: #ffffff;


        /* Backgrounds */
                   /* overall background */
        --chat-header-bg: #161b22;        /* dark header */
        --chat-header-text: #f5f7fb;
        --chat-border: rgba(255,255,255,0.08);
        --chat-divider: rgba(255,255,255,0.08);
      
        /* Text */
        --chat-bot-text: #ffffff;         /* pure white for bot text */
        --chat-user-text: #ffffff;        /* pure white for user text */
        --text-strong: #ffffff;
        --text-muted: #9ba5b4;
      
        /* Bubbles */
        --bubble-user-bg: #1c2b3a;        /* deep navy */
        --bubble-user-border: #243647;
        --bubble-agent-bg: #2a1f36;       /* rich dark purple */
        --bubble-agent-border: #3a2a4d;
      
        /* Code / Buttons */
        --chat-code-bg: #161b22;
        --chat-copy-btn-bg: #1f2630;
        --chat-copy-btn-text: #d7deea;
        --chat-accent: #238636;  


      }
      


  }
  
  /* ---- Container ---- */
  .chat-container {
    position: fixed;
    inset: auto env(safe-area-inset-right) env(safe-area-inset-bottom) auto;
    bottom: 20px;
    right: 20px;
    width: min(92vw, 600px);
    height: min(85vh, 780px);
    background: var(--chat-bg);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    display: flex;
    flex-direction: column;
    z-index: 1080; /* above Bootstrap modal (1055) */
    overflow: hidden;
  }
  
  /* Small screens: dock full width/height */
  @media (max-width: 576px) {
    .chat-container {
      right: 0;
      left: 0;
      bottom: 0;
      width: 100vw;
      height: 100dvh;
      border-radius: 0;
    }
  }
  
  /* ---- Header ---- */
  .chat-header {
    background: var(--chat-header-bg);
    color: var(--chat-header-text);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    border-bottom: 1px solid var(--chat-border);
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
  }
  .chat-sub-header {
    background: var(--chat-bg);
    border-bottom: 1px solid var(--chat-border);
    /* border-bottom: solid 1px red; */
    }
  /* ---- Body ---- */
  .chat-body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background: var(--chat-bg);
  }
  
  /* Scrollbars (WebKit + Firefox) */
  .chat-body::-webkit-scrollbar{ width: 6px; }
  .chat-body::-webkit-scrollbar-thumb{
    background-color: rgba(0,0,0,.15);
    border-radius: 10px;
  }
  .chat-body{ scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.25) transparent; }
  
  /* ---- Footer (single definition) ---- */
  .chat-footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: var(--chat-bg);
    border-top: 1px solid var(--chat-border);
  }
  
  .chat-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  /* Inputs & buttons */
  #userMessage {
    flex: 1 1 auto;
    border-radius: 20px;
    padding: 10px 14px;
    border: 1px solid var(--chat-border);
    min-height: 42px;
  }
  
  #userMessage:disabled {
    background-color: #f5f5f5;
    color: #666;
    cursor: not-allowed;
  }
  
  #sendMessageBtn {
    width: 48px;
    height: 48px;
    background: var(--chat-accent);
    border: none;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    cursor: pointer;
    transition: background-color .2s ease;
  }
  
  #sendMessageBtn:hover { background-color: #00b34c; }
  #sendMessageBtn:disabled { background-color: #ccc; cursor: not-allowed; }
  #sendMessageBtn i { color: #fff; font-size: 20px; }
  
  /* Focus visibility for a11y */
  #userMessage:focus-visible,
  #sendMessageBtn:focus-visible,
  .code-copy-btn:focus-visible,
  .response-copy-btn:focus-visible,
  .csv-download-btn:focus-visible {
    outline: 3px solid rgba(0,200,83,.35);
    outline-offset: 2px;
  }
  
  /* ---- Messages ---- */
  .chat-message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 12px;
    margin-bottom: 10px;
    line-height: 1.5;
    position: relative;
    word-wrap: break-word;
    word-break: break-word;
  }
  
  .chat-message.user {
    background: var(--chat-user-bubble);
    color: var(--chat-user-text);
    text-align: right;
    align-self: flex-end;
  }
  
  .chat-message.bot {
    background: var(--chat-bot-bubble);
    border: 1px solid var(--chat-border);
    color: var(--chat-bot-text);
    align-self: flex-start;
  }
  
  /* Rich content inside messages */
  .chat-message ul, .chat-message ol {
    margin-left: 1.2em;
    padding-left: 0.6em;
  }
  .chat-message li.nested { margin-left: 1.5em; list-style-type: circle; }
  .chat-message blockquote {
    background-color: #f9f9f9;
    border-left: 4px solid #ccc;
    padding: 10px 15px;
    font-style: italic;
    color: #555;
  }
  
  /* ---- Typing indicator ---- */
  .typing-indicator {
    width: 54px;
    padding: 8px;
    background: var(--chat-code-bg);
    border-radius: 12px;
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
  }
  .typing-indicator span {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #aaa;
    border-radius: 50%;
    animation: blink 1.4s infinite ease-in-out both;
  }
  .typing-indicator span:nth-child(2){ animation-delay: .2s; }
  .typing-indicator span:nth-child(3){ animation-delay: .4s; }
  
  @keyframes blink {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .typing-indicator span { animation: none; }
  }
  
  /* ---- Code blocks ---- */
  .chat-code-block {
    background: var(--chat-code-bg);
    color: var(--chat-bot-text);
    padding: 10px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    margin: 10px 0;
  }
  
  .code-wrapper { position: relative; }
  
  .code-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--chat-copy-btn-bg);
    border: 1px solid var(--chat-border);
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--chat-copy-btn-text);
    transition: opacity .2s ease;
  }
  .code-copy-btn:hover { opacity: .85; }
  .code-copy-btn.copied { color: green; font-weight: 600; }
  
  /* Copy entire response */
  .chat-response-wrapper { position: relative; }
  .response-copy-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--chat-copy-btn-bg);
    border: 1px solid var(--chat-border);
    border-radius: 4px;
    font-size: 12px;
    padding: 4px 6px;
    cursor: pointer;
    color: var(--chat-copy-btn-text);
  }
  
  /* Action bar */
  .bot-action-bar {
    border-top: 1px solid var(--chat-divider);
    padding-top: 8px;
    margin-top: 12px;
    font-size: 18px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .bot-action-bar.visible { opacity: 1; }
  .action-icon {
    background: none;
    border: none;
    color: var(--chat-bot-text);
    cursor: pointer;
    padding: 4px;
  }
  .action-icon:hover { color: var(--chat-accent); }
  
  /* Inline code / URLs */
  code.url-inline {
    background-color: var(--chat-code-bg);
    padding: 2px 4px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
  }
  
  /* Prompt suggestions */
  #promptSuggestions .btn {
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 13px;
  }
  
  /* CSV preview */
  .csv-preview {
    background-color: #f7f9fc;
    border-radius: 8px;
    padding: 12px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    white-space: pre-wrap;
    color: #333;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
    margin-bottom: 12px;
    max-height: 200px;
    overflow-y: auto;
  }
  .csv-download-btn {
    display: inline-flex;
    align-items: center;
    background-color: #4caf50;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 8px 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: filter .2s ease;
    margin-bottom: 8px;
  }
  .csv-download-btn:hover { filter: brightness(0.95); }
  .csv-download-btn .icon { margin-right: 8px; font-size: 18px; }
  
  /* Disclaimer */
  .chat-disclaimer {
    font-size: 13px;
    color: #7b8794;
    margin-top: 4px;
    text-align: center;
  }
  /* ---- Bubble theme to match screenshot ---- */

  
  /* Global typography closer to the mock */
  .chat-body,
  .chat-message {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-strong);
  }
  
  /* Tighter max width like the design */
  .chat-message {
    max-width: 72%;
    padding: 12px 16px;
    border-radius: var(--bubble-radius);
    margin-bottom: 14px;
    box-shadow: var(--bubble-shadow);
    border: 1px solid transparent;
  }
  
  /* Agent/other bubble (left, lilac) */
  .chat-message.bot{
    background: var(--bubble-agent-bg);
    border-color: var(--bubble-agent-border);
  }
  
  /* You bubble (right, blue) */
  .chat-message.user{
    background: var(--bubble-user-bg);
    border-color: var(--bubble-user-border);
    text-align: left;                 /* keep text left-aligned */
  }
  
  /* Subtle corner shaping to mimic chat feel */
  .chat-message.bot { border-top-left-radius: 8px; }
  .chat-message.user { border-top-right-radius: 8px; }
  
  /* Group spacing like the screenshot */
  .message-group {                     /* wrap each avatar + messages stack in this if you have it */
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px 12px;
    align-items: start;
    margin-bottom: 24px;               /* bigger gap between groups */
  }
  
  /* Avatar sizing/spacing */
  .message-group .avatar{
    width: 36px; height: 36px;
    border-radius: 50%;
    overflow: hidden;
  }
  
  /* Name + time row */
  .chat-message .meta{
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
  }
  .chat-message .meta .name{ 
    color: var(--text-strong);
    font-weight: var(--name-weight);
  }
  .chat-message .meta .time{
    color: var(--text-muted);
  }
  
  /* Links inside bubbles (like "Keenthemes.com") */
  .chat-message a{
    color: #2563eb;
    text-decoration: none;
  }
  .chat-message a:hover{ text-decoration: underline; }
  
  /* Make lists/paragraph spacing airy inside bubbles */
  .chat-message p{ margin: 0 0 8px; }
  .chat-message ul, .chat-message ol{ margin: 6px 0 6px 1.2em; }
  
  /* Mobile: let bubbles breathe and fill more width */
  @media (max-width: 576px){
    .chat-message{ max-width: 88%; padding: 12px 14px; }
    .message-group{ grid-template-columns: 32px 1fr; gap: 8px 10px; }
    .message-group .avatar{ width: 32px; height: 32px; }
  }
  /* THEME TOKENS
     -------------------------------------------------- */
     :root[data-theme="light"] {

  }
  
  :root[data-theme="dark"] {
             /* green for send button */
  }
  
  /* Optional: auto-match OS setting unless you override with data-theme */
  /* @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) { 
      color-scheme: dark;
    }
  } */
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) { 
      color-scheme: light;
    }
  }
  
  /* BUBBLES / TYPOGRAPHY / SPACING (works for both themes)
     -------------------------------------------------- */
  .chat-body,
  .chat-message {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-strong);
  }
  
  .chat-body { background: var(--chat-bg); }
  
  .chat-header {
    background: var(--chat-header-bg);
    color: var(--chat-header-text);
  }
  
  .chat-message {
    max-width: 72%;
    padding: 12px 16px;
    border-radius: 18px;
    margin-bottom: 14px;
    line-height: 1.6;
    box-shadow: 0 2px 10px rgba(16,24,40,.06);
    border: 1px solid transparent;
  }
  
  .chat-message.bot {
    background: var(--bubble-agent-bg);
    border-color: var(--bubble-agent-border);
    border-top-left-radius: 8px;      /* subtle chat notch feel */
  }
  
  .chat-message.user {
    background: var(--bubble-user-bg);
    border-color: var(--bubble-user-border);
    color: var(--chat-user-text);
    border-top-right-radius: 8px;
  }
  
  /* In-bubble text and links */
  .chat-message p { margin: 0 0 8px; }
  .chat-message a { color: #2563eb; text-decoration: none; }
  .chat-message a:hover { text-decoration: underline; }
  
  /* Code blocks match theme */
  .chat-code-block {
    background: var(--chat-code-bg);
    color: var(--chat-bot-text);
  }
  
  /* Dividers / borders */
  .chat-footer,
  .chat-header,
  .chat-message.bot { border-color: var(--chat-border); }
  
  /* Copy buttons match theme */
  .code-copy-btn,
  .response-copy-btn {
    background: var(--chat-copy-btn-bg);
    color: var(--chat-copy-btn-text);
    border: 1px solid var(--chat-border);
  }
  
  /* Send button hue per theme (uses --chat-accent) */
  #sendMessageBtn {
    background: var(--chat-accent);
  }
  #sendMessageBtn:hover {
    filter: brightness(0.95);
  }
  
  /* Nice group spacing if you wrap avatar + bubbles */
  .message-group {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px 12px;
    align-items: start;
    margin-bottom: 24px;
  }
  .message-group .avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; }
  
  /* Optional name/time row inside bubble */
.chat-message .meta{
  display:flex; gap:8px; align-items:baseline;
  margin-bottom:8px; font-size:13px; color:var(--text-muted);
}
.chat-message .meta .name{ color:var(--text-strong); font-weight:600; }


/* Chat Config Modal */

/* Focus (thin green edge + soft 3px ring) */
.chat-light .modal .form-control:focus,
.chat-light .modal .form-select:focus {                
  box-shadow: 0 0 0 3px rgba(106, 109, 107, 0.2) !important;

}


.chat-light #chatConfigModal .add-bot-button:hover,
#chatConfigModal .add-bot-button:hover {
  background-color: #ffffff !important;
  border-color: #080808 !important;
  color:rgb(0, 0, 0) !important;
}




/* Dark mode overrides */
.chat-dark #chatConfigModal .modal-content {
  background-color: #161b22 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  /* color: #ffffff !important; */
}
[data-bs-theme=dark] #chatConfigModal .modal-header {
  background-color: #161b22 !important;

}

.chat-dark #chatConfigModal .modal-title {
  color: #f5f7fb !important;
}

.chat-dark #chatConfigModal .modal-body {
  background-color: #161b22 !important;
}


.chat-dark #chatConfigModal h4 {
  color: #ffffff !important;
}

.chat-dark #chatConfigModal .form-label {
  color: #aab1ba !important;
}

.chat-dark #chatConfigModal .form-control,
.chat-dark #chatConfigModal .form-select {
  background-color: #161b22 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}

.chat-dark #chatConfigModal .form-control::placeholder {
  color: #9ba5b4 !important;
}

.chat-dark #chatConfigModal .form-control:focus,
.chat-dark #chatConfigModal .form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(139, 141, 139, 0.25) !important;
}



.chat-dark #chatConfigModal .add-bot-button {
  background-color: #c0c4c9 !important;
  border-color: #c0c4c9 !important;
  color: #1e1f20 !important;
}

.chat-dark #chatConfigModal .add-bot-button:hover {
  background-color: #161b22 !important;
  border-color: #ffffff !important;
  color:#ffffff !important;
}

.chat-dark #chatConfigModal .cancel-btn{
  background-color: #161b22 !important;
  border-color: #949090 !important;
  color:rgb(255, 255, 255) !important;
}


.chat-dark #chatConfigModal .cancel-btn:hover{
  background-color: #1f2125 !important;
}

.chat-dark #chatConfigModal .table-sm th,
.chat-dark #chatConfigModal .table-sm td {
  border-color: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
 
}

.chat-dark #chatConfigModal .table-sm th {
  background-color: #161b22 !important;
  color: #ffffff !important;

}

.chat-dark #chatConfigModal .table {
  color: #ffffff !important;
  background-color: #161b22 !important;
}


.chat-dark #chatConfigModal .modal-footer {
  background-color: #161b22 !important;
 
}

#chatConfigModal .delete-bot-btn {
  background: none !important;
  border: none !important;
  padding: 0.25rem !important;
  color: #dc3545 !important;
  transition: color 0.2s ease;
}

#chatConfigModal .delete-bot-btn:hover {
  color: #b02a37 !important;
  background: none !important;
  border: none !important;
  transform: scale(1.1);
}

#chatConfigModal .delete-bot-btn i {
  font-size: 18px;
}


#chatSettingsBtn:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-radius: 0.375rem;
}