/* chat-app */
.app-chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding-block: var(--space-s-m);
  min-height: 100dvh;

  >header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s);
  }

  >.log {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    margin: 0;
    padding: 0 0 var(--space-s) 0;
    list-style: none;
    flex: 1;

    >li {
      display: flex;
      flex-direction: column;
      gap: var(--space-s);
      max-width: 80%;
      min-width: 0;

      /* a horizontal-scroll component needs the whole column (and to be
         centered in the viewport) or its full-bleed row would misalign and
         clip inside the 80% bubble cap */
      &:has(.chat-hscroll) {
        max-width: 100%;
        align-self: stretch;
      }

      &.user {
        align-self: flex-end;
        align-items: flex-end;
      }

      >p {
        margin: 0;
        padding: var(--space-xs) var(--space-s);
        border-radius: 2rem;
        background: var(--color-neutral-9);
      }

      &.user>p {
        background: var(--color-color-2);
        color: var(--color-light-neutral-10);
      }

      /* structured content (not plain text) eases in when it appears.
         Custom elements are inline by default and would shrink-wrap, so
         every component (generic + industry) gets block + full width. */
      >chat-card,
      >chat-card-list,
      >chat-chips,
      >chat-select,
      >chat-form,
      >chat-actions,
      >chat-transaction-list,
      >chat-bill-list,
      >chat-loan-card,
      >chat-bank-card-list,
      >chat-appointment-list,
      >chat-slot-picker,
      >chat-prescription-list,
      >chat-unaccounted-list,
      >chat-template-picker,
      >chat-verification-list {
        display: block;
        animation: chat-pop-in 0.32s ease-out both;
        width: 100%;
      }
    }
  }

  >.composer {
    position: sticky;
    bottom: var(--space-m);
    display: flex;
    align-items: end;
    gap: var(--space-2xs);
    background-color: var(--color-neutral-9);
    padding: var(--space-xs);
    border-radius: 2rem;

    &:hover {
      outline: 1px solid var(--color-neutral-8);
      cursor: text;
    }

    >textarea {
      flex: 1;
      background: transparent;
      border: none;
      resize: none;
      max-height: 10rem;
      overflow-y: auto;

      &:focus {
        outline: none;
      }
    }

    &:has(textarea:focus) {
      outline: 1px solid var(--color-neutral-7);
    }
  }
}

/* chat-chips */
chat-chips {
  >.chat-chips {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);

    >p {
      margin: 0;
      color: var(--color-neutral-5);
    }

    >.options {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs);
    }
  }
}

/* chat-select */
chat-select {
  >.chat-select {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    background-color: var(--color-neutral-10);
    border: 1px solid var(--color-neutral-7);
    border-radius: var(--border-radius);
    padding: var(--space-xs) var(--space-s);

    >p {
      margin: 0;
      color: var(--color-neutral-5);
    }

    >ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2xs);
      margin: 0;
      padding: 0;

      button.selected {
        outline: 2px solid var(--color-color-2);
      }
    }

    >button {
      align-self: start;
    }
  }
}

/* chat-form */
chat-form {
  >.chat-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    background-color: var(--color-neutral-10);
    border: 1px solid var(--color-neutral-7);
    border-radius: var(--border-radius);
    padding: var(--space-s);

    >h3 {
      margin: 0;
    }

    >label {
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);
    }

    >button {
      align-self: start;
    }
  }
}

/* chat-card */
chat-card {
  display: block;

  >.chat-card,
  >article {
    background-color: var(--color-neutral-10);
    border: 1px solid var(--color-neutral-7);
    border-radius: var(--border-radius);
    overflow: clip;
    display: flex;
    flex-direction: column;

    >figure {
      margin: 0;
      height: 6rem;
      background: color-mix(in oklch, var(--color-color-2) 18%, transparent);
      display: flex;
      align-items: center;
      justify-content: center;

      >span {
        color: var(--color-neutral-5);
      }
    }

    >header {
      padding: var(--space-xs) var(--space-s) 0 var(--space-s);

      >h3 {
        margin: 0;
      }

      >p {
        margin: 0;
        color: var(--color-neutral-5);
      }
    }

    >dl {
      margin: 0;
      padding: var(--space-2xs) var(--space-s) var(--space-xs) var(--space-s);
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);

      >div {
        display: flex;
        justify-content: space-between;
        gap: var(--space-s);

        >dt {
          color: var(--color-neutral-5);
        }

        >dd {
          margin: 0;
        }
      }
    }
  }
}

/* chat-card-list */
chat-card-list {
  >.chat-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }
}

/* chat-actions: buttons that DO something - visually distinct from the
   pill-shaped answer chips */
chat-actions {
  >.chat-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    border-inline-start: 3px solid var(--color-color-1);
    padding: var(--space-2xs) 0 var(--space-2xs) var(--space-s);
  }
}

/* chat-hscroll: shared horizontal scroll row of clickable cards, used by
   every tappable industry list. The scroll SURFACE spans the full viewport
   (so nothing is clipped by the standard column); the wrapper insets the
   cards back to the content edge, and a trailing ::after gives run-off space
   so the last card clears the right edge. The message li drops its 80% cap
   for these components (see the :has() rule above). Rows are centered in the
   column, so 50%/50vw aligns. */
.chat-hscroll {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow-x: scroll;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: max(var(--space), (100vw - var(--content-max-width)) / 2);
  scrollbar-width: none;

  &::-webkit-scrollbar {
    inline-size: 0;
    display: none;
  }

  >.wrapper {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: var(--space-2xs);
    padding-inline-start: max(var(--space), (100vw - var(--content-max-width)) / 2);

    &::after {
      content: "";
      flex: 0 0 auto;
      align-self: stretch;
      padding-inline-end: max(var(--space), (100vw - var(--content-max-width)) / 2 - var(--space));
    }

    >li {
      flex: 0 0 auto;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    >li>.hscroll-card {
      width: 14rem;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--space-3xs);
      background-color: var(--color-neutral-10);
      border: 1px solid var(--color-neutral-7);
      border-radius: var(--border-radius);
      padding: var(--space-xs) var(--space-s);
      cursor: pointer;
      transition: border-color 0.2s;

      &:hover {
        border-color: var(--color-color-1);
      }

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

      &.disabled {
        cursor: default;
        opacity: 0.54;
      }

      >.title {
        margin: 0;
      }

      >.line {
        margin: 0;
        color: var(--color-neutral-5);
        font-size: var(--font-size--1);
      }

      >.line.amount {
        color: var(--color-neutral-2);
      }

      >.status {
        margin: 0;
        text-transform: capitalize;
        color: var(--color-neutral-5);
        font-size: var(--font-size--1);

        &.overdue,
        &.expired {
          color: var(--color-color-4);
        }
      }
    }
  }
}

.thinking {
  display: inline-flex;
  width: fit-content;
  padding: var(--space-2xs) var(--space-s);
  gap: var(--space-2xs);
  align-items: center;
  transition: opacity 0.3s ease, transform 0.3s ease;

  &.fade-out {
    opacity: 0;
    transform: translateY(0.25rem);
  }

  >span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-neutral-5);
    animation: thinking-bounce 1.2s infinite ease-in-out;

    &:nth-child(2) {
      animation-delay: 0.2s;
    }

    &:nth-child(3) {
      animation-delay: 0.4s;
    }
  }
}

/* pages: home + admin */
.page-header {
  >p {
    color: var(--color-neutral-5);
  }
}

.industry-list,
.admin-list {
  >ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);

    >li {
      background-color: var(--color-neutral-10);
      border: 1px solid var(--color-neutral-7);
      border-radius: var(--border-radius);
      padding: var(--space-xs) var(--space-s);

      >a {
        text-decoration: none;
      }

      >p {
        margin: 0;
        color: var(--color-neutral-5);
      }
    }
  }

  >form {
    margin-block-start: var(--space-s);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    align-items: start;
  }
}

.admin-form {
  >form {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    align-items: start;

    >div {
      display: flex;
      flex-direction: column;
      width: 100%;

      >label {
        gap: var(--space-3xs);
        width: 100%;
        color: var(--color-neutral-5);
      }

      >textarea {
        width: 100%;
      }
    }

    >fieldset {
      border: 1px solid var(--color-neutral-7);
      border-radius: var(--border-radius);
      padding: var(--space-xs) var(--space-s);
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-s);

      >.action-check {
        display: inline-flex;
        gap: var(--space-3xs);
        align-items: center;
      }
    }
  }

  >form+form {
    margin-block-start: var(--space-s);
  }
}

.admin-error {
  color: var(--color-color-9);
}

.admin-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);

  pre {
    background-color: var(--color-neutral-9);
    border-radius: var(--border-radius);
    padding: var(--space-s);
    overflow-x: auto;
    white-space: pre-wrap;
  }
}

@keyframes chat-pop-in {
  0% {
    opacity: 0;
    transform: translateY(0.5rem) scale(0.97);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes thinking-bounce {

  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }

  40% {
    opacity: 1;
    transform: translateY(-0.2rem);
  }
}