:root {
  --navy: #1a2e3b;
  --teal: #008b8b;
  --orange: #e87722;
  --paper: #f7f9fa;
  --line: #d9e0e4;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.banner {
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.banner strong {
  color: var(--orange);
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

h1,
h2 {
  color: var(--navy);
  margin: 0.5rem 0 0.25rem;
}

h3 {
  color: var(--teal);
  margin: 1.5rem 0 0.25rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.muted {
  color: #5b6b75;
  font-size: 0.9rem;
}

/* Form */

label {
  display: block;
  margin: 1rem 0 0.25rem;
  font-weight: 600;
  font-size: 0.9rem;
}

input,
select,
textarea {
  width: 100%;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: inherit;
  font: inherit;
  line-height: 1.5;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

button {
  margin-top: 1.25rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--navy);
  border-radius: 6px;
  background: #fff;
  color: var(--navy);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button.primary {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

button:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Secondary action that should read as a link, not a button — "Log out". */
button.link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: 400;
  text-decoration: underline;
}

.error {
  margin-top: 1rem;
  padding: 0.75rem;
  border-left: 4px solid var(--orange);
  background: #fff3e9;
  font-size: 0.9rem;
  white-space: pre-wrap;
}

/* Chat */

.session-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

#messages {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 0;
}

.msg {
  max-width: 90%;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg.you {
  align-self: flex-end;
  background: var(--navy);
  color: #fff;
}

.msg.tutor {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
}

.msg.thinking {
  color: #5b6b75;
}

/* Read-aloud control, one per tutor bubble */

.msg-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  margin-top: 0.5rem;
}

.speak-btn {
  margin-top: 0;
  padding: 0.15rem 0.5rem;
  border-color: var(--line);
  border-radius: 4px;
  color: var(--teal);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
}

.speak-btn:hover:not(:disabled) {
  border-color: var(--teal);
}

.speak-error {
  color: #a8460d;
  font-size: 0.8rem;
}

.composer {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.composer button {
  margin-top: 0;
  white-space: nowrap;
}

/* "End session" lives at the end of the chat screen, matching where "Start
   another session" sits on the summary screen. It is sticky rather than in
   plain flow because app.js scrolls the newest message's bottom to the viewport
   bottom, which leaves anything below it - composer included - about 120px off
   screen after every tutor reply. Sticky keeps the button reachable without
   moving it out of document order, and it settles into the page at the end
   rather than floating permanently like position: fixed would.

   NOT YET VERIFIED ON MOBILE SAFARI. Sticky bottom positioning is measured
   working in Chrome at phone width; iOS behaviour with the on-screen keyboard
   raised is still to be confirmed on a real device. */
.session-footer {
  position: sticky;
  bottom: 0;
  padding: 0.75rem 0;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.session-footer button {
  margin-top: 0;
}

/* Summary */

.headline {
  padding: 0.9rem;
  border-left: 4px solid var(--orange);
  background: #fff;
  font-size: 1.05rem;
}

#summary-screen ul {
  margin: 0;
  padding-left: 1.25rem;
}

#summary-screen li {
  margin-bottom: 0.4rem;
}

#s-parent {
  padding: 0.9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}