/* 區域探索頁的 AI 導覽問答面板 — 沿用 discover / ai-guide 既有色票與圓角語彙 */

#qg-ag-panel:empty { display: none; }

#qg-ag-panel {
  margin-top: 28px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(31, 41, 55, 0.1);
  background: rgba(255, 250, 241, 0.5);
}

.qg-ag-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.qg-ag-head strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
}

.qg-ag-head strong svg { width: 17px; height: 17px; }

.qg-ag-head small {
  font-size: 0.75rem;
  line-height: 1.6;
  color: #9ca3af;
}

.qg-ag-log {
  display: grid;
  gap: 10px;
  max-height: 360px;
  margin-bottom: 12px;
  padding-right: 4px;
  overflow-y: auto;
}

.qg-ag-empty {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px dashed rgba(31, 41, 55, 0.14);
  font-size: 0.8438rem;
  color: #9ca3af;
}

.qg-ag-turn { max-width: 88%; }
.qg-ag-turn p { margin: 0; line-height: 1.7; }

.qg-ag-q {
  justify-self: end;
  text-align: right;
}

.qg-ag-q p {
  display: inline-block;
  padding: 8px 13px;
  border-radius: 14px 14px 3px 14px;
  background: #1f2937;
  color: #fff;
  font-size: 0.875rem;
}

.qg-ag-q small {
  display: block;
  margin-top: 3px;
  font-size: 0.6875rem;
  color: #9ca3af;
}

.qg-ag-a {
  justify-self: start;
}

.qg-ag-a p {
  padding: 8px 13px;
  border-radius: 14px 14px 14px 3px;
  background: rgba(31, 41, 55, 0.05);
  color: #374151;
  font-size: 0.875rem;
}

.qg-ag-sources {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding: 6px 9px;
  border-radius: 9px;
  background: rgba(31, 41, 55, 0.05);
  font-size: 0.75rem;
  line-height: 1.55;
  color: #4b5563;
}

.qg-ag-sources svg { flex: none; width: 13px; height: 13px; opacity: 0.7; }

.qg-ag-form {
  display: flex;
  gap: 8px;
}

.qg-ag-form input {
  flex: 1;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(31, 41, 55, 0.14);
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  color: #1f2937;
}

.qg-ag-form input:disabled { opacity: 0.6; cursor: progress; }
.qg-ag-form input:focus-visible { outline: 2px solid #1f2937; outline-offset: 1px; }

.qg-ag-form button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 16px;
  border-radius: 12px;
  border: none;
  background: #1f2937;
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 160ms ease;
}

.qg-ag-form button svg { width: 15px; height: 15px; }
.qg-ag-form button:hover { opacity: 0.85; }

.qg-ag-form button[data-action="voice-query"] {
  padding: 0;
  width: 42px;
  flex: none;
  justify-content: center;
  background: rgba(31, 41, 55, 0.08);
  color: #1f2937;
}

/* 麥克風錄音中的脈動提示，跨頁面共用 v3.css 既有的 pulse-record 關鍵影格。 */
[data-action="voice-query"].is-recording {
  color: #d24d16;
  animation: pulse-record 1s infinite;
}

@media (prefers-reduced-motion: no-preference) {
  .qg-ag-turn { animation: qg-ai-in 360ms cubic-bezier(0.22, 0.68, 0.32, 1) both; }
}

@media (max-width: 640px) {
  .qg-ag-turn { max-width: 96%; }
  .qg-ag-form { flex-direction: column; }
  .qg-ag-form button { padding: 11px 16px; justify-content: center; }
}