/* Responsive starter UI adapted from the upstream stylesheet; see LICENSE and UPSTREAM.md. */
:root {
  color-scheme: light;
  --ink: #18323d;
  --muted: #667b83;
  --paper: #f3f7f5;
  --panel: #ffffff;
  --line: #dce7e2;
  --green: #176b58;
  --green-dark: #115444;
  --mint: #d9f2e8;
  --shadow: 0 18px 55px rgba(16, 43, 57, .08);
  /* The stage column is fixed so the canvas keeps its size; panel padding (2 x 19px) + borders leave a square frame. */
  --stage-width: 520px;
  --work-height: 480px;
  --run: #4cbf56;
  --run-dark: #45993d;
  --stop: #ec5959;
  --stop-dark: #d14545;
  font-family: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--paper); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 90% 0%, rgba(190, 231, 213, .48), transparent 34rem),
    var(--paper);
}
button, select, textarea { font: inherit; }
button, select { min-height: 44px; }
button:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid #e19a3d;
  outline-offset: 3px;
}

.app-shell {
  display: block;
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: 46px 0 24px;
}
.hero {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 27px;
}
.brand-mark {
  display: block;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 8px 14px rgba(74, 26, 140, .25));
}
.brand-mark img { display: block; width: 100%; height: 100%; }
.hero-copy { min-width: 0; }
.eyebrow, .panel-kicker {
  margin: 0 0 7px;
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}
h1 { margin: 0; font-size: clamp(26px, 4vw, 36px); letter-spacing: -.04em; line-height: 1.15; }
.intro { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.runtime-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 9px 13px;
  border: 1px solid #cce7db;
  border-radius: 999px;
  color: var(--green-dark);
  background: rgba(255, 255, 255, .7);
  font-size: 12px;
  font-weight: 700;
}
.runtime-badge span, .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #36a77e;
  box-shadow: 0 0 0 3px rgba(54, 167, 126, .13);
}

.controls, .workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stage-width);
  gap: 16px;
}
.controls { margin-bottom: 14px; }
.controls-group { display: grid; gap: 10px; min-width: 0; }
.controls-editor { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .9fr); }
.controls-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.controls button, .controls select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: var(--panel);
  font-size: 13px;
  font-weight: 700;
}
.controls button { cursor: pointer; transition: background .15s ease, transform .15s ease, border-color .15s ease; }
.controls button:hover { border-color: #a7c9bb; background: #f8fcfa; }
.controls button:active { transform: translateY(1px); }
#logo-run { border-color: var(--run); color: #fff; background: var(--run); }
#logo-run:hover { border-color: var(--run-dark); background: var(--run-dark); }
#logo-stop { border-color: var(--stop); color: #fff; background: var(--stop); }
#logo-stop:hover { border-color: var(--stop-dark); background: var(--stop-dark); }
.controls select { padding: 0 34px 0 12px; cursor: pointer; }

.workbench { align-items: stretch; }
.panel {
  min-width: 0;
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-kicker { margin-bottom: 4px; font-size: 9px; }
h2 { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.key-hint, .canvas-caption { color: var(--muted); font-size: 11px; white-space: nowrap; }
kbd {
  display: inline-block;
  min-width: 19px;
  padding: 2px 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: #526970;
  background: #f6f9f7;
  text-align: center;
  font: 10px ui-monospace, SFMono-Regular, Menlo, monospace;
}
#logo-editor {
  display: block;
  width: 100%;
  min-height: 380px;
  height: var(--work-height);
  padding: 17px;
  resize: vertical;
  border: 1px solid #d7e4df;
  border-radius: 11px;
  outline: none;
  color: #213e45;
  background: #fbfdfc;
  font: 14px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  tab-size: 2;
}
#logo-editor:focus { border-color: #6bab91; box-shadow: 0 0 0 3px rgba(54, 167, 126, .12); }
.view-tabs {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f3f8f5;
}
.view-tabs button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.view-tabs button[aria-selected="true"] { color: #fff; background: var(--green); }
.view-tabs button:not([aria-selected="true"]):hover { color: var(--ink); }
.view-tabs button:disabled { opacity: .45; cursor: not-allowed; }
.editor-view[hidden] { display: none; }
.blocks-workspace {
  width: 100%;
  height: var(--work-height);
  overflow: hidden;
  border: 1px solid #d7e4df;
  border-radius: 11px;
}
.panel-help .key-hint { margin-left: 4px; }

.chat-view {
  display: flex;
  flex-direction: column;
  height: var(--work-height);
  overflow: hidden;
  border: 1px solid #d7e4df;
  border-radius: 11px;
  background: #fbfdfc;
}
.chat-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.chat-model-status {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-button, .chat-send, .chat-chip {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.chat-button, .chat-send { flex: 0 0 auto; white-space: nowrap; }
.chat-button:hover:not(:disabled), .chat-chip:hover { border-color: #a7c9bb; background: #f8fcfa; }
.chat-send { border-color: var(--green); color: #fff; background: var(--green); }
.chat-send.is-stop { border-color: #7e3f30; background: #7e3f30; }
.chat-button:disabled, .chat-send:disabled { opacity: .45; cursor: not-allowed; }
.chat-progress {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
.chat-progress[hidden] { display: none; }
.chat-progress progress { width: 100%; height: 8px; accent-color: var(--green); }
.chat-progress span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-session {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: #f8fbf9;
}
.chat-gauge { display: grid; flex: 1 1 auto; gap: 4px; min-width: 0; }
.chat-gauge-text {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-gauge.is-over .chat-gauge-text { color: #8a5a14; }
.chat-gauge-bar {
  display: flex;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7efeb;
}
.chat-gauge-bar span { flex: 0 0 auto; height: 100%; transition: width .2s ease; }
.chat-gauge-bar .seg-system { background: #9aabb1; }
.chat-gauge-bar .seg-history { background: var(--green); }
.chat-gauge-bar .seg-program { background: #4c97ff; }
.chat-gauge-bar .seg-output {
  background: repeating-linear-gradient(135deg, #c9d8d1 0 3px, #e7efeb 3px 6px);
}
.chat-log {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 12px;
  overflow-y: auto;
}
.chat-msg {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-msg.user { align-self: flex-end; color: #fff; background: var(--green); }
.chat-msg.assistant {
  align-self: flex-start;
  border: 1px solid var(--line);
  color: #213e45;
  background: #fff;
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.chat-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.chat-note.warn { color: #8a5a14; }
.chat-note.error { color: #9b2c1f; }
.chat-actions, .chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-vision {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  border: 1px dashed #c9b6ec;
  border-radius: 10px;
  background: #faf7ff;
}
.chat-vision img { flex: 0 0 auto; width: 72px; height: 96px; border-radius: 6px; }
.chat-vision p { margin: 0; color: #4a2f7a; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
.chat-chip { border-radius: 999px; }
.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.chat-form textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  max-height: 120px;
  padding: 10px 12px;
  resize: vertical;
  border: 1px solid #d7e4df;
  border-radius: 9px;
  color: var(--ink);
  background: #fbfdfc;
  font-size: 13px;
  line-height: 1.5;
}
.chat-form textarea:disabled { opacity: .6; }
.chat-form .chat-send { min-height: 44px; padding: 0 16px; }

.settings-dialog {
  width: min(680px, calc(100% - 32px));
  max-height: calc(100vh - 48px);
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.settings-dialog::backdrop { background: rgba(16, 43, 57, .35); }
.settings-dialog h2 { margin-bottom: 16px; }
.settings-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px 14px;
  font-size: 13px;
}
.settings-grid select, .settings-grid input[type="number"], .settings-grid input[type="text"], .settings-grid input[type="password"] {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
}
.settings-model-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
}
.model-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.model-option {
  display: grid;
  grid-template-columns: auto max-content minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
  padding: 7px 12px;
  border-top: 1px solid #edf3f0;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.model-option:first-child { border-top: 0; }
.model-option:hover { background: #f8fcfa; }
.model-option:has(input:checked) { background: #eef7f2; }
.model-option input { margin: 0; accent-color: var(--green); }
.model-name { color: var(--ink); font-size: 13px; }
.model-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-option.is-recommended .model-name { font-size: 14px; font-weight: 800; }
.model-option.is-recommended .model-meta { color: #40565e; }
.model-option.is-recommended + .model-option:not(.is-recommended) { border-top: 2px solid var(--line); }
.model-badge {
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--green);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.settings-checks { display: grid; gap: 6px; }
.settings-checks label { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.settings-checks input { margin-top: 3px; }
.settings-inline-button { justify-self: start; }
.settings-prompt-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 6px;
  font-size: 13px;
  font-weight: 700;
}
#setting-system-prompt, #setting-vision-prompt {
  width: 100%;
  padding: 10px 12px;
  resize: vertical;
  border: 1px solid #d7e4df;
  border-radius: 9px;
  background: #fbfdfc;
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.settings-grid input[type="text"], .settings-grid input[type="password"] {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.settings-grid input:disabled { opacity: .55; }
/* A label and its field that are shown or hidden together while keeping the grid's two columns. */
.settings-row { display: contents; }
.settings-row[hidden] { display: none; }
.settings-provider { margin-bottom: 14px; }
.settings-remote { margin-bottom: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdfc; }
.settings-common { margin-top: 14px; }
.settings-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.settings-field input[type="text"], .settings-field input[type="password"] { flex: 1 1 220px; }
.settings-check { display: inline-flex; align-items: center; gap: 6px; }
.settings-test-result { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.settings-test-result.is-ok { color: var(--green); font-weight: 700; }
.settings-test-result.is-error { color: #b23a3a; }
.settings-note { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.settings-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.canvas-frame {
  display: grid;
  min-height: 380px;
  height: var(--work-height);
  place-items: center;
  overflow: hidden;
  border: 1px solid #d7e4df;
  border-radius: 11px;
  background:
    linear-gradient(45deg, #f4f8f6 25%, transparent 25%, transparent 75%, #f4f8f6 75%),
    linear-gradient(45deg, #f4f8f6 25%, transparent 25%, transparent 75%, #f4f8f6 75%),
    #fff;
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
}
#logo-graphics {
  display: block;
  width: min(100%, 560px);
  height: auto;
  max-height: 100%;
  border: 0;
  background: #fff;
}
.panel-help { margin: 10px 1px 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.status-panel {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 48px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #d5e9df;
  border-radius: 11px;
  color: #2f5e4e;
  background: #eaf6ef;
  font-size: 12px;
  line-height: 1.55;
}
.status-dot { flex: 0 0 8px; margin-top: 4px; }
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 11px;
}
.site-footer p { margin: 0; }
.site-footer a { display: inline-flex; align-items: center; gap: 6px; color: #405c64; text-decoration: none; }
.site-footer a:hover { color: var(--green); text-decoration: underline; }
.site-footer img { padding: 2px; border-radius: 50%; background: #18323d; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1100px) {
  :root { --stage-width: 440px; --work-height: 400px; }
}
@media (max-width: 850px) {
  .app-shell { width: min(700px, calc(100% - 32px)); padding-top: 30px; }
  .controls, .workbench { grid-template-columns: 1fr; }
  .controls { gap: 10px; }
  .blocks-workspace, .chat-view { height: 460px; }
  #logo-editor, .canvas-frame { height: auto; min-height: 0; }
  #logo-editor { min-height: 330px; }
  .canvas-frame { aspect-ratio: 1; }
  #logo-graphics { width: 100%; height: auto; }
}
@media (max-width: 600px) {
  .app-shell { width: calc(100% - 24px); padding-top: 22px; }
  .hero { align-items: flex-start; gap: 12px; margin-bottom: 20px; }
  .brand-mark { flex-basis: 44px; width: 44px; height: 44px; }
  .runtime-badge { display: none; }
  .intro { font-size: 12px; }
  .controls, .controls-group { gap: 8px; }
  .controls button, .controls select { min-width: 0; min-height: 43px; padding-right: 8px; padding-left: 8px; font-size: 11px; }
  .panel { padding: 14px; border-radius: 14px; }
  .panel-heading { align-items: flex-start; }
  .key-hint { white-space: normal; line-height: 1.7; }
  .view-tabs button { padding: 0 10px; }
  .settings-dialog { padding: 16px; }
  .settings-grid { grid-template-columns: 1fr; gap: 6px; }
  .model-option { grid-template-columns: auto minmax(0, 1fr) auto; }
  .model-option input { grid-row: 1 / span 2; }
  .model-badge { grid-column: 3; grid-row: 1; }
  .model-meta { grid-column: 2 / -1; grid-row: 2; white-space: normal; }
  #logo-editor { min-height: 300px; padding: 13px; font-size: 13px; }
  .site-footer { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}