/* Portfolio Displays — Messenger (Q&A). Every selector lives under .pfd-chat.
   Colours and sizes are custom properties so the Elementor style controls only
   have to set a variable. */

.pfd-chat {
  --pfd-chat-bg: var(--pfd-bg, #fff);
  --pfd-chat-fg: var(--pfd-fg, #000);
  --pfd-chat-rule: var(--pfd-line, rgba(0, 0, 0, .08));
  --pfd-chat-owner-bg: #f0eee9;
  --pfd-chat-owner-fg: var(--pfd-chat-fg);
  --pfd-chat-me-bg: var(--pfd-chat-fg);
  --pfd-chat-me-fg: var(--pfd-chat-bg);
  --pfd-chat-chip-bg: transparent;
  --pfd-chat-chip-fg: var(--pfd-chat-fg);
  --pfd-chat-chip-line: rgba(0, 0, 0, .2);
  /* Hover is a tint, not the filled look: that belongs to the closing button. */
  --pfd-chat-chip-hover-bg: var(--pfd-chat-owner-bg);
  --pfd-chat-chip-hover-fg: var(--pfd-chat-chip-fg);
  --pfd-chat-chip-radius: 19px;
  --pfd-chat-radius: 22px;
  --pfd-chat-bubble: 20px;
  --pfd-chat-shadow: var(--pfd-shadow-soft), 0 0 0 1px var(--pfd-line);
  --pfd-chat-h: 620px;
  --pfd-chat-maxw: 480px;
  /* Set by pfd-chat.js: what sits above the chat on a phone, and the floating menu below it. */
  --pfd-chat-top: 0px;
  --pfd-chat-dock: 0px;

  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: var(--pfd-chat-maxw); margin-left: auto; margin-right: auto;
  height: var(--pfd-chat-h); min-height: 280px;
  max-height: calc(100vh - 24px - var(--pfd-chat-dock)); max-height: calc(100dvh - 24px - var(--pfd-chat-dock));
  background: var(--pfd-chat-bg); color: var(--pfd-chat-fg);
  border-radius: var(--pfd-chat-radius); box-shadow: var(--pfd-chat-shadow);
  overflow: hidden; text-align: left;
  font-family: var(--pfd-font-body); font-size: 15px; line-height: 1.42;
}
.pfd-theme-dark .pfd-chat { --pfd-chat-owner-bg: rgba(255, 255, 255, .14); --pfd-chat-chip-line: rgba(255, 255, 255, .32); }

/* ---------- Header ---------- */
.pfd-chat__head { flex: none; display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 14px 12px 16px; border-bottom: 1px solid var(--pfd-chat-rule); }
.pfd-chat__head--bare { min-height: 0; padding: 8px 10px; }
.pfd-chat:not(.is-started) .pfd-chat__head--bare { display: none; }
.pfd-chat__avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: var(--pfd-chat-owner-bg); }
.pfd-chat .pfd-chat__avatar img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pfd-chat__avatar--initial { display: grid; place-items: center; background: var(--pfd-chat-fg); color: var(--pfd-chat-bg); font: 600 17px/1 var(--pfd-font-ui); text-transform: uppercase; }
.pfd-chat__who { flex: 1 1 auto; min-width: 0; }
.pfd-chat__name { font: 600 15px/1.25 var(--pfd-font-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfd-chat__status { margin-top: 2px; font: 400 12.5px/1.3 var(--pfd-font-ui); opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfd .pfd-chat__reset {
  flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px;
  border-radius: 16px; background: transparent; color: var(--pfd-chat-fg); opacity: .62;
  font: 500 12.5px/1 var(--pfd-font-ui); white-space: nowrap; transition: opacity 160ms, background-color 160ms;
}
.pfd .pfd-chat__reset:hover, .pfd .pfd-chat__reset:focus { background: var(--pfd-chat-owner-bg); color: var(--pfd-chat-fg); opacity: 1; }
.pfd .pfd-chat__reset:focus-visible { border-radius: 16px; }
.pfd .pfd-chat__reset[hidden] { display: none; }

/* ---------- Conversation ---------- */
.pfd-chat__log {
  flex: 1 1 96px; min-height: 96px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; padding: 18px 14px 12px; scrollbar-width: thin;
}
/* New conversations sit at the bottom, next to the questions; older messages scroll up and away. */
.pfd-chat__log > :first-child { margin-top: auto; }
.pfd .pfd-chat__log:focus-visible { outline: 2px solid var(--pfd-accent); outline-offset: -2px; border-radius: 0; box-shadow: none; }

.pfd-chat__msg { flex: none; display: flex; max-width: 100%; margin-top: 3px; }
.pfd-chat__msg--me { justify-content: flex-end; }
.pfd-chat__msg--owner + .pfd-chat__msg--me, .pfd-chat__msg--me + .pfd-chat__msg--owner { margin-top: 14px; }

.pfd-chat__bubble {
  --pfd-chat-tight: calc(var(--pfd-chat-bubble) * .3);
  max-width: min(84%, 32em); padding: 9px 14px 10px; border-radius: var(--pfd-chat-bubble);
  background: var(--pfd-chat-owner-bg); color: var(--pfd-chat-owner-fg);
  overflow-wrap: anywhere; word-break: break-word;
}
.pfd-chat__msg--me .pfd-chat__bubble { background: var(--pfd-chat-me-bg); color: var(--pfd-chat-me-fg); }
/* Bubbles from the same side read as one turn: the corners between them tighten. */
.pfd-chat__msg--owner + .pfd-chat__msg--owner .pfd-chat__bubble { border-top-left-radius: var(--pfd-chat-tight); }
.pfd-chat__msg--owner:has(+ .pfd-chat__msg--owner) .pfd-chat__bubble { border-bottom-left-radius: var(--pfd-chat-tight); }
.pfd-chat__msg--me + .pfd-chat__msg--me .pfd-chat__bubble { border-top-right-radius: var(--pfd-chat-tight); }
.pfd-chat__msg--me:has(+ .pfd-chat__msg--me) .pfd-chat__bubble { border-bottom-right-radius: var(--pfd-chat-tight); }

.pfd-chat__bubble > * + * { margin-top: .5em; }
.pfd-chat .pfd-chat__bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pfd-chat .pfd-chat__bubble ul, .pfd-chat .pfd-chat__bubble ol { padding-left: 1.25em; }
.pfd-chat .pfd-chat__bubble ul { list-style: disc; }
.pfd-chat .pfd-chat__bubble ol { list-style: decimal; }

/* A picture is its own bubble. */
.pfd-chat__bubble--pic { max-width: min(78%, 320px); padding: 0; background: var(--pfd-chat-owner-bg); overflow: hidden; line-height: 0; }
.pfd-chat .pfd-chat__bubble--pic img { width: 100%; height: auto; }

/* A button under an answer. */
.pfd-chat__msg--action { margin-top: 8px; }
.pfd-chat a.pfd-chat__btn, .pfd-chat a.pfd-chat__btn:hover, .pfd-chat a.pfd-chat__btn:focus {
  display: inline-flex; align-items: center; min-height: 38px; padding: 8px 18px; border-radius: 19px;
  background: var(--pfd-chat-fg); color: var(--pfd-chat-bg); text-decoration: none;
  font: 600 13.5px/1.2 var(--pfd-font-ui); transition: transform 160ms var(--pfd-ease);
}
.pfd-chat a.pfd-chat__btn:focus-visible { border-radius: 19px; }
@media (hover: hover) { .pfd-chat a.pfd-chat__btn:hover { transform: translateY(-1px); } }

/* Typing indicator. */
.pfd-chat__dots { display: inline-flex; align-items: center; gap: 4px; height: 1.42em; padding: 0 2px; }
.pfd-chat__dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .38; }

@keyframes pfd-chat-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes pfd-chat-send { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes pfd-chat-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: .9; transform: translateY(-3px); } }
@media (prefers-reduced-motion: no-preference) {
  .pfd-chat__msg.is-new { animation: pfd-chat-in 240ms var(--pfd-ease) both; }
  .pfd-chat__msg--me.is-new { transform-origin: 100% 100%; animation-name: pfd-chat-send; }
  .pfd-chat__dots i { animation: pfd-chat-dot 1.1s ease-in-out infinite; }
  .pfd-chat__dots i:nth-child(2) { animation-delay: .15s; }
  .pfd-chat__dots i:nth-child(3) { animation-delay: .3s; }
}

/* ---------- Questions + message box ---------- */
.pfd-chat__foot { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 12px 12px 12px; border-top: 1px solid var(--pfd-chat-rule); background: var(--pfd-chat-bg); }
.pfd-chat__chips { flex: 0 1 auto; min-height: 0; max-height: 200px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 1px; margin-bottom: 10px; }
.pfd-chat__chips.is-empty { display: none; }

.pfd .pfd-chat__chip {
  flex: none; max-width: 100%; display: inline-flex; align-items: center; min-height: 38px; padding: 8px 15px;
  border-radius: var(--pfd-chat-chip-radius); background: var(--pfd-chat-chip-bg); color: var(--pfd-chat-chip-fg);
  box-shadow: inset 0 0 0 1px var(--pfd-chat-chip-line);
  font: 500 14px/1.25 var(--pfd-font-ui); text-align: left; text-decoration: none; white-space: normal;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms, color 160ms, box-shadow 160ms, transform 160ms var(--pfd-ease);
}
/* Themes restyle focused buttons (Hello Elementor drops their box-shadow): a focused chip keeps its own look. */
.pfd .pfd-chat__chip:focus { background: var(--pfd-chat-chip-bg); color: var(--pfd-chat-chip-fg); box-shadow: inset 0 0 0 1px var(--pfd-chat-chip-line); }
.pfd .pfd-chat__chip:focus-visible { border-radius: var(--pfd-chat-chip-radius); }
@media (hover: hover) {
  .pfd .pfd-chat__chip:hover { background: var(--pfd-chat-chip-hover-bg); color: var(--pfd-chat-chip-hover-fg); }
}
.pfd .pfd-chat__chip:active { transform: scale(.97); }
.pfd .pfd-chat__chip[hidden] { display: none; }
.pfd .pfd-chat__chip.is-asked { opacity: .5; }
/* The closing button is a link, not a question: filled, so it reads as the way out. */
.pfd .pfd-chat__chip--link, .pfd .pfd-chat__chip--link:focus, .pfd .pfd-chat__chip--link:hover { background: var(--pfd-chat-fg); color: var(--pfd-chat-bg); box-shadow: none; }
@media (hover: hover) { .pfd .pfd-chat__chip--link:hover { background: var(--pfd-chat-fg); color: var(--pfd-chat-bg); transform: translateY(-1px); } }

.pfd-chat__composer {
  flex: none; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 7px 0 17px; border-radius: 23px;
  background: var(--pfd-chat-owner-bg); color: var(--pfd-chat-fg);
  font: 400 14.5px/1 var(--pfd-font-ui); user-select: none; -webkit-user-select: none; cursor: default;
}
.pfd-chat__input { flex: 1 1 auto; min-width: 0; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfd-chat__ph { opacity: .5; }
.pfd-chat__composer.is-typing .pfd-chat__ph { display: none; }
.pfd-chat__composer.is-typing .pfd-chat__typed::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -.18em; background: currentColor; }
.pfd-chat__send { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--pfd-chat-fg); color: var(--pfd-chat-bg); opacity: .2; transition: opacity 160ms, transform 160ms var(--pfd-ease); }
.pfd-chat__composer.is-typing .pfd-chat__send { opacity: 1; }
.pfd-chat__composer.is-sent .pfd-chat__send { transform: scale(.86); }

/* ---------- Inside a Window: the window is the card ---------- */
.pfd-win .pfd-chat { --pfd-chat-h: 460px; --pfd-chat-shadow: none; max-width: none; max-height: none; border-radius: 0; }

/* ---------- Phones ---------- */
@media (max-width: 767.98px) {
  .pfd .pfd-chat__chip { min-height: 40px; }
  /* Until the script has measured the floating menu. */
  html.pfd-has-dock .pfd-chat--fill { --pfd-chat-dock: 100px; }
  /* "Fills the screen": edge to edge, from whatever is above it down to the menu (or the bottom of the screen). */
  .pfd-chat.pfd-chat--fill {
    max-width: none; max-height: none; min-height: 320px; border-radius: 0; box-shadow: none;
    height: calc(100vh - var(--pfd-chat-top) - var(--pfd-chat-dock)); height: calc(100dvh - var(--pfd-chat-top) - var(--pfd-chat-dock));
  }
  .pfd-chat--fill .pfd-chat__foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  html.pfd-has-dock .pfd-chat--fill .pfd-chat__foot { padding-bottom: 12px; }
  .pfd-win .pfd-chat.pfd-chat--fill { height: var(--pfd-chat-h); min-height: 280px; }
}

/* ---------- Computers: a full messenger ---------- */
/* A side panel (who you are, the questions) beside the conversation. Phones, and any space too narrow for
   two panes (the script marks those .is-narrow; inside a Window it never applies), keep the card above. */
.pfd-chat__profile { display: none; }
@media (min-width: 1024px) {
  .pfd-chat--wide:not(.is-narrow):not(.pfd-win *) {
    --pfd-chat-side-bg: rgba(0, 0, 0, .028);
    /* Four rows so the two panes do not size each other: the conversation's header is a fixed strip, and
       the side panel's profile can be as tall as it likes (it spans into the row the messages also use). */
    display: grid; grid-template-columns: clamp(270px, 27%, 350px) minmax(0, 1fr); grid-template-rows: 64px auto minmax(0, 1fr) auto;
    grid-template-areas: "profile head" "profile log" "chips log" "chips composer";
    max-width: var(--pfd-chat-wide-w, 1180px);
    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--pfd-chat-wide-gap, 176px)); min-height: 520px; max-height: none;
  }
  .pfd-chat--wide:not(.is-narrow):not(.pfd-win *) .pfd-chat__profile {
    grid-area: profile; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 28px 24px 18px;
    background: linear-gradient(var(--pfd-chat-side-bg), var(--pfd-chat-side-bg)), var(--pfd-chat-bg); border-right: 1px solid var(--pfd-chat-rule);
  }
  .pfd-chat__avatar--big { width: 76px; height: 76px; margin-bottom: 12px; }
  .pfd-chat__profile .pfd-chat__name { font-size: 20px; white-space: normal; }
  .pfd-chat__profile .pfd-chat__status { font-size: 13px; white-space: normal; }
  .pfd-chat__about { margin-top: 12px; font-size: 13.5px; line-height: 1.5; opacity: .72; }
  .pfd-chat__about > * + * { margin-top: .6em; }
  .pfd-chat--wide:not(.is-narrow):not(.pfd-win *) .pfd-chat__head { grid-area: head; min-height: 0; height: 64px; padding: 0 20px 0 26px; }
  .pfd-chat--wide:not(.is-narrow):not(.pfd-win *) .pfd-chat__log { grid-area: log; padding: 26px 28px 16px; }
  .pfd-chat--wide:not(.is-narrow):not(.pfd-win *) .pfd-chat__bubble { max-width: min(68%, 34em); }
  .pfd-chat--wide:not(.is-narrow):not(.pfd-win *) .pfd-chat__bubble--pic { max-width: min(52%, 380px); }
  /* The questions and the message box stop being one footer: one goes to each pane. */
  .pfd-chat--wide:not(.is-narrow):not(.pfd-win *) .pfd-chat__foot { display: contents; }
  .pfd-chat--wide:not(.is-narrow):not(.pfd-win *) .pfd-chat__chips, .pfd-chat--wide:not(.is-narrow):not(.pfd-win *) .pfd-chat__chips.is-empty {
    grid-area: chips; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px;
    max-height: none; margin: 0; padding: 6px 20px 22px 24px; overflow-y: auto;
    background: linear-gradient(var(--pfd-chat-side-bg), var(--pfd-chat-side-bg)), var(--pfd-chat-bg); border-right: 1px solid var(--pfd-chat-rule);
  }
  .pfd-chat--wide:not(.is-narrow):not(.pfd-win *) .pfd-chat__chips::before {
    content: attr(data-label); flex: none; margin: 10px 2px 4px; font: 600 11px/1.2 var(--pfd-font-ui); letter-spacing: .09em; text-transform: uppercase; opacity: .5;
  }
  .pfd-chat--wide:not(.is-narrow):not(.pfd-win *) .pfd-chat__chip { width: 100%; border-radius: 14px; padding: 10px 14px; background: var(--pfd-chat-bg); }
  .pfd-chat--wide:not(.is-narrow):not(.pfd-win *) .pfd-chat__chip--link { justify-content: center; margin-top: 6px; background: var(--pfd-chat-fg); }
  @media (hover: hover) { .pfd-chat--wide:not(.is-narrow):not(.pfd-win *) .pfd-chat__chip:not(.pfd-chat__chip--link):hover { background: var(--pfd-chat-chip-hover-bg); } }
  .pfd-chat--wide:not(.is-narrow):not(.pfd-win *) .pfd-chat__composer { grid-area: composer; margin: 0 26px 22px; }
}