/* ==========================================================
   V240 — compact borderless navigation / chat controls
   Frontend appearance only.
   ========================================================== */

/* ---------- Shared icon styling ---------- */

.yv240-icon-control {
  appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 5px !important;
  padding: 5px 7px !important;
  min-width: 54px !important;
  min-height: 52px !important;

  color: #aab5ca !important;
  cursor: pointer !important;
}

.yv240-icon-control:hover {
  color: #d9cdfd !important;
  background: transparent !important;
}

.yv240-icon-control .yv240-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yv240-icon-control .yv240-icon svg {
  width: 22px;
  height: 22px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.yv240-icon-control .yv240-label {
  font-size: 7px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
  white-space: nowrap !important;
}


/* ==========================================================
   LEFT NAVIGATION
   DEVICES | WORKFLOW | REPORT | TEST BOARDS
   ========================================================== */

.yv240-left-nav-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-around !important;

  width: 100% !important;
  gap: 4px !important;
  padding: 8px 7px 10px !important;
}

.yv240-left-nav-item {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 5px 2px !important;
}

/* Preserve active tab emphasis without boxes */
.yv240-left-nav-item.active,
.yv240-left-nav-item.is-active,
.yv240-left-nav-item[aria-selected="true"],
.yv240-left-nav-item[class*="active"] {
  color: #a980ff !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.yv240-left-nav-item.active .yv240-icon,
.yv240-left-nav-item.is-active .yv240-icon,
.yv240-left-nav-item[aria-selected="true"] .yv240-icon {
  color: #a980ff !important;
}


/* ==========================================================
   CHAT HEADER ACTIONS
   CLEAR + COLLAPSE beside each other at right
   ========================================================== */

.v225-chat-head {
  display: flex !important;
  align-items: center !important;
}

.yv240-chat-actions {
  margin-left: auto !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;

  gap: 10px !important;
  padding-right: 5px !important;
}

.yv240-chat-actions .yv240-icon-control {
  width: 58px !important;
  min-width: 58px !important;
  height: 54px !important;
  min-height: 54px !important;
  padding: 4px !important;
}

.yv240-chat-toggle .yv240-icon {
  color: #ac8cff !important;
}

.yv240-chat-clear .yv240-icon {
  color: #b6c0d2 !important;
}

.yv240-chat-toggle:hover .yv240-icon,
.yv240-chat-clear:hover .yv240-icon {
  color: #ffffff !important;
}

/* Absolutely no pill / box around these controls */
.yv240-chat-toggle,
.yv240-chat-clear,
.yv240-chat-toggle:hover,
.yv240-chat-clear:hover,
.yv240-chat-toggle:focus,
.yv240-chat-clear:focus {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}


/* Keep the four navigation controls readable on narrower desktop widths */
@media (max-width: 1350px) {
  .yv240-left-nav-item .yv240-label {
    font-size: 6px !important;
  }

  .yv240-left-nav-item .yv240-icon,
  .yv240-left-nav-item .yv240-icon svg {
    width: 19px;
    height: 19px;
  }
}