/* Feedback: icon at the top left below the bell, report window, history (feedback.js) */
#fb-site { display: inline-flex; width: 31px; height: 31px; }
.fb-button { position: relative; width: 31px; height: 31px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  background: none; color: var(--ink-2); border: 1px solid transparent; cursor: pointer; padding: 0; }
.fb-button:hover, .fb-button:focus-visible { background: var(--card-2); color: var(--ink); }
.fb-button.floats { position: fixed; z-index: 50; background: var(--card); border-color: var(--line); box-shadow: var(--shadow); }  /* above an open dialog */
.fb-button .fb-eye { fill: var(--accent); }
.fb-button .fb-mouth { stroke: var(--accent); }
.fb-button .figure:not(:empty) { position: absolute; top: -3px; inset-inline-end: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff;
  font: 600 10px/16px system-ui, sans-serif; text-align: center; }
.fb-button.question .figure:not(:empty) { background: var(--critical); }
.fb-button.off, body.auth-mode .fb-button { display: none; }
@media print { .fb-button { display: none !important; } }

.fb-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.fb-kind { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
  color: var(--ink); font: inherit; cursor: pointer; }
.fb-kind:hover { border-color: var(--axis); }
.fb-kind.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--card)); font-weight: 600; }
.fb-kind-icon { font-size: 20px; line-height: 1; }
.fb-location { word-break: break-word; }
.fb-image-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fb-image { display: flex; gap: 10px; align-items: flex-start; }
.fb-image img { max-width: 220px; max-height: 140px; border-radius: 8px; border: 1px solid var(--line); }
.fb-list { gap: 10px; }
.fb-card { display: grid; gap: 8px; padding: 12px 14px; }
.fb-card.unread { border-color: var(--accent); }
.fb-card.question { border-color: var(--critical); }
.fb-card-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fb-card-head .spacer { flex: 1; }
.fb-msg-text { white-space: pre-wrap; word-break: break-word; }
.fb-thumb img { max-width: 180px; max-height: 120px; border-radius: 8px; border: 1px solid var(--line); display: block; }
.fb-thumb.large img { max-width: 100%; max-height: 360px; }
.fb-timeline { display: grid; gap: 6px; }
.fb-timeline:empty { display: none; }
.fb-msg { padding: 8px 10px; border-radius: 10px; background: var(--card-2); max-width: 90%; }
.fb-msg.team { justify-self: start; background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.fb-msg.me { justify-self: end; }
.fb-msg.question { border-inline-start: 3px solid var(--critical); }
.fb-msg-head { margin-bottom: 2px; }
.fb-status-row { justify-self: center; }
.fb-reply { display: grid; gap: 6px; justify-items: end; }
.fb-reply textarea { width: 100%; }
.fb-send { display: grid; gap: 8px; }  /* area and title: style.css «Sections of input areas and popups» */
.fb-send textarea { width: 100%; }
.fb-unread td { font-weight: 600; }
.fb-point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-inline-end: 6px; vertical-align: middle; }