app.css

:root {
  --brand-blue: #17428f;
  --brand-orange: #f39719;
  --text-dark: #111827;   /* very dark grey (near black) */
  --text-gray: #4B5563;   /* medium grey for messages */
  color-scheme: only light;
}

/* Base */
body, .gradio-container {
  /* Default Gradio font will be used */
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-orange) 100%);
  min-height: 100vh;
  color: var(--text-dark);
}

/* Logo size */

/* Logo size */
/*#company-logo img {
  width: 40px !important;
  min-width: 40px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}*/


/* Top bar transparent */
#topbar { background: transparent !important; }

/* Header text over gradient */
#header h1, #header h2, #header h3, #header h4, #header h5, #header h6,
#header p {
  color: #ffffff;
  text-align: center;
}

#header2 h1, #header2 h2, #header2 h3, #header2 h4, #header2 h5, #header2 h6,
#header2 p {
  color: #ffffff;
  text-align: center;
}

/* Chatbox container */
#chatbot {
  height: 100%;
  border-radius: 14px;
  border: 2px solid var(--brand-blue);
  background-color: #ffffff;
  padding: 8px;
  overflow-y: auto;

  /* Icon tint tokens for local use (chat area) */
  --icon-light: #9CA3AF;
  --icon-hover: #6B7280;
}

/* ----------------------------- */
/* TEXT COLORING (SAFE FOR CODE) */
/* ----------------------------- */

/* Apply the gray text color only at the message container level.
   Do NOT set color on descendants or code tokens. */
#chatbot .message {
  color: var(--text-gray); /* no !important */
}

/* Bubble styling */
#chatbot .message.user {
  background: #fff4e1;
  border-radius: 10px;
  padding: 6px 12px;
  text-align: right;
}
#chatbot .message.bot {
  background: #f0f0f0;
  border-radius: 10px;
  padding: 6px 12px;
  text-align: left;
}

/* Markdown horizontal rules inside chatbot */
#chatbot hr {
  margin: 6px 0;                 /* reduce extra space */
  border: none;                   /* remove default bevel */
  border-top: 1px solid #d1d5db;  /* subtle gray line */
}

/* Fallback selectors for other Gradio versions */
#chatbot [data-testid*="message"] {
  border-radius: 10px;
  padding: 6px 12px;
}
#chatbot [data-testid="user-message"] {
  background: #fff4e1;
  text-align: right;
}
#chatbot [data-testid="assistant-message"] {
  background: #f0f0f0;
  text-align: left;
}

/* ----------------------------- */
/* CODE BLOCKS (DO NOT SET COLOR)*/
/* ----------------------------- */

/* Give code blocks a readable container without touching colors.
   This preserves syntax highlighting from highlight.js or Prism. */
#chatbot pre,
#chatbot pre code,
#chatbot code[class*="language-"],
#chatbot pre[class*="language-"],
#chatbot code.hljs {
  background: #f8fafc;          /* light neutral background */
  border-radius: 8px;
  padding: 10px 12px;
  display: block;
  overflow-x: auto;
  /* IMPORTANT: no 'color' declaration here */
}

/* Inline code (single backticks) */
#chatbot :not(pre) > code {
  background: #f1f5f9;
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
  /* no 'color' here */
}

/* ---------------------------------- */
/* Inputs                              */
/* ---------------------------------- */
input[type="text"], textarea, .gr-text-input input, .gr-textbox textarea {
  border-radius: 10px;
  padding: 10px;
  font-size: 16px;
  border: 2px solid var(--brand-orange);
}
input:focus, textarea:focus, .gr-text-input input:focus, .gr-textbox textarea:focus {
  border-color: var(--brand-blue);
  outline: none;
  box-shadow: 0 0 6px rgba(23, 66, 143, 0.5);
}

/* ---------------------------------- */
/* Buttons (global gradient)           */
/* ---------------------------------- */
.gr-button, button {
  border-radius: 10px;
  font-weight: 600;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-orange));
  color: white;
  border: none;
}
.gr-button:hover, button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ---------------------------------- */
/* Chat area: icon-only buttons        */
/* ---------------------------------- */

/* Tint SVG icons */
#chatbot button svg,
#chatbot [role="button"] svg,
#chatbot .icon svg,
#chatbot [class*="icon"] svg,
#chatbot [data-testid*="icon"] svg,
#chatbot [data-testid*="message"] .tools svg,
#chatbot .message-tools svg {
  color: var(--icon-light) !important;
  fill: var(--icon-light) !important;
  stroke: var(--icon-light) !important;
  opacity: 0.95;
}

/* Remove gradient background only on small icon-only buttons */
#chatbot :is(button,[role="button"]):is([aria-label],[title], :has(> svg)):not(.keep-gradient) {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px !important;
  border-radius: 8px !important;
  color: var(--icon-light) !important;
}

/* Hover/focus/active states */
#chatbot :is(button,[role="button"]):is([aria-label],[title], :has(> svg)):not(.keep-gradient):hover {
  background-color: rgba(0,0,0,0.05) !important;
}
#chatbot :is(button,[role="button"]):is([aria-label],[title], :has(> svg)):not(.keep-gradient):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(23, 66, 143, 0.35) !important;
  background-color: rgba(0,0,0,0.06) !important;
}
#chatbot :is(button,[role="button"]):is([aria-label],[title], :has(> svg)):not(.keep-gradient):active {
  background-color: rgba(0,0,0,0.08) !important;
}

/* Optional 'danger' icons */
#chatbot .danger svg {
  color: var(--icon-light) !important;
  fill: var(--icon-light) !important;
  stroke: var(--icon-light) !important;
}
#chatbot .danger:hover svg {
  color: #ef4444 !important;
  fill: #ef4444 !important;
  stroke: #ef4444 !important;
}

/* ---------------------------------- */
/* TOP BAR (logo block): icon-only     */
/* ---------------------------------- */
#topbar { background: transparent !important; }
#topbar { --icon-light: #9CA3AF; --icon-hover: #6B7280; }

#topbar .gr-button.keep-gradient,
#topbar .gr-button:not(:has(svg)) {
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-orange)) !important;
  color: #fff !important;
}

/* Icon-only buttons in topbar: transparent */
#topbar :is(button,[role="button"]):is([aria-label],[title], :has(> svg)):not(.keep-gradient) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px !important;
  border-radius: 8px !important;
  color: var(--icon-light) !important;
}

/* Tint SVGs in topbar */
#topbar :is(button,[role="button"]):has(> svg) > svg {
  color: var(--icon-light) !important;
  fill: var(--icon-light) !important;
  stroke: var(--icon-light) !important;
  opacity: 0.95;
}

/* Hover/focus/active for topbar icons */
#topbar :is(button,[role="button"]):is([aria-label],[title], :has(> svg)):not(.keep-gradient):hover {
  background-color: rgba(0,0,0,0.05) !important;
}
#topbar :is(button,[role="button"]):is([aria-label],[title], :has(> svg)):not(.keep-gradient):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(23, 66, 143, 0.35) !important;
  background-color: rgba(0,0,0,0.06) !important;
}
#topbar :is(button,[role="button"]):is([aria-label],[title], :has(> svg)):not(.keep-gradient):active {
  background-color: rgba(0,0,0,0.08) !important;
}





/* Ensure the textbox wrapper is relative */
#message-box {
  width: 100%;
  border-radius: 9999px;
  border: 2px solid var(--brand-orange);
  font-size: 16px;
  outline: none;
  position: relative; /* needed for absolute button */
}

#message-box:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 6px rgba(23, 66, 143, 0.3);
}

/* Send button positioned inside textbox */
#send-button {
  position: absolute;
  
  right: 34px;              /* move left by increasing this value */
  top: 48px;                 /* move down by increasing this value */

  transform: translateY(-16%);
  width: 36px;
  height: 36px;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-orange));
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
}

#send-button:hover {
  transform: translateY(-16%) scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

#send-button:active {
  transform: translateY(-16%) scale(0.95);
}








/* Compact upload area - lighter and transparent */
#file-upload .upload-box,
#file-upload .file-wrap,
#file-upload .wrap {
  min-height: 80px;
  padding: 8px 12px;
  color: #666 !important;          /* Softer text color */
  background: transparent !important; /* No white block, shows gradient */
  border: none !important;         /* Remove any border */
}

/* Inner placeholder (remove gray square) */
#file-upload .upload-box div,
#file-upload .upload-box span {
  background: transparent !important; /* Remove gray background */
}

/* Text and icons slightly lighter */
#file-upload .upload-box,
#file-upload .file-wrap,
#file-upload .wrap {
  color: #666 !important;
  fill: #666 !important;
  stroke: #666 !important;
}

/* Buttons remain clean */
#file-upload button,
#file-upload [role="button"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 4px !important;
  color: #666 !important;
}

/* SVG icons */
#file-upload button svg,
#file-upload [role="button"] svg {
  color: #666 !important;
  fill: #666 !important;
  stroke: #666 !important;
  background: none !important;
}

/* Hover effect */
#file-upload button:hover svg,
#file-upload [role="button"]:hover svg {
  color: #2a5db0 !important;
  fill: #2a5db0 !important;
  stroke: #2a5db0 !important;
}




/* Hide Gradio's default control buttons in the header/topbar */
#topbar .gr-button,
#topbar [role="button"],
#header-container .gr-button,
#header-container [role="button"] {
    display: none !important;
}



#upload-note, #upload-note * {
  color: #ffffff !important;
}




.gradio-container [id="left-column"] {
    min-width: 40px !important;      /* Increased from 10px */
    max-width: 320px !important;     /* You can go up to 400px if you want even wider */
    width: 180px !important;         /* Increased from 100px */
    flex: 0 0 220px !important;      /* Increased from 180px */
    padding-right: 12px !important;  /* Slightly more padding for visual separation */
}

.gradio-container [id="right-column"] {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    padding-left: 0 !important;
}





/* Branding layout */
#branding {
  display: flex;
  align-items: center;
  gap: 8px;               /* space between text and logo */
  justify-content: center;
}

/* Text style */
#brand-text {
  font-size: 1.6rem;
  font-weight: 700;
  color: white;
  line-height: 1;
}

/* Logo sizing */
#company-logo {
  width: 40px;            /* set exact width */
  height: auto;           /* preserve proportions */
  display: block;
  object-fit: contain;
}







/* ---- Viewport-safe base (handles mobile address bar) ---- */
html, body, .gradio-container {
  height: 100dvh;             /* dynamic viewport height */
  min-height: 100dvh;
}

/* ---- Make sure all flex ancestors allow their children to shrink ---- */
.gradio-container .gr-row,
.gradio-container .gr-row > .gr-column,
.gradio-container > .gr-row,
.gradio-container .gr-column,
#right-column,
#chat-area {
  min-height: 0 !important;   /* critical so inner scroll can happen */
}

/* ---- Chatbot outer box: cap height and scroll inside ---- */
#chatbot {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0 !important;
  height: auto !important;
  max-height: calc(100dvh - var(--topbar-offset, 0px) - 120px) !important;
  overflow-y: auto !important;
}

/* ---- Gradio’s inner wrappers sometimes need explicit constraints ---- */
/* Gradio v4: Chatbot renders inside .gr-chatbot -> .wrap / .message-wrap depending on version */
#chatbot .wrap,
#chatbot .message-wrap,
#chatbot [data-testid="chatbot"] {
  max-height: 100%;
  overflow-y: auto;
  min-height: 0;
}

/* Optional: if you see the input row pushing the chat up/down on small screens,
   let the input take only its content height. */
#input-row {
  flex: 0 0 auto;
}

/* If your header/progress box is above the chat, ensure it doesn't consume flex growth */
#chat-area > *:not(#chatbot) {
  flex: 0 0 auto;
}