/* Presence in the attendance chat: your profile card, live "typing/recording" hints and the
   public profile card of the person on the other side. Shared by the attendant and customer screens. */

/* ---------- Your profile card (bottom of the conversations list) ---------- */
.attendance-workspace .sidebar-left .profile-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 11px;
    row-gap: 5px;
    min-height: 0;
    margin: auto 12px 12px;
    padding: 64px 12px 12px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-sidebar);
    box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.attendance-workspace .sidebar-left .profile-section:hover {
    border-color: color-mix(in srgb, var(--primary-color) 40%, var(--border-color));
    box-shadow: 0 6px 18px rgb(15 23 42 / 9%);
}
.attendance-workspace .sidebar-left .profile-section:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
/* A defined strip with rounded corners instead of a banner fading into the sidebar. */
.attendance-workspace .sidebar-left .profile-banner {
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: 56px;
    margin: 0;
    opacity: 1;
    border-radius: 13px 13px 0 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 70%, #0f172a), var(--primary-color));
    overflow: hidden;
}
.attendance-workspace .sidebar-left .profile-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.attendance-workspace .sidebar-left .profile-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 22%));
}
.attendance-workspace .sidebar-left .profile-section .avatar-wrapper {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    position: relative;
    margin: -30px 0 0;
}
/* Avatar ring in the presence colour (data-presence comes from profile_presence.js). */
.attendance-workspace .sidebar-left .profile-section .profile-pic {
    display: block;
    width: 46px;
    height: 46px;
    margin: 0;
    border: 3px solid var(--bg-sidebar);
    border-radius: 50%;
    background: var(--bg-sidebar);
    box-shadow: 0 0 0 2px var(--presence-color, var(--primary-color));
    object-fit: cover;
}
.attendance-workspace .sidebar-left .profile-section h2 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    min-width: 0;
    margin: 0;
    color: var(--text-main);
    line-height: 1.3;
    font-size: 14px;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Each custom font keeps its own optical size, a little larger than in lists. */
.attendance-workspace .sidebar-left .profile-section h2.font-gothic { font-size: 18px; }
.attendance-workspace .sidebar-left .profile-section h2.font-cyber { font-size: 12px; }
.attendance-workspace .sidebar-left .profile-section h2.font-nobre { font-size: 13px; }
.attendance-workspace .sidebar-left .profile-section h2.font-arcade { font-size: 9px; line-height: 1.8; }
.attendance-workspace .sidebar-left .profile-section h2.font-marker { font-size: 14px; }
.attendance-workspace .sidebar-left .profile-section h2.font-script { font-size: 15px; }
.attendance-workspace .sidebar-left .profile-section h2.font-brutal { font-size: 11.5px; }
.attendance-workspace .sidebar-left .profile-section h2.font-amatic { font-size: 19px; }
.attendance-workspace .sidebar-left .profile-section h2.font-caacupe { font-size: 15px; }
.attendance-workspace .sidebar-left .profile-section h2.font-cinzel { font-size: 14px; }
.attendance-workspace .sidebar-left .profile-section h2.font-creepster { font-size: 15px; }
.attendance-workspace .sidebar-left .profile-section h2.font-dancing { font-size: 17px; }
.attendance-workspace .sidebar-left .profile-section h2.font-hachi { font-size: 12px; }
.attendance-workspace .sidebar-left .profile-section h2.font-philosopher { font-size: 14px; }
.attendance-workspace .sidebar-left .profile-section h2.font-rocksalt { font-size: 11px; line-height: 1.6; }
.attendance-workspace .sidebar-left .profile-section h2.font-skranji { font-size: 14px; }
.attendance-workspace .sidebar-left .profile-section h2.font-yuyu { font-size: 15px; }
.attendance-workspace .sidebar-left .profile-section .status-badge {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--presence-color, #22c55e) 13%, transparent);
    color: var(--presence-text, var(--accent-text));
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.attendance-workspace .sidebar-left .profile-section .status-badge::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin: 0;
    border-radius: 50%;
    background: var(--presence-color, #22c55e);
    box-shadow: none;
}
.attendance-workspace .sidebar-left .profile-section .profile-edit-indicator {
    /* No grid placement: an absolute grid child would be positioned inside its grid area. */
    grid-area: auto;
    position: absolute;
    top: 7px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: 50%;
    background: rgb(15 23 42 / 45%);
    color: #fff;
    font-size: 11px;
    backdrop-filter: blur(4px);
    transition: background-color .15s ease, transform .15s ease;
}
.attendance-workspace .sidebar-left .profile-section:hover .profile-edit-indicator,
.attendance-workspace .sidebar-left .profile-section:focus-visible .profile-edit-indicator {
    background: var(--primary-color);
    border-color: transparent;
}
@media (max-width: 760px) {
    .attendance-workspace .sidebar-left .profile-section { margin: auto 10px 10px; }
}

/* ---------- "Marina está digitando…" ---------- */
/* Room under the last message so the floating hint never covers it. */
.attendance-workspace #chat-container #chat-log,
.client-workspace #chat-container #chat-log { padding-bottom: 48px; }
body #status-digitacao.chat-activity {
    position: absolute;
    left: 24px;
    right: auto;
    bottom: 10px;
    z-index: 3;
    width: auto;
    max-width: calc(100% - 96px);
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    font-style: normal;
    pointer-events: none;
}
.chat-activity-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 12px 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-card, var(--bg-sidebar));
    color: var(--text-muted);
    box-shadow: 0 4px 14px rgb(15 23 42 / 8%);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    animation: chat-activity-in .18s ease-out;
}
.chat-activity-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-activity-dots { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.chat-activity-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-text, var(--primary-color));
    opacity: .35;
    animation: chat-activity-dot 1.2s ease-in-out infinite;
}
.chat-activity-dots span:nth-child(2) { animation-delay: .15s; }
.chat-activity-dots span:nth-child(3) { animation-delay: .3s; }
.chat-activity-mic { display: inline-flex; flex-shrink: 0; color: #e5484d; font-size: 12px; animation: chat-activity-pulse 1.4s ease-in-out infinite; }
@keyframes chat-activity-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes chat-activity-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@keyframes chat-activity-pulse { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
    .chat-activity-pill, .chat-activity-dots span, .chat-activity-mic { animation: none; }
    .chat-activity-dots span { opacity: .75; }
}
@media (max-width: 760px) {
    body #status-digitacao.chat-activity { left: 14px; bottom: 8px; max-width: calc(100% - 72px); }
}

/* ---------- Avatars and names that open a profile card ---------- */
.profile-card-trigger,
.attendance-workspace #chat-log .stream-message-row.received .msg-avatar,
.attendance-workspace #chat-log .stream-message-row.received .msg-author[data-author],
.client-workspace #chat-log .stream-message-row.received .msg-avatar,
.client-workspace #chat-log .stream-message-row.received .msg-author,
.header-support-info.has-agent-profile #support-agent-name { cursor: pointer; }
#active-chat-title.profile-card-trigger:hover,
#right-panel-client-name.profile-card-trigger:hover,
.header-support-info.has-agent-profile #support-agent-name:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#active-chat-avatar.profile-card-trigger,
#right-panel-client-img.profile-card-trigger { transition: box-shadow .15s ease; }
#active-chat-avatar.profile-card-trigger:hover,
#right-panel-client-img.profile-card-trigger:hover,
.support-profile-button:not(:disabled):hover { box-shadow: 0 0 0 2px var(--bg-sidebar, var(--bg-card)), 0 0 0 4px color-mix(in srgb, var(--primary-color) 45%, transparent); }
#active-chat-avatar.profile-card-trigger:focus-visible,
#right-panel-client-img.profile-card-trigger:focus-visible,
.support-profile-button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-sidebar, var(--bg-card)), 0 0 0 4px var(--primary-color); }
.support-profile-button { padding: 0; font: inherit; cursor: pointer; transition: box-shadow .15s ease; }
.support-profile-button:disabled { cursor: default; opacity: 1; }

/* ---------- Public profile card (same look as the Communities member card) ---------- */
.public-profile-overlay { padding: 20px; }
.public-profile-dialog { position: relative; width: min(640px, 100%); max-height: calc(100dvh - 40px); overflow: auto; overscroll-behavior: contain; border-radius: 24px; }
.public-profile-dialog:not(.has-poster) { width: min(400px, 100%); }
.public-profile-dialog .split-profile-card { max-width: none; gap: 16px; }
.public-profile-dialog .profile-card-left-poster { width: 220px; min-height: 340px; }
.public-profile-dialog:not(.has-poster) .profile-card-left-poster { display: none; }
.public-profile-dialog .profile-card-right-info { min-width: 0; }
.public-profile-dialog .card-info-banner-wrap { height: 118px; }
.public-profile-dialog [hidden] { display: none !important; }
.public-profile-dialog .card-info-header-row { gap: 12px; }
.public-profile-titles { min-width: 0; }
.public-profile-titles h3 { overflow-wrap: anywhere; line-height: 1.3; }
.public-profile-dialog .status-greeting-pill[data-presence] { flex-shrink: 0; color: var(--presence-text); background: color-mix(in srgb, var(--presence-color) 14%, transparent); white-space: nowrap; }
.public-profile-dialog .avatar-online-dot[data-presence] { background: var(--presence-color); }
.public-profile-dialog .card-bio-paragraph { margin: 0; white-space: pre-line; }
.public-profile-dialog .card-bio-paragraph.is-empty { color: #949ba4; font-style: italic; }
body:not(.dark-mode) .public-profile-dialog .card-bio-paragraph.is-empty { color: #6b7280; }
.public-profile-status { margin: 12px 0 0; font-size: 12px; color: #949ba4; }
body:not(.dark-mode) .public-profile-status { color: #6b7280; }
.public-profile-status:empty { display: none; }
.public-profile-dialog.is-loading .card-info-body { opacity: .75; }
.public-profile-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 50%;
    background: rgb(17 18 20 / 62%);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    backdrop-filter: blur(6px);
}
.public-profile-close:hover { background: rgb(17 18 20 / 82%); }
.public-profile-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 720px) {
    .public-profile-overlay { padding: 14px; }
    .public-profile-dialog, .public-profile-dialog:not(.has-poster) { width: min(400px, 100%); }
    .public-profile-dialog .profile-card-left-poster { display: none; }
}