@layer components {
  /*
    Cartões de referência do CosplayBot.

    Dono único para as duas superfícies de conversa: widget flutuante e /chat.
    A estrutura não pertence a `components/chat.css` (widget) nem a
    `pages/chat_page.css` (standalone), porque ambas usam o mesmo contrato.
  */
  .chat-sources {
    display: grid;
    gap: var(--space-02, 0.5rem);
    max-width: 34rem;
    margin-top: var(--space-03, 0.75rem);
  }

  .chat-source-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-02, 0.5rem);
    width: 100%;
    padding: 0.5rem 0.625rem;
    background: linear-gradient(135deg, rgb(46 30 74 / 72%), rgb(16 17 28 / 94%));
    border: 1px solid rgb(183 148 255 / 22%);
    border-radius: var(--radius-md, 0.75rem);
    box-shadow: 0 4px 14px rgb(0 0 0 / 16%);
    color: var(--text-primary, #f3f4f6);
    text-decoration: none;
    transition: border-color var(--trans, 180ms ease), box-shadow var(--trans, 180ms ease), transform var(--transition-fast, 140ms ease);
  }

  .chat-source-card:hover {
    background: linear-gradient(135deg, rgb(67 43 109 / 82%), rgb(21 22 37 / 96%));
    border-color: rgb(166 255 248 / 58%);
    box-shadow: 0 7px 20px rgb(0 0 0 / 24%);
    color: var(--text-primary, #f3f4f6);
    opacity: 1;
    transform: translateY(-1px);
  }

  .chat-source-card--text-only {
    grid-template-columns: minmax(0, 1fr);
  }

  .chat-source-thumb {
    width: 44px;
    height: 44px;
    margin: 0;
    object-fit: cover;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: var(--radius-sm, 0.5rem);
  }

  .chat-source-content {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .chat-source-kind {
    color: var(--neon-cyan, #a6fff8);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .chat-source-title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-primary, #f3f4f6);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .chat-source-card:focus-visible {
    outline: 2px solid var(--neon-cyan, #a6fff8);
    outline-offset: 3px;
  }

  .light-mode .chat-source-card {
    background: linear-gradient(135deg, rgb(255 255 255 / 96%), rgb(247 244 255 / 98%));
    border-color: rgb(107 70 162 / 24%);
    box-shadow: 0 4px 14px rgb(55 30 84 / 10%);
  }

  .light-mode .chat-source-card:hover {
    background: linear-gradient(135deg, rgb(255 255 255 / 100%), rgb(238 230 255 / 100%));
    border-color: rgb(76 210 201 / 78%);
    box-shadow: 0 7px 20px rgb(55 30 84 / 16%);
  }
}