/* Kitchens Assistance — scoped to Kitchen page, aligns with dashboard.css tokens */
body[data-page="kitchen"] .assistant-pill.active {
  background-color: var(--brand-gold, #b08a48);
  color: #fff;
  border-color: 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: 220px;
  max-height: 48vh;
  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: 48vh;
  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 --- */
body[data-page="kitchen"] #rightColumn .doc-frame {
  width: 100%;
  min-height: 520px;
  border: 1px solid var(--brand-gold, #b08a48);
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  overflow: hidden;
}
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: 0.5rem;
}

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

@media (max-width: 575.98px) {
  body[data-page="kitchen"] #chatBox { max-height: 38vh; }
  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: 48vh;
  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;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem .5rem;
}

body[data-page="kitchen"] .assistant-pill{
  display:inline-flex;
  align-items:center;
  padding:.375rem .6rem;     /* Bootstrap btn-sm rhythm */
  line-height:1.25;
  min-height:32px;
  border-radius:.6rem;       /* remove “square” outliers uniformly */
  font-weight:600;
  vertical-align: middle;    /* prevent baseline “sitting up” */
}

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 */
}

body[data-page="kitchen"] .assistant-pill.active{
  background-color:var(--brand-gold,#b08a48);
  border-color:var(--brand-gold,#b08a48);
  color:#fff;
}
/* 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;
}