/*
 * The conversation panel (conversations/panels/_panel): the Momntum mark in the
 * status bar opens it above the bar's start. Narrow screens get a full-width
 * sheet; wider ones a card that can expand toward the full window.
 */
@layer components {
  .conversation-panel {
    display: contents;
  }

  .conversation-panel__trigger {
    margin-inline-start: -0.25rem;
    /* Fits inside the status bar below its 1px border. */
    padding: 0.1875rem 0.25rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    transition: background-color 150ms ease-out, transform 150ms ease-out;

    &:hover,
    &[aria-expanded="true"] {
      background: var(--secondary);
    }

    &:active {
      transform: scale(0.97);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 1px;
    }
  }

  .conversation-panel__dialog {
    --panel-gap: 0.5rem;
    --panel-bottom: calc(1.75rem + var(--ruby-native-safe-area-bottom) + var(--panel-gap));

    position: fixed;
    inset-inline: var(--panel-gap);
    inset-block-end: var(--panel-bottom);
    z-index: 50;
    display: flex;
    flex-direction: column;
    block-size: min(36rem, 100dvh - var(--panel-bottom) - var(--panel-gap));
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--popover);
    color: var(--popover-foreground);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    /* The panel sits in the status bar's markup, which keeps its text on one line. */
    white-space: normal;
    box-shadow: 0 12px 32px oklch(0 0 0 / 14%), 0 2px 6px oklch(0 0 0 / 6%);
    transition: inline-size 200ms ease-out, block-size 200ms ease-out;

    &[hidden] {
      display: none;
    }

    /* Turbo reinserts the permanent panel on visits. An entrance transition
       here would replay each time and make an already-open panel flicker. */

    @media (width >= 40rem) {
      inset-inline: 0.75rem auto;
      inline-size: 24rem;

      &[data-expanded] {
        inline-size: min(48rem, 100vw - 1.5rem);
        block-size: calc(100dvh - var(--panel-bottom) - var(--panel-gap));
      }
    }
  }

  .conversation-panel__header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.375rem 0.375rem 1rem;
  }

  .conversation-panel__title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--text-sm--line-height);
  }

  .conversation-panel__actions {
    display: flex;
    gap: 0.125rem;
  }

  /* Expanding needs room the narrow sheet does not have. */
  .conversation-panel__actions .conversation-panel__expand {
    @media (width < 40rem) {
      display: none;
    }
  }

  .conversation-panel__body,
  .conversation-panel__frame {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-block-size: 0;
  }

  .conversation-panel__meta {
    margin: 0;
    padding: 0.25rem 1rem 0;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--muted-foreground);

    a {
      color: inherit;
      text-underline-offset: 0.2em;

      &:hover {
        color: var(--foreground);
      }
    }
  }

  .conversation-panel__intro {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding-block: 2rem;
    color: var(--muted-foreground);
    text-align: center;

    .momntum-mark {
      inline-size: 2.5rem;
      block-size: 2.5rem;
    }

    .momntum-mark * {
      animation: none;
    }
  }

  /* The intro makes way for the first message once it is on its way. */
  .conversation-panel__frame:has(#panel_turns > *) .conversation-panel__intro {
    display: none;
  }

  .conversation-panel__intro-text {
    margin: 0;
    text-wrap: balance;
  }

  /*
   * Compact, the default: what each side said, one line for the agent's
   * steps between messages, the activity line, and any handoff or ending.
   * Details shows the whole transcript, as on the conversation page.
   */
  .conversation-panel__dialog[data-detail="compact"] {
    .turn__children,
    .conversation__status .muted,
    .composer .field:has(select[name="turn[participant]"]) {
      display: none;
    }
  }

  .conversation-panel__placeholder {
    display: grid;
    gap: 0.5rem;
    padding: 1rem;
  }

  .conversation-panel__placeholder-line {
    block-size: 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--muted);
  }

  .conversation-panel__placeholder-line--short {
    inline-size: 60%;
  }

}

@layer components {
  /* A live call: the call button and the Momntum mark in the status bar both
     show the microphone is open, even with the panel closed. */
  .conversation-panel[data-call="connecting"],
  .conversation-panel[data-call="live"] {
    & .conversation-panel__call-button {
      background: var(--destructive);
      color: var(--background);
    }

    & .conversation-panel__trigger {
      box-shadow: 0 0 0 2px var(--destructive);
    }
  }

  .conversation-panel[data-call="connecting"] .conversation-panel__call-button {
    animation: conversation-panel-connecting 1s ease-in-out infinite alternate;
  }

  .conversation-panel[data-call="live"] .conversation-panel__trigger {
    animation: conversation-panel-live 1.6s ease-out infinite;
  }

  .conversation-panel__call-status {
    flex-shrink: 0;
    margin: 0;
    padding: 0 1rem 0.25rem;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);

    &[hidden] {
      display: none;
    }

    .conversation-panel[data-call="error"] & {
      color: var(--destructive);
    }
  }

  @keyframes conversation-panel-connecting {
    to {
      opacity: 0.5;
    }
  }

  @keyframes conversation-panel-live {
    0% {
      box-shadow: 0 0 0 2px var(--destructive), 0 0 0 2px color-mix(in oklab, var(--destructive) 40%, transparent);
    }

    100% {
      box-shadow: 0 0 0 2px var(--destructive), 0 0 0 7px transparent;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .conversation-panel__trigger,
  .conversation-panel__dialog {
    transition: none;
  }

  .conversation-panel[data-call] .conversation-panel__call-button,
  .conversation-panel[data-call] .conversation-panel__trigger {
    animation: none;
  }

  .conversation-panel__trigger:active {
    transform: none;
  }

}