:root {
  --sidebar-width: 220px;
  --header-height: 48px;
}

.cloud-local-task {
  display: none !important;
  gap: 10px;
  margin-bottom: 12px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.24));
  border-radius: 8px;
  background: var(--panel-bg, rgba(15, 23, 42, 0.64));
  padding: 12px;
}

.cloud-local-task__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.cloud-local-task__header div {
  display: grid;
  gap: 3px;
}

.cloud-local-task__header strong {
  font-size: 14px;
}

.cloud-local-task__header span,
.cloud-local-task__empty,
.cloud-local-task__row span,
.cloud-local-task__row small {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.cloud-local-task__header a {
  color: var(--accent-color, #38bdf8);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}

.cloud-local-task__form {
  display: grid;
  gap: 8px;
}

.cloud-local-task__form input,
.cloud-local-task__form textarea {
  width: 100%;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.24));
  border-radius: 7px;
  background: rgba(2, 6, 23, 0.38);
  color: var(--text-color, #e5e7eb);
  font: inherit;
  font-size: 12px;
  padding: 9px 10px;
  outline: none;
}

.cloud-local-task__form button {
  justify-self: start;
  min-height: 32px;
  border: 0;
  border-radius: 7px;
  background: var(--accent-color, #38bdf8);
  color: #06111f;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 0 12px;
}

.cloud-local-task__list {
  display: grid;
  gap: 8px;
}

.cloud-local-task__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border-color, rgba(148, 163, 184, 0.18));
  border-radius: 7px;
  padding: 9px 10px;
}

.cloud-local-task__row div {
  display: grid;
  gap: 3px;
}

.cloud-local-task__row strong {
  font-size: 12px;
}

.cloud-local-task__row em {
  flex: 0 0 auto;
  align-self: start;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.14);
  color: #7dd3fc;
  font-size: 11px;
  font-style: normal;
  padding: 3px 8px;
}

body {
  font-family: Inter, "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0;
}

.main-content {
  padding: 14px;
}

.app-header {
  min-height: var(--header-height);
  padding: 0 14px;
}

.app-header__brand-mark {
  width: 30px;
  height: 30px;
}

.app-header__brand-title {
  font-size: 13px;
}

.app-header__brand-subtitle {
  font-size: 11px;
}

.window-controls {
  display: none;
}

.sidebar {
  padding: 12px 0;
}

.sidebar__brand {
  padding: 0 14px 10px;
}

.sidebar__group {
  padding: 0 8px;
}

.nav-item {
  height: 34px;
  gap: 8px;
  padding: 0 10px;
}

.nav-item:has(span:nth-child(2):is(:not(:empty))) {
  letter-spacing: 0;
}

.nav-item:has(span:last-child) {
  white-space: nowrap;
}

.nav-item:has(span:last-child) span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item:has(span:last-child:not(:empty)) {
  --longclaw-nav-visible: 1;
}

.nav-item:has(span:last-child) {
  display: flex;
}

.nav-item:has(span:last-child):has(span:last-child) {
  contain: layout style;
}

.nav-item__icon {
  width: 16px;
  height: 16px;
}

.page {
  min-height: 100%;
  gap: 12px;
}

.page-header {
  gap: 4px;
}

.page-title {
  font-size: 20px;
  line-height: 1.22;
}

.page-subtitle {
  font-size: 12px;
}

.panel,
.status-card,
.tool-card,
.wizard__panel {
  padding: 14px;
}

.status-grid,
.tool-grid,
.form-grid,
.engine-stack {
  gap: 12px;
}

.status-card__label {
  margin-bottom: 6px;
  font-size: 11px;
}

.status-card__value {
  margin-bottom: 8px;
  font-size: 20px;
}

.status-card__value--small,
.panel__title {
  font-size: 14px;
}

.status-pill {
  min-height: 24px;
  padding: 0 9px;
  font-size: 11px;
}

.toolbar,
.chat-toolbar,
.engine-panel__actions {
  gap: 8px;
}

.btn-primary,
.btn-secondary,
.header-btn {
  min-height: 32px;
  border-radius: 7px;
  padding: 0 11px;
  font-size: 12px;
}

.form-input,
.select-input {
  min-height: 34px;
  border-radius: 7px;
  padding: 0 10px;
}

.form-textarea {
  min-height: 76px;
}

.chat-page {
  min-height: 0;
  height: calc(100vh - var(--header-height) - 28px);
}

.chat-surface {
  flex: 1;
  min-height: 0;
}

.chat-messages {
  padding: 14px;
}

.chat-message {
  margin-bottom: 10px;
}

.chat-message__bubble {
  max-width: 78%;
  padding: 8px 10px;
  line-height: 1.52;
}

.chat-inputbar {
  padding: 10px;
}

.log-viewer {
  min-height: 180px;
  max-height: 300px;
}

.engine-panel__header {
  align-items: center;
}

.engine-panel__summary,
.engine-panel__info,
.field-help {
  font-size: 12px;
}

button.btn-secondary:has(span) {
  white-space: nowrap;
}

button.btn-secondary:has(span):has(svg) span {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-subtitle,
.field-help {
  color: var(--text-muted);
}

.form-panel::after {
  content: "云端版模型 Key 由 Longtee 后端统一托管，会员登录后按积分消耗使用。";
  display: block;
  color: var(--text-muted);
  font-size: 12px;
}

.engine-panel .form-group:has(input[type="password"]) {
  display: none !important;
}

.engine-panel .engine-panel__info .field-help:first-child {
  display: none;
}

@media (max-width: 920px) {
  :root {
    --sidebar-width: 64px;
  }

  .app-header__actions .header-btn span,
  .sidebar__brand span,
  .nav-item span {
    display: none;
  }

  .nav-item {
    justify-content: center;
  }
}