Initial commit

frontend/src/styles.css

@@ -0,0 +1,141 @@
+:root {
+  font-family: Inter, system-ui, sans-serif;
+  color: #14213d;
+  background: #f5f7fb;
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; }
+button, input, select {
+  font: inherit;
+  border-radius: 12px;
+  border: 1px solid #cfd7e6;
+  padding: 0.8rem 1rem;
+}
+button {
+  background: #2563eb;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+button:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.layout {
+  display: grid;
+  grid-template-columns: 360px 1fr;
+  min-height: 100vh;
+  gap: 1rem;
+  padding: 1rem;
+}
+.card {
+  background: white;
+  border-radius: 24px;
+  box-shadow: 0 10px 30px rgba(20,33,61,0.08);
+  padding: 1rem;
+}
+.sidebar, .main { display: flex; flex-direction: column; gap: 1rem; }
+.stack { display: flex; flex-direction: column; gap: 0.75rem; }
+.small-gap { gap: 0.5rem; }
+.hero { display: flex; align-items: center; gap: 1rem; }
+.messages {
+  flex: 1;
+  min-height: 360px;
+  overflow: auto;
+  background: #f8fafc;
+  border-radius: 20px;
+  padding: 1rem;
+}
+.message {
+  max-width: 80%;
+  margin-bottom: 0.75rem;
+  padding: 0.9rem 1rem;
+  border-radius: 18px;
+}
+.message.user {
+  margin-left: auto;
+  background: #dbeafe;
+}
+.message.assistant {
+  background: #eaf7e7;
+}
+.message p { margin: 0.35rem 0 0; white-space: pre-wrap; }
+.composer {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: 0.75rem;
+}
+.assessment {
+  background: #fff7ed;
+  padding: 1rem;
+  border-radius: 18px;
+}
+.progress-card {
+  border: 1px solid #e5e7eb;
+  border-radius: 16px;
+  padding: 0.75rem;
+}
+.progress-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.4rem;
+}
+.progress-bar {
+  height: 10px;
+  background: #e5e7eb;
+  border-radius: 999px;
+  overflow: hidden;
+  margin-bottom: 0.35rem;
+}
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #60a5fa, #2563eb);
+}
+.muted { color: #64748b; }
+.avatar-shell { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
+.avatar {
+  width: 144px;
+  height: 144px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 30% 30%, #fde68a, #f59e0b);
+  display: grid;
+  place-items: center;
+  box-shadow: 0 10px 20px rgba(245, 158, 11, 0.28);
+}
+.avatar.speaking { animation: pulse 0.7s infinite alternate; }
+.face { width: 90px; }
+.eyes {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1.2rem;
+}
+.eyes span {
+  width: 14px;
+  height: 14px;
+  background: #1f2937;
+  border-radius: 50%;
+}
+.mouth {
+  width: 44px;
+  height: 10px;
+  background: #7c2d12;
+  border-radius: 999px;
+  margin: 0 auto;
+  transition: all 0.15s ease;
+}
+.mouth-speaking {
+  width: 34px;
+  height: 24px;
+  border-radius: 0 0 999px 999px;
+}
+.avatar-caption { font-weight: 700; }
+
+@keyframes pulse {
+  from { transform: scale(1); }
+  to { transform: scale(1.05); }
+}
+
+@media (max-width: 920px) {
+  .layout { grid-template-columns: 1fr; }
+  .composer { grid-template-columns: 1fr; }
+}