#left-bento, #right-bento , #left-3{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#affected-vendors, #affected-vendors .bento-box {
    flex-grow: 1;
}

/* Bento box styles  */

.bento-container {
    display: flex;
}

.bento-box {
    background: var(--color-background-card-menu-bg, #FFF) !important;
    gap: var(--Spacing-5, 12px);
    padding: var(--Spacing-7, 24px) !important;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
}

.bento-body {
    background: var(--Color-Background-Bg-light, #F8F9FA);
    gap: var(--Spacing-5, 12px);
    box-shadow: none;
    border: 2px solid #F8F9FA;
    padding: 8px;
    overflow-y: auto;
}

.bento-body:hover{
    box-shadow: none;
}

.inner-bento {
    background-color: white;
}

.bento-header {
    padding-left: 5px;
}

.bento-dimensions {
    min-height: 200px;
    max-height: 500px;
    overflow-y: auto;
}

.bento-text {
    color: $font-color !important;
    line-height: 150%;
    font-size: 14px;
}

.bento-button {
    background: var(--Color-Gray-Gray-100, #F6F9FC);
    color: var(--Primary-color, #2C5E7D) !important;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
    width: fit-content;
    padding: 0px 12px;
    font-family: Open Sans;
    font-weight: 400;
    height: 35px;
    min-width: 100px; /* Optionally, set a minimum width */
}

/* END bento box styles */



/* HEADER SECTION */

#cve_id{
    color: var(--Color-Gray-Gray-700, #525F7F) !important;
    /* H6 */
    font-family: "Inter";
    font-size: 14px;
    font-style: normal !important;

    line-height: 150%; /* 21px */
}

#title-element{
    color: var(--Color-Typography-typography-dark, #17254D);
    /* H5 */
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
}

#title-bento {
    padding: var(--Spacing-7, 24px);
    background: var(--Color-Background-Bg-light, #F8F9FA);
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);
}

/* END header section */





/* QUESTIONS SECTION */

#question-bento {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    line-height: 150%;

    padding: var(--Spacing-7, 24px);
    flex-direction: column;
    align-items: center;
    gap: var(--Spacing-4, 8px);
}

#question-input {
    flex-grow: 2; /* Make the input box take more space */
    padding: 12px;
    padding-right: 20px !important;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: none;
    outline: none;
    border: none;
    margin: 5px 0;
    height: 50px;
    width: 100%;
}

#question-input:focus {
    background-color: white;
}

#charCount {
    position: absolute;
    color: var(--Color-Gray-Gray-500, #ADB5BD);
    font-size: 8px;
    color: #999;
    bottom: 8px;
    right: 15px;
}

#submit-question-button {
    display: flex;
    width: 34px;
    height: 34px;
    padding: var(--Spacing-4, 8px);
    flex-direction: column;
    justify-content: center; /* Horizontal alignment */
    align-items: center;
    background-color: #ADB5BD;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0; /* Prevent the button from shrinking */
    white-space: nowrap;
}

.circle-btn {
    width: 50px;         /* Set a fixed width */
    height: 50px;        /* Set a fixed height, same as width */
    background-color: #4CAF50; /* Button color */
    color: white;        /* Text color */
    border: none;        /* Remove default border */
    border-radius: 50%;  /* Makes the button circular */
    cursor: pointer;     /* Changes cursor to pointer on hover */
    display: flex;       /* Centers text inside */
    align-items: center; /* Vertical alignment */
    justify-content: center; /* Horizontal alignment */
}

#submit-question-button .iconify {
    width: var(--Spacing-6, 16px);
    height: var(--Spacing-6, 16px);
    padding: 0.669px 0.666px 0.666px 0.669px;
}


#gpt-answer-input {
    width: 100%;  /* Full width of the container */
    min-height: 40px;  /* Reasonable minimum height */
    padding: 10px;  /* Padding for better appearance */
    box-sizing: border-box;  /* Ensures padding is included in width */
    overflow: hidden;  /* Prevents scrollbars */
    border-radius: 16px;
    margin: 5px 0;
}

.answer-container{
    display: flex;
    padding: var(--Spacing-5, 12px);
    margin: 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--Spacing-5, 12px);
    background: var(--Color-Gray-Gray-200, #E9ECEF);

    color: var(--text-primary, #17254D);
}

.input-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center !important;
    gap: var(--Spacing-5, 12px);
    text-align: center;
}

.input-wrapper {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    flex-grow: 1;
}

#question-input {
  width: 100%; /* Ensure the input fills the wrapper */
  padding-right: 3em; /* Make space for the char-count */
  box-sizing: border-box; /* Include padding in the width */
}

#char-count {
    position: absolute;
    bottom: 5px; /* Adjust as needed for vertical positioning */
    right: 5px;  /* Adjust as needed for horizontal positioning */
    font-size: 0.8em; /* Adjust font size as desired */
    color: #888; /* Adjust color as desired */
    pointer-events: none; /* Prevent interference with input clicks */
}
.question-style::before {
    content: '•';
    position: absolute;
    left: 15px;
    color: black;
}

details summary .question-arrow {
    margin-left: 0;
    transition: transform 0.3s ease;
}

details[open] summary .question-arrow {
    transform: rotate(180deg);
}

.answer-content {
    position: relative;
    max-height: 100%; /* Ensure the element's height is not constrained */
    overflow: hidden; /* Hide any overflowing text */
}

.answer-content.blur:before {
    content: '';
    position: absolute;
    top: 0; /* Adjust this value to control how much text is visible */
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 5%, rgba(255, 255, 255, 1) 30%);
    pointer-events: none; /* Prevent interactions */
    z-index: 1; /* Place this above the text */
}

.answer-content.blur {
    pointer-events: none; /* Disable interaction */
    user-select: none;
}

.answer-content.blur::selection {
    background: none; /* Disable highlight when selecting */
}

.answer-content.blur .d-flex {
    z-index: 2; /* Place the button above the overlay */
}

.answer-text::before {
    content: attr(data-text);
}

.feedback-button {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    margin: 0 5px;
    padding: 5px;
    cursor: pointer;
    font-size: 14px;
    color: #386641;
}

.feedback-button .iconify {
    margin-left: 5px;
}

.like-count, .dislike-count {
    color: #8898AA;
    font-weight: 700;
}

#chat-div {
    width: 100%;
    min-height: 0px;
    background-color: transparent;
    border: 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: 400px;
}

.chat-question {
    align-self: flex-start;
    background-color: #FFFFFF;
    color: #17254D;
    flex-shrink: 0;
}

.chat-answer {
    align-self: flex-end;
    background-color: #E9ECEF;
    color: #17254D;
    flex-shrink: 0;
    overflow: hidden;
}

.chat-timestamp {
    background-color: #FF9E00;
    color: #17254D;
    align-self: center;
    border-radius: 12px;
    padding: 5px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-color: transparent;
}

/* END questions section */



/* DESCRIPTION SECTION */

.arrow-icon {
    transition: transform 0.3s ease-out;
}

/* Rotate when <details> is open */
details[open] .arrow-icon {
    transform: rotate(180deg);
}

/* END DESCRIPTION SECTION */




/* CVSS SCORES */

.epss-box {
    display: inline-block;
    width: 70px;
    padding: 3px;
    vertical-align: middle;
    line-height: 1.2em;
    text-align: center;
    border-radius: 4px;
}

.button-col {
    display: flex;
    align-items: center;
    align-self: stretch;
    background: var(--Color-Gray-Gray-200, #E9ECEF);
    padding: 12px;

}

.active-button {
    background-color: #DEE2E6 !important;
}

#cvss-table-1 td, #cvss-table-2 td {
    padding: 0 0 10px 0;
}

#cvss-table-1 td:first-child, #cvss-table-2 td:first-child {
    font-weight: 700;
    width: 40%;
    padding: 0;
}

#cvss-table-1 td:last-child, #cvss-table-2 td:last-child {
    width: 60%;
}

#button-container{
    height: 40px;
    background-color: transparent !important;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
}

@media (max-width: 576px) {
  #button-container {
    gap: 10px; /* smaller gap for mobile */
  }
}

.cvss-tab {
    padding-left: 20px;
    padding-top: 5px;
    min-height: 100px;
}

/* Default grid layout for desktops and larger screens */
.cvss-field-block{
    display: grid;
    grid-template-columns: auto 1fr auto 1fr; /* two pairs in one row */
    row-gap: 1.25rem;
    column-gap: 1.5rem;
    padding-top: 0.75rem;
    margin-bottom: 0.75rem;
    align-items: center;
    width: fit-content;
}

/* Mobile adjustments */
@media (max-width: 576px) {
   .cvss-fields-container {
      /* Use two columns only: one for the label and one for the value */
      grid-template-columns: auto 1fr;
      column-gap: 0.5rem;  /* reduce the gap between label and value */
      row-gap: 0.75rem;    /* reduce vertical gap if needed */
      width: fit-content;
      flex: 0 0 auto;
   }
}
/* END cvss section */





/* AFFECTED VENDORS*/

#table-affected-vendors-products {
    width: 100%;
    table-layout: auto; /* Let columns size themselves based on content */
    border-collapse: collapse;
    border-spacing: 0;
}

#table-affected-vendors-products td {
    color: $font-color !important;
}

#table-affected-vendors-products th {
    color: #386641;
    font-weight: 700;
}

#table-affected-vendors-products tbody tr td:first-child {
    font-weight: 700;
}

@media (max-width: 576px) {
    #table-affected-vendors-products th,
    #table-affected-vendors-products td {
        font-size: 10px; /* smaller text on mobile */
        padding: 4px;    /* reduce padding */
    }
}

/* END affected vendors */





/* EXPLOITABILITY */

#table-exploitability tbody tr td:first-child {
    font-weight: 700;
    width: 30%;
}

#table-exploitability tr td:second-child {
    width: 70%;
}

#table-exploitability th {
    color: #386641;
    font-weight: 700;
    font-size: 14px;
}

#table-exploitability td {
    color: $font-color !important;
}

/* END exploitability */





/* RESOURCES */

#resource-container {
    font-size: 14px;
}

#resource-container a {
    color: #386641;
    padding-bottom: 5px;
}

#resource-container .iconify {
    color: #386641;
}

/* END resources */





#description-bento-body {
    max-height: 150px;
    overflow-y: auto;
}

h5 {
    color: var(--text-primary, #17254D);

    /* H5 */
    font-family: "Open Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
}

.table {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
}

.table td {
    word-wrap: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    white-space: normal;
    padding: 8px;
    border: 1px solid #ddd;
    vertical-align: top;
}

.table tbody tr, .table tbody tr td, .table th {
    border: none !important;
}

.table tbody tr td {
    color: $font-color !important;
}

#table-exploitability th, .cve-report-table td {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    white-space: normal !important;
}

th, td {
    border: transparent;
}

.carousel-inner, .page-header, #welcomeCard, .page-bg-header {
    height: 200px !important;
}

.d-flex {
    display: flex;
}

.justify-content-end {
    justify-content: flex-end;
}

.tooltip {
  opacity: 1 !important; /* Ensures tooltip is fully opaque */
}

.tooltip-inner {
  padding: 8px 5px;
  background-color: var(--Color-Background-Pop-up-dialog, #B5D1DE);
  color: var(--Color-Typography-typography-dark, #17254D);
  font-size: 12px !important;
  font-family: 'Open Sans' !important;
  font-weight: 400 !important;
  border-radius: 16px !important;
  line-height: 150% !important;

  white-space: normal !important; /* Allow text wrapping */
  word-wrap: break-word !important; /* Ensure long words break */
  max-width: 300px; /* Optional: Limit the maximum width */
  min-width: 100px; /* Optional: Minimum tooltip width */
}

.tooltip .arrow::before {
  border-color: transparent !important;
}

textarea {
    resize: none;
    border-radius: 12px;
    padding: 5px;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 60%;
    border-color: transparent;
    overflow: hidden;
}

.info-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 15px 30px; /* Adjusts the space between headers and values */
}

.info-header {
    font-weight: 700; /* Makes the headers bold */
}

.logo {
    border-radius: 25%;
}

.no-data-container {
    font-style: normal;
    font-weight: 400;
    line-height: 200%; /* 21px */
    max-width: 60%;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: var(--Color-Gray-Gray-200, #E9ECEF);
    padding: var(--Spacing-4, 8px) var(--Spacing-6, 16px);
    align-self: center !important;
}

.no-click {
  cursor: default; /* Ensures the cursor does not change */
  pointer-events: none; /* Prevents any interaction */
}

.center-text {
  text-align: center; /* Centers text horizontally */
  display: inline-block; /* Keeps the span as an inline element */
  width: 100%; /* Ensures the element takes full width */
  vertical-align: middle; /* Vertically aligns the text */
}

.text-overflow{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}

.truncate-two-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

#bento-background {
    background-color: white;
    border-radius: 16px;
    padding: 24px;
}

.custom-tooltip-class {
    position: absolute;
    background-color: var(--Color-Background-Pop-up-dialog, #B5D1DE);
    gap: 10px;
    color: var(--Color-Typography-typography-dark, #17254D);
    padding: 8px 12px;
    border-radius: 16px;
    font-size: 14px;
    transition: opacity 0.2s ease-in-out;
    padding: 12px;
    pointer-events: none; /* Prevent tooltip from interfering with interactions */
}

/* Make the canvas fill the square — override any width/height from classes */
.cvss-radar{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.afg-box{
  width: 100%;
  aspect-ratio: 16 / 10;     /* balanced frame; no vertical stretching */
  min-height: 360px;         /* ensures usability on small widths */
  position: relative;
}
@media (max-width: 768px){
  .afg-box{ aspect-ratio: 1 / 1; } /* square-ish on phones */
}

#qa-outer-bento {
    margin-bottom: 24px;
}

.answer-text {
    font-family: inherit;  /* Keeps your existing font */
    line-height: 1.6;      /* Makes it easier to read */
}

/* ===== BaseFortify AI Assistant – scroll/height fixes (append-only overrides) ===== */

/* Override global textarea rule ONLY for chat bubbles */
#chat-div textarea.chat-answer {
  overflow-y: auto;            /* allow scroll when content exceeds max-height */
  overflow-x: hidden;
  resize: vertical;            /* allow user to drag if they want */
  max-height: 160px;           /* cap bubble height so it doesn't go under input */
}

/* Your current .chat-answer sets overflow:hidden; override it */
#chat-div textarea.chat-answer {
  overflow-y: auto;
}