/* Daily Quote & Mood Match — client tool styles.
   The time-of-day sky scene mirrors the dashboard Daily Quote widget
   (application/views/dashboards/daily_quote_widget.php). Scoped to .dq-* so it
   never leaks into the rest of the Tools Hub page. */

#clientToolRoot .dq-wrap { display: flex; flex-direction: column; gap: 16px; }

/* ---- Scene stage ---- */
#clientToolRoot .dq-stage {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  min-height: 300px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
#clientToolRoot .dq-scene {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
#clientToolRoot .dq-content {
  position: relative; z-index: 1;
  min-height: 300px;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  padding: 30px 28px;
  color: #4a6076;
}
#clientToolRoot .dq-content::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.55) 0%, rgba(255,255,255,.30) 55%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
#clientToolRoot .dq-greeting {
  font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
  font-weight: 700; opacity: .9; margin-bottom: 10px;
}
#clientToolRoot .dq-mark { font-size: 26px; opacity: .65; margin-bottom: 6px; }
#clientToolRoot .dq-quote {
  border: 0; margin: 0 0 12px; padding: 10px 18px; max-width: 620px;
  font-size: 19px; line-height: 1.55; font-style: italic; font-weight: 600;
  color: #3f5568;
  background: rgba(255, 255, 255, .58);
  border-radius: 8px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transition: opacity .3s ease;
}
#clientToolRoot .dq-quote.is-fading { opacity: 0; }
#clientToolRoot .dq-author { font-size: 13.5px; font-weight: 700; opacity: .95; }
#clientToolRoot .dq-note {
  margin-top: 12px; max-width: 560px;
  font-size: 13px; font-weight: 600; color: #2c6b74;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(29, 151, 166, .35);
  border-radius: 999px; padding: 7px 16px;
  display: none;
}
#clientToolRoot .dq-source {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: #fff; background: rgba(0, 0, 0, .28);
  border-radius: 999px; padding: 3px 9px;
  display: none;
}

/* ---- Controls ---- */
#clientToolRoot .dq-controls { display: flex; flex-direction: column; gap: 14px; }
#clientToolRoot .dq-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#clientToolRoot .dq-feeling { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
#clientToolRoot .dq-feeling input {
  flex: 1 1 260px; min-width: 200px;
  padding: 11px 14px; border: 1px solid var(--border, #dde6e9); border-radius: 10px;
  font-size: 15px;
}
#clientToolRoot .dq-feeling input:focus-visible { outline: 2px solid #1d97a6; outline-offset: 2px; }
#clientToolRoot .dq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#clientToolRoot .dq-chip {
  border: 1px solid rgba(29, 151, 166, .35); background: rgba(29, 151, 166, .08);
  color: #12717d; border-radius: 999px; padding: 6px 13px;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
#clientToolRoot .dq-chip:hover { background: rgba(29, 151, 166, .16); }
#clientToolRoot .dq-chip:focus-visible { outline: 2px solid #1d97a6; outline-offset: 2px; }
#clientToolRoot .dq-hint { font-size: 13px; color: var(--muted, #7988a2); margin: 0; }
#clientToolRoot .dq-spin { animation: dqSpin .6s linear; }

/* ---- Share output ---- */
#clientToolRoot .dq-share { display: none; flex-direction: column; gap: 12px; }
#clientToolRoot .dq-share-preview {
  border: 1px solid var(--border, #dde6e9); border-radius: 12px; overflow: hidden;
  max-width: 560px;
}
#clientToolRoot .dq-share-preview img { display: block; width: 100%; height: auto; }
#clientToolRoot .dq-share-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#clientToolRoot .dq-share-row input {
  flex: 1 1 260px; min-width: 200px; padding: 10px 12px;
  border: 1px solid var(--border, #dde6e9); border-radius: 10px; font-size: 14px;
}

@keyframes dqSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ================= Time-of-day scene (mirrors the widget) ================= */
#clientToolRoot .dq-celestial { fill: #fff7d6; }
#clientToolRoot .dq-sun-glow  { opacity: .8; }
#clientToolRoot .dq-stars circle { fill: #fff; opacity: 0; }
#clientToolRoot .dq-clouds .dq-cloud ellipse { fill: #fff; opacity: .85; }
#clientToolRoot .dq-hill-back  { fill: rgba(0, 0, 0, .18); }
#clientToolRoot .dq-hill-front { fill: rgba(0, 0, 0, .32); }

#clientToolRoot .dq-stage[data-time-of-day="dawn"] .dq-sky-top    { stop-color: #2c3e6b; }
#clientToolRoot .dq-stage[data-time-of-day="dawn"] .dq-sky-bottom { stop-color: #f0a878; }
#clientToolRoot .dq-stage[data-time-of-day="dawn"] .dq-celestial  { fill: #ffb56a; }

#clientToolRoot .dq-stage[data-time-of-day="morning"] .dq-sky-top    { stop-color: #1d97a6; }
#clientToolRoot .dq-stage[data-time-of-day="morning"] .dq-sky-bottom { stop-color: #a8e1e6; }
#clientToolRoot .dq-stage[data-time-of-day="morning"] .dq-celestial  { fill: #fff4b8; }

#clientToolRoot .dq-stage[data-time-of-day="afternoon"] .dq-sky-top    { stop-color: #10b1af; }
#clientToolRoot .dq-stage[data-time-of-day="afternoon"] .dq-sky-bottom { stop-color: #ffd97a; }
#clientToolRoot .dq-stage[data-time-of-day="afternoon"] .dq-celestial  { fill: #fff1a8; }

#clientToolRoot .dq-stage[data-time-of-day="evening"] .dq-sky-top    { stop-color: #1288a0; }
#clientToolRoot .dq-stage[data-time-of-day="evening"] .dq-sky-bottom { stop-color: #e9743a; }
#clientToolRoot .dq-stage[data-time-of-day="evening"] .dq-celestial  { fill: #ff8a4f; }

#clientToolRoot .dq-stage[data-time-of-day="night"] .dq-sky-top    { stop-color: #0e1a3a; }
#clientToolRoot .dq-stage[data-time-of-day="night"] .dq-sky-bottom { stop-color: #1d3556; }
#clientToolRoot .dq-stage[data-time-of-day="night"] .dq-celestial  { fill: #f3f3e3; }
#clientToolRoot .dq-stage[data-time-of-day="night"] .dq-sun-glow   { opacity: .15; }
#clientToolRoot .dq-stage[data-time-of-day="night"] .dq-clouds     { opacity: 0; }
#clientToolRoot .dq-stage[data-time-of-day="night"] .dq-stars circle { opacity: .9; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes dqDrift1 { 0% { transform: translate(-90px, 60px); } 100% { transform: translate(460px, 60px); } }
  @keyframes dqDrift2 { 0% { transform: translate(-120px, 100px); } 100% { transform: translate(480px, 100px); } }
  @keyframes dqTwinkle { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
  @keyframes dqPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
  #clientToolRoot .dq-cloud-1 { animation: dqDrift1 90s linear infinite; }
  #clientToolRoot .dq-cloud-2 { animation: dqDrift2 120s linear infinite; }
  #clientToolRoot .dq-sun-glow { transform-origin: 200px 130px; animation: dqPulse 6s ease-in-out infinite; }
  #clientToolRoot .dq-stage[data-time-of-day="night"] .dq-stars circle { animation: dqTwinkle 4s ease-in-out infinite; }
  #clientToolRoot .dq-stage[data-time-of-day="night"] .dq-stars circle:nth-child(2n) { animation-delay: 1.2s; }
  #clientToolRoot .dq-stage[data-time-of-day="night"] .dq-stars circle:nth-child(3n) { animation-delay: 2.4s; }
}