label { font-weight: 600; display: block; }
input.base-control, button.base-control, .dropdown-list button{
  height:calc(var(--user-font-size) * 2.1);
}

/* Height and Width */
.dropdown-list, .dropdown-element, .action-btn{ min-width:200px;}
/*
.dropdown-list,  .action-btn {height:calc(var(--user-font-size) * 2.2)  }
.dropdown-list button {min-height:auto;}
*/

.dropdown-list {z-index:2;}
.base-control, .action-btn {
  /*z-index: 20;*/
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  outline: none;
}
.base-control, .action-btn {
  color: var(--chat-control-color);
  border-color: var(--chat-control-border);
  background-color: var(--chat-control-bg);
}

input.base-control::placeholder {color: #777; opacity: 0.75;}
input.base-control, textarea.base-control { font-size: calc(var(--user-font-size) * 1.1); }
.dropdown-element {position: absolute;}
.help-text{
  font-size: calc(var(--user-font-size) * 0.85);
  opacity: 0.5;
}


.distraction-free{
  opacity: 0.65;
  transition: color 0.4s ease, opacity 0.8s ease, border 0.4s ease, box-shadow 0.4s ease;
}
.distraction-free:hover, .distraction-free:focus{ opacity: 1.0; }
.distraction-free:hover, .distraction-free:focus{
  color: var(--chat-distraction-color); border-color: #888888;
}
.shadow:hover, .shadow:focus { box-shadow: 0 0 8px var(--chat-shadow-hover); }


input[type="range"] { background: var(--chat-range-bg); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #fff;
  border: 2px solid #666;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 4px #aaa;
  transition: background 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: #66ccff;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider::before {
  transform: translateX(24px);
}



.dropdown-element {display: none;}
.dropdown-element { background-color: var(--chat-dropdown-bg); }
.dropdown-element a:hover { background-color: var(--chat-dropdown-hover); }


.dropdown-element a {
  display: block;
  padding: 0.33rem 0.75rem;
  color: inherit;
}
.dropdown-element .submenu{ font-size:smaller; padding-left:0.0rem; }
.dropdown-element .submenu a {padding-left:12px;}
.dropdown-element .header {
  font-size: calc(var(--user-font-size) * 1.0);
  opacity: 0.75;
  padding:0 0.25rem;
  text-align: center;
}




/* SEARCH AND action */

.search-action-group {
  /* position:absolute; top:5.5rem; right:6rem; padding-right:0.5rem; z-index: 20; */
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
}


.action-menu {
  position: relative;
  position:absolute; top:1.5rem; right:6rem; padding-right:0.5rem; z-index: 150;
  display: inline-block;
}

.btn, .action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: calc(var(--user-font-size) * 1.0);
  cursor: pointer;
  position: relative;
}
.btn.center-text, .action-btn.center-text {justify-content: center; align-items: center; }


.action-btn::after {
  content: "▾";
  font-size: calc(var(--user-font-size) * 2.5);
  position: absolute;
  right: 0; /*0.75rem*/
  top:-5px;
  pointer-events: none;
  color: var(--chat-indicator-color);
}


.search-input {
  width:25rem;
  padding: 0.5rem 0.75rem;
  font-size: calc(var(--user-font-size) * 1.0);
  outline: none;
  transition: border 0.2s ease, box-shadow 0.2s ease;
}


input.val-error {
  background-color: #ff6e0026 !important;
  box-shadow: 0 0 6px 2px #ff6e00;
  outline: none;
  transition: all 0.3s ease;
}


/* ── Custom tooltip — triggered by [tooltip] attribute ─────────────────────
   Usage: <span tooltip="Your text here">🛈</span>
   Pure CSS: no JS required. Popup appears above the element on hover.
   ────────────────────────────────────────────────────────────────────────── */
[tooltip] {
  position: relative;
  display: inline-block;
  cursor: default;
  color: var(--int-text-muted, #888);
  /* z-index: 400; */
}
[tooltip]:hover {
  color: var(--int-color-info, #56b8ef);
}
[tooltip]:hover::after {
  content: attr(tooltip);
  position: absolute;
  z-index: 400;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 22rem;
  padding: 0.55rem 0.75rem;
  background: var(--int-color-info, #56b8ef);
  color: var(--int-bg-card, #111);
  border: 1px solid rgba(86, 184, 239, 0.4);
  border-radius: 0.45rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  pointer-events: none;
  text-align: left;
}
[tooltip]:hover::before {
  content: "";
  position: absolute;
  z-index: 401;
  bottom: calc(100% + 0.25rem);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 0.65rem;
  height: 0.65rem;
  background: var(--int-color-info, #56b8ef);
  border-right: 1px solid rgba(86, 184, 239, 0.4);
  border-bottom: 1px solid rgba(86, 184, 239, 0.4);
  pointer-events: none;
}

/* Left column: open rightward with a small overhang past the icon's left edge */
.form-col-left [tooltip]:hover::after {
  left: -2.5rem;
  right: auto;
  transform: none;
}
.form-col-left [tooltip]:hover::before {
  left: 0.2rem;
  right: auto;
  transform: rotate(45deg);
}

/* Right column: open leftward with a small overhang past the icon's right edge */
.form-col-right [tooltip]:hover::after {
  left: auto;
  right: -6.5rem;
  transform: none;
}
.form-col-right [tooltip]:hover::before {
  left: auto;
  right: 0.0rem;
  transform: rotate(45deg);
}