:root {
  --novice-acid: #c8ff00;
  --novice-cyan: #15e6ff;
  --novice-ink: #050607;
  --novice-line: rgba(255, 255, 255, 0.16);
}

.novice-body {
  min-width: 0;
  min-height: 100svh;
  overflow: hidden;
  color: #fff;
  background: #030506;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: auto;
}

.novice-body [hidden] {
  display: none !important;
}

.novice-page {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

.novice-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 14%, rgba(21, 230, 255, 0.14), transparent 30%),
    linear-gradient(rgba(200, 255, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 230, 255, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, #020405 0%, #06090b 62%, #020405 100%);
  background-size: auto, 80px 80px, 80px 80px, auto;
}

.novice-page > * {
  position: relative;
  z-index: 1;
}

.novice-page > .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.novice-workspace {
  position: fixed;
  top: 84px;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  height: auto;
  padding: 16px;
  overflow: hidden;
}

.novice-body.prompt-tool-open .novice-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.novice-panel {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: #fff;
  font: 900 16px/1.55 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(7, 10, 11, 0.98);
  border: 1px solid rgba(200, 255, 0, 0.42);
  border-radius: 8px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055);
}

.novice-image-panel {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.novice-prompt-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

.novice-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--novice-line);
}

.novice-panel-head strong {
  display: block;
  font-size: 24px;
  line-height: 1.08;
}

.novice-panel-head small {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 900;
}

.novice-icon-btn {
  width: 36px;
  height: 36px;
  color: #fff;
  font: inherit;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  cursor: pointer;
}

.novice-form {
  min-height: 0;
  padding: 16px;
}

.novice-field {
  display: grid;
  gap: 8px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 14px;
  font-weight: 900;
}

.novice-field textarea,
.novice-field select {
  width: 100%;
  min-height: 42px;
  color: #fff;
  font: inherit;
  font-size: 17px;
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  outline: none;
}

.novice-field textarea {
  height: clamp(180px, 28svh, 300px);
  min-height: 150px;
  padding: 14px;
  resize: vertical;
  line-height: 1.6;
}

.novice-field select {
  padding: 0 12px;
}

.novice-settings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.novice-image-preview {
  display: grid;
  min-height: 0;
  margin: 0 16px 16px;
  place-items: center;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(0, 0, 0, 0.48);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  overflow: hidden;
}

.novice-image-preview.has-image {
  cursor: zoom-in;
}

.novice-image-preview.is-generating {
  color: var(--novice-acid);
  background:
    linear-gradient(135deg, rgba(200, 255, 0, 0.08), transparent 38%, rgba(21, 230, 255, 0.08)),
    rgba(0, 0, 0, 0.58);
  border-color: rgba(200, 255, 0, 0.54);
}

.novice-image-preview img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
}

.novice-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 18%, rgba(200, 255, 0, 0.12), transparent 38%),
    rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(10px);
}

.novice-fullscreen-overlay[hidden] {
  display: none !important;
}

.novice-fullscreen-overlay img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 1px solid rgba(200, 255, 0, 0.32);
  border-radius: 8px;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.72),
    0 0 48px rgba(200, 255, 0, 0.14);
}

.novice-fullscreen-overlay button {
  position: absolute;
  top: 18px;
  right: 18px;
  min-width: 74px;
  min-height: 38px;
  color: #fff;
  font: 900 14px/1 "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  cursor: pointer;
}

.novice-fullscreen-overlay button:hover {
  color: var(--novice-ink);
  background: var(--novice-acid);
  border-color: var(--novice-acid);
}

.novice-actions {
  display: grid;
  grid-template-columns: minmax(340px, max-content) minmax(0, 1fr) max-content;
  align-items: center;
  gap: 14px;
  padding: 0 16px 14px;
}

.novice-primary-actions,
.novice-secondary-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.novice-secondary-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  justify-self: end;
}

.novice-actions button {
  min-height: 34px;
  padding: 0 12px;
  color: #fff;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  cursor: pointer;
}

.novice-primary-actions button {
  flex: 0 1 198px;
  min-width: 172px;
  min-height: 50px;
  font-size: 17px;
}

.novice-primary {
  color: var(--novice-ink) !important;
  background: linear-gradient(135deg, #f0ff9b 0%, var(--novice-acid) 46%, #74f7ff 118%) !important;
  border-color: var(--novice-acid) !important;
  box-shadow: 0 0 28px rgba(200, 255, 0, 0.34);
}

.novice-reference-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  align-self: end;
  justify-content: flex-start;
  min-width: 0;
  max-width: 100%;
  max-height: 54px;
  overflow: hidden;
  gap: 8px;
  padding: 4px 6px 0;
}

.novice-reference-list:empty {
  display: none;
}

.novice-reference-card {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  min-width: 0;
  max-height: 50px;
  padding: 8px 8px 0 0;
  line-height: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.novice-reference-card img {
  display: block;
  width: auto;
  height: auto;
  max-width: 68px;
  max-height: 42px;
  object-fit: contain;
  border-radius: 5px;
}

.novice-reference-card button {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  place-items: center;
  color: var(--novice-ink);
  font-size: 13px;
  font-weight: 950;
  background: var(--novice-acid);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
  cursor: pointer;
}

.novice-secondary[aria-pressed="true"],
#noviceTogglePromptToolBtn[aria-pressed="true"] {
  color: var(--novice-ink);
  background: var(--novice-acid);
  border-color: var(--novice-acid);
}

.novice-prompt-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #050607;
  border: 0;
}

.novice-body.prompt-tool-open .novice-form {
  padding: 12px 16px 8px;
}

.novice-body.prompt-tool-open .novice-field {
  gap: 5px;
  font-size: 13px;
}

.novice-body.prompt-tool-open .novice-field textarea {
  height: clamp(138px, 22svh, 170px);
  min-height: 138px;
  max-height: 170px;
  padding: 12px;
}

.novice-body.prompt-tool-open .novice-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.novice-body.prompt-tool-open .novice-field select {
  min-height: 38px;
  font-size: 15px;
}

.novice-body.prompt-tool-open .novice-image-preview {
  margin-bottom: 10px;
}

.novice-body.prompt-tool-open .novice-actions {
  grid-template-columns: 1fr;
  gap: 8px;
}

.novice-body.prompt-tool-open .novice-primary-actions {
  flex: 1 1 100%;
}

.novice-body.prompt-tool-open .novice-primary-actions button {
  flex: 1 1 190px;
  min-width: 0;
  min-height: 44px;
}

.novice-body.prompt-tool-open .novice-secondary-actions {
  justify-content: flex-start;
}

.novice-body.prompt-tool-open .novice-secondary-actions button {
  min-height: 30px;
  font-size: 12px;
}

.novice-body.prompt-tool-open .novice-reference-list {
  max-height: 46px;
  padding: 0;
}

.novice-body.prompt-tool-open .novice-reference-card {
  max-height: 42px;
  padding: 7px 7px 0 0;
}

.novice-body.prompt-tool-open .novice-reference-card img {
  max-width: 58px;
  max-height: 35px;
}

@media (max-width: 980px) {
  .novice-body,
  .novice-page {
    overflow: auto;
  }

  .novice-workspace,
  .novice-body.prompt-tool-open .novice-workspace {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: calc(100svh - 70px);
    overflow: visible;
  }

  .novice-panel {
    min-height: min(760px, calc(100svh - 110px));
  }

  .novice-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .novice-actions {
    grid-template-columns: 1fr;
  }

  .novice-secondary-actions {
    justify-content: flex-start;
    justify-self: stretch;
  }
}