/* Mike Sutton Jr. Photography — STR Photography Assistant */

:root {
  --pa-accent: var(--accent, #0ca700);
  --pa-black: var(--black, #000000);
  --pa-white: var(--white, #ffffff);
  --pa-line: var(--line, #e2e2e2);
  --pa-panel: var(--panel, #f4f4f4);
  --pa-gray: var(--gray-text, #6b6b6b);

  --pa-display: var(--font-display, 'Archivo', sans-serif);
  --pa-body: var(--font-body, 'Inter', sans-serif);
  --pa-mono: var(--font-mono, 'Space Mono', monospace);

  --pa-desktop-width: 410px;
  --pa-desktop-gap: 36px;

  --pa-collapsed-width: 760px;
  --pa-collapsed-height: 74px;
}


/* ---------------------------------------------------------
   Page spacing
--------------------------------------------------------- */

body.photo-assistant-enabled {
  padding-bottom: calc(
    var(--pa-collapsed-height) +
    26px +
    env(safe-area-inset-bottom)
  );

  transition:
    padding-right .22s ease,
    padding-bottom .22s ease;
}


/* ---------------------------------------------------------
   Root
--------------------------------------------------------- */

.photo-assistant {
  position: fixed;

  z-index: 1000;

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

  color: var(--pa-black);

  pointer-events: none;
}


.photo-assistant *,
.photo-assistant *::before,
.photo-assistant *::after {
  box-sizing: border-box;
}


/* ---------------------------------------------------------
   Unified widget
--------------------------------------------------------- */

.photo-assistant__widget {
  pointer-events: auto;

  position: fixed;

  left: 50%;

  bottom: calc(
    16px +
    env(safe-area-inset-bottom)
  );

  width: min(
    var(--pa-collapsed-width),
    calc(100vw - 32px)
  );

  transform: translateX(-50%);

  display: flex;
  flex-direction: column;

  background: var(--pa-white);

  border: 1px solid var(--pa-line);
  border-top: 3px solid var(--pa-accent);

  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.14);

  overflow: hidden;

  transition:
    width .22s ease,
    height .22s ease,
    max-height .22s ease,
    top .22s ease,
    right .22s ease,
    bottom .22s ease,
    left .22s ease,
    transform .22s ease;
}


/* ---------------------------------------------------------
   Header
   Hidden when collapsed
--------------------------------------------------------- */

.photo-assistant__header {
  display: none;

  align-items: center;
  justify-content: space-between;

  min-height: 54px;

  padding: 0 16px;

  border-bottom: 1px solid var(--pa-line);

  flex: 0 0 auto;
}


.photo-assistant.is-expanded
.photo-assistant__header {
  display: flex;
}


.photo-assistant__title {
  font-family: var(--pa-display);

  font-size: 14px;

  font-weight: 800;

  letter-spacing: .02em;

  text-transform: uppercase;
}


/* ---------------------------------------------------------
   Minimize button
--------------------------------------------------------- */

.photo-assistant__minimize {
  appearance: none;

  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 0;

  background: transparent;

  color: var(--pa-gray);

  font-family: Arial, sans-serif;

  font-size: 25px;

  font-weight: 400;

  line-height: 1;

  cursor: pointer;

  border-radius: 50%;
}


.photo-assistant__minimize:hover,
.photo-assistant__minimize:focus-visible {
  color: var(--pa-black);

  background: var(--pa-panel);
}


/* ---------------------------------------------------------
   Conversation
--------------------------------------------------------- */

.photo-assistant__conversation {
  display: none;

  min-height: 0;

  flex: 1 1 auto;
}


.photo-assistant.is-expanded
.photo-assistant__conversation {
  display: flex;

  flex-direction: column;
}


.photo-assistant__messages {
  flex: 1 1 auto;

  min-height: 0;

  overflow-y: auto;

  overscroll-behavior: contain;

  padding: 20px 18px 24px;

  display: flex;

  flex-direction: column;

  gap: 16px;

  background: var(--pa-white);
}


/* ---------------------------------------------------------
   Messages
--------------------------------------------------------- */

.photo-assistant__message {
  max-width: 88%;

  font-size: 15px;

  line-height: 1.55;

  white-space: pre-wrap;

  overflow-wrap: anywhere;
}


.photo-assistant__message--user {
  align-self: flex-end;

  padding: 11px 13px;

  background: var(--pa-panel);

  border: 1px solid var(--pa-line);

  border-radius: 14px 14px 3px 14px;
}


.photo-assistant__message--assistant {
  align-self: flex-start;
}


.photo-assistant__message--assistant strong {
  font-weight: 700;
}


/* ---------------------------------------------------------
   Action buttons
--------------------------------------------------------- */

.photo-assistant__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 12px;
}


.photo-assistant__action {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 38px;

  padding: 9px 13px;

  border: 1px solid var(--pa-accent);

  border-radius: 999px;

  background: var(--pa-white);

  color: var(--pa-accent);

  font: 700 11px/1.2 var(--pa-mono);

  letter-spacing: .04em;

  text-transform: uppercase;

  text-decoration: none;
}


.photo-assistant__action:hover,
.photo-assistant__action:focus-visible {
  background: var(--pa-accent);

  color: var(--pa-white);
}


/* ---------------------------------------------------------
   Thinking indicator
--------------------------------------------------------- */

.photo-assistant__typing {
  align-self: flex-start;

  display: flex;

  gap: 5px;

  padding: 6px 0;
}


.photo-assistant__typing-dot {
  width: 7px;
  height: 7px;

  background: #999;

  border-radius: 50%;

  animation:
    pa-thinking 1.1s infinite ease-in-out;
}


.photo-assistant__typing-dot:nth-child(2) {
  animation-delay: .14s;
}


.photo-assistant__typing-dot:nth-child(3) {
  animation-delay: .28s;
}


@keyframes pa-thinking {

  0%,
  60%,
  100% {
    opacity: .35;

    transform: translateY(0);
  }

  30% {
    opacity: 1;

    transform: translateY(-3px);
  }
}


/* ---------------------------------------------------------
   Composer
--------------------------------------------------------- */

.photo-assistant__composer {
  flex: 0 0 auto;

  padding: 12px;

  background: var(--pa-white);
}


.photo-assistant.is-expanded
.photo-assistant__composer {
  padding-top: 10px;
}


.photo-assistant__form {
  display: flex;

  width: 100%;

  align-items: stretch;
}


.photo-assistant__input {
  flex: 1 1 auto;

  min-width: 0;

  min-height: 47px;

  padding: 11px 14px;

  border: 1px solid #cfcfcf;

  border-right: 0;

  border-radius: 8px 0 0 8px;

  background: var(--pa-white);

  color: var(--pa-black);

  font: 15px/1.35 var(--pa-body);

  outline: none;
}


.photo-assistant__input::placeholder {
  color: #777;
}


.photo-assistant__input:focus {
  border-color: var(--pa-accent);

  box-shadow:
    inset 0 0 0 1px var(--pa-accent);
}


.photo-assistant__submit {
  appearance: none;

  flex: 0 0 auto;

  min-width: 78px;

  padding: 0 15px;

  border: 1px solid var(--pa-accent);

  border-radius: 0 8px 8px 0;

  background: var(--pa-accent);

  color: var(--pa-white);

  font: 700 12px/1 var(--pa-mono);

  letter-spacing: .05em;

  text-transform: uppercase;

  cursor: pointer;
}


.photo-assistant__submit:hover,
.photo-assistant__submit:focus-visible {
  filter: brightness(.93);
}


.photo-assistant__submit:disabled,
.photo-assistant__input:disabled {
  opacity: .65;

  cursor: wait;
}


/* =========================================================
   DESKTOP
   True split-screen layout
========================================================= */

@media (min-width: 1024px) {

  /*
    When the assistant is expanded, reserve actual space
    on the right side of the page.

    The website therefore reflows into the remaining area
    instead of being covered by the assistant.
  */

  body.photo-assistant-enabled.photo-assistant-expanded {
    padding-right:
      calc(
        var(--pa-desktop-width) +
        var(--pa-desktop-gap)
      );

    padding-bottom: 0;
  }


  /*
    The website header is position: fixed, so body padding
    alone does not resize it.

    Stop the header before the assistant column.
  */

  body.photo-assistant-enabled.photo-assistant-expanded header {
    right:
      calc(
        var(--pa-desktop-width) +
        var(--pa-desktop-gap)
      );
  }


  body.photo-assistant-enabled header {
    transition:
      right .22s ease;
  }


  /*
    Expanded desktop assistant.
  */

  .photo-assistant.is-expanded
  .photo-assistant__widget {
    top: 18px;

    right: 18px;

    bottom: 18px;

    left: auto;

    width: var(--pa-desktop-width);

    height: auto;

    max-height: none;

    transform: none;

    border-radius: 8px;
  }


  .photo-assistant.is-expanded
  .photo-assistant__messages {
    padding:
      22px
      20px
      24px;
  }


  .photo-assistant.is-expanded
  .photo-assistant__composer {
    padding:
      12px
      14px
      14px;
  }
}


/* =========================================================
   TABLET + MOBILE
   Bottom sheet / unified card
========================================================= */

@media (max-width: 1023px) {

  /*
    Never reserve a side column on tablet/mobile.
  */

  body.photo-assistant-enabled,
  body.photo-assistant-enabled.photo-assistant-expanded {
    padding-right: 0;
  }


  body.photo-assistant-enabled header,
  body.photo-assistant-enabled.photo-assistant-expanded header {
    right: 0;
  }


  .photo-assistant__widget {
    width: calc(100vw - 20px);

    bottom:
      calc(
        10px +
        env(safe-area-inset-bottom)
      );
  }


  .photo-assistant.is-expanded
  .photo-assistant__widget {
    max-height:
      min(
        72vh,
        650px
      );

    border-radius: 8px;
  }


  .photo-assistant.is-expanded
  .photo-assistant__conversation {
    min-height: 0;
  }


  .photo-assistant__messages {
    min-height: 150px;
  }


  .photo-assistant__input {
    font-size: 16px;
  }
}


/* ---------------------------------------------------------
   Small phones
--------------------------------------------------------- */

@media (max-width: 520px) {

  :root {
    --pa-collapsed-height: 68px;
  }


  .photo-assistant__widget {
    width: calc(100vw - 12px);

    bottom:
      calc(
        6px +
        env(safe-area-inset-bottom)
      );
  }


  .photo-assistant.is-expanded
  .photo-assistant__widget {
    max-height:
      min(
        78vh,
        650px
      );
  }


  .photo-assistant__header {
    min-height: 48px;

    padding:
      0
      10px
      0
      14px;
  }


  .photo-assistant__title {
    font-size: 13px;
  }


  .photo-assistant__messages {
    padding:
      16px
      13px
      18px;

    gap: 14px;
  }


  .photo-assistant__message {
    max-width: 92%;

    font-size: 14.5px;
  }


  .photo-assistant__composer {
    padding: 8px;
  }


  .photo-assistant__input {
    min-height: 46px;

    padding:
      10px
      11px;
  }


  .photo-assistant__submit {
    min-width: 68px;

    padding:
      0
      10px;
  }
}


/* ---------------------------------------------------------
   Reduced motion
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .photo-assistant__widget {
    transition: none;
  }


  body.photo-assistant-enabled,
  body.photo-assistant-enabled header {
    transition: none;
  }


  .photo-assistant__typing-dot {
    animation: none;
  }
}