/* Instant Answer UI shell */
.document-ai-entry-wrap {
  gap: clamp(0.5rem, 1.5vw, 0.75rem);
  flex-wrap: wrap;
}

.instant-answer-entry-chip {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.instant-answer-entry-chip:hover,
.instant-answer-entry-chip:focus-visible {
  border-color: #fbbf24;
  box-shadow: 0 clamp(0.35rem, 1.5vw, 0.65rem) clamp(1rem, 3vw, 1.5rem) rgba(245, 158, 11, 0.12);
}

.instant-answer-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1rem);
  width: var(--shopping-composer-width);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 1.5rem) 0 clamp(0.75rem, 2vw, 1rem);
  border: 0.0625rem solid #fde68a;
  border-radius: clamp(1rem, 3vw, 1.5rem);
  background: linear-gradient(180deg, #fffbeb 0%, #fffaf0 58%, #ffffff 100%);
  box-shadow: 0 clamp(0.5rem, 2vw, 1rem) clamp(1.5rem, 5vw, 2.5rem) rgba(245, 158, 11, 0.08);
}

.instant-answer-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1vw, 0.5rem);
}

.instant-answer-composer-shell,
.instant-answer-scroll-pane {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1rem);
  min-block-size: 0;
}

.instant-answer-main-copy,
.instant-answer-sub-copy,
.instant-answer-status,
.instant-answer-result {
  margin: 0;
  color: #475569;
  line-height: 1.65;
  font-size: clamp(0.88rem, 2vw, 1rem);
}

.instant-answer-main-copy {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 600;
}

.instant-answer-examples {
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1.5vw, 0.8rem);
  padding: clamp(0.75rem, 2vw, 1rem);
  border: 0.0625rem solid #fde68a;
  border-radius: clamp(0.85rem, 2vw, 1rem);
  background: #ffffff;
}

.instant-answer-examples[hidden] {
  display: none;
}

.instant-answer-examples-title {
  color: #1e293b;
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 800;
}

.instant-answer-examples-list,
.instant-answer-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.45rem, 1.5vw, 0.7rem);
}

.instant-answer-composer {
  display: flex;
  flex-direction: column;
  gap: var(--shopping-composer-row-gap);
  width: 100%;
  padding: var(--shopping-composer-padding-block) var(--shopping-composer-padding-inline);
  border: 0.0625rem solid #fde68a;
  border-radius: var(--shopping-composer-radius);
  background: #ffffff;
  box-shadow: 0 clamp(0.35rem, 1vw, 0.55rem) clamp(1rem, 3vw, 1.4rem) rgba(245, 158, 11, 0.08);
}

.instant-answer-composer-top,
.instant-answer-composer-bottom,
.instant-answer-composer-left-actions,
.instant-answer-composer-actions {
  display: flex;
  align-items: center;
  width: 100%;
}

.instant-answer-composer-top {
  min-width: 0;
}

.instant-answer-composer-bottom {
  justify-content: space-between;
  gap: var(--shopping-composer-control-gap);
  flex-wrap: nowrap;
}

.instant-answer-composer-left-actions,
.instant-answer-composer-actions {
  gap: var(--shopping-composer-control-gap);
  width: auto;
  min-width: 0;
  flex-wrap: nowrap;
}

.instant-answer-composer-left-actions {
  flex: 1 1 auto;
  justify-content: flex-start;
}

.instant-answer-composer-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.instant-answer-plus-wrap {
  position: relative;
  flex: 0 0 auto;
}

.instant-answer-plus-button,
.instant-answer-help-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: var(--shopping-composer-left-button-size);
  block-size: var(--shopping-composer-left-button-size);
  padding: 0;
  border: 0;
  border-radius: 999rem;
  background: #f1f5f9;
  color: #64748b;
  font-family: inherit;
  font-size: clamp(1.45rem, 4vw, 1.8rem);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.instant-answer-help-button {
  border: 0.0625rem solid #bfdbfe;
  background: #ffffff;
  color: #2563eb;
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  font-weight: 900;
}

.instant-answer-plus-button:hover,
.instant-answer-plus-button:focus-visible,
.instant-answer-plus-button[aria-expanded="true"],
.instant-answer-help-button:hover,
.instant-answer-help-button:focus-visible,
.instant-answer-help-button[aria-expanded="true"] {
  border-color: #60a5fa;
  background: #eff6ff;
  color: #2563eb;
  outline: none;
}

.instant-answer-example-chip,
.instant-answer-search-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.45rem, 1.5vw, 0.6rem) clamp(0.7rem, 2vw, 0.9rem);
  border: 0.0625rem solid #fde68a;
  border-radius: 999rem;
  background: #ffffff;
  color: #92400e;
  font-size: clamp(0.82rem, 2vw, 0.95rem);
  font-weight: 700;
  cursor: pointer;
}

.instant-answer-example-chip:hover,
.instant-answer-example-chip:focus-visible,
.instant-answer-search-chip:hover,
.instant-answer-search-chip:focus-visible {
  border-color: #fbbf24;
  background: #fffbeb;
  outline: none;
}

.instant-answer-question-label {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


.instant-answer-submit {
  flex: 0 0 auto;
  padding: clamp(0.7rem, 2vw, 0.85rem) clamp(1rem, 3vw, 1.35rem);
  border: 0;
  border-radius: 999rem;
  background: #f59e0b;
  color: #ffffff;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.instant-answer-submit:disabled {
  cursor: wait;
  opacity: 0.65;
}

.instant-answer-status.is-loading,
.document-ai-placeholder.is-loading,
.loveme-status.is-loading {
  display: flex;
  align-items: center;
  gap: clamp(0.45rem, 1.5vw, 0.65rem);
  padding: clamp(0.65rem, 1.8vw, 0.85rem) clamp(0.75rem, 2vw, 1rem);
  border: 0.0625rem solid #dbeafe;
  border-radius: clamp(0.85rem, 2vw, 1rem);
  background: #ffffff;
  color: #334155;
}

.instant-answer-status-signal,
.ai-tool-source-loading-signal {
  flex: 0 0 auto;
  inline-size: clamp(0.55rem, 1.6vw, 0.7rem);
  block-size: clamp(0.55rem, 1.6vw, 0.7rem);
  border-radius: 999rem;
  background: #2563eb;
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.24);
  animation: instant-answer-source-pulse 1.6s ease-in-out infinite;
}

@keyframes instant-answer-source-pulse {
  0%,
  100% {
    opacity: 0.55;
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.2);
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 0 clamp(0.2rem, 0.8vw, 0.35rem) rgba(37, 99, 235, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .instant-answer-status-signal,
  .ai-tool-source-loading-signal {
    animation: none;
  }
}

.instant-answer-result {
  padding: clamp(0.9rem, 2vw, 1.1rem);
  border: 0.0625rem solid #e2e8f0;
  border-radius: clamp(0.85rem, 2vw, 1rem);
  background: #ffffff;
  color: #1e293b;
}

.instant-answer-search-chip {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

@media (max-width: 640px) {
  .instant-answer-panel {
    width: 95%;
    padding: clamp(0.9rem, 4vw, 1.15rem) 0 clamp(0.75rem, 3vw, 0.95rem);
  }

  .instant-answer-composer {
    gap: var(--shopping-composer-row-gap);
    padding: var(--shopping-composer-padding-block) var(--shopping-composer-padding-inline);
  }

  .instant-answer-composer-bottom,
  .instant-answer-composer-actions {
    gap: var(--shopping-composer-control-gap);
  }

  .instant-answer-submit {
    flex: 0 0 auto;
    width: auto;
    padding-right: clamp(0.75rem, 3vw, 1rem);
    padding-left: clamp(0.75rem, 3vw, 1rem);
  }

  .instant-answer-panel .ai-tool-mic-button,
  .instant-answer-panel .instant-answer-plus-button,
  .instant-answer-panel .instant-answer-help-button,
  .document-ai-panel .ai-tool-mic-button {
    flex: 0 0 auto;
  }

  .instant-answer-panel.instant-answer-phase-active {
    display: flex;
    flex-direction: column;
    block-size: 100dvh;
    min-block-size: 0;
    overflow: hidden;
  }

  .instant-answer-panel.instant-answer-phase-active .instant-answer-copy {
    display: none;
  }

  .instant-answer-panel.instant-answer-phase-active .instant-answer-composer-shell {
    flex: 0 0 auto;
    background: #fff;
    z-index: 2;
  }

  .instant-answer-panel.instant-answer-phase-active .instant-answer-scroll-pane {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .document-ai-panel.document-ai-phase-active {
    display: flex;
    flex-direction: column;
    block-size: 100dvh;
    min-block-size: 0;
    overflow: hidden;
    padding: clamp(0.65rem, 3vw, 0.9rem) 0;
  }

  .document-ai-panel.document-ai-phase-active .document-ai-copy {
    display: none;
  }

  .document-ai-panel.document-ai-phase-active .document-ai-composer-shell {
    flex: 0 0 auto;
    background: #fff;
    z-index: 2;
    gap: 0;
  }

  .document-ai-panel.document-ai-phase-active .document-ai-composer {
    width: 100%;
    margin: 0;
    padding: clamp(0.45rem, 1.8vw, 0.6rem) clamp(0.65rem, 2.3vw, 0.85rem);
    gap: clamp(0.4rem, 1.5vw, 0.55rem);
  }

  .document-ai-panel.document-ai-phase-active .document-ai-scroll-pane {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 641px) {
  body.ai-tool-mode.document-ai-mode {
    block-size: 100dvh;
    min-block-size: 100dvh;
    overflow: hidden;
  }

  body.ai-tool-mode.document-ai-mode .app-main {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: hidden;
    align-items: stretch;
  }

  body.ai-tool-mode.document-ai-mode .results-view {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-block-size: 0;
    max-inline-size: none;
    overflow: hidden;
  }

  body.ai-tool-mode.document-ai-mode #msgContainer {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-block-size: 0;
    overflow: hidden;
  }

  body.ai-tool-mode.document-ai-mode .document-ai-panel.document-ai-phase-active {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    block-size: auto;
    min-block-size: 0;
    overflow: hidden;
  }

  body.ai-tool-mode.document-ai-mode .document-ai-panel.document-ai-phase-active .document-ai-copy {
    display: none;
  }

  body.ai-tool-mode.document-ai-mode .document-ai-panel.document-ai-phase-active .document-ai-desktop-active-shell {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-block-size: 0;
    overflow: hidden;
  }

  body.ai-tool-mode.document-ai-mode .document-ai-panel.document-ai-phase-active .document-ai-desktop-active-header {
    flex: 0 0 auto;
    background: #fff;
    z-index: 2;
  }

  body.ai-tool-mode.document-ai-mode .document-ai-panel.document-ai-phase-active .document-ai-desktop-results-pane {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-block-size: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

  body.ai-tool-mode.document-ai-mode .document-ai-panel.document-ai-phase-active .document-ai-desktop-results-pane .document-ai-scroll-pane {
    flex: 0 0 auto;
    min-block-size: auto;
  }

  body.ai-tool-mode.instant-answer-mode .app-main {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow: hidden;
    align-items: stretch;
  }

  body.ai-tool-mode.instant-answer-mode .results-view {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-block-size: 0;
    max-inline-size: none;
    overflow: hidden;
  }

  body.ai-tool-mode.instant-answer-mode #msgContainer {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-block-size: 0;
    overflow: hidden;
  }

  body.ai-tool-mode.instant-answer-mode .instant-answer-panel.instant-answer-phase-active {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    block-size: auto;
    min-block-size: 0;
    overflow: hidden;
  }

  body.ai-tool-mode.instant-answer-mode .instant-answer-panel.instant-answer-phase-active .instant-answer-copy {
    display: none;
  }

  body.ai-tool-mode.instant-answer-mode .instant-answer-panel.instant-answer-phase-active .instant-answer-desktop-active-shell {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-block-size: 0;
    overflow: hidden;
  }

  body.ai-tool-mode.instant-answer-mode .instant-answer-panel.instant-answer-phase-active .instant-answer-desktop-active-header {
    flex: 0 0 auto;
    background: #fff;
    z-index: 2;
  }

  body.ai-tool-mode.instant-answer-mode .instant-answer-panel.instant-answer-phase-active .instant-answer-desktop-results-pane {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-block-size: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

  body.ai-tool-mode.instant-answer-mode .instant-answer-panel.instant-answer-phase-active .instant-answer-desktop-results-pane .instant-answer-scroll-pane {
    flex: 0 0 auto;
    min-block-size: auto;
  }
}

/* AI tool mode keeps 해석/즉답 panels separate from the shopping search UI. */
body.ai-tool-mode .landing-view {
  display: none !important;
}

body.ai-tool-mode .shopping-desktop-active-header {
  display: none !important;
}

body.ai-tool-mode .results-view {
  display: block !important;
  padding: clamp(1rem, 4vh, 2.5rem) clamp(0.75rem, 3vw, 1.5rem);
}

body.ai-tool-mode #msgContainer {
  width: 100%;
}


.ai-shared-mobile-mode-nav,
.desktop-left-mode-nav {
  display: none;
}

@media (min-width: 40.0625rem) {
  :root {
    --desktop-home-scale: 1.2;
    --header-height: clamp(4.6rem, 6.9vw, 5.3rem);
  }

  body.ai-tool-mode .document-ai-panel,
  body.ai-tool-mode .instant-answer-panel,
  body.ai-tool-mode .home-meal-panel,
  body.ai-tool-mode .babsim-panel {
    width: min(100%, clamp(20rem, 62vw, 58rem));
    margin-inline: auto;
  }

  body.ai-tool-mode.web-search-mode .web-search-panel,
  body.ai-tool-mode.loveme-mode .loveme-panel,
  body.ai-tool-mode.web-search-mode #msgContainer,
  body.ai-tool-mode.loveme-mode #msgContainer {
    inline-size: 100%;
    max-inline-size: none;
  }

  body.ai-tool-mode .babsim-panel .babsim-copy,
  body.ai-tool-mode .babsim-panel .babsim-location-card,
  body.ai-tool-mode .babsim-panel .babsim-composer-shell,
  body.ai-tool-mode .babsim-panel .babsim-initial-tools,
  body.ai-tool-mode .babsim-panel .babsim-scroll-pane,
  body.ai-tool-mode .babsim-panel .babsim-hero,
  body.ai-tool-mode .babsim-panel .babsim-result,
  body.ai-tool-mode .babsim-panel .babsim-result-card,
  body.ai-tool-mode .babsim-panel .babsim-recommendations-section,
  body.ai-tool-mode .babsim-panel .babsim-recommendations-list,
  body.ai-tool-mode .babsim-panel .babsim-recommend-item {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
  }

  body.ai-tool-mode.babsim-mode .babsim-panel {
    padding-inline: clamp(0rem, 0.8vw, 0.5rem);
  }

  body.ai-tool-mode.babsim-mode .babsim-panel:not(.babsim-phase-active) .babsim-initial-tools {
    margin-block-end: clamp(0.1rem, 0.4vh, 0.25rem);
  }

  :root {
    --desktop-mode-nav-gutter: clamp(0.9rem, 2.4vw, 1.8rem);
    --desktop-mode-nav-rail: clamp(8.7rem, 13.2vw, 11.4rem);
    --desktop-mode-nav-content-gap: clamp(0.48rem, 1.2vw, 1.2rem);
    --desktop-mode-nav-content-edge: max(
      calc(var(--desktop-mode-nav-rail) + var(--desktop-mode-nav-gutter) + var(--desktop-mode-nav-content-gap)),
      calc((100vw - var(--shopping-composer-width)) / 2)
    );
    --desktop-mode-nav-start: max(
      var(--desktop-mode-nav-gutter),
      calc(var(--desktop-mode-nav-content-edge) - var(--desktop-mode-nav-rail) - var(--desktop-mode-nav-content-gap))
    );
  }

  .app-main {
    padding-inline: var(--desktop-mode-nav-content-edge);
  }

  .app-header {
    min-height: var(--header-height);
    padding-inline: 0;
    padding-block: clamp(0.48rem, 1.02vw, 0.74rem);
  }

  .header-content {
    max-width: none;
    width: 100%;
    padding-inline-start: var(--desktop-mode-nav-start);
    padding-inline-end: var(--desktop-mode-nav-content-edge);
    min-height: calc(var(--header-height) - clamp(0.66rem, 1.35vw, 0.96rem));
  }

  .logo-img {
    height: clamp(2.88rem, 6.48vw, 4.32rem);
  }

  .slogan {
    font-size: clamp(0.9rem, 1.44vw, 1.14rem);
  }

  .header-brand-title {
    font-size: clamp(1.14rem, 2.16vw, 1.38rem);
  }

  .header-brand-sub {
    font-size: clamp(0.84rem, 1.44vw, 0.96rem);
    margin-top: clamp(0.18rem, 0.48vw, 0.3rem);
  }

  body:not(.search-mode):not(.ai-tool-mode) .landing-view {
    padding-block-start: clamp(1.2rem, 3.6vh, 2.4rem);
  }

  body.ai-tool-mode .results-view {
    padding-block-start: clamp(1rem, 3vh, 2rem);
  }

  .rounded-headline {
    font-size: clamp(2.62rem, 4.18vw, 3.46rem);
    font-weight: 700;
    line-height: 1.19;
    letter-spacing: -0.01em;
    margin-block: clamp(2.4rem, 6.6vh, 3.9rem) clamp(1.14rem, 2.64vw, 1.44rem);
  }

  body:not(.search-mode):not(.ai-tool-mode) .shopping-home-container .rounded-headline {
    font-size: clamp(1.97rem, 3.14vw, 2.6rem);
    margin-block-start: clamp(0rem, 0.8vh, 0.4rem);
  }

  body:not(.search-mode):not(.ai-tool-mode) .shopping-home-container {
    width: min(100%, clamp(27.6rem, 84vw, 80rem));
    padding: clamp(1.32rem, 4.2vw, 2.15rem) clamp(1.05rem, 3.6vw, 1.86rem) clamp(1.25rem, 3.36vw, 1.68rem);
    border-radius: clamp(1.38rem, 4.14vw, 2.07rem);
  }

  .rounded-headline .point-text {
    font-weight: 800;
  }

  .search-wrap,
  .settings-trigger {
    width: min(96%, clamp(38.64rem, 80vw, 88.32rem));
  }

  .search-box {
    padding: clamp(1.05rem, 2.3vw, 1.44rem) clamp(1.4rem, 3.9vw, 2.66rem);
    border-radius: clamp(1.74rem, 4.2vw, 2.76rem);
  }

  .input-row {
    gap: clamp(1rem, 1.8vw, 1.5rem);
  }

  .msg-input {
    min-height: clamp(3.45rem, 5.8vw, 4.5rem);
    padding: clamp(0.9rem, 1.72vw, 1.2rem) clamp(1.05rem, 2.16vw, 1.44rem);
    font-size: clamp(1.35rem, 1.72vw, 1.56rem);
  }

  .trending-section {
    margin-top: clamp(2.25rem, 4.5vh, 3.25rem);
  }

  .trending-list {
    gap: clamp(0.72rem, 1.44vw, 1.08rem);
    width: min(96%, clamp(38.64rem, 74.5vw, 80rem));
  }

  .trending-list .chip {
    padding: clamp(0.86rem, 1.58vw, 1.12rem) clamp(1.4rem, 2.58vw, 1.82rem) !important;
    border-radius: 50vw !important;
    font-size: clamp(1.32rem, 1.58vw, 1.46rem) !important;
    gap: clamp(0.62rem, 1.15vw, 0.94rem) !important;
  }

  body:not(.search-mode):not(.ai-tool-mode) .shopping-home-container {
    margin-block-start: calc(clamp(1rem, 3vh, 2rem) - clamp(1.05rem, 4.2vh, 3rem));
  }

  body.ai-tool-mode .babsim-panel {
    margin-block-start: calc(clamp(1rem, 3vh, 2rem) - clamp(1.25rem, 5vh, 3.75rem));
  }

  .desktop-left-mode-nav {
    position: fixed;
    inset-block-start: calc(var(--header-height) + clamp(1rem, 3vh, 2rem));
    inset-inline-start: var(--desktop-mode-nav-start);
    z-index: calc(var(--z-header) - 1);
    display: flex;
    flex-direction: column;
    inline-size: var(--desktop-mode-nav-rail);
    max-block-size: calc(100vh - var(--header-height) - clamp(2rem, 6vh, 4rem));
    padding: clamp(0.7rem, 1.4vw, 1rem);
    border: 0.0625rem solid rgba(226, 232, 240, 0.85);
    border-radius: clamp(1rem, 2vw, 1.35rem);
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 8px -1px rgba(15, 23, 42, 0.02);
  }



  .desktop-left-mode-nav .ai-mode-tabs {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(0.35rem, 0.8vw, 0.55rem);
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .desktop-left-mode-nav .ai-mode-tab {
    --mode-nav-border: transparent;
    --mode-nav-bg: transparent;
    --mode-nav-text: #475569;
    --mode-nav-hover-border: #dbeafe;
    --mode-nav-hover-bg: #eff6ff;
    --mode-nav-hover-text: #1d4ed8;
    --mode-nav-active-border: #bfdbfe;
    --mode-nav-active-bg: #eaf3ff;
    --mode-nav-active-text: #1d4ed8;
    --mode-nav-accent: #3b82f6;
    --mode-nav-shadow-rgb: 37, 99, 235;
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: clamp(0.45rem, 0.8vw, 0.6rem);
    width: 100%;
    min-block-size: clamp(2.35rem, 3.5vw, 2.85rem);
    padding: clamp(0.62rem, 1.2vw, 0.78rem) clamp(0.7rem, 1.4vw, 0.95rem);
    border-color: var(--mode-nav-border);
    border-radius: clamp(0.75rem, 1.5vw, 1rem);
    background: var(--mode-nav-bg);
    color: var(--mode-nav-text);
    box-shadow: none;
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    font-weight: 800;
    text-align: left;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
  }

  .desktop-left-mode-nav .ai-mode-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: clamp(1.25rem, 2vw, 1.45rem);
    color: var(--mode-nav-accent);
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    line-height: 1;
    filter: saturate(0.9);
  }

  .desktop-left-mode-nav .ai-mode-tab-label {
    min-inline-size: 0;
  }

  .desktop-left-mode-nav .ai-mode-tab-world-icon {
    inline-size: 0.875rem;
    block-size: 0.875rem;
  }

  .desktop-left-mode-nav .ai-mode-tab[data-ai-mode-tab="shopping"] {
    --mode-nav-hover-border: #bfdbfe;
    --mode-nav-hover-bg: #eff6ff;
    --mode-nav-hover-text: #1e40af;
    --mode-nav-active-border: #93c5fd;
    --mode-nav-active-bg: #eff6ff;
    --mode-nav-active-text: #1d4ed8;
    --mode-nav-accent: #3b82f6;
    --mode-nav-shadow-rgb: 37, 99, 235;
  }

  .desktop-left-mode-nav .ai-mode-tab[data-ai-mode-tab="document-ai"] {
    --mode-nav-hover-border: #bfdbfe;
    --mode-nav-hover-bg: #eff6ff;
    --mode-nav-hover-text: #1d4ed8;
    --mode-nav-active-border: #93c5fd;
    --mode-nav-active-bg: #eaf3ff;
    --mode-nav-active-text: #1d4ed8;
    --mode-nav-accent: #2563eb;
    --mode-nav-shadow-rgb: 37, 99, 235;
  }

  .desktop-left-mode-nav .ai-mode-tab[data-ai-mode-tab="instant-answer"] {
    --mode-nav-hover-border: #fde68a;
    --mode-nav-hover-bg: #fffbeb;
    --mode-nav-hover-text: #92400e;
    --mode-nav-active-border: #fbbf24;
    --mode-nav-active-bg: #fffbeb;
    --mode-nav-active-text: #92400e;
    --mode-nav-accent: #f59e0b;
    --mode-nav-shadow-rgb: 245, 158, 11;
  }

  .desktop-left-mode-nav .ai-mode-tab[data-ai-mode-tab="web-search"] {
    --mode-nav-hover-border: #bae6fd;
    --mode-nav-hover-bg: #f0f9ff;
    --mode-nav-hover-text: #075985;
    --mode-nav-active-border: #7dd3fc;
    --mode-nav-active-bg: #f0f9ff;
    --mode-nav-active-text: #075985;
    --mode-nav-accent: #0ea5e9;
    --mode-nav-shadow-rgb: 14, 165, 233;
  }

  .desktop-left-mode-nav .ai-mode-tab[data-ai-mode-tab="loveme"] {
    --mode-nav-hover-border: #fecdd3;
    --mode-nav-hover-bg: #fff1f2;
    --mode-nav-hover-text: #be123c;
    --mode-nav-active-border: #fda4af;
    --mode-nav-active-bg: #fff1f2;
    --mode-nav-active-text: #be123c;
    --mode-nav-accent: #f43f5e;
    --mode-nav-shadow-rgb: 244, 63, 94;
  }

  .desktop-left-mode-nav .ai-mode-tab[data-ai-mode-tab="home-meal"] {
    --mode-nav-hover-border: #bbf7d0;
    --mode-nav-hover-bg: #f0fdf4;
    --mode-nav-hover-text: #15803d;
    --mode-nav-active-border: #86efac;
    --mode-nav-active-bg: #f0fdf4;
    --mode-nav-active-text: #15803d;
    --mode-nav-accent: #22c55e;
    --mode-nav-shadow-rgb: 34, 197, 94;
  }

  .desktop-left-mode-nav .ai-mode-tab[data-ai-mode-tab="babsim"] {
    --mode-nav-hover-border: #fed7aa;
    --mode-nav-hover-bg: #fff7ed;
    --mode-nav-hover-text: #c2410c;
    --mode-nav-active-border: #fdba74;
    --mode-nav-active-bg: #fff7ed;
    --mode-nav-active-text: #c2410c;
    --mode-nav-accent: #f97316;
    --mode-nav-shadow-rgb: 249, 115, 22;
  }

  .desktop-left-mode-nav .ai-mode-tab:hover,
  .desktop-left-mode-nav .ai-mode-tab:focus-visible {
    border-color: var(--mode-nav-hover-border);
    background: var(--mode-nav-hover-bg);
    color: var(--mode-nav-hover-text);
    transform: translateX(1px);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  }

  .desktop-left-mode-nav .ai-mode-tab[aria-current="page"] {
    border-color: var(--mode-nav-active-border);
    background: linear-gradient(135deg, var(--mode-nav-active-bg) 0%, rgba(255, 255, 255, 0.9) 100%);
    color: var(--mode-nav-active-text);
    box-shadow: inset 3px 0 0 var(--mode-nav-accent), 0 2px 8px rgba(var(--mode-nav-shadow-rgb), 0.06);
  }

  .desktop-left-mode-nav .ai-mode-tab[aria-current="page"]:hover,
  .desktop-left-mode-nav .ai-mode-tab[aria-current="page"]:focus-visible {
    background: linear-gradient(135deg, var(--mode-nav-active-bg) 0%, rgba(255, 255, 255, 0.9) 100%);
    color: var(--mode-nav-active-text);
    transform: translateX(1px);
    box-shadow: inset 3px 0 0 var(--mode-nav-accent), 0 2px 8px rgba(var(--mode-nav-shadow-rgb), 0.06);
  }

  .document-ai-entry-wrap {
    display: none;
  }

  body.ai-tool-mode .document-ai-panel > .ai-mode-tabs,
  body.ai-tool-mode .instant-answer-panel > .ai-mode-tabs,
  body.ai-tool-mode .web-search-panel > .ai-mode-tabs,
  body.ai-tool-mode .loveme-panel > .ai-mode-tabs,
  body.ai-tool-mode .home-meal-panel > .ai-mode-tabs,
  body.ai-tool-mode .babsim-panel > .ai-mode-tabs,
  body.ai-tool-mode .cafe-panel > .ai-mode-tabs {
    display: none;
  }
}

.ai-mode-tabs {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1vw, 0.45rem);
  width: 100%;
  padding: clamp(0.25rem, 1vw, 0.35rem);
  border: 0.0625rem solid #dbeafe;
  border-radius: 999rem;
  background: #ffffff;
  box-shadow: inset 0 0 0 0.0625rem rgba(219, 234, 254, 0.45);
}

.ai-mode-tab-icon {
  display: none;
}

.ai-mode-tab-world-icon {
  flex: 0 0 auto;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  color: currentColor;
  opacity: 0.52;
  stroke: currentColor;
}

.ai-mode-tab[aria-current="page"] .ai-mode-tab-world-icon {
  opacity: 0.72;
}

.ai-mode-tab {
  flex: 1 1 0;
  min-inline-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.16rem, 0.5vw, 0.28rem);
  padding: clamp(0.45rem, 1.5vw, 0.6rem) clamp(0.45rem, 1.8vw, 0.8rem);
  border: 0.0625rem solid transparent;
  border-radius: 999rem;
  background: transparent;
  color: #64748b;
  font-family: inherit;
  font-size: clamp(0.82rem, 2vw, 0.95rem);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.ai-mode-tab:hover,
.ai-mode-tab:focus-visible {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  outline: none;
}

.ai-mode-tab[aria-current="page"] {
  border-color: #60a5fa;
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 clamp(0.25rem, 1vw, 0.45rem) clamp(0.65rem, 2vw, 0.95rem) rgba(37, 99, 235, 0.18);
  cursor: default;
}

.ai-mode-tab[aria-current="page"]:hover,
.ai-mode-tab[aria-current="page"]:focus-visible {
  background: #2563eb;
  color: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
  .desktop-left-mode-nav .ai-mode-tab[data-description] {
    position: relative;
  }

  .desktop-left-mode-nav .ai-mode-tab[data-description]::after {
    content: attr(data-description);
    position: absolute;
    left: calc(100% + 0.75rem);
    top: 50%;
    transform: translate(0, -50%) translateX(-0.25rem);
    z-index: 50;

    width: max-content;
    max-width: 16rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.75rem;
    border: 0.0625rem solid rgba(250, 204, 21, 0.28);
    background: rgba(254, 249, 195, 0.96);
    color: #1e293b;
    box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.1);
    font-size: clamp(0.72rem, 1.2vw, 0.8rem);
    line-height: 1.35;
    white-space: normal;
    text-align: left;
    font-weight: 500;

    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
  }

  .desktop-left-mode-nav .ai-mode-tab[data-description]:hover::after,
  .desktop-left-mode-nav .ai-mode-tab[data-description]:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%) translateX(0);
  }
}


.ai-tool-action-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--shopping-composer-control-gap);
  width: 100%;
  flex-wrap: nowrap;
}

.ai-tool-mic-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--shopping-composer-right-button-size);
  block-size: var(--shopping-composer-right-button-size);
  padding: 0;
  border: max(0.0625rem, 0.06vw) solid #bfdbfe;
  border-radius: 50vw;
  background: #ffffff;
  color: #1d4ed8;
  font-family: inherit;
  font-size: clamp(0.88rem, 2vw, 1rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ai-tool-mic-icon {
  flex: 0 0 auto;
  inline-size: clamp(1.125rem, 3vw, 1.25rem);
  block-size: clamp(1.125rem, 3vw, 1.25rem);
  color: currentColor;
}

.ai-tool-mic-button:hover,
.ai-tool-mic-button:focus-visible {
  border-color: #60a5fa;
  background: #eff6ff;
  box-shadow: 0 0 0 clamp(0.12rem, 0.5vw, 0.2rem) rgba(37, 99, 235, 0.12);
  outline: none;
}

.ai-tool-mic-button.is-listening {
  border-color: #2563eb;
  background: #dbeafe;
  color: #1e40af;
  box-shadow: 0 0 0 clamp(0.14rem, 0.6vw, 0.24rem) rgba(37, 99, 235, 0.16);
  transform: translateY(clamp(-0.08rem, -0.2vw, -0.04rem));
}

.ai-tool-mic-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ai-tool-voice-status {
  margin: calc(clamp(0.75rem, 2vw, 1rem) * -0.45) 0 0;
  color: #1d4ed8;
  font-size: clamp(0.82rem, 2vw, 0.95rem);
  font-weight: 700;
  line-height: 1.55;
}