/* ============================================================
   SynapseX AI - site.css
   Aurora design system + component overrides
   ============================================================ */

/* theme.css loaded separately in layout */

/* ── Legacy tokens (backward compat, mapped to Aurora) ── */
:root {
  --f-accent:         var(--aurora-primary);
  --f-accent-hover:   var(--aurora-primary-hover);
  --f-accent-pressed: #0369A1;
  --f-accent-tint1:   var(--aurora-primary-dim);
  --f-accent-tint2:   var(--info-bg);
  --f-bg:             var(--surface-bg);
  --f-surface:        var(--surface-card);
  --f-surface-2:      var(--surface-muted);
  --f-surface-3:      var(--surface-bg);
  --f-surface-4:      #E2E8F0;
  --f-stroke:         var(--border-default);
  --f-stroke-2:       var(--border-default);
  --f-stroke-strong:  var(--border-strong);
  --f-text:           var(--text-primary);
  --f-text-2:         var(--text-secondary);
  --f-text-3:         var(--text-muted);
  --f-text-disabled:  var(--text-disabled);
  --f-text-on-accent: #FFFFFF;
  --f-success:        var(--success);
  --f-success-tint:   var(--success-bg);
  --f-success-stroke: #34D399;
  --f-warning:        var(--warning);
  --f-warning-tint:   var(--warning-bg);
  --f-warning-stroke: #FCD34D;
  --f-error:          var(--error);
  --f-error-tint:     var(--error-bg);
  --f-error-stroke:   #FCA5A5;
  --f-info:           var(--aurora-primary);
  --f-info-tint:      var(--info-bg);
  --f-info-stroke:    #7DD3FC;
  --f-ai:             var(--aurora-violet);
  --f-ai-tint:        var(--aurora-violet-dim);
  --f-sidebar-w:      260px;
  --f-topbar-h:       56px;
  --f-radius-sm:      var(--radius-sm);
  --f-radius:         var(--radius-md);
  --f-radius-lg:      var(--radius-lg);
  --f-radius-xl:      var(--radius-xl);
  --f-font:           var(--font-sans);
  --f-mono:           var(--font-mono);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: var(--f-font);
  font-size: 14px;
  background: var(--f-bg);
  color: var(--f-text);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }


/* ── Keyframe Animations ── */
@keyframes aDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes fBlink    { 0%,80%,100% { opacity: .2 } 40% { opacity: 1 } }
@keyframes fCursor   { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }

/* ── Markdown / AI Bubble Content ── */
.ai-content p             { margin: 0 0 .5em; }
.ai-content p:last-child  { margin-bottom: 0; }
.ai-content ul,
.ai-content ol            { padding-left: 1.4em; margin: .4em 0; }
.ai-content li            { margin: .2em 0; }
.ai-content code {
  background: var(--f-surface-4);
  border-radius: var(--f-radius-sm);
  padding: 2px 6px;
  font-family: var(--f-mono);
  font-size: .85em;
  color: var(--f-ai);
}
.ai-content pre {
  background: var(--f-surface-4);
  border-radius: var(--f-radius);
  padding: 12px 14px;
  overflow-x: auto;
  font-family: var(--f-mono);
  font-size: .83em;
  margin: .6em 0;
  border: 1px solid var(--f-stroke-2);
}
.ai-content pre code { background: none; padding: 0; color: var(--f-text); }

/* ── Typing Indicator ── */
.typing-dots span {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--f-text-disabled);
  margin: 0 2px;
  animation: fBlink 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }

/* ── Streaming Cursor ── */
.stream-cursor {
  display: inline-block;
  color: var(--f-accent);
  font-weight: 300;
  animation: fCursor .6s steps(1) infinite;
  user-select: none;
}


.chat-shell .chat-layout { flex: 1; min-width: 0; height: 100%; }

/* ── Keyboard hint inside chat ── */
.chat-hint kbd {
  font-family: var(--f-mono);
  background: var(--f-surface-4);
  border: 1px solid var(--f-stroke);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: .85em;
  color: var(--f-text-3);
}

/* ── Mail Client Form (partial riutilizzabile: Proposte Marketing/Solleciti, modal Detail) ── */
.mail-client-form {
  margin: 0.75rem 0 0;
  background: #fff;
  border: 1px solid var(--f-stroke);
  border-radius: 6px;
  overflow: hidden;
}
.mail-client-form__head {
  padding: 0.6rem 1rem;
  background: #f8f8f7;
  border-bottom: 1px solid var(--f-stroke);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mail-client-form__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: center;
  gap: 0.75rem;
  min-height: 2rem;
  font-size: 0.82rem;
}
.mail-client-form__lbl { color: var(--f-text-3); flex-shrink: 0; }
.mail-client-form__inp {
  min-width: 0;
  width: 100%;
  padding: 0.35rem 0.5rem;
  font-size: 0.82rem;
  border: 1px solid var(--f-stroke);
  border-radius: 4px;
  background: #fff;
  color: var(--f-text);
  box-sizing: border-box;
}
.mail-client-form__inp:focus {
  outline: none;
  border-color: var(--f-accent);
  box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.15);
}
.mail-client-form__subj { font-weight: 600; }
.mail-client-form__body-wrap {
  padding: 0.75rem 1rem;
  min-height: 8rem;
  border-bottom: 1px solid var(--f-stroke);
}
.mail-client-form__body {
  width: 100%;
  min-height: 7rem;
  padding: 0.5rem 0.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  border: none;
  border-radius: 0;
  background: transparent;
  resize: vertical;
  font-family: inherit;
  color: var(--f-text);
  box-sizing: border-box;
  outline: none;
}
.mail-client-form__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: #f8f8f7;
  border-top: 1px solid var(--f-stroke);
}
.mail-client-form__tool {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
}
.mail-client-form__tool label { color: var(--f-text-3); margin: 0; }
.mail-client-form__sel {
  padding: 0.2rem 0.5rem;
  font-size: 0.78rem;
  border: 1px solid var(--f-stroke);
  border-radius: 4px;
  background: #fff;
}
.mail-client-form__warn { font-size: 0.78rem; color: var(--f-warning); }
@media (max-width: 540px) {
  .mail-client-form__row { grid-template-columns: 1fr; gap: 0.2rem; }
  .mail-client-form__lbl { padding-top: 0.25rem; }
}