/* A quiet control rail: the response mode is a real, keyboard-accessible setting. */
.chat-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
#aiView .chat-header-actions .icon-button { width: 40px; height: 40px; border-radius: 12px; }
.chat-fullscreen-button svg { width: 18px; height: 18px; }
.chat-fullscreen-button .chat-contract-icon { display: none; }
.is-chat-fullscreen .chat-fullscreen-button .chat-expand-icon { display: none; }
.is-chat-fullscreen .chat-fullscreen-button .chat-contract-icon { display: block; }
.chat-thinking-control { display: flex; align-items: center; min-width: 0; gap: 10px; }
.chat-thinking-label { color: var(--muted); font-size: 11px; white-space: nowrap; }
.chat-thinking-track {
  --thinking-index: 1;
  position: relative;
  display: grid;
  width: 186px;
  min-height: 36px;
  padding: 3px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--card-line);
  border-radius: 11px;
  background: var(--surface-soft);
  box-shadow: inset 0 1px 2px rgba(27, 36, 31, .035);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.chat-thinking-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 3);
  border: 1px solid rgba(29, 39, 33, .08);
  border-radius: 8px;
  background: var(--surface, #fff);
  box-shadow: 0 1px 3px rgba(27, 36, 31, .09), inset 0 1px 0 rgba(255, 255, 255, .9);
  transform: translateX(calc(var(--thinking-index) * 100%));
  transition: transform 150ms cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.chat-thinking-track button {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 28px;
  padding: 3px 7px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  touch-action: pan-y;
  transition: transform 90ms ease, color 120ms ease;
}
.chat-thinking-track button[aria-checked="true"] { color: var(--ink); font-weight: 600; }
.chat-thinking-track button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-thinking-track button:active:not(:disabled) { transform: translateY(1px) scale(.97); }
.chat-thinking-track[aria-disabled="true"] { opacity: .55; }
.chat-thinking-track[aria-disabled="true"] button { cursor: default; }
.chat-thinking-track.is-dragging .chat-thinking-thumb { transition: none; }
#aiView .chat-header-actions button,
#aiView .chat-send-button,
#aiView .chat-suggestions button {
  transition: transform 100ms ease, background-color 120ms ease, border-color 120ms ease;
}
#aiView .chat-header-actions button:active:not(:disabled),
#aiView .chat-send-button:active:not(:disabled),
#aiView .chat-suggestions button:active:not(:disabled) { transform: translateY(1px) scale(.97); }
#aiView .chat-send-button { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 2px rgba(25,36,31,.1); }
#aiView .analysis-chat { border: 1px solid var(--card-line); background: var(--surface, #fff); }
#aiView .chat-form { background: var(--surface, #fff); }
#aiView .chat-message p {
  border-color: var(--card-line);
  border-radius: 14px;
  background: var(--surface, #fff);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#aiView .chat-message.is-user p { color: var(--ink); border-color: transparent; background: var(--accent-soft); }
#aiView .chat-header, #aiView .chat-form, #aiView .analysis-chat { backdrop-filter: none; -webkit-backdrop-filter: none; }
#aiView .is-thinking .ai-mark { animation: chat-mark-turn 1.8s linear infinite; }
#aiView .is-answering .chat-heading .ai-mark { animation: chat-mark-turn 1.8s linear infinite; }
#aiView .thinking-dot { animation: none; opacity: .5; }
#aiView[hidden] .ai-mark, #aiView .is-page-hidden .ai-mark { animation-play-state: paused !important; }
@keyframes chat-mark-turn { to { transform: rotate(360deg); } }

/* CSS full screen also works in iPhone browsers and installed web apps. */
body.is-ai-view.is-chat-fullscreen .app-shell {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
body.is-ai-view.is-chat-fullscreen .topbar { display: none; }
body.is-ai-view.is-chat-fullscreen main { margin-top: 0; }
body.is-chat-fullscreen #aiView .analysis-chat { border-radius: 18px; }
@media (max-width: 640px) {
  #aiView .chat-header-actions .icon-button { width: 44px; height: 44px; }
  .chat-header-actions { gap: 0; }
  .chat-thinking-control { gap: 8px; }
  .chat-thinking-track { width: 192px; min-height: 44px; }
  .chat-thinking-track button { min-height: 36px; }
  #aiView .chat-input-options { padding-top: 3px; }
  #aiView .chat-heading h2 { font-size: 15px; }
  #aiView .chat-message p { overflow-wrap: anywhere; }
  body.is-ai-view.is-chat-fullscreen .app-shell {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--surface, #fff);
  }
  body.is-chat-fullscreen #aiView .analysis-chat { border: 0; border-radius: 0; }
  body.is-chat-fullscreen #aiView .chat-form { padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #aiView .ai-mark, #aiView .thinking-dot, #aiView .chat-thinking-spinner { animation: none !important; }
  #aiView .chat-thinking-thumb, #aiView button { transition: none !important; }
}