/* ===== BabSim State Controlled Architecture Styles ===== */
.babsim-panel {
  position: relative; /* Positioning context for exclusions panel */
}

/* Hide by default */
.babsim-sub-bar,
.babsim-result-control-bar {
  display: none;
}

/* INITIAL STATE */
.babsim-panel.babsim-state-initial .babsim-initial-tools {
  display: block;
}
.babsim-panel.babsim-state-initial .babsim-sub-bar {
  display: none;
}
.babsim-panel.babsim-state-initial .babsim-result-control-bar {
  display: none;
}

/* SELECTED STATE */
.babsim-panel.babsim-state-selected .babsim-initial-tools {
  display: block;
}
.babsim-panel.babsim-state-selected .babsim-sub-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.5rem, 1.5vw, 0.8rem);
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(254, 215, 170, 0.15);
  border-radius: clamp(0.5rem, 1.5vw, 0.8rem);
  border: 1px solid rgba(254, 215, 170, 0.4);
}
.babsim-panel.babsim-state-selected .babsim-result-control-bar {
  display: none;
}

/* RESULT STATE */
.babsim-panel.babsim-state-result .babsim-initial-tools,
.babsim-panel.babsim-state-result .babsim-sub-bar,
.babsim-panel.babsim-state-result .babsim-location-card {
  display: none !important;
}
.babsim-panel.babsim-state-result .babsim-location-settings-button {
  display: none;
}
.babsim-panel.babsim-state-result .babsim-result-control-bar {
  display: flex;
  margin-bottom: 16px;
  background: #ffffff;
  padding: 8px 12px;
  border-radius: clamp(0.6rem, 1.8vw, 1rem);
  border: 1px solid #fed7aa;
  box-shadow: 0 4px 12px rgba(194, 65, 12, 0.05);
}

/* Sub-Bar elements */
.babsim-exclusion-trigger {
  position: relative;
  display: inline-flex;
}
.babsim-sub-exclusion-btn {
  background: #ffedd5;
  color: #ea580c;
  border: 1px solid #fdba74;
  border-radius: 999rem;
  padding: 6px 14px;
  font-weight: 700;
  font-size: clamp(0.8rem, 2vw, 0.9rem);
  cursor: pointer;
  transition: all 0.2s ease;
}
.babsim-sub-exclusion-btn:hover {
  background: #fed7aa;
}
.babsim-sub-clear-btn {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  border-radius: 999rem;
  padding: 6px 14px;
  font-weight: 700;
  font-size: clamp(0.8rem, 2vw, 0.9rem);
  cursor: pointer;
  transition: all 0.2s ease;
}
.babsim-sub-clear-btn:hover {
  background: #e2e8f0;
}
.babsim-sub-location-label {
  color: #7c2d12;
  font-size: clamp(0.8rem, 2vw, 0.9rem);
  font-weight: 600;
}

/* Result Control Bar layout (Desktop default) */
.babsim-result-control-bar {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.babsim-control-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.babsim-control-btn {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
  border-radius: 999rem;
  padding: 8px 14px;
  font-weight: 700;
  font-size: clamp(0.8rem, 2.1vw, 0.9rem);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.babsim-control-btn:hover {
  background: #ffedd5;
  border-color: #fb923c;
}
.babsim-control-btn-any,
.babsim-control-btn-nearby {
  background: #ea580c;
  color: #ffffff;
  border-color: #ea580c;
}
.babsim-control-btn-any:hover,
.babsim-control-btn-nearby:hover {
  background: #c2410c;
  border-color: #c2410c;
}
.babsim-control-btn-clear {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}
.babsim-control-btn-clear:hover {
  background: #e2e8f0;
}

/* Shared Exclusions Panel Styling */
.babsim-exclusion-panel {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #fed7aa;
  border-radius: clamp(0.6rem, 1.8vw, 1rem);
  padding: 12px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15);
  min-width: 200px;
}
.babsim-exclusion-panel[hidden] {
  display: none !important;
}
.babsim-exclusion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.babsim-exclusion-title {
  font-weight: 800;
  color: #ea580c;
  font-size: 0.9rem;
}
.babsim-exclusion-close-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.1rem;
  cursor: pointer;
}
.babsim-exclusion-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.babsim-exclusion-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  color: #334155;
  font-weight: 600;
}
.babsim-exclusion-item input {
  cursor: pointer;
}

/* Mobile Stacking Rules for Result Control Bar */
@media (max-width: 640px) {
  .babsim-result-control-bar {
    flex-direction: column;
    gap: 8px;
    padding: 8px;
  }
  .babsim-control-group {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 6px;
  }
  .babsim-control-group .babsim-control-btn {
    flex: 1;
    text-align: center;
    padding: 8px 6px;
    font-size: clamp(0.75rem, 3.2vw, 0.85rem);
  }
  .babsim-control-group .babsim-exclusion-trigger {
    flex: 1;
  }
  .babsim-control-group .babsim-exclusion-trigger .babsim-control-btn {
    width: 100%;
  }
  
  /* Compact top filter bar layout on mobile */
  .babsim-exclusion-panel {
    border-radius: 8px;
    border-color: #fed7aa;
    background: #fff7ed;
    padding: 8px 12px;
  }
  .babsim-exclusion-body {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 12px;
  }
  .babsim-exclusion-item {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.web-search-example-chips {
  display: flex;
  flex-direction: column;
  gap: clamp(0.45rem, 1.4vw, 0.65rem);
}

.web-search-example-chips button {
  padding: clamp(0.55rem, 1.6vw, 0.72rem) clamp(0.75rem, 2vw, 0.95rem);
  border: 0.0625rem solid #bae6fd;
  border-radius: 999rem;
  background: #f8fdff;
  color: #075985;
  font-size: clamp(0.82rem, 1.95vw, 0.94rem);
  text-align: left;
}

.web-search-conversation { display:flex; flex-direction:column; gap:clamp(0.75rem,2vw,1rem); }
.web-search-user-message-wrap { display:flex; justify-content:flex-end; }
.web-search-user-message { margin:0; max-width:min(92vw,42rem); padding:clamp(0.65rem,1.8vw,0.85rem) clamp(0.8rem,2.3vw,1rem); border-radius:clamp(0.8rem,2vw,1rem); background:#0ea5e9; color:#fff; }
.web-search-answer-card { display:flex; flex-direction:column; gap:clamp(0.45rem,1.2vw,0.65rem); padding:clamp(0.8rem,2vw,1rem); border:0.0625rem solid #dbeafe; border-radius:clamp(0.8rem,2vw,1rem); background:#fff; }
.web-search-answer-title { margin:0; color:#075985; font-size:clamp(0.92rem,2vw,1rem); font-weight:800; }
.web-search-answer-copy,.web-search-follow-up { margin:0; color:#334155; line-height:1.6; font-size:clamp(0.86rem,2vw,0.98rem); }

.web-search-answer-points {
  margin: 0;
  padding-left: clamp(1rem, 2.4vw, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.3rem, 1vw, 0.45rem);
  color: #334155;
  font-size: clamp(0.84rem, 1.95vw, 0.96rem);
  line-height: 1.6;
}

.web-search-related-section { display:flex; flex-direction:column; gap:clamp(0.45rem,1.2vw,0.65rem); }
.web-search-related-title { margin:0; color:#075985; font-size:clamp(0.98rem,2.2vw,1.08rem); font-weight:800; }

#locationSettingsModal { z-index: calc(var(--z-modal) + 4); }
.location-settings-modal-box { width: min(92vw, 28rem); }
#locationSettingsContent.location-settings-form{
  display:flex;
  flex-direction:column;
  gap:clamp(1rem,4vw,1.125rem);
  padding:clamp(1rem,4vw,1.25rem) clamp(1rem,5vw,1.5rem) clamp(1rem,4vw,1.25rem);
}
.location-settings-field{
  display:flex;
  flex-direction:column;
  gap:clamp(.45rem,1.6vw,.5rem);
  margin:0;
}
.location-settings-title{font-weight:700;font-size:clamp(.92rem,3.3vw,1rem);line-height:1.35}
.location-settings-desc{color:#64748b;font-size:clamp(.82rem,3vw,.9rem);line-height:1.45}
.location-settings-field select{
  width:100%;
  min-height:clamp(2.75rem,12vw,3rem);
  padding:clamp(.65rem,2.6vw,.75rem) clamp(.75rem,3vw,.85rem);
  border:1px solid #cbd5e1;
  border-radius:.75rem;
  background:#fff;
  font-size:clamp(.9rem,3.2vw,.96rem);
}
.location-settings-error{margin:0;color:#b91c1c;font-size:clamp(.8rem,2.8vw,.9rem)}
.location-settings-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.65rem,2.8vw,.75rem);
  margin-top:clamp(.2rem,1vw,.35rem);
  padding:0;
}
.location-settings-close,.location-settings-save{
  min-height:clamp(2.5rem,10vw,2.75rem);
  border:1px solid #cbd5e1;
  background:#fff;
  border-radius:.75rem;
  padding:clamp(.55rem,2.2vw,.65rem) clamp(.75rem,3vw,.9rem);
  font-size:clamp(.88rem,3.2vw,.96rem);
  font-weight:700;
}
.location-settings-save{background:#2563eb;color:#fff;border-color:#2563eb}

.babsim-location-radius-hint{margin:0;color:#475569;font-size:clamp(.78rem,2.6vw,.88rem)}
.babsim-location-settings-button{position:absolute;top:clamp(.7rem,2vw,1rem);right:clamp(.7rem,2vw,1rem);display:inline-flex;align-items:center;justify-content:center;gap:clamp(.2rem,.8vw,.35rem);border:.0625rem solid #fdba74;background:#fff7ed;color:#9a3412;border-radius:clamp(.65rem,1.8vw,.85rem);padding:clamp(.32rem,1.1vw,.46rem) clamp(.45rem,1.5vw,.62rem);font-size:clamp(.8rem,1.9vw,.9rem);font-weight:700;line-height:1.1;cursor:pointer;z-index:2}
.babsim-location-settings-button:hover{border-color:#ea580c;color:#7c2d12;background:#ffedd5}
.cafe-location-settings-button{border-color:color-mix(in srgb,#d3b292 62%,#fdf8f4);background:#fff7ed;color:#7b583f}
.cafe-location-settings-button:hover{border-color:color-mix(in srgb,#b78963 78%,#fdf8f4);background:#f8e5d1;color:#6f4a30}
.cafe-location-radius-hint{text-align:center;color:#7a6251}
.babsim-location-settings-text{display:none}
@media (min-width:641px){.babsim-location-settings-text{display:inline}}

/* 말벗 MVP chat room */
.malbeot-panel {
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 2vw, 1.25rem);
  width: min(100%, 48rem);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 1.5rem) 0;
}

.malbeot-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.35rem, 1vw, 0.5rem);
}

.malbeot-eyebrow {
  border-color: #c7d2fe;
  background: #eef2ff;
  color: #4338ca;
}

.malbeot-title {
  margin: 0;
  color: #111827;
  font-size: clamp(1.7rem, 5vw, 2.35rem);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.malbeot-subtitle {
  margin: 0;
  color: #64748b;
  font-size: clamp(0.95rem, 2.5vw, 1.08rem);
  line-height: 1.5;
}

.malbeot-room-card {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 2vw, 1rem);
  min-height: min(70dvh, 44rem);
  padding: clamp(0.85rem, 2.5vw, 1.1rem);
  border: 0.0625rem solid #e2e8f0;
  border-radius: clamp(1rem, 3vw, 1.35rem);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.08);
}

.malbeot-character-panel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.malbeot-picker-title {
  margin: 0;
  color: #334155;
  font-size: 0.95rem;
  font-weight: 800;
}

.malbeot-character-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.malbeot-character-button {
  display: flex;
  flex: 1 1 8.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border: 0.0625rem solid #dbe4f0;
  border-radius: 0.9rem;
  background: #ffffff;
  color: #334155;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.malbeot-character-button:hover,
.malbeot-character-button:focus-visible,
.malbeot-character-button.is-active {
  border-color: #a5b4fc;
  background: #eef2ff;
  color: #3730a3;
  outline: none;
}

.malbeot-character-name {
  font-weight: 900;
  line-height: 1.2;
}

.malbeot-character-description {
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.35;
}

.malbeot-chat-log {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 18rem;
  max-height: 48dvh;
  overflow-y: auto;
  padding: clamp(0.7rem, 2vw, 0.9rem);
  border: 0.0625rem solid #e2e8f0;
  border-radius: 1rem;
  background: #f8fafc;
  overscroll-behavior: contain;
}

.malbeot-message {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  max-width: min(82%, 34rem);
}

.malbeot-message--left {
  align-self: flex-start;
  align-items: flex-start;
}

.malbeot-message--right {
  align-self: flex-end;
  align-items: flex-end;
}

.malbeot-message-speaker {
  padding: 0 0.35rem;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
}

.malbeot-bubble {
  padding: 0.72rem 0.85rem;
  border-radius: 1rem;
  color: #1e293b;
  font-size: clamp(0.94rem, 2.5vw, 1rem);
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.malbeot-message--left .malbeot-bubble {
  border: 0.0625rem solid #e2e8f0;
  border-top-left-radius: 0.35rem;
  background: #ffffff;
}

.malbeot-message--right .malbeot-bubble {
  border-top-right-radius: 0.35rem;
  background: #4f46e5;
  color: #ffffff;
}


.malbeot-handoff-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.malbeot-handoff-button {
  min-height: 2.2rem;
  padding: 0.5rem 0.8rem;
  border-radius: 999rem;
  font-size: 0.9rem;
}

.malbeot-handoff-button--secondary {
  border: 0.0625rem solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  font-family: inherit;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
}

.malbeot-handoff-button--secondary:hover,
.malbeot-handoff-button--secondary:focus-visible {
  border-color: #94a3b8;
  color: #1e293b;
  outline: none;
}

.malbeot-composer {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2.5vw, 1rem);
  border: 0.0625rem solid rgba(203, 213, 225, 0.8);
  border-radius: 1.25rem;
  background: #ffffff;
}

.malbeot-composer:focus-within {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 1rem 2.5rem rgba(37, 99, 235, 0.08);
}

.malbeot-img-preview {
  margin-bottom: 0.75rem;
}

.malbeot-img-preview .pv-item {
  width: 4.375rem;
  height: 4.375rem;
}

.malbeot-input-row {
  display: flex;
  width: 100%;
  min-width: 0;
}

.malbeot-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  margin-top: 0.5rem;
}

.malbeot-action-left,
.malbeot-action-row-right {
  display: flex;
  align-items: center;
}

.malbeot-action-left {
  flex: 0 0 auto;
}

.malbeot-action-row-right {
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.875rem;
  margin-left: 0.5rem;
}

.malbeot-input-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.malbeot-attach-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border-radius: 999rem;
  border: 0.0625rem solid #cbd5e1;
  background: #ffffff;
  color: #4f46e5;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  visibility: visible;
  opacity: 1;
  cursor: pointer;
}

.malbeot-mic-button {
  color: var(--color-text-light);
  padding: 0.5rem;
  flex: 0 0 auto;
  line-height: 1;
}

.malbeot-mic-button:hover,
.malbeot-mic-button:focus-visible,
.malbeot-mic-button.is-listening {
  color: var(--color-primary);
  outline: none;
}

.malbeot-mic-button.is-listening {
  animation: thisoneMicPulse 1.2s ease-in-out infinite;
}

.malbeot-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 3.2rem;
  resize: vertical;
  padding: 0.85rem 0.95rem;
  border: 0;
  background: transparent;
  color: #111827;
  font: inherit;
  line-height: 1.45;
  outline: none;
}

.malbeot-speech-status,
.malbeot-attachment-status {
  margin: 0.5rem 0 0;
  color: #9f1239;
  font-size: 0.85rem;
  line-height: 1.4;
}

.malbeot-speech-status {
  color: #4f46e5;
  font-weight: 800;
}

.malbeot-bubble-image {
  display: block;
  inline-size: min(12rem, 100%);
  max-block-size: 12rem;
  object-fit: cover;
  border-radius: 1rem;
  margin-bottom: 0.45rem;
}

.malbeot-bubble-image:last-child {
  margin-bottom: 0;
}

.malbeot-bubble-text {
  overflow-wrap: anywhere;
}

.malbeot-send-button,
.malbeot-reset-button {
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border-radius: 999rem;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.malbeot-send-button {
  border: 0;
  background: #4f46e5;
  color: #ffffff;
}

.malbeot-reset-button {
  border: 0.0625rem solid #cbd5e1;
  background: #ffffff;
  color: #475569;
}

@media (max-width: 640px) {
  .malbeot-panel {
    width: 100%;
    padding: 0.75rem 0;
  }

  .malbeot-room-card {
    min-height: calc(100dvh - var(--header-height) - 7rem);
    border-radius: 1rem;
  }

  .malbeot-character-button {
    flex-basis: 8rem;
  }

  .malbeot-chat-log {
    max-height: none;
  }

  .malbeot-message {
    max-width: 90%;
  }

  .malbeot-action-row {
    align-items: stretch;
    gap: 0.5rem;
  }

  .malbeot-action-row-right {
    gap: 0.75rem;
    margin-left: 0.25rem;
  }

  .malbeot-send-button,
  .malbeot-reset-button {
    flex: 0 1 auto;
    padding-inline: 0.85rem;
  }
}