/* =====================================
   RUNWAY AGENT
====================================== */

.runway-agent {
  position:
  fixed;

  right:
  var(--space-lg);

  bottom:
  var(--space-lg);

  z-index:
  var(--z-modal);
}


/* =====================================
   LAUNCH BUTTON
====================================== */

.runway-agent-launcher {
  display:
  flex;

  align-items:
  center;

  gap:
  var(--space-xs);

  padding:
  var(--space-sm)
  var(--space-lg);

  border:
  0;

  border-radius:
  var(--radius-pill);

  background:
  var(--dark);

  color:
  var(--text-heading-light);

  font-family:
  var(--font-family);

  font-size:
  var(--text-button);

  font-weight:
  var(--weight-medium);

  cursor:
  pointer;

  box-shadow:
  var(--shadow-floating);

  transition:
  var(--transition-button);
}


.runway-agent-launcher:hover {
  transform:
  var(--motion-hover-lift);

  box-shadow:
  var(--shadow-button-hover);
}


.runway-agent-launcher-dot {
  width:
  var(--space-xs);

  height:
  var(--space-xs);

  border-radius:
  var(--radius-pill);

  background:
  var(--gold);
}


/* =====================================
   CHAT WINDOW
====================================== */

.runway-agent-window {
  position:
  absolute;

  right:
  0;

  bottom:
  0;

  width:
  390px;

  height:
  610px;

  display:
  flex;

  flex-direction:
  column;

  overflow:
  hidden;

  background:
  var(--surface-primary);

  border:
  var(--border-dark);

  border-radius:
  var(--radius-md);

  box-shadow:
  var(--shadow-floating);
}


.runway-agent-window[hidden] {
  display:
  none;
}


/* =====================================
   HEADER
====================================== */

.runway-agent-header {
  display:
  flex;

  align-items:
  center;

  justify-content:
  space-between;

  padding:
  var(--space-lg);

  background:
  var(--dark);

  color:
  var(--text-heading-light);
}


.runway-agent-brand {
  margin:
  0;

  color:
  var(--text-heading-light);

  font-size:
  var(--text-caption);

  font-weight:
  var(--weight-bold);

  letter-spacing:
  var(--tracking-medium);
}


.runway-agent-status {
  margin:
  var(--space-2xs)
  0
  0;

  color:
  var(--white-72);

  font-size:
  var(--text-caption);
}


.runway-agent-close {
  padding:
  0;

  border:
  0;

  background:
  transparent;

  color:
  var(--text-heading-light);

  font-family:
  var(--font-family);

  font-size:
  var(--text-2xl);

  font-weight:
  var(--weight-regular);

  line-height:
  1;

  cursor:
  pointer;
}


/* =====================================
   PROGRESS
====================================== */

.runway-agent-progress {
  padding:
  var(--space-sm)
  var(--space-lg);

  background:
  var(--surface-secondary);

  border-bottom:
  var(--border-dark);

  color:
  var(--text-muted);

  font-size:
  var(--text-xs);

  letter-spacing:
  var(--tracking-medium);
}


.runway-agent-progress-track {
  width:
  100%;

  height:
  var(--space-2xs);

  margin-top:
  var(--space-xs);

  overflow:
  hidden;

  background:
  var(--surface-dark);

  border-radius:
  var(--radius-pill);
}


.runway-agent-progress-bar {
  width:
  0%;

  height:
  100%;

  background:
  var(--gold);

  transition:
  width
  var(--transition-normal);
}


/* =====================================
   CONVERSATION
====================================== */

.runway-agent-messages {
  flex:
  1;

  padding:
  var(--space-lg);

  overflow-y:
  auto;

  background:
  var(--light);
}


.runway-agent-message {
  max-width:
  82%;

  margin-bottom:
  var(--space-sm);

  padding:
  var(--space-sm)
  var(--space-md);

  border-radius:
  var(--radius-md);

  font-size:
  var(--text-sm);

  line-height:
  var(--line-normal);
}


.runway-agent-message p {
  margin:
  0
  0
  var(--space-xs);

  font-size:
  inherit;

  line-height:
  inherit;
}


.runway-agent-message p:last-child {
  margin-bottom:
  0;
}


.runway-agent-message--agent {
  background:
  var(--surface-primary);

  color:
  var(--text-primary);

  border:
  var(--border-dark);

  box-shadow:
  var(--shadow-soft);
}


.runway-agent-message--agent p {
  color:
  var(--text-primary);
}


.runway-agent-message--user {
  margin-left:
  auto;

  background:
  var(--dark);

  color:
  var(--text-heading-light);
}


.runway-agent-message--user p {
  color:
  var(--text-heading-light);
}


/* =====================================
   AGENT LINKS
====================================== */

.runway-agent-message a {
  color:
  var(--gold);

  font-weight:
  var(--weight-semibold);

  text-decoration:
  none;
}


.runway-agent-message a:hover {
  opacity:
  var(--opacity-heavy);
}


/* =====================================
   INPUT
====================================== */

.runway-agent-input {
  display:
  flex;

  align-items:
  center;

  gap:
  var(--space-xs);

  padding:
  var(--space-sm);

  background:
  var(--surface-primary);

  border-top:
  var(--border-dark);
}


.runway-agent-input input {
  flex:
  1;

  min-width:
  0;

  padding:
  var(--space-sm);

  border:
  0;

  outline:
  0;

  background:
  transparent;

  color:
  var(--text-primary);

  font-family:
  var(--font-family);

  font-size:
  var(--text-sm);
}


.runway-agent-input input::placeholder {
  color:
  var(--text-muted);
}


.runway-agent-send {
  flex:
  0 0
  var(--space-2xl);

  width:
  var(--space-2xl);

  height:
  var(--space-2xl);

  border:
  0;

  border-radius:
  var(--radius-pill);

  background:
  var(--gold);

  color:
  var(--dark);

  font-family:
  var(--font-family);

  font-size:
  var(--text-lg);

  font-weight:
  var(--weight-semibold);

  cursor:
  pointer;

  transition:
  var(--transition-button);
}


.runway-agent-send:hover {
  transform:
  var(--motion-hover-lift);

  box-shadow:
  var(--shadow-control-hover);
}



/* =====================================
   RESPONSE AREA
====================================== */

.runway-agent-response {
  background:
  var(--surface-primary);

  border-top:
  var(--border-dark);
}


/* =====================================
   CHOICE BUTTONS
====================================== */

.runway-agent-choices {
  display:
  flex;

  flex-wrap:
  wrap;

  gap:
  var(--space-xs);

  padding:
  var(--space-sm);
}


.runway-agent-choices[hidden] {
  display:
  none;
}


.runway-agent-choice {
  padding:
  var(--space-sm)
  var(--space-md);

  border:
  var(--border-dark-strong);

  border-radius:
  var(--radius-pill);

  background:
  var(--surface-primary);

  color:
  var(--text-primary);

  font-family:
  var(--font-family);

  font-size:
  var(--text-sm);

  font-weight:
  var(--weight-medium);

  cursor:
  pointer;

  transition:
  var(--transition-button);
}


.runway-agent-choice:hover {
  transform:
  var(--motion-hover-lift);

  box-shadow:
  var(--shadow-soft);
}


/* =====================================
   DATE INPUT
====================================== */

.runway-agent-date {
  display:
  flex;

  align-items:
  center;

  gap:
  var(--space-xs);

  padding:
  var(--space-sm);

  background:
  var(--surface-primary);
}


.runway-agent-date[hidden] {
  display:
  none;
}


.runway-agent-date input {
  flex:
  1;

  min-width:
  0;

  padding:
  var(--space-sm);

  border:
  var(--border-dark);

  border-radius:
  var(--radius-sm);

  outline:
  0;

  background:
  var(--surface-primary);

  color:
  var(--text-primary);

  font-family:
  var(--font-family);

  font-size:
  var(--text-sm);
}


/* =====================================
   MOBILE
====================================== */

@media (max-width: 600px) {

  .runway-agent {
    right:
    var(--space-sm);

    bottom:
    var(--space-sm);
  }


  .runway-agent-window {
    position:
    fixed;

    top:
    var(--space-sm);

    right:
    var(--space-sm);

    bottom:
    var(--space-sm);

    left:
    var(--space-sm);

    width:
    auto;

    height:
    auto;
  }

}