.chats-stage {
 display: flex;
 flex: 1;
 min-width: 0;
 min-height: 0;
}

.chats-computer[hidden] {
 display: none;
}

.chats-computer {
 display: flex;
 flex-direction: column;
 flex: 1;
 min-width: 0;
 min-height: 0;
 background: var(--shell-surface);
}

.chats-thread.is-computer-open
 > :not(.chats-thread-header):not(
  .chats-computer
 ) {
 display: none;
}

.chats-computer-body {
 display: flex;
 flex-direction: column;
 flex: 1;
 min-width: 0;
 min-height: 0;
}

.chats-computer-header {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 10px 16px;
 border-bottom: 1px solid var(--border);
 flex-shrink: 0;
}

.chats-computer-title {
 font-weight: 600;
 font-size: var(--text-sm);
}

.chats-computer-status {
 margin-left: auto;
 font-size: 11px;
 padding: 2px 8px;
 border-radius: 999px;
 background: var(--muted);
}

.chats-computer-status.is-waiting {
 background: color-mix(
  in srgb,
  var(--primary) 18%,
  transparent
 );
}

.chats-computer-status.is-you {
 background: color-mix(
  in srgb,
  var(--primary) 12%,
  transparent
 );
}

.chats-computer-actions {
 display: flex;
 align-items: center;
 gap: 4px;
 margin-left: auto;
}

.chats-computer-status
 + .chats-computer-actions {
 margin-left: 0;
}

.chats-computer-wait,
.chats-computer-error,
.chats-computer-name,
.chats-computer-empty {
 margin: 0;
 padding: 8px 16px;
 font-size: var(--text-sm);
}

.chats-computer-empty {
 display: flex;
 flex: 1;
 align-items: center;
 justify-content: center;
 text-align: center;
}

.chats-computer-error {
 color: var(--destructive, #b91c1c);
}

.chats-computer-stage {
 position: relative;
 flex: 1;
 min-height: 240px;
 overflow: hidden;
 overflow-anchor: none;
 background: #111;
}

.chats-computer-frame {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 border: 0;
 background: #000;
}

.chats-computer.is-fullscreen {
 position: fixed;
 inset: 0;
 z-index: 80;
 width: 100%;
 height: 100%;
 border: 0;
}

.chats-computer.is-fullscreen
 .chats-computer-body {
 height: 100%;
}

.chats-computer.is-fullscreen
 .chats-computer-stage {
 min-height: 0;
}

.chats-computer-toggle {
 position: relative;
 width: 32px;
 height: 32px;
}

.chats-computer-toggle.is-open {
 background: var(--muted);
}

.chats-computer-toggle.is-live::after {
 content: '';
 position: absolute;
 top: 6px;
 right: 6px;
 width: 7px;
 height: 7px;
 border-radius: 999px;
 background: var(--primary);
 box-shadow: 0 0 0 2px
  var(--shell-surface);
}
