/* Omnipresent Chef Betty chat — noads-next OmnipresentChat parity (phases A & B) */



.noads-omni-chat {

  --noads-site-header-height: 4rem;

  --noads-bottom-nav-height: 4rem;

  position: relative;

  z-index: 1200;

  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);

}



/* --- FAB (compact pill) --- */



.noads-omni-chat__fab {

  position: fixed;

  z-index: 1202;

  right: max(1rem, env(safe-area-inset-right));

  bottom: calc(5rem + env(safe-area-inset-bottom));

  display: block;

  padding: 0;

  border: none;

  background: transparent;

  cursor: pointer;

  transition: opacity 0.2s ease, transform 0.2s ease;

}



@media (min-width: 768px) {

  .noads-omni-chat__fab {

    bottom: calc(1.5rem + env(safe-area-inset-bottom));

    right: max(1.5rem, env(safe-area-inset-right));

  }

}



.noads-omni-chat--panel-open .noads-omni-chat__fab {

  opacity: 0;

  pointer-events: none;

  transform: scale(0.92);

}



.noads-omni-chat__fab-pulse {

  position: absolute;

  inset: 0;

  border-radius: 999px;

  background: var(--primary, #c8562f);

  opacity: 0.22;

  animation: noads-omni-fab-pulse 4s ease-out infinite;

}



.noads-omni-chat__fab-inner {

  position: relative;

  display: flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.75rem 1rem 0.75rem 0.75rem;

  border-radius: 999px;

  background: var(--primary, #c8562f);

  color: var(--primary-foreground, #faf7f2);

  border: 2px solid var(--border, rgba(26, 20, 16, 0.12));

  box-shadow: var(--shadow-vintage-lg, 0 4px 20px rgba(0, 0, 0, 0.18));

  transition: transform 0.15s ease, box-shadow 0.15s ease;

}



@media (min-width: 768px) {

  .noads-omni-chat__fab-inner {

    padding: 1rem 1.25rem 1rem 1rem;

    gap: 0.625rem;

  }

}



.noads-omni-chat__fab:hover .noads-omni-chat__fab-inner {

  transform: scale(1.03);

  box-shadow: var(--shadow-vintage-md, 0 6px 24px rgba(0, 0, 0, 0.22));

}



.noads-omni-chat__fab:active .noads-omni-chat__fab-inner {

  transform: scale(0.97);

}



.noads-omni-chat__fab-hat {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  width: 2rem;

  height: 2rem;

  border-radius: 999px;

  background: color-mix(in srgb, var(--primary-foreground, #faf7f2) 28%, transparent);

  border: 1px solid color-mix(in srgb, var(--primary-foreground, #faf7f2) 35%, transparent);

}



@media (min-width: 768px) {

  .noads-omni-chat__fab-hat {

    width: 2.5rem;

    height: 2.5rem;

  }

}



.noads-omni-chat__hat-svg {

  width: 1.15rem;

  height: 1.15rem;

}



@media (min-width: 768px) {

  .noads-omni-chat__fab-hat .noads-omni-chat__hat-svg {

    width: 1.35rem;

    height: 1.35rem;

  }

}



.noads-omni-chat__fab-text {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  text-align: left;

  min-width: 0;

}



.noads-omni-chat__fab-title {

  font-size: 0.75rem;

  font-weight: 600;

  line-height: 1.2;

}



@media (min-width: 768px) {

  .noads-omni-chat__fab-title {

    font-size: 0.875rem;

  }

}



.noads-omni-chat__fab-sub {

  font-size: 0.625rem;

  opacity: 0.9;

  line-height: 1.2;

}



@media (min-width: 768px) {

  .noads-omni-chat__fab-sub {

    font-size: 0.75rem;

  }

}



.noads-omni-chat__fab-sub--low {

  color: var(--destructive, #c43d4f);

  opacity: 1;

}



@keyframes noads-omni-fab-pulse {

  0%,

  72%,

  100% {

    transform: scale(1);

    opacity: 0.18;

  }

  36% {

    transform: scale(1.12);

    opacity: 0.32;

  }

}



/* --- Backdrop (mobile only) --- */



.noads-omni-chat__backdrop {

  position: fixed;

  inset: 0;

  z-index: 1200;

  border: none;

  padding: 0;

  background: rgba(0, 0, 0, 0.4);

  cursor: default;

}



@media (min-width: 768px) {

  .noads-omni-chat__backdrop {

    display: none !important;

  }

}



.noads-omni-chat__backdrop[hidden] {

  display: none !important;

}



/* --- Slide-out sheet --- */



.noads-omni-chat__panel {

  position: fixed;

  z-index: 1201;

  flex-direction: column;

  background: var(--card, #faf7f2);

  color: var(--foreground, #1a1410);

  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);

  transform: translateX(100%);

  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);

  will-change: transform;

}



.noads-omni-chat__panel:not([hidden]) {

  display: flex;

}



.noads-omni-chat__panel[hidden] {

  display: none !important;

}



.noads-omni-chat--panel-open .noads-omni-chat__panel:not([hidden]) {

  transform: translateX(0);

}



@media (max-width: 767px) {

  .noads-omni-chat__panel {

    top: 0;

    left: 0;

    right: 0;

    bottom: var(--noads-bottom-nav-height, 4rem);

    width: 100%;

    max-height: none;

    border-radius: 0;

    padding-top: env(safe-area-inset-top, 0);

  }



  body.noads-omni-chat--open .noads-bottom-nav {

    z-index: 1;

  }

}



@media (min-width: 768px) {

  .noads-omni-chat__panel {

    top: var(--noads-site-header-height, 4rem);

    right: 0;

    bottom: 0;

    left: auto;

    width: 27.5rem;

    max-width: 100vw;

    border-left: 2px solid var(--border, rgba(26, 20, 16, 0.12));

    border-radius: 0;

  }

}



.noads-omni-chat__panel-inner {

  display: flex;

  flex-direction: column;

  height: 100%;

  min-height: 0;

}



/* --- Header --- */



.noads-omni-chat__header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

  padding: 1rem;

  border-bottom: 2px solid var(--border, rgba(26, 20, 16, 0.12));

  flex-shrink: 0;

  background: var(--card, #faf7f2);

}



.noads-omni-chat__header-brand {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  min-width: 0;

}



.noads-omni-chat__avatar {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  width: 2.5rem;

  height: 2.5rem;

  border-radius: 999px;

  background: var(--primary-10, rgba(200, 86, 47, 0.12));

  color: var(--primary, #c8562f);

}



.noads-omni-chat__avatar .noads-omni-chat__hat-svg {

  width: 1.35rem;

  height: 1.35rem;

}



.noads-omni-chat__header-text {

  min-width: 0;

}



.noads-omni-chat__title {

  display: block;

  font-family: var(--font-display, 'DM Serif Display', serif);

  font-size: 1rem;

  font-weight: 600;

  line-height: 1.2;

}



.noads-omni-chat__subtitle-row {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 0.35rem 0.5rem;

}



.noads-omni-chat__subtitle {

  font-size: 0.75rem;

  color: var(--muted-foreground, #786055);

}



.noads-omni-chat__credits {

  display: inline-flex;

  align-items: center;

  padding: 0.1rem 0.45rem;

  border-radius: 999px;

  border: 1px solid var(--border, rgba(26, 20, 16, 0.12));

  font-size: 0.6875rem;

  font-weight: 500;

  color: var(--muted-foreground, #786055);

  background: var(--background, #eee8de);

}



.noads-omni-chat__credits--low {

  border-color: color-mix(in srgb, var(--destructive, #c43d4f) 60%, transparent);

  color: var(--destructive, #c43d4f);

}



.noads-omni-chat__header-actions {

  display: flex;

  align-items: center;

  gap: 0.25rem;

  flex-shrink: 0;

}



.noads-omni-chat__btn-ghost,

.noads-omni-chat__btn-icon {

  border: none;

  background: transparent;

  color: inherit;

  cursor: pointer;

  font-size: 0.8125rem;

  padding: 0.35rem 0.5rem;

  border-radius: var(--radius-md, 0.125rem);

}



.noads-omni-chat__btn-ghost:hover,

.noads-omni-chat__btn-icon:hover {

  background: var(--muted, #dfd8cc);

}



.noads-omni-chat__btn-icon {

  font-size: 1.5rem;

  line-height: 1;

  width: 2rem;

  height: 2rem;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* --- Messages --- */



.noads-omni-chat__messages-wrap {

  flex: 1;

  min-height: 0;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  position: relative;

}



.noads-omni-chat__load-older {

  text-align: center;

  padding: 0.5rem;

  flex-shrink: 0;

}



.noads-omni-chat__messages {

  flex: 1;

  overflow-y: auto;

  padding: 1rem;

  display: flex;

  flex-direction: column;

  gap: 1rem;

  min-height: 0;

}



.noads-omni-chat__scroll-bottom {

  position: absolute;

  left: 50%;

  bottom: 0.75rem;

  transform: translateX(-50%);

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 2.5rem;

  height: 2.5rem;

  border-radius: 999px;

  border: 2px solid var(--border, rgba(26, 20, 16, 0.12));

  background: var(--card, #faf7f2);

  color: var(--foreground, #1a1410);

  box-shadow: var(--shadow-vintage-sm, 0 2px 8px rgba(0, 0, 0, 0.1));

  cursor: pointer;

}



.noads-omni-chat__scroll-bottom svg {

  width: 1.25rem;

  height: 1.25rem;

}



.noads-omni-chat__scroll-bottom[hidden] {

  display: none !important;

}



.noads-omni-chat__message {

  display: flex;

}



.noads-omni-chat__message--user {

  justify-content: flex-end;

}



.noads-omni-chat__message--assistant {

  justify-content: flex-start;

}



.noads-omni-chat__bubble {

  max-width: 80%;

  padding: 0.75rem;

  border-radius: var(--radius-md, 0.125rem);

  font-size: 0.875rem;

  line-height: 1.5;

}



.noads-omni-chat__bubble--user {

  background: var(--primary, #c8562f);

  color: var(--primary-foreground, #faf7f2);

  white-space: pre-line;

}



.noads-omni-chat__bubble--assistant {

  background: color-mix(in srgb, var(--muted, #dfd8cc) 65%, var(--card, #faf7f2));

  color: var(--foreground, #1a1410);

}



.noads-omni-chat__markdown p {

  margin: 0 0 0.5rem;

}



.noads-omni-chat__markdown p:last-child {

  margin-bottom: 0;

}



.noads-omni-chat__markdown ul,

.noads-omni-chat__markdown ol {

  margin: 0 0 0.5rem;

  padding-left: 1.25rem;

}



.noads-omni-chat__markdown a {

  color: var(--primary, #c8562f);

  text-decoration: underline;

}



.noads-omni-chat__typing {

  display: flex;

  align-items: center;

  gap: 0.35rem;

  min-height: 1.25rem;

  font-size: 0.8125rem;

  color: var(--muted-foreground, #786055);

}



.noads-omni-chat__typing span {

  width: 0.4rem;

  height: 0.4rem;

  border-radius: 50%;

  background: currentColor;

  animation: noads-omni-typing 1.2s infinite ease-in-out;

}



.noads-omni-chat__typing span:nth-child(2) {

  animation-delay: 0.15s;

}



.noads-omni-chat__typing span:nth-child(3) {

  animation-delay: 0.3s;

}



@keyframes noads-omni-typing {

  0%,

  80%,

  100% {

    opacity: 0.35;

    transform: scale(0.85);

  }

  40% {

    opacity: 1;

    transform: scale(1);

  }

}



.noads-omni-chat__progress-trail {

  list-style: none;

  margin: 0 0 0.5rem;

  padding: 0;

  font-size: 0.75rem;

  color: var(--muted-foreground, #786055);

}



.noads-omni-chat__recipe-cards {

  display: flex;

  flex-direction: column;

  gap: 0.5rem;

  margin-top: 0.75rem;

  padding-top: 0.75rem;

  border-top: 1px solid color-mix(in srgb, var(--border, rgba(26, 20, 16, 0.12)) 50%, transparent);

}



.noads-omni-chat__recipe-card {

  display: flex;

  gap: 0.65rem;

  padding: 0.65rem;

  border: 1px solid var(--border, rgba(26, 20, 16, 0.12));

  border-radius: var(--radius-md, 0.125rem);

  background: var(--card, #faf7f2);

  text-decoration: none;

  color: inherit;

  transition: background 0.15s ease;

}



.noads-omni-chat__recipe-card:hover {

  background: var(--muted, #dfd8cc);

}



.noads-omni-chat__recipe-image {

  width: 3rem;

  height: 3rem;

  object-fit: cover;

  border-radius: var(--radius-md, 0.125rem);

  flex-shrink: 0;

}



.noads-omni-chat__recipe-body {

  display: flex;

  flex-direction: column;

  gap: 0.15rem;

  min-width: 0;

}



.noads-omni-chat__recipe-summary {

  font-size: 0.75rem;

  color: var(--muted-foreground, #786055);

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.noads-omni-chat__quick-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.35rem;

  margin-top: 0.5rem;

}



.noads-omni-chat__chip {

  border: 2px solid var(--border, rgba(26, 20, 16, 0.12));

  background: var(--background, #eee8de);

  border-radius: 999px;

  padding: 0.3rem 0.75rem;

  font-size: 0.75rem;

  cursor: pointer;

  transition: border-color 0.15s ease, background 0.15s ease;

}



.noads-omni-chat__chip:hover {

  border-color: var(--primary, #c8562f);

  background: var(--primary-10, rgba(200, 86, 47, 0.12));

}



/* --- Composer --- */



.noads-omni-chat__composer {

  display: flex;

  gap: 0.5rem;

  padding: 1rem;

  border-top: 2px solid var(--border, rgba(26, 20, 16, 0.12));

  flex-shrink: 0;

  padding-bottom: max(1rem, env(safe-area-inset-bottom));

  background: var(--card, #faf7f2);

}



.noads-omni-chat__input {

  flex: 1;

  min-height: 2.75rem;

  max-height: 7.5rem;

  resize: none;

  border: 2px solid var(--border, rgba(26, 20, 16, 0.12));

  border-radius: var(--radius-md, 0.125rem);

  padding: 0.5rem 0.75rem;

  font: inherit;

  font-size: 1rem;

  line-height: 1.4;

  background: var(--background, #eee8de);

  color: inherit;

}



.noads-omni-chat__input:focus {

  outline: 2px solid var(--ring, #c8562f);

  outline-offset: 1px;

  border-color: transparent;

}



.noads-omni-chat__send {

  align-self: flex-end;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  width: 2.75rem;

  height: 2.75rem;

  border: none;

  border-radius: var(--radius-md, 0.125rem);

  padding: 0;

  background: var(--primary, #c8562f);

  color: var(--primary-foreground, #faf7f2);

  cursor: pointer;

  transition: opacity 0.15s ease, transform 0.1s ease;

}



.noads-omni-chat__send svg {

  width: 1.1rem;

  height: 1.1rem;

}



.noads-omni-chat__send:hover:not(:disabled) {

  background: var(--primary-90, rgba(200, 86, 47, 0.92));

}



.noads-omni-chat__send:active:not(:disabled) {

  transform: scale(0.96);

}



.noads-omni-chat__send:disabled {

  opacity: 0.45;

  cursor: not-allowed;

}



.noads-omni-chat__guest {

  padding: 1rem;

  text-align: center;

  font-size: 0.875rem;

  color: var(--muted-foreground, #786055);

}



.noads-omni-chat__error {

  padding: 0.75rem;

  border-radius: var(--radius-md, 0.125rem);

  background: color-mix(in srgb, var(--destructive, #c43d4f) 10%, transparent);

  color: var(--destructive, #c43d4f);

  font-size: 0.875rem;

}



.noads-omni-chat__status {

  font-size: 0.875rem;

  color: var(--muted-foreground, #786055);

}



@media (prefers-reduced-motion: reduce) {

  .noads-omni-chat__fab-pulse {

    animation: none;

    opacity: 0.15;

  }



  .noads-omni-chat__fab-inner,

  .noads-omni-chat__fab,

  .noads-omni-chat__panel,

  .noads-omni-chat__recipe-card,

  .noads-omni-chat__send {

    transition: none;

  }



  .noads-omni-chat__panel {

    transform: none !important;

  }



  .noads-omni-chat__typing span {

    animation: none;

    opacity: 0.6;

  }

}