/* Macro widget — right-side always-open chat dock for globalmacroeconomy.fadafad.com
   Dark, terminal-adjacent aesthetic matching the site palette.
   Palette anchors (from css/common.css):
     --dark-bg: #0a0a0f · --dark-card: #111118 · --dark-card-2: #16161f
     --gold: #d4a017 · --gold-light: #f0c040 · --red-hot: #e01e37 · --red-dark: #9b1d20
     --text-primary: #eaeaf0 · --text-muted: #8888a0 · --border-subtle: rgba(255,255,255,0.06)
   Widget locks into the right rail at 380px on desktop, becomes a bottom
   sheet on mobile. */

:root {
  --macro-w: 380px;
  --macro-min-h: 56px;
  --macro-bg: #0d0d15;
  --macro-bg-2: #111118;
  --macro-bg-3: #16161f;
  --macro-border: rgba(255,255,255,0.08);
  --macro-border-2: rgba(212,160,23,0.22);
  --macro-gold: #d4a017;
  --macro-gold-light: #f0c040;
  --macro-red: #e01e37;
  --macro-text: #eaeaf0;
  --macro-muted: #8888a0;
  --macro-user-bubble: rgba(212,160,23,0.10);
  --macro-user-border: rgba(212,160,23,0.35);
  --macro-bot-bubble: #16161f;
  --macro-bot-border: rgba(255,255,255,0.08);
}

body.has-macro-dock     { padding-right: var(--macro-w); }
body.has-macro-dock-min { padding-right: 0; }

.macro-dock {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--macro-w);
  z-index: 9800;
  display: flex;
  flex-direction: column;
  background: var(--macro-bg);
  border-left: 1px solid var(--macro-border);
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--macro-text);
  box-shadow: -12px 0 32px rgba(0,0,0,0.45);
  transition: transform 260ms ease;
}

/* Header — gold accent bar over dark base */
.macro-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #0d0d15 0%, #1a1408 40%, #0d0d15 100%);
  border-bottom: 1px solid var(--macro-border-2);
  position: relative;
}
.macro-header::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--macro-gold) 30%, var(--macro-gold) 70%, transparent 100%);
  opacity: 0.55;
}
.macro-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--macro-gold-light), var(--macro-gold) 60%, #8a6a10);
  display: flex; align-items: center; justify-content: center;
  color: #0a0a0f;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 4px 12px rgba(212,160,23,0.25);
}
.macro-header-text { flex: 1; min-width: 0; }
.macro-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--macro-gold);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.macro-info {
  background: transparent;
  color: var(--macro-muted);
  border: 1px solid var(--macro-border);
  border-radius: 50%;
  width: 16px; height: 16px;
  padding: 0;
  cursor: help;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.macro-info:hover { color: var(--macro-gold); border-color: var(--macro-gold); }
.macro-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--macro-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.macro-dot-online {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: macro-pulse 2s ease-in-out infinite;
}
@keyframes macro-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.macro-min {
  background: transparent;
  color: var(--macro-muted);
  border: 1px solid var(--macro-border);
  border-radius: 6px;
  width: 28px; height: 28px;
  padding: 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 120ms, border-color 120ms;
}
.macro-min:hover, .macro-min:focus-visible {
  color: var(--macro-gold);
  border-color: var(--macro-gold);
  outline: none;
}

/* Body — messages + input */
.macro-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(212,160,23,0.05) 0%, transparent 45%),
    var(--macro-bg);
}
.macro-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px 8px;
  scroll-behavior: smooth;
}
.macro-messages::-webkit-scrollbar { width: 6px; }
.macro-messages::-webkit-scrollbar-track { background: transparent; }
.macro-messages::-webkit-scrollbar-thumb {
  background: rgba(212,160,23,0.15);
  border-radius: 3px;
}

.macro-msg { margin: 0 0 12px 0; display: flex; }
.macro-msg.macro-user { justify-content: flex-end; }
.macro-msg.macro-bot { justify-content: flex-start; }

.macro-bubble {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.55;
  font-family: 'Source Serif 4', Georgia, serif;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.macro-user .macro-bubble {
  background: var(--macro-user-bubble);
  color: var(--macro-text);
  border: 1px solid var(--macro-user-border);
  border-bottom-right-radius: 4px;
}
.macro-bot .macro-bubble {
  background: var(--macro-bot-bubble);
  color: var(--macro-text);
  border: 1px solid var(--macro-bot-border);
  border-bottom-left-radius: 4px;
}
.macro-bubble strong { color: var(--macro-gold); font-weight: 700; }

/* Typing indicator */
.macro-typing .macro-bubble {
  color: var(--macro-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 1px;
}
.macro-typing-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--macro-gold);
  margin: 0 2px;
  animation: macro-blink 1.4s infinite both;
}
.macro-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.macro-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes macro-blink { 0%,80%,100% { opacity: 0.2; } 40% { opacity: 1; } }

/* Suggestion chips */
.macro-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 14px 8px;
  border-top: 1px dashed var(--macro-border);
  background: rgba(255,255,255,0.01);
}
.macro-chip {
  background: transparent;
  color: var(--macro-gold-light);
  border: 1px solid var(--macro-border-2);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.macro-chip:hover, .macro-chip:focus-visible {
  background: rgba(212,160,23,0.10);
  color: var(--macro-gold-light);
  border-color: var(--macro-gold);
  outline: none;
}

/* Input row */
.macro-input {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--macro-border);
  background: var(--macro-bg-2);
}
.macro-input input {
  flex: 1;
  background: var(--macro-bg-3);
  border: 1px solid var(--macro-border);
  color: var(--macro-text);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Source Serif 4', Georgia, serif;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.macro-input input::placeholder { color: var(--macro-muted); }
.macro-input input:focus {
  border-color: var(--macro-gold);
  box-shadow: 0 0 0 2px rgba(212,160,23,0.15);
}
.macro-input button {
  background: var(--macro-gold);
  color: #0a0a0f;
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  transition: background 120ms;
}
.macro-input button:hover { background: var(--macro-gold-light); }
.macro-input button:disabled { background: var(--macro-muted); cursor: not-allowed; opacity: 0.6; }

/* Footer disclaimer */
.macro-footer {
  padding: 8px 14px 10px;
  border-top: 1px solid var(--macro-border);
  background: var(--macro-bg);
  color: var(--macro-muted);
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.45;
  text-align: center;
  letter-spacing: 0.3px;
}
.macro-footer a { color: var(--macro-gold); text-decoration: none; }
.macro-footer a:hover { text-decoration: underline; }

/* Minimised state */
.macro-dock.macro-minimised {
  transform: translateX(calc(100% - 200px));
}
.macro-dock.macro-minimised .macro-body,
.macro-dock.macro-minimised .macro-footer { display: none; }
.macro-dock.macro-minimised .macro-header { cursor: pointer; border-bottom-color: transparent; }

/* Mobile — becomes a bottom sheet */
@media (max-width: 768px) {
  .macro-dock {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 62vh;
    max-height: 620px;
    border-left: none;
    border-top: 1px solid var(--macro-border-2);
    box-shadow: 0 -12px 32px rgba(0,0,0,0.55);
    transition: transform 260ms ease;
  }
  body.has-macro-dock     { padding-right: 0; padding-bottom: calc(62vh - 80px); }
  body.has-macro-dock-min { padding-right: 0; padding-bottom: var(--macro-min-h); }
  .macro-dock.macro-minimised {
    transform: translateY(calc(100% - var(--macro-min-h)));
  }
  .macro-header { padding: 10px 12px; }
}

/* Very narrow — no bottom-padding on body so content isn't buried */
@media (max-width: 400px) {
  body.has-macro-dock { padding-bottom: 0; }
  .macro-dock { height: 55vh; }
}

/* Print — hide widget on print */
@media print { .macro-dock { display: none !important; } body.has-macro-dock { padding-right: 0; } }

/* Interop with existing macro-article artefacts
   Two article pages (japan-the-slow-fuse, the-yen-intervention-is-a-dollar-story)
   render an inline `.wa-fixed` WhatsApp badge at bottom-right. When the widget
   dock is present, shift the badge left so it stays visible next to the dock
   instead of being covered by it. When minimised, the badge returns to its
   default position. Uses !important to defeat the inline CSS in those pages. */
body.has-macro-dock .wa-fixed {
  right: calc(var(--macro-w) + 16px) !important;
}
@media (max-width: 768px) {
  body.has-macro-dock .wa-fixed {
    bottom: calc(62vh + 8px) !important;
    right: 14px !important;
  }
}