/* branch.js and branchstart.js: starting a shared chat from a private Share chat, the source's
 * link card, and the shared chat's strip and copied-context card. The dialog
 * reuses share.css's `.share-dialog` frame (full screen on a phone). One
 * column everywhere; every control is at least 44px tall on touch. */

.branch-add { gap: var(--sv-space-1); padding: 0 var(--sv-space-2); color: var(--sv-ink-secondary); }
.branch-add[hidden] { display: none; }
.branch-add:hover { color: var(--sv-ink); }

/* the composer's offer, where the mention hint sits in other chats */
.branch-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sv-space-2);
  margin: 0 auto var(--sv-space-2);
  width: min(100%, var(--composer-width, 48rem));
  padding: var(--sv-space-2) var(--sv-space-3);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: var(--sv-radius);
  background: var(--sv-surface-raised);
  color: var(--sv-ink-secondary);
  font-size: var(--ui-meta);
}
.branch-offer[hidden] { display: none; }
.branch-offer-text { flex: 1 1 14rem; min-width: 0; line-height: 1.4; }
.branch-offer-snip {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-1);
  min-height: 36px;
  padding: 0 var(--sv-space-3);
  border-radius: var(--sv-radius);
  background: var(--sv-ink);
  color: var(--sv-surface);
  border: 0;
  font-size: var(--ui-meta);
  font-weight: 500;
  cursor: pointer;
}
.branch-offer-snip .icon { width: 16px; height: 16px; }
.branch-offer button.branch-offer-go { min-height: 36px; padding: 0 var(--sv-space-2); font-size: var(--ui-meta); }
.branch-offer button.branch-offer-close { width: 36px; height: 36px; min-height: 36px; padding: 0; justify-content: center; }

/* the dialog */
.branch-body { gap: var(--sv-space-4); }
.branch-body fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.branch-body legend { padding: 0; margin-bottom: var(--sv-space-1); }
.branch-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sv-space-2); }
.branch-chips[hidden] { display: none; }
.branch-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sv-space-2);
  max-width: 100%;
  min-height: 40px;
  padding: 0 var(--sv-space-1) 0 var(--sv-space-2);
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: 999px;
  font-size: var(--ui-text);
}
.branch-chip-name { font-weight: 500; }
.branch-chip .people-mail { min-width: 0; }
.branch-chip button.branch-chip-remove { width: 32px; height: 32px; min-height: 32px; padding: 0; justify-content: center; border-radius: 50%; }
.branch-find, .branch-name, .branch-note { width: 100%; min-height: 40px; font-size: var(--ui-text); }
.branch-note { resize: vertical; min-height: 4.5rem; line-height: 1.45; }
.branch-matches:empty { display: none; }
button.branch-match { flex: 1; width: 100%; min-height: 48px; justify-content: flex-start; gap: var(--sv-space-3); text-align: left; }
.branch-messages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sv-space-1); max-height: 40vh; overflow-y: auto; border-top: var(--sv-hairline-w) solid var(--sv-hairline); }
.branch-message { display: flex; align-items: flex-start; gap: var(--sv-space-3); padding: var(--sv-space-2) 0; border-bottom: var(--sv-hairline-w) solid var(--sv-hairline); }
.branch-message input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sv-ink); }
.branch-message-label { flex: 1; min-width: 0; display: grid; gap: 2px; cursor: pointer; font-size: var(--ui-text); line-height: 1.4; }
.branch-message-who { font-weight: 500; }
.branch-message-text { color: var(--sv-ink-secondary); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
button.branch-more { justify-self: start; min-height: 36px; }
button.branch-snip { justify-self: start; display: inline-flex; align-items: center; gap: var(--sv-space-1); min-height: 36px; margin-bottom: var(--sv-space-2); }
.branch-snip[hidden] { display: none; }
.branch-more[hidden] { display: none; }
.branch-scope { padding: var(--sv-space-3); border-radius: var(--sv-radius); background: var(--ws-hover); }
.branch-scope-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sv-space-2); font-size: var(--ui-meta); color: var(--sv-ink-secondary); line-height: 1.45; }
.branch-scope-list li { display: flex; gap: var(--sv-space-2); align-items: flex-start; }
.branch-scope-list .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.branch-error[hidden] { display: none; }
.branch-foot {
  /* Create stays in reach while the messages scroll. */
  position: sticky;
  bottom: calc(-1 * var(--sv-space-5));
  justify-content: flex-end;
  margin: 0 calc(-1 * var(--sv-space-5)) calc(-1 * var(--sv-space-5));
  padding: var(--sv-space-3) var(--sv-space-5);
  background: var(--sv-surface-raised);
}
.branch-foot button { min-height: 40px; }
.branch-create:disabled { opacity: 0.5; cursor: not-allowed; }

/* the source's link card */
.branch-link {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  padding: var(--sv-space-2) var(--sv-space-3);
  margin: var(--sv-space-2) 0;
  border: var(--sv-hairline-w) solid var(--sv-hairline);
  border-radius: calc(var(--sv-radius) * 1.5);
  font-size: var(--ui-text);
}
.branch-link-words { flex: 1; min-width: 0; display: grid; }
.branch-link-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.branch-link-meta { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
button.branch-link-open { flex: none; min-height: 36px; }

/* the shared chat's strip, under the header */
.branch-strip {
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  padding: var(--sv-space-2) var(--sv-space-5);
  border-bottom: var(--sv-hairline-w) solid var(--sv-hairline);
  color: var(--sv-ink-secondary);
  font-size: var(--ui-meta);
  line-height: 1.4;
}
.branch-strip[hidden] { display: none; }
.branch-strip > .icon { flex: none; width: 16px; height: 16px; }
.branch-strip-text { flex: 1; min-width: 0; }
.branch-strip-text strong { color: var(--sv-ink); font-weight: 500; }
button.branch-strip-open { flex: none; min-height: 32px; }

/* the copied messages, folded, in the shared chat's first message */
.branch-context { margin-bottom: var(--sv-space-2); border: var(--sv-hairline-w) solid var(--sv-hairline); border-radius: var(--sv-radius); background: var(--sv-surface); text-align: left; }
.branch-context summary { display: flex; align-items: center; gap: var(--sv-space-2); min-height: 36px; padding: var(--sv-space-1) var(--sv-space-3); cursor: pointer; color: var(--sv-ink-secondary); font-size: var(--ui-meta); list-style: none; }
.branch-context summary::-webkit-details-marker { display: none; }
.branch-context summary .icon { flex: none; width: 16px; height: 16px; }
.branch-context-body { display: grid; gap: var(--sv-space-3); padding: var(--sv-space-2) var(--sv-space-3) var(--sv-space-3); max-height: 28rem; overflow-y: auto; }
.branch-context-item { display: grid; gap: var(--sv-space-1); font-size: var(--ui-text); }
.branch-context-text { overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .topbar .branch-add { min-width: 44px; min-height: 44px; justify-content: center; }
  .topbar .branch-add > .label { display: none; }
  .topbar .branch-add .icon { width: 20px; height: 20px; }
  .branch-offer { margin-left: var(--sv-space-3); margin-right: var(--sv-space-3); width: auto; }
  .branch-offer-snip { flex: 1 1 100%; justify-content: center; min-height: 44px; }
  .branch-offer button.branch-offer-go { flex: 1 1 100%; min-height: 44px; }
  button.branch-snip { min-height: 44px; }
  .branch-offer button.branch-offer-close { position: absolute; top: var(--sv-space-1); right: var(--sv-space-1); width: 44px; height: 44px; min-height: 44px; }
  .branch-offer { position: relative; padding-right: 52px; }
  .branch-find, .branch-name, .branch-note { font-size: 16px; min-height: 44px; }
  .branch-chip { min-height: 44px; }
  .branch-chip .people-mail { display: none; }
  .branch-chip button.branch-chip-remove { width: 44px; height: 44px; min-height: 44px; }
  .branch-message input { width: 24px; height: 24px; }
  .branch-messages { max-height: none; }
  .branch-foot { flex-direction: row; align-items: stretch; bottom: calc(-1 * var(--sv-space-4)); margin: 0 calc(-1 * var(--sv-space-4)) calc(-1 * var(--sv-space-4)); padding: var(--sv-space-3) var(--sv-space-4); }
  .branch-foot button { min-height: 48px; }
  .branch-foot .branch-create { flex: 1; }
  .branch-strip { padding: var(--sv-space-2) var(--sv-space-4); flex-wrap: wrap; }
  button.branch-strip-open { min-height: 44px; }
  button.branch-link-open { min-height: 44px; }
}