/* Colours come from the MDC Iowa logo: purple, green, blue, navy, red, orange, yellow. */
:root {
  --bg: #f7f6f9; --panel: #ffffff; --text: #231f20; --muted: #625d66; --line: #e2dee6;
  --accent: #913794; --accent-text: #ffffff; --user: #f3e8f4; --error: #b3261e; --warn-bg: #fff4d6;
  --green: #00a651; --blue: #00aeef; --navy: #21409a; --red: #ed1c24; --orange: #f7941d; --yellow: #fff200;
  --stripe: linear-gradient(90deg, var(--green), var(--blue), var(--navy), #913794, var(--red), var(--orange), var(--yellow));
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141217; --panel: #1e1b22; --text: #f1f3f5; --muted: #a9a3ae; --line: #322d38;
    --accent: #d08fd3; --accent-text: #1a0f1b; --user: #37233a; --error: #ff8a80; --warn-bg: #3a3013;
  }
}

/* brand header and logo */
#brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--panel); position: relative; }
#brand::after, .login-card::before { content: ""; position: absolute; left: 0; right: 0; height: 4px; background: var(--stripe); }
#brand::after { bottom: 0; }
.brand-logo { display: block; min-width: 0; }
.brand-logo img { display: block; width: 100%; height: auto; }
/* The Navigator logo has a white background, so in dark mode it sits on a rounded white plate. */
@media (prefers-color-scheme: dark) { .brand-logo img { background: #fff; border-radius: 8px; padding: 4px 8px; } }
#brand { min-width: 0; }
#brand .brand-logo { flex: 0 1 390px; }
.app-name { margin-left: auto; font-weight: 600; color: var(--muted); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, "Segoe UI", sans-serif; }
h1, h2 { margin: 0; }
button { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); padding: 8px 14px; }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
button.link { border: 0; background: none; color: var(--accent); padding: 4px; }
.muted { color: var(--muted); }
.error { color: var(--error); min-height: 1.5em; margin: 0; }
.warning { background: var(--warn-bg); border-radius: 8px; padding: 10px 14px; text-align: left; }

/* sign-in */
#login { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 36px 28px 28px; width: 100%; max-width: 440px; display: grid; gap: 14px; position: relative; overflow: hidden; }
.login-card::before { top: 0; }
.login-card .brand-logo { margin-bottom: 8px; }
.login-card h1 { font-size: 1.3rem; }
.login-card p { margin: 0; }
.login-card label { display: grid; gap: 4px; font-size: .9rem; color: var(--muted); }
input, textarea, select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; width: 100%; }

/* layout */
#app { display: grid; grid-template-columns: 270px 1fr; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
#sidebar { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; padding: 14px; min-height: 0; }
#conversations { flex: 1; overflow-x: hidden; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; align-content: start; }
.conv { display: flex; align-items: center; border-radius: 8px; min-width: 0; }
.conv .open { min-width: 0; }
.conv.active, .conv:hover { background: var(--bg); }
.conv button { border: 0; background: none; padding: 8px; }
.conv .open { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv .delete { color: var(--muted); visibility: hidden; }
.conv:hover .delete, .conv .delete:focus { visibility: visible; }
.account { display: grid; gap: 2px; font-size: .9rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.account-links { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.account-links button { padding: 4px 0; }

/* people (administrators) */
.page { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.page header { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.page header h1 { font-size: 1.05rem; flex: 1; }
.page-body { flex: 1; overflow-y: auto; padding: 20px; display: grid; gap: 16px; align-content: start; justify-items: start; max-width: 900px; width: 100%; margin: 0 auto; }
.page-body p { margin: 0; }
.page-body .table-wrap { width: 100%; }
#people-table { border-collapse: collapse; width: 100%; font-size: .95rem; }
#people-table th, #people-table td { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: left; vertical-align: middle; }
#people-table th { color: var(--muted); font-weight: 600; font-size: .85rem; }
#people-table td.actions { display: flex; flex-wrap: wrap; gap: 6px; }
#people-table td.actions button { font-size: .85rem; padding: 4px 10px; }
button.danger { color: var(--error); }

/* dialogs */
dialog.dialog { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); padding: 24px; width: min(420px, calc(100vw - 32px)); }
dialog.dialog::backdrop { background: rgba(0, 0, 0, .45); }
dialog.dialog form { display: grid; gap: 14px; }
dialog.dialog h2 { font-size: 1.15rem; }
dialog.dialog p { margin: 0; }
dialog.dialog label { display: grid; gap: 4px; font-size: .9rem; color: var(--muted); }
dialog.dialog label.check { display: flex; align-items: center; gap: 8px; color: var(--text); }
dialog.dialog label.check input { width: auto; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; }

#chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#chat header { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
#chat header h1 { font-size: 1.05rem; }
.menu-button { display: none; font-size: 1.3rem; }
#messages { flex: 1; overflow-y: auto; padding: 20px; }
#messages > * { max-width: 860px; margin: 0 auto 16px; }

#welcome { text-align: center; padding-top: 8vh; }
.starters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 24px 0; }
.starters button { padding: 14px; text-align: left; border-left: 4px solid var(--green); }
.starters button:nth-child(2) { border-left-color: var(--blue); }
.starters button:nth-child(3) { border-left-color: var(--orange); }
.starters button:nth-child(4) { border-left-color: #913794; }
.starters button:hover { background: var(--user); }
#welcome h2 { font-size: 1.6rem; }
#welcome p.muted { max-width: 560px; margin: 10px auto 0; }

.msg.user { background: var(--user); border-radius: 12px; padding: 10px 14px; width: fit-content; max-width: 80%; margin-right: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.assistant { overflow-wrap: anywhere; }
.msg.assistant h3 { font-size: 1rem; letter-spacing: .03em; margin: 1.4em 0 .4em; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.msg.assistant a { color: var(--accent); }
.msg.assistant pre { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; overflow-x: auto; font-size: .85rem; }
.table-wrap { overflow-x: auto; }
.msg.assistant table { border-collapse: collapse; font-size: .92rem; }
.msg.assistant th, .msg.assistant td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.msg.assistant th { background: var(--panel); }
/* Wide lead tables scroll sideways instead of squeezing words into one-letter columns. */
.msg.assistant th, .msg.assistant td { overflow-wrap: normal; word-break: normal; min-width: 6em; }
.msg.assistant td:first-child, .msg.assistant th:first-child { min-width: 0; }
.status { color: var(--muted); font-style: italic; min-height: 1.5em; }
.msg-actions { display: flex; gap: 8px; }
.msg-actions button { font-size: .85rem; padding: 4px 10px; }

#composer { border-top: 1px solid var(--line); padding: 12px 20px 16px; display: grid; gap: 8px; max-width: 900px; width: 100%; margin: 0 auto; }
#input { resize: none; max-height: 200px; }
.composer-actions { display: flex; justify-content: space-between; }

@media (max-width: 760px) {
  #app { grid-template-columns: 1fr; }
  #sidebar { position: fixed; inset: 0 25% 0 0; z-index: 2; transform: translateX(-100%); transition: transform .2s; }
  #app.menu-open #sidebar { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .4); }
  .menu-button { display: block; }
  .app-name { display: none; }
  #brand { padding: 10px 16px; }
  #chat header, #messages, #composer, .page header, .page-body { padding-left: 16px; padding-right: 16px; }
  .starters { grid-template-columns: 1fr; }
}

/* venture profiles */
.profile-picker { display: grid; gap: 4px; font-size: .9rem; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.profile-picker select { font-weight: 600; }
#profile-form { justify-items: stretch; max-width: 720px; }
#profile-form label, #profile-fields label { display: grid; gap: 4px; font-size: .9rem; font-weight: 600; }
#profile-fields { display: grid; gap: 16px; }
#profile-fields .hint { font-weight: 400; color: var(--muted); }
#profile-fields textarea { min-height: 84px; resize: vertical; }
#profile-members { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 0; }
#profile-members legend { font-size: .9rem; font-weight: 600; padding: 0 4px; }
#profile-members-list { display: flex; flex-wrap: wrap; gap: 6px 18px; }
#profile-members-list label { display: flex; align-items: center; gap: 6px; font-weight: 400; }
#profile-members-list input { width: auto; }
.form-buttons { display: flex; justify-content: space-between; gap: 8px; }
#first-profile { margin-top: 24px; }
.conv .who { color: var(--muted); font-size: .8rem; padding-right: 4px; white-space: nowrap; }