/* ---------- feedbacks#index: "Ayuda y sugerencias" (/help) ---------- */

/* Form + your submissions on the left, contact on the right. The contact card comes first in the
   HTML (so on phones it's at the top), and grid-column puts it on the right on wide screens */
.help-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  align-items: start;
  gap: var(--space-6);
}

.help-contact {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: var(--space-8);
}

.help-page__main {
  grid-column: 1;
  grid-row: 1;
}

/* Email · phone · WhatsApp: a row each, the whole row is the link */
.help-contact__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
}

.help-contact__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  margin: 0 calc(-1 * var(--space-2));
  border-radius: var(--radius-md);
  color: inherit;
  transition: background var(--duration-fast) var(--ease-out);

  &:hover {
    background: var(--color-surface-hover);
    color: inherit;
    text-decoration: none;
  }
}

.help-contact__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-subtle);
  color: var(--color-primary);

  svg {
    width: var(--icon-md);
    height: var(--icon-md);
  }
}

/* min-width: 0 lets a long email shrink and get its "…" */
.help-contact__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.help-contact__label {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.help-contact__value {
  overflow: hidden;
  color: var(--color-text);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.help-contact__availability {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding-top: var(--space-3);
  border-top: var(--border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);

  svg {
    flex-shrink: 0;
    width: var(--icon-md);
    height: var(--icon-md);
    margin-top: 1px;
  }
}

/* ---------- The form ---------- */

/* The thumbnails picked so far (images_preview_controller.js), above the "Add images" button */
.help-images {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;

  &[hidden] {
    display: none;
  }
}

.help-images__item {
  position: relative;
  width: 5rem;
  height: 5rem;

  img {
    width: 100%;
    height: 100%;
    border: var(--border);
    border-radius: var(--radius-md);
    object-fit: cover;
  }
}

/* Small round ✕ on the thumbnail's corner */
.help-images__remove {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-full);
  background: var(--color-text);
  color: var(--color-surface);
  cursor: pointer;

  svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  &:hover {
    background: var(--color-danger);
  }
}

/* The <label> that opens the hidden file input: a button, only as wide as its text */
.help-images__add {
  align-self: flex-start;
  cursor: pointer;

  svg {
    width: var(--icon-sm);
    height: var(--icon-sm);
  }

  &:has(input:focus-visible) {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }
}

.form-hint--warning {
  color: var(--color-warning-text);
}

/* The data-protection reminder: a quiet note, not an error */
.help-privacy {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.help-form__footer {
  display: flex;
  justify-content: flex-end;
}

/* ---------- Your submissions ---------- */

.help-history {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.help-history__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.help-history__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.help-history__time {
  margin-left: auto;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

/* Long messages: 4 lines, then "…" (the full text is in the developer's inbox) */
.help-history__message {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;

  p {
    margin: 0;
  }

  p + p {
    margin-top: var(--space-1);
  }
}

.help-history__images {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);

  img {
    width: 4rem;
    height: 4rem;
    border: var(--border);
    border-radius: var(--radius-md);
    object-fit: cover;
  }
}

@media (max-width: 64rem) {
  .help-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-contact,
  .help-page__main {
    grid-column: auto;
    grid-row: auto;
  }

  .help-contact {
    position: static;
  }
}

/* ---------- Sidebar: the help link sits at the bottom, just above your profile ---------- */

.sidebar__nav--bottom {
  margin-top: auto;
  padding-bottom: var(--space-2);
}

/* The footer normally pushes itself down (margin-top: auto); the help link does that now */
.sidebar__nav--bottom + .sidebar__footer {
  margin-top: 0;
}

@media (max-width: 768px) {
  .sidebar__nav--bottom {
    margin-top: 0;
    padding-bottom: 0;
  }
}

/* ---------- developer/*: the developer's private inbox (layouts/developer) ---------- */

.developer-bar {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-6);
  border-bottom: var(--border);
  background: var(--color-surface);
}

.developer-bar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-weight: var(--weight-semibold);

  &:hover {
    color: var(--color-text);
    text-decoration: none;
  }
}

.developer-main {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-8);
}

/* Status filter: All · Received · In progress · Resolved, each with its count */
.developer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.developer-tabs__tab {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);

  &:hover {
    background: var(--color-surface-hover);
    color: var(--color-text);
    text-decoration: none;
  }

  &[aria-current="page"] {
    background: var(--color-primary-subtle);
    color: var(--color-primary-text);
  }
}

.developer-tabs__count {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.developer-inbox {
  overflow: hidden; /* keeps the rows' hover background inside the rounded corners */
  margin: 0;
  padding: 0;
  list-style: none;

  li + li {
    border-top: var(--border);
  }
}

.developer-inbox__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  color: inherit;
  transition: background var(--duration-fast) var(--ease-out);

  &:hover {
    background: var(--color-surface-hover);
    color: inherit;
    text-decoration: none;
  }
}

.developer-inbox__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.developer-inbox__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.developer-inbox__who {
  overflow: hidden;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.developer-inbox__time {
  flex-shrink: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.developer-inbox__message {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.developer-inbox__badges {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-1-5);

  svg {
    width: 0.875rem;
    height: 0.875rem;
    margin-right: var(--space-0-5);
  }
}

.developer-status .select {
  width: auto;
}

/* The message + images on the left, who/where on the right */
.developer-feedback {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  align-items: start;
  gap: var(--space-6);
}

.developer-feedback__message {
  overflow-wrap: anywhere;

  p {
    margin: 0;
  }

  p + p {
    margin-top: var(--space-2);
  }
}

.developer-feedback__images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-3);

  img {
    width: 100%;
    border: var(--border);
    border-radius: var(--radius-md);
  }
}

.developer-feedback__code {
  overflow-wrap: anywhere;
}

.developer-feedback__agent {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

@media (max-width: 56rem) {
  .developer-feedback {
    grid-template-columns: minmax(0, 1fr);
  }

  .developer-main {
    padding: var(--space-4);
  }

  .developer-inbox__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }
}

/* ---------- The developer's reply (feedbacks#index, under each submission) ---------- */

/* Set apart from the employee's own message: tinted, with the brand colour on the left, like a quote */
.help-reply {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-primary-subtle);
}

.help-reply__title {
  margin: 0 0 var(--space-1);
  color: var(--color-primary-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.help-reply__time {
  font-weight: var(--weight-regular);
  color: var(--color-text-subtle);
}

.help-reply__text {
  color: var(--color-text);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;

  p {
    margin: 0;
  }

  p + p {
    margin-top: var(--space-1);
  }
}

/* developer/feedbacks#show: the reply form's save button on the right */
.developer-feedback__reply-footer {
  display: flex;
  justify-content: flex-end;
}