@layer reset, base, layout, components, pages, utilities;

/* Feedback dialog: a marked-up screenshot of the page plus a note. */
@layer components {
  .feedback-dialog {
    width: min(1240px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 0;
    border-radius: var(--radius-xl);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow);
  }
  .feedback-dialog::backdrop { background: rgba(35, 30, 25, .45); }
  .feedback-dialog__form { display: flex; flex-direction: column; gap: 16px; padding: 20px 24px 24px; }
  .feedback-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .feedback-dialog__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
  .feedback-dialog__body:has(.feedback-shot[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .feedback-dialog__side { display: flex; flex-direction: column; gap: 16px; }
  .feedback-dialog__side .textarea { min-height: 160px; }
  .feedback-dialog__include { display: flex; align-items: center; gap: 10px; font-size: 15px; }
  .feedback-dialog__errors { margin: 0; padding-left: 36px; }
  .feedback-dialog__foot { display: flex; justify-content: flex-end; gap: 10px; }

  .feedback-shot { display: flex; flex-direction: column; gap: 10px; }
  .feedback-shot__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--sunken);
  }
  .feedback-shot__canvas {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: max(220px, calc(100dvh - 290px));
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    cursor: crosshair;
    touch-action: none;
  }
  .feedback-shot__status { color: var(--muted); font-size: 15px; text-align: center; }

  .feedback-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .feedback-tools .segmented button { gap: 6px; }
  .feedback-tools__number {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #E0301E;
    color: #FFFFFF;
    font-size: 11px;
  }
  .feedback-tools .link-button:disabled { opacity: .5; cursor: default; text-decoration: none; }

  .feedback-toast {
    position: fixed;
    z-index: 50;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    box-shadow: var(--shadow);
  }

  @media (max-width: 900px) {
    .feedback-dialog__body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .feedback-dialog__side .textarea { min-height: 76px; }
    .feedback-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .feedback-dialog__form {
      min-height: 100%;
      padding: calc(12px + env(safe-area-inset-top)) var(--gutter) calc(16px + env(safe-area-inset-bottom));
    }
    .feedback-dialog__foot { margin-top: auto; }
    .feedback-dialog__foot .btn { flex: 1; }
    .feedback-shot__canvas { max-height: max(200px, calc(100dvh - 400px)); }
    .feedback-toast { bottom: calc(96px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 32px); }
  }

  @media (max-width: 600px) {
    .feedback-tools__label { display: none; }
    .feedback-tools .segmented button { padding: 0 14px; }
  }
}