.settings-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.sheet-panel .settings-section-head h3 {
  margin: 0;
  font-size: 10px;
}

.settings-section-head > small {
  color: #8b96a8;
  font-size: 7px;
  letter-spacing: .02em;
}

.model-options {
  display: flex;
  gap: 8px;
  margin: 0 -16px;
  padding: 1px 16px 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.model-options::-webkit-scrollbar { display: none; }

.model-options > button {
  flex: 0 0 174px;
  min-height: 58px;
  padding: 8px 10px;
  grid-template-columns: 36px minmax(0, 1fr) 14px;
  gap: 9px;
  border-radius: 15px;
  scroll-snap-align: start;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.model-options > button:active { transform: scale(.975); }

.model-options .model-glyph {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 11px;
}

.model-options > button > span:nth-child(2) { min-width: 0; }

.model-options strong,
.model-options small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-options strong { font-size: 9px; }
.model-options small { font-size: 6px; text-transform: uppercase; }

.reasoning-console {
  --reasoning-progress: 50%;
  --rail-a: #788496;
  --rail-b: #a8b0bc;
  --rail-c: #d8dde4;
  position: relative;
  padding: 13px 12px 11px;
  overflow: hidden;
  border: 1px solid rgba(115, 128, 149, .17);
  border-radius: 17px;
  background: rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 12px 30px rgba(34, 48, 75, .055);
  isolation: isolate;
}

.reasoning-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.reasoning-readout span { display: flex; align-items: center; gap: 7px; }

.reasoning-readout span > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rail-b);
  box-shadow: 0 0 calc(4px + var(--reasoning-intensity, 0) * 2px) var(--rail-b);
}

.reasoning-readout strong { color: #182238; font-size: 10px; }

.reasoning-readout code {
  padding: 3px 7px;
  border: 1px solid rgba(117, 130, 151, .13);
  border-radius: 99px;
  color: #758195;
  background: rgba(243, 246, 250, .9);
  font: 600 6px/1.2 Inter, sans-serif;
  letter-spacing: .11em;
}

.reasoning-rail {
  position: absolute;
  z-index: 0;
  top: 47px;
  right: 24px;
  left: 24px;
  height: 22px;
  overflow: hidden;
  border: 1px solid rgba(93, 108, 130, .15);
  border-radius: 99px;
  background:
    linear-gradient(180deg, rgba(101, 115, 136, .2), rgba(224, 229, 236, .48) 48%, rgba(255, 255, 255, .76));
  box-shadow:
    inset 0 2px 4px rgba(32, 43, 61, .18),
    inset 0 -1px 0 rgba(255, 255, 255, .9),
    0 1px 2px rgba(41, 53, 73, .08);
}

.reasoning-rail-fill,
.reasoning-rail-aura {
  position: absolute;
  inset: 3px auto 3px 3px;
  width: var(--reasoning-progress);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rail-a), var(--rail-b) 55%, var(--rail-c));
  transition: width .42s cubic-bezier(.2, .8, .2, 1), filter .3s ease;
}

.reasoning-rail-fill {
  background-size: 220% 100%;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .48),
    inset 0 -2px 3px rgba(18, 36, 68, .18),
    0 0 calc(7px + var(--reasoning-intensity, 0) * 2px) color-mix(in srgb, var(--rail-b) 64%, transparent);
}

.reasoning-rail-fill::before {
  content: "";
  position: absolute;
  inset: 2px 5px auto;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .72), rgba(255, 255, 255, .12));
  opacity: .72;
}

.reasoning-rail-aura {
  z-index: -1;
  opacity: calc(.08 + var(--reasoning-intensity, 0) * .09);
  filter: blur(calc(6px + var(--reasoning-intensity, 0) * 1px));
  transform: scaleY(1.7);
}

.reasoning-runner {
  position: absolute;
  top: 3px;
  left: var(--reasoning-progress);
  width: 8px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 99px;
  background: var(--rail-c);
  box-shadow:
    inset 1px 0 1px rgba(255, 255, 255, .65),
    0 0 calc(6px + var(--reasoning-intensity, 0) * 3px) var(--rail-b);
  transform: translateX(-50%);
  transition: left .42s cubic-bezier(.2, .8, .2, 1);
}

.reasoning-stops {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--reasoning-count, 4), minmax(0, 1fr));
  margin: 0 2px;
}

.reasoning-stops button {
  min-width: 0;
  padding: 0 1px;
  border: 0;
  color: #929cad;
  background: transparent;
  text-align: center;
}

.reasoning-stops button::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 8px auto 14px;
  border: 1px solid rgba(255, 255, 255, .84);
  border-radius: 50%;
  background: rgba(120, 133, 152, .42);
  box-shadow: 0 1px 2px rgba(30, 43, 62, .18);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.reasoning-stops button.selected { color: #26334b; }

.reasoning-stops button.selected::before {
  background: #fff;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--rail-b) 82%, white),
    0 0 calc(7px + var(--reasoning-intensity, 0) * 2px) var(--rail-b);
  transform: scale(1.08);
}

.reasoning-stops strong,
.reasoning-stops small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reasoning-stops strong { font-size: 7px; }
.reasoning-stops small { margin-top: 2px; font-size: 5px; text-transform: uppercase; }

.reasoning-description {
  min-height: 25px;
  margin: 11px 1px 0;
  color: #7f8a9b;
  font-size: 7px;
  line-height: 1.55;
}

.reasoning-console[data-level="medium"] { --rail-a: #377cf3; --rail-b: #2baeea; --rail-c: #62d7dd; }
.reasoning-console[data-level="high"] { --rail-a: #257df5; --rail-b: #6d5df6; --rail-c: #b75df0; }
.reasoning-console[data-level="xhigh"] { --rail-a: #1fa8f6; --rail-b: #7454f6; --rail-c: #f04fa7; }
.reasoning-console[data-level="max"] { --rail-a: #27d5d0; --rail-b: #7862ff; --rail-c: #ff5b91; }
.reasoning-console[data-level="ultra"] { --rail-a: #22d3ee; --rail-b: #9b5cff; --rail-c: #ffc64a; }

.reasoning-console[data-intensity="2"] .reasoning-rail-fill,
.reasoning-console[data-intensity="3"] .reasoning-rail-fill,
.reasoning-console[data-intensity="4"] .reasoning-rail-fill,
.reasoning-console[data-intensity="5"] .reasoning-rail-fill {
  animation: reasoning-spectrum 3.4s linear infinite;
}

.reasoning-console[data-intensity="3"] .reasoning-rail-fill { animation-duration: 2.7s; }
.reasoning-console[data-intensity="4"] .reasoning-rail-fill { animation-duration: 2s; }
.reasoning-console[data-intensity="5"] .reasoning-rail-fill { animation-duration: 1.35s; }

.reasoning-console[data-intensity="4"]::after,
.reasoning-console[data-intensity="5"]::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 33px;
  left: -35%;
  width: 22%;
  height: 48px;
  opacity: .42;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--rail-c) 42%, transparent), transparent);
  filter: blur(8px);
  transform: skewX(-25deg);
  animation: reasoning-glint 2.8s ease-in-out infinite;
}

.reasoning-console[data-intensity="5"]::after { animation-duration: 1.8s; }

@keyframes reasoning-spectrum { to { background-position: -220% 0; } }
@keyframes reasoning-glint { 0% { left: -35%; } 70%, 100% { left: 120%; } }

.app-server-actions button {
  border: 1px solid rgba(115, 128, 149, .17);
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
}

html[data-theme-mode="colorful"] .settings-section-head > small,
html[data-theme="dark"] .settings-section-head > small { color: rgba(255, 255, 255, .46); }

html[data-theme-mode="colorful"] .reasoning-console,
html[data-theme="dark"] .reasoning-console {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 16px 34px rgba(0, 0, 0, .18);
}

html[data-theme-mode="colorful"] .reasoning-readout strong,
html[data-theme="dark"] .reasoning-readout strong,
html[data-theme-mode="colorful"] .reasoning-stops button.selected,
html[data-theme="dark"] .reasoning-stops button.selected { color: #fff; }

html[data-theme-mode="colorful"] .reasoning-readout code,
html[data-theme="dark"] .reasoning-readout code {
  color: rgba(255, 255, 255, .62);
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .07);
}

html[data-theme-mode="colorful"] .reasoning-description,
html[data-theme="dark"] .reasoning-description,
html[data-theme-mode="colorful"] .reasoning-stops button,
html[data-theme="dark"] .reasoning-stops button { color: rgba(255, 255, 255, .48); }

html[data-theme-mode="colorful"] .reasoning-stops button::before,
html[data-theme="dark"] .reasoning-stops button::before {
  border-color: rgba(255, 255, 255, .58);
  background: rgba(255, 255, 255, .3);
}

html[data-theme-mode="colorful"] .app-server-actions button,
html[data-theme="dark"] .app-server-actions button {
  color: #fff;
  border-color: rgba(255, 255, 255, .11);
  background: rgba(255, 255, 255, .045);
}

/* Figma spec: compact model segments + substantial six-stage energy capsule. */
.model-options {
  gap: 5px;
  margin: 0;
  padding: 5px;
  border: 1px solid rgba(115, 128, 149, .18);
  border-radius: 16px;
  background: rgba(20, 25, 35, .055);
  scroll-padding-inline: 5px;
}

.model-options > button {
  flex: 0 0 108px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}

.model-options > button.selected {
  color: #101521;
  background: #eef2ff;
  box-shadow: 0 4px 14px rgba(44, 64, 120, .12);
}

.model-options .model-glyph,
.model-options small,
.model-options > button > i { display: none; }
.model-options strong { color: inherit; font-size: 8px; text-align: center; }

.reasoning-console {
  padding: 15px 14px 14px;
  border-radius: 20px;
  box-shadow: 0 15px 34px rgba(22, 29, 45, .08);
}

.reasoning-readout { margin-bottom: 13px; }
.reasoning-readout span > i { width: 5px; height: 5px; }

.reasoning-segments {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--reasoning-count, 4), minmax(0, 1fr));
  gap: 3px;
  height: 42px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(95, 107, 132, .3);
  border-radius: 15px;
  background: #11151e;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .06);
}

.reasoning-segment {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(120, 131, 154, .22);
  border-radius: 11px;
  background: #20242e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), background .3s ease, box-shadow .3s ease;
}

.reasoning-segment.active {
  border-color: color-mix(in srgb, var(--rail-b) 72%, white);
  background: linear-gradient(110deg, var(--rail-a), var(--rail-b) 54%, var(--rail-c));
  background-size: 220% 100%;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .38), inset 0 -3px 4px rgba(15, 27, 60, .2);
}

.reasoning-segment.active::after {
  content: "";
  position: absolute;
  inset: 2px 5px auto;
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  opacity: .6;
}

.reasoning-segment.selected {
  z-index: 2;
  border: 2px solid color-mix(in srgb, var(--rail-c) 64%, white);
  transform: translateY(-1px);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .42),
    inset 0 -3px 4px rgba(15, 27, 60, .2),
    0 0 calc(8px + var(--reasoning-intensity, 0) * 2px) color-mix(in srgb, var(--rail-b) 72%, transparent);
}

.reasoning-stops { margin: 9px 4px 0; }
.reasoning-stops button::before { display: none; }
.reasoning-stops strong { font-size: 6px; }
.reasoning-stops small { margin-top: 1px; font-size: 4px; }
.reasoning-description { margin-top: 13px; min-height: 22px; }

.reasoning-console[data-intensity="2"] .reasoning-segment.active,
.reasoning-console[data-intensity="3"] .reasoning-segment.active,
.reasoning-console[data-intensity="4"] .reasoning-segment.active,
.reasoning-console[data-intensity="5"] .reasoning-segment.active {
  animation: reasoning-spectrum 3.4s linear infinite;
}
.reasoning-console[data-intensity="3"] .reasoning-segment.active { animation-duration: 2.7s; }
.reasoning-console[data-intensity="4"] .reasoning-segment.active { animation-duration: 2s; }
.reasoning-console[data-intensity="5"] .reasoning-segment.active { animation-duration: 1.35s; }

html[data-theme-mode="colorful"] .model-options,
html[data-theme="dark"] .model-options { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .1); }
html[data-theme-mode="colorful"] .model-options > button.selected,
html[data-theme="dark"] .model-options > button.selected { color: #111723; background: #eef2ff; }

@media (prefers-reduced-motion: reduce) {
  .reasoning-rail-fill,
  .reasoning-console::after,
  .reasoning-segment { animation: none !important; }
}

/* Liquid reasoning meter: one tactile control instead of discrete blocks. */
.reasoning-liquid {
  position: relative;
  height: 44px;
  overflow: hidden;
  border: 1px solid rgba(119, 133, 158, .32);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, .09), transparent 52%),
    linear-gradient(180deg, #0b0e15, #181d28 52%, #0d1119);
  box-shadow:
    inset 0 4px 9px rgba(0, 0, 0, .72),
    inset 0 -1px 0 rgba(255, 255, 255, .08),
    0 7px 18px rgba(17, 26, 43, .14);
  isolation: isolate;
  touch-action: manipulation;
}

.reasoning-liquid::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, .045);
  border-radius: inherit;
  pointer-events: none;
}

.reasoning-liquid-fill,
.reasoning-liquid-sheen {
  position: absolute;
  left: 5px;
  top: 5px;
  width: max(18px, calc(var(--reasoning-progress) - 5px));
  height: 32px;
  border-radius: 999px;
  transition: width .48s cubic-bezier(.16, 1, .3, 1), filter .3s ease;
  pointer-events: none;
}

.reasoning-liquid-fill {
  z-index: 1;
  overflow: hidden;
  background: linear-gradient(105deg, var(--rail-a), var(--rail-b) 50%, var(--rail-c), var(--rail-a));
  background-size: 240% 100%;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .46),
    inset 0 -4px 7px rgba(10, 22, 55, .28),
    0 0 calc(8px + var(--reasoning-intensity, 0) * 3px) color-mix(in srgb, var(--rail-b) 72%, transparent);
}

.reasoning-liquid-fill::before {
  content: "";
  position: absolute;
  inset: 3px 8px auto;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .72), rgba(255, 255, 255, .14));
  filter: blur(.3px);
  opacity: .76;
}

.reasoning-liquid-sheen {
  z-index: 2;
  overflow: hidden;
  background: linear-gradient(108deg, transparent 32%, rgba(255, 255, 255, .38) 47%, transparent 61%);
  background-size: 210% 100%;
  mix-blend-mode: screen;
  opacity: calc(.18 + var(--reasoning-intensity, 0) * .08);
}

.reasoning-liquid-orb {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: var(--reasoning-progress);
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, .94);
  border-radius: 50%;
  background: color-mix(in srgb, var(--rail-b) 82%, white);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, .56),
    0 0 0 2px rgba(255, 255, 255, .18),
    0 0 calc(9px + var(--reasoning-intensity, 0) * 3px) var(--rail-b);
  transform: translate(-50%, -50%);
  transition: left .48s cubic-bezier(.16, 1, .3, 1), background .3s ease, box-shadow .3s ease;
  pointer-events: none;
}

.reasoning-liquid-hitbox {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--reasoning-count, 4), minmax(0, 1fr));
}

.reasoning-liquid-hitbox button {
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.reasoning-liquid-hitbox button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -5px;
  border-radius: 999px;
}

.reasoning-liquid-hitbox button:active { background: rgba(255, 255, 255, .08); }

.reasoning-stops {
  margin: 5px 0 0;
}

.reasoning-stops button {
  min-height: 29px;
  padding: 4px 1px 0;
  -webkit-tap-highlight-color: transparent;
}

.reasoning-stops button::before { display: none; }
.reasoning-stops strong { font-size: 6px; }
.reasoning-stops small { margin-top: 1px; font-size: 4px; }
.reasoning-description { margin-top: 10px; min-height: 22px; }

.reasoning-console[data-intensity="2"] .reasoning-liquid-fill,
.reasoning-console[data-intensity="3"] .reasoning-liquid-fill,
.reasoning-console[data-intensity="4"] .reasoning-liquid-fill,
.reasoning-console[data-intensity="5"] .reasoning-liquid-fill {
  animation: reasoning-spectrum 3.4s linear infinite;
}

.reasoning-console[data-intensity="2"] .reasoning-liquid-sheen,
.reasoning-console[data-intensity="3"] .reasoning-liquid-sheen,
.reasoning-console[data-intensity="4"] .reasoning-liquid-sheen,
.reasoning-console[data-intensity="5"] .reasoning-liquid-sheen {
  animation: reasoning-liquid-sheen 2.9s ease-in-out infinite;
}

.reasoning-console[data-intensity="3"] .reasoning-liquid-fill { animation-duration: 2.7s; }
.reasoning-console[data-intensity="4"] .reasoning-liquid-fill { animation-duration: 2s; }
.reasoning-console[data-intensity="5"] .reasoning-liquid-fill { animation-duration: 1.35s; }
.reasoning-console[data-intensity="4"] .reasoning-liquid-sheen { animation-duration: 2.1s; }
.reasoning-console[data-intensity="5"] .reasoning-liquid-sheen { animation-duration: 1.55s; }

@keyframes reasoning-liquid-sheen {
  0%, 18% { background-position: 160% 0; }
  72%, 100% { background-position: -110% 0; }
}

/* App Server runtime dashboard. */
.app-server-capabilities {
  position: relative;
  margin-top: 17px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 22px;
  color: #f5f7fc;
  background:
    radial-gradient(circle at 88% 0, rgba(77, 129, 255, .2), transparent 35%),
    linear-gradient(145deg, #141925, #0c1018 68%);
  box-shadow: 0 18px 40px rgba(12, 19, 34, .2), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.app-server-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}

.app-server-heading > div > span {
  display: block;
  margin-bottom: 2px;
  color: #71809a;
  font-size: 5px;
  font-weight: 700;
  letter-spacing: .18em;
}

.sheet-panel .app-server-heading h3 {
  margin: 0;
  color: #fff;
  font-size: 11px;
  letter-spacing: .02em;
}

.app-server-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid rgba(70, 225, 159, .18);
  border-radius: 999px;
  color: #73e2ad;
  background: rgba(52, 196, 130, .08);
  font-size: 5px;
  font-weight: 700;
  letter-spacing: .12em;
}

.app-server-live i,
.app-server-sync span i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #42db98;
  box-shadow: 0 0 8px rgba(66, 219, 152, .9);
}

.app-server-live.offline {
  color: #ff9d9d;
  border-color: rgba(255, 111, 111, .2);
  background: rgba(255, 86, 86, .08);
}

.app-server-live.offline i {
  background: #ff7070;
  box-shadow: 0 0 8px rgba(255, 90, 90, .75);
}

.app-server-status {
  padding: 0;
  border: 0;
  border-radius: 17px;
  color: inherit;
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.app-server-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 11px 5px 9px;
}

.app-server-metrics > div {
  min-width: 0;
  padding: 0 6px;
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.app-server-metrics > div:last-child { border-right: 0; }

.app-server-metrics strong,
.app-server-metrics small { display: block; }
.app-server-metrics strong { color: #fff; font-size: 15px; line-height: 1; letter-spacing: -.04em; }
.app-server-metrics small { margin-top: 5px; overflow: hidden; color: #8390a5; font-size: 5px; text-overflow: ellipsis; white-space: nowrap; }

.app-server-sync {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 11px;
  border-top: 1px solid rgba(255, 255, 255, .065);
  color: #93a0b4;
  font-size: 5px;
}

.app-server-sync span { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.app-server-sync span i { width: 4px; height: 4px; }
.app-server-sync small { overflow: hidden; color: #617087; font-size: 5px; text-overflow: ellipsis; white-space: nowrap; }

.app-server-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 9px;
}

.app-server-actions button,
html[data-theme-mode="colorful"] .app-server-actions button,
html[data-theme="dark"] .app-server-actions button {
  min-height: 49px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 10px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 15px;
  color: #f5f7fc;
  background: rgba(255, 255, 255, .035);
  text-align: left;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.app-server-actions button:not(:disabled):active {
  border-color: rgba(107, 146, 255, .32);
  background: rgba(82, 119, 225, .12);
  transform: scale(.985);
}

.app-server-action-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(119, 151, 255, .16);
  border-radius: 11px;
  color: #8aa6ff;
  background: linear-gradient(145deg, rgba(76, 116, 242, .18), rgba(103, 83, 218, .07));
}

.app-server-action-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-server-actions button > span:nth-child(2) { min-width: 0; }
.app-server-actions strong,
.app-server-actions small { display: block; }
.app-server-actions strong { color: #f5f7fc; font-size: 8px; }
.app-server-actions small { margin-top: 3px; overflow: hidden; color: #79869a; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.app-server-actions button > i { color: #667389; font-size: 14px; font-style: normal; }
.app-server-actions button:disabled { opacity: .42; }

@media (prefers-reduced-motion: reduce) {
  .reasoning-liquid-fill,
  .reasoning-liquid-sheen,
  .reasoning-liquid-orb { animation: none !important; }
}