/* Settings, chat, info, shortcuts, members */

.settings-panel.card,
.prompt-engineer-panel.card,
.graphical-assistant-panel.card,
.info-panel.card,
.result-info-panel.card,
.export-panel.card,
.workspace-members-panel.card,
.history-panel.card,
.workspace-manager.card,
.node-sidebar.card,
.edit-dialog.card {
  border: 1px solid var(--dock-panel-border);
  border-radius: 16px;
  background: var(--dock-panel-bg);
}

.settings-panel,
.prompt-engineer-panel,
.graphical-assistant-panel,
.info-panel,
.history-panel,
.result-info-panel,
.export-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--dock-panel-z);
  width: min(500px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  overflow: auto;
  padding: 20px;
}

.workspace-members-panel.card,
.info-panel.card,
.history-panel.card,
.prompt-engineer-panel.card,
.graphical-assistant-panel.card {
  isolation: isolate;
  border: 1px solid var(--node-border);
  border-radius: var(--node-radius);
  background: var(--node-bg);
  box-shadow: var(--node-shadow);
}

.workspace-members-panel.card::before,
.info-panel.card::before,
.history-panel.card::before,
.prompt-engineer-panel.card::before,
.graphical-assistant-panel.card::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: calc(var(--node-radius) - 1px);
  pointer-events: none;
  box-shadow: var(--node-volume);
}

.settings-panel {
  width: min(400px, calc(100vw - 40px));
  color: var(--node-title);
}

.settings-panel.card {
  isolation: isolate;
  border: 1px solid var(--node-border);
  border-radius: var(--node-radius);
  background: var(--node-bg);
  box-shadow: var(--node-shadow);
}

.settings-panel.card::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: calc(var(--node-radius) - 1px);
  pointer-events: none;
  box-shadow: var(--node-volume);
}

.settings-panel-header,
.settings-panel-body {
  position: relative;
  z-index: 1;
}

.settings-panel-header {
  display: grid;
  gap: 16px;
  margin: -4px -4px 18px;
  padding: 0 4px 16px;
  box-shadow: var(--node-hr);
}

.settings-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-panel-header .panel-close-button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  border: 1px solid var(--node-action-border);
  border-radius: 11px;
  color: var(--node-action-icon);
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.settings-panel-header .panel-close-button:hover {
  color: var(--node-action-icon-hover);
  background: var(--node-action-hover);
}

.settings-panel-title {
  margin: 0;
  color: var(--node-title);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
}

.settings-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.settings-identity-avatar {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--node-action-border);
  border-radius: 12px;
  color: var(--node-title);
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.settings-identity-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.settings-account-name {
  margin: 0;
  overflow: hidden;
  color: var(--node-title);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-account-meta {
  margin: 0;
  overflow: hidden;
  color: var(--node-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-panel-body {
  display: grid;
  gap: 12px;
}

.settings-card {
  padding: 14px;
  border: 1px solid var(--node-border);
  border-radius: 12px;
  background: var(--node-input-bg);
  box-shadow: inset 0 1px 0 rgb(0 0 0 / 38%);
}

[data-theme="light"] .settings-card {
  box-shadow: inset 0 1px 0 rgb(20 20 22 / 6%);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.settings-row-label {
  color: var(--node-title);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

.settings-theme {
  padding: 12px 14px;
}

.settings-theme .settings-row {
  gap: 12px;
}

.settings-theme-select {
  width: auto;
  min-width: 176px;
  max-width: 64%;
  height: 36px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--node-border);
  border-radius: 12px;
  background-color: var(--node-bg);
  color: var(--node-title);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.settings-theme-select:focus {
  border-color: var(--node-input-focus);
  box-shadow: 0 0 0 1px var(--node-input-focus);
}

.settings-toggle-label {
  flex-shrink: 0;
  margin: 0;
}

.settings-panel .settings-toggle-label .generate-toggle-control {
  width: fit-content;
  gap: 10px;
  height: 32px;
  padding: 0 8px 0 10px;
  border-color: var(--node-border);
  background: var(--node-bg);
}

.settings-panel .generate-toggle-control:focus-within {
  border-color: var(--node-input-focus);
  box-shadow: 0 0 0 1px var(--node-input-focus);
}

.settings-panel .generate-toggle-state {
  color: var(--node-title);
}

.settings-panel .generate-toggle-track {
  background: var(--node-action-bg);
}

.settings-panel .generate-toggle-input:checked + .generate-toggle-track {
  background: var(--node-selected);
}

.settings-stat {
  display: grid;
  gap: 14px;
}

.settings-stat-block {
  display: grid;
  gap: 8px;
}

.settings-stat-divider {
  height: 1px;
  background: var(--node-border);
  box-shadow: var(--node-hr);
}

.settings-stat-label {
  margin: 0;
  color: var(--node-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.settings-stat-value {
  margin: 0;
  color: var(--node-title);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.settings-quota-meter {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: var(--node-action-bg);
}

.settings-quota-meter-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--node-selected);
  transition: width 0.25s ease;
}

.settings-quota-meter.is-exhausted .settings-quota-meter-fill {
  background: var(--danger, #e5484d);
}

.settings-quota-summary {
  margin: 0;
  color: var(--node-title);
  font-size: 0.9375rem;
  font-weight: 600;
}

.settings-panel .settings-help-copy {
  color: var(--node-muted);
}

.settings-logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 16px;
  border: 1px solid var(--node-cta-border);
  border-radius: 12px;
  color: var(--node-title);
  background: var(--node-cta-bg);
  box-shadow: var(--node-cta-shadow);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.settings-logout-button:hover {
  border-color: var(--node-selected-border);
  color: #fff;
  background: var(--node-selected);
}

.settings-logout-button .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

.settings-panel[hidden] {
  display: none;
}

.prompt-engineer-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 0;
  width: min(680px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  overflow: hidden;
  color: var(--node-title);
}

.prompt-engineer-header,
.prompt-engineer-body {
  position: relative;
  z-index: 1;
}

.prompt-engineer-header {
  display: grid;
  gap: 6px;
  margin: -4px -4px 18px;
  padding: 0 4px 16px;
  box-shadow: var(--node-hr);
}

.prompt-engineer-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.prompt-engineer-header .panel-close-button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  border: 1px solid var(--node-action-border);
  border-radius: 11px;
  color: var(--node-action-icon);
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.prompt-engineer-header .panel-close-button:hover {
  color: var(--node-action-icon-hover);
  background: var(--node-action-hover);
}

.prompt-engineer-title {
  margin: 0;
  color: var(--node-title);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
}

.graphical-assistant-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  gap: 0;
  width: min(560px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  overflow: hidden;
  color: var(--node-title);
}

.graphical-assistant-header,
.graphical-assistant-body {
  position: relative;
  z-index: 1;
}

.graphical-assistant-header {
  display: grid;
  gap: 6px;
  margin: -4px -4px 18px;
  padding: 0 4px 16px;
  box-shadow: var(--node-hr);
}

.graphical-assistant-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.graphical-assistant-header .panel-close-button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  border: 1px solid var(--node-action-border);
  border-radius: 11px;
  color: var(--node-action-icon);
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.graphical-assistant-header .panel-close-button:hover {
  color: var(--node-action-icon-hover);
  background: var(--node-action-hover);
}

.graphical-assistant-title {
  margin: 0;
  color: var(--node-title);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
}

.graphical-assistant-subtitle {
  margin: 0;
  overflow: hidden;
  color: var(--node-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graphical-assistant-body {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 0;
  overflow: auto;
}

.graphical-assistant-step {
  display: grid;
  gap: 14px;
}

.graphical-assistant-step h3 {
  margin: 0;
  color: var(--node-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
}

.graphical-assistant-copy {
  margin: 0;
  color: var(--node-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.graphical-assistant-panel label {
  color: var(--node-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.graphical-assistant-panel input,
.graphical-assistant-panel select,
.graphical-assistant-panel textarea {
  height: auto;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--node-border);
  border-radius: 12px;
  background: var(--node-bg);
  color: var(--node-title);
  font-size: 0.8125rem;
  box-shadow: none;
}

.graphical-assistant-panel input,
.graphical-assistant-panel select {
  height: 40px;
  padding: 0 12px;
}

.graphical-assistant-panel select {
  padding-right: 34px;
}

.graphical-assistant-panel input:focus,
.graphical-assistant-panel select:focus,
.graphical-assistant-panel textarea:focus {
  border-color: var(--node-input-focus);
  box-shadow: 0 0 0 1px var(--node-input-focus);
}

.graphical-assistant-options {
  display: grid;
  gap: 8px;
}

.graphical-assistant-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--node-border);
  border-radius: 12px;
  background: var(--node-input-bg);
  box-shadow: inset 0 1px 0 rgb(0 0 0 / 38%);
  color: var(--node-title);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

[data-theme="light"] .graphical-assistant-option,
[data-theme="light"] .graphical-assistant-asset-item {
  box-shadow: inset 0 1px 0 rgb(20 20 22 / 6%);
}

.graphical-assistant-option:hover,
.graphical-assistant-option.is-selected {
  border-color: var(--node-input-focus);
}

.graphical-assistant-option .material-symbols-outlined {
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--node-action-border);
  border-radius: 11px;
  color: var(--node-title);
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
  font-size: 18px;
}

.graphical-assistant-asset-list {
  display: grid;
  gap: 8px;
}

.graphical-assistant-asset-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--node-border);
  border-radius: 12px;
  background: var(--node-input-bg);
  box-shadow: inset 0 1px 0 rgb(0 0 0 / 38%);
}

.graphical-assistant-asset-item img,
.graphical-assistant-asset-placeholder {
  width: 56px;
  height: 56px;
  border: 1px solid var(--node-action-border);
  border-radius: 11px;
  object-fit: cover;
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
}

.graphical-assistant-asset-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--node-title);
}

.graphical-assistant-asset-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.graphical-assistant-asset-meta strong,
.graphical-assistant-asset-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.graphical-assistant-asset-meta strong {
  color: var(--node-title);
  font-size: 0.875rem;
  font-weight: 600;
}

.graphical-assistant-asset-meta span {
  color: var(--node-muted);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: capitalize;
}

.graphical-assistant-upload,
.graphical-assistant-reference-preview .ghost-button,
.graphical-assistant-asset-item .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--node-action-border);
  border-radius: 10px;
  color: var(--node-muted);
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
}

.graphical-assistant-upload {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  color: var(--node-title);
  font-size: 0.875rem;
}

.graphical-assistant-upload:hover,
.graphical-assistant-reference-preview .ghost-button:hover,
.graphical-assistant-asset-item .ghost-button:hover {
  color: var(--node-action-icon-hover);
  background: var(--node-action-hover);
}

.graphical-assistant-reference-preview {
  display: grid;
  gap: 10px;
}

.graphical-assistant-reference-preview img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border: 1px solid var(--node-border);
  border-radius: 12px;
  background: var(--node-input-bg);
}

.graphical-assistant-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.graphical-assistant-actions .graphical-assistant-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid var(--node-action-border);
  border-radius: 11px;
  color: var(--node-action-icon);
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
  flex-shrink: 0;
}

.graphical-assistant-actions .graphical-assistant-nav-button.ghost-button,
.graphical-assistant-actions .graphical-assistant-nav-button.primary-button {
  min-height: 36px;
  padding: 0;
}

.graphical-assistant-actions .graphical-assistant-nav-button.primary-button {
  border-color: var(--node-cta-border);
  color: var(--node-title);
  background: var(--node-cta-bg);
  box-shadow: var(--node-cta-shadow);
}

.graphical-assistant-actions .graphical-assistant-nav-button.primary-button:hover:not(:disabled) {
  border-color: var(--node-selected-border);
  color: #fff;
  background: var(--node-selected);
}

.graphical-assistant-actions .graphical-assistant-generate-button {
  width: auto;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--node-cta-border);
  border-radius: 12px;
  color: var(--node-title);
  background: var(--node-cta-bg);
  box-shadow: var(--node-cta-shadow);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

.graphical-assistant-actions .graphical-assistant-generate-button:hover:not(:disabled) {
  border-color: var(--node-selected-border);
  color: #fff;
  background: var(--node-selected);
}

.graphical-assistant-nav-button .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

.graphical-assistant-nav-spinner {
  animation: graphical-assistant-spin 0.9s linear infinite;
}

@keyframes graphical-assistant-spin {
  to {
    transform: rotate(360deg);
  }
}

.graphical-assistant-step textarea {
  min-height: 140px;
}

.graphical-assistant-enhanced-prompt {
  min-height: 190px;
}

.graphical-assistant-panel .generate-toggle-control {
  width: fit-content;
  gap: 10px;
  height: 40px;
  padding: 0 8px 0 10px;
  border-color: var(--node-border);
  background: var(--node-bg);
}

.graphical-assistant-panel .generate-toggle-control:focus-within {
  border-color: var(--node-input-focus);
  box-shadow: 0 0 0 1px var(--node-input-focus);
}

.graphical-assistant-panel .generate-toggle-state {
  color: var(--node-title);
}

.graphical-assistant-panel .generate-toggle-track {
  background: var(--node-action-bg);
}

.graphical-assistant-panel .generate-toggle-input:checked + .generate-toggle-track {
  background: var(--node-selected);
}

.prompt-engineer-body {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  overflow: auto;
}

.prompt-engineer-panel label {
  color: var(--node-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.prompt-engineer-panel input,
.prompt-engineer-panel select,
.prompt-engineer-panel textarea {
  height: auto;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--node-border);
  border-radius: 12px;
  background-color: var(--node-input-bg);
  color: var(--node-title);
  font-size: 0.8125rem;
  font-weight: 400;
  box-shadow: inset 0 1px 0 rgb(0 0 0 / 38%);
}

[data-theme="light"] .prompt-engineer-panel input,
[data-theme="light"] .prompt-engineer-panel select,
[data-theme="light"] .prompt-engineer-panel textarea {
  box-shadow: inset 0 1px 0 rgb(20 20 22 / 6%);
}

.prompt-engineer-panel select {
  height: 40px;
  padding: 0 34px 0 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%238a8a8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.5 L6 8 L9.5 4.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.prompt-engineer-panel input:focus,
.prompt-engineer-panel select:focus,
.prompt-engineer-panel textarea:focus {
  border-color: var(--node-input-focus);
  box-shadow: 0 0 0 1px var(--node-input-focus);
}

.prompt-engineer-body textarea {
  min-height: 118px;
  resize: vertical;
}

.prompt-engineer-context {
  min-height: 92px;
}

.prompt-engineer-result {
  min-height: 190px;
}

.prompt-engineer-submit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 12px;
  align-items: end;
}

.prompt-engineer-enhance-button,
.prompt-engineer-use-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--node-cta-border);
  border-radius: 12px;
  color: var(--node-title);
  background: var(--node-cta-bg);
  box-shadow: var(--node-cta-shadow);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.prompt-engineer-enhance-button:hover:not(:disabled),
.prompt-engineer-use-button:hover:not(:disabled) {
  border-color: var(--node-selected-border);
  color: #fff;
  background: var(--node-selected);
}

.prompt-engineer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.prompt-engineer-copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid var(--node-action-border);
  border-radius: 11px;
  color: var(--node-action-icon);
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.prompt-engineer-copy-button:hover:not(:disabled) {
  color: var(--node-action-icon-hover);
  background: var(--node-action-hover);
}

.prompt-engineer-copy-button .material-symbols-outlined {
  display: block;
  font-size: 20px;
  line-height: 1;
}

.prompt-engineer-error {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgb(255 121 121 / 32%);
  border-radius: 12px;
  color: #ffd3d3;
  background: rgb(255 121 121 / 12%);
  font-size: 0.8125rem;
  font-weight: 600;
}

.prompt-engineer-status {
  margin: 0;
  color: var(--node-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.chat-panel {
  position: relative;
  z-index: 2;
  display: flex;
  width: var(--chat-column-width);
  min-width: var(--chat-column-width);
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--node-border);
  border-radius: var(--workspace-radius);
  background: var(--node-bg);
  --chat-font: "Source Sans 3", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --chat-size: 0.875rem;
  --chat-line: 1.62;
  --chat-muted: var(--node-muted);
  font-family: var(--chat-font);
  font-size: var(--chat-size);
  line-height: var(--chat-line);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  color: var(--node-title);
}

.chat-panel-header {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  gap: 8px;
  height: 64px;
  padding: 0;
}

.chat-panel-header-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  margin-left: auto;
}

.chat-panel-header-actions .panel-close-button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 14px 12px 0 0;
  border: 1px solid var(--node-action-border);
  border-radius: 11px;
  color: var(--node-action-icon);
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
}

.chat-panel-header-actions .panel-close-button:hover {
  color: var(--node-action-icon-hover);
  background: var(--node-action-hover);
}

.chat-body-shell {
  position: relative;
  flex: 1;
  min-height: 0;
}

.chat-messages {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  padding: 20px 18px;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    black 22px,
    black calc(100% - 22px),
    transparent 100%
  );
  mask-image: linear-gradient(180deg, transparent 0, black 22px, black calc(100% - 22px), transparent 100%);
  scrollbar-width: thin;
}

.chat-message + .chat-message {
  margin-top: 12px;
}

.chat-message.is-assistant + .chat-message.is-user,
.chat-message.is-pending + .chat-message.is-user {
  margin-top: 60px;
}

.chat-message.is-user + .chat-message.is-assistant,
.chat-message.is-user + .chat-message.is-pending {
  margin-top: 60px;
}

.chat-scroll-bottom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--node-action-border);
  border-radius: 11px;
  color: var(--node-action-icon);
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.chat-scroll-bottom:hover {
  border-color: var(--node-action-border);
  color: var(--node-action-icon-hover);
  background: var(--node-action-hover);
}

.chat-scroll-bottom .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

.chat-title-menu {
  position: relative;
  min-width: 0;
  flex: 1;
  margin-left: 26px;
  margin-top: 26px;
}

.chat-title-anchor {
  position: relative;
  display: block;
  max-width: 100%;
  min-width: 0;
}

.chat-title-trigger {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  gap: 5px;
  align-items: center;
  min-width: 0;
  margin: -3px -6px;
  padding: 3px 6px;
  border: 0;
  border-radius: 6px;
  color: var(--node-title);
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.chat-title-trigger:hover,
.chat-title-trigger.is-open,
.chat-title-trigger:focus-visible {
  background: var(--node-input-bg);
  outline: none;
}

.chat-title-mark {
  flex-shrink: 0;
  color: var(--node-muted);
  font-size: 16px;
  line-height: 1;
}

.chat-title-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-title-chevron {
  flex-shrink: 0;
  color: var(--node-muted);
  font-size: 20px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.chat-title-trigger.is-open .chat-title-chevron {
  transform: rotate(180deg);
}

.chat-title-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 4;
  display: flex;
  width: min(300px, calc(100vw - 48px));
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--node-border);
  border-radius: 14px;
  padding: 8px;
  background: var(--node-bg);
  box-shadow: var(--node-shadow);
  color: var(--node-title);
}

.chat-panel .chat-title-dropdown {
  width: calc(100% - 70px);
}

.chat-title-dropdown-label {
  margin: 0;
  padding: 4px 8px 2px;
  color: var(--node-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chat-title-dropdown-list {
  display: grid;
  gap: 6px;
  max-height: min(280px, 42vh);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--node-muted) transparent;
}

.chat-title-dropdown-list::-webkit-scrollbar,
.workspace-switcher-lists::-webkit-scrollbar {
  width: 6px;
}

.chat-title-dropdown-list::-webkit-scrollbar-track,
.workspace-switcher-lists::-webkit-scrollbar-track {
  background: transparent;
}

.chat-title-dropdown-list::-webkit-scrollbar-thumb,
.workspace-switcher-lists::-webkit-scrollbar-thumb {
  background: var(--node-muted);
  border-radius: 999px;
}

.chat-title-dropdown-empty {
  margin: 0;
  padding: 8px;
  color: var(--node-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.chat-title-dropdown-item {
  display: flex;
  gap: 2px;
  align-items: stretch;
  padding: 2px;
  border-radius: 10px;
  background: transparent;
}

.chat-title-dropdown-item:hover,
.chat-title-dropdown-item.is-active {
  background: var(--node-input-bg);
}

.chat-title-dropdown-main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  color: inherit;
  background: transparent;
  text-align: left;
}

.chat-title-dropdown-item-title {
  max-width: 100%;
  overflow: hidden;
  color: var(--node-title);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-title-dropdown-item-meta {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.chat-title-dropdown-item-date {
  color: var(--node-muted);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.2;
}

.chat-title-dropdown-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  align-self: center;
  gap: 0;
  margin: 0 4px 0 0;
  opacity: 0.55;
}

.chat-title-dropdown-item:hover .chat-title-dropdown-actions,
.chat-title-dropdown-item.is-editing .chat-title-dropdown-actions,
.chat-title-dropdown-item:hover .chat-title-dropdown-delete {
  opacity: 1;
}

.chat-title-dropdown-action,
.chat-title-dropdown-delete {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 26px;
  height: 26px;
  margin: 0 4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 7px;
  color: var(--node-muted);
  background: transparent;
  cursor: pointer;
}

.chat-title-dropdown-action .material-symbols-outlined,
.chat-title-dropdown-delete .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}

.chat-title-dropdown-action:hover:not(:disabled),
.chat-title-dropdown-delete:hover,
.chat-title-dropdown-action.chat-title-dropdown-delete:hover:not(:disabled) {
  color: var(--node-selected);
  background: transparent;
}

.chat-title-dropdown-action:disabled,
.chat-title-dropdown-delete:disabled {
  opacity: 0.45;
  cursor: default;
}

.chat-title-dropdown-actions .chat-title-dropdown-delete {
  margin: 0;
}

.chat-title-dropdown-item > .chat-title-dropdown-delete {
  opacity: 0.55;
}

.chat-title-dropdown-separator {
  height: 1px;
  margin: 2px 8px;
  background: var(--node-border);
}

.chat-title-dropdown-new {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  color: var(--node-title);
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: left;
}

.chat-title-dropdown-new .material-symbols-outlined {
  color: var(--node-muted);
  font-size: 18px;
  line-height: 1;
}

.chat-title-dropdown-new:hover:not(:disabled) {
  background: var(--node-input-bg);
}

.chat-title-dropdown-new:hover:not(:disabled) .material-symbols-outlined {
  color: var(--node-selected);
}

.chat-title-dropdown-create {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 2px;
}

.chat-title-dropdown-create input {
  flex: 1;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--node-border);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--node-input-bg);
  color: var(--node-title);
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: none;
}

.chat-title-dropdown-create input:focus {
  border-color: var(--node-input-focus);
  box-shadow: none;
}

.chat-title-dropdown-create-submit {
  flex-shrink: 0;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: var(--node-title);
  background: var(--node-input-bg);
  font-size: 0.75rem;
  font-weight: 600;
}

.chat-title-dropdown-create-submit:hover:not(:disabled) {
  background: var(--node-action-hover);
}

.chat-title-dropdown-create-submit:disabled {
  opacity: 0.5;
}

.workspace-switcher {
  margin-left: 28px;
  pointer-events: auto;
}

.workspace-switcher .chat-title-menu {
  margin: 0;
  flex: 0 0 auto;
}

.workspace-switcher .chat-title-trigger {
  max-width: none;
}

.workspace-switcher .chat-title-text {
  flex: 0 0 auto;
  overflow: visible;
  text-overflow: unset;
}

.workspace-switcher .chat-title-dropdown {
  z-index: 21;
  width: min(320px, calc(100vw - 48px));
  max-width: min(320px, calc(100vw - 48px));
  overflow: hidden;
}

.workspace-switcher-lists {
  display: grid;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
  max-height: min(280px, 42vh);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--node-muted) transparent;
}

.workspace-switcher-section {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 2px;
}

.workspace-switcher .chat-title-dropdown-label {
  margin: 8px 0 10px;
  color: var(--node-selected);
}

.workspace-switcher-section:not(:first-child) .chat-title-dropdown-label {
  margin-top: 14px;
  padding-top: 0;
}

.workspace-switcher-lists .chat-title-dropdown-list {
  min-width: 0;
  max-width: 100%;
  max-height: none;
  overflow: hidden;
}

.workspace-switcher .chat-title-dropdown-item {
  min-width: 0;
  max-width: 100%;
}

.workspace-switcher .chat-title-dropdown-main {
  align-items: stretch;
  overflow: hidden;
}

.workspace-switcher .chat-title-dropdown-item-title {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.workspace-switcher-item-name {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-switcher-item-form {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  padding: 4px 8px;
}

.workspace-switcher-item-input {
  width: 100%;
  min-width: 0;
  height: 28px;
  border: 1px solid var(--node-border);
  border-radius: 8px;
  padding: 0 8px;
  background: var(--node-bg);
  color: var(--node-title);
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: none;
}

.workspace-switcher-item-input:focus {
  border-color: var(--node-input-focus);
  box-shadow: none;
}

.workspace-switcher .chat-title-dropdown-item-title .material-symbols-outlined {
  flex-shrink: 0;
  color: var(--node-muted);
  font-size: 16px;
  line-height: 1;
}

.chat-conversation-busy {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--node-selected);
  animation: chat-tab-pulse 1s ease-in-out infinite;
}

@keyframes chat-tab-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.92);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.chat-empty-state {
  margin: 0;
  color: var(--node-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.chat-message {
  position: relative;
  min-width: 0;
  max-width: 100%;
  font: inherit;
  letter-spacing: 0.01em;
  word-break: break-word;
}

.chat-message.is-assistant {
  display: flex;
  width: 100%;
  max-width: none;
  flex-direction: column;
  align-self: flex-start;
  color: var(--node-title);
}

.chat-message.is-user {
  display: flex;
  max-width: min(78%, 300px);
  flex-direction: column;
  align-self: flex-end;
  align-items: flex-end;
  color: var(--node-muted);
}

.chat-message.is-user .chat-message-bubble {
  width: auto;
  max-width: 100%;
  padding: 9px 11px;
  border-radius: 12px 12px 4px;
  background: var(--node-input-bg);
}

.chat-message.is-pending {
  opacity: 0.72;
}

.chat-thinking-indicator {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
  color: var(--chat-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
}

.chat-thinking-indicator .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}

.chat-tool-activities {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.chat-tool-activity {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  color: var(--chat-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}

.chat-tool-activity .material-symbols-outlined {
  font-size: 15px;
  line-height: 1;
}

.chat-tool-activity.is-ok {
  color: var(--chat-muted);
}

.chat-tool-activity.is-error {
  color: var(--danger, #f07178);
}

.chat-thinking-label {
  margin: 0;
}

.chat-thinking-label::after {
  display: inline-block;
  width: 1.1em;
  margin-left: 0.12em;
  overflow: hidden;
  vertical-align: bottom;
  animation: chat-thinking-ellipsis 1.2s steps(4, end) infinite;
  content: "...";
}

@keyframes chat-thinking-ellipsis {
  to {
    width: 2.2em;
  }
}

.chat-message.is-assistant .chat-message-content,
.chat-message.is-assistant .chat-message-content-markdown {
  color: var(--node-title);
}

.chat-message.is-user .chat-message-content,
.chat-message.is-user .chat-message-content-markdown {
  color: var(--node-muted);
}

.chat-message-content {
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-message-content-markdown {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 0.55em;
  font: inherit;
  white-space: normal;
  overflow-wrap: anywhere;
}

.chat-message-content-markdown > :first-child {
  margin-top: 0;
}

.chat-message-content-markdown > :last-child {
  margin-bottom: 0;
}

.chat-message-content-markdown p,
.chat-message-content-markdown h1,
.chat-message-content-markdown h2,
.chat-message-content-markdown h3,
.chat-message-content-markdown h4,
.chat-message-content-markdown h5,
.chat-message-content-markdown h6,
.chat-message-content-markdown ul,
.chat-message-content-markdown ol,
.chat-message-content-markdown blockquote,
.chat-message-content-markdown pre {
  margin: 0;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.chat-message-content-markdown strong,
.chat-message-content-markdown b {
  font-weight: 600;
  color: inherit;
}

.chat-message-content-markdown em,
.chat-message-content-markdown i {
  font-style: italic;
  color: inherit;
}

.chat-message-content-markdown ol,
.chat-message-content-markdown ul {
  display: grid;
  gap: 0.35em;
  padding-left: 1.15em;
}

.chat-message-content-markdown li {
  margin: 0;
}

.chat-message-content-markdown blockquote {
  border: 0;
  padding: 0;
}

.chat-message-content-markdown code {
  border-radius: 0;
  padding: 0;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chat-message-content-markdown pre {
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.chat-message-content-markdown pre code {
  padding: 0;
  background: transparent;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chat-code-block {
  position: relative;
  margin: 0;
  max-width: 100%;
  border: 1px solid var(--node-border);
  border-radius: 12px;
  background: var(--node-input-bg);
}

.chat-code-block pre {
  margin: 0;
  padding: 28px 10px 10px;
  background: transparent;
  border-radius: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--chat-muted);
}

.chat-code-copy-button {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--node-action-border);
  border-radius: 8px;
  padding: 0;
  background: var(--node-action-bg);
  color: var(--node-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chat-code-block:hover .chat-code-copy-button,
.chat-code-copy-button:focus-visible {
  opacity: 1;
}

.chat-code-copy-button:hover {
  border-color: var(--node-action-border);
  background: var(--node-action-hover);
  color: var(--node-action-icon-hover);
}

.chat-code-copy-button.is-copied {
  opacity: 1;
  border-color: var(--success-border-strong);
  background: var(--success-surface-strong);
  color: var(--success);
}

.chat-code-copy-button .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}

.chat-message-typing {
  color: var(--text-dim);
  font-style: italic;
}

.chat-composer {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  padding: 12px 10px 10px;
  overflow: visible;
}

.chat-composer-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  overflow: visible;
  border: 1px solid var(--node-border);
  border-radius: 12px;
  background: var(--node-input-bg);
  box-shadow: none;
  transition: border-color 0.15s ease;
}

.chat-composer-box:focus-within {
  border-color: var(--node-input-focus);
}

.chat-input-shell {
  min-width: 0;
}

.chat-input {
  display: block;
  width: 100%;
  min-height: 42px;
  max-height: 220px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--node-title);
  background: transparent;
  font: inherit;
  line-height: var(--chat-line);
  overflow-wrap: anywhere;
  resize: none;
  white-space: pre-wrap;
}

.chat-input:focus {
  outline: none;
  box-shadow: none;
}

.chat-input::placeholder {
  color: var(--node-muted);
  opacity: 0.8;
}

.chat-composer-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.chat-composer-tools {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.chat-mode-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.chat-mode-trigger {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  min-width: 0;
  height: 28px;
  padding: 0 4px 0 8px;
  border: 0;
  border-radius: 6px;
  color: var(--node-muted);
  background: transparent;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.chat-mode-trigger:hover,
.chat-mode-trigger.is-open,
.chat-mode-trigger:focus-visible {
  color: var(--node-title);
  background: var(--node-action-hover);
  outline: none;
}

.chat-mode-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.chat-mode-trigger-label {
  min-width: 0;
}

.chat-mode-trigger-chevron {
  flex-shrink: 0;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.chat-mode-trigger.is-open .chat-mode-trigger-chevron {
  transform: rotate(180deg);
}

.chat-mode-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 5;
  display: flex;
  width: min(220px, calc(100vw - 48px));
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  border: 1px solid var(--node-border);
  border-radius: 14px;
  padding: 6px;
  background: var(--node-bg);
  box-shadow: var(--node-shadow);
}

.chat-mode-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  color: var(--node-title);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.chat-mode-option:hover,
.chat-mode-option:focus-visible {
  background: var(--node-input-bg);
  outline: none;
}

.chat-mode-option.is-active {
  background: var(--node-input-bg);
}

.chat-mode-option-label {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
}

.chat-mode-option-description {
  color: var(--node-muted);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
}

.chat-composer-tool {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: var(--node-muted);
  background: transparent;
  cursor: pointer;
}

.chat-composer-tool:hover,
.chat-composer-tool:focus-visible {
  color: var(--node-action-icon-hover);
  background: transparent;
  outline: none;
}

.chat-composer-tool:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.chat-composer-tool .material-symbols-outlined {
  font-size: 21px;
  line-height: 1;
}

.chat-composer-spacer {
  min-width: 0;
  flex: 1;
}

.chat-composer-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}

.chat-send-button {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--node-muted);
  background: var(--node-action-bg);
  cursor: default;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.chat-send-button .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

.chat-send-button.is-ready {
  color: #fff;
  background: var(--node-selected);
  cursor: pointer;
}

.chat-send-button.is-ready:hover {
  filter: brightness(1.06);
}

.chat-send-button.is-stop {
  color: white;
  background: var(--danger);
  cursor: pointer;
}

.chat-send-button.is-stop:hover {
  filter: brightness(1.08);
}

.chat-send-button.is-uploading {
  cursor: wait;
  opacity: 0.88;
}

.chat-send-spinner {
  animation: chat-send-spin 0.9s linear infinite;
}

@keyframes chat-send-spin {
  to {
    transform: rotate(360deg);
  }
}

.chat-draft-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-draft-attachment {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  max-width: 180px;
  padding: 4px 6px 4px 4px;
  border: 1px solid var(--node-border);
  border-radius: 10px;
  background: var(--node-bg);
}

.chat-draft-attachment.is-uploading {
  border-color: rgb(36 198 220 / 35%);
  animation: chat-draft-attachment-pulse 1.2s ease-in-out infinite;
}

.chat-draft-attachment-loader {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 2px solid rgb(162 169 180 / 24%);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: media-preview-spin 0.9s linear infinite;
}

@keyframes chat-draft-attachment-pulse {
  0%,
  100% {
    opacity: 0.82;
  }

  50% {
    opacity: 1;
  }
}

.chat-draft-attachment img {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 6px;
  object-fit: cover;
}

.chat-draft-attachment .material-symbols-outlined {
  font-size: 22px;
  line-height: 1;
  color: var(--node-muted);
}

.chat-draft-attachment-name {
  overflow: hidden;
  min-width: 0;
  color: var(--node-muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-draft-attachment-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  color: var(--node-muted);
  background: transparent;
  cursor: pointer;
}

.chat-draft-attachment-remove:hover {
  color: var(--node-action-icon-hover);
}

.chat-draft-attachment-remove .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
}

[data-theme="light"] .chat-panel {
  --chat-muted: var(--node-muted);
}

[data-theme="light"] .chat-send-button.is-ready {
  color: white;
  background: var(--node-selected);
}

[data-theme="light"] .chat-send-button.is-stop {
  color: white;
  background: var(--danger);
}

.chat-message-content-stack {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.chat-message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-message-attachment {
  display: grid;
  gap: 4px;
  max-width: min(100%, 220px);
  margin: 0;
}

.chat-message-attachment img,
.chat-message-attachment video,
.chat-message-attachment audio {
  width: 100%;
  border-radius: 8px;
}

.chat-message-attachment.is-text,
.chat-message-attachment.is-document {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--chat-muted);
  font: inherit;
  font-size: 0.8125rem;
}

.chat-message-attachment-icon {
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
}

.chat-message-attachment figcaption {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-panel,
.history-panel {
  display: grid;
  align-content: start;
  gap: 0;
  max-height: calc(100vh - 80px);
  overflow: auto;
  color: var(--node-title);
}

.info-panel {
  width: min(560px, calc(100vw - 40px));
}

.history-panel {
  width: min(560px, calc(100vw - 40px));
  max-height: calc((100vh - 80px) * 0.8);
}

.settings-help-copy {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.shortcuts-panel {
  width: min(620px, calc(100vw - 40px));
}

.shortcuts-panel-header {
  align-items: flex-start;
}

.shortcuts-panel-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.shortcuts-panel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--accent-surface-strong), var(--accent-surface-soft));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
  color: var(--accent-strong);
}

.shortcuts-panel-badge .material-symbols-outlined {
  font-size: 24px;
}

.shortcuts-panel-body {
  gap: 16px;
}

.shortcuts-section {
  overflow: hidden;
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--surface-subtle), var(--surface-faint));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

.shortcuts-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: rgb(255 255 255 / 2%);
}

.shortcuts-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--surface-medium);
  color: var(--accent-strong);
}

.shortcuts-section-icon .material-symbols-outlined {
  font-size: 18px;
}

.shortcuts-section-header h3 {
  flex: 1;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.shortcuts-section-count {
  min-width: 1.5rem;
  padding: 2px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.shortcuts-list {
  display: grid;
}

.shortcut-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 11px 14px;
  transition: background-color 0.15s ease;
}

.shortcut-row + .shortcut-row {
  border-top: 1px solid var(--border-soft);
}

.shortcut-row:hover {
  background: var(--surface-soft);
}

.shortcut-label {
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--text-soft);
}

.shortcut-keycaps {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.shortcut-keycap-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.shortcut-keycap-separator {
  color: var(--text-ghost);
  font-size: 0.72rem;
  font-weight: 700;
  user-select: none;
}

.shortcut-keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  min-height: 1.85rem;
  padding: 0 7px;
  border: 1px solid var(--border-emphasis);
  border-radius: 7px;
  background: linear-gradient(180deg, var(--surface-strong), var(--surface-medium));
  box-shadow:
    0 1px 0 rgb(255 255 255 / 10%) inset,
    0 1px 2px rgb(0 0 0 / 22%);
  color: var(--text-bright);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.shortcut-keycap.is-action {
  min-width: auto;
  padding: 0 10px;
  font-family: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.shortcut-keycap-inline {
  display: inline-flex;
  vertical-align: middle;
  min-width: 1.5rem;
  min-height: 1.5rem;
  margin: 0 2px;
  font-size: 0.68rem;
}

.info-panel-header,
.info-panel-body,
.history-panel-header,
.history-panel-body {
  position: relative;
  z-index: 1;
}

.info-panel-header,
.history-panel-header {
  display: grid;
  gap: 6px;
  margin: -4px -4px 18px;
  padding: 0 4px 16px;
  box-shadow: var(--node-hr);
}

.info-panel-heading,
.history-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.history-panel-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.info-panel-header .panel-close-button,
.history-panel-header .panel-close-button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  border: 1px solid var(--node-action-border);
  border-radius: 11px;
  color: var(--node-action-icon);
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.info-panel-header .panel-close-button:hover,
.history-panel-header .panel-close-button:hover {
  color: var(--node-action-icon-hover);
  background: var(--node-action-hover);
}

.info-panel-title,
.history-panel-title {
  margin: 0;
  color: var(--node-title);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
}

.info-panel-subtitle,
.history-panel-subtitle {
  margin: 0;
  overflow: hidden;
  color: var(--node-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.info-panel-body,
.history-panel-body {
  display: grid;
  gap: 16px;
}

.history-panel[hidden] {
  display: none;
}

.history-clear-button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--node-action-border);
  border-radius: 10px;
  color: var(--node-muted);
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.history-clear-button:hover {
  color: var(--node-action-icon-hover);
  background: var(--node-action-hover);
}

.history-panel-hint {
  margin: 0;
  color: var(--node-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.history-panel .history-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.history-panel .history-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--node-border);
  border-radius: 12px;
  color: inherit;
  background: var(--node-input-bg);
  box-shadow: inset 0 1px 0 rgb(0 0 0 / 38%);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

[data-theme="light"] .history-panel .history-card,
[data-theme="light"] .history-detail-card,
[data-theme="light"] .info-section-card {
  box-shadow: inset 0 1px 0 rgb(20 20 22 / 6%);
}

.history-panel .history-card:hover {
  border-color: var(--node-input-focus);
}

.history-panel .history-card:focus-visible {
  outline: none;
  border-color: var(--node-input-focus);
  box-shadow: 0 0 0 1px var(--node-input-focus);
}

.history-panel .history-card-body {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.history-panel .history-card-prompt {
  overflow: hidden;
  color: var(--node-title);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-panel .history-card-meta {
  overflow: hidden;
  color: var(--node-muted);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-panel .history-card-outcome {
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  border: 1px solid var(--node-action-border);
  border-radius: 11px;
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
}

.history-panel .history-card-outcome .material-symbols-outlined {
  font-size: 18px;
  line-height: 1;
}

.history-panel .history-card-outcome.is-success {
  color: #44ff88;
}

.history-panel .history-card-outcome.is-failure {
  color: #ff7b7b;
}

.history-detail {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.history-detail-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.history-detail-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--node-border);
  border-radius: 12px;
  background: var(--node-input-bg);
  box-shadow: inset 0 1px 0 rgb(0 0 0 / 38%);
}

.history-detail-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.history-detail-meta-copy {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.history-detail-status {
  overflow: hidden;
  color: var(--node-title);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

.history-detail-date,
.history-detail-model {
  margin: 0;
  overflow: hidden;
  color: var(--node-muted);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-detail-label {
  margin: 0;
  color: var(--node-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
}

.history-detail-prompt {
  margin: 0;
  max-height: 180px;
  overflow: auto;
  color: var(--node-title);
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.history-detail-preview {
  justify-self: center;
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--node-border);
  border-radius: 10px;
  background: transparent;
}

.history-detail-preview img,
.history-detail-preview video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  background: transparent;
}

.history-detail-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--node-action-border);
  border-radius: 10px;
  color: var(--node-title);
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}

.result-info-panel {
  display: grid;
  width: min(560px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  overflow: hidden;
}

.result-info-body {
  display: grid;
  gap: 14px;
  overflow: auto;
  padding-right: 4px;
}

.result-info-overview {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--surface-faint);
}

.result-info-overview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.result-info-head-separator {
  color: var(--text-ghost);
  font-size: 0.9rem;
  line-height: 1;
}

.result-info-status {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--surface-strong);
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: capitalize;
}

.result-info-status.is-success {
  border-color: var(--positive-border);
  background: var(--positive-surface);
  color: var(--positive);
}

.result-info-status.is-failure {
  border-color: var(--error-border-soft);
  background: var(--error-surface-soft);
  color: var(--error-text-strong);
}

.result-info-status.is-running {
  border-color: var(--info-border);
  background: var(--info-surface);
  color: var(--info-text);
}

.result-info-created {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
  white-space: nowrap;
}

.result-info-settings {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.result-info-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  max-width: 100%;
  border: 1px solid var(--node-border);
  border-radius: 999px;
  padding: 3px 9px;
  background: var(--node-input-bg);
  line-height: 1.2;
}

.result-info-chip-label {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.result-info-chip-value {
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.result-info-json-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-inline: 10px;
  font-size: 0.78rem;
  font-weight: 600;
}

.result-info-json-button .material-symbols-outlined {
  font-size: 1rem;
}

.result-info-block {
  display: grid;
  gap: 8px;
}

.result-info-block-title {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.result-info-block-content {
  display: grid;
  gap: 8px;
}

.result-info-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  min-width: 0;
}

.result-info-inline.is-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.result-info-inline-label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.result-info-inline-value {
  color: var(--text);
  font-size: 0.84rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.result-info-inline-value.is-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.78rem;
}

.result-info-url {
  display: block;
  color: var(--accent-strong);
  font-size: 0.8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.result-info-url:hover {
  text-decoration: underline;
}

.result-info-prompt {
  width: 100%;
  min-height: 120px;
  max-height: 220px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--surface-faint);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.55;
}

.result-info-prompt-missing {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: var(--surface-faint);
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.export-panel {
  display: grid;
  width: min(760px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  overflow: hidden;
}

.export-panel-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.export-panel-body {
  display: grid;
  gap: 12px;
  overflow: auto;
  padding-right: 4px;
}

.export-item-list {
  display: grid;
  gap: 10px;
}

.export-item-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: var(--surface-faint);
}

.export-item-preview {
  width: 88px;
  height: 66px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--media-preview-letterbox);
}

.export-item-preview img,
.export-item-preview video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.export-item-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.export-item-head {
  display: grid;
  gap: 4px;
}

.export-item-kind {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.export-item-kind.is-image {
  color: #8a5d00;
  background: rgb(245 196 107 / 18%);
}

.export-item-kind.is-video {
  color: #0f6d52;
  background: rgb(56 212 163 / 18%);
}

.export-item-filename {
  margin: 0;
  overflow: hidden;
  font-size: 0.92rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-item-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.export-item-meta-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.export-item-meta-label {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.export-item-meta-value {
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.export-item-date {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.export-item-actions {
  display: grid;
  gap: 8px;
  align-content: center;
}

.export-item-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}

.export-item-action .material-symbols-outlined {
  font-size: 18px;
}

.result-info-block {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--surface-faint);
}

.info-section {
  display: grid;
  gap: 10px;
}

.info-section-label {
  margin: 0;
  color: var(--node-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
}

.info-section-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--node-border);
  border-radius: 12px;
  background: var(--node-input-bg);
  box-shadow: inset 0 1px 0 rgb(0 0 0 / 38%);
}

.info-section-card p,
.info-section-card li {
  margin: 0;
  color: var(--node-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.info-section-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.info-section-card a {
  color: var(--node-title);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.info-section-card a:hover {
  color: var(--node-action-icon-hover);
}

.info-section-card strong {
  color: var(--node-title);
  font-weight: 600;
}

.info-section-card code {
  color: var(--node-title);
}

.info-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0 0.12rem;
  border: 1px solid var(--node-action-border);
  border-radius: 8px;
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
  color: var(--node-title);
  vertical-align: -0.2em;
}

.info-inline-icon .material-symbols-outlined {
  font-size: 0.92rem;
  line-height: 1;
}

.workspace-members-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--dock-panel-z);
  display: grid;
  align-content: start;
  gap: 0;
  width: min(400px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  padding: 20px;
  overflow: auto;
  color: var(--node-title);
}

.workspace-members-header,
.workspace-members-body {
  position: relative;
  z-index: 1;
}

.workspace-members-header {
  display: grid;
  gap: 6px;
  margin: -4px -4px 18px;
  padding: 0 4px 16px;
  box-shadow: var(--node-hr);
}

.workspace-members-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workspace-members-header .panel-close-button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  border: 1px solid var(--node-action-border);
  border-radius: 11px;
  color: var(--node-action-icon);
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.workspace-members-header .panel-close-button:hover {
  color: var(--node-action-icon-hover);
  background: var(--node-action-hover);
}

.workspace-members-title {
  margin: 0;
  color: var(--node-title);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
}

.workspace-members-workspace {
  margin: 0;
  overflow: hidden;
  color: var(--node-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-members-body {
  display: grid;
  gap: 16px;
}

.workspace-members-card {
  padding: 14px;
  border: 1px solid var(--node-border);
  border-radius: 12px;
  background: var(--node-input-bg);
  box-shadow: inset 0 1px 0 rgb(0 0 0 / 38%);
}

[data-theme="light"] .workspace-members-card {
  box-shadow: inset 0 1px 0 rgb(20 20 22 / 6%);
}

.workspace-invite-form {
  display: grid;
  gap: 12px;
  margin: 0;
}

.workspace-members-panel label {
  color: var(--node-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.workspace-members-panel input,
.workspace-members-panel select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--node-border);
  border-radius: 12px;
  background: var(--node-bg);
  color: var(--node-title);
  font-size: 0.8125rem;
  box-shadow: none;
}

.workspace-members-panel select {
  padding-right: 34px;
}

.workspace-members-panel input:focus,
.workspace-members-panel select:focus {
  border-color: var(--node-input-focus);
  box-shadow: 0 0 0 1px var(--node-input-focus);
}

.workspace-invite-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--node-cta-border);
  border-radius: 12px;
  color: var(--node-title);
  background: var(--node-cta-bg);
  box-shadow: var(--node-cta-shadow);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.workspace-invite-button:hover:not(:disabled) {
  border-color: var(--node-selected-border);
  color: #fff;
  background: var(--node-selected);
}

.workspace-invite-button .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
}

.workspace-members-error {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgb(255 121 121 / 32%);
  border-radius: 12px;
  color: #ffd3d3;
  background: rgb(255 121 121 / 12%);
  font-size: 0.8125rem;
  font-weight: 600;
}

.workspace-members-section {
  display: grid;
  gap: 10px;
}

.workspace-members-label {
  margin: 0;
  color: var(--node-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
}

.workspace-members-list {
  display: grid;
  gap: 8px;
}

.workspace-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
}

.workspace-member-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.workspace-member-avatar {
  position: relative;
  display: inline-flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--node-action-border);
  border-radius: 11px;
  color: var(--node-title);
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
}

.workspace-member-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.workspace-member-name {
  overflow: hidden;
  color: var(--node-title);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-member-meta {
  margin: 0;
  overflow: hidden;
  color: var(--node-muted);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-member-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--node-input-bg);
  border-radius: 50%;
  background: #3a3a3c;
}

.workspace-member-dot.is-online {
  background: #44ff88;
}

.workspace-member-remove {
  flex-shrink: 0;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--node-action-border);
  border-radius: 10px;
  color: var(--node-muted);
  background: var(--node-action-bg);
  box-shadow: var(--node-action-inset);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.workspace-member-remove:hover {
  border-color: rgb(255 121 121 / 70%);
  color: #ffd3d3;
  background: rgb(255 121 121 / 12%);
  box-shadow: none;
}

.workspace-members-hint {
  margin: 0;
  color: var(--node-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}