/* Product polish on top of GAM. Does not change agent/tool flows. */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: .16s var(--ease-out);
  --motion-med: .22s var(--ease-out);
}

/* Home: project chrome and composer share one column */
.home-composer {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 44px;
}
.home-view .home-session-project {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 56px;
  gap: 14px;
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 12px 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.home-view .home-composer .prompt-box {
  width: 100%;
  max-width: none;
  margin-bottom: 0;
}
.home-view .home-session-name {
  font-size: 15px;
  font-weight: 650;
}
.home-view .home-session-actions .button {
  min-height: 32px;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 12px;
}
.home-view .home-session-rename:hover {
  background: var(--surface);
}

.home-view .tool-card {
  transition: border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
}
.home-view .tool-card:hover {
  border-color: var(--line-strong);
  background: #fffaf6;
}
.home-view .tool-card:active {
  transform: scale(.995);
}
.home-view .recent-row {
  transition: background var(--motion-fast);
}
.home-view .recent-row:hover {
  background: #fffaf6;
}

/* Standalone chat: thread and composer share one width */
.chat-view .chat-surface > .chat-messages,
.chat-view .chat-surface > .chat-composer {
  width: min(820px, calc(100% - 40px));
}
.chat-view .chat-surface > .chat-composer {
  border-width: 2px;
  border-radius: 16px;
}

/* Projects / agents columns share 920px */
#view-projects .projects-breadcrumb,
#view-projects .page-top,
#view-projects .filter-row,
#view-projects .projects-table,
#view-agents .agents-hero,
#view-agents .agents-heading,
#view-agents .agents-grid {
  max-width: 920px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.project-row:hover,
.project-row:focus-visible {
  background: #fffaf6;
}
.project-row.current {
  background: #fff5ef;
}

/* Controls */
.button:hover:not(:disabled) {
  transform: translateY(-1px);
}
.button:active:not(:disabled) {
  transform: translateY(0) scale(.98);
}
.board-controls button:hover,
.board-tool:hover {
  transform: none;
}
.send-button {
  transition: background var(--motion-fast), transform var(--motion-fast), box-shadow var(--motion-fast);
}
.send-button:hover {
  transform: translateY(-1px);
}
.send-button:active {
  transform: scale(.96);
}
.icon-button,
.nav-item,
.link-button,
.file-chip,
.project-card,
.agent-card,
.recent-row,
.turn-agent-row,
.board-card {
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}
.project-card:hover,
.agent-card:hover,
.turn-agent-row:hover {
  border-color: var(--line-strong);
}
.search-field,
.text-input,
.password-field input {
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.prompt-box,
.chat-composer {
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.login-card {
  transition: box-shadow var(--motion-med);
}

.empty-state.compact {
  border-radius: 12px;
}

/* Loaders */
.loader {
  width: 22px;
  height: 22px;
  border-width: 2px;
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  animation: polish-spin .7s var(--ease-out) infinite;
}
@keyframes polish-spin {
  to { transform: rotate(360deg); }
}
.thinking i {
  animation: polish-think 1.05s var(--ease-out) infinite;
}
@keyframes polish-think {
  0%, 70%, 100% { transform: translateY(0); opacity: .35; }
  35% { transform: translateY(-4px); opacity: 1; }
}

.toast {
  animation: polish-toast .28s var(--ease-out);
}
@keyframes polish-toast {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* Dialogs: fade + slight rise. Keep board companion un-animated. */
.modal:not(.board-companion),
.focus-modal:not(.board-companion),
.agent-library-dialog,
.agent-launch-dialog {
  opacity: 0;
  transition-property: opacity, overlay, display;
  transition-duration: .22s;
  transition-timing-function: var(--ease-out);
  transition-behavior: allow-discrete;
}
.modal:not(.board-companion)[open],
.focus-modal:not(.board-companion)[open],
.agent-library-dialog[open],
.agent-launch-dialog[open] {
  opacity: 1;
  @starting-style {
    opacity: 0;
  }
}
.modal:not(.board-companion)[open] .modal-card,
.focus-modal:not(.board-companion)[open] .focus-card {
  animation: polish-card-in .28s var(--ease-out);
}
@keyframes polish-card-in {
  from { opacity: .6; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.modal:not(.board-companion)::backdrop,
.focus-modal:not(.board-companion)::backdrop,
.agent-library-dialog::backdrop,
.agent-launch-dialog::backdrop {
  background-color: rgb(39 31 27 / 0);
  transition: background-color .22s var(--ease-out), display .22s allow-discrete, overlay .22s allow-discrete;
}
.modal:not(.board-companion)[open]::backdrop,
.focus-modal:not(.board-companion)[open]::backdrop,
.agent-library-dialog[open]::backdrop,
.agent-launch-dialog[open]::backdrop {
  background-color: rgb(39 31 27 / .42);
  @starting-style {
    background-color: rgb(39 31 27 / 0);
  }
}

/* Popovers that toggle via is-hidden or DOM insert. Keep board chrome unscaled. */
#chatMentionMenu,
#supportPanel,
.board-search-popover {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  transition: opacity var(--motion-med), translate var(--motion-med), visibility var(--motion-med);
  transition-behavior: allow-discrete;
}
@starting-style {
  #chatMentionMenu:not(.is-hidden),
  #supportPanel:not(.is-hidden),
  .board-search-popover {
    opacity: 0;
    translate: 0 8px;
  }
}
#chatMentionMenu.is-hidden,
#supportPanel.is-hidden,
.board-search-popover.is-closing {
  opacity: 0;
  translate: 0 8px;
  visibility: hidden;
  pointer-events: none;
}
#chatMentionMenu.is-hidden {
  display: flex !important;
}
#supportPanel.is-hidden {
  display: grid !important;
}

.file-chip:hover {
  border-color: var(--line-strong);
  background: #fff;
}
.nav-item:active {
  transform: scale(.99);
}

.button:focus-visible,
.send-button:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid rgba(255, 98, 27, .28);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .home-view .home-session-project { padding: 12px; }
}
@media (max-width: 760px) {
  .home-composer { margin-bottom: 32px; }
  .home-view .home-composer .prompt-box { margin-bottom: 0; min-height: 132px; }
  .chat-view .chat-surface > .chat-messages,
  .chat-view .chat-surface > .chat-composer {
    width: calc(100% - 24px);
  }
  .board-search-popover { bottom: 118px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-view .tool-card,
  .button,
  .send-button,
  .icon-button,
  .board-tool,
  .nav-item,
  .project-card,
  .agent-card,
  .recent-row,
  .prompt-box,
  .chat-composer,
  .search-field,
  .loader,
  .thinking i,
  .toast,
  .modal,
  .focus-modal,
  .agent-library-dialog,
  .agent-launch-dialog,
  .modal::backdrop,
  .focus-modal::backdrop,
  .agent-library-dialog::backdrop,
  .agent-launch-dialog::backdrop,
  #chatMentionMenu,
  #supportPanel,
  .board-search-popover {
    animation: none;
    transition: none;
    transform: none;
    translate: none;
  }
  .modal[open] .modal-card,
  .focus-modal:not(.board-companion)[open] .focus-card {
    animation: none;
  }
}