/* Sally, and the campfire library.

   The thread is drawn as a phone because everybody already knows how to read
   one. Her side is the panel colour, yours is the brand, and the two are on
   opposite edges, which is the entire grammar of a text message and needs no
   explaining to anybody.

   Every colour here is a token from main.css, so both schemes come out right
   without a second palette being invented down here. */

.sally {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

@media (max-width: 860px) {
  .sally { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ the phone */

.sally__phone {
  background: var(--card);
  border: 1px solid var(--panel-line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  min-height: 32rem;
}

.sally__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--panel-line);
  background: var(--paper-2);
}

.sally__face {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sally__who { display: flex; flex-direction: column; line-height: 1.25; }
.sally__who span { color: var(--ink-3); font-size: 0.82rem; }

.sally__live {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.sally__live::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #16a34a;
}

/* The strip that appears the moment she knows whose trip this is. */
.sally__trip {
  padding: 0.7rem 1rem;
  background: var(--brand-soft);
  border-bottom: 1px solid var(--panel-line);
  font-size: 0.85rem;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
}

.sally__trip strong { color: var(--brand-2); letter-spacing: 0.04em; }
.sally__trip span { width: 100%; color: var(--ink-3); }

.sally__thread {
  flex: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  overflow-y: auto;
  max-height: 26rem;
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 80, 170, 0.05), transparent 60%),
    var(--card);
}

.sally__bubble {
  margin: 0;
  padding: 0.6rem 0.85rem;
  border-radius: 16px;
  max-width: 82%;
  line-height: 1.45;
  font-size: 0.95rem;
  white-space: normal;
}

.sally__bubble--her {
  background: var(--panel);
  color: var(--ink);
  border-bottom-left-radius: 5px;
  align-self: flex-start;
}

.sally__bubble--me {
  background: var(--brand);
  color: #fff;
  border-bottom-right-radius: 5px;
  align-self: flex-end;
}

.sally__filed {
  margin: 0.1rem auto;
  font-size: 0.76rem;
  color: var(--ink-3);
  text-align: center;
}

/* Three dots, the only animation on the page. */
.sally__dots { display: flex; gap: 0.28rem; padding: 0.75rem 0.9rem; }
.sally__dots span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--ink-3);
  animation: sallyblink 1.2s infinite ease-in-out;
}
.sally__dots span:nth-child(2) { animation-delay: 0.15s; }
.sally__dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes sallyblink {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .sally__dots span { animation: none; opacity: 0.5; }
}

.sally__say {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--panel-line);
  background: var(--paper-2);
}

.sally__say input {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}

.sally__say input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* Two bubbles on the home page. Not a widget, a photograph of one. */
.sallypeek {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 34rem;
  margin-top: 1.5rem;
}

.sallypeek .sally__bubble--me { align-self: flex-end; }
.sallypeek .sally__bubble--her { align-self: flex-start; }

/* ------------------------------------------------------------ the side */

.sally__side h2 { margin-top: 0; }
.sally__side h2 + p { margin-top: 0.4rem; }

.sally__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }

.sally__chip {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--panel-line);
  background: var(--card);
  color: var(--ink-2);
  cursor: pointer;
}

.sally__chip:hover { border-color: var(--brand); color: var(--brand-2); }

.sally__card {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 1.1rem;
  border: 1px dashed var(--brand);
  border-radius: 12px;
  background: var(--brand-soft);
}

.sally__card span { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.sally__card strong { font-size: 1.2rem; letter-spacing: 0.06em; color: var(--brand-2); }

/* ------------------------------------------------------------ the library */

.taleindex { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.taleindex li { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.taleindex span { color: var(--ink-3); font-size: 0.85rem; }

.tale {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem 0;
  border-top: 1px solid var(--panel-line);
}

.tale__meta { color: var(--ink-3); font-size: 0.86rem; margin-top: -0.5rem; }
.tale__text p { line-height: 1.7; }
.tale__text p:first-child::first-letter {
  font-size: 2.6rem;
  float: left;
  line-height: 0.9;
  padding: 0.1rem 0.5rem 0 0;
  color: var(--brand);
  font-weight: 700;
}

.tale__teller {
  background: var(--panel);
  border-left: 3px solid var(--brand);
  padding: 0.75rem 1rem;
  border-radius: 0 10px 10px 0;
  font-size: 0.92rem;
  color: var(--ink-2);
}