/* Kitchens Assistance — scoped to Kitchen page, aligns with dashboard.css tokens */
body[data-page="kitchen"] .assistant-pill.active{
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  border-bottom: 2px solid var(--brand-gold,#b08a48);
}

/* --- Layout parity with dashboard left/right columns --- */
body[data-page="kitchen"] #leftColumn,
body[data-page="kitchen"] #kitchen-left-host {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

body[data-page="kitchen"] #rightColumn,
body[data-page="kitchen"] #kitchen-right-host {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* --- Chat transcript container (match dashboard.css #chatBox) --- */
body[data-page="kitchen"] #chatBox {
  min-height: 420px;
  max-height: 70vh;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--brand-gold, #b08a48);
  border-radius: 0.75rem;
  box-shadow: 0 2px 10px rgba(0,0,0,06);
  padding: 0.85rem;
}


/* --- Composer block & textarea (match dashboard composer) --- */
body[data-page="kitchen"] .composer {
  border-radius: 0.75rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  padding: 0.85rem;
  background: #fff;
}

body[data-page="kitchen"] .composer .form-control {
  width: 100%;
  border: 1px solid var(--brand-gold, #b08a48);
  border-radius: 0.55rem;
  background-color: #fff;
  padding: 0.6rem 0.75rem;
  resize: vertical;
  min-height: 110px;
  outline: none;
}

body[data-page="kitchen"] .composer .form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(176,138,72,.25);
}
/* --- Chat messages area --- */
body[data-page="kitchen"] #chatMessages {
  max-height: 62vh;
  overflow: auto;
}

/* Each message row */
body[data-page="kitchen"] .vm-chat-msg {
  display: flex;
  margin-bottom: 0.5rem;
}
body[data-page="kitchen"] .vm-chat-msg.me { justify-content: flex-end; }

/* Plain chat line (no pill/no bubble) */
body[data-page="kitchen"] .vm-chat-line {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  /* Keep text readable and unskinned — no border, no background */
}

/* Standard chat bubble (div/span) */
body[data-page="kitchen"] .vm-chat-bubble {
  padding: .5rem .75rem;
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  max-width: 80%;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Author bubble coloring */
body[data-page="kitchen"] .vm-chat-msg.me .vm-chat-bubble {
  background: rgba(176,138,72,.08);
  border-color: var(--brand-gold, #b08a48);
}


/* === HARD RESET (scoped): only normalize rogue controls that appear INSIDE message rows === */
body[data-page="kitchen"] #chatMessages .vm-chat-msg :is(button, .btn, .nav-link):not(#sendButton):not(#recordButton) {
  all: unset;
  display: inline-block;
  max-width: 80%;
  padding: .5rem .75rem;
  border-radius: .75rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}


/* Align 'me' buttons like bubbles when they appear */
body[data-page="kitchen"] #chatMessages .vm-chat-msg.me :is(button, .btn, .nav-link) {
  background: rgba(176,138,72,.08);
  border-color: var(--brand-gold, #b08a48);
}

/* Kill hover/focus states for rogue controls only inside message rows */
body[data-page="kitchen"] #chatMessages .vm-chat-msg :is(button, .btn, .nav-link):is(:hover, :focus) {
  box-shadow: none;
  outline: none;
}


/* --- Right rail: Google Doc frame parity with dashboard --- */
/* Explicitly size the iframe when it itself has .doc-frame */
body[data-page="kitchen"] #rightColumn iframe.doc-frame {
  display: block;
  width: 120%;
  height: 80vh;
  min-height: 720px;
}




body[data-page="kitchen"] #rightColumn .doc-fallback .alert {
  border-radius: 0.5rem;
}

/* --- Responsive niceties (match dashboard breakpoints) --- */
@media (max-width: 991.98px) {
  body[data-page="kitchen"] #chatBox { max-height: 58vh; }
  body[data-page="kitchen"] #rightColumn .doc-frame { min-height: 360px; }
}


@media (max-width: 575.98px) {
  body[data-page="kitchen"] #chatBox { max-height: 55vh; }
  body[data-page="kitchen"] .composer .form-control { min-height: 96px; }
}
body[data-page="kitchen"] #leftColumn .vm-chatbox,
body[data-page="kitchen"] #kitchen-left-host .vm-chatbox {
  background: var(--color-bg, #fff);
  border-radius: var(--radius-8, 0.5rem);
}

body[data-page="kitchen"] #chatMessages {
  max-height: 62vh;
  overflow: auto;
}


body[data-page="kitchen"] .vm-chat-msg {
  display: flex;
  margin-bottom: 0.5rem;
}
body[data-page="kitchen"] #chatMessages .vm-chat-msg.me :is(button, .btn, .nav-link) {
  background: rgba(176,138,72,.08);
  border-color: var(--brand-gold, #b08a48);
}


body[data-page="kitchen"] .vm-chat-msg.me .vm-chat-bubble {
  background: rgba(176,138,72,.08);
  border-color: var(--brand-gold, #b08a48);
}

body[data-page="kitchen"] #rightColumn .doc-frame,
body[data-page="kitchen"] #kitchen-right-host .doc-frame {
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border-strong, rgba(0,0,0,.12));
  border-radius: var(--radius-8, 0.5rem);
  overflow: hidden;
  min-height: 40vh;
}

body[data-page="kitchen"] #rightColumn .doc-frame iframe {
  width: 100%;
  height: 60vh;
  border: 0;
  display: block;
}

body[data-page="kitchen"] #rightColumn .doc-fallback .alert {
  border-radius: var(--radius-8, 0.5rem);
}

/* Fallback block removed on purpose.
   Reason: it overrode Bootstrap controls and forced “bubble” styling outside of
   actual message rows. The page already defines kitchen-scoped rules above. */
/* ==== Plain chat transcript (force off all bubbles) ==== */
body[data-page="kitchen"] #chatMessages .vm-chat-msg,
body[data-page="kitchen"] .vm-chat-msg {
  display: block;          /* no flex row layout */
  margin: 0 0 .5rem 0;
}

body[data-page="kitchen"] .vm-chat-bubble {
  all: unset;              /* nuke background/border/padding from earlier rules */
  white-space: pre-wrap;
  word-break: break-word;
}

body[data-page="kitchen"] .vm-chat-msg.me { justify-content: flex-start; }

/* Our only display style is a single plain paragraph line */
body[data-page="kitchen"] .vm-chat-line {
  margin: 0 0 .5rem 0;
  white-space: pre-wrap;
  word-break: break-word;
}
/* removed – superseded by canonical block below */


/* --- Composer: ensure buttons look individual, not connected --- */
body[data-page="kitchen"] .composer .btn {
  border-radius: .55rem;
}

/* Make the top-right header buttons uniform height even if text wraps */
body[data-page="kitchen"] #rightColumn .btn.btn-sm {
  min-height: 32px;
}
/* removed – superseded by canonical block below */
/* removed – superseded by canonical block below */

/* ==== KITCHEN — CANONICAL BUTTON NORMALIZATION (single source of truth) ==== */
body[data-page="kitchen"] #chatbotButtons{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0 !important;
  margin: 0.95rem 0 0 0 !important;
}
/* allow each child to size naturally inside the grid */
body[data-page="kitchen"] #chatbotButtons > *{ display: initial !important; }

/* Match Artist: inline, wrap, same rhythm */
body[data-page="kitchen"] .assistant-pill{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;                 /* prevent “squashed” icon/label */
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.3 !important;            /* tighter like Artist */
  font-weight: 400 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  vertical-align: baseline !important;
  white-space: initial !important;         /* allow wrapping inside label */
  text-decoration: none !important;
  appearance: none !important;
  cursor: pointer !important;
  position: relative !important;           /* needed for the half-underline */
}


body[data-page="kitchen"] .assistant-pill .assistant-label{
  display: inline-block;
  white-space: normal;
  word-break: break-word;
  line-height: 1.5;
  max-width: 22ch;                         /* encourages 2–3 line wraps */
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 3;                           /* standard property */
  -webkit-line-clamp: 3;                   /* vendor fallback */
  -webkit-box-orient: vertical;
}


/* Active = gold underline (no box). Use strong specificity to win. */
body[data-page="kitchen"] #assistantsBar #chatbotButtons .assistant-pill.active,
body[data-page="kitchen"] #chatbotButtons .assistant-pill.active{
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  box-shadow: none !important;             /* kill the “box” underline */
}

/* Draw the short gold bar on the pill itself so globals can’t widen it */
body[data-page="kitchen"] #chatbotButtons .assistant-pill::after{
  content: "";
  position: absolute;
  bottom: -0.18em;
  left: 50%;
  transform: translateX(-50%);
  width: 46%;                 /* short, centered (≈ half-label look) */
  height: 1px;
  border-radius: 1px;
  background: var(--brand-gold, #b08a48);
  pointer-events: none;
  opacity: 0;                 /* hidden by default */
}

/* Only show on the active pill */
body[data-page="kitchen"] #chatbotButtons .assistant-pill.active::after{
  opacity: 1;
}


/* Keep gold separators exactly like Artist row */
body[data-page="kitchen"] .assistant-pill + .assistant-pill{
  position: relative;
  padding-left: 1.25rem;                /* uniform gap so text never “butts up” */
  z-index: 1;                          /* sits above the divider line */
}
body[data-page="kitchen"] .assistant-pill + .assistant-pill::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 1px;
  background: var(--brand-gold, #b08a48);
  pointer-events: none;                /* divider cannot eat clicks */
  z-index: 0;
}


body[data-page="kitchen"] .assistant-pill span{
  white-space: normal;
  word-break: break-word;
}

body[data-page="kitchen"] .assistant-pill i{
  margin-right:.5rem;
}
/* removed duplicate hover (old underline version) */

/* removed duplicate divider block (keep one canonical copy only) */


body[data-page="kitchen"] .assistant-pill:hover,
body[data-page="kitchen"] .assistant-pill:focus{
  text-decoration: none !important;
  box-shadow: none !important;   /* no full-width hover line */
}
/* divider already defined once above — removed later duplicate */


body[data-page="kitchen"] .composer .btn.btn-sm,
body[data-page="kitchen"] #rightColumn .btn.btn-sm{
  display:inline-flex;
  align-items:center;
  padding:.375rem .6rem;
  line-height:1.25;
  min-height:32px;
  border-radius:.6rem;
}

body[data-page="kitchen"] #rightColumn .doc-open-link.btn{ /* anchor-version button */
  display:inline-flex;
  align-items:center;
  vertical-align: middle;    /* keep anchor-button on same line height */
}

/* removed duplicate active block (underline version retained once above) */



/* Guard: if someone puts .align-items-start back on the row, force center */
body[data-page="kitchen"] #chatbotButtons.align-items-start {
  align-items: center !important;
}
/* Gold rule above assistant buttons (kills any grey line) */
body[data-page="kitchen"] #assistantsBar{
  position: relative;
  border-top: 0 !important;
  box-shadow: none !important;
  padding-top: 8px !important;       /* spacing UNDER the gold line */
  max-width: 1320px;                  /* match Artist container cap */
  margin-left: auto;                  /* center the bar block */
  margin-right: auto;
  padding-left: 12px;                 /* container-like gutters */
  padding-right: 12px;
}

/* step gutters up roughly with Bootstrap breakpoints */
@media (min-width: 768px){
  body[data-page="kitchen"] #assistantsBar{ padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 992px){
  body[data-page="kitchen"] #assistantsBar{ padding-left: 24px; padding-right: 24px; }
}

body[data-page="kitchen"] #assistantsBar::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;                           /* align to the bar’s own edges */
  width: 100%;                       /* stops at the container edges */
  height: 0;
  border-top: 1px solid var(--brand-gold, #b08a48);
  pointer-events: none;
}

/* --- Mobile assistants: 2-column grid with real tap targets (Hub + Pages) --- */
@media (max-width: 575.98px){
  /* keep the gold divider + add a touch more breathing room */
  body[data-page="kitchen"] #assistantsBar{
    padding-top: 10px !important;
  }

  /* wide, tappable tiles in a responsive grid */
  body[data-page="kitchen"] #chatbotButtons{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;       /* no horizontal scroll */
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  /* tile sizing + center content */
  body[data-page="kitchen"] #chatbotButtons .assistant-pill{
    min-height: 48px !important;        /* ≥44px tap target */
    padding: 6px 8px !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* label: preserve your 3-line wrap, but use full cell width */
  body[data-page="kitchen"] #chatbotButtons .assistant-pill .assistant-label{
    max-width: 100% !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    overflow: hidden !important;
  }

  /* remove skinny gold dividers on mobile to avoid tiny hit areas */
  body[data-page="kitchen"] #chatbotButtons .assistant-pill + .assistant-pill{
    padding-left: 0 !important;
  }
  body[data-page="kitchen"] #chatbotButtons .assistant-pill + .assistant-pill::before{
    content: none !important;
  }
}