/*
 * Yapp - Fixfactor chat launcher.
 * Tokens only (ff-tokens v4.4+): every colour is a semantic token, so the
 * widget follows the light/dark register automatically. The launcher is a
 * floating element - the one place the design system allows a shadow.
 */

#ff-yapp {
    position: fixed;
    right: var(--space-6, 24px);
    bottom: var(--space-6, 24px);
    z-index: 1040; /* above sticky chrome (900), below modals (1050) */
    font-family: var(--font-stack, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-3, 12px);
}

/* --- Launcher ------------------------------------------------------------ */
/* Desktop: a pill with the team's faces and a label - a person, not an icon.
   Open state and mobile collapse to a 56px circle. */

#ff-yapp .yapp-launcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    height: 56px;
    min-width: 56px;
    padding: 0 var(--space-5, 20px);
    border: 0;
    border-radius: var(--radius-pill, 9999px);
    background: var(--action, #007a92);
    color: #fff;
    font-family: inherit;
    font-size: var(--text-base, 1rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: var(--shadow-large, 0 10px 25px rgba(0, 0, 0, 0.15));
    transition: background-color 0.2s ease;
}
@supports (color: light-dark(#fff, #000)) {
    /* Dark register: --action brightens to teal-300; text/glyphs flip to ink. */
    #ff-yapp .yapp-launcher { color: light-dark(#fff, var(--ink-950, #0a1f24)); }
}
#ff-yapp .yapp-launcher:hover { background: var(--action-hover, #005f73); }
#ff-yapp .yapp-launcher:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(0, 170, 196, 0.25)), var(--shadow-large);
}
#ff-yapp .yapp-launcher svg { width: 26px; height: 26px; flex: none; }

#ff-yapp .yapp-faces { display: inline-flex; align-items: center; }
#ff-yapp .yapp-faces img {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill, 9999px);
    object-fit: cover;
    display: block;
    border: 2px solid currentColor; /* ring matches the glyph colour in both schemes */
}
#ff-yapp .yapp-faces img + img { margin-left: -10px; }

#ff-yapp .yapp-launcher-label { white-space: nowrap; }
#ff-yapp .yapp-has-faces .yapp-ic-open { display: none; } /* faces replace the glyph */
#ff-yapp .yapp-launcher .yapp-ic-close { display: none; }

/* Open state: collapse to a circle with a close glyph. */
#ff-yapp .yapp-launcher[aria-expanded="true"] { padding: 0; width: 56px; }
#ff-yapp .yapp-launcher[aria-expanded="true"] .yapp-faces,
#ff-yapp .yapp-launcher[aria-expanded="true"] .yapp-launcher-label,
#ff-yapp .yapp-launcher[aria-expanded="true"] .yapp-ic-open { display: none; }
#ff-yapp .yapp-launcher[aria-expanded="true"] .yapp-ic-close { display: block; }

/* Mobile: always a circle - the pill would crowd small screens. */
@media (max-width: 767px) {
    #ff-yapp .yapp-launcher { padding: 0; width: 56px; }
    #ff-yapp .yapp-faces,
    #ff-yapp .yapp-launcher-label { display: none; }
    #ff-yapp .yapp-has-faces .yapp-ic-open { display: block; }
    #ff-yapp .yapp-launcher[aria-expanded="true"] .yapp-ic-open { display: none; }
}

/* --- Panel --------------------------------------------------------------- */

#ff-yapp .yapp-panel {
    order: -1; /* panel opens ABOVE the launcher; the button never leaves the corner */
    width: min(344px, calc(100vw - 32px));
    background: var(--surface, #fff);
    border: 1px solid var(--border-neutral, #d1d5db);
    border-radius: var(--radius-panel, 20px);
    box-shadow: var(--shadow-large, 0 10px 25px rgba(0, 0, 0, 0.15));
    overflow: hidden;
}
#ff-yapp .yapp-panel[hidden] { display: none; }

#ff-yapp .yapp-head {
    padding: var(--space-5, 20px) var(--space-5, 20px) var(--space-4, 16px);
    border-bottom: 1px solid var(--border-subtle, rgba(0, 170, 196, 0.15));
}
#ff-yapp .yapp-title {
    margin: 0;
    font-size: var(--text-lg, 1.125rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--content, #000);
}
#ff-yapp .yapp-sub {
    margin: 2px 0 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--content-secondary, #505050);
}

#ff-yapp .yapp-view { padding: var(--space-4, 16px) var(--space-5, 20px) var(--space-5, 20px); }
#ff-yapp .yapp-view[hidden] { display: none; }

#ff-yapp .yapp-kicker {
    margin: 0 0 var(--space-2, 8px);
    font-size: var(--text-2xs, 0.6875rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--content-secondary, #505050);
}

/* Department entries */
#ff-yapp .yapp-dept {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    width: 100%;
    min-height: 56px;
    margin: 0 0 var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--surface, #fff);
    border: 1px solid var(--border-neutral, #d1d5db);
    border-radius: var(--radius, 12px);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--content-body, #1a1a1a);
    transition: border-color 0.25s ease;
}
#ff-yapp .yapp-dept:hover { border-color: var(--border-interactive, rgba(0, 170, 196, 0.4)); }
#ff-yapp .yapp-dept:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--border-active, #00aac4); }

#ff-yapp .yapp-ic { width: 22px; height: 22px; flex: none; }
#ff-yapp .yapp-ic-wa { color: #25d366; } /* WhatsApp brand mark - external brand colour */

/* Department avatar: photo with a small WhatsApp badge overlay. */
#ff-yapp .yapp-dept-media { position: relative; flex: none; width: 44px; height: 44px; }
#ff-yapp .yapp-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill, 9999px);
    object-fit: cover;
    display: block;
}
#ff-yapp .yapp-dept-media .yapp-ic-wa {
    position: absolute;
    right: -4px;
    bottom: -2px;
    width: 20px;
    height: 20px;
    padding: 2px;
    background: var(--surface, #fff);
    border-radius: var(--radius-pill, 9999px);
    box-shadow: 0 0 0 1px var(--border-neutral, #d1d5db);
}

#ff-yapp .yapp-dept-text { display: flex; flex-direction: column; min-width: 0; }
#ff-yapp .yapp-dept-name { font-weight: 700; font-size: var(--text-base, 1rem); color: var(--content-strong, #111); }
#ff-yapp .yapp-dept-person { font-size: var(--text-sm, 0.875rem); color: var(--content-secondary, #505050); }
#ff-yapp .yapp-dept-arrow {
    margin-left: auto;
    color: var(--action, #007a92);
    transition: transform 0.2s ease;
}
#ff-yapp .yapp-dept:hover .yapp-dept-arrow { transform: translateX(3px); }

/* Secondary channels */
#ff-yapp .yapp-alt {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin-top: var(--space-4, 16px);
    padding-top: var(--space-4, 16px);
    border-top: 1px solid var(--border-subtle, rgba(0, 170, 196, 0.15));
}
#ff-yapp .yapp-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-height: 44px;
    padding: 0 var(--space-4, 16px);
    background: var(--surface, #fff);
    border: 1px solid var(--border-neutral, #d1d5db);
    border-radius: var(--radius-pill, 9999px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--content-body, #1a1a1a);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.25s ease;
}
#ff-yapp .yapp-chip:hover { border-color: var(--border-interactive, rgba(0, 170, 196, 0.4)); color: var(--content-body, #1a1a1a); }
#ff-yapp .yapp-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
#ff-yapp .yapp-chip .yapp-ic { width: 18px; height: 18px; color: var(--action, #007a92); }

/* Message view */
#ff-yapp .yapp-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin: 0 0 var(--space-3, 12px);
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--action, #007a92);
    cursor: pointer;
    min-height: 44px;
}
#ff-yapp .yapp-back:hover { color: var(--action-hover, #005f73); }
#ff-yapp .yapp-back:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-tag, 6px); }
#ff-yapp .yapp-back .yapp-ic { width: 16px; height: 16px; }

#ff-yapp .yapp-msg-dept {
    margin: 0 0 var(--space-2, 8px);
    font-weight: 700;
    color: var(--content-strong, #111);
}
#ff-yapp .yapp-input {
    width: 100%;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid var(--border-neutral, #d1d5db);
    border-radius: var(--radius-input, 10px);
    background: var(--surface, #fff);
    color: var(--content-body, #1a1a1a);
    font: inherit;
    font-size: var(--text-base, 1rem);
    resize: vertical;
    min-height: 88px;
}
#ff-yapp .yapp-input:focus-visible { outline: none; border-color: var(--border-active, #00aac4); box-shadow: var(--focus-ring); }

#ff-yapp .yapp-send {
    display: block;
    width: 100%;
    margin-top: var(--space-3, 12px);
    padding: var(--space-4, 16px);
    background: var(--action, #007a92);
    color: #fff;
    border: 0;
    border-radius: var(--radius, 12px);
    font: inherit;
    font-size: var(--text-base, 1rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
@supports (color: light-dark(#fff, #000)) {
    #ff-yapp .yapp-send { color: light-dark(#fff, var(--ink-950, #0a1f24)); }
}
#ff-yapp .yapp-send:hover { background: var(--action-hover, #005f73); }
#ff-yapp .yapp-send:focus-visible { outline: none; box-shadow: var(--focus-ring); }

#ff-yapp .yapp-note {
    margin: var(--space-2, 8px) 0 0;
    font-size: var(--text-xs, 0.75rem);
    color: var(--content-secondary, #505050);
}

#ff-yapp .yapp-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Entry motion - one small moment; static under reduced motion. */
#ff-yapp .yapp-panel {
    transform-origin: bottom right;
    animation: yapp-in 0.2s ease;
}
@keyframes yapp-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    #ff-yapp .yapp-panel { animation: none; }
    #ff-yapp .yapp-dept-arrow, #ff-yapp .yapp-dept:hover .yapp-dept-arrow { transition: none; transform: none; }
}

/* Mobile: dock the panel to the viewport edges. */
@media (max-width: 480px) {
    #ff-yapp { right: 16px; bottom: 16px; }
    #ff-yapp .yapp-panel { width: calc(100vw - 32px); max-height: calc(100dvh - 104px); overflow-y: auto; }
}