/* ============================================================
   WORK PANEL — the talking-work layer (AI Bible Part 5-8)
   Shared by /advertising/ and /award-school/ only. Self-styled
   overlay component, sibling of the homepage twin panel rather
   than a themed extension of either host page (Award School runs
   its own self-contained cyan system and never touches this
   palette otherwise). Locked palette: teal #2AA8BC, green #8DBE3F,
   orange #F07C22, yellow #E8B32B on #0B0F1A. Oxanium / Space
   Grotesk / JetBrains Mono, same families as the rest of the site.
   Imported directly so exact weights (Space Grotesk 300 for the
   work's voice, 500 for the visitor's) are available regardless of
   what the host page happens to load.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@600;700&family=Space+Grotesk:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  --wp-bg: #0B0F1A;
  --wp-teal: #2AA8BC;
  --wp-green: #8DBE3F;
  --wp-orange: #F07C22;
  --wp-yellow: #E8B32B;
  --wp-paper: #FAF9F7;
}

/* ---------- persistent trigger — one per work, never hover-only ---------- */
.wp-trigger{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px 9px 11px;
  border-radius: 999px;
  border: 1px solid rgba(42,168,188,0.55);
  background: rgba(11,15,26,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--wp-teal);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.wp-trigger svg{ width: 15px; height: 15px; flex-shrink: 0; }
.wp-trigger:hover,
.wp-trigger:focus-visible{
  background: rgba(42,168,188,0.2);
  border-color: var(--wp-teal);
  transform: translateY(-1px);
}

/* ---------- Advertising restructured work cards ---------- */
.wp-work-card{ position: relative; }
.wp-work-card img + img{ margin-top: 8px; }
.wp-work-caption{
  margin: 10px 2px 0;
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250,249,247,0.55);
}

/* ---------- Award School frame anchor ---------- */
.award-page .aw-frame{ position: relative; }

/* ---------- overlay + panel ---------- */
.wp-overlay{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(5,6,10,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.wp-overlay.wp-open{ display: flex; }

body.wp-locked{ overflow: hidden; }

.wp-panel{
  width: 100%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--wp-bg);
  border: 1px solid rgba(42,168,188,0.35);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(141,190,63,0.06) inset;
  padding: 20px 18px 16px;
  transform: translateY(16px);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}
.wp-overlay.wp-open .wp-panel{
  transform: translateY(0);
  opacity: 1;
}

@media (min-width: 700px){
  .wp-overlay{ align-items: center; padding: 24px; }
  .wp-panel{
    width: 440px;
    max-height: 640px;
    border-radius: 14px;
    border-bottom: 1px solid rgba(42,168,188,0.35);
    padding: 24px 22px 20px;
  }
}

.wp-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.wp-header-text{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wp-title{
  font-family: "Oxanium", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--wp-paper);
}
.wp-medium{
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp-teal);
}
.wp-medium:empty{ display: none; }
.wp-close{
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(250,249,247,0.16);
  background: rgba(250,249,247,0.04);
  color: var(--wp-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.wp-close svg{ width: 16px; height: 16px; }
.wp-close:hover{ background: rgba(240,124,34,0.14); border-color: var(--wp-orange); color: var(--wp-orange); }

.wp-divider{
  height: 1px;
  margin: 16px 0;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--wp-teal), var(--wp-green));
  opacity: 0.5;
}

.wp-body{
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-top: 4px;
  --wp-footer-h: 0px;
  padding-bottom: min(var(--wp-footer-h), 18px);
}
.wp-body::-webkit-scrollbar{ display: none; }
.wp-body::before{ content: ""; margin-top: auto; }

.wp-msg{
  flex-shrink: 0;
  align-self: flex-start;
  max-width: 88%;
  padding: 13px 15px;
  border-radius: 4px 12px 12px 12px;
  background: rgba(42,168,188,0.07);
  border: 1px solid rgba(42,168,188,0.2);
}
.wp-msg p{ margin: 0; font-size: 14px; line-height: 1.55; }

/* Locked type treatment: the work speaks lighter than the visitor. */
.wp-msg--work p{
  font-family: "Space Grotesk", sans-serif;
  font-weight: 300;
  color: var(--wp-paper);
  opacity: 0.82;
}
.wp-msg--visitor{
  align-self: flex-end;
  background: rgba(240,124,34,0.12);
  border-color: rgba(240,124,34,0.3);
  border-radius: 12px 4px 12px 12px;
}
.wp-msg--visitor p{
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  color: var(--wp-paper);
  opacity: 0.95;
}

.wp-msg-in{ animation: wp-in 0.35s ease forwards; }
@keyframes wp-in{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } }

.wp-typing{
  display: none;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 13px 15px;
  border-radius: 4px 12px 12px 12px;
  background: rgba(250,249,247,0.05);
  border: 1px solid rgba(250,249,247,0.08);
  width: fit-content;
  flex-shrink: 0;
}
.wp-typing.wp-visible{ display: flex; }
.wp-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(250,249,247,0.5);
  animation: wp-typing-fade 1.2s ease-in-out infinite;
}
.wp-dot:nth-child(2){ animation-delay: 0.2s; }
.wp-dot:nth-child(3){ animation-delay: 0.4s; }
@keyframes wp-typing-fade{ 0%,100%{ opacity: 0.3; } 50%{ opacity: 1; } }

.wp-footer{ flex-shrink: 0; padding-top: 14px; }

.wp-chip-row, .wp-vote-opts{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wp-chip, .wp-vote-opt{
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(141,190,63,0.08);
  border: 1px solid rgba(141,190,63,0.4);
  color: var(--wp-green);
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
  transition: all 160ms ease;
}
.wp-chip:hover, .wp-vote-opt:hover,
.wp-chip:focus-visible, .wp-vote-opt:focus-visible{
  background: rgba(232,179,43,0.16);
  border-color: var(--wp-yellow);
  color: var(--wp-yellow);
  transform: translateY(-1px);
}
.wp-chip:disabled, .wp-vote-opt:disabled{
  opacity: 0.4;
  cursor: default;
  transform: none;
}

.wp-vote-question{
  font-family: "Space Grotesk", sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: rgba(250,249,247,0.7);
  margin: 0 0 10px;
}

.wp-handoff{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid rgba(240,124,34,0.4);
  background: rgba(240,124,34,0.08);
  color: var(--wp-orange);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease;
  box-sizing: border-box;
}
.wp-handoff:hover{ background: rgba(240,124,34,0.16); }
.wp-handoff-arrow{ width: 15px; height: 15px; margin-left: auto; flex-shrink: 0; }
.wp-handoff--reveal{ border-color: rgba(42,168,188,0.4); background: rgba(42,168,188,0.08); color: var(--wp-teal); }
.wp-handoff--reveal:hover{ background: rgba(42,168,188,0.16); }
.wp-handoff--email{ border-color: rgba(141,190,63,0.4); background: rgba(141,190,63,0.08); color: var(--wp-green); }
.wp-handoff--email:hover{ background: rgba(141,190,63,0.16); }

.wp-comment-block{ margin-top: 4px; }
.wp-privacy{
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(250,249,247,0.42);
  margin: 0 0 8px;
}
.wp-comment-input{
  display: block;
  width: 100%;
  min-height: 56px;
  resize: vertical;
  border-radius: 8px;
  border: 1px solid rgba(250,249,247,0.18);
  background: rgba(250,249,247,0.03);
  color: var(--wp-paper);
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  padding: 10px 12px;
  box-sizing: border-box;
}
.wp-comment-input:focus{ outline: none; border-color: var(--wp-teal); }
.wp-comment-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.wp-comment-count{
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: rgba(250,249,247,0.4);
}
.wp-comment-send{
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--wp-teal);
  background: rgba(42,168,188,0.14);
  color: var(--wp-teal);
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.wp-comment-send:hover{ background: var(--wp-teal); color: #0B0F1A; }
.wp-comment-send:disabled{ opacity: 0.5; cursor: default; background: rgba(42,168,188,0.14); color: var(--wp-teal); }