/* The encrypted secret chat room (/messages/:id/secure). Scoped to
   .secret-room so it never touches the rest of the app, and built on the
   app's colour tokens so light, dark and the native shell all follow. */

/* The green lock wherever a secret chat is listed. */
.secret-lock { color: #13854a; }
.dark .secret-lock { color: #4ade80; }

.secret-room {
  --sc-accent: #13854a;
  --sc-tint: color-mix(in srgb, var(--sc-accent) 8%, var(--color-bg));
  --sc-mine: var(--color-fg);
  --sc-mine-text: var(--color-bg);
  --sc-theirs: var(--color-card-soft);
  --sc-theirs-text: var(--color-fg);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 48rem;
  margin: 0 auto;
  background: var(--color-bg);
  color: var(--color-fg);
}

.dark .secret-room { --sc-accent: #4ade80; }

@media (min-width: 48rem) {
  .secret-room { border-inline: 1px solid var(--color-line); }
}

.secret-room svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.sc-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--sc-tint);
  border-bottom: 1px solid color-mix(in srgb, var(--sc-accent) 18%, var(--color-line));
  flex-shrink: 0;
}

/* Inside the app the native back button floats over the page's top left. */
.secret-room--native .sc-header {
  padding-top: calc(env(safe-area-inset-top, 0px) + 0.25rem);
  padding-left: 3.5rem;
  min-height: calc(env(safe-area-inset-top, 0px) + 3.25rem);
}

.sc-back, .sc-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  color: var(--color-fg-3);
  flex-shrink: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.sc-back:hover, .sc-icon-button:hover { background: color-mix(in srgb, var(--color-fg) 6%, transparent); color: var(--color-fg); }
.sc-back svg, .sc-icon-button svg { width: 1.375rem; height: 1.375rem; }

.sc-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sc-accent) 18%, var(--color-bg));
  color: var(--sc-accent);
  font-weight: 600;
  flex-shrink: 0;
}

.sc-title { min-width: 0; flex: 1; }
.sc-title h1 {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.sc-title h1 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-lock { width: 1rem; height: 1rem; color: var(--sc-accent); flex-shrink: 0; stroke-width: 2.2 !important; }
.sc-title p { font-size: 0.75rem; color: var(--sc-accent); line-height: 1.3; }

.sc-translation { flex: none; }

.sc-scroller {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.75rem 0.75rem 1rem;
}

.sc-banner {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  max-width: 26rem;
  margin: 0.25rem auto 1rem;
  padding: 0.75rem 0.875rem;
  border-radius: 1rem;
  background: var(--sc-tint);
  color: var(--color-fg-2);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: left;
}
.sc-banner svg { width: 1.125rem; height: 1.125rem; color: var(--sc-accent); flex-shrink: 0; margin-top: 0.125rem; }
.sc-banner button { margin-top: 0.25rem; color: var(--sc-accent); font-weight: 600; font-size: 0.75rem; background: none; border: 0; padding: 0; cursor: pointer; }

.sc-history { display: flex; justify-content: center; gap: 1rem; }
.sc-history button { min-height: 2.75rem; font-size: 0.75rem; color: var(--color-fg-3); text-decoration: underline; background: none; border: 0; cursor: pointer; }

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

.sc-day { display: flex; justify-content: center; margin: 0.75rem 0 0.25rem; }
.sc-day span, .sc-system span {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--color-card-soft);
  color: var(--color-fg-3);
  font-size: 0.75rem;
}
.sc-system { display: flex; justify-content: center; margin: 0.375rem 0; text-align: center; }
.sc-system span { display: inline-flex; align-items: center; gap: 0.375rem; }
.sc-system .sc-lock { width: 0.75rem; height: 0.75rem; }
.sc-alert[hidden] { display: none; }
.sc-alert span { max-width: min(28rem, 100%); border-radius: 1rem; line-height: 1.5; text-wrap: balance; color: #d23b2f; }
.dark .sc-alert span { color: #ff7a6b; }
.sc-alert span span { display: inline; padding: 0; background: none; }
.sc-alert .sc-alert__icon { flex: none; width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sc-row { display: flex; flex-direction: column; max-width: 100%; }
.sc-row--mine { align-items: flex-end; }
.sc-row--theirs { align-items: flex-start; }

.sc-bubble {
  position: relative;
  max-width: min(80%, 32rem);
  padding: 0.5rem 0.75rem 0.375rem;
  border-radius: 1.125rem;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: text;
  user-select: text;
}
.sc-row--mine .sc-bubble { background: var(--sc-mine); color: var(--sc-mine-text); border-bottom-right-radius: 0.375rem; }
.sc-row--theirs .sc-bubble { background: var(--sc-theirs); color: var(--sc-theirs-text); border-bottom-left-radius: 0.375rem; }
.sc-bubble:focus-visible { box-shadow: 0 0 0 2px var(--sc-accent); }

.sc-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9375rem; line-height: 1.45; }
.sc-text--muted { font-style: italic; opacity: 0.7; }
.sc-translated { font-size: 0.6875rem; opacity: 0.65; margin-top: 0.125rem; }

.sc-file {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.75rem;
  margin: 0.25rem 0;
  padding: 0.375rem 0.5rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: inherit;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.sc-file svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.sc-file__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; }
.sc-file__size { font-size: 0.6875rem; opacity: 0.7; }

.sc-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}
.sc-countdown { display: inline-flex; align-items: center; gap: 0.125rem; }
.sc-icon--small { width: 0.75rem; height: 0.75rem; }

.sc-actions { display: flex; gap: 0.25rem; padding: 0.125rem 0.25rem 0.25rem; }
.sc-actions[hidden] { display: none; }
.sc-link {
  min-height: 2.25rem;
  padding: 0 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-fg-3);
  background: var(--color-card-soft);
  border: 0;
  cursor: pointer;
}
.sc-link--danger, .sc-link[data-armed] { color: #d23b2f; }
.dark .sc-link--danger, .dark .sc-link[data-armed] { color: #ff7a6b; }

.sc-empty { text-align: center; color: var(--color-fg-4); font-size: 0.8125rem; margin-top: 2rem; }

.sc-state[hidden] { display: none; }
.sc-card {
  max-width: 24rem;
  margin: 1.5rem auto 0;
  padding: 1.25rem;
  border-radius: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--sc-accent) 25%, var(--color-line));
  background: var(--color-bg);
  text-align: center;
}
.sc-card__title { font-weight: 600; font-size: 1rem; line-height: 1.4; }
.sc-card__body { margin-top: 0.5rem; color: var(--color-fg-3); font-size: 0.8125rem; line-height: 1.55; }
.sc-card__actions { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; }

.sc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  color: var(--color-fg);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.sc-button--primary { background: var(--sc-accent); border-color: var(--sc-accent); color: #fff; }
.dark .sc-button--primary { color: #04210f; }
.sc-button--danger, .sc-button[data-armed] { color: #d23b2f; border-color: color-mix(in srgb, #d23b2f 40%, var(--color-line)); }
.sc-button:disabled { opacity: 0.5; }

.sc-error { padding: 0 1rem; font-size: 0.75rem; color: #d23b2f; }
.sc-error:empty, .sc-hint:empty { display: none; }
.sc-hint { padding: 0 1rem; font-size: 0.75rem; color: var(--color-fg-3); }

.sc-composer {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
  padding: 0.5rem 0.5rem calc(env(safe-area-inset-bottom, 0px) + 0.5rem);
  border-top: 1px solid var(--color-line);
  background: var(--color-bg);
  flex-shrink: 0;
}
.sc-composer[hidden] { display: none; }
.sc-input { flex: 1; min-width: 0; }
.sc-input p { padding: 0 0.75rem 0.25rem; font-size: 0.75rem; color: var(--color-fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-input p[hidden] { display: none; }
.sc-input textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  max-height: 10rem;
  padding: 0.6875rem 0.875rem;
  border-radius: 1.375rem;
  border: 1px solid var(--color-line);
  background: var(--color-card-soft);
  color: var(--color-fg);
  font-size: 1rem;
  line-height: 1.35;
  resize: none;
}
.sc-input textarea:focus { outline: none; border-color: color-mix(in srgb, var(--sc-accent) 50%, var(--color-line)); }
.sc-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--sc-accent);
  color: #fff;
  border: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.dark .sc-send { color: #04210f; }
.sc-send:disabled { opacity: 0.35; cursor: default; }
.sc-send svg { width: 1.25rem; height: 1.25rem; stroke-width: 2.2; }

.sc-info { position: absolute; inset: 0; z-index: 40; display: flex; justify-content: flex-end; }
.sc-info[hidden] { display: none; }
.sc-info__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.35); }
.sc-info__panel {
  position: relative;
  width: min(100%, 24rem);
  height: 100%;
  overflow-y: auto;
  background: var(--color-bg);
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
  background: var(--color-card-soft);
  box-shadow: -8px 0 32px rgb(0 0 0 / 0.12);
}
.secret-room--native .sc-info__panel { padding-top: env(safe-area-inset-top, 0px); width: 100%; }
.sc-info__head { display: flex; align-items: center; justify-content: space-between; height: 3.5rem; padding: 0 1rem; border-bottom: 1px solid var(--color-line); }
.sc-info details p { font-size: 0.75rem; line-height: 1.5; color: var(--color-fg-3); }
.sc-emojis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.375rem; margin: 0.5rem 0 0.5rem; }
.sc-emojis[hidden] { display: none; }
.sc-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  background: var(--color-card-soft);
  font-size: 1.25rem;
}
.sc-fingerprint { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem !important; word-break: break-word; color: var(--color-fg-2) !important; }
.sc-fingerprint[hidden] { display: none; }
.sc-info select {
  width: 100%;
  min-height: 2.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  color: var(--color-fg);
  padding: 0 0.75rem;
  font-size: 0.9375rem;
}
.sc-info__actions { display: flex; flex-direction: column; gap: 0.5rem; }
.sc-info__actions .sc-button { width: 100%; }

.secret-room--legacy .sc-legacy { padding: 1rem; }

/* On the web the room sits inside the messenger frame and reads like every
   other room there: rows with a face and a name, not a phone's bubbles. The
   app's web view keeps the bubbles above. */
.secret-room--shell { flex: 1; height: auto; min-height: 0; max-width: none; margin: 0; border-inline: 0 !important; }
.secret-room--shell .sc-scroller { padding: 1rem 0.75rem; }
@media (min-width: 40rem) { .secret-room--shell .sc-scroller { padding: 1.25rem 1.5rem; } }
.secret-room--shell .sc-list { gap: 0; }
.secret-room--shell .sc-banner { margin-inline: 0; max-width: 32rem; }
.secret-room--shell .sc-send { width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; }
.secret-room--shell .sc-send svg { width: 1.125rem; height: 1.125rem; }
.secret-room--shell .sc-error, .secret-room--shell .sc-hint { padding-inline: 1.5rem; }

/* The flat rows carry the DM partial's own Tailwind classes (DM_ROW_CLASSES
   in secret_chat_room.mjs); only the bubble's phone styling is undone here. */
.sc-row--flat .sc-meta { margin: 0; justify-content: flex-start; color: var(--color-fg-4); opacity: 1; }
.sc-row--flat .sc-bubble { max-width: 100%; padding: 0; border-radius: 0.375rem; background: none !important; color: var(--color-fg-2) !important; }
.sc-row--flat .sc-text { font-size: 0.875rem; line-height: 1.5rem; }
.sc-row--flat .sc-file { max-width: 22rem; background: var(--color-card-soft); }
.sc-row--flat .sc-actions { padding: 0.25rem 0 0; }

/* Inside the app the room wears the app's own chat colours, so a secret
   chat looks like the app's other rooms: the app's ink bubble for mine, its
   warm received bubble, a plain header and send button. Only the lock stays
   green, as the mark of a secret chat. */
.secret-room--native {
  --sc-mine: #0f0f10;
  --sc-mine-text: #ffffff;
  --sc-theirs: #ffe6d2;
  --sc-theirs-text: #552708;
  --sc-tint: var(--color-card-soft);
}
.dark .secret-room--native { --sc-theirs: #9a431b; --sc-theirs-text: #fff3df; }
.secret-room--native .sc-header { background: var(--color-bg); border-bottom-color: var(--color-line); }
.secret-room--native .sc-avatar { background: var(--color-card-soft); color: var(--color-fg); }
.secret-room--native .sc-title p { color: var(--color-fg-3); }
.secret-room--native .sc-banner button { color: var(--color-fg); }
.secret-room--native .sc-card { border-color: var(--color-line); }
.secret-room--native .sc-button--primary { background: var(--color-fg); border-color: var(--color-fg); color: var(--color-bg); }
.secret-room--native .sc-composer { align-items: center; }
.secret-room--native .sc-input textarea:focus { border-color: var(--color-fg-4); }
.secret-room--native .sc-send { width: 2.625rem; height: 2.625rem; background: #0f0f10; color: #ffffff; }
.secret-room--native .sc-send:disabled { opacity: 1; background: var(--color-line); }
.secret-room--native .sc-banner svg { color: var(--sc-accent); }

/* The web room is a DM on the messenger layout: the plain header and the
   black send button every room has, messages that sit at the bottom, and on a
   wide screen the DM's right-hand panel. Only the lock and the name are green. */
.secret-room--shell .sc-scroller { display: flex; flex-direction: column; }
.secret-room--shell .sc-thread { margin-top: auto; }
.sc-search-hidden { display: none !important; }
.sc-row mark { background: color-mix(in srgb, #facc15 45%, transparent); color: inherit; border-radius: 0.125rem; }

@media (min-width: 80rem) {
  .secret-room--shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--chat-files-width, 260px);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  }
  .secret-room--shell > * { grid-column: 1; min-width: 0; }
  .secret-room--shell.secret-room--translation {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  }
  .secret-room--translation > header { grid-row: 1; }
  .secret-room--translation > .sc-translation { grid-row: 2; }
  .secret-room--translation > .sc-scroller { grid-row: 3; }
  .secret-room--translation > .sc-error { grid-row: 4; }
  .secret-room--translation > .sc-hint { grid-row: 5; }
  .secret-room--translation > form { grid-row: 6; }
  .secret-room--shell > .sc-info {
    display: block;
    position: static;
    grid-column: 2;
    grid-row: 1 / -1;
    min-height: 0;
    overflow-y: auto;
    border-left: 1px solid var(--color-line);
    background: var(--color-card-soft);
  }
  .secret-room--shell .sc-info__backdrop,
  .secret-room--shell .sc-info__head { display: none; }
  .secret-room--shell .sc-info__panel { width: 100%; height: auto; overflow: visible; background: transparent; box-shadow: none; }
}

/* Inside the floating message panel: the room fills the panel, and the
   chat's facts stay on the full page (the panel has no room for a column). */
.secret-room--dock { height: 100%; }
.secret-room--dock > .sc-info { display: none !important; }
@media (min-width: 80rem) {
  .secret-room--dock { display: flex; }
}

/* The shared voice player draws filled play and pause shapes. */
.secret-room [data-role='voice-player'] svg[fill='currentColor'] { fill: currentColor; stroke: none; }

/* The six quick reactions at the head of a line's actions, as a DM's touch
   sheet puts them first. */
.sc-reactions { display: flex; align-items: center; gap: 0.125rem; }