:root { font-family: Inter, system-ui, sans-serif; color: #172033; background: #f4f6f9; }
* { box-sizing: border-box; }
body { margin: 0; }
header { padding: 22px 32px; background: #172033; color: white; }
header h1, header p { margin: 0; }
header p { opacity: .72; margin-top: 5px; }
main { padding: 22px; max-width: 1600px; margin: auto; }
.card { background: white; border: 1px solid #e3e7ee; border-radius: 14px; box-shadow: 0 8px 24px rgba(23,32,51,.06); }
.composer { padding: 18px; margin-bottom: 18px; }
h2 { margin: 0 0 12px; font-size: 18px; }
form { display: grid; grid-template-columns: 180px 1fr auto; gap: 10px; }
input, textarea { border: 1px solid #ccd3df; border-radius: 9px; padding: 11px; font: inherit; }
textarea { min-height: 46px; resize: vertical; }
button { border: 0; border-radius: 9px; padding: 0 18px; background: #3157d5; color: white; font-weight: 700; cursor: pointer; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; }
.map-card { min-height: 700px; position: relative; overflow: hidden; }
.map-title { display: flex; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e8ebf0; }
.map-title h2 { margin: 0; }.map-title span { color: #6b7280; font-size: 13px; }
#cy { position: absolute; inset: 58px 34px 34px 50px; z-index: 2; }
.cross-v, .cross-h { position: absolute; background: #d8dde7; z-index: 1; }
.cross-v { width: 1px; top: 58px; bottom: 34px; left: 50%; }.cross-h { height: 1px; left: 50px; right: 34px; top: 50%; }
.axis { position: absolute; z-index: 3; font-size: 11px; font-weight: 800; color: #64748b; }
.axis-y.top { top: 66px; left: 50%; transform: translateX(-50%); }.axis-y.bottom { bottom: 12px; left: 50%; transform: translateX(-50%); }
.axis-x.left { left: 7px; top: 50%; transform: translateY(-50%) rotate(-90deg); }.axis-x.right { right: 3px; top: 50%; transform: translateY(-50%) rotate(90deg); }
.detail { padding: 20px; max-height: 700px; overflow: auto; }
.muted { color: #7b8494; }.badge { display: inline-block; background: #eef2ff; color: #3345a7; padding: 4px 8px; border-radius: 999px; font-size: 12px; }
.scores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.scores div { background: #f2f5fa; border-radius: 10px; padding: 12px; }.scores span { display: block; color: #6b7280; font-size: 12px; }.scores strong { font-size: 25px; }
.factors { list-style: none; padding: 0; }.factors li { display: flex; justify-content: space-between; border-bottom: 1px solid #edf0f4; padding: 7px 0; }
.evidence { border-left: 3px solid #c7d2fe; padding: 8px 10px; margin: 9px 0; background: #f8f9fc; }.evidence p { margin: 5px 0; }.evidence small { color: #8a93a3; }
.messages { padding: 20px; margin-top: 18px; }.messages article { border-top: 1px solid #edf0f4; padding: 12px 0; }.messages time { color: #8a93a3; font-size: 12px; margin-left: 8px; }.messages p { margin: 6px 0 0; }
@media (max-width: 950px) { .workspace { grid-template-columns: 1fr; } form { grid-template-columns: 1fr; } button { min-height: 44px; } }

/* Map readability improvements */
#cy { cursor: grab; }
#cy:active { cursor: grabbing; }
.detail h3 { margin-top: 20px; margin-bottom: 8px; font-size: 14px; }

/* Timeline controls */
.composer form { grid-template-columns: 150px 210px minmax(260px, 1fr) auto; }
.timeline-panel {
  position: absolute;
  z-index: 4;
  top: 59px;
  left: 50px;
  right: 34px;
  padding: 10px 14px 8px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid #e8ebf0;
  backdrop-filter: blur(5px);
}
.timeline-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.timeline-heading strong { font-size: 13px; }
.timeline-heading time { color: #334155; font-weight: 700; font-size: 13px; text-align: center; }
.timeline-panel input[type="range"] { width: 100%; padding: 0; margin: 8px 0 2px; accent-color: #3157d5; }
.timeline-range { display: flex; justify-content: space-between; color: #8a93a3; font-size: 10px; }
.secondary-button { background: #eef2ff; color: #3345a7; min-height: 30px; padding: 0 10px; font-size: 12px; }
#cy { inset: 145px 34px 34px 50px; }
.cross-v { top: 145px; }
.axis-y.top { top: 151px; }
.detail-at { color: #64748b; font-size: 12px; margin-top: -6px; }
.evidence-head { display: flex; justify-content: space-between; gap: 10px; }
.evidence-head time { color: #8a93a3; font-size: 11px; white-space: nowrap; }

@media (max-width: 950px) {
  .composer form { grid-template-columns: 1fr; }
  .timeline-heading { grid-template-columns: 1fr auto; }
  .timeline-heading time { grid-column: 1 / -1; grid-row: 2; text-align: left; }
}

.scoring-version {
  margin-top: 10px;
  color: #64748b;
  font-size: 12px;
}

.scores {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


.conversation-state { margin-bottom: 18px; }
.state-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.state-heading h2 { margin:0; }
.state-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:14px; }
.state-columns h3 { margin:0 0 8px; font-size:14px; }
.state-columns ul { margin:0; padding-left:20px; }
.state-columns li { margin:4px 0; font-size:13px; }
@media (max-width: 900px) { .state-columns { grid-template-columns:1fr; } }

/* Authentication and project administration */
.app-header { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.header-user { display:flex; align-items:center; gap:12px; font-size:13px; }
.header-user form { display:block; }
.header-button { min-height:34px; padding:0 12px; background:#334155; border:1px solid rgba(255,255,255,.25); }
.header-link { color:#dbeafe; text-decoration:none; font-weight:700; }
.auth-page { min-height:100vh; display:grid; place-items:center; background:#eef2f7; padding:20px; }
.auth-card { width:min(420px,100%); padding:30px; }
.auth-card h1 { margin:0; }
.login-form { display:grid; grid-template-columns:1fr; gap:14px; margin-top:22px; }
.login-form label { display:grid; gap:6px; font-size:13px; font-weight:700; }
.login-form button { min-height:44px; }
.login-note { margin-top:18px; color:#7b8494; font-size:12px; }
.error-message { color:#b42318; background:#fff1f0; border:1px solid #fecaca; border-radius:8px; padding:10px; }
.project-section { padding:22px; margin-bottom:18px; }
.project-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:18px; }
.project-card { color:inherit; text-decoration:none; border:1px solid #e3e7ee; border-radius:12px; padding:18px; transition:.15s; }
.project-card:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(23,32,51,.09); border-color:#a5b4fc; }
.project-card h3 { margin:0 0 8px; }
.project-card p { min-height:42px; color:#64748b; }
.project-card span { font-size:12px; color:#475569; font-weight:700; }
.project-form { display:grid; grid-template-columns:240px 1fr auto; gap:10px; }
@media (max-width:800px) { .app-header { align-items:flex-start; flex-direction:column; } .header-user { flex-wrap:wrap; } .project-form { grid-template-columns:1fr; } }

/* v0.5 AI debug tabs */
.detail-tabs { position: sticky; top: -20px; z-index: 10; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: -20px -20px 18px; padding: 10px 12px; background: rgba(255,255,255,.97); border-bottom: 1px solid #e5e7eb; backdrop-filter: blur(6px); }
.detail-tab { min-height: 34px; padding: 0 8px; color: #64748b; background: #f1f5f9; font-size: 12px; }
.detail-tab.active { color: white; background: #3157d5; }
.ai-status { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px; border-radius:10px; margin-bottom:14px; }
.ai-status.success { background:#ecfdf3; color:#067647; }
.ai-status.warning { background:#fff7ed; color:#b54708; }
.meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 18px; }
.meta-grid div { background:#f5f7fb; border-radius:9px; padding:10px; }
.meta-grid dt { color:#64748b; font-size:11px; }
.meta-grid dd { margin:4px 0 0; font-size:15px; font-weight:800; }
.interpretation { padding:12px; border-left:4px solid #818cf8; background:#f8f9ff; border-radius:4px 9px 9px 4px; line-height:1.7; }
.semantic-row { margin:10px 0; }
.semantic-head { display:flex; justify-content:space-between; gap:12px; font-size:12px; }
.semantic-track { height:8px; margin-top:5px; background:#e7ebf2; border-radius:999px; overflow:hidden; }
.semantic-track i { display:block; height:100%; background:#6366f1; border-radius:999px; }
details { margin:12px 0; border:1px solid #e3e7ee; border-radius:9px; overflow:hidden; }
details summary { cursor:pointer; padding:10px 12px; background:#f8fafc; font-weight:700; font-size:12px; }
.prompt-view, .json-view { margin:0; padding:12px; max-height:360px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; background:#111827; color:#e5e7eb; font:11px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.debug-error { padding:10px 12px; margin-bottom:14px; color:#b42318; background:#fff1f0; border:1px solid #fecaca; border-radius:9px; }
.debug-error p { margin:6px 0 0; }
.history-list { display:grid; gap:10px; }
.history-item { display:grid; grid-template-columns:110px 1fr; gap:10px; padding:10px 0; border-bottom:1px solid #edf0f4; }
.history-item time { color:#64748b; font-size:11px; }
.history-item div { display:flex; justify-content:space-between; gap:8px; }
.history-item span { color:#64748b; font-size:11px; }
.history-item p { grid-column:2; margin:0; font-size:12px; }
.table-scroll { overflow:auto; }
.score-table { width:100%; border-collapse:collapse; font-size:11px; }
.score-table th, .score-table td { padding:8px; text-align:right; border-bottom:1px solid #e5e7eb; }
.score-table th:first-child, .score-table td:first-child { text-align:left; white-space:nowrap; }

/* v0.6 project import */
.project-card .pending-label { display:block; margin-top:7px; color:#b54708; }
.project-create-form { display:grid; grid-template-columns:1fr; gap:16px; max-width:920px; margin-top:18px; }
.project-create-form > label { display:grid; gap:6px; font-size:13px; font-weight:700; }
.project-create-form input[type="text"], .project-create-form textarea { width:100%; }
.import-fieldset { margin:0; padding:16px; border:1px solid #dce2eb; border-radius:11px; }
.import-fieldset legend { padding:0 7px; font-size:13px; font-weight:800; }
.import-source-options { display:flex; flex-wrap:wrap; gap:18px; }
.import-source-options label, .analyze-option { display:flex !important; grid-template-columns:auto 1fr !important; align-items:center; gap:8px !important; font-weight:600 !important; }
.import-source-options input, .analyze-option input { width:auto; }
.import-panel { margin-top:16px; padding-top:16px; border-top:1px solid #e7ebf1; }
.import-panel[hidden] { display:none; }
.import-panel label { display:grid; gap:7px; font-size:13px; font-weight:700; }
.import-panel textarea { min-height:190px; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:12px; }
.input-help { margin:7px 0 0; color:#64748b; font-size:12px; line-height:1.6; }
.input-help code { padding:2px 5px; border-radius:4px; background:#eef2f7; }
.warning-text { margin-top:-10px; color:#9a6700; }
.create-project-button { justify-self:start; min-height:44px; }
.import-errors { margin-top:14px; padding:13px 16px; color:#b42318; background:#fff1f0; border:1px solid #fecaca; border-radius:9px; }
.import-errors ul { margin:8px 0 0; padding-left:20px; }
.import-result { display:flex; gap:12px; align-items:center; padding:13px 18px; margin-bottom:18px; color:#067647; background:#ecfdf3; border-color:#abefc6; }
.pending-analysis { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 18px; margin-bottom:18px; }
.pending-analysis h2, .pending-analysis p { margin:0; }
.pending-analysis p { margin-top:5px; color:#64748b; font-size:13px; }
.pending-analysis form { display:flex; grid-template-columns:none; gap:8px; }
.pending-analysis select { min-width:80px; border:1px solid #ccd3df; border-radius:9px; padding:8px; }
.pending-analysis button { min-height:38px; }
@media (max-width:700px) { .pending-analysis { align-items:stretch; flex-direction:column; } .pending-analysis form { width:100%; } .pending-analysis button { flex:1; } }


.analysis-indicator[hidden] {
  display: none;
}

.analysis-indicator {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
}

.analysis-indicator-card {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(440px, 100%);
  padding: 22px 24px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.26);
}

.analysis-indicator-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.05rem;
  color: #0f172a;
}

.analysis-indicator-card p {
  margin: 0;
  color: #64748b;
  line-height: 1.55;
}

.analysis-spinner {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 4px solid #dbeafe;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: analysis-spin 0.85s linear infinite;
}

body.analysis-running {
  overflow: hidden;
  cursor: progress;
}

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

@media (prefers-reduced-motion: reduce) {
  .analysis-spinner {
    animation-duration: 1.8s;
  }
}