/* ธีมสว่าง (Light theme) — ใช้ร่วมกันทั้ง app.html และ options.html */
* { box-sizing: border-box; }
body {
  font-family: -apple-system, "Segoe UI", "Noto Sans Thai", Tahoma, sans-serif;
  background: #f7f8fa;
  color: #1f2430;
  margin: 0;
  padding: 24px;
}
.wrap { max-width: 1100px; margin: 0 auto; }
h1 { font-size: 22px; margin-bottom: 4px; color: #111827; }
h2 { font-size: 16px; margin: 0 0 10px; color: #1d4ed8; }
.note { color: #5b6472; font-size: 13px; line-height: 1.6; }
.note.small { font-size: 12px; margin-top: 24px; }
.card {
  background: #ffffff;
  border: 1px solid #e2e6ec;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
label { display: block; font-size: 12px; color: #47505e; margin: 8px 0 4px; }
input[type="text"], input[type="password"], input[type="number"], select, textarea {
  width: 100%;
  background: #ffffff;
  border: 1px solid #cdd4de;
  border-radius: 6px;
  color: #1f2430;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.row { display: flex; gap: 12px; }
.row > div { flex: 1; }
button.primary {
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
}
button.primary:hover { background: #1d4ed8; }
button.primary:disabled { background: #c3cad4; cursor: not-allowed; }
button.secondary {
  background: #ffffff;
  border: 1px solid #cdd4de;
  color: #1f2430;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
}
button.secondary:hover { background: #f0f3f7; }
#save-status { margin-left: 10px; color: #15803d; font-size: 13px; }

/* --- app.html specific --- */
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.topbar a { color: #2563eb; font-size: 13px; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
textarea#prompt-input { min-height: 90px; resize: vertical; }
.cost-badge {
  display: inline-block;
  background: #fff8e6;
  border: 1px solid #f3d9a4;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 13px;
  color: #92600a;
}
.phase-title {
  margin: 22px 0 10px;
  font-size: 15px;
  color: #374151;
  border-left: 3px solid #2563eb;
  padding-left: 10px;
  font-weight: 600;
}
.grid4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.model-card {
  background: #ffffff;
  border: 1px solid #e2e6ec;
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 60px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.model-card h3 { margin: 0 0 6px; font-size: 13px; color: #1d4ed8; display: flex; justify-content: space-between; }
.model-card .cost { color: #92600a; font-size: 11px; font-weight: normal; }
.model-card pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 12px;
  line-height: 1.5;
  color: #333c4a;
  margin: 0;
  font-family: inherit;
}
.model-card.error { border-color: #f0b4b4; background: #fff5f5; }
.model-card.error pre { color: #b42318; }
.model-card.loading pre { color: #98a2b3; font-style: italic; }
.final-card {
  background: #f2fbf5;
  border: 1px solid #a6dfb8;
  border-radius: 10px;
  padding: 16px;
  margin-top: 10px;
}
.final-card h3 { color: #15803d; margin-top: 0; }
.final-card pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 12px;
  line-height: 1.5;
  color: #1f2430;
  margin: 0;
  font-family: inherit;
}

/* --- attachments --- */
#attach-list { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #cdd4de;
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 12px;
  color: #333c4a;
  max-width: 100%;
}
.attach-chip .who { color: #2563eb; font-size: 11px; }
.attach-chip .state-uploading { color: #b45309; font-size: 11px; }
.attach-chip .state-ready { color: #15803d; font-size: 11px; }
.attach-chip .state-error { color: #b42318; font-size: 11px; }
.attach-chip button {
  background: none; border: none; color: #667085;
  cursor: pointer; font-size: 13px; padding: 0 2px;
}
.attach-chip button:hover { color: #b42318; }

/* --- external links in options --- */
a.ext-link {
  color: #2563eb;
  font-size: 12px;
  font-weight: normal;
  text-decoration: none;
  margin-left: 8px;
}
a.ext-link:hover { text-decoration: underline; }

/* --- web-only additions --- */
.topbar-right { display: flex; gap: 10px; align-items: center; }
.lang-switch { display: inline-flex; border: 1px solid #cdd4de; border-radius: 8px; overflow: hidden; }
.lang-btn {
  background: #ffffff; border: none; padding: 6px 12px; font-size: 13px;
  cursor: pointer; color: #47505e; font-family: inherit;
}
.lang-btn.active { background: #2563eb; color: #ffffff; font-weight: 600; }
.note.warn { color: #b45309; margin-top: 8px; }
#settings-panel { margin-bottom: 20px; }
.settings-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }