/* Shared rich emoji controls and inline JLA3D vector artwork. The SVG set
   inherits the active theme palette rather than carrying fixed colour files. */
.conversation-emoji {
    --jla-emoji-face: color-mix(in srgb, var(--teal, var(--orange)) 72%, var(--theme-surface, var(--paper)));
    --jla-emoji-accent: var(--orange, var(--teal-deep));
    --jla-emoji-ink: color-mix(in srgb, var(--ink, #17212a) 84%, var(--teal-deep, #2a7186));
    display: inline-block;
    width: 1.18em;
    height: 1.18em;
    flex: 0 0 auto;
    vertical-align: -.21em;
    overflow: visible;
}
.conversation-emoji__face { fill: var(--jla-emoji-face); stroke: var(--jla-emoji-ink); stroke-width: 3; }
.conversation-emoji__accent { fill: var(--jla-emoji-accent); stroke: var(--jla-emoji-ink); stroke-width: 2.5; }
.conversation-emoji__ink { fill: none; stroke: var(--jla-emoji-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.conversation-emoji__accent-stroke { fill: none; stroke: var(--jla-emoji-accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.conversation-emoji__ink--round { stroke-linecap: round; stroke-linejoin: round; }
.conversation-emoji__ink-fill { fill: var(--jla-emoji-ink); stroke: var(--jla-emoji-ink); stroke-width: 2; }
.conversation-emoji__light { fill: var(--theme-header-text, #fff); stroke: none; }
.conversation-emoji__rainbow { fill: none; stroke: var(--jla-emoji-accent); stroke-width: 6; stroke-linecap: round; }

html[data-jla-emoji-pack="halloween"] .conversation-emoji,
html[data-jla-emoji-pack="bonfire-night"] .conversation-emoji { --jla-emoji-face: color-mix(in srgb, var(--orange) 68%, var(--theme-surface, #171719)); --jla-emoji-accent: color-mix(in srgb, var(--orange) 82%, var(--ink, #171719)); }
html[data-jla-emoji-pack="christmas"] .conversation-emoji,
html[data-jla-emoji-pack="winter-sale"] .conversation-emoji { --jla-emoji-face: color-mix(in srgb, var(--teal) 50%, var(--theme-surface, #17212a)); --jla-emoji-accent: color-mix(in srgb, var(--orange) 55%, var(--teal)); }
html[data-jla-emoji-pack="valentines"] .conversation-emoji,
html[data-jla-emoji-pack="mothers-day"] .conversation-emoji { --jla-emoji-face: color-mix(in srgb, var(--teal) 55%, var(--theme-surface, #fff)); --jla-emoji-accent: color-mix(in srgb, var(--orange) 62%, #d54f81); }
html[data-jla-emoji-pack="pride"] .conversation-emoji { --jla-emoji-face: color-mix(in srgb, var(--violet) 54%, var(--theme-surface, #211a31)); --jla-emoji-accent: color-mix(in srgb, var(--orange) 52%, #ff5a8f); }
html[data-jla-emoji-pack="earth-day"] .conversation-emoji,
html[data-jla-emoji-pack="st-patricks"] .conversation-emoji { --jla-emoji-face: color-mix(in srgb, var(--teal) 68%, var(--theme-surface, #143126)); --jla-emoji-accent: color-mix(in srgb, var(--orange) 45%, var(--teal)); }
html[data-jla-emoji-pack="new-year"] .conversation-emoji,
html[data-jla-emoji-pack="anniversary"] .conversation-emoji { --jla-emoji-face: color-mix(in srgb, var(--teal) 50%, var(--theme-surface, #1c2024)); --jla-emoji-accent: color-mix(in srgb, var(--orange) 70%, var(--ink, #1c2024)); }

.conversation-emoji-trigger {
    display: inline-grid;
    width: 34px;
    min-width: 34px;
    height: 34px;
    margin: 0 0 0 7px;
    padding: 0;
    place-items: center;
    align-self: center;
    border: 1px solid var(--line, #455158);
    border-radius: 7px;
    background: var(--theme-surface-muted, var(--paper-deep));
    color: var(--ink);
    cursor: pointer;
}
.conversation-emoji-trigger:hover,
.conversation-emoji-trigger:focus-visible,
.conversation-emoji-trigger[aria-expanded="true"] { border-color: var(--orange, var(--teal-deep)); background: color-mix(in srgb, var(--orange, var(--teal-deep)) 14%, var(--theme-surface-muted, var(--paper-deep))); outline: none; }
.conversation-emoji-trigger .conversation-emoji { font-size: 1.13rem; }

/* Emoji and Send are one action cluster in every conversation composer.  The
   picker is injected after the text area, so this wrapper prevents it from
   becoming a second row when the host composer uses CSS grid. */
.conversation-composer-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-self: end;
    align-items: stretch;
    gap: 7px;
    min-width: 0;
}
.conversation-composer-actions .conversation-emoji-trigger { margin: 0; }

/* Project discussion composers use a flexible writer plus the paired actions. */
.client-portal__composer > .client-portal__composer-row { grid-template-columns: minmax(0, 1fr) auto; }
.client-portal__composer-row .conversation-composer-actions .conversation-emoji-trigger {
    width: var(--admin-control-height, 40px);
    min-width: var(--admin-control-height, 40px);
    height: var(--admin-control-height, 40px);
    border-radius: 6px;
}

/* Full-page buyer/admin conversations and the two fixed side chats retain
   their compact control height while reserving one shared final grid column
   for Emoji + Send. */
.buyer-account__composer-row--compact,
.admin-conversation-workspace__composer,
.buyer-conversation-dock__composer-controls,
.admin-conversation-dock__composer-controls { grid-template-columns: 46px minmax(0, 1fr) auto; }
.buyer-account__composer-row--compact .conversation-composer-actions,
.admin-conversation-workspace__composer .conversation-composer-actions,
.buyer-conversation-dock__composer-controls .conversation-composer-actions,
.admin-conversation-dock__composer-controls .conversation-composer-actions { align-self: stretch; }
.buyer-account__composer-row--compact .conversation-composer-actions .conversation-emoji-trigger,
.admin-conversation-workspace__composer .conversation-composer-actions .conversation-emoji-trigger,
.buyer-conversation-dock__composer-controls .conversation-composer-actions .conversation-emoji-trigger,
.admin-conversation-dock__composer-controls .conversation-composer-actions .conversation-emoji-trigger {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: 6px;
}

/* Quote correspondence keeps its file controls in their original order, with
   the emoji trigger joining Send in the final action row. */
.quote-reply-form .conversation-composer-actions { justify-self: start; }

.conversation-emoji-picker {
    position: fixed;
    z-index: 10050;
    display: grid;
    gap: 9px;
    max-height: min(430px, calc(100dvh - 24px));
    padding: 12px;
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--orange, var(--teal-deep)) 52%, var(--line, #465057));
    border-radius: 11px;
    background: color-mix(in srgb, var(--theme-surface, var(--paper)) 94%, var(--ink, #101518));
    box-shadow: 0 19px 48px rgb(0 0 0 / 32%);
    color: var(--ink);
}
/* An emoji picker inside a modal dialog must remain inside the dialog's top
   layer. Temporarily allow the fixed picker to extend beyond its panel. */
dialog.conversation-emoji-picker-host { overflow: visible; }
dialog.conversation-emoji-picker-host .conversation-emoji-picker { z-index: 2; }
.conversation-emoji-picker[hidden] { display: none !important; }
.conversation-emoji-picker > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.conversation-emoji-picker > header strong { color: var(--ink); font-size: .78rem; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.conversation-emoji-picker__close { min-height: 28px; padding: 4px 7px; border: 1px solid var(--line, #465057); border-radius: 5px; background: transparent; color: var(--muted, var(--slate)); font: inherit; font-size: .68rem; font-weight: 800; cursor: pointer; }
.conversation-emoji-picker__search { box-sizing: border-box; width: 100%; min-height: 35px; padding: 7px 9px; border: 1px solid var(--line, #465057); border-radius: 6px; background: var(--theme-surface-input, var(--paper-deep)); color: var(--ink); font: inherit; font-size: .78rem; }
.conversation-emoji-picker__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.conversation-emoji-picker__option { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 5px; min-height: 39px; align-items: center; padding: 5px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--ink); font: 760 .62rem/1.2 var(--font-body, sans-serif); text-align: left; cursor: pointer; }
.conversation-emoji-picker__option:hover,
.conversation-emoji-picker__option:focus-visible { border-color: var(--orange, var(--teal-deep)); background: color-mix(in srgb, var(--orange, var(--teal-deep)) 12%, transparent); outline: none; }
.conversation-emoji-picker__option .conversation-emoji { width: 21px; height: 21px; font-size: 21px; }
.conversation-emoji-picker__note { margin: 0; color: var(--muted, var(--slate)); font-size: .66rem; line-height: 1.45; }

@media (max-width: 520px) {
    .conversation-emoji-picker__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .conversation-emoji-picker__option { grid-template-columns: 22px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .conversation-emoji-picker { scroll-behavior: auto; } }