/* Cassandra — log panel, log page layout, calendar widget, chat sidebar. */

/* --- Log panel -------------------------------------------------------- */

.log-content {
  font-family: var(--font-sans);
  padding: 28px clamp(20px, 4vw, 56px) 32px;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--text);
  max-width: 76ch;
  margin: 0 auto;
  /* No max-height cap here — the dashboard's log panel now stretches in
     the grid to match the left column's bottom (see #log-panel in
     layout.css). A constrained max-height was producing an awkward
     inner scrollbar AND leaving dead space below it inside the panel.
     With the cap gone the content sits at the panel's top, the panel
     grows or shrinks with the grid, and the regular page scroll
     handles very long logs. */
}
.log-content p { margin: 0 0 1.1em; }
.log-content h1, .log-content h2, .log-content h3, .log-content h4 {
  font-family: var(--font-mono);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  margin-top: 1.8em;
  margin-bottom: 0.5em;
  font-weight: 700;
}
.log-content h1:first-child,
.log-content h2:first-child,
.log-content h3:first-child { margin-top: 0; }

/* TL;DR callout — model is instructed to put it first, so style the first
 * heading + paragraph block as a callout. */
.log-content h3:first-of-type {
  font-size: 11px;
  color: var(--accent);
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  margin-bottom: 0;
}
.log-content h3:first-of-type + p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text);
  border-left: 3px solid var(--accent);
  padding: 4px 14px 12px;
  margin: 0 0 1.8em;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  font-weight: 500;
}
.log-content strong { color: var(--text); font-weight: 700; }
.log-content em { color: var(--muted); font-style: italic; }
.log-content ul, .log-content ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.log-content li { margin-bottom: 0.4em; }
.log-content hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1.6em 0;
}

/* --- Log page (calendar + log + chat sidebar) ------------------------- */

.log-page__body {
  display: grid;
  grid-template-columns: 220px 1fr 320px;
  gap: 1px;
  background: var(--border);
}
@media (max-width: 1100px) {
  .log-page__body { grid-template-columns: 1fr; }
}
.log-page__cal, .log-page__content, .log-page__chat { background: var(--surface); }
.log-page__cal { padding: 10px; }
.log-page__content { min-height: 60vh; }
.log-page__chat { padding: 8px; min-height: 60vh; display: flex; flex-direction: column; }
.log-page__chat--locked { opacity: 0.92; }
.chat-locked {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 24px 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  border: 1px dashed var(--border);
  border-radius: 4px;
  margin: 8px 4px;
}
.chat-locked p { margin: 0; max-width: 280px; }
.chat-locked strong { color: var(--text); display: block; margin-bottom: 6px; }

/* --- Calendar widget --------------------------------------------------- */

.cal__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cal__title { color: var(--accent); font-weight: 700; }
.cal__btn {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 2px 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}
.cal__btn:hover { color: var(--accent); border-color: var(--accent); }
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.cal__h {
  text-align: center;
  font-size: 9px;
  color: var(--dim);
  background: var(--surface-2);
  padding: 3px 0;
  text-transform: uppercase;
}
.cal__d {
  background: var(--surface);
  border: 0;
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  padding: 6px 0;
  text-align: center;
  cursor: not-allowed;
}
.cal__d--empty { background: var(--bg); cursor: default; }
.cal__d--has-log {
  color: var(--text);
  cursor: pointer;
  position: relative;
}
.cal__d--has-log::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--accent);
}
.cal__d--has-log:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cal__d--today { color: var(--warning); }
.cal__d--selected {
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
}
.cal__d--selected::after { background: var(--bg); }

/* --- Chat sidebar ----------------------------------------------------- */

.chat-header {
  border-bottom: 1px solid var(--border);
  padding: 6px 4px 8px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
}
.chat-title {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
}
.chat-title::before { content: "▸ "; }
.chat-hint { color: var(--dim); font-size: 10px; margin-top: 2px; }

.chat-thread {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.chat-msg {
  font-family: var(--font-sans);
  font-size: 13.5px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  line-height: 1.6;
  word-wrap: break-word;
}
.chat-msg--system {
  color: var(--muted);
  font-size: 12px;
  background: transparent;
  border-style: dashed;
  font-family: var(--font-mono);
}
.chat-msg--user {
  background: var(--user-bubble-bg);
  border-color: var(--accent);
  color: var(--text);
  align-self: flex-end;
  max-width: 92%;
  white-space: pre-wrap;
}
.chat-msg--user::before {
  content: "you › ";
  font-family: var(--font-mono);
  color: var(--accent);
  opacity: 0.7;
  font-size: 10px;
}
.chat-msg--assistant { background: var(--surface-2); color: var(--text); }
.chat-msg--assistant::before {
  content: "cassandra › ";
  font-family: var(--font-mono);
  color: var(--accent);
  opacity: 0.7;
  font-size: 10px;
}
.chat-msg--pending { color: var(--dim); font-style: italic; }
.chat-msg--error   { color: var(--negative); border-color: var(--negative); }

.chat-msg p   { margin: 0.4em 0; }
.chat-msg p:first-child { margin-top: 0; }
.chat-msg p:last-child  { margin-bottom: 0; }
.chat-msg h2, .chat-msg h3, .chat-msg h4 {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 11px;
  margin: 0.8em 0 0.3em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.chat-msg strong { color: var(--text); font-weight: 700; }
.chat-msg em     { color: var(--muted); font-style: italic; }

.chat-form {
  border-top: 1px solid var(--border);
  padding-top: 6px;
  display: flex;
  gap: 6px;
  align-items: flex-end;
}
.chat-form textarea {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  padding: 6px 8px;
  resize: vertical;
  min-height: 36px;
  outline: none;
}
.chat-form textarea:focus { border-color: var(--accent); }
.chat-form button {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: inherit;
  font-size: 11px;
  padding: 6px 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.chat-form button:hover:not(:disabled) { background: var(--accent); color: var(--bg); }
.chat-form button:disabled { opacity: 0.4; cursor: not-allowed; }


/* --- Mobile (≤480px) -------------------------------------------------- */

@media (max-width: 480px) {
  /* Trim horizontal padding so the markdown column uses the screen
     width. The existing 1100px rule already capped the column at
     76ch; we just shave the surrounding gutter. */
  .log-content { padding: 0 4px; font-size: 13.5px; }
  .log-content h2 { font-size: 16px; }
  .log-content h3 { font-size: 14px; }

  /* Chat bubbles edge-to-edge so the conversation reads like a
     mobile messenger thread. */
  .chat-msg {
    max-width: 100%;
    padding: 8px 10px;
    font-size: 13px;
  }
  .chat-msg--user { margin-right: 0; }
  .chat-msg--assistant { margin-left: 0; }

  /* Chat input row stacks: textarea full-width, button below. */
  .chat-form {
    flex-direction: column;
    gap: 6px;
    padding: 8px;
  }
  .chat-form textarea {
    width: 100%;
    min-height: 56px;
    font-size: 14px;        /* avoids iOS Safari zoom-on-focus */
  }
  .chat-form button {
    width: 100%;
    padding: 10px;
    font-size: 12px;
  }

  .chat-header { padding: 8px 10px; }
  .chat-title { font-size: 12px; }
  .chat-hint { font-size: 10px; }
}