/*
 * SAP Horizon (sap_horizon) token subset, values from
 * @sap-theming/theming-base-content 11.34 css_variables.css.
 * The panel runs in its own document, so the Portal theme cannot cascade in;
 * this file restates the tokens the panel consumes. The Portal ships light
 * Horizon only, so no dark scheme is defined here either.
 */
:root {
  --sapBackgroundColor: #f5f6f7;
  --sapBaseColor: #fff;
  --sapBrandColor: #0070f2;
  --sapTextColor: #131e29;
  --sapLinkColor: #0064d9;
  --sapContent_LabelColor: #556b82;
  --sapContent_DisabledTextColor: rgba(19, 30, 41, 0.6);
  --sapContent_FocusColor: #0032a5;
  --sapContent_FocusWidth: 0.125rem;
  --sapContent_Shadow0: 0 0 0.125rem 0 rgba(34, 53, 72, 0.2), 0 0.125rem 0.25rem 0 rgba(34, 53, 72, 0.2);
  --sapList_BorderColor: #e5e5e5;
  --sapGroup_ContentBackground: #fff;
  --sapNeutralBackground: #eff1f2;
  --sapInformationBackground: #e1f4ff;
  --sapErrorBackground: #ffeaf4;
  --sapNegativeTextColor: #aa0808;
  --sapPositiveTextColor: #256f3a;
  --sapButton_Background: #fff;
  --sapButton_BorderColor: #bcc3ca;
  --sapButton_BorderCornerRadius: 0.5rem;
  --sapButton_TextColor: #0064d9;
  --sapButton_Hover_Background: #eaecee;
  --sapButton_Emphasized_Background: #0070f2;
  --sapButton_Emphasized_Hover_Background: #0064d9;
  --sapField_Background: #fff;
  --sapField_BorderColor: #556b81;
  --sapField_BorderCornerRadius: 0.25rem;
  --sapField_Hover_BorderColor: #0064d9;
  --sapElement_BorderCornerRadius: 0.75rem;
  --sapPopover_BorderCornerRadius: 0.5rem;
  --sapFontFamily: "72", "72full", Arial, Helvetica, sans-serif;
  --sapFontSize: 0.875rem;
  --sapFontSmallSize: 0.75rem;
  /* Portal terminal drawer stack (terminal-panel.ts). */
  --mono: Menlo, Monaco, "Courier New", monospace;
}

* { box-sizing: border-box; }

/* Sections toggle via the hidden attribute; keep it authoritative over display classes. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--sapTextColor);
  font: var(--sapFontSize)/1.5 var(--sapFontFamily);
  background: var(--sapBackgroundColor);
  display: flex;
  flex-direction: column;
}

h1, h2 { margin: 0; font-weight: 600; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1rem; }
p { margin: 0; }
.muted { color: var(--sapContent_LabelColor); font-weight: 400; }

.visually-hidden,
.message .role {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- top bar ------------------------------------------------------------ */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: var(--sapGroup_ContentBackground);
  border-bottom: 1px solid var(--sapList_BorderColor);
  flex: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.mark {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  color: var(--sapBrandColor);
}

.brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-name {
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
}

.context {
  color: var(--sapContent_LabelColor);
  font-size: var(--sapFontSmallSize);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 1.625rem; /* compact content density */
  padding: 0.25rem 0.75rem;
  font: inherit;
  font-weight: 500;
  border-radius: var(--sapButton_BorderCornerRadius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.button:focus-visible,
.chip:focus-visible,
input:focus-visible {
  outline: var(--sapContent_FocusWidth) solid var(--sapContent_FocusColor);
  outline-offset: 1px;
}

.button.primary {
  color: #fff;
  background: var(--sapButton_Emphasized_Background);
  border-color: var(--sapButton_Emphasized_Background);
}
.button.primary:hover:not(:disabled) {
  background: var(--sapButton_Emphasized_Hover_Background);
  border-color: var(--sapButton_Emphasized_Hover_Background);
}

.button.secondary {
  color: var(--sapButton_TextColor);
  background: var(--sapButton_Background);
  border-color: var(--sapButton_BorderColor);
}
.button.secondary:hover:not(:disabled) { background: var(--sapButton_Hover_Background); }

.button.ghost {
  color: var(--sapButton_TextColor);
  background: transparent;
  font-size: var(--sapFontSize);
}
.button.ghost:hover:not(:disabled) { background: var(--sapButton_Hover_Background); }

.button:disabled { opacity: 0.45; cursor: default; }

/* --- stage & hero screens ----------------------------------------------- */

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 1.5rem;
  text-align: center;
}

.hero p { color: var(--sapContent_LabelColor); max-width: 24rem; }

.hero-mark {
  width: 3rem;
  height: 3rem;
  color: var(--sapBrandColor);
}

.hero .button { min-height: 2rem; padding: 0.35rem 1rem; }

/* --- standalone demo setup ---------------------------------------------- */

.setup {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem;
}

.card {
  width: 100%;
  max-width: 25rem;
  padding: 1rem;
  background: var(--sapGroup_ContentBackground);
  border: 1px solid var(--sapList_BorderColor);
  border-radius: var(--sapElement_BorderCornerRadius);
  box-shadow: var(--sapContent_Shadow0);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.field label {
  font-size: var(--sapFontSmallSize);
  color: var(--sapContent_LabelColor);
}

input {
  font: inherit;
  color: var(--sapTextColor);
  background: var(--sapField_Background);
  border: 1px solid var(--sapField_BorderColor);
  border-radius: var(--sapField_BorderCornerRadius);
  min-height: 1.625rem; /* compact content density */
  padding: 0.25rem 0.5rem;
}

input:hover { border-color: var(--sapField_Hover_BorderColor); }

input::placeholder,
textarea::placeholder { color: var(--sapContent_LabelColor); }

/* --- chat ---------------------------------------------------------------- */

.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.messages {
  flex: 1;
  min-height: 8rem;
  overflow-y: auto;
  padding: 1.25rem 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  scroll-behavior: smooth;
}

.messages:empty {
  align-items: center;
  justify-content: center;
}

.messages:empty::after {
  content: "Ask about the selected workspace.";
  color: var(--sapContent_DisabledTextColor);
}

.message {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.message p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.message.user {
  align-self: flex-end;
  max-width: 85%;
  padding: 0.5rem 0.85rem;
  background: var(--sapInformationBackground);
  border-radius: var(--sapElement_BorderCornerRadius);
  border-bottom-right-radius: var(--sapField_BorderCornerRadius);
}

.message.assistant {
  align-self: stretch;
}

.message pre {
  margin: 0;
  padding: 0.6rem 0.75rem;
  background: var(--sapGroup_ContentBackground);
  border: 1px solid var(--sapList_BorderColor);
  border-radius: var(--sapPopover_BorderCornerRadius);
  overflow-x: auto;
  font: var(--sapFontSmallSize)/1.5 var(--mono);
}

.message code,
.proposal code {
  font-family: var(--mono);
  font-size: 0.85em;
}

.message p code {
  padding: 0.1em 0.3em;
  background: var(--sapNeutralBackground);
  border-radius: 0.3em;
}

.message.pending .dots {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.25rem 0;
}

.message.pending .dots span {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--sapContent_LabelColor);
  animation: pulse 1.2s ease-in-out infinite;
}

.message.pending .dots span:nth-child(2) { animation-delay: 0.15s; }
.message.pending .dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes pulse {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-0.15rem); }
}

@media (prefers-reduced-motion: reduce) {
  .message.pending .dots span { animation: none; }
  .messages { scroll-behavior: auto; }
}

/* --- suggestions --------------------------------------------------------- */

.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
}

.chip {
  font: inherit;
  font-size: var(--sapFontSmallSize);
  color: var(--sapButton_TextColor);
  background: var(--sapButton_Background);
  border: 1px solid var(--sapButton_BorderColor);
  border-radius: 1rem;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.chip:hover { background: var(--sapButton_Hover_Background); }

/* --- action proposals ----------------------------------------------------- */

.proposals {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0 1rem;
}

.proposals:not(:empty) { padding-bottom: 0.6rem; }

.proposal {
  background: var(--sapGroup_ContentBackground);
  border: 1px solid var(--sapList_BorderColor);
  border-radius: var(--sapElement_BorderCornerRadius);
  box-shadow: var(--sapContent_Shadow0);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.proposal .title {
  font-size: var(--sapFontSize);
  font-weight: 600;
}

.proposal pre {
  margin: 0;
  padding: 0.55rem 0.7rem;
  background: var(--sapNeutralBackground);
  border-radius: var(--sapPopover_BorderCornerRadius);
  overflow-x: auto;
  font: var(--sapFontSmallSize)/1.5 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.proposal .digest {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--sapContent_DisabledTextColor);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proposal .actions {
  display: flex;
  gap: 0.5rem;
}

/* --- tool activity -------------------------------------------------------- */

.activity {
  margin: 0 1rem 0.35rem;
}

.activity summary {
  font-size: var(--sapFontSmallSize);
  color: var(--sapContent_LabelColor);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
}

.activity summary:hover { color: var(--sapTextColor); }

.badge {
  min-width: 1.2rem;
  text-align: center;
  padding: 0 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--sapNeutralBackground);
  border-radius: 0.6rem;
}

.activity ol {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.activity li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--sapFontSmallSize);
  color: var(--sapContent_LabelColor);
}

.activity .tool { font-family: var(--mono); overflow-wrap: anywhere; }

.activity .status { color: var(--sapPositiveTextColor); }
.activity .status.failed { color: var(--sapNegativeTextColor); }

.activity .duration {
  margin-left: auto;
  color: var(--sapContent_DisabledTextColor);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- composer ------------------------------------------------------------- */

.composer {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin: 0.4rem 1rem 1rem;
  padding: 0.35rem 0.35rem 0.35rem 1rem;
  background: var(--sapField_Background);
  border: 1px solid var(--sapButton_BorderColor);
  border-radius: 1.4rem;
  transition: border-color 120ms ease;
}

.composer:hover,
.composer:focus-within { border-color: var(--sapField_Hover_BorderColor); }

.composer textarea {
  flex: 1;
  font: inherit;
  color: var(--sapTextColor);
  background: transparent;
  border: 0;
  outline: 0;
  resize: none;
  padding: 0.35rem 0;
  min-height: 1.5rem;
  max-height: 10rem;
  line-height: 1.45;
}

.composer .send {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border-radius: 50%;
}

.composer .send svg {
  width: 1rem;
  height: 1rem;
}

/* --- errors & auth completion ---------------------------------------------- */

.error {
  flex: none;
  margin: 0;
  padding: 0.55rem 1rem;
  font-size: var(--sapFontSize);
  color: var(--sapNegativeTextColor);
  background: var(--sapErrorBackground);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.error:empty { display: none; }

body.complete {
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: var(--sapContent_LabelColor);
}