/* Language demo: a phone showing the real Qualzy reply flow, where the
   AI suggests a reply in the participant's language with English beneath.
   Shared by features/advanced-ai.html and features/global-research.html;
   driven by js/lang-demo.js. */
/* data-state on .aa-qz drives each step:
   0 post only, 1 suggestions open, 2 one chosen, 3 its English in the box,
   4 Post pressed, 5 posted in Spanish. Without JS it rests on state 3. */

.aa-qz { display: flex; justify-content: center; }

.aa-qz-phone {
  width: 100%;
  max-width: 360px;
  padding: 12px;
  border-radius: 46px;
  background: #1c1c1e;
  box-shadow: 0 0 0 2px #3a3a3c, 0 30px 70px rgba(26, 25, 21, .22);
}

.aa-qz-screen {
  position: relative;
  height: 640px;
  overflow: hidden;
  border-radius: 34px;
  background: #fff;
  padding-top: 26px;
  font-family: Roboto, "Segoe UI", Arial, sans-serif;
  color: #333;
}

.aa-qz-av {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.aa-qz-av--p { background: #e8e1d8; color: #6b5d4f; }
.aa-qz-av--m { background: #c8501a; color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #e8a07d; }

.aa-qz-post { padding: 6px 16px 14px; }
.aa-qz-who { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.aa-qz-who span:last-child { color: #999; font-size: 12px; }
.aa-qz-post p { margin: 0; font-size: 14px; line-height: 1.5; color: #333; }
.aa-qz-expand { color: #999; }

/* Posted comment (step 5), in the peach box Qualzy shows */
.aa-qz-posted {
  display: none;
  gap: 10px;
  margin: 0 10px 12px;
  padding: 10px 12px;
  background: #fdeee4;
  border-radius: 6px;
}
.aa-qz-posted-who { font-size: 12px; color: #999; margin-bottom: 2px; }
.aa-qz-posted-who b { color: #333; margin-right: 4px; }
.aa-qz-posted p { margin: 0; font-size: 13.5px; line-height: 1.45; color: #333; }
.aa-qz-posted-acts { margin-top: 6px; text-align: right; font-size: 11.5px; color: #888; }

/* Blue reply toolbar */
.aa-qz-tools {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px;
  background: #4bb4ee;
  color: #1d4f72;
}
.aa-qz-tool { display: inline-flex; width: 26px; height: 26px; border-radius: 6px; align-items: center; justify-content: center; transition: background .25s ease; }
.aa-qz-tool svg { width: 22px; height: 22px; }
.aa-qz-tool--close { margin-left: auto; color: #e9f5fd; }
.aa-qz-tool--close svg { width: 18px; height: 18px; }

/* Suggestions: Spanish, with the English beneath in italics */
.aa-qz-sugg { display: none; background: #eaf5fd; }
.aa-qz-band { padding: 7px 14px; background: #d3e9f8; color: #3c86bd; font-size: 14px; font-weight: 700; border-bottom: 1px solid #c4e0f4; }
.aa-qz-opt { padding: 9px 14px; border-bottom: 1px solid #fff; transition: background .3s ease, color .3s ease; }
.aa-qz-opt p { margin: 0; font-size: 13px; line-height: 1.45; color: #555; transition: color .3s ease; }
.aa-qz-opt .aa-qz-en { margin-top: 4px; font-style: italic; color: #222; }

/* Comment box */
.aa-qz-reply { display: flex; gap: 10px; padding: 12px 12px 4px; }
.aa-qz-box { flex: 1; min-width: 0; border: 1px solid #cfcfcf; border-radius: 4px; background: #fff; }
.aa-qz-ta { position: relative; min-height: 54px; padding: 8px 38px 4px 10px; font-size: 13px; line-height: 1.45; color: #333; border-bottom: 1px solid #eee; }
.aa-qz-text { display: none; }
.aa-qz-placeholder { color: #999; font-style: italic; }
.aa-qz-smile { position: absolute; top: 6px; right: 8px; color: #666; border-left: 1px solid #ddd; padding-left: 6px; }
.aa-qz-smile svg { width: 18px; height: 18px; display: block; }
.aa-qz-hint { padding: 3px 10px 4px; font-size: 10.5px; font-style: italic; color: #aaa; }
/* The buttons and "A response is optional" only appear once you click into
   the comment box, so they show only while there's text in it (states 3-4). */
.aa-qz-btns { display: none; justify-content: flex-end; gap: 3px; padding: 0 3px 3px; }
.aa-qz-btns span { background: #111; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 2px; transition: background .2s ease, transform .2s ease; }
.aa-qz-optional { display: none; padding: 6px 14px 14px; text-align: right; font-size: 12.5px; color: #333; }
.aa-qz-optional span { color: #3c86bd; }

/* Mouse cursor, moved by the script to what it clicks */
.aa-qz-cursor {
  position: absolute;
  left: 78%; top: 92%;
  width: 22px; height: 22px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: left .9s cubic-bezier(.4, 0, .2, 1), top .9s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, transform .15s ease;
}
.aa-qz-cursor svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.aa-qz-cursor.is-on { opacity: 1; }
.aa-qz-cursor.is-click { transform: scale(.82); }

/* ---- States ---- */
.aa-qz[data-state="1"] .aa-qz-sugg,
.aa-qz[data-state="2"] .aa-qz-sugg,
.aa-qz[data-state="3"] .aa-qz-sugg,
.aa-qz[data-state="4"] .aa-qz-sugg { display: block; animation: aaQzOpen .4s ease both; }
@keyframes aaQzOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.aa-qz[data-state="1"] .aa-qz-tool--clap,
.aa-qz[data-state="2"] .aa-qz-tool--clap,
.aa-qz[data-state="3"] .aa-qz-tool--clap,
.aa-qz[data-state="4"] .aa-qz-tool--clap { background: rgba(255, 255, 255, .45); }

.aa-qz[data-state="2"] .aa-qz-opt--pick,
.aa-qz[data-state="3"] .aa-qz-opt--pick,
.aa-qz[data-state="4"] .aa-qz-opt--pick { background: #4bb4ee; }
.aa-qz[data-state="2"] .aa-qz-opt--pick p:first-child,
.aa-qz[data-state="3"] .aa-qz-opt--pick p:first-child,
.aa-qz[data-state="4"] .aa-qz-opt--pick p:first-child { color: #fff; }

.aa-qz[data-state="3"] .aa-qz-text,
.aa-qz[data-state="4"] .aa-qz-text { display: inline; animation: aaQzIn .35s ease both; }
.aa-qz[data-state="3"] .aa-qz-placeholder,
.aa-qz[data-state="4"] .aa-qz-placeholder { display: none; }
@keyframes aaQzIn { from { opacity: 0; } to { opacity: 1; } }

.aa-qz[data-state="3"] .aa-qz-btns,
.aa-qz[data-state="4"] .aa-qz-btns { display: flex; }
.aa-qz[data-state="3"] .aa-qz-optional,
.aa-qz[data-state="4"] .aa-qz-optional { display: block; }

.aa-qz[data-state="4"] .aa-qz-postbtn { background: #c8501a; transform: scale(.92); }

.aa-qz[data-state="5"] .aa-qz-posted { display: flex; animation: aaQzOpen .45s ease both; }