/*
 * The feedback panel, shared by the mini apps.
 *
 * It is written entirely against the design tokens the host page defines — --surface, --border,
 * --text, --accent and the rest — with a fallback on every one of them. A host that has the GPM
 * tokens gets a panel that already matches it; a host that has none gets something readable. A
 * widget with a palette of its own would look like a widget in both.
 */

.fb { display: flex; flex-direction: column; gap: var(--space-4, 16px); }

.fb-tabs {
  display: flex;
  gap: var(--space-1, 4px);
  padding: var(--space-1, 4px);
  background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-pill, 999px);
}

.fb-tab {
  flex: 1;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 0;
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  color: var(--text-muted, #64748b);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.fb-tab[aria-selected="true"] {
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
  border: 1px solid var(--border, #e2e8f0);
}

.fb-panel { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.fb-panel[hidden] { display: none; }

.fb-hint { color: var(--text-muted, #64748b); font-size: 13px; line-height: 1.5; margin: 0; }

.fb-field {
  width: 100%;
  padding: var(--space-3, 12px);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  background: var(--surface, #fff);
  color: var(--text, #0f172a);
  font: inherit;
  font-size: 15px;
  resize: vertical;
}

.fb-field:focus { outline: 2px solid var(--accent, #0e7490); outline-offset: -1px; }

.fb-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); }

.fb-count { color: var(--text-subtle, #94a3b8); font-size: 12px; font-family: var(--font-mono, ui-monospace, monospace); }

.fb-send {
  padding: var(--space-3, 12px) var(--space-5, 20px);
  border: 0;
  border-radius: var(--radius-md, 10px);
  background: var(--accent, #0e7490);
  color: var(--text-on-accent, #fff);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.fb-send:disabled { opacity: 0.5; cursor: default; }

.fb-note {
  padding: var(--space-3, 12px);
  border-radius: var(--radius-md, 10px);
  background: var(--accent-soft, #ecfeff);
  color: var(--text, #0f172a);
  font-size: 14px;
  line-height: 1.5;
}

.fb-note[data-kind="error"] { background: color-mix(in srgb, var(--danger, #c0392b) 12%, transparent); }
.fb-note[hidden] { display: none; }

.fb-list { display: flex; flex-direction: column; gap: var(--space-2, 8px); margin: 0; padding: 0; list-style: none; }

.fb-item {
  display: flex;
  gap: var(--space-3, 12px);
  align-items: flex-start;
  padding: var(--space-3, 12px);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  background: var(--surface, #fff);
}

.fb-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1, 4px); }
.fb-item-title { color: var(--text, #0f172a); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.fb-item-text { color: var(--text, #0f172a); font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-item-meta { color: var(--text-subtle, #94a3b8); font-size: 12px; font-family: var(--font-mono, ui-monospace, monospace); }

.fb-chip {
  align-self: flex-start;
  padding: 2px var(--space-2, 8px);
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-2, #f1f5f9);
  color: var(--text-muted, #64748b);
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fb-chip[data-status="fixed"], .fb-chip[data-status="done"] { color: var(--success, #1f8a5b); }
.fb-chip[data-status="declined"] { color: var(--danger, #c0392b); }

/* The vote button is the whole point of the board, so it is the one thing that changes shape when
   it is pressed rather than only changing colour: colour alone is not something everybody sees. */
.fb-vote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 52px;
  padding: var(--space-2, 8px);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  background: var(--surface, #fff);
  color: var(--text-muted, #64748b);
  font: inherit;
  cursor: pointer;
}

.fb-vote[aria-pressed="true"] {
  border-color: var(--accent, #0e7490);
  background: var(--accent-soft, #ecfeff);
  color: var(--accent, #0e7490);
}

.fb-vote-count { font-family: var(--font-mono, ui-monospace, monospace); font-size: 15px; font-weight: 600; }
.fb-vote-mark { font-size: 12px; line-height: 1; }

.fb-empty { padding: var(--space-5, 20px); text-align: center; color: var(--text-subtle, #94a3b8); font-size: 14px; }

.fb-admin { display: flex; flex-wrap: wrap; gap: var(--space-1, 4px); margin-top: var(--space-2, 8px); }

.fb-admin button {
  padding: 2px var(--space-2, 8px);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  color: var(--text-muted, #64748b);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

/* The admin view: a row of filters over a list that is read rather than written to. */

.fb-filters { display: flex; flex-wrap: wrap; gap: var(--space-1, 4px); }

.fb-chip--button { border: 1px solid var(--border, #e2e8f0); cursor: pointer; font: inherit; font-size: 11px; }

.fb-chip--button[aria-pressed="true"] {
  border-color: var(--accent, #0e7490);
  background: var(--accent-soft, #ecfeff);
  color: var(--accent, #0e7490);
}

/* The answer to a report, shown to whoever wrote it. */

.fb-answer {
  margin-top: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-left: 2px solid var(--accent, #0e7490);
  background: var(--surface-2, #f1f5f9);
  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
}

.fb-answer-label {
  color: var(--accent, #0e7490);
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Writing a reply, or a new wording: built with the item and hidden, so that half a reply typed
   and then lost to a redraw never happens. */

/* display:flex would win against the hidden attribute, which only sets display:none at user agent
   priority: without the second line the folded controls under a report were never folded */
.fb-admin-block { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.fb-admin-block[hidden] { display: none; }

.fb-reply { display: flex; flex-direction: column; gap: var(--space-2, 8px); margin-top: var(--space-2, 8px); }
.fb-reply[hidden] { display: none; }

.fb-send--small { align-self: flex-start; padding: var(--space-2, 8px) var(--space-4, 16px); font-size: 14px; }

/* The way to the rest of a list, and the line above it that says how much of it is on the screen.
   Both are hidden whenever there is nothing more, which is the ordinary case. */

.fb-more {
  align-self: stretch;
  padding: var(--space-3, 12px);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  background: transparent;
  color: var(--text, #0f172a);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.fb-more[hidden] { display: none; }
.fb-more:disabled { opacity: 0.5; cursor: default; }

/* A report an administrator can act on: read first, acted on second. The controls under it are
   folded until the row is tapped, and the row says so by being tappable at all. */

.fb-item--openable { cursor: pointer; }
.fb-item--openable.is-open { border-color: var(--accent, #0e7490); }

/* ---- the conversation on a report ----
   A report used to be one thing said once with at most one answer written into the row. This is
   the back and forth over it, folded under the row and opened on the one being dealt with. */

.fb-fold { display: flex; flex-direction: column; gap: var(--space-3, 12px); margin-top: var(--space-2, 8px); }
.fb-fold[hidden] { display: none; }

.fb-conversation { display: flex; flex-direction: column; gap: var(--space-2, 8px); }

.fb-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.fb-message {
  align-self: flex-start;
  max-width: 88%;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 10px);
  background: var(--surface-2, #f1f5f9);
}

/* what this side said, on this side. Two people talking is the one thing a chat has to show
   without being read */
.fb-message--mine {
  align-self: flex-end;
  border-color: var(--accent, #0e7490);
  background: var(--accent-soft, #ecfeff);
}

.fb-message-who {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-subtle, #94a3b8);
  margin-bottom: 2px;
}

.fb-picture {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: var(--space-2, 8px);
  border-radius: var(--radius-sm, 6px);
}

/* the file input cannot be styled, so it is hidden behind a label that can */
.fb-attach {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 1px dashed var(--border-strong, #cbd5e1);
  border-radius: var(--radius-md, 10px);
  color: var(--text-muted, #64748b);
  font-size: 13px;
  cursor: pointer;
}

.fb-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1, 4px); }

.fb-badge {
  padding: 1px var(--space-2, 8px);
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-2, #f1f5f9);
  color: var(--text-muted, #64748b);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  white-space: nowrap;
}

/* something waiting to be read is the one thing on this screen worth a colour */
.fb-badge--unread {
  background: var(--accent, #0e7490);
  color: var(--text-on-accent, #fff);
}