/* Replying: the Reply button, prompts, the reply box, filters, known glyphs */

/* The Reply button, in the place the player's reply will appear,
   with Say something else beside it (and its prompts underneath, once opened) */
.dialogue-reply-slot {
  align-self: flex-end;
  flex-shrink: 0; /* the log scrolls instead of squeezing it under the lines above */
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
}

.dialogue-reply-buttons {
  display: flex;
  gap: 12px;
}

/* Say something else: quieter than Reply, in italics */
.ui-button.is-quiet {
  font-style: italic;
  color: var(--stone);
  background: transparent;
  border-color: rgba(120, 120, 110, 0.45);
}

.ui-button.is-quiet.is-active {
  color: var(--stone-light);
  border-color: var(--stone);
}

/* The prompts: what the player could talk about */
.say-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 280px;
  padding: 10px;
  border: 1px solid var(--stone-dark);
  border-radius: 4px;
  background: rgba(10, 16, 12, 0.6);
}

.say-prompt {
  font: inherit;
  font-size: 1rem;
  padding: 6px 12px;
  text-align: left;
  color: var(--stone-light);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}

.say-prompt:hover,
.say-prompt:focus-visible {
  border-color: var(--sunlight);
  outline: none;
}

/* Not yet: the words for it haven't all been met */
.say-prompt.is-locked {
  font-style: italic;
  color: var(--stone-dark);
  cursor: default;
}

.say-prompt.is-locked:hover {
  border-color: transparent;
}

/* Speak freely: set apart below the prompts */
.say-prompt.is-free {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--stone-dark);
  border-radius: 0 0 3px 3px;
  font-style: italic;
}

/* The easier way, with a prompt: a small, quiet switch to show only the glyphs that could fit */
.reply-easy {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  padding: 2px 4px;
  font: inherit;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--stone);
  background: none;
  border: none;
  cursor: pointer;
}

.reply-easy[hidden] {
  display: none;
}

.reply-easy-track {
  position: relative;
  width: 26px;
  height: 14px;
  border: 1px solid var(--stone-dark);
  border-radius: 7px;
  transition: background 0.2s, border-color 0.2s;
}

.reply-easy-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stone);
  transition: transform 0.2s, background 0.2s;
}

.reply-easy[aria-checked="true"] {
  color: var(--stone-light);
}

.reply-easy[aria-checked="true"] .reply-easy-track {
  border-color: var(--sunlight);
}

.reply-easy[aria-checked="true"] .reply-easy-track::after {
  transform: translateX(12px);
  background: var(--sunlight);
}

.reply-easy:hover,
.reply-easy:focus-visible {
  color: var(--stone-light);
  outline: none;
}

/* With a prompt: what the player is trying to say on the left, the switch on the right,
   on one line in the strip beside the close button (no extra room taken above the sentence) */
.reply-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-top: -20px;
  padding-right: 32px; /* clear of the close button */
}

.reply-header[hidden] {
  display: none;
}

.reply-prompt {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1; /* bigger, but no taller than the switch beside it: the input stays where it is */
  font-style: italic;
  color: var(--sunlight);
  text-align: left;
}

/* Reply popup: the sentence on top, the known glyphs below.
   Its height follows the number of known glyphs, up to a limit (then the list scrolls). */
.reply-popup {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(820px, 100%);
  max-height: min(640px, calc(100vh - 32px));
  padding: 40px 24px 24px;
  background: linear-gradient(to bottom, var(--forest) 0%, var(--forest-dark) 45%);
  border: 1px solid var(--stone);
}

/* The message (e.g. not understood): between Clear and Speak, on their line */
.reply-message {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-style: italic;
  color: var(--stone);
  text-align: center;
}

.reply-compose {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px; /* the input close to its prompt above and its buttons below */
  margin-bottom: 10px; /* a little more room above the glyphs than the popup's gap */
}

/* Speak, and beside it Clear: quieter, in italics */
/* Clear on the far left of the input, Speak on the far right, the message between them */
.reply-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.ui-button.reply-clear {
  font-style: italic;
  color: var(--stone);
  background: transparent;
  border-color: rgba(120, 120, 110, 0.45);
}

/* Drop zone for the sentence */
.reply-sentence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 118px; /* the height it has with glyphs in it: it doesn't grow with the first one */
  padding: 16px;
  border: 1px solid var(--stone-dark);
  border-radius: 4px;
  background: var(--forest-darkest);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Vocabulary: a mossy panel holding the filters and the known glyphs */
.reply-vocabulary {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--stone-dark);
  border-radius: 4px;
  background: rgba(86, 102, 63, 0.18);
  overflow: hidden;
}

/* Filters: sort (Recent / A–Z) on the left, categories on the right */
.reply-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 10px 12px;
  background: rgba(12, 19, 14, 0.35);
  border-bottom: 1px solid var(--stone-dark);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-button {
  font: inherit;
  font-size: 0.95rem;
  padding: 2px 12px;
  color: var(--stone);
  background: transparent;
  border: 1px solid var(--stone-dark);
  border-radius: 999px;
  cursor: pointer;
}

.filter-button:hover,
.filter-button:focus-visible {
  color: var(--stone-light);
  outline: none;
}

.filter-button.is-active {
  color: var(--forest-darkest);
  background: var(--cat-colour, var(--stone-light));
  border-color: var(--cat-colour, var(--stone-light));
}

/* Each category has its own colour: on its filter, and on its glyphs (see the category tints below) */
[data-category="Actions"] { --cat-colour: var(--cat-actions); }
[data-category="People"] { --cat-colour: var(--cat-people); }
[data-category="Time"] { --cat-colour: var(--cat-time); }
[data-category="Feelings"] { --cat-colour: var(--cat-feelings); }
[data-category="Nature"] { --cat-colour: var(--cat-nature); }
[data-category="Quantities"] { --cat-colour: var(--cat-quantities); }
[data-category="Grammar"] { --cat-colour: var(--cat-grammar); }

.filter-button[data-category]:not([data-category="All"]) {
  border-color: var(--cat-colour, var(--stone-dark));
}


/* Known glyphs: a grid that scrolls when there are many */
.reply-known {
  flex: 0 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  align-content: start;
  gap: 14px 8px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--stone-dark) transparent;
  padding: 16px 12px;
}

/* The names: their own strip under the glyphs, set apart by a line, scrolling sideways if many */
.reply-names {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--stone-dark);
  background: rgba(10, 16, 12, 0.35);
}

.reply-names[hidden] {
  display: none;
}

.reply-names-title {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--stone);
}

.reply-names-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--stone-dark) transparent;
  padding: 2px 0;
}

.reply-names-list .known-glyph {
  flex-shrink: 0;
}

/* A known sentence (Sentences filter): its glyphs in a row, the whole row is one button */
.known-sentence {
  grid-column: 1 / -1;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 14px;
  font: inherit;
  background: rgba(95, 90, 76, 0.18);
  border: 1px solid var(--stone-dark);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.known-sentence:hover,
.known-sentence:focus-visible {
  background: rgba(86, 102, 63, 0.35);
  border-color: var(--sunlight);
  outline: none;
}

.known-sentence-glyphs {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Its meaning underneath: small, italic, faded */
.known-sentence-translation {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--stone);
  opacity: 0.8;
}

.known-sentence .glyph {
  width: 56px;
  height: 56px;
  font-size: 0.95rem;
  pointer-events: none; /* the row is the button */
}

/* Nothing to show (e.g. no confirmed glyphs yet) */
.reply-empty {
  grid-column: 1 / -1;
  margin: 8px 0;
  font-style: italic;
  color: var(--stone);
  text-align: center;
}

.known-glyph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.known-glyph .glyph {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  font-size: 0.95rem;
}

.known-glyph .glyph.name-cartouche {
  width: 56px;
  height: 56px;
}

/* Meaning as a tooltip above any hovered glyph (only if there is one).
   It floats above everything so popups and scrolling lists never cut it off. */
.glyph-tooltip {
  position: fixed;
  z-index: 20;
  transform: translate(-50%, -100%);
  width: max-content;
  max-width: 12em;
  padding: 2px 10px;
  font-size: 1.2rem;
  color: var(--stone-light);
  background: var(--forest-darkest);
  border: 1px solid var(--stone-dark);
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.glyph-tooltip.is-confirmed {
  font-size: 1.05rem;
}

/* Glyphs that can be dragged */
.glyph[draggable="true"] {
  cursor: grab;
}

.glyph[draggable="true"]:active {
  cursor: grabbing;
}