/* ===========================
   Shopper AI Chat (House Style)
   Floats over MkDocs (no push)
   =========================== */

:root {
  --theme: oklch(.497 .11 239.99);
  --theme-transparent: oklch(.948 .025 255.56);
  --theme-highlight: oklch(.598 .132 240.11);
  --theme-dark: oklch(.351 .078 240.17);
  --theme-border: oklch(.283 .062 239.56);
  --theme-highlight-alt: oklch(.896 .051 250.2);
}

/* ===========================
   Header Launch Button
   =========================== */

.shpr-ai-btn{
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background: color-mix(in oklch, var(--theme-transparent) 55%, white 45%);
  border: 1px solid color-mix(in oklch, var(--theme-border) 22%, transparent 78%);
  box-shadow: 0 8px 18px color-mix(in oklch, var(--theme-border) 10%, transparent 90%);
  cursor:pointer;
  padding:0;
  margin-left: 10px;
}

.shpr-ai-btn svg{ width:26px; height:20px; display:block; }
.shpr-ai-btn svg path,
.shpr-ai-btn svg g{ fill: var(--theme) !important; stroke:none !important; }

/* ===========================
   Backdrop
   =========================== */

.shpr-ai-backdrop{
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.18);
}
.shpr-ai-backdrop.is-hidden{ display:none; }

/* ===========================
   Chat Container
   =========================== */

#ai-chat{
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: min(920px, 92vw);
  max-height: 80vh;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  overflow: hidden;

  background: color-mix(in oklch, white 86%, var(--theme-transparent) 14%);
  border: 1px solid color-mix(in oklch, var(--theme-border) 25%, transparent 75%);
  border-radius: 16px;

  box-shadow:
    0 18px 40px color-mix(in oklch, var(--theme-border) 18%, transparent 82%),
    0 2px 10px rgba(0,0,0,0.06);

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

#ai-chat.is-hidden{ display:none; }

/* ===========================
   Header
   =========================== */

#ai-chat .ai-chat__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--theme-highlight-alt) 55%, white 45%),
    color-mix(in oklch, var(--theme-transparent) 18%, transparent 82%)
  );
  border-bottom: 1px solid color-mix(in oklch, var(--theme-border) 18%, transparent 82%);
}

#ai-chat .ai-chat__title{
  display:flex;
  gap:12px;
  align-items:center;
  flex: 1;
  min-width:0;
}

/* The unnamed div wrapping __h and __sub must also shrink */
#ai-chat .ai-chat__title > div:last-child{
  min-width: 0;
  overflow: hidden;
}

#ai-chat .ai-chat__h{
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color: color-mix(in oklch, var(--theme-border) 18%, black 82%);
}

#ai-chat .ai-chat__sub{
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color: color-mix(in oklch, var(--theme-border) 40%, black 60%);
}

/* Badge */
#ai-chat .ai-chat__badge{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background: color-mix(in oklch, var(--theme-transparent) 55%, white 45%);
  border: 1px solid color-mix(in oklch, var(--theme-border) 22%, transparent 78%);
  box-shadow: 0 8px 18px color-mix(in oklch, var(--theme-border) 10%, transparent 90%);
}

#ai-chat .ai-chat__badge svg{
  width:26px;
  height:20px;
  display:block;
}

#ai-chat .ai-chat__badge svg path,
#ai-chat .ai-chat__badge svg g{
  fill: var(--theme) !important;
  stroke: none !important;
}

/* ===========================
   Unified Header Icon Buttons
   =========================== */

#ai-chat .ai-chat__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink: 0;
}

#ai-chat .ai-chat__actions button{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  border-radius:10px;
  color: color-mix(in oklch, var(--theme-border) 25%, black 75%);
  cursor:pointer;
  transition: background .15s ease, color .15s ease, transform .05s ease;
}

#ai-chat .ai-chat__actions button:hover{
  background: color-mix(in oklch, var(--theme-transparent) 55%, white 45%);
  color: var(--theme);
}

#ai-chat .ai-chat__actions button:active{
  transform: translateY(1px);
}

#ai-chat .ai-chat__actions button svg{
  width:18px;
  height:18px;
  display:block;
}

/* ===========================
   Settings Panel
   =========================== */

#ai-chat .ai-chat__settings{
  padding:10px 14px;
  border-bottom:1px solid color-mix(in oklch, var(--theme-border) 14%, transparent 86%);
  background: color-mix(in oklch, var(--theme-transparent) 35%, white 65%);
}

#ai-chat .ai-chat__settingrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

#ai-chat .ai-chat__label{
  font-size:12px;
  font-weight:650;
  color: color-mix(in oklch, var(--theme-border) 35%, black 65%);
}

#ai-chat .ai-chat__seg{
  display:inline-grid;
  grid-auto-flow:column;
  gap:6px;
  padding:6px;
  background:white;
  border: 1px solid color-mix(in oklch, var(--theme-border) 16%, transparent 84%);
  border-radius:14px;
}

#ai-chat .ai-chat__seg input{ display:none; }

#ai-chat .ai-chat__seg label{
  cursor:pointer;
  font-size:12px;
  padding:6px 10px;
  border-radius:12px;
  color: color-mix(in oklch, var(--theme-border) 35%, black 65%);
}

#ai-chat .ai-chat__seg input:checked + label{
  background: var(--theme-dark);
  color: white;
}

/* ===========================
   Thread + Messages
   =========================== */

#ai-chat .ai-chat__thread{
  flex: 1;
  min-height: 0;
  overflow:auto;
  padding:12px 14px;
  background:white;
}

#ai-chat .ai-msg{
  display:flex;
  margin:10px 0;
}

#ai-chat .ai-msg--assistant{ justify-content:flex-start; }
#ai-chat .ai-msg--user{ justify-content:flex-end; }

#ai-chat .ai-msg__bubble{
  max-width:80%;
  padding:10px 12px;
  border-radius:14px;
  font-size:13px;
  line-height:1.45;
  border:1px solid color-mix(in oklch, var(--theme-border) 12%, transparent 88%);
}

#ai-chat .ai-msg--assistant .ai-msg__bubble{
  background: color-mix(in oklch, var(--theme-transparent) 55%, white 45%);
  color: color-mix(in oklch, var(--theme-border) 22%, black 78%);
  border-top-left-radius: 9px;
}

#ai-chat .ai-msg--user .ai-msg__bubble{
  background: var(--theme-dark);
  color:white;
  border-color: color-mix(in oklch, var(--theme-border) 18%, transparent 82%);
  border-top-right-radius: 9px;
}

/* Markdown inside bubbles only */
#ai-chat .ai-msg__bubble ul,
#ai-chat .ai-msg__bubble ol{
  padding-left: 1.25rem;
  margin: 0.5rem 0;
}
#ai-chat .ai-msg__bubble li{ margin: 0.25rem 0; }

#ai-chat .ai-msg__bubble pre,
#ai-chat .ai-msg__bubble code{
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

#ai-chat .ai-msg__bubble img{
  max-width:100%;
  height:auto;
  display:block;
  margin: 0.5rem 0;
  border-radius:10px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  object-fit: contain;
  max-height: 420px;
}

#ai-chat .ai-msg__bubble a{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Scrollbar only inside chat */
#ai-chat .ai-chat__thread::-webkit-scrollbar{ width: 10px; }
#ai-chat .ai-chat__thread::-webkit-scrollbar-thumb{
  background: color-mix(in oklch, var(--theme-border) 18%, transparent 82%);
  border-radius: 10px;
}

/* ===========================
   Composer
   =========================== */

#ai-chat .ai-chat__composer{
  display:flex;
  gap:10px;
  padding:12px 14px;
  border-top:1px solid color-mix(in oklch, var(--theme-border) 14%, transparent 86%);
  background: color-mix(in oklch, var(--theme-transparent) 30%, white 70%);
}

#ai-chat .ai-chat__input{
  flex:1;
  resize:none;
  border:1px solid color-mix(in oklch, var(--theme-border) 18%, transparent 82%);
  border-radius:14px;
  padding:10px 12px;
  font-size:13px;
  outline:none;
  min-height:42px;
  max-height:120px;
  overflow:auto;
  background:white;
}

#ai-chat .ai-chat__input:focus{
  border-color: color-mix(in oklch, var(--theme) 65%, white 35%);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--theme-highlight) 25%, transparent 75%);
}

#ai-chat .ai-chat__btn{
  height:42px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid color-mix(in oklch, var(--theme-border) 12%, transparent 88%);
  background: var(--theme);
  color:white;
  font-weight:600;
  cursor:pointer;
  white-space: nowrap;
  transition: transform .04s ease, opacity .2s ease, filter .15s ease;
}

#ai-chat .ai-chat__btn:hover{ filter: brightness(1.02); }
#ai-chat .ai-chat__btn:disabled{ opacity: 0.55; cursor: not-allowed; }
#ai-chat .ai-chat__btn:active{ transform: translateY(1px); }

/* ===========================
   Footer (NO cut-off)
   =========================== */

#ai-chat .ai-chat__footer{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;

  padding:10px 14px 12px;
  font-size:11px;
  color: color-mix(in oklch, var(--theme-border) 45%, black 55%);
  background: color-mix(in oklch, var(--theme-transparent) 35%, white 65%);
  border-top:1px solid color-mix(in oklch, var(--theme-border) 10%, transparent 90%);

  flex-wrap: wrap;
}

#ai-chat .ai-chat__footer > *{
  min-width: 0;
  flex: 1 1 280px;
}

#ai-chat .ai-chat__disclaimer{
  text-align: right;
}

@media (max-width: 520px){
  #ai-chat .ai-chat__footer > *{ flex-basis: 100%; }
  #ai-chat .ai-chat__disclaimer{ text-align: left; }
}

@media (max-width: 599px){
  #ai-chat{
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: calc(100dvh - 56px);
    transform: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
}

/* ===========================
   Anchor scrolling offset
   =========================== */

.md-content :is(h1,h2,h3,h4,h5,h6){
  scroll-margin-top: 180px;
}
/* ── Wrapper ─────────────────────────────────────────── */
.shpr-header-actions {
  display: flex;
  align-items: center;
}

/* ── Buttons: identical to .md-header__button.md-icon ── */
.shpr-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;

  /* Same padding Material uses on header icon buttons */
  padding: 0 0.4rem;
  height: 2.4rem;          /* matches md-header height */
  border-radius: 0.1rem;

  color: var(--md-primary-bg-color);
  background: transparent;
  border: none;

  font-size: 0.7rem;
  font-weight: 500;
  font-family: var(--md-text-font, sans-serif);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;


}

.shpr-pill-btn:hover {
  opacity: 0.7;
  color: var(--md-primary-bg-color);
  text-decoration: none;
}

.shpr-pill-btn svg {
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
}

/* ── Responsive: hide text labels on tablet/mobile ──────── */
@media screen and (max-width: 59.9375em) {
  .shpr-pill-btn span {
    display: none;
  }

  .shpr-pill-btn {
    padding: 0 0.4rem;
  }
}

/* ── On small phones: pull out of header, become floating action buttons ── */
@media screen and (max-width: 599px) {
  #shpr-header-actions {
    position: fixed;
    bottom: 1.5rem;
    right: 1rem;
    z-index: 9997;          /* below chat (9999) but above page content */
    flex-direction: column;
    gap: 0.6rem;
  }

  .shpr-pill-btn {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    padding: 0;
    justify-content: center;
    background: var(--theme);
    color: white;
    border: none;
    box-shadow: 0 3px 10px color-mix(in oklch, var(--theme-border) 35%, transparent 65%);
    transition: opacity .15s ease, transform .1s ease;
  }

  .shpr-pill-btn:hover {
    opacity: 0.88;
    color: white;
    transform: scale(1.06);
  }

  .shpr-pill-btn svg {
    width: 1.2rem;
    height: 1.2rem;
  }
}