/* ===================================================================
   zask.css — "ask the floor" widget.
   Self-contained and palette-matched to zanalysis / company.php, so the
   same markup drops onto any page of the exchange.
   =================================================================== */

.zask {
  background: rgba(5, 5, 16, 0.94);
  border: 1px solid #021e78;
  border-radius: 8px;
  padding: 16px;
  margin: 14px 0;
  font-family: Telex, 'Telex', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.zask::after {                     /* the house scanline wash */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
}
.zask > * { position: relative; z-index: 1; }

.zask h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: normal;
  color: #5f73f1;
  letter-spacing: 1px;
}
.zask .zask-sub {
  color: #667cc1;
  font-size: 13px;
  margin: 0 0 12px;
  line-height: 1.5;
}

.zask-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
.zask input {
  flex: 1 1 220px;
  min-width: 0;
  background: #04040e;
  border: 1px solid #021e78;
  border-radius: 6px;
  color: #e8ecf8;
  font-family: inherit;
  font-size: 16px;               /* 16px or iOS zooms the page on focus */
  padding: 9px 12px;
}
.zask input:focus {
  outline: none;
  border-color: #01DF01;
  box-shadow: 0 0 10px rgba(1, 223, 1, 0.2);
}
.zask input::placeholder { color: #445280; }

.zask button {
  flex: 0 0 auto;
  background: #04160a;
  border: 1px solid #01DF01;
  border-radius: 6px;
  color: #01DF01;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 9px 20px;
  cursor: pointer;
  touch-action: manipulation;
}
.zask button:hover:not(:disabled) {
  background: #01DF01;
  color: #04040e;
  box-shadow: 0 0 14px rgba(1, 223, 1, 0.4);
}
.zask button:disabled { opacity: 0.45; cursor: default; }

.zask-msg { color: #FE2E2E; font-size: 13px; align-self: center; }
.zask-note { color: #445280; font-size: 12px; margin-top: 8px; }

/* the answer line */
.zask-answer { margin-top: 12px; min-height: 0; }
.zask-answer .line {
  border-left: 3px solid #f1c40f;
  padding: 9px 0 9px 14px;
  font-size: 18px;
  line-height: 1.45;
  color: #f1c40f;
}
.zask-answer .line.offtopic {
  border-left-color: #FE2E2E;
  color: #cdd8f0;
  font-style: italic;
}
.zask-answer .who {
  color: #667cc1;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 5px;
  padding-left: 17px;
}
.zask-answer .thinking { color: #667cc1; font-size: 15px; padding-left: 17px; }
.zask-answer .thinking::after {
  content: "";
  animation: zaskdots 1.2s steps(4) infinite;
}
@keyframes zaskdots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
}
@media (prefers-reduced-motion: reduce) {
  .zask-answer .thinking::after { animation: none; content: "..."; }
}

@media (max-width: 560px) {
  .zask button { flex: 1 1 100%; }
}