/* ============================================
   ZIEN FIT — ZIA AI Trainer Chat
   ============================================ */

.zia-page-inner {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--bottom-nav-height));
  max-height: calc(100vh - var(--bottom-nav-height));
}
@media (min-width: 1024px) {
  .zia-page-inner {
    height: 100vh;
    max-height: 100vh;
    margin-left: var(--sidebar-width);
  }
}

.zia-header {
  padding: var(--space-base) var(--space-md);
  border-bottom: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: space-between;
}
.zia-header-left {
  display: flex; align-items: center; gap: var(--space-sm);
}
.zia-header-left h2 {
  font: 700 20px var(--font-heading);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--text-primary);
}
.zia-header-left .zia-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--signal-cyan);
  box-shadow: var(--shadow-cyan);
  animation: pulse 2s infinite;
}
.zia-context {
  font: 400 12px var(--font-mono);
  color: var(--text-muted);
}

/* ── Chat Messages ── */
.zia-messages {
  flex: 1; overflow-y: auto;
  padding: var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-base);
}

.zia-bubble {
  background: var(--bg-elevated);
  border: 1px solid var(--border-visible);
  border-radius: 2px 12px 12px 12px;
  border-left: 2px solid var(--signal-cyan);
  padding: 14px 18px;
  max-width: 80%;
  align-self: flex-start;
  position: relative;
}
.zia-bubble::before {
  content: 'ZIA';
  display: block;
  font: 600 10px var(--font-mono);
  color: var(--signal-cyan);
  letter-spacing: 0.2em;
  margin-bottom: 6px;
}
.zia-bubble p {
  font: 400 14px var(--font-body);
  color: var(--text-secondary);
  line-height: 1.6;
}

.user-bubble {
  background: var(--gold-ghost);
  border: 1px solid var(--border-gold);
  border-radius: 12px 2px 12px 12px;
  padding: 12px 18px;
  max-width: 70%;
  align-self: flex-end;
}
.user-bubble p {
  font: 400 14px var(--font-body);
  color: var(--text-primary);
}

/* ── Typing Indicator ── */
.zia-typing::after {
  content: '▋';
  color: var(--signal-cyan);
  animation: cursorBlink 1s infinite;
  margin-left: 2px;
}

/* ── Workout Card (inside chat) ── */
.workout-card-chat {
  background: var(--bg-surface);
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  padding: var(--space-md);
  max-width: 90%;
  align-self: flex-start;
  margin-top: var(--space-tight);
}
.wc-header {
  display: flex; align-items: center; gap: var(--space-sm);
  margin-bottom: var(--space-base);
}
.wc-header .wc-icon { font-size: 18px; }
.wc-header h4 {
  font: 700 15px var(--font-heading);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-primary);
}
.wc-header .wc-meta {
  font: 400 12px var(--font-mono);
  color: var(--text-secondary);
  margin-left: auto;
}
.wc-section-label {
  font: 600 11px var(--font-mono);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-sm) 0 var(--space-tight);
}
.wc-actions {
  display: flex; gap: var(--space-sm);
  margin-top: var(--space-base);
  padding-top: var(--space-base);
  border-top: 1px solid var(--divider);
}

/* ── Quick Actions ── */
.zia-quick-actions {
  display: flex; gap: var(--space-tight); flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--divider);
}
.quick-action-btn {
  padding: 8px 14px;
  font: 500 12px var(--font-heading);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-visible);
  border-radius: 2px;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.quick-action-btn:hover {
  border-color: var(--gold-primary);
  color: var(--gold-primary);
}

/* ── Input Bar ── */
.zia-input-bar {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--divider);
  background: var(--bg-surface);
}
.zia-input {
  flex: 1;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-visible);
  border-radius: 2px;
  color: var(--text-primary);
  font: 400 14px var(--font-body);
  transition: border-color var(--dur-fast);
}
.zia-input:focus { border-color: var(--gold-primary); }
.zia-input::placeholder { color: var(--text-muted); }
.zia-send-btn {
  width: 44px; height: 44px;
  border-radius: 2px;
  background: var(--grad-gold);
  color: var(--bg-void);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer;
  transition: box-shadow var(--dur-fast);
}
.zia-send-btn:hover { box-shadow: var(--shadow-gold); }