/* ============================================================================
   assistant.css — "Site Office AI Dispatch" floating chat.
   Launcher = steel field-radio circle (broadcast signal icon, standby pulse).
   Panel = navy dispatch terminal — scaffold grid bg, hazard-tape header,
   paper slip office replies, ruled-paper input. On-brand with the rest of
   the site's construction-site language.
============================================================================ */

/* ── LAUNCHER — field radio on standby ─────────────────────────────────── */
#rad-ai {
  position: fixed; right: 28px; bottom: 82px; z-index: 97;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer; padding: 0;
}
#rad-ai .rai-btn-disc {
  width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #3a5070, #1a2c48 56%, #0e1e34);
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 2px rgba(138,164,200,0.35),            /* steel ring */
    0 10px 32px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
}
/* standby pulse — orange, slow, like the radio is always broadcasting */
#rad-ai .rai-btn-disc::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(232,137,10,0.45);
  animation: raiStandby 2.8s ease-out infinite;
  pointer-events: none;
}
#rad-ai .rai-btn-disc::after {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
  border: 1px solid rgba(232,137,10,0.2);
  animation: raiStandby 2.8s ease-out 0.6s infinite;
  pointer-events: none;
}
@keyframes raiStandby { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.3); opacity: 0; } }

#rad-ai .rai-btn-disc svg { width: 26px; height: 26px; position: relative; z-index: 1; }
/* on-air indicator dot */
#rad-ai .rai-btn-disc .rai-onair {
  position: absolute; top: 9px; right: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c97a; box-shadow: 0 0 6px rgba(34,201,122,0.8);
  animation: raiOnAir 1.8s ease-in-out infinite;
}
@keyframes raiOnAir { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

#rad-ai .rai-label {
  font-family: 'Bebas Neue', sans-serif; font-size: 0.7rem; letter-spacing: 0.22em;
  color: rgba(138,164,200,0.7); text-transform: uppercase; white-space: nowrap;
  transition: color 0.25s;
}
#rad-ai:hover .rai-btn-disc {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px rgba(232,137,10,0.6), 0 14px 38px rgba(0,0,0,0.6), 0 0 28px rgba(232,137,10,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}
#rad-ai:hover .rai-label { color: var(--orange, #e8890a); }
#rad-ai.open .rai-btn-disc {
  transform: scale(0.92);
  background: radial-gradient(circle at 38% 32%, #c04010, #8a2a08 56%, #5c1a04);
  box-shadow: 0 0 0 2px rgba(200,55,45,0.5), 0 8px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
}
#rad-ai.open .rai-btn-disc::before,
#rad-ai.open .rai-btn-disc::after { animation: none; opacity: 0; }
#rad-ai.open .rai-btn-disc .rai-onair { background: #c8372d; box-shadow: 0 0 6px rgba(200,55,45,0.9); animation: none; }
#rad-ai.open .rai-label { color: rgba(200,100,80,0.8); letter-spacing: 0.18em; }

/* ── PANEL — dispatch terminal ──────────────────────────────────────────── */
#rad-ai-panel {
  position: fixed; right: 20px; bottom: 162px; z-index: 98;
  width: min(390px, calc(100vw - 28px));
  display: flex; flex-direction: column;
  max-height: min(560px, calc(100vh - 190px));
  background: var(--navy, #0a1628);
  /* scaffold grid, like the hero sections */
  background-image:
    repeating-linear-gradient(90deg,  rgba(255,255,255,0.022) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg,   rgba(255,255,255,0.022) 0 1px, transparent 1px 60px);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid var(--orange, #e8890a);
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(232,137,10,0.08);
  overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(16px) scale(0.97);
  transition: opacity 0.28s, visibility 0.28s, transform 0.28s cubic-bezier(0.34,1.1,0.64,1);
  transform-origin: bottom right;
}
#rad-ai-panel.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }

/* ── header — hazard tape + dispatch title ── */
.rai-head {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px 12px;
  padding-top: 0;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  position: relative;
  flex-shrink: 0;
}
.rai-tape {                      /* hazard tape across the full top */
  display: block; height: 8px; width: 100%; margin-bottom: 12px;
  background: repeating-linear-gradient(-45deg, var(--orange, #e8890a) 0 10px, #0a1628 10px 20px);
  opacity: 0.7; flex-shrink: 0;
  position: absolute; top: 0; left: 0; right: 0;
}
/* push content below the tape */
.rai-head > *:not(.rai-tape) { margin-top: 10px; }
.rai-head-inner { display: flex; align-items: center; gap: 10px; width: 100%; padding-top: 8px; }
.rai-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c97a; box-shadow: 0 0 8px rgba(34,201,122,0.7); flex-shrink: 0; animation: raiOnAir 1.8s ease-in-out infinite; }
.rai-head-text { flex: 1; }
.rai-title { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; letter-spacing: 0.2em; color: var(--white, #f8faff); line-height: 1; }
.rai-subtitle { display: block; font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(138,164,200,0.6); margin-top: 2px; }
.rai-close {
  width: 28px; height: 28px; border-radius: 3px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
  color: rgba(248,250,255,0.5); font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0;
}
.rai-close:hover { background: rgba(200,55,45,0.2); border-color: rgba(200,55,45,0.4); color: #ff9c9c; }

/* ── message log ── */
.rai-log { flex: 1; overflow-y: auto; padding: 14px 12px 6px; display: flex; flex-direction: column; gap: 10px; min-height: 180px; }
.rai-log::-webkit-scrollbar { width: 4px; }
.rai-log::-webkit-scrollbar-track { background: transparent; }
.rai-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

.rai-msg {
  max-width: 88%;
  font-family: 'DM Sans', sans-serif; font-size: 0.88rem; line-height: 1.65;
  word-wrap: break-word; animation: raiIn 0.22s ease both;
}
@keyframes raiIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* office answers — paper message slip */
.rai-office {
  align-self: flex-start;
  background: repeating-linear-gradient(180deg, transparent 0 28px, rgba(60,90,140,0.12) 28px 29px),
              linear-gradient(180deg, #f3efe4, #ece5d4);
  color: #1c2740;
  padding: 12px 14px 10px;
  border-radius: 2px 10px 10px 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), 2px 2px 0 rgba(0,0,0,0.08);
  position: relative;
}
/* small tape corner detail on first slip */
.rai-office:first-of-type::before {
  content: ''; position: absolute; top: -7px; left: 16px;
  width: 38px; height: 14px;
  background: rgba(248,250,255,0.3);
  transform: rotate(-1.5deg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.rai-office a { color: #c8372d; font-weight: 600; word-break: break-all; }
.rai-office a:hover { color: var(--orange, #e8890a); }

/* your messages — dispatch log style */
.rai-you {
  align-self: flex-end;
  background: rgba(232,137,10,0.1);
  border: 1px solid rgba(232,137,10,0.28);
  border-right: 3px solid var(--orange, #e8890a);
  color: var(--white, #f8faff);
  padding: 10px 14px;
  border-radius: 10px 2px 10px 10px;
  font-size: 0.86rem;
}

/* typing dots */
.rai-typing { align-self: flex-start; display: inline-flex; gap: 6px; padding: 14px 18px; background: linear-gradient(180deg, #f3efe4, #ece5d4); border-radius: 2px 10px 10px 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.rai-typing span { width: 7px; height: 7px; border-radius: 50%; background: #6d7f9e; animation: raiDot 1.1s ease-in-out infinite; }
.rai-typing span:nth-child(2) { animation-delay: 0.2s; }
.rai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes raiDot { 0%,60%,100%{transform:translateY(0);opacity:0.45;} 30%{transform:translateY(-4px);opacity:1;} }

/* quick chips */
.rai-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 0 6px; }
.rai-chips button {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(248,250,255,0.65); border-radius: 2px;
  padding: 7px 13px; font-family: 'DM Sans', sans-serif; font-size: 0.74rem; letter-spacing: 0.03em;
  cursor: pointer; transition: all 0.2s;
}
.rai-chips button:hover { border-color: var(--orange, #e8890a); color: var(--white, #f8faff); background: rgba(232,137,10,0.1); }

/* ── input row — ruled message pad ── */
.rai-foot {
  display: flex; gap: 8px; padding: 10px 12px 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.rai-input {
  flex: 1; padding: 11px 14px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-bottom: 2px solid rgba(255,255,255,0.18);
  border-radius: 3px;
  color: var(--white, #f8faff);
  font-family: 'DM Sans', sans-serif; font-size: 0.88rem; outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.rai-input:focus { border-color: rgba(232,137,10,0.5); border-bottom-color: var(--orange, #e8890a); background: rgba(255,255,255,0.07); }
.rai-input::placeholder { color: rgba(248,250,255,0.25); }

/* transmit button — clip-cornered like the nav CTA */
.rai-send {
  padding: 0 16px;
  background: var(--orange, #e8890a); color: var(--navy, #0a1628);
  border: none; cursor: pointer; font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem; letter-spacing: 0.12em;
  clip-path: polygon(0 0,100% 0,100% 72%,88% 100%,0 100%);
  transition: all 0.2s; flex-shrink: 0;
}
.rai-send:hover:not(:disabled) { background: var(--orange-light, #ffb547); }
.rai-send:disabled { opacity: 0.45; cursor: wait; }

.rai-note {
  padding: 6px 14px 9px;
  font-size: 0.62rem; color: rgba(248,250,255,0.22); line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.15);
  flex-shrink: 0;
}

/* ── responsive / etiquette ── */
@media (max-width: 900px) {
  #rad-ai { right: 16px; bottom: 76px; }
  #rad-ai .rai-label { display: none; }
  #rad-ai-panel { right: 14px; bottom: 148px; }
}
@media (max-width: 520px) {
  #rad-ai-panel { right: 8px; left: 8px; width: auto; }
}
@media print { #rad-ai, #rad-ai-panel { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  #rad-ai .rai-btn-disc::before, #rad-ai .rai-btn-disc::after,
  #rad-ai .rai-onair, .rai-dot { animation: none; }
  .rai-msg { animation: none; }
  #rad-ai-panel { transition: opacity 0.15s; }
}