/*
 * Chat do backoffice (App\Filament\Pages\Chat), com o mesmo aspeto do chat da app móvel:
 * cores de theme/colors.ts da app (bolhas, fundo, vistos) e o verde da marca.
 */

.hc-chat {
    --hc-bg: #f2f2f6;
    --hc-card: #fff;
    --hc-bubble-out: #d9f7de;
    --hc-text: #000;
    --hc-muted: #6c6c70;
    --hc-pill: #e5e5ea;
    --hc-separator: #c6c6c8;
    --hc-primary: #49c760;
    --hc-chip-active: #d2e8d0;
    --hc-chip-active-text: #0f1f11;
    --hc-read: #007aff;
    --hc-row-active: #f2f2f7;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    /* Altura do ecrã menos a barra de topo (4rem), o espaço acima (2rem) e abaixo (3rem) da página. */
    height: calc(100dvh - 9rem);
    min-height: 420px;
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--hc-card);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    outline: 1px solid rgb(3 7 18 / 0.05);
    color: var(--hc-text);
}

.dark .hc-chat {
    --hc-bg: #000;
    --hc-card: #1c1c1e;
    --hc-bubble-out: #1c4a2a;
    --hc-text: #fff;
    --hc-muted: rgb(235 235 245 / 0.6);
    --hc-pill: #2c2c2e;
    --hc-separator: #38383a;
    --hc-chip-active: #2a4a2e;
    --hc-chip-active-text: #d2e8d0;
    --hc-read: #0a84ff;
    --hc-row-active: #2c2c2e;

    outline-color: rgb(255 255 255 / 0.1);
}

@media (min-width: 768px) {
    .hc-chat {
        grid-template-columns: 22rem minmax(0, 1fr);
    }
}

@media (min-width: 1280px) {
    .hc-chat {
        grid-template-columns: 26rem minmax(0, 1fr);
    }
}

/* No telemóvel o chat ocupa o ecrã de ponta a ponta, como na app, e mostra a lista ou a conversa. */
@media (max-width: 767px) {
    .hc-chat {
        height: calc(100dvh - 4rem);
        margin: -2rem -1rem -3rem;
        border-radius: 0;
        box-shadow: none;
        outline: none;
    }

    .hc-chat--open .hc-list,
    .hc-chat:not(.hc-chat--open) .hc-thread {
        display: none;
    }
}

.hc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.hc-icon {
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
}

.hc-icon-sm {
    display: inline-block;
    width: 0.9375rem;
    height: 0.9375rem;
    flex-shrink: 0;
}

/* ---------- Lista de conversas ---------- */

.hc-list {
    display: flex;
    min-height: 0;
    flex-direction: column;
    background: var(--hc-card);
    border-inline-end: 1px solid var(--hc-separator);
}

.hc-list__top {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem 0.25rem;
}

.hc-search {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    padding: 0 0.625rem;
    background: rgb(118 118 128 / 0.12);
    color: var(--hc-muted);
}

.hc-search__icon {
    width: 1.125rem;
    height: 1.125rem;
}

.hc-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    padding: 0;
    font-size: 1rem;
    color: var(--hc-text);
    background: transparent;
    box-shadow: none;
}

.hc-search input:focus {
    outline: none;
    box-shadow: none;
}

.hc-search input::placeholder {
    color: var(--hc-muted);
}

.hc-chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    scrollbar-width: none;
}

.hc-chip {
    height: 2rem;
    flex-shrink: 0;
    border-radius: 9999px;
    padding: 0 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hc-muted);
    background: var(--hc-pill);
}

.hc-chip--active {
    color: var(--hc-chip-active-text);
    background: var(--hc-chip-active);
}

.hc-list__items {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 1rem;
}

.hc-list__empty {
    padding: 2.5rem 1.25rem 0;
    font-size: 0.9375rem;
    text-align: center;
    color: var(--hc-muted);
}

.hc-list__section {
    padding: 1rem 1rem 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--hc-muted);
}

.hc-row {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.875rem;
    padding-inline-start: 1rem;
    text-align: start;
}

.hc-row:hover,
.hc-row:focus-visible,
.hc-row--active {
    background: var(--hc-row-active);
    outline: none;
}

/* Separador a começar no texto, como na app. */
.hc-row__main {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.875rem 1rem 0.875rem 0;
    border-bottom: 0.5px solid var(--hc-separator);
}

.hc-row__line {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.hc-row__name {
    overflow: hidden;
    font-size: 1.0625rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hc-row__time {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--hc-muted);
}

.hc-row__preview {
    overflow: hidden;
    flex: 1;
    font-size: 0.9375rem;
    color: var(--hc-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hc-row--unread .hc-row__time {
    font-weight: 700;
    color: var(--hc-primary);
}

@media (min-width: 768px) {
    .hc-row__name {
        font-size: 0.9375rem;
    }

    .hc-row__preview {
        font-size: 0.875rem;
    }
}

.hc-badge {
    display: inline-flex;
    min-width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #fff;
    background: var(--hc-primary);
}

.hc-badge--muted {
    background: #8e8e93;
}

.hc-row__muted {
    color: var(--hc-muted);
}

/* ---------- Avatares ---------- */

.hc-avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 9999px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, #a7a7ac, #8e8e93);
}

.hc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hc-avatar--group {
    background: var(--hc-primary);
}

.hc-avatar__icon {
    width: 55%;
    height: 55%;
}

.hc-avatar--sm {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.6875rem;
}

.hc-avatar--md {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.875rem;
}

.hc-avatar--lg {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.125rem;
}

@media (min-width: 768px) {
    .hc-avatar--lg {
        width: 3rem;
        height: 3rem;
        font-size: 1rem;
    }
}

.hc-avatar-spacer {
    width: 1.75rem;
    flex-shrink: 0;
}

/* ---------- Conversa ---------- */

.hc-thread {
    display: flex;
    min-height: 0;
    min-width: 0;
    flex-direction: column;
    background: var(--hc-bg);
}

.hc-thread__header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    border-bottom: 0.5px solid var(--hc-separator);
    background: var(--hc-card);
}

.hc-thread__back {
    display: inline-flex;
    margin-inline-start: -0.5rem;
    color: var(--hc-primary);
}

@media (min-width: 768px) {
    .hc-thread__back {
        display: none;
    }
}

.hc-thread__title {
    min-width: 0;
    flex: 1;
}

.hc-thread__name {
    overflow: hidden;
    font-size: 1.0625rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hc-thread__subtitle {
    overflow: hidden;
    font-size: 0.75rem;
    color: var(--hc-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hc-thread__action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 9999px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--hc-primary);
}

.hc-thread__action:hover {
    background: var(--hc-row-active);
}

@media (max-width: 639px) {
    .hc-thread__action span {
        display: none;
    }
}

.hc-thread__messages {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem 1rem 1rem;
}

@media (min-width: 1024px) {
    .hc-thread__messages {
        padding-inline: 4%;
    }
}

.hc-older {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
}

.hc-older button {
    border-radius: 9999px;
    padding: 0.25rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--hc-primary);
    background: var(--hc-card);
}

.hc-thread__hint,
.hc-thread__placeholder {
    margin: auto;
    padding: 2rem 1rem;
    font-size: 0.9375rem;
    text-align: center;
    color: var(--hc-muted);
}

.hc-thread__placeholder {
    display: flex;
    max-width: 22rem;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.hc-thread__placeholder-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--hc-text);
}

.hc-placeholder-icon {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--hc-primary);
}

.hc-day {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 0.625rem 0 0.25rem;
}

.hc-day span {
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--hc-muted);
    background: var(--hc-pill);
}

/* ---------- Mensagens ---------- */

.hc-msg {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 2px;
}

.hc-msg--starts {
    margin-top: 10px;
}

.hc-msg--mine {
    justify-content: flex-end;
}

.hc-bubble {
    position: relative;
    display: flex;
    max-width: min(80%, 34rem);
    flex-direction: column;
    gap: 0.125rem;
    border-radius: 16px;
    padding: 6px 10px 5px;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--hc-text);
    background: var(--hc-card);
    box-shadow: 0 1px 1px rgb(0 0 0 / 0.08);
}

.hc-msg--mine .hc-bubble {
    background: var(--hc-bubble-out);
}

/* Como no WhatsApp: a primeira bolha de cada grupo tem o canto de cima, do lado de quem fala, em bico. */
.hc-bubble--tail {
    border-top-left-radius: 4px;
}

.hc-msg--mine .hc-bubble--tail {
    border-top-left-radius: 16px;
    border-top-right-radius: 4px;
}

.hc-bubble--image {
    padding: 4px 4px 5px;
}

.hc-bubble__author {
    font-size: 0.8125rem;
    font-weight: 600;
}

.hc-bubble--image .hc-bubble__author,
.hc-bubble--image .hc-bubble__text,
.hc-bubble--image .hc-bubble__meta {
    margin-inline: 6px;
}

.hc-name-0 { color: #ff9500; }
.hc-name-1 { color: #af52de; }
.hc-name-2 { color: #30b0c7; }
.hc-name-3 { color: #ff2d55; }
.hc-name-4 { color: #5856d6; }
.hc-name-5 { color: #007aff; }

.dark .hc-name-0 { color: #ff9f0a; }
.dark .hc-name-1 { color: #bf5af2; }
.dark .hc-name-2 { color: #40c8e0; }
.dark .hc-name-3 { color: #ff375f; }
.dark .hc-name-4 { color: #5e5ce6; }
.dark .hc-name-5 { color: #0a84ff; }

.hc-bubble__text {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.hc-bubble__deleted {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--hc-muted);
}

.hc-bubble__meta {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: var(--hc-muted);
}

.hc-check {
    width: 15px;
    height: 12px;
    fill: none;
    stroke: var(--hc-muted);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hc-check--double {
    width: 18px;
}

.hc-check--read {
    stroke: var(--hc-read);
}

.hc-bubble__image {
    display: block;
    overflow: hidden;
    border-radius: 12px;
}

.hc-bubble__image img {
    display: block;
    width: min(260px, 60vw);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.hc-bubble__file {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.25rem 0;
    color: var(--hc-primary);
    text-decoration: underline;
}

.hc-bubble__file span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Menu da mensagem: seta no canto da bolha, à vista ao passar o rato (sempre em ecrãs táteis). */
.hc-bubble__menu {
    position: absolute;
    top: 2px;
    right: 4px;
    opacity: 0;
    transition: opacity 120ms;
}

.hc-bubble:hover .hc-bubble__menu,
.hc-bubble__menu:focus-within {
    opacity: 1;
}

/* Em ecrãs táteis a seta fica sempre visível: reserva-lhe espaço para não tapar o texto. */
@media (hover: none) {
    .hc-bubble__menu {
        opacity: 0.6;
    }

    .hc-bubble:has(.hc-bubble__menu) {
        padding-right: 26px;
    }
}

.hc-bubble__menu-trigger {
    display: inline-flex;
    border-radius: 9999px;
    padding: 2px;
    color: var(--hc-muted);
    background: var(--hc-card);
    box-shadow: 0 0 6px 4px var(--hc-card);
}

.hc-msg--mine .hc-bubble__menu-trigger {
    background: var(--hc-bubble-out);
    box-shadow: 0 0 6px 4px var(--hc-bubble-out);
}

/* ---------- Caixa de escrita ---------- */

.hc-composer {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
    background: var(--hc-bg);
}

.hc-composer__row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.hc-composer__field {
    display: flex;
    min-height: 2.75rem;
    min-width: 0;
    flex: 1;
    align-items: flex-end;
    border-radius: 1.5rem;
    padding: 0 0.375rem 0 0.875rem;
    background: var(--hc-card);
}

.hc-composer__field:focus-within {
    box-shadow: 0 0 0 2px var(--hc-primary);
}

.hc-composer__field textarea {
    max-height: 10rem;
    min-width: 0;
    flex: 1;
    resize: none;
    border: 0;
    padding: 0.6875rem 0;
    font-size: 1rem;
    line-height: 1.375rem;
    color: var(--hc-text);
    background: transparent;
    box-shadow: none;
}

.hc-composer__field textarea:focus {
    outline: none;
    box-shadow: none;
}

.hc-composer__field textarea::placeholder {
    color: var(--hc-muted);
}

.hc-composer__attach {
    display: inline-flex;
    width: 2.25rem;
    height: 2.75rem;
    flex-shrink: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--hc-text);
}

.hc-composer__send {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: #fff;
    background: var(--hc-primary);
    transition: background-color 120ms;
}

.hc-composer__send--busy {
    pointer-events: none;
    opacity: 0.6;
}

.hc-composer__send:disabled {
    color: var(--hc-muted);
    background: var(--hc-pill);
}

.hc-composer__attachment {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    align-self: flex-start;
    gap: 0.375rem;
    border-radius: 0.875rem;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    background: var(--hc-card);
}

.hc-composer__attachment span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hc-composer__attachment button {
    display: inline-flex;
    border-radius: 9999px;
    padding: 0.125rem;
    color: var(--hc-muted);
    background: var(--hc-pill);
}

.hc-composer__error {
    padding-inline: 0.875rem;
    font-size: 0.8125rem;
    color: #ff3b30;
}

/* Respostas rápidas */
.hc-composer__quick {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: var(--hc-primary);
    background: var(--hc-card);
}

.hc-composer__quick:hover {
    background: var(--hc-row-active);
}

.hc-quick__title {
    display: block;
    font-weight: 600;
}

.hc-quick__body {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.8125rem;
    color: var(--hc-muted);
    white-space: normal;
}

.hc-quick__empty {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--hc-muted);
}

/* Notas privadas (modal fora do .hc-chat: usa as cores do Filament) */
.hc-notes {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hc-notes__item {
    border-radius: 0.75rem;
    padding: 0.75rem 0.875rem;
    background: var(--gray-50);
}

.dark .hc-notes__item {
    background: var(--gray-800);
}

.hc-notes__meta {
    font-size: 0.8125rem;
    color: var(--gray-500);
}

.hc-notes__meta strong {
    color: var(--gray-950);
}

.dark .hc-notes__meta strong {
    color: var(--gray-100);
}

.hc-notes__body {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    white-space: pre-line;
}

.hc-notes__empty {
    font-size: 0.875rem;
    color: var(--gray-500);
}