/* css/feedback.css */

/* =========================================================
   Feedback Fullview
   ---------------------------------------------------------
   Read-only preview of recent public comments.

   Writing comments, viewing the full community and
   submitting issue reports all happen on separate pages.
   ========================================================= */


/* =========================================================
   Page Layout
   ========================================================= */

.feedback-fullview
.utility-fullview-content {
  padding:
    22px
    32px
    40px;
}

.feedback-layout {
  width:
    min(
      100%,
      1380px
    );

  min-width: 0;

  margin:
    0
    auto;
}

.feedback-comments-page {
  min-width: 0;
}


/* =========================================================
   Shared Typography
   ========================================================= */

.feedback-section-eyebrow {
  display: block;

  margin-bottom:
    0.52rem;

  color:
    var(--color-text-soft);

  font-family:
    var(--font-latin);

  font-size:
    0.65rem;

  font-weight:
    500;

  line-height:
    1.3;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}

.feedback-comments-title,
.feedback-comments-preview-title,
.feedback-comment-modal-title {
  margin: 0;

  color:
    var(--color-text);

  font-family:
    var(--font-sans);

  font-weight:
    500;

  overflow-wrap:
    anywhere;
}

.feedback-comments-title {
  font-size:
    clamp(
      1.45rem,
      2vw,
      1.85rem
    );

  line-height:
    1.28;
}

.feedback-comments-description {
  max-width:
    42rem;

  margin:
    0.62rem
    0
    0;

  color:
    var(--color-text-muted);

  font-size:
    0.84rem;

  line-height:
    1.72;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   Shared Actions
   ========================================================= */

.feedback-primary-action,
.feedback-secondary-action {
  appearance:
    none;

  min-height:
    2.45rem;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    0.48rem;

  padding:
    0.62rem
    0.92rem;

  border:
    1px solid
    var(--color-border);

  border-radius:
    0.72rem;

  font:
    inherit;

  font-size:
    0.8rem;

  font-weight:
    500;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.feedback-primary-action {
  border-color:
    color-mix(
      in srgb,
      var(--color-text) 56%,
      var(--color-border)
    );

  background:
    var(--color-text);

  color:
    var(--color-bg);
}

.feedback-primary-action:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 8px 22px
    rgba(0, 0, 0, 0.16);
}

.feedback-secondary-action {
  background:
    var(--color-control-bg);

  color:
    var(--color-text-muted);
}

.feedback-secondary-action:hover {
  transform:
    translateY(-1px);

  border-color:
    var(--color-text-soft);

  background:
    var(--color-control-bg-hover);

  color:
    var(--color-text);
}

.feedback-primary-action:active,
.feedback-secondary-action:active {
  transform:
    translateY(0);
}

.feedback-primary-action:focus-visible,
.feedback-secondary-action:focus-visible {
  outline:
    2px solid
    var(--color-text);

  outline-offset:
    3px;
}

.feedback-action-arrow {
  font-family:
    var(--font-latin);

  font-size:
    0.95rem;

  line-height:
    1;
}


/* =========================================================
   Hero
   ========================================================= */

.feedback-comments-hero {
  position:
    relative;

  min-width: 0;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap:
    2rem;

  align-items:
    end;

  padding:
    1.35rem
    1.45rem;

  border:
    1px solid
    var(--color-border);

  border-radius:
    1rem;

  background:
    radial-gradient(
      circle at 88% 12%,
      color-mix(
        in srgb,
        var(--color-text) 6%,
        transparent
      ),
      transparent 22rem
    ),
    color-mix(
      in srgb,
      var(--color-surface-soft) 88%,
      transparent
    );
}

.feedback-comments-heading {
  min-width: 0;
}

.feedback-comments-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    flex-end;

  gap:
    0.62rem;
}

.feedback-community-action {
  min-width:
    8.5rem;
}


/* =========================================================
   Temporary Notice
   ========================================================= */

.feedback-comments-notice {
  grid-column:
    1 / -1;

  margin-top:
    0.1rem;

  padding:
    0.66rem
    0.78rem;

  border:
    1px solid
    var(--color-border);

  border-radius:
    0.68rem;

  background:
    var(--color-control-bg);

  color:
    var(--color-text-muted);

  font-size:
    0.76rem;

  line-height:
    1.5;
}


/* =========================================================
   Recent Comments Section
   ========================================================= */

.feedback-comments-preview {
  min-width: 0;

  margin-top:
    1.6rem;
}

.feedback-comments-preview-header {
  min-width: 0;

  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    1rem;

  margin-bottom:
    0.85rem;

  padding:
    0
    0.08rem
    0.75rem;

  border-bottom:
    1px solid
    var(--color-border);
}

.feedback-comments-preview-header
.feedback-section-eyebrow {
  margin-bottom:
    0.32rem;
}

.feedback-comments-preview-title {
  font-size:
    1.08rem;

  line-height:
    1.35;
}

.feedback-comments-preview-count {
  flex:
    0 0 auto;

  color:
    var(--color-text-soft);

  font-family:
    var(--font-latin);

  font-size:
    0.7rem;

  line-height:
    1.4;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   Comment Grid
   ========================================================= */

.feedback-comment-grid {
  min-width: 0;

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    1rem;

  align-items:
    stretch;
}


/* =========================================================
   Comment Card
   ========================================================= */

.feedback-comment-card {
  min-width: 0;

  min-height:
    12rem;

  display:
    flex;

  border:
    1px solid
    var(--color-border);

  border-radius:
    0.95rem;

  overflow:
    hidden;

  background:
    color-mix(
      in srgb,
      var(--color-surface-soft) 89%,
      transparent
    );

  box-shadow:
    0 8px 24px
    rgba(0, 0, 0, 0.09);

  transition:
    transform 170ms ease,
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 170ms ease;
}

.feedback-comment-card:hover {
  transform:
    translateY(-2px);

  border-color:
    var(--color-text-soft);

  background:
    color-mix(
      in srgb,
      var(--color-surface-soft) 93%,
      var(--color-text) 7%
    );

  box-shadow:
    0 12px 30px
    rgba(0, 0, 0, 0.13);
}

.feedback-comment-card.is-placeholder {
  border-style:
    dashed;

  background:
    var(--color-placeholder-bg);
}

.feedback-comment-card-trigger {
  appearance:
    none;

  width:
    100%;

  min-width:
    0;

  min-height:
    100%;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    stretch;

  padding:
    1rem
    1.05rem
    1.05rem;

  border:
    none;

  background:
    transparent;

  color:
    inherit;

  font:
    inherit;

  text-align:
    left;

  cursor:
    pointer;
}

.feedback-comment-card-trigger:focus-visible {
  outline:
    2px solid
    var(--color-text);

  outline-offset:
    -3px;
}

.feedback-comment-header {
  min-width: 0;

  display:
    flex;

  align-items:
    baseline;

  justify-content:
    space-between;

  gap:
    0.8rem;

  margin-bottom:
    0.72rem;
}

.feedback-comment-author {
  min-width: 0;

  color:
    var(--color-text);

  font-size:
    0.82rem;

  font-weight:
    550;

  line-height:
    1.45;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.feedback-comment-date {
  flex:
    0 0 auto;

  color:
    var(--color-text-soft);

  font-family:
    var(--font-latin);

  font-size:
    0.66rem;

  line-height:
    1.4;

  white-space:
    nowrap;
}

.feedback-comment-body {
  margin: 0;

  display: -webkit-box;
  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;

  line-clamp: 5;

  color: var(--color-text-muted);

  font-size: 0.82rem;
  line-height: 1.72;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.feedback-comment-open-label {
  margin-top:
    auto;

  padding-top:
    0.85rem;

  color:
    var(--color-text-soft);

  font-size:
    0.69rem;

  line-height:
    1.4;

  transition:
    color 160ms ease;
}

.feedback-comment-card:hover
.feedback-comment-open-label {
  color:
    var(--color-text);
}


/* =========================================================
   Empty State
   ========================================================= */

.feedback-comments-empty {
  grid-column:
    1 / -1;

  width:
    min(
      100%,
      32rem
    );

  margin:
    2.5rem
    auto;

  padding:
    1.7rem;

  border:
    1px dashed
    var(--color-placeholder-border);

  border-radius:
    0.95rem;

  background:
    var(--color-placeholder-bg);

  color:
    var(--color-text-muted);

  text-align:
    center;
}

.feedback-comments-empty strong {
  display:
    block;

  color:
    var(--color-text);

  font-size:
    0.9rem;

  line-height:
    1.5;
}

.feedback-comments-empty p {
  margin:
    0.4rem
    0
    0;

  color:
    var(--color-text-soft);

  font-size:
    0.78rem;

  line-height:
    1.65;
}


/* =========================================================
   Comment Detail Modal
   ---------------------------------------------------------
   The modal is dynamically rendered inside Feedback Fullview.
   ========================================================= */

.feedback-comment-modal[hidden] {
  display:
    none;
}

.feedback-comment-modal {
  position:
    fixed;

  top:
    var(--top-bar-height);

  right:
    0;

  bottom:
    var(--bottom-bar-height);

  left:
    0;

  z-index:
    calc(
      var(--z-utility-fullview) + 1
    );

  display:
    grid;

  place-items:
    center;

  padding:
    1.5rem;
}

.feedback-comment-modal-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    color-mix(
      in srgb,
      var(--color-bg) 78%,
      transparent
    );

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}

.feedback-comment-modal-dialog {
  position:
    relative;

  z-index:
    1;

  width:
    min(
      100%,
      680px
    );

  max-height:
    min(
      78dvh,
      760px
    );

  min-width:
    0;

  display:
    grid;

  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto;

  overflow:
    hidden;

  border:
    1px solid
    var(--color-border);

  border-radius:
    1rem;

  background:
    color-mix(
      in srgb,
      var(--color-surface) 96%,
      transparent
    );

  box-shadow:
    0 26px 84px
    rgba(0, 0, 0, 0.4);
}

.feedback-comment-modal-header {
  min-width: 0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    1.25rem;

  padding:
    1.15rem
    1.2rem;

  border-bottom:
    1px solid
    var(--color-border);
}

.feedback-comment-modal-heading {
  min-width: 0;
}

.feedback-comment-modal-header
.feedback-section-eyebrow {
  margin-bottom:
    0.3rem;
}

.feedback-comment-modal-title {
  font-size:
    1.15rem;

  line-height:
    1.35;
}

.feedback-comment-modal-date {
  display:
    block;

  margin-top:
    0.3rem;

  color:
    var(--color-text-soft);

  font-family:
    var(--font-latin);

  font-size:
    0.68rem;

  line-height:
    1.4;
}

.feedback-comment-modal-close {
  appearance:
    none;

  flex:
    0 0 auto;

  width:
    2rem;

  height:
    2rem;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    var(--color-border);

  border-radius:
    999px;

  background:
    var(--color-control-bg);

  color:
    var(--color-text-muted);

  font:
    inherit;

  font-size:
    1rem;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.feedback-comment-modal-close:hover {
  border-color:
    var(--color-text-soft);

  background:
    var(--color-control-bg-hover);

  color:
    var(--color-text);
}

.feedback-comment-modal-close:focus-visible {
  outline:
    2px solid
    var(--color-text);

  outline-offset:
    3px;
}

.feedback-comment-modal-body {
  min-width: 0;

  min-height: 0;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  padding:
    1.25rem
    1.2rem
    1.4rem;

  scrollbar-gutter:
    stable;
}

.feedback-comment-modal-body p {
  margin:
    0;

  color:
    var(--color-text-muted);

  font-size:
    0.88rem;

  line-height:
    1.8;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;
}

.feedback-comment-modal-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    0.62rem;

  padding:
    0.85rem
    1.2rem;

  border-top:
    1px solid
    var(--color-border);

  background:
    color-mix(
      in srgb,
      var(--color-surface-soft) 82%,
      transparent
    );
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1100px) {
  .feedback-comment-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

@media (max-width: 760px) {
  .feedback-fullview
  .utility-fullview-content {
    padding:
      18px
      20px
      32px;
  }

  .feedback-comments-hero {
    grid-template-columns:
      minmax(0, 1fr);

    gap:
      1.1rem;

    align-items:
      start;
  }

  .feedback-comments-actions {
    justify-content:
      flex-start;
  }

  .feedback-comment-modal {
    padding:
      1rem;
  }
}

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

  .feedback-comments-preview-header {
    align-items:
      center;
  }

  .feedback-comment-card {
    min-height:
      10.5rem;
  }

  .feedback-comment-modal-dialog {
    max-height:
      calc(
        100dvh
        - var(--top-bar-height)
        - var(--bottom-bar-height)
        - 2rem
      );
  }
}

@media (max-width: 520px) {
  .feedback-fullview
  .utility-fullview-content {
    padding:
      14px
      14px
      26px;
  }

  .feedback-comments-hero {
    padding:
      1.05rem;
  }

  .feedback-comments-actions {
    display:
      grid;

    grid-template-columns:
      minmax(0, 1fr);
  }

  .feedback-primary-action,
  .feedback-secondary-action,
  .feedback-community-action {
    width:
      100%;
  }

  .feedback-comment-card-trigger {
    padding:
      0.95rem;
  }

  .feedback-comment-modal {
    padding:
      0.65rem;
  }

  .feedback-comment-modal-dialog {
    width:
      100%;

    border-radius:
      0.85rem;
  }

  .feedback-comment-modal-header {
    padding:
      1rem;
  }

  .feedback-comment-modal-body {
    padding:
      1.05rem
      1rem
      1.2rem;
  }

  .feedback-comment-modal-actions {
    display:
      grid;

    grid-template-columns:
      minmax(0, 1fr);

    padding:
      0.8rem
      1rem;
  }
}