/* One-window material study. Every rule is constrained to the chat prototype. */
.chat-glass-prototype {
  --glass-edge: rgba(201, 218, 239, .24);
  --glass-ink: #e6edf6;
  position: absolute;
  border-color: rgba(190, 213, 241, .32);
  background: linear-gradient(132deg, rgba(62, 77, 101, .78), rgba(36, 45, 63, .72) 48%, rgba(31, 34, 58, .76));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .46), inset 0 1px rgba(255, 255, 255, .22), inset 1px 0 rgba(220, 235, 255, .09);


}
.chat-glass-prototype::before {
  position: absolute; z-index: 0; inset: 0; border-radius: inherit;
  content: ""; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 30% at 12% -4%, rgba(197, 220, 255, .20), transparent 72%),
    linear-gradient(118deg, rgba(255,255,255,.075), transparent 22% 66%, rgba(139,153,255,.055));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), inset 1px 0 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(191,205,255,.08);
}
.chat-glass-prototype > * { z-index: 1; }
.chat-glass-prototype > .resize-handle { position: absolute; z-index: 12; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chat-glass-prototype { background: linear-gradient(132deg, #293446, #202838 48%, #202236); }
}
.chat-glass-prototype.focused { border-color: rgba(164, 195, 231, .35); }
.chat-glass-prototype .window-titlebar {
  position: relative; overflow: hidden;
  min-height: 42px; height: 42px; flex-basis: 42px; gap: 6px; padding: 0 10px;
  border-bottom-color: rgba(220, 232, 250, .22);
  background: linear-gradient(108deg, rgba(202,220,248,.17), rgba(155,177,213,.075) 38%, rgba(186,177,255,.095) 72%, rgba(255,255,255,.035));
  box-shadow: inset 0 1px rgba(255,255,255,.22), inset 0 -1px rgba(255,255,255,.035);
}
.chat-glass-prototype .window-titlebar::before {
  position: absolute; inset: 0; content: ""; pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,.12), transparent 34% 72%, rgba(194,205,255,.07));
}
.chat-glass-prototype .window-titlebar > * { z-index: 1; }
.chat-glass-prototype .window-titlebar > .window-controls {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
.chat-glass-prototype .window-titlebar > .window-identity,
.chat-glass-prototype .window-titlebar > .window-state,
.chat-glass-prototype .window-titlebar > .connection-control,
.chat-glass-prototype .window-titlebar > .reconnect-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.chat-glass-prototype .window-titlebar > .window-identity {
  transform: translate(-50%, -50%);
}
.chat-glass-prototype .window-controls { gap: 0; }
.chat-glass-prototype .window-controls .traffic-control {
  width: 24px; height: 28px; min-width: 24px; min-height: 28px; flex-basis: 24px;
}
.chat-glass-prototype .window-controls .traffic-control:hover::after,
.chat-glass-prototype .window-controls .traffic-control:focus-visible::after { opacity: 1; }
.chat-glass-prototype .window-state.connection-control {
  display: inline-flex;
  width: auto;
  max-width: 86px;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: #c0cce0;
  font: inherit;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.chat-glass-prototype .connection-control:disabled { cursor: default; opacity: .75; }
.chat-glass-prototype .connection-dot { color: #28c840; font-size: 10px; line-height: 1; }
.chat-glass-prototype .window-titlebar > .window-state,
.chat-glass-prototype .window-titlebar > .connection-control { right: 12px; }
.chat-glass-prototype .window-identity { right: 106px; }
@media (max-width: 680px) {
  .chat-glass-prototype .window-state.connection-control { display: inline-flex; max-width: 82px; }
  .chat-glass-prototype .window-identity { left: 145px; right: 92px; width: auto; }
}
.chat-glass-prototype .window-identity { left: 50%; right: auto; width: min(58%, calc(100% - 220px)); transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: #c6d2e3; font-size: 12px; text-align: center; text-shadow: 0 1px 8px rgba(224,235,255,.22); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-glass-prototype .window-identity .window-project-prefix { display: inline-flex; align-items: center; gap: 4px; color: rgba(186, 204, 230, 0.72); font-size: 11.5px; font-weight: 500; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; }
.chat-glass-prototype .window-identity .window-project-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-glass-prototype .window-identity .window-identity-sep { opacity: .45; font-size: 11px; margin-left: 1px; flex-shrink: 0; }
.chat-glass-prototype .window-identity strong, .chat-glass-prototype .window-identity .window-session-title { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; color: #f0f4fb; }
.chat-glass-prototype .window-state { right: 58px; max-width: 86px; }
.chat-glass-prototype .window-state { color: #c0cce0; }
.chat-glass-prototype .window-model {
  min-height: 38px; gap: 9px; padding: 3px 12px;
  border-bottom-color: rgba(212,226,244,.09); background: rgba(20,27,37,.36);
  color: #bac6d5;
}
.chat-glass-prototype .window-model button {
  min-height: 27px; padding: 3px 7px; border-color: transparent; border-radius: 5px;
  background: rgba(255,255,255,.045); color: #dce5f0;
}
.chat-glass-prototype .window-model button:hover { background: rgba(255,255,255,.09); }
.chat-glass-prototype .window-model select { min-height: 27px; background-color: rgba(20,27,37,.85); }
.chat-glass-prototype .subagent-strip {
  gap: 4px; padding: 4px 11px; border-bottom-color: rgba(212,226,244,.09); background: rgba(255,255,255,.018);
}
.chat-glass-prototype .subagent-chip {
  min-height: 25px; gap: 6px; padding: 3px 6px; border-color: transparent; border-radius: 5px;
  background: rgba(255,255,255,.045); color: #d6e0ec;
}
.chat-glass-prototype .subagent-chip.active { background: rgba(160,192,230,.12); }
.chat-glass-prototype .subagent-chip small { color: #aebbd0; }
.chat-glass-prototype .transcript {
  background:
    radial-gradient(ellipse 75% 34% at 4% 0%, rgba(116,153,213,.13), transparent 76%),
    radial-gradient(ellipse 58% 42% at 100% 100%, rgba(115,101,186,.10), transparent 78%),
    linear-gradient(145deg, rgba(31,40,57,.78), rgba(27,34,49,.76) 62%, rgba(27,29,49,.80));
  color: var(--glass-ink);


}
.chat-glass-prototype .message { color: #e4ebf4; line-height: 1.68; }
.chat-glass-prototype .message.user {
  border-color: rgba(203,220,240,.11); background: rgba(133,159,193,.12);
}
.chat-glass-prototype .message-body code { border-color: rgba(205,220,239,.12); background: rgba(10,15,22,.38); }
.chat-glass-prototype .tool-card {
  border-color: rgba(205,220,239,.12); background: rgba(13,19,28,.34);
}
.chat-glass-prototype .agent-activity {
  min-height: 28px; gap: 7px; margin: 0 13px 3px; padding: 3px 4px;
  border: 0; border-radius: 0; background: transparent; color: #adbbce;
}
.chat-glass-prototype .agent-activity-mark { width: 18px; height: 18px; flex-basis: 18px; }
.chat-glass-prototype .agent-activity-mark svg { width: 15px; height: 15px; }
.chat-glass-prototype .agent-activity-name { color: #d6e0ed; }
.chat-glass-prototype .agent-activity-text { color: #aebbd0; }
.chat-glass-prototype .prompt-form {
  padding: 7px 11px 10px; border-top-color: rgba(212,226,244,.1);
  background: rgba(15,21,30,.44);
}
.chat-glass-prototype .composer {
  position: relative; overflow: hidden;
  border-color: rgba(207,224,247,.30); background: linear-gradient(145deg, rgba(54,68,90,.72), rgba(25,33,47,.76));
  box-shadow: inset 0 1px rgba(255,255,255,.14), 0 8px 26px rgba(0,0,0,.16);
  transition: border-color .15s ease, background-color .15s ease;
}
.chat-glass-prototype .composer::before {
  position: absolute; inset: 0; content: ""; pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,.085), transparent 30% 70%, rgba(163,176,255,.055));
}
.chat-glass-prototype .composer > * { position: relative; z-index: 1; }
.chat-glass-prototype .composer:focus-within {
  border-color: rgba(196,216,245,.52); background: linear-gradient(145deg, rgba(58,73,96,.78), rgba(28,37,52,.80)); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 8px 26px rgba(0,0,0,.18);
}
.chat-glass-prototype .composer textarea { color: #e6edf6; }
.chat-glass-prototype .composer textarea::placeholder { color: #9eacbf; }
.chat-glass-prototype .send-button {
  border-color: rgba(224,237,255,.42); background: linear-gradient(145deg, #7598c6, #456b9b 72%);
  box-shadow: inset 0 1px rgba(255,255,255,.30), 0 3px 10px rgba(11,20,39,.22);
}
.chat-glass-prototype .stop-button {
  box-sizing: border-box; width: 88px; min-height: 34px; padding: 6px 10px;
  border: 1px solid rgba(244, 170, 161, .40); border-radius: 7px;
  background: linear-gradient(145deg, rgba(139, 69, 67, .48), rgba(91, 43, 46, .58) 74%);
  color: #ffe1dd;
  box-shadow: inset 0 1px rgba(255, 239, 235, .22), 0 2px 8px rgba(12, 13, 22, .16);
  white-space: nowrap; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.chat-glass-prototype .stop-button:hover:not(:disabled) {
  border-color: rgba(255, 190, 181, .58);
  background: linear-gradient(145deg, rgba(158, 79, 75, .58), rgba(105, 48, 51, .66) 74%);
}
.chat-glass-prototype .stop-button:focus-visible { outline: 2px solid rgba(255, 190, 181, .9); outline-offset: 2px; }
.chat-glass-prototype .stop-button:disabled { opacity: .72; cursor: wait; }
.chat-glass-prototype .stop-button:disabled[aria-busy="true"] { border-color: rgba(244, 170, 161, .30); }
.chat-glass-prototype .resize-handle { opacity: .55; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chat-glass-prototype .transcript { background: #202838; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-glass-prototype *, .chat-glass-prototype *::before, .chat-glass-prototype *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media (max-width: 680px) {
  .chat-glass-prototype .window-controls { gap: 0; }
  .chat-glass-prototype .window-controls .traffic-control {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex-basis: 44px;
  }
  .chat-glass-prototype .window-titlebar { min-height: 44px; height: 44px; flex-basis: 44px; }
  .chat-glass-prototype .window-identity { left: 150px; right: 56px; }
  .chat-glass-prototype .window-model { flex-wrap: wrap; }
  .chat-glass-prototype .composer:focus-within { box-shadow: 0 0 0 1px rgba(168,194,225,.08); }
}

/* Shared inner rhythm and resilient controls. */
.chat-glass-prototype { --chat-gutter: 12px; }
.chat-glass-prototype .window-model { min-width: 0; gap: 8px; padding-inline: var(--chat-gutter); }
.chat-glass-prototype .engine-badge { flex: 0 0 auto; max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-glass-prototype .window-model > button { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.chat-glass-prototype .thinking-level { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; white-space: nowrap; }
.chat-glass-prototype .transcript { min-width: 0; padding-inline: var(--chat-gutter); }
.chat-glass-prototype .message { max-width: min(100%, 680px); overflow-wrap: anywhere; }
.chat-glass-prototype .message.user { margin-left: auto; }
.chat-glass-prototype .agent-activity { margin-inline: var(--chat-gutter); }
.chat-glass-prototype .prompt-form { padding-inline: var(--chat-gutter); }
.chat-glass-prototype .composer-foot { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 5px; }
.chat-glass-prototype .composer-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-glass-prototype .composer-buttons { min-width: 0; }
.chat-glass-prototype .send-button { white-space: nowrap; }
/* The model editor is an in-window sheet: translucent, but dense enough to read. */
.chat-glass-prototype .window-model-picker {
  position: relative;
  z-index: 2;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 8px 10px;
  max-height: min(60%, 360px);
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(224, 236, 255, .19);
  border-top-color: rgba(241, 247, 255, .28);
  border-radius: 0 0 10px 10px;
  background:
    radial-gradient(ellipse 75% 30% at 8% 0%, rgba(180, 207, 245, .12), transparent 75%),
    linear-gradient(132deg, rgba(54, 68, 89, .88), rgba(31, 40, 56, .91) 52%, rgba(32, 34, 55, .90));
  color: #e6edf6;
  box-shadow: inset 0 1px rgba(255,255,255,.19), inset 1px 0 rgba(255,255,255,.06), 0 10px 28px rgba(0,0,0,.22);


  font-size: 12px;
}
.chat-glass-prototype .window-model-picker > label { align-self: center; color: #c4d1e2; font-size: 12px; }
.chat-glass-prototype .window-model-picker > select {
  width: 100%; min-width: 0; min-height: 32px; padding: 5px 8px;
  border: 1px solid rgba(218,232,252,.27); border-radius: 6px;
  background: linear-gradient(145deg, rgba(82,99,124,.56), rgba(36,47,64,.82));
  color: #eff4fb;
  box-shadow: inset 0 1px rgba(255,255,255,.17), 0 2px 6px rgba(0,0,0,.12);
  font-size: 12px;
}
.chat-glass-prototype .window-model-picker > select option { background: #283447; color: #eff4fb; }
.chat-glass-prototype .window-model-picker > p { grid-column: 1 / -1; margin: 0; color: #c4d1e2; }
.chat-glass-prototype .window-model-picker > div { grid-column: 1 / -1; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.chat-glass-prototype .window-model-picker .button { min-height: 32px; padding: 6px 11px; border-radius: 7px; font-size: 12px; }
.chat-glass-prototype .window-model-picker .button.secondary {
  border-color: rgba(220,234,252,.24); background: linear-gradient(145deg, rgba(104,120,143,.30), rgba(52,63,81,.54));
  color: #e5edf7; box-shadow: inset 0 1px rgba(255,255,255,.14);
}
.chat-glass-prototype .window-model-picker .button.secondary:hover:not(:disabled) { background: linear-gradient(145deg, rgba(133,151,178,.38), rgba(62,76,98,.64)); }
.chat-glass-prototype .window-model-picker .button.primary {
  border: 1px solid rgba(216,233,255,.4); background: linear-gradient(145deg, #7398c6, #456b9b 76%);
  color: #fff; box-shadow: inset 0 1px rgba(255,255,255,.28), 0 3px 9px rgba(8,18,34,.22);
}
.chat-glass-prototype .window-model-picker .button.primary:hover:not(:disabled) { background: linear-gradient(145deg, #83a8d8, #527daf 76%); }
.chat-glass-prototype .window-model-picker button:disabled,
.chat-glass-prototype .window-model-picker select:disabled { opacity: .55; cursor: not-allowed; }
.chat-glass-prototype .window-model-picker select:focus-visible,
.chat-glass-prototype .window-model-picker button:focus-visible { outline: 2px solid rgba(190,216,250,.88) !important; outline-offset: 1px; box-shadow: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chat-glass-prototype .window-model-picker { background: linear-gradient(132deg, #293649, #202a3a 52%, #22243a); }
  .chat-glass-prototype .window-model-picker > select { background: #35445a; }
}

@media (max-width: 680px) {
  .chat-glass-prototype .window-model-picker { grid-template-columns: 80px minmax(0,1fr); gap: 8px; padding: 10px; font-size: 12px; }
  .chat-glass-prototype .window-model-picker > label { font-size: 12px; }
  .chat-glass-prototype .window-model-picker > select { min-height: 32px; font-size: 16px; }
  .chat-glass-prototype .window-model-picker .button { font-size: 12px; }
}

@media (max-width: 680px) {
  .chat-glass-prototype { --chat-gutter: 12px; }
  .chat-glass-prototype .window-identity { left: 145px; right: 64px; }
  .chat-glass-prototype .window-state:not(.connection-control) { display: none; }
  .chat-glass-prototype .window-state.connection-control {
    display: inline-flex;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
  }
  .chat-glass-prototype .window-titlebar:has(.connection-control) > .window-identity {
    right: 96px;
  }
  .chat-glass-prototype .window-model { flex-wrap: nowrap; gap: 5px; padding-inline: var(--chat-gutter); }
  .chat-glass-prototype .window-model .engine-badge { max-width: 60px; font-size: 10px; }
  .chat-glass-prototype .window-model > button { padding-inline: 5px; font-size: 10px; }
  .chat-glass-prototype .thinking-level { gap: 3px; font-size: 10px; }
  .chat-glass-prototype .thinking-level select { max-width: 62px; padding-inline: 3px; }
  .chat-glass-prototype .composer-foot { grid-template-columns: minmax(0,1fr) auto auto; gap: 3px; }
  .chat-glass-prototype .attach-button { width: 28px; }
  .chat-glass-prototype .send-button { min-height: 32px; padding-inline: 7px; font-size: 11px; }
  .chat-glass-prototype .stop-button { min-height: 32px; padding: 5px 7px; font-size: 11px; width: 82px; }
}
.chat-glass-prototype .window-state { right: 12px; max-width: 62px; color: #aebbd0; font-size: 10px; }
.chat-glass-prototype .agent-activity { position: relative; box-sizing: border-box; height: 30px; min-height: 30px; max-height: 30px; margin: 0 12px 3px; padding: 0 5px; }
.chat-glass-prototype .window-extension-host { display: inline-flex; flex: 0 0 auto; align-items: center; margin-left: auto; }
.chat-glass-prototype .window-extension-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; margin-left: auto; }
.chat-glass-prototype .window-extension-action { display: inline-flex; height: 28px; min-height: 28px; align-items: center; justify-content: center; gap: 5px; padding: 0 7px; border: 1px solid rgba(207,224,247,.2); border-radius: 6px; background: rgba(255,255,255,.045); color: #cbd8e9; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.chat-glass-prototype .window-extension-action:hover { border-color: rgba(207,224,247,.38); background: rgba(255,255,255,.09); color: #f0f5fc; }
.chat-glass-prototype .window-extension-action.urgent { border-color: rgba(233,189,117,.65); background: linear-gradient(135deg, rgba(233,189,117,.22), rgba(116,153,213,.24)); color: #ffe7b8; box-shadow: 0 0 12px rgba(233,189,117,.18); }
.chat-glass-prototype .window-extension-action svg { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
.chat-glass-prototype .window-extension-action-label { font-size: 10px; font-weight: 600; line-height: 1; white-space: nowrap; }
.chat-glass-prototype .window-extension-action b { font-size: 10px; line-height: 1; }
.chat-glass-prototype .window-extension-inline-stack { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 30; display: grid; gap: 8px; max-height: min(62vh, 420px); overflow: auto; pointer-events: auto; }
.chat-glass-prototype .window-extension-inline-card { border: 1px solid rgba(190, 213, 241, .34); border-radius: 11px; background: linear-gradient(135deg, rgba(22, 31, 46, .95), rgba(17, 23, 36, .96)); color: #e6edf6; box-shadow: 0 16px 42px rgba(0, 0, 0, .52), inset 0 1px rgba(255, 255, 255, .14); backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%); overflow: hidden; }
.chat-glass-prototype .message.agent { margin-bottom: 8px; }
.chat-glass-prototype .message.agent + .message.agent { margin-top: -4px; }
.chat-glass-prototype .message.event { margin: 8px 0; padding: 7px 10px; border: 1px solid rgba(235,153,139,.22); border-left: 2px solid #d88779; border-radius: 7px; background: rgba(103,49,48,.2); color: #f0c8c3; font: 12px/1.5 inherit; }
.chat-glass-prototype .event-details { margin-top: 5px; color: #c4a9a6; font-size: 10px; }
.chat-glass-prototype .event-details pre { max-height: 110px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 680px) {
  .chat-glass-prototype .window-identity { width: calc(100% - 210px); }
  .chat-glass-prototype .window-state:not(.connection-control) { display: none; }
}

/* Keep the wallpaper and windows legible through the entire chat surface. */
.chat-glass-prototype {
  background: linear-gradient(132deg, rgba(46, 58, 77, .18), rgba(29, 37, 52, .14) 48%, rgba(27, 29, 49, .17));
  backdrop-filter: blur(2.5px) saturate(128%);
  -webkit-backdrop-filter: blur(2.5px) saturate(128%);
}
.chat-glass-prototype .window-model { background: rgba(20, 27, 37, .22); }
.chat-glass-prototype .subagent-strip { background: rgba(255, 255, 255, .025); }
.chat-glass-prototype .transcript {
  background:
    radial-gradient(ellipse 75% 34% at 4% 0%, rgba(116,153,213,.08), transparent 76%),
    radial-gradient(ellipse 58% 42% at 100% 100%, rgba(115,101,186,.06), transparent 78%),
    linear-gradient(145deg, rgba(31,40,57,.08), rgba(27,34,49,.06) 62%, rgba(27,29,49,.08));


}
.chat-glass-prototype .window-model-picker {
  background:
    radial-gradient(ellipse 75% 30% at 8% 0%, rgba(180, 207, 245, .08), transparent 75%),
    linear-gradient(132deg, rgba(54, 68, 89, .58), rgba(31, 40, 56, .62) 52%, rgba(32, 34, 55, .60));


}
.chat-glass-prototype .window-model-picker > select { background: linear-gradient(145deg, rgba(82,99,124,.42), rgba(36,47,64,.60)); }
.chat-glass-prototype .prompt-form { background: rgba(15, 21, 30, .24); }
.chat-glass-prototype .composer { background: linear-gradient(145deg, rgba(54,68,90,.48), rgba(25,33,47,.52)); }
.chat-glass-prototype .composer:focus-within { background: linear-gradient(145deg, rgba(58,73,96,.54), rgba(28,37,52,.58)); }
.chat-glass-prototype .tool-card { background: linear-gradient(132deg, rgba(73, 88, 112, .34), rgba(54, 65, 88, .30) 55%, rgba(68, 59, 102, .32)); }
.chat-glass-prototype .tool-content pre { background: linear-gradient(145deg, rgba(20, 28, 41, .46), rgba(24, 29, 46, .42)); }
.chat-glass-prototype .tool-content .tool-output { background: rgba(16, 25, 38, .46); }
.chat-glass-prototype .completed-tools { background: linear-gradient(132deg, rgba(76, 91, 119, .24), rgba(58, 67, 91, .20) 58%, rgba(72, 63, 104, .20)); }
.chat-glass-prototype .subagent-view {
  background: linear-gradient(115deg, rgba(194,216,244,.045), rgba(132,153,188,.025) 55%, rgba(159,147,226,.03));


}

/* Compact, calm steering action: blue-violet glass rather than a generic block. */
.chat-glass-prototype .queued-message-actions { min-width: 0; flex-wrap: wrap; gap: 7px; }
.chat-glass-prototype .queued-label { color: #b8c6db; }
.chat-glass-prototype .steer-message {
  position: relative; min-height: 28px; padding: 4px 9px; border: 1px solid rgba(158, 178, 244, .34);
  border-radius: 7px; background: linear-gradient(135deg, rgba(108, 139, 202, .26), rgba(121, 103, 190, .24));
  color: #e4e9ff; font-size: 10px; font-weight: 650; line-height: 1.2; box-shadow: inset 0 1px rgba(255,255,255,.13);
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.chat-glass-prototype .steer-message:hover:not(:disabled) {
  border-color: rgba(179, 194, 255, .58); background: linear-gradient(135deg, rgba(119, 153, 222, .36), rgba(143, 119, 215, .34));
}
.chat-glass-prototype .steer-message:focus-visible { outline: 2px solid #b7c8ff; outline-offset: 2px; }
.chat-glass-prototype .steer-message:disabled { color: #c2c9dc; opacity: .78; cursor: wait; }
.chat-glass-prototype .steer-message[aria-busy="true"] { border-color: rgba(180, 194, 255, .48); }

/* Tool cards use one layered glass material, with a stable readable output inset. */
.chat-glass-prototype .tool-card {
  box-sizing: border-box; width: min(100%, 720px); max-width: 100%; min-width: 0; margin: 5px 0 7px;
  overflow: hidden; border: 1px solid rgba(194, 211, 238, .20); border-top-color: rgba(232, 240, 255, .30);
  border-radius: 9px; background: linear-gradient(132deg, rgba(112, 132, 165, .20), rgba(74, 88, 119, .17) 55%, rgba(94, 83, 139, .16));
  color: #e1e9f5; box-shadow: inset 0 1px rgba(255,255,255,.09), 0 4px 14px rgba(4, 9, 18, .12);
}
.chat-glass-prototype .tool-summary { min-width: 0; min-height: 30px; gap: 7px; padding: 5px 8px; }
.chat-glass-prototype .tool-summary::before { flex: 0 0 auto; color: #bdc9e4; font-size: 15px; }
.chat-glass-prototype .tool-name { min-width: 0; overflow: hidden; color: #e3ebf8; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.chat-glass-prototype .tool-state { flex: 0 0 auto; margin-left: auto; padding-left: 4px; font-size: 10px; }
.chat-glass-prototype .tool-state.running { color: #9dc5ff; }
.chat-glass-prototype .tool-state.completed { color: #93ddb7; }
.chat-glass-prototype .tool-state.failed { color: #ffaaa6; }
.chat-glass-prototype .tool-state.pending { color: #f0cb83; }
.chat-glass-prototype .tool-content { min-width: 0; padding: 0 8px 8px; }
.chat-glass-prototype .tool-content pre {
  box-sizing: border-box; max-width: 100%; min-width: 0; max-height: 190px; margin: 5px 0 0; padding: 7px 8px;
  overflow: auto; border: 1px solid rgba(207, 220, 241, .11); border-radius: 6px;
  background: linear-gradient(145deg, rgba(20, 28, 41, .72), rgba(24, 29, 46, .68)); color: #d7e1f0;
  font: 10px/1.5 ui-monospace, SFMono-Regular, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat-glass-prototype .tool-content .tool-args { color: #bdc9dc; }
.chat-glass-prototype .tool-content .tool-output { border-color: rgba(171, 194, 228, .16); background: rgba(16, 25, 38, .72); color: #e1e9f5; }
.chat-glass-prototype .tool-content .tool-details { color: #bdc9dc; }
.chat-glass-prototype .tool-content .tool-attachments { max-width: 100%; margin-top: 6px; }
.chat-glass-prototype .tool-content .tool-attachments img { max-width: min(100%, 280px); max-height: 190px; }
.chat-glass-prototype .completed-tools {
  width: min(100%, 720px); max-width: 100%; min-width: 0; margin: 5px 0 7px; padding: 5px;
  border: 1px solid rgba(197, 214, 240, .18); border-radius: 9px;
  background: linear-gradient(132deg, rgba(119, 139, 170, .13), rgba(83, 94, 125, .11) 58%, rgba(103, 91, 144, .10));
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.chat-glass-prototype .completed-tools > summary {
  display: flex; min-height: 26px; align-items: center; gap: 6px; padding: 3px 5px;
  color: #cbd6e8; font-size: 10px; cursor: pointer; list-style: none;
}
.chat-glass-prototype .completed-tools > summary::-webkit-details-marker { display: none; }
.chat-glass-prototype .completed-tools > summary::before { content: "›"; color: #b8c8e8; font-size: 15px; }
.chat-glass-prototype .completed-tools[open] > summary::before { transform: rotate(90deg); }
.chat-glass-prototype .completed-tools-list { display: grid; gap: 4px; min-width: 0; }
.chat-glass-prototype .completed-tools .tool-card { width: 100%; margin: 0; border-color: rgba(194, 211, 238, .14); background: linear-gradient(132deg, rgba(122, 143, 177, .16), rgba(82, 95, 126, .14)); box-shadow: none; }
.chat-glass-prototype .completed-tools .tool-summary { min-height: 27px; }
.chat-glass-prototype .running-tool { border-color: rgba(151, 187, 237, .25); }

/* Chat messages share a bubble rhythm; agent and user remain visually distinct. */
.chat-glass-prototype .message {
  box-sizing: border-box; width: fit-content; max-width: min(92%, 720px);
  margin: 7px 0; padding: 9px 12px; border: 1px solid rgba(206,222,243,.14);
  border-radius: 12px; background: rgba(119,137,164,.13);
}
.chat-glass-prototype .message.agent { margin: 7px 0; border-color: rgba(190,208,233,.24); background: linear-gradient(135deg, rgba(24,34,50,.56), rgba(30,43,62,.50)); box-shadow: inset 0 1px rgba(255,255,255,.10), inset 0 0 0 1px rgba(220,235,255,.025); backdrop-filter: blur(6px) saturate(115%); -webkit-backdrop-filter: blur(6px) saturate(115%); }
.chat-glass-prototype .message.user { margin: 7px 0 7px auto; border-color: rgba(117,166,225,.34); background: linear-gradient(135deg, rgba(35,67,105,.60), rgba(42,78,120,.53)); box-shadow: inset 0 1px rgba(255,255,255,.12), inset 0 0 0 1px rgba(220,235,255,.035); backdrop-filter: blur(6px) saturate(115%); -webkit-backdrop-filter: blur(6px) saturate(115%); }
.chat-glass-prototype .message.event { width: auto; max-width: 100%; }
.chat-glass-prototype .message-body { min-width: 0; overflow-wrap: anywhere; }
.chat-glass-prototype .message-body pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-glass-prototype .message-body .table-wrapper { max-width: 100%; overflow-x: auto; margin: 12px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(10,15,22,.45); scrollbar-width: thin; }
.chat-glass-prototype .message-body table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.5; text-align: left; }
.chat-glass-prototype .message-body thead { background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.1); }
.chat-glass-prototype .message-body th { padding: 9px 13px; font-weight: 600; color: #a5d6a7; white-space: nowrap; }
.chat-glass-prototype .message-body td { padding: 8px 13px; border-bottom: 1px solid rgba(255,255,255,.06); color: #eff4ef; vertical-align: top; }
.chat-glass-prototype .message-body tbody tr:last-child td { border-bottom: 0; }
.chat-glass-prototype .message-body tbody tr:hover { background: rgba(255,255,255,.03); }
.chat-glass-prototype .message-body .markdown-inline-image-link { display: inline-block; margin: 6px 0; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); }
.chat-glass-prototype .message-body .markdown-inline-image { display: block; max-width: 100%; max-height: 420px; border-radius: 8px; object-fit: contain; }
.chat-glass-prototype .subagent-chip i.running { background: #8abaff; }
.chat-glass-prototype .subagent-chip i.completed { background: #86d8ac; }
.chat-glass-prototype .subagent-chip i.failed { background: #f29b9b; }
.chat-glass-prototype .subagent-chip i.pending { background: #e9bd75; }
.chat-glass-prototype .subagent-chip i.muted { background: #8b96a8; }
.chat-glass-prototype .subagent-chip.state-running small, .chat-glass-prototype .subagent-status.running, .chat-glass-prototype .tool-state.running { color: #8abaff; }
.chat-glass-prototype .subagent-chip.state-completed small, .chat-glass-prototype .subagent-status.completed, .chat-glass-prototype .tool-state.completed { color: #86d8ac; }
.chat-glass-prototype .subagent-chip.state-failed small, .chat-glass-prototype .subagent-status.failed, .chat-glass-prototype .tool-state.failed { color: #f29b9b; }
.chat-glass-prototype .subagent-chip.state-pending small, .chat-glass-prototype .subagent-status.pending, .chat-glass-prototype .tool-state.pending { color: #e9bd75; }
.chat-glass-prototype .subagent-status.muted, .chat-glass-prototype .tool-state.muted { color: #aebbd0; }

/* Compact child activity: keep the main composer and transcript in view. */
.chat-glass-prototype .subagent-view {
  flex: 0 1 auto; min-height: 112px; max-height: 40%; border-bottom-color: var(--glass-edge);
  background: linear-gradient(115deg, rgba(194,216,244,.075), rgba(132,153,188,.035) 55%, rgba(159,147,226,.045));
  color: var(--glass-ink);
}
.chat-glass-prototype .subagent-header { min-width: 0; min-height: 38px; gap: 8px; padding: 4px var(--chat-gutter); border-bottom: 1px solid rgba(220,232,250,.10); }
.chat-glass-prototype .subagent-mark { color: #a9c4e7; font-size: 13px; }
.chat-glass-prototype .subagent-heading { display: flex; min-width: 0; flex: 1 1 auto; align-items: baseline; gap: 8px; }
.chat-glass-prototype .subagent-heading strong { flex: 0 0 auto; color: #dce6f3; font-size: 11px; font-weight: 650; }
.chat-glass-prototype .subagent-task { min-width: 0; overflow: hidden; color: #aebbd0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.chat-glass-prototype .subagent-status { flex: 0 0 auto; color: #b6c4d7; font-size: 10px; }
.chat-glass-prototype .subagent-status.running { color: #b9d2f3; }
.chat-glass-prototype .subagent-status.failed { color: #efb4a8; }
.chat-glass-prototype .subagent-status.running { color: #8abaff; }
.chat-glass-prototype .subagent-status.completed { color: #86d8ac; }
.chat-glass-prototype .subagent-status.failed { color: #f29b9b; }
.chat-glass-prototype .subagent-status.pending { color: #e9bd75; }
.chat-glass-prototype .subagent-close { flex: 0 0 auto; padding: 3px 8px; border-color: rgba(211,225,245,.16); border-radius: 5px; background: rgba(255,255,255,.045); color: #d3deec; font-size: 10px; }
.chat-glass-prototype .subagent-messages { min-height: 0; padding: 4px var(--chat-gutter) 8px; overscroll-behavior: contain; }
.chat-glass-prototype .subagent-messages article { box-sizing: border-box; width: fit-content; max-width: 92%; margin: 5px 0; padding: 7px 9px; border: 1px solid rgba(190,208,233,.14); border-radius: 10px; background: rgba(123,145,178,.14); color: #dce5f1; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.chat-glass-prototype .subagent-messages article.user { margin: 5px 0 5px auto; padding: 7px 9px; border-color: rgba(117,166,225,.34); border-radius: 10px; background: linear-gradient(135deg, rgba(35,67,105,.60), rgba(42,78,120,.53)); box-shadow: inset 0 1px rgba(255,255,255,.12), inset 0 0 0 1px rgba(220,235,255,.035); backdrop-filter: blur(6px) saturate(115%); -webkit-backdrop-filter: blur(6px) saturate(115%); }
.chat-glass-prototype .subagent-messages article.agent { margin-left: 0; border-color: rgba(190,208,233,.24); background: linear-gradient(135deg, rgba(24,34,50,.56), rgba(30,43,62,.50)); box-shadow: inset 0 1px rgba(255,255,255,.10), inset 0 0 0 1px rgba(220,235,255,.025); backdrop-filter: blur(6px) saturate(115%); -webkit-backdrop-filter: blur(6px) saturate(115%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chat-glass-prototype .message.agent, .chat-glass-prototype .subagent-messages article.agent { background: linear-gradient(135deg, rgba(24,34,50,.94), rgba(30,43,62,.92)); }
  .chat-glass-prototype .message.user, .chat-glass-prototype .subagent-messages article.user { background: linear-gradient(135deg, rgba(35,67,105,.94), rgba(42,78,120,.92)); }
}
.chat-glass-prototype .subagent-messages article small { display: block; margin-bottom: 2px; color: #929fb3; font-size: 9px; }
.chat-glass-prototype .subagent-messages .subagent-tool { max-width: 100%; margin: 4px 0 6px; overflow: visible; border: 0; border-top: 1px solid rgba(205,220,239,.12); border-bottom: 1px solid rgba(205,220,239,.08); border-radius: 0; background: transparent; font-size: 11px; }
.chat-glass-prototype .subagent-tool .tool-summary { min-height: 27px; gap: 7px; padding: 4px 2px; }
.chat-glass-prototype .subagent-tool .tool-name { color: #dce6f3; font-weight: 600; }
.chat-glass-prototype .subagent-tool .tool-content { padding: 0 2px 6px; }
.chat-glass-prototype .subagent-arguments { color: #aebbd0; font-size: 10px; }
.chat-glass-prototype .subagent-arguments summary, .chat-glass-prototype .subagent-tool .tool-content > details > summary { width: fit-content; cursor: pointer; }
.chat-glass-prototype .subagent-tool .tool-content pre { max-height: 105px; margin: 4px 0 0; padding: 6px 8px; border: 0; border-radius: 5px; background: rgba(9,14,21,.43); color: #cbd7e7; font-size: 10px; line-height: 1.45; }
.chat-glass-prototype .subagent-tool .tool-output { max-height: 128px; overflow: auto; }
.chat-glass-prototype .subagent-output-label { margin-top: 5px; color: #8f9db2; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.chat-glass-prototype .subagent-tool img { max-width: 100%; max-height: 180px; object-fit: contain; }
@media (max-width: 680px) {
  .chat-glass-prototype .subagent-view { min-height: 98px; max-height: 38%; }
  .chat-glass-prototype .subagent-header { gap: 5px; padding-inline: 9px; }
  .chat-glass-prototype .subagent-heading { display: block; }
  .chat-glass-prototype .subagent-heading strong { display: block; font-size: 10px; }
  .chat-glass-prototype .subagent-task { display: block; font-size: 9px; }
}

/* Child invocation telemetry: wrap instead of widening mobile viewers. */
.chat-glass-prototype .subagent-metrics { margin: 0; padding: 5px var(--chat-gutter); color: #aebdd3; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; flex-shrink: 0; }