/* ============================================================
   Pulse Dashboard Documentation — Custom Styles
   ============================================================ */

/* ── Brand colour overrides ── */
:root {
  --md-primary-fg-color: #4051B5;
  --md-primary-fg-color--light: #5D6CC0;
  --md-primary-fg-color--dark: #303FA1;
  --md-accent-fg-color: #526CFE;
  --pulse-danger: #EF5350;
  --pulse-warn: #FFA726;
  --pulse-success: #66BB6A;
}

/* ── Navigation tweaks ── */
.md-nav__title { font-weight: 700; }
.md-sidebar--primary { border-right: 1px solid var(--md-default-fg-color--lightest); }

/* ── Table improvements ── */
.md-typeset table:not([class]) {
  width: 100%;
  border-collapse: collapse;
}
.md-typeset table:not([class]) th {
  background-color: var(--md-primary-fg-color);
  color: #fff;
  padding: .5rem .75rem;
}
.md-typeset table:not([class]) td { padding: .45rem .75rem; }
.md-typeset table:not([class]) tr:nth-child(even) td {
  background-color: var(--md-code-bg-color);
}

/* ── Admonition tweaks ── */
.md-typeset .admonition.info { border-left-color: var(--md-accent-fg-color); }
.md-typeset .admonition.warning { border-left-color: var(--pulse-warn); }

/* ── Tag chips ── */
.md-tag { border-radius: 4px; font-size: .7rem; }

/* ============================================================
   AI Chatbot Widget
   ============================================================ */

/* ── FAB launcher ── */
#pulse-chat-fab {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--md-primary-fg-color);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  z-index: 9999;
  transition: transform 0.2s, background 0.2s;
}
#pulse-chat-fab:hover { transform: scale(1.08); background: var(--md-primary-fg-color--dark); }
#pulse-chat-fab.pcf--open { background: var(--md-accent-fg-color); }

/* ── Panel — always docked bottom-right, hidden via display:none ── */
#pulse-chat-panel {
  display: none;
  position: fixed;
  bottom: 5.5rem;
  right: 1.75rem;
  width: 400px;
  height: 560px;
  min-width: 280px;
  min-height: 320px;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.2);
  flex-direction: column;
  overflow: hidden;
  z-index: 9998;
}
#pulse-chat-panel.pcp--open { display: flex; }
#pulse-chat-panel.pcp--fullscreen {
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  width: 100vw !important; height: 100vh !important;
  border-radius: 0;
}

/* ── Resize handle — top-left corner ── */
#pcp-resize-handle {
  position: absolute;
  top: 0; left: 0;
  width: 22px; height: 22px;
  cursor: nw-resize;
  z-index: 20;
  border-radius: 12px 0 0 0;
}
#pcp-resize-handle::before {
  content: '';
  position: absolute;
  top: 5px; left: 5px;
  width: 9px; height: 9px;
  border-top: 2px solid rgba(255,255,255,0.45);
  border-left: 2px solid rgba(255,255,255,0.45);
}
#pcp-resize-handle:hover::before { border-color: rgba(255,255,255,0.9); }

/* ── Chat header ── */
.pcp-header {
  background: var(--md-primary-fg-color);
  color: #fff;
  padding: 0.75rem 0.85rem 0.75rem 2rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
  border-bottom: 2px solid var(--md-accent-fg-color);
  user-select: none;
}
.pcp-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pcp-title { flex: 1; }
.pcp-title strong { display: block; font-size: 0.88rem; font-weight: 700; line-height: 1.2; }
.pcp-title span   { display: block; font-size: 0.69rem; opacity: 0.7; }
.pcp-hbtn {
  background: transparent; border: none;
  color: rgba(255,255,255,0.75); cursor: pointer;
  padding: 0.2rem 0.35rem; border-radius: 4px;
  display: flex; align-items: center; transition: background 0.15s;
}
.pcp-hbtn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.pcp-close {
  background: transparent; border: none;
  color: rgba(255,255,255,0.75); cursor: pointer;
  font-size: 1rem; padding: 0.2rem 0.35rem;
  border-radius: 4px; transition: background 0.15s;
}
.pcp-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* ── Messages area ── */
.pcp-messages {
  flex: 1; overflow-y: auto;
  padding: 0.85rem;
  display: flex; flex-direction: column;
  gap: 0.65rem; scroll-behavior: smooth;
}
.pcp-messages::-webkit-scrollbar { width: 3px; }
.pcp-messages::-webkit-scrollbar-thumb { background: var(--md-default-fg-color--lightest); border-radius: 2px; }

/* ── Message bubbles ── */
.pcm { display: flex; gap: 0.45rem; align-items: flex-start; max-width: 90%; }
.pcm--user { align-self: flex-end; flex-direction: row-reverse; }
.pcm-av {
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 0.65rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pcm--bot  .pcm-av { background: var(--md-primary-fg-color); color: #fff; }
.pcm--user .pcm-av { background: var(--md-accent-fg-color);  color: #fff; }
.pcm-bubble {
  padding: 0.55rem 0.85rem; border-radius: 10px;
  font-size: 0.865rem; line-height: 1.55; word-break: break-word;
}
.pcm--bot  .pcm-bubble { background: var(--md-code-bg-color); border-radius: 3px 10px 10px 10px; }
.pcm--user .pcm-bubble { background: var(--md-primary-fg-color); color: #fff; border-radius: 10px 3px 10px 10px; }
.pcm-bubble p { margin: 0 0 6px 0; }
.pcm-bubble p:last-child { margin-bottom: 0; }
.pcm-bubble code { background: rgba(0,0,0,0.08); padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.82em; }
.pcm--user .pcm-bubble code { background: rgba(255,255,255,0.18); color: #fff; }
.pcm-bubble pre { background: rgba(0,0,0,0.08); padding: 0.6rem 0.8rem; border-radius: 5px; overflow-x: auto; font-size: 0.82em; margin: 0.4em 0; }
.pcm-bubble ul, .pcm-bubble ol { padding-left: 1.3em; margin: 4px 0; }
.pcm-bubble li { margin-bottom: 0.2em; }

/* ── Typing indicator ── */
.pcp-typing { display: flex; gap: 4px; align-items: center; padding: 0.15rem 0; }
.pcp-typing span { width: 6px; height: 6px; background: var(--md-default-fg-color--light); border-radius: 50%; animation: pcpDot 1.2s infinite ease-in-out; }
.pcp-typing span:nth-child(2) { animation-delay: 0.2s; }
.pcp-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes pcpDot {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
  40%           { opacity: 1;    transform: scale(1.1); }
}

/* ── Quick prompts ── */
.pcp-quick { padding: 0 0.7rem 0.65rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pcp-qbtn {
  background: transparent;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 14px; padding: 0.28em 0.75em;
  font-size: 0.75rem; cursor: pointer;
  color: var(--md-primary-fg-color);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  font-family: inherit; line-height: 1.4;
}
.pcp-qbtn:hover { background: var(--md-primary-fg-color); color: #fff; border-color: var(--md-primary-fg-color); }

/* ── Input row ── */
.pcp-input-row {
  display: flex; gap: 0.45rem; padding: 0.7rem;
  border-top: 1px solid var(--md-default-fg-color--lightest); flex-shrink: 0;
}
#pulse-chat-input {
  flex: 1; resize: none;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 7px; padding: 0.5rem 0.75rem;
  font-size: 0.865rem; font-family: inherit;
  background: var(--md-default-bg-color); color: var(--md-default-fg-color);
  max-height: 120px; overflow-y: auto; outline: none; line-height: 1.4;
  transition: border-color 0.15s;
}
#pulse-chat-input:focus { border-color: var(--md-accent-fg-color); }
#pulse-chat-send {
  width: 34px; height: 34px; border-radius: 7px; border: none;
  background: var(--md-primary-fg-color); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.1s; flex-shrink: 0; align-self: flex-end;
}
#pulse-chat-send:hover { background: var(--md-primary-fg-color--dark); transform: scale(1.05); }
#pulse-chat-send:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ── Mobile ── */
@media (max-width: 600px) {
  #pulse-chat-panel { right: 0.5rem; left: 0.5rem; width: auto !important; bottom: 4.75rem; }
  #pulse-chat-fab   { right: 1rem; bottom: 1rem; }
}


/* ── Combined caption/fieldname column style ── */
.field-name {
  display: block;
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.72em;
  opacity: 0.75;
  margin-top: 1px;
}

/* ── Hide section index icons ── */
/* ── Hide nav section index icons ── */
span.md-nav__icon.md-icon { display: none !important; }
span.md-nav__icon.md-icon::after { display: none !important; }
label > span.md-nav__icon { display: none !important; }

/* ── Hide article status indicators ── */
.md-status { display: none !important; }

/* ── Docs hub home link (injected by pulse-home.js) ── */
.pulse-home-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0 .4rem;
  padding: .25rem .55rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 6px;
  color: #fff;
  font-size: .65rem;
  white-space: nowrap;
  transition: background .15s;
}
.pulse-home-link:hover,
.pulse-home-link:focus {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}
.pulse-home-link svg { width: .85rem; height: .85rem; fill: currentColor; }
@media screen and (max-width: 44.9375em) {
  .pulse-home-link span { display: none; }
}