.f-home {
  background: var(--bg-canvas);
}

.f-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 440px;
  height: 80px;
  padding: 0 24px;
  background: var(--bg-blur);
  backdrop-filter: blur(15px);
}

.f-logo {
  position: relative;
  width: 88px;
  height: 38px;
  overflow: hidden;
}

.f-logo img {
  position: absolute;
  display: block;
  max-width: none;
}

.f-logo__sp {
  top: 19.92%;
  right: 51.15%;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
}

.f-logo__oo {
  top: 19.92%;
  right: 14.6%;
  bottom: 21.83%;
  left: 51.53%;
  width: auto;
  height: auto;
}

.f-logo__l {
  top: 0;
  right: 0;
  bottom: 24.21%;
  left: 88.08%;
  width: auto;
  height: auto;
}

.f-profile {
  display: flex;
  align-items: flex-start;
  width: 48px;
  height: 48px;
  padding: 8px;
  border: none;
  border-radius: 24px;
  background: var(--input-bg);
  cursor: pointer;
}

.f-profile img {
  width: 28.8px;
  height: 28.8px;
  margin: 1.6px;
  object-fit: cover;
  transform: scale(1.7);
}

.f-body {
  position: absolute;
  top: 88px;
  left: 24px;
  width: 392px;
  bottom: 16px;
  overflow: auto;
  padding-bottom: 96px;
  scrollbar-width: none;
}

.f-body::-webkit-scrollbar {
  display: none;
}

.f-kicker {
  margin: 0 0 8px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

.f-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.f-actions.is-search .f-search {
  width: 392px;
}

.f-search,
.f-outline {
  display: flex;
  align-items: center;
  width: 189px;
  height: 64px;
  border-radius: 50px;
  font-family: "Montserrat", sans-serif;
}

.f-search {
  gap: 16px;
  padding: 22px 24px;
  border: none;
  background: var(--bg-surface);
  backdrop-filter: blur(20px);
  color: var(--input-placeholder);
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
}

.f-search img {
  width: 20px;
  height: 20px;
}

.f-search {
  cursor: text;
}

.f-search img {
  flex: none;
}

.f-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--input-text);
  font: inherit;
  outline: none;
}

.f-search input::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

.f-search:focus-within {
  outline: 2px solid var(--input-border-focus);
  outline-offset: -2px;
}

/* While a home search field has focus, it takes the whole row. */
.f-actions:has(.f-search input:focus) .f-search {
  width: 392px;
}

.f-actions:has(.f-search input:focus) .f-outline {
  display: none;
}

.f-outline {
  justify-content: center;
  border: 2px solid var(--button-secondary-text);
  border-radius: 32px;
  background: transparent;
  color: var(--button-secondary-text);
  font-weight: 500;
  font-size: 18px;
  line-height: 20px;
  cursor: pointer;
}

.f-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.f-knot,
.f-tie {
  display: flex;
  align-items: center;
  width: 392px;
  height: 82px;
  padding-left: 12px;
  border-radius: 24px;
  background: var(--knot-card-bg);
  overflow: hidden;
}

.f-knot__main,
.f-tie__main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
  height: 82px;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.f-knot__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 29px;
  background: var(--knot-card-icon-bg);
  overflow: hidden;
  flex-shrink: 0;
}

.f-knot__mark img {
  width: 30px;
  height: 28px;
  object-fit: cover;
  transform: scale(1.7);
}

.f-knot__copy,
.f-tie__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.f-knot__title,
.f-tie__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  line-height: 20px;
  color: var(--knot-card-title);
}

.f-knot__title {
  width: 182px;
  height: 28px;
}

.f-tie__title {
  width: 298px;
}

.f-knot__meta,
.f-tie__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  line-height: 20px;
  color: var(--knot-card-members);
}

.f-tie__meta span:first-child {
  width: 250px;
  overflow: hidden;
  white-space: nowrap;
}

.f-badge {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.f-badge img,
.f-badge span {
  position: absolute;
  inset: 0;
}

.f-badge span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  color: var(--knot-card-title);
}

.f-knot__rail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 82px;
  margin-left: auto;
  background: var(--bg-surface-secondary);
  border-radius: 0 24px 24px 0;
  flex-shrink: 0;
}

.f-knot__rail img {
  width: 92px;
  height: 47.5px;
}

.f-knot__rail button {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
}

.f-knot__rail button:first-of-type {
  left: 0;
}

.f-knot__rail button:last-of-type {
  right: 0;
}

.f-face,
.f-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 29px;
  overflow: hidden;
  background: var(--knot-card-icon-bg);
  flex-shrink: 0;
  color: var(--text-secondary);
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
}

.f-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.f-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
}

.f-grid__cell {
  overflow: hidden;
  background: #fff;
}

.f-grid__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.f-grid__cell--tl { border-radius: 12px 0 0 0; }
.f-grid__cell--tr { border-radius: 0 12px 0 0; }
.f-grid__cell--bl { border-radius: 0 0 0 12px; }
.f-grid__cell--br { border-radius: 0 0 12px 0; }

.f-tabs {
  position: absolute;
  left: 40px;
  top: 860px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 360px;
  height: 80px;
  padding: 15px 0;
  border-radius: 80px;
  background: var(--menu-bg);
  backdrop-filter: blur(15px);
}

.f-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 110px;
  margin-right: -14px;
  padding: 0;
  border: none;
  background: transparent;
  opacity: 0.5;
  cursor: pointer;
}

.f-tab:last-child {
  margin-right: 0;
}

.f-tab.is-active {
  opacity: 1;
}

.f-tab__icon {
  position: relative;
  width: 40px;
  height: 40px;
  overflow: hidden;
}

.f-tab__icon img {
  position: absolute;
  max-width: none;
}

.f-tab__icon--knots img {
  left: -9px;
  top: -8px;
  width: 59px;
  height: 60px;
}

.f-tab__icon--ties img {
  left: -10px;
  top: -11px;
  width: 60px;
  height: 59px;
}

.f-tab__icon--collections img {
  left: -10px;
  top: -10px;
  width: 56px;
  height: 56px;
}

.f-tab__label {
  height: 24px;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 20px;
  color: var(--menu-text);
}

html[data-theme="light"] .f-home {
  background: var(--bg-canvas);
}

html[data-theme="light"] .f-search,
html[data-theme="light"] .pick-search {
  color: #413b55;
}

html[data-theme="light"] .share-kind span {
  color: #38373d;
}

html[data-theme="light"] .share-track {
  background: #cdc8df;
}

html[data-theme="light"] .share-track span {
  background: #362b5a;
}

html[data-theme="light"] .share-line.is-done img,
html[data-theme="light"] .share-tick.is-done img {
  background: transparent;
}

html[data-theme="light"] .share-option.is-picked img {
  box-shadow: inset 0 0 0 6px #499137;
}

.pick .page-header-bar {
  position: relative;
}

.pick-tools {
  padding: 11px 24px 16px;
  background: var(--bg-header);
}

.pick-search {
  width: 392px;
  height: 64px;
  border-radius: 48px;
}

.pick-selected {
  display: flex;
  gap: 24px;
  margin-top: 21px;
  overflow-x: auto;
}

.pick-chip {
  position: relative;
  width: 50px;
  height: 77px;
  flex-shrink: 0;
}

.pick-chip__face,
.pick-row__face {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: #1b152d;
}

.pick-chip__face {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
}

.pick-chip__face img,
.pick-row__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pick-face--initials {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--text-muted);
}

.pick-chip__name {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
}

.pick-chip__x {
  position: absolute;
  top: 30px;
  left: 28px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.pick-chip__x img {
  width: 22px;
  height: 22px;
}

.pick-list {
  flex: 1;
  min-height: 0;
  padding: 16px 24px 110px;
  overflow: auto;
  scrollbar-width: none;
}

.pick-list::-webkit-scrollbar {
  display: none;
}

.pick.screen {
  display: flex;
  flex-direction: column;
}

.pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  margin-bottom: 12px;
}

.pick-kicker {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

.pick-all {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.pick-all img {
  width: 24px;
  height: 24px;
}

.pick-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pick-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 392px;
  height: 59px;
  padding: 0 0 11px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.pick-row__face {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.pick-row__name {
  flex: 1;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  line-height: 20px;
  color: var(--text-secondary);
}

.pick-row__check {
  width: 20px;
  height: 20px;
  margin-right: 4px;
  flex-shrink: 0;
}

.pick-row__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
}

.knot-details .page-header-bar {
  position: relative;
}

.knot-details .page-header__title {
  font-weight: 400;
}

.knot-form {
  flex: 1;
  min-height: 0;
  padding: 9px 24px 40px;
  overflow: auto;
  scrollbar-width: none;
}

.knot-form::-webkit-scrollbar {
  display: none;
}

.add-picture {
  position: relative;
  display: block;
  width: 84px;
  height: 84px;
  margin: 0 auto 16px;
  cursor: pointer;
}

.add-picture input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.add-picture__photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
}

.knot-name {
  display: block;
  width: 390px;
  height: 64px;
  margin: 0;
  padding: 0 24px;
  border: 1px solid var(--input-border);
  border-radius: 16px;
  background: var(--input-bg);
  color: var(--input-text);
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 64px;
}

.knot-name::placeholder {
  color: var(--input-placeholder);
}

.knot-kicker {
  margin: 24px 0 12px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

.knot-kicker--perms {
  margin-bottom: 16px;
}

.knot-members {
  display: flex;
  gap: 24px;
}

.pick-chip__face--mark span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--text-secondary);
}

.perm {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 37px;
  margin: 0 0 24px;
  cursor: pointer;
}

.perm:last-child {
  margin-bottom: 0;
}

.perm > span:first-child {
  flex: 1;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  line-height: 20px;
  color: var(--text-primary);
}

.perm__switch {
  position: relative;
  width: 64px;
  height: 37px;
  flex-shrink: 0;
}

.perm__switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.perm__switch img {
  display: block;
  pointer-events: none;
}

.hours-row {
  display: flex;
  align-items: center;
  height: 56px;
}

.hours-row span {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  line-height: 20px;
  color: var(--text-primary);
  white-space: nowrap;
}

.hours-row span:first-child {
  width: 169px;
  flex-shrink: 0;
}

.hours-row span:last-child {
  flex: 1;
  text-align: right;
}

.hours-row input {
  width: 154px;
  height: 56px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  line-height: 56px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.hours-row input::-webkit-outer-spin-button,
.hours-row input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.screen--chat {
  background: var(--bg-canvas);
}

.chat-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 440px;
  height: 958px;
  object-fit: cover;
  opacity: 0.15;
  pointer-events: none;
}

.chat-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 64px 24px 16px;
  background: var(--bg-header);
}

.chat-head button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.chat-head__hold {
  display: flex;
  flex: none;
  gap: 4px;
  align-items: center;
}

.chat-head__hold img {
  width: 24px;
  height: 24px;
}

.chat-head__main {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 298px;
  min-width: 0;
}

.chat-head__mark {
  width: 40px;
  height: 40px;
  object-fit: cover;
  flex-shrink: 0;
}

.chat-head h1 {
  margin: 0;
  overflow: hidden;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 20px;
  color: var(--knot-card-title);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chat-body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin-bottom: 179px;
  padding: 33px 24px 0;
  overscroll-behavior: contain;
}

.chat-create__label {
  margin: 24px 0 6px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  text-align: left;
}

.chat-types {
  display: flex;
  gap: 12px;
}

.chat-type {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 190px;
  height: 48px;
  padding: 12px 16px;
  border: none;
  border-radius: 32px;
  background: var(--bg-surface);
  color: var(--input-placeholder);
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
}

.chat-type.is-on {
  background: var(--bg-surface-secondary);
}

.chat-type img,
.chat-bubble img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.chat-bubble img {
  width: 32px;
  height: 32px;
}

.chat-type__notice {
  margin: 8px 0 0;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-muted);
}

.chat-create__label:first-child {
  margin-top: 0;
}

.chat-bubble {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 392px;
  height: 64px;
  margin: 0;
  padding: 0 16px 0 24px;
  border: none;
  border-radius: 43px;
  background: var(--bg-surface-secondary);
  color: var(--input-placeholder);
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.chat-bubble + .chat-bubble {
  margin-top: 8px;
}

.chat-bubble.is-selected {
  color: var(--button-primary-bg);
}

.chat-delete {
  display: block;
  width: auto;
  margin: 32px 0 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--input-text);
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 20px;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.chat-head--rename {
  gap: 24px;
  justify-content: flex-start;
}

.chat-rename {
  width: 296px;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--input-border-focus);
  border-radius: 12px;
  background: var(--bg-surface);
  color: var(--input-text);
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
}

.chat-head__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}

.chat-head__actions button,
.chat-head__actions img {
  width: 24px;
  height: 24px;
}

.chat-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 168px;
}

.chat-dock--locked {
  opacity: 0.5;
  pointer-events: none;
}

.chat-dock--locked button,
.chat-dock--locked input {
  cursor: default;
}

.chat-loop {
  position: absolute;
  left: 0;
  top: 1px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  border: 1px solid #000;
  border-radius: 0 32px 32px 0;
  background: #000;
  color: var(--input-text);
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
}

.chat-loop img,
.chat-loop__orb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  pointer-events: none;
}

.chat-tools {
  position: absolute;
  left: 360px;
  top: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.screen--chat .chat-compose.composer {
  position: absolute;
  left: 24px;
  right: auto;
  top: 72px;
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  z-index: 3;
}

.screen--chat .composer input {
  height: 100%;
  border: none;
  border-radius: 16px;
  background: transparent;
}

.screen--chat .composer button {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

.chat-compose__field {
  position: relative;
  width: 312px;
  height: 56px;
  border-radius: 16px;
  background: var(--bg-surface);
}

.chat-compose__field input {
  width: 100%;
  height: 100%;
  padding: 0 100px 0 24px;
  border: none;
  border-radius: 16px;
  background: transparent;
  color: var(--input-text);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.chat-compose__field input::placeholder {
  color: var(--input-placeholder);
}

.chat-compose__sticker,
.chat-compose__attach,
.chat-compose__voice {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.chat-compose__sticker {
  position: absolute;
  top: 14px;
  right: 60px;
}

.chat-compose__attach {
  position: absolute;
  top: 14px;
  right: 16px;
}

.screen--chat .bubble {
  background: var(--bg-surface);
}

.chat-head > button img {
  width: 32px;
  height: 32px;
}

.chat-body--ready {
  display: flex;
  flex-direction: column;
  margin-bottom: 179px;
  padding: 16px 24px 0;
  overflow: hidden;
  position: static;
}

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

.chat-ready__meta,
.chat-ready__invite {
  text-align: center;
}

.chat-ready__pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 32px;
  background: var(--bg-surface);
  color: #a49db2;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 18px;
}

.chat-ready__who,
.chat-ready__notice,
.chat-ready__invite p {
  margin: 0;
  font-family: "Montserrat", sans-serif;
}

.chat-ready__who {
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 18px;
}

.chat-ready__notice {
  margin-top: 8px;
  color: #a49db2;
  font-size: 12px;
  line-height: 18px;
}

.screen--chat.is-ready .chat-ready__invite {
  position: absolute;
  top: 452px;
  left: 56px;
  width: 328px;
  margin: 0;
}

.chat-ready__invite p:first-child {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 20px;
}

.chat-ready__invite p:last-child {
  margin-top: 8px;
  color: #a49db2;
  font-size: 12px;
  line-height: 18px;
}

.chat-dock--live .chat-tools {
  left: 362px;
  top: 4px;
  width: 54px;
  height: 54px;
}

.chat-tools__glyph {
  position: relative;
  display: block;
  width: 54px;
  height: 54px;
}

.chat-tools__glyph img:last-child {
  position: absolute;
  left: 11px;
  top: 11px;
  width: 32px;
  height: 32px;
}

.chat-dock--live .chat-compose.composer {
  top: 80px;
}

.chat-dock--live .chat-compose__field {
  width: 314px;
  height: 54px;
}

.chat-mic {
  position: absolute;
  left: 362px;
  top: 80px;
  width: 54px;
  height: 54px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.chat-loop {
  touch-action: none;
}

.screen--chat.is-tools .chat-tools {
  visibility: hidden;
}

.chat-sheet__backdrop {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 0;
  border: none;
  background: rgba(18, 14, 30, 0.6);
  cursor: pointer;
}

.chat-sheet__menu {
  position: absolute;
  left: 104px;
  z-index: 5;
  width: 312px;
  padding: 10px;
  border: 1px solid #2d2639;
  border-radius: 24px;
  background: var(--bg-surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.chat-sheet__menu--tools {
  bottom: 174px;
}

.chat-sheet__menu--attach {
  bottom: 120px;
}

.chat-sheet__heading {
  margin: 0;
  padding: 6px 12px 4px;
  color: var(--text-primary);
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.chat-sheet__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

.chat-sheet__row img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.chat-sheet__row--ai {
  justify-content: space-between;
  font-size: 14px;
  font-weight: 400;
}

.chat-sheet__close {
  position: absolute;
  left: 362px;
  bottom: 110px;
  z-index: 6;
  width: 54px;
  height: 54px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.screen--ai {
  background: #000;
  color: #fff;
}

.ai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 104px;
  padding: 48px 16px 8px;
  background: #0c0c0e;
}

.ai-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-brand h1 {
  margin: 0;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.ai-brand__orb {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  background: transparent;
}

.ai-brand__ring {
  grid-area: 1 / 1;
  width: 48px;
  height: 48px;
}

.ai-orb--sm {
  grid-area: 1 / 1;
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 50%;
  background: #000;
  mix-blend-mode: lighten;
}

.ai-actions {
  display: flex;
  gap: 8px;
}

.ai-actions button,
.ai-actions img {
  width: 48px;
  height: 48px;
  display: block;
}

.ai-actions button {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ai-stage {
  position: absolute;
  top: 320px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ai-orb--lg {
  width: 111px;
  height: 111px;
  object-fit: cover;
  background: transparent;
  mix-blend-mode: lighten;
}

html[data-theme="light"] .ai-brand__ring {
  display: none;
}

html[data-theme="light"] .ai-orb--sm,
html[data-theme="light"] .ai-orb--lg {
  background: transparent;
  mix-blend-mode: darken;
}

.ai-ask {
  margin: 4px 0 12px;
  color: #c5c0d0;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.ai-chips {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 393px;
}

.ai-chip-row {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.ai-chip {
  height: 48px;
  padding: 0 32px;
  border: 1.5px solid #9c94af;
  border-radius: 32px;
  background: transparent;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}

.ai-strand {
  position: absolute;
  right: -2px;
  bottom: 112px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  padding: 7px 16px;
  border: none;
  border-radius: 32px 0 0 32px;
  background: #120e1e;
  color: var(--button-primary-bg);
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  touch-action: none;
}

.ai-strand img {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.ai-compose {
  position: absolute;
  left: 24px;
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 392px;
  height: 56px;
  background: transparent;
}

.ai-compose.composer .ai-compose__field {
  display: flex;
  align-items: center;
  height: 56px;
}

.ai-compose.composer input {
  height: 100%;
  min-height: 0;
  border: none;
  background: transparent;
  padding: 0 52px 0 24px;
}

.ai-compose.composer .ai-compose__attach {
  top: 50%;
  right: 16px;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
}

.ai-compose.composer .ai-mic {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.ai-compose__field {
  position: relative;
  width: 312px;
  height: 56px;
  border: 1.5px solid #25242a;
  border-radius: 16px;
  background: transparent;
}

.ai-compose input {
  width: 100%;
  height: 56px;
  padding: 0 48px 0 24px;
  border: none;
  border-radius: 16px;
  background: transparent;
  color: var(--input-text);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.ai-compose input::placeholder {
  color: var(--input-placeholder);
}

.ai-compose__attach {
  position: absolute;
  right: 16px;
  top: 14px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ai-compose__attach img {
  display: block;
  width: 28px;
  height: 28px;
}

.ai-mic {
  position: relative;
  display: grid;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  place-items: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ai-mic__ring,
.ai-mic__icon {
  grid-area: 1 / 1;
}

.ai-mic__ring {
  width: 56px;
  height: 56px;
  animation: ai-mic-spin 2s linear infinite;
}

.ai-mic__icon {
  width: 32px;
  height: 32px;
}

@keyframes ai-mic-spin {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

.ai-menu__backdrop {
  position: absolute;
  inset: 0;
  z-index: 7;
  padding: 0;
  border: none;
  background: rgba(18, 14, 30, 0.6);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.ai-menu__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding: 48px 40px 24px;
  border-radius: 64px 64px 0 0;
  background: #1b152d;
  backdrop-filter: blur(15px);
}

.ai-menu__list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.ai-menu__list button,
.ai-menu__close {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ai-menu__list button {
  color: #c5c0d0;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
}

.ai-menu__list .is-danger {
  color: #d57878;
}

.tool-sheet__backdrop {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 0;
  border: none;
  background: rgba(9, 7, 15, 0.62);
  cursor: pointer;
}

.tool-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  max-height: 800px;
  overflow: auto;
  padding: 12px 24px 32px;
  border-radius: 28px 28px 0 0;
  background: #1b152d;
}

.tool-sheet__handle {
  width: 36px;
  height: 4px;
  margin: 0 auto 24px;
  border-radius: 4px;
  background: #e09da3;
}

.tool-sheet__head h2 {
  margin: 0;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
}

.tool-sheet__head p,
.tool-hint,
.tool-duration p,
.tool-multi-copy {
  margin: 4px 0 0;
  color: #a49db2;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.tool-sheet form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tool-label,
.tool-task__head p,
.tool-assign > span,
.tool-timer strong,
.tool-duration__row > span,
.tool-clock span,
.tool-money span,
.tool-currency span {
  color: #c5c0d0;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.tool-label span,
.tool-timer span {
  color: #a49db2;
  font-weight: 400;
  font-size: 12px;
}

.tool-field {
  width: 100%;
  height: 56px;
  padding: 0 24px;
  border: 1px solid #292236;
  border-radius: 16px;
  background: #171322;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.tool-field::placeholder {
  color: #bdb5d5;
}

.tool-field--tall {
  height: 64px;
}

.tool-field--mid {
  height: 48px;
}

.tool-field--area {
  height: 80px;
  padding-top: 18px;
  resize: none;
}

.tool-field--minutes {
  width: 112px;
  height: 44px;
  border-color: #7b6cab;
  font-size: 16px;
}

.tool-field--clock {
  height: 64px;
  padding: 0;
  color: #fff;
  font-size: 28px;
  line-height: 36px;
  text-align: center;
}

.tool-field--money {
  height: 68px;
}

.tool-stack,
.tool-clock {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tool-clock {
  flex-direction: row;
  gap: 12px;
}

.tool-clock label {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.tool-check {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tool-field-wrap {
  flex: 1;
  min-width: 0;
}

.tool-add {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: #e09da3;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}

.tool-task__head,
.tool-timer,
.tool-duration__row,
.tool-assign,
.tool-sheet__actions,
.tool-money,
.tool-note {
  display: flex;
  align-items: center;
}

.tool-task__head,
.tool-timer {
  justify-content: space-between;
}

.tool-task__head button {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.tool-sheet form[data-sheet="tasks"] {
  gap: 8px;
}

.tool-task {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tool-assign {
  gap: 12px;
}

.tool-assign > span,
.tool-duration__row > span:first-child {
  width: 74px;
  font-weight: 400;
}

.tool-select {
  position: relative;
  flex: 1;
}

.tool-select select {
  width: 100%;
  height: 48px;
  padding: 0 48px 0 24px;
  border: none;
  border-radius: 42px;
  background: #211b2c;
  color: #bdb5d5;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  appearance: none;
}

.tool-currency .tool-select select,
.tool-select select.is-set {
  color: #fff;
}

.tool-currency .tool-select select {
  height: 68px;
  border: 1px solid #292236;
  border-radius: 16px;
  background: #171322;
}

.tool-select img {
  position: absolute;
  top: 8px;
  right: 16px;
  pointer-events: none;
}

.tool-currency .tool-select img {
  top: 18px;
}

.tool-switch {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.tool-switch img {
  width: 48px;
  height: 28px;
}

.tool-switch--lg img {
  width: 64px;
  height: 37px;
}

.tool-duration {
  display: none;
  flex-direction: column;
  gap: 8px;
}

.tool-task.is-timed .tool-duration {
  display: flex;
}

.tool-duration__row {
  gap: 12px;
}

.tool-divider {
  height: 1px;
  background: #2d2639;
}

.tool-note {
  align-items: flex-start;
  gap: 12px;
}

.tool-note p {
  margin: 0;
  color: #c5c0d0;
  font-size: 12px;
  line-height: 18px;
}

.tool-money {
  align-items: flex-start;
  gap: 12px;
}

.tool-money > label {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
}

.tool-currency {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 132px;
}

.tool-sheet__actions {
  gap: 12px;
}

.tool-sheet__cancel {
  width: 112px;
  height: 56px;
  border: 2px solid #e09da3;
  border-radius: 32px;
  background: transparent;
  color: #e09da3;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.tool-sheet__create {
  flex: 1;
  height: 56px;
  border: none;
  border-radius: 94px;
  background: #211b2c;
  color: #776e8c;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.tool-sheet__create:disabled {
  cursor: default;
}

.tool-sheet form[data-sheet="poll"] .tool-sheet__create,
.tool-sheet form[data-sheet="expense"] .tool-sheet__create {
  background: #292236;
}

.tool-sheet__create.is-ready,
.tool-sheet form[data-sheet="poll"] .tool-sheet__create.is-ready,
.tool-sheet form[data-sheet="expense"] .tool-sheet__create.is-ready {
  background: #e09da3;
  color: #120e1e;
}

.tool-timer {
  align-items: center;
}

.tool-timer div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tool-task .tool-timer div {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.tool-expenses__head p,
.tool-expense span,
.tool-expense .tool-label {
  margin: 0;
  color: #c5c0d0;
  font-size: 13px;
  font-weight: 500;
}

.tool-expenses__head span,
.tool-expenses {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tool-expenses__head span {
  color: #a49db2;
  font-size: 12px;
  font-weight: 400;
}

.tool-expense,
.tool-expense__line label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tool-expense__line {
  display: flex;
  gap: 12px;
}

.tool-expense__line label:last-child {
  width: 148px;
  flex: none;
}

.share-wrap {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 12px;
}

.share-wrap.mine {
  justify-content: flex-end;
}

.share-card {
  width: min(350px, 100%);
  padding: 16px;
  border: 1px solid #2d2639;
  border-radius: 20px 20px 20px 6px;
  background: #1b152d;
  color: #efedf3;
  font-family: "Montserrat", sans-serif;
}

.share-wrap.mine .share-card {
  border-radius: 20px 20px 6px 20px;
}

.share-who,
.share-live {
  margin: 0;
  color: #e09da3;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.share-kind,
.share-kindline,
.share-foot,
.share-actions,
.budget-row,
.budget-share,
.share-meta,
.task-limit {
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-kindline,
.share-foot,
.share-meta,
.budget-row,
.budget-share {
  justify-content: space-between;
}

.share-kind img,
.share-tick img,
.share-line img {
  width: 20px;
  height: 20px;
  flex: none;
}

.share-line img,
.share-tick img {
  width: 24px;
  height: 24px;
  flex: none;
}

.share-kind span {
  color: #c5c0d0;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.share-kind .share-title {
  margin: 0;
}

.share-card p {
  margin: 0;
}

.share-note,
.share-progress p,
.share-sent,
.share-foot span,
.budget-row small,
.budget-metrics small {
  color: #a49db2;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.share-title {
  margin: 8px 0 0;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
}

.share-progress {
  margin: 12px 0;
}

.share-track {
  height: 4px;
  border-radius: 4px;
  background: #362b5a;
  overflow: hidden;
}

.share-track span {
  display: block;
  height: 4px;
  background: #e09da3;
}

.share-line,
.share-tick,
.share-assign,
.share-outline,
.share-actions button,
.share-vote {
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.share-line,
.share-task {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 0;
  border-bottom: 1px solid #2d2639;
  text-align: left;
}

.share-lines .share-line:last-child,
.share-task:has(+ .share-note),
.share-task:has(+ .share-foot) {
  border-bottom: none;
}

.share-line.is-done span,
.share-task .is-done + div strong {
  text-decoration: line-through;
  color: #a49db2;
}

.share-line.is-done img,
.share-tick.is-done img {
  border-radius: 50%;
  background: #e09da3;
}

.share-option {
  justify-content: space-between;
}

.share-option.is-picked img {
  border-radius: 50%;
  box-shadow: inset 0 0 0 6px #e09da3;
}

.share-task {
  align-items: flex-start;
}

.share-task div {
  flex: 1;
}

.share-task strong,
.budget-row strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.share-assign {
  color: #e09da3;
  font-size: 14px;
  font-weight: 500;
}

.task-limit img,
.share-live img {
  width: 16px;
  height: 16px;
}

.share-live {
  gap: 5px;
  color: #e09da3;
  font-size: 11px;
}

.share-time {
  margin: 12px 0;
  padding: 16px 8px;
  border-radius: 12px;
  background: #120e1e;
  text-align: center;
}

.share-digits {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.share-digits > span {
  flex: 1;
  text-align: center;
}

.share-digits .share-colon {
  flex: none;
  width: 16px;
  text-align: center;
}

.share-digits strong {
  display: block;
  color: #fff;
  font-size: 40px;
  font-weight: 500;
  line-height: 48px;
}

.share-digits small,
.share-colon {
  color: #a49db2;
  font-size: 11px;
}

.share-colon {
  font-size: 32px;
  line-height: 48px;
}

.share-tick {
  flex: none;
  margin-top: 1px;
  padding: 0;
}

.share-card .share-assignee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  color: #a49db2;
  font-size: 13px;
  line-height: 18px;
}

.share-card .share-note {
  margin: 8px 0 12px;
}

.share-card .share-meta {
  margin-top: 4px;
}

.share-card .share-sent {
  margin: 8px 0 0;
}

.share-actions button,
.share-foot .share-outline,
.share-vote {
  white-space: nowrap;
}

.share-actions {
  gap: 12px;
}

.share-actions button,
.share-outline,
.share-vote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 32px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
}

.share-actions button {
  flex: 1;
  background: #211b2c;
  color: #fff;
}

.share-foot .share-outline {
  flex: none;
  height: 36px;
  min-width: 124px;
}

.share-vote {
  height: 48px;
}

.share-card .tool-add {
  height: 36px;
  justify-content: flex-start;
}

.share-outline,
.share-actions .share-outline {
  border: 2px solid #e09da3;
  background: transparent;
  color: #e09da3;
}

.share-vote {
  width: 100%;
  margin-top: 12px;
  border-radius: 94px;
  background: #292236;
  color: #776e8c;
}

.share-vote.is-ready {
  background: #e09da3;
  color: #120e1e;
}

.share-sent {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 14px;
  text-align: right;
}

.share-wrap,
.bubble {
  position: relative;
  user-select: none;
}

.share-wrap.is-held,
.bubble.is-held {
  padding-top: 52px;
}

.react-bar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  gap: 2px;
  align-items: center;
  padding: 4px;
  border-radius: 24px;
  background: #1b152d;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.share-wrap.mine .react-bar,
.bubble.mine .react-bar {
  right: 0;
  left: auto;
}

.react-bar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 18px;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.bubble__reacts {
  display: flex;
  gap: 6px;
  margin: 6px 0 0;
  color: var(--text-primary);
  font-size: 12px;
}

.share-wrap .bubble__reacts {
  justify-content: flex-end;
}

.budget-metrics {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin: 12px 0;
  padding: 10px 8px;
  border-radius: 10px;
  background: #241c3c;
}

.budget-metrics p {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}

.budget-metrics small,
.budget-metrics strong {
  white-space: nowrap;
}

.budget-metrics strong,
.budget-share strong,
.budget-row span {
  color: #fff;
  font-size: 13px;
}

.budget-metrics .is-left {
  color: #6ec558;
}

.share-card .budget-count {
  margin: 12px 0 4px;
  font-size: 12px;
  font-weight: 600;
}

.budget-row {
  min-height: 48px;
  padding: 8px 0;
}

.budget-row + .budget-row,
.budget-share {
  border-top: 1px solid #2d2639;
}

.budget-share {
  min-height: 44px;
  margin-top: 4px;
  padding-top: 8px;
}

.budget-add {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.budget-add input {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #292236;
  border-radius: 12px;
  background: #171322;
  color: #fff;
}

.budget-add button {
  border: none;
  border-radius: 16px;
  background: #e09da3;
  color: #120e1e;
  font-weight: 500;
}

.profile-page,
.strand-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 32px;
}

.profile-hero,
.profile-block {
  padding: 16px;
  border: 1px solid #2d2639;
  border-radius: 20px;
  background: #1b152d;
}

.profile-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.profile-hero h2,
.profile-block h3,
.strand-name {
  margin: 0;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
}

.profile-hero h2,
.strand-name {
  font-size: 20px;
  line-height: 26px;
}

.profile-hero p,
.profile-note,
.profile-facts span,
.profile-stats small {
  margin: 0;
  color: #a49db2;
  font-size: 12px;
  line-height: 18px;
}

.profile-stats {
  display: flex;
  gap: 8px;
}

.profile-stats p {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}

.profile-stats span {
  display: block;
  color: #c5c0d0;
  font-size: 12px;
  line-height: 16px;
}

.profile-stats strong,
.profile-facts strong {
  display: block;
  color: #fff;
  font-size: 16px;
}

.profile-block__head,
.profile-facts p,
.strand-faces {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.profile-block__head span,
.profile-block__head {
  color: #c5c0d0;
  font-size: 12px;
}

.profile-facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-facts p {
  margin: 0;
}

.strand-faces {
  justify-content: flex-start;
}

.strand-faces .f-face,
.strand-faces .contact-row__avatar {
  width: 40px;
  height: 40px;
}

.profile-page .seg,
.profile-block .seg {
  display: flex;
  gap: 8px;
}

.profile-block .seg button {
  flex: 1;
  height: 44px;
  border: 1px solid #2d2639;
  border-radius: 22px;
  background: transparent;
  color: #c5c0d0;
}

.profile-block .seg button.is-on {
  background: #e09da3;
  color: #120e1e;
}

.screen--profile .profile-page {
  top: 123px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 24px 32px;
}

.profile-public {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.profile-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 48px;
  background: var(--input-bg);
}

.profile-photo .f-face,
.profile-photo .contact-row__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
}

.profile-photo img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
}

.profile-id {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.profile-public h2,
.profile-stat strong,
.profile-facts strong {
  margin: 0;
  color: var(--text-primary);
  font-weight: 600;
}

.profile-public h2 {
  font-size: 28px;
  line-height: normal;
  letter-spacing: -0.6px;
}

.profile-handle,
.profile-bio,
.profile-private,
.profile-facts span,
.profile-stat small,
.profile-dest small {
  margin: 0;
  color: var(--text-muted);
  font-weight: 400;
}

.profile-handle {
  font-size: 14px;
  line-height: 1.5;
}

.profile-bio {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-primary);
}

.profile-outline,
.profile-delete {
  width: 100%;
  border-radius: 32px;
  background: transparent;
  color: var(--button-secondary-text);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
}

.profile-outline {
  height: 48px;
  border: 1.5px solid var(--button-secondary-text);
}

.profile-outline--tall {
  height: 56px;
}

.profile-delete {
  height: auto;
  padding: 0;
  border: none;
  line-height: 1.5;
}

.profile-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-section--theme {
  gap: 8px;
}

.profile-section h3 {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
}

.profile-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-section__head span {
  color: var(--button-secondary-text);
  font-size: 12px;
  line-height: normal;
}

.profile-card {
  border-radius: 24px;
  background: var(--bg-surface);
}

.profile-stats {
  display: flex;
  gap: 0;
  padding: 18px 0;
}

.profile-stat {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.profile-stat strong {
  font-size: 28px;
  line-height: normal;
}

.profile-stat span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

.profile-stat small {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  line-height: normal;
}

.profile-facts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
}

.profile-facts p {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 3px;
  margin: 0;
  text-align: left;
}

.profile-facts span,
.profile-facts strong,
.profile-private {
  font-size: 12px;
  line-height: 1.5;
}

.profile-facts strong {
  font-size: 14px;
  font-weight: 400;
}

.profile-theme {
  display: flex;
  width: 100%;
}

.profile-theme button {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 56px;
  border: 1.5px solid var(--input-border);
  background: transparent;
  color: var(--button-switcher-text);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
}

.profile-theme button:first-child {
  border-radius: 16px 0 0 16px;
}

.profile-theme button:last-child {
  border-left: none;
  border-radius: 0 16px 16px 0;
}

.profile-theme button.is-on {
  border-color: transparent;
  background: var(--button-switcher-bg);
}

.profile-card--rows {
  padding: 12px 0;
}

.profile-dest {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 66px;
  padding: 0 16px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.profile-dest--single {
  height: 48px;
}

.profile-dest > span:not(.profile-chev) {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.profile-dest strong {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}

.profile-dest small {
  font-size: 12px;
  line-height: 22px;
}

.profile-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

img.theme-ico.theme-ico--light,
html[data-theme="light"] img.theme-ico.theme-ico--dark {
  display: none;
}

html[data-theme="light"] img.theme-ico.theme-ico--light {
  display: block;
}

.profile-dest > .profile-chev,
.account-dest > .profile-chev,
.account-person > .profile-chev,
.strand-row > .profile-chev,
.profile-chev {
  display: flex;
  flex: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 24px;
  min-width: 24px;
  height: 24px;
  overflow: hidden;
}

.profile-chev .theme-ico {
  width: 24px;
  height: 24px;
  transform: translateX(5px);
}

.profile-stat .profile-chev {
  width: 16px;
  min-width: 16px;
  height: 16px;
}

.profile-stat .theme-ico {
  width: 16px;
  height: 16px;
  transform: translateX(3.5px);
}

.profile-theme .theme-ico {
  width: 24px;
  height: 24px;
}

html[data-theme="light"] .screen--profile .page-header-bar {
  background: #f6f5fa;
}

html[data-theme="light"] .profile-stat span {
  color: #38373d;
}

html[data-theme="light"] .profile-theme button {
  border-color: #d8d4e0;
  color: #171322;
}

html[data-theme="light"] .profile-theme button.is-on {
  background: #9c91c0;
  color: #171322;
}

html[data-theme="light"] .screen--ai {
  background: #eeedf4;
  color: #171322;
}

html[data-theme="light"] .ai-head {
  background: #eeedf4;
}

html[data-theme="light"] .ai-brand h1,
html[data-theme="light"] .ai-chip,
html[data-theme="light"] .ai-ask {
  color: #171322;
}

html[data-theme="light"] .ai-chip {
  border-color: #9c91c0;
}

html[data-theme="light"] .ai-strand {
  background: #eeedf4;
  color: #362b5a;
}

html[data-theme="light"] .pick-row__face,
html[data-theme="light"] .pick-chip__face,
html[data-theme="light"] .f-initials {
  background: #dedaea;
  color: #362b5a;
}

html[data-theme="light"] .tool-select select,
html[data-theme="light"] .tool-currency .tool-select select,
html[data-theme="light"] .tool-select select.is-set,
html[data-theme="light"] .budget-add input {
  background: #fff;
  color: #171322;
  border-color: #c4c0cc;
}

html[data-theme="light"] .tool-sheet__create,
html[data-theme="light"] .tool-sheet form[data-sheet="poll"] .tool-sheet__create,
html[data-theme="light"] .tool-sheet form[data-sheet="expense"] .tool-sheet__create {
  background: #dedaea;
  color: #776e8c;
}

html[data-theme="light"] .tool-sheet__create.is-ready,
html[data-theme="light"] .tool-sheet form[data-sheet="poll"] .tool-sheet__create.is-ready,
html[data-theme="light"] .tool-sheet form[data-sheet="expense"] .tool-sheet__create.is-ready {
  background: #362b5a;
  color: #fff;
}

html[data-theme="light"] .ai-compose__field {
  border-color: #c4c0cc;
  background: transparent;
}

.requests-page {
  top: 123px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px 24px 32px;
}

.requests-page h2 {
  margin: 0 0 12px;
  color: var(--text-primary);
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}

.requests-search {
  width: 100%;
  max-width: 392px;
  margin: 0 0 16px;
}

.requests-page .f-face,
.requests-page .contact-row__avatar {
  width: 48px;
  height: 48px;
}

.screen--strand-settings .strand-page {
  top: 123px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px;
}

.strand-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.strand-section h2 {
  margin: 0;
  color: var(--text-primary);
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
}

.strand-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 24px;
  background: var(--bg-surface);
}

.strand-identity,
.strand-row,
.strand-perm,
.strand-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-family: "Montserrat", sans-serif;
  text-align: left;
  cursor: pointer;
}

.strand-identity {
  justify-content: flex-start;
}

.strand-identity img {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
}

.strand-identity strong,
.strand-row strong,
.strand-perm strong,
.strand-creator strong {
  display: block;
  color: var(--text-primary);
  font-weight: 600;
}

.strand-identity strong {
  font-size: 20px;
  line-height: 24px;
}

.strand-row strong,
.strand-perm strong {
  font-size: 15px;
  line-height: 20px;
}

.strand-creator strong {
  font-size: 14px;
  line-height: 20px;
}

.strand-identity em,
.strand-view,
.strand-row em {
  color: var(--button-primary-bg);
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.strand-identity em {
  display: block;
  margin-top: 4px;
}

.strand-view {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
}

.strand-badge {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--bg-surface-secondary);
  color: var(--text-secondary);
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.strand-copy,
.strand-note,
.strand-meta span,
.strand-creator small,
.strand-row small,
.strand-perm small {
  color: var(--text-muted);
  font-family: "Montserrat", sans-serif;
}

.strand-copy,
.strand-row small,
.strand-perm small {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
}

.strand-note,
.strand-meta span,
.strand-creator small {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
}

.strand-rule {
  display: block;
  height: 1px;
  background: var(--border-default);
}

.strand-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.strand-meta strong,
.strand-when {
  color: var(--text-primary);
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
}

.strand-meta strong {
  font-size: 15px;
  line-height: 20px;
}

.strand-when {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
}

.strand-creator,
.strand-stack {
  display: flex;
  align-items: center;
}

.strand-creator {
  gap: 12px;
}

.strand-stack .strand-avatar {
  margin-right: -10px;
}

.strand-avatar .f-face,
.strand-avatar .contact-row__avatar {
  width: 40px;
  height: 40px;
}

.strand-stack .strand-avatar .f-face,
.strand-stack .strand-avatar .contact-row__avatar {
  width: 44px;
  height: 44px;
  border: 2px solid var(--bg-surface);
}

.strand-choice {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}

.strand-choice img {
  width: 24px;
  height: 24px;
}

.strand-switch {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 30px;
}

.strand-switch input {
  position: absolute;
  inset: 0;
  width: 52px;
  height: 30px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.strand-switch img {
  display: block;
  width: 52px;
  height: 30px;
  pointer-events: none;
}

.strand-row .profile-chev,
.strand-view .profile-chev {
  display: flex;
  flex-shrink: 0;
}

.strand-row--inline {
  cursor: default;
}

.strand-manage {
  top: 123px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
}

.screen--strand-picker .strand-manage--picker {
  bottom: 104px;
}

.strand-context,
.strand-picked,
.strand-eligible {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.strand-context strong,
.strand-note-card > strong,
.strand-eligible h2,
.strand-picked > p,
.strand-field > span {
  margin: 0;
  color: var(--text-primary);
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
}

.strand-context strong {
  font-size: 18px;
  line-height: 27px;
}

.strand-eligible h2 {
  font-size: 15px;
  line-height: 22px;
}

.strand-picked > p {
  font-size: 13px;
  line-height: 20px;
}

.strand-context span,
.strand-hint,
.strand-count,
.strand-person small,
.strand-note-card p,
.strand-dialog__foot {
  margin: 0;
  color: var(--text-muted);
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}

.strand-search {
  width: 100%;
  max-width: none;
  height: 56px;
  border-radius: 50px;
  font-size: 14px;
}

.strand-search input {
  font-size: 14px;
}

.strand-add,
.strand-actions__save,
.strand-dialog__go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: none;
  border-radius: 94px;
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}

.strand-actions__save.is-muted,
.strand-actions__save:disabled {
  opacity: 0.5;
}

.strand-roster,
.strand-eligible {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.strand-person {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 0 0;
  border: none;
  border-bottom: 1px solid var(--border-default);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.strand-person strong {
  display: block;
  color: var(--text-primary);
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.strand-person small.is-accent,
.strand-person > button,
.strand-person--pick > button {
  color: var(--button-primary-bg);
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 500;
}

.strand-person > button,
.strand-person--pick > button {
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.strand-person > img,
.strand-person--pick img {
  width: 24px;
  height: 24px;
  margin-left: auto;
}

.strand-person__copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.strand-manage .strand-avatar .f-face,
.strand-manage .strand-avatar .contact-row__avatar {
  width: 48px;
  height: 48px;
  border: none;
}

.strand-note-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 24px;
  background: var(--bg-surface);
}

.strand-note-card .strand-badge {
  align-self: flex-start;
}

.strand-editor {
  top: 123px;
  right: 0;
  bottom: 104px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
}

.strand-editor__image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 8px 0 10px;
}

.strand-editor__image > img {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

.strand-editor__image button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--button-primary-bg);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.strand-editor__image button img {
  width: 24px;
  height: 24px;
}

.strand-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.strand-field > span {
  font-size: 15px;
  line-height: 22px;
}

.strand-field input,
.strand-field textarea {
  width: 100%;
  border: none;
  border-radius: 16px;
  background: var(--bg-surface);
  color: var(--input-text);
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  line-height: 20px;
}

.strand-field input {
  height: 60px;
  padding: 0 24px;
  border: 1.5px solid var(--input-border-focus);
}

.strand-field textarea {
  height: 112px;
  padding: 20px 24px;
  resize: none;
  font-size: 14px;
}

.strand-field textarea::placeholder {
  color: var(--input-placeholder);
}

.strand-actions {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: flex;
  gap: 12px;
  padding: 24px;
  background: rgba(9, 7, 15, 0.4);
}

.strand-actions__cancel,
.strand-dialog__stop {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 16px;
  border: 1.5px solid var(--button-primary-bg);
  border-radius: 32px;
  background: transparent;
  color: var(--button-primary-bg);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.strand-actions__cancel {
  flex: 0 0 112px;
}

.strand-actions__save {
  flex: 1;
  width: auto;
}

.strand-sheet,
.strand-dialog {
  position: absolute;
  inset: 0;
  z-index: 6;
}

.strand-sheet__backdrop,
.strand-dialog__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: rgba(18, 14, 30, 0.6);
  backdrop-filter: blur(15px);
  cursor: pointer;
}

.strand-sheet__panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 100%;
  padding: 12px 24px 0;
  overflow: auto;
  border-radius: 32px 32px 0 0;
  background: var(--bg-surface);
}

.strand-sheet__handle {
  align-self: center;
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background: #7d798b;
}

.strand-sheet__panel h2,
.strand-dialog__card h2 {
  margin: 0;
  color: var(--text-primary);
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}

.strand-dialog__card h2 {
  font-size: 22px;
  line-height: 29px;
}

.strand-sheet__panel > p {
  margin: 0;
  color: var(--text-muted);
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  line-height: 20px;
}

.strand-switcher {
  display: flex;
}

.strand-switcher button {
  flex: 1;
  height: 56px;
  border: 1.5px solid var(--input-border);
  background: transparent;
  color: var(--input-placeholder);
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}

.strand-switcher button:first-child {
  border-radius: 16px 0 0 16px;
}

.strand-switcher button:last-child {
  border-radius: 0 16px 16px 0;
}

.strand-switcher button.is-on {
  border-color: transparent;
  background: var(--button-switcher-bg);
  color: var(--button-switcher-text);
}

.strand-purposes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.strand-purpose-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.strand-purpose {
  height: 48px;
  padding: 0 28px;
  border: none;
  border-radius: 32px;
  background: var(--bg-canvas);
  color: var(--input-placeholder);
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.strand-purpose.is-on {
  background: var(--button-switcher-bg);
  color: var(--button-switcher-text);
}

.strand-hours {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 280px;
  color: var(--text-primary);
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  line-height: 20px;
}

.strand-hours__input {
  width: 154px;
  height: 56px;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  text-align: center;
  -moz-appearance: textfield;
}

.strand-hours__input::-webkit-outer-spin-button,
.strand-hours__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.strand-sheet .strand-actions {
  position: sticky;
  bottom: 0;
  width: calc(100% + 48px);
  margin: 0 -24px;
}

.strand-dialog__card {
  position: absolute;
  top: 50%;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 392px;
  max-height: calc(100% - 48px);
  padding: 24px;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: 28px;
  background: var(--bg-surface);
  transform: translateY(-50%);
}

.strand-dialog__card > img {
  width: 28px;
  height: 28px;
}

.strand-dialog__card > strong {
  color: var(--text-primary);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
}

.strand-dialog__card > p,
.strand-dialog__note p {
  margin: 0;
  color: var(--text-muted);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 21px;
}

.strand-dialog__note {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: var(--bg-surface-secondary);
}

.strand-dialog__note p,
.strand-dialog__foot {
  color: var(--text-primary);
  font-size: 13px;
}

.strand-dialog__note .is-strong {
  font-weight: 600;
}

.strand-dialog__stop {
  width: 100%;
}

html[data-theme="light"] .strand-actions,
html[data-theme="light"] .strand-sheet .strand-actions {
  background: rgba(238, 237, 244, 0.86);
}

html[data-theme="light"] .strand-sheet__backdrop,
html[data-theme="light"] .strand-dialog__backdrop {
  background: rgba(23, 19, 34, 0.35);
}

.screen--account.screen--account-footer:has(.strand-actions) .app-scroll {
  bottom: 112px;
}

.screen--account.screen--account-footer:has(.account-stack) .app-scroll {
  bottom: 180px;
}

.account-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px 0 32px;
}

.account-intro,
.account-block,
.account-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.account-intro {
  gap: 10px;
}

.account-intro h2,
.account-brand h2 {
  margin: 0;
  color: var(--text-primary);
  font-family: "Montserrat", sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 1.25;
}

.account-intro p,
.account-choice p,
.account-foot,
.account-hint,
.account-fine,
.account-brand > p,
.account-switch p,
.account-facts small,
.account-consequences small,
.account-dest small {
  margin: 0;
  color: var(--text-muted);
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

.account-choice p,
.account-foot,
.account-hint,
.account-fine,
.account-switch p,
.account-dest small,
.account-consequences small,
.account-facts strong {
  font-size: 13px;
}

.account-hint,
.account-fine {
  font-size: 12px;
}

.account-fine {
  font-size: 11px;
}

.account-kicker {
  margin: 0;
  color: var(--text-muted);
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
  line-height: 1.5;
  text-transform: uppercase;
}

.account-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.account-section-head span {
  color: var(--text-muted);
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
}

.account-choice button,
.account-person,
.account-card,
.account-note,
.account-ack {
  border-radius: 24px;
  background: var(--bg-surface);
}

.account-choice button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  height: 52px;
  padding: 0 24px;
  border: none;
  border-radius: 32px;
  color: var(--input-placeholder);
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.account-choice button.is-on {
  background: var(--bg-surface-secondary);
  color: var(--text-primary);
}

.account-choice button img,
.account-ack img {
  width: 24px;
  height: 24px;
}

.account-choice p {
  padding: 0 20px 8px;
}

.account-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.account-switch {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
}

.account-switch div,
.account-note div,
.account-person__copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.account-switch strong,
.account-note strong,
.account-person strong,
.account-dest strong,
.account-consequences strong,
.account-facts strong,
.account-field > span {
  color: var(--text-primary);
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
}

.account-switch button {
  flex: 0 0 52px;
  width: 52px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.account-switch button img {
  width: 52px;
  height: 30px;
}

.account-rule {
  display: block;
  height: 1px;
  margin: 0 16px;
  background: var(--border-default);
}

.account-note,
.account-ack {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px;
  border: none;
  background: var(--bg-surface-secondary);
  color: inherit;
  text-align: left;
}

.account-ack {
  border-radius: 20px;
  background: var(--bg-surface);
  cursor: pointer;
}

.account-note > img {
  width: 22px;
  height: 22px;
}

.account-note p,
.account-ack span {
  margin: 0;
  color: var(--text-muted);
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

.account-ack span {
  color: var(--text-primary);
}

.account-person {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 82px;
  padding: 12px 14px;
  border: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.account-person small {
  color: var(--text-muted);
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
}

.account-avatar .f-face,
.account-avatar .contact-row__avatar {
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 29px;
  background: #09070f;
}

.account-person > button,
.account-request-actions button {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--button-primary-bg);
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.account-request-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.account-request-actions button:last-child {
  color: var(--text-muted);
}

.account-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-field input,
.account-field textarea,
.account-prefix {
  width: 100%;
  border: 1px solid var(--input-border);
  border-radius: 16px;
  background: var(--input-bg);
  color: var(--input-text);
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}

.account-field input,
.account-prefix input {
  height: 56px;
  padding: 0 24px;
}

.account-field textarea {
  height: 100px;
  padding: 18px 24px;
  resize: none;
}

.account-prefix {
  display: flex;
  align-items: center;
  padding-left: 24px;
}

.account-prefix em {
  color: var(--text-primary);
  font-style: normal;
}

.account-prefix input {
  height: 54px;
  padding-left: 2px;
  border: none;
  background: transparent;
}

.account-picture {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.account-picture__face {
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  border-radius: 48px;
  background: var(--input-bg);
}

.account-picture__face .f-face,
.account-picture__face .contact-row__avatar {
  width: 64px;
  height: 64px;
}

.account-picture button {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--button-primary-bg);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.account-dest {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  padding: 8px 16px;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.account-dest > span:not(.profile-chev) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.account-facts,
.account-consequences {
  gap: 18px;
  padding: 20px;
}

.account-facts p,
.account-consequences p {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.account-facts span {
  color: var(--text-muted);
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
}

.account-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 8px;
  text-align: center;
}

.account-brand .f-logo {
  width: 88px;
  height: 38px;
  margin: 24px 0 68px;
  overflow: visible;
  transform: scale(2.4);
  transform-origin: top center;
}

.account-brand__tag {
  display: flex;
  gap: 8px;
  margin: 8px 0 0;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
}

.account-brand__tag span:first-child {
  color: #ecc4c8;
}

.account-brand__tag em {
  color: var(--text-primary);
  font-style: normal;
}

.account-brand__tag span:last-child {
  color: #9c91c0;
}

.account-stack {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--bg-canvas);
}

.account-go,
.account-stop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border-radius: 94px;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.account-go {
  border: none;
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
}

.account-go.is-quiet,
.account-go:disabled {
  background: #211b2c;
  color: #776e8c;
  cursor: default;
}

.account-stop {
  border: 1.5px solid var(--button-primary-bg);
  border-radius: 32px;
  background: transparent;
  color: var(--button-primary-bg);
}

.account-logout .strand-dialog__card > p:not(.strand-dialog__foot) {
  color: var(--text-primary);
  font-size: 15px;
}

.account-logout .strand-dialog__foot {
  color: var(--text-muted);
  font-size: 13px;
}

.account-logout h2 {
  font-size: 24px;
  font-weight: 600;
}

html[data-theme="light"] .account-go.is-quiet,
html[data-theme="light"] .account-go:disabled {
  background: #dedaea;
  color: #776e8c;
}

html[data-theme="light"] .account-avatar .contact-row__avatar,
html[data-theme="light"] .account-avatar .f-face {
  background: #fff;
}

.chat-head .chat-head__main {
  width: 298px;
  height: auto;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.chat-overflow__backdrop {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.chat-overflow {
  position: absolute;
  top: 112px;
  right: 16px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  width: 248px;
  padding: 8px;
  border: 1px solid var(--border-default);
  border-radius: 20px;
  background: var(--bg-surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.chat-overflow button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.chat-overflow img {
  width: 20px;
  height: 20px;
}

.f-header--hold {
  justify-content: flex-end;
  gap: 4px;
}

.f-header--hold button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.f-header--hold img {
  width: 24px;
  height: 24px;
}

/* Figma: Card Simple / Knot Pressed and Knot Pressed 2 */
.f-knot,
.f-tie[data-collection],
.f-tie[data-tie] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.f-knot.is-held,
.f-tie.is-held {
  position: relative;
  gap: 8px;
}

/* The outline sits above the options panel so no part of it is covered. */
.f-knot.is-held::after,
.f-tie.is-held::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid var(--button-primary-bg);
  border-radius: 24px;
  pointer-events: none;
}

.f-hold__title {
  flex: 1;
  min-width: 0;
  padding-left: 1px;
  overflow: hidden;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--knot-card-title);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.f-hold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-shrink: 0;
  width: 180px;
  height: 82px;
  border-radius: 0 24px 24px 0;
  background: var(--bg-surface-secondary);
}

.f-hold.f-hold--two {
  width: 120px;
}

.f-hold__rule {
  width: 1.5px;
  height: 46px;
  margin: 0 -0.75px;
  background: var(--border-default);
}

.f-hold__btn {
  position: relative;
  display: flex;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}

/* 32px icons, 60 x 82 tap area */
.f-hold__btn::after {
  content: "";
  position: absolute;
  inset: -25px -14px;
}

.f-hold__btn.is-on {
  color: var(--button-primary-bg);
}

.f-hold__btn--delete {
  color: var(--text-error);
}

.f-hold__btn:focus-visible {
  outline: 2px solid var(--input-border-focus);
  outline-offset: 4px;
  border-radius: 8px;
}

.strand-kind {
  display: flex;
  gap: 12px;
}

.strand-kind__pill {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 16px;
  border: none;
  border-radius: 32px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.strand-kind__pill.is-on {
  background: var(--bg-surface-secondary);
}

.strand-kind__pill img {
  width: 24px;
  height: 24px;
}

.strand-kind__hours {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  color: var(--text-primary);
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
}

.strand-kind__hours span:first-child {
  flex: 1;
}

.strand-kind-hours {
  width: 154px;
  height: 56px;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  background: #171322;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
}

html[data-theme="light"] .chat-bg {
  opacity: 1;
}

html[data-theme="light"] .chat-loop {
  border: 1px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #000000, #1c009b 50%, #a100a4);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #171322;
}

html[data-theme="light"] .bubble {
  background: #fff;
  color: #171322;
}

html[data-theme="light"] .bubble.mine {
  background: #cdc8df;
}

html[data-theme="light"] .bubble__who {
  color: #483978;
}

html[data-theme="light"] .chat-compose__field input::placeholder {
  color: #413b55;
}

html[data-theme="light"] .chat-head > button[aria-label] img,
html[data-theme="light"] .chat-head__hold img,
html[data-theme="light"] .page-header__back img,
html[data-theme="light"] .f-header--hold img {
  filter: brightness(0);
  opacity: 0.72;
}

html[data-theme="light"] .share-card,
html[data-theme="light"] .tool-sheet__panel,
html[data-theme="light"] .ai-menu__sheet,
html[data-theme="light"] .react-bar {
  background: #fff;
  border-color: #c4c0cc;
  color: #171322;
}

html[data-theme="light"] .share-title,
html[data-theme="light"] .share-digits strong,
html[data-theme="light"] .share-task strong,
html[data-theme="light"] .budget-row strong,
html[data-theme="light"] .budget-metrics strong,
html[data-theme="light"] .budget-share strong,
html[data-theme="light"] .budget-row span,
html[data-theme="light"] .tool-sheet__head h2,
html[data-theme="light"] .ai-menu__list button {
  color: #171322;
}

html[data-theme="light"] .share-note,
html[data-theme="light"] .share-sent,
html[data-theme="light"] .share-progress p,
html[data-theme="light"] .share-foot span,
html[data-theme="light"] .share-digits small,
html[data-theme="light"] .share-colon,
html[data-theme="light"] .budget-row small,
html[data-theme="light"] .budget-metrics small,
html[data-theme="light"] .share-card .share-assignee {
  color: #5f566e;
}

html[data-theme="light"] .share-time,
html[data-theme="light"] .budget-metrics,
html[data-theme="light"] .share-vote,
html[data-theme="light"] .share-actions button {
  background: #eeedf4;
  color: #171322;
}

html[data-theme="light"] .share-track {
  background: #cdc8df;
}

html[data-theme="light"] .strand-kind-hours {
  background: #dedaea;
  color: #171322;
}

html[data-theme="light"] .share-line,
html[data-theme="light"] .share-task,
html[data-theme="light"] .budget-row + .budget-row,
html[data-theme="light"] .budget-share {
  border-color: #c4c0cc;
}

html[data-theme="light"] .share-outline,
html[data-theme="light"] .share-actions .share-outline,
html[data-theme="light"] .tool-add,
html[data-theme="light"] .share-assign,
html[data-theme="light"] .share-who,
html[data-theme="light"] .share-live {
  border-color: #362b5a;
  background: transparent;
  color: #362b5a;
}

html[data-theme="light"] .strand-kind-hours {
  background: #fff;
  color: #171322;
}

html[data-theme="light"] .tool-field,
html[data-theme="light"] .tool-field--tall {
  background: #fff;
  color: #171322;
  border-color: #c4c0cc;
}

/* Empty states for Knots, Ties, and Collections. Not in the Figma file. */
.f-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px 0;
  text-align: center;
  font-family: "Montserrat", sans-serif;
}

.f-empty__art {
  display: block;
  margin-bottom: 20px;
  overflow: visible;
}

.f-empty__title {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--text-primary);
}

.f-empty__copy {
  max-width: 312px;
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

.f-empty .e-thread {
  fill: none;
  stroke: var(--knot-card-members);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: e-draw 0.7s ease-out forwards;
}

.f-empty .e-thread--2 { animation-delay: 0.15s; }
.f-empty .e-thread--3 { animation-delay: 0.3s; }

.f-empty .e-node {
  fill: var(--knot-card-bg);
  stroke: var(--knot-card-members);
  stroke-width: 2;
}

.f-empty .e-glyph {
  fill: var(--knot-card-members);
}

.f-empty .e-knot {
  fill: var(--button-secondary-text);
}

.f-empty .e-halo {
  fill: var(--button-secondary-text);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: e-halo 2.6s ease-out 0.9s infinite;
}

.f-empty--knots .e-knot,
.f-empty--ties .e-knot {
  transform-box: fill-box;
  transform-origin: center;
  animation: e-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.7s both;
}

.f-empty--knots .e-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: e-pop 0.4s ease-out both, e-float 4s ease-in-out 1s infinite;
}

.f-empty--knots .e-node--2 { animation-delay: 0.1s, 1.4s; }
.f-empty--knots .e-node--3 { animation-delay: 0.2s, 1.8s; }

.f-empty--ties .e-person--left { animation: e-lean-right 3.6s ease-in-out 0.8s infinite; }
.f-empty--ties .e-person--right { animation: e-lean-left 3.6s ease-in-out 0.8s infinite; }

.f-empty--collections .e-card {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.f-empty--collections .e-card--back { animation: e-fan-left 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
.f-empty--collections .e-card--mid { animation: e-fan-right 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
.f-empty--collections .e-card--front { animation: e-float 4s ease-in-out 0.9s infinite; }

@keyframes e-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes e-pop {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes e-halo {
  0% { opacity: 0.35; transform: scale(0.6); }
  70%, 100% { opacity: 0; transform: scale(1.6); }
}

@keyframes e-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

@keyframes e-lean-right {
  0%, 100% { translate: 0 0; }
  50% { translate: 4px 0; }
}

@keyframes e-lean-left {
  0%, 100% { translate: 0 0; }
  50% { translate: -4px 0; }
}

@keyframes e-fan-left {
  from { transform: rotate(0deg); }
  to { transform: rotate(-14deg) translate(-18px, 2px); }
}

@keyframes e-fan-right {
  from { transform: rotate(0deg); }
  to { transform: rotate(14deg) translate(18px, 2px); }
}

@media (prefers-reduced-motion: reduce) {
  .f-empty .e-thread,
  .f-empty .e-node,
  .f-empty .e-knot,
  .f-empty .e-person,
  .f-empty .e-card--front {
    animation: none;
    stroke-dashoffset: 0;
  }

  .f-empty .e-halo {
    animation: none;
  }

  .f-empty--collections .e-card--back,
  .f-empty--collections .e-card--mid {
    animation-duration: 0.01s;
    animation-delay: 0s;
  }
}

/* Initials shown when someone has no photo. Figma: Card Simple / Tie Card (#09070f, #c5c0d0, Medium 16). */
.contact-row__avatar {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #c5c0d0;
  background: #09070f;
}

html[data-theme="light"] .contact-row__avatar {
  background: #dedaea;
  color: #362b5a;
}

.person-hero .contact-row__avatar {
  font-size: 22px;
}

/* Notice on the Ties screen when requests are waiting. Not in the Figma file. */
.f-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 392px;
  min-height: 56px;
  margin-bottom: 16px;
  padding: 0 20px 0 16px;
  border: 1px solid var(--button-secondary-text);
  border-radius: 24px;
  background: var(--knot-card-bg);
  font-family: "Montserrat", sans-serif;
  text-align: left;
  cursor: pointer;
}

.f-notice__count {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--button-switcher-bg);
  color: #efedf3;
  font-weight: 500;
  font-size: 13px;
}

.f-notice__text {
  flex: 1;
  font-size: 16px;
  line-height: 20px;
  color: var(--knot-card-title);
}

.f-notice__go {
  font-weight: 500;
  font-size: 15px;
  color: var(--button-secondary-text);
}

/* Icon buttons on request rows: accept, block, decline. Icons from Figma. */
.contact-row__acts {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.icon-btn--ok {
  color: #6ec558;
}

.icon-btn:focus-visible {
  outline: 2px solid var(--input-border-focus);
  outline-offset: -2px;
}

.requests-page .contact-row {
  cursor: default;
}

.requests-page .contact-row__name {
  flex: 1;
  min-width: 0;
  text-align: left;
}

/* Figma: Strand Chat – Active Conversation. Message rows, bubbles, day marker, time and read state. */
.chat-context {
  margin: -17px 0 21px;
}

.chat-day {
  margin: 0 0 16px;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-muted);
  text-align: center;
}

.msg + .chat-day {
  margin-top: 16px;
}

.msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
}

.msg.mine {
  justify-content: flex-end;
}

.msg__face {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: #1b152d;
  color: #c5c0d0;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 20px;
}

.screen--chat .msg .bubble {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 350px;
  width: 350px;
  min-width: 0;
  margin: 0;
  padding: 10px 14px;
  border-radius: 6px 20px 20px 20px;
  background: #1b152d;
}

.screen--chat .msg.mine .bubble {
  border-radius: 20px 20px 6px 20px;
  background: #362b5a;
}

.screen--chat .msg .bubble.is-held {
  padding-top: 52px;
}

.msg .bubble__who {
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: var(--knot-card-members);
}

.msg .bubble__body {
  font-size: 14px;
  line-height: 20px;
  color: #efedf3;
  overflow-wrap: anywhere;
}

.msg.mine .bubble__body {
  color: #ffffff;
}

.bubble__time {
  margin: 0;
  font-size: 11px;
  line-height: 14px;
  color: var(--text-muted);
  text-align: right;
}

html[data-theme="light"] .msg__face {
  background: #dedaea;
  color: #362b5a;
}

html[data-theme="light"] .screen--chat .msg .bubble {
  background: #ffffff;
}

html[data-theme="light"] .screen--chat .msg.mine .bubble {
  background: #cdc8df;
}

html[data-theme="light"] .msg .bubble__body,
html[data-theme="light"] .msg.mine .bubble__body {
  color: #171322;
}

.strand-kind__pill:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---- Chat refinements, 15 Nov 2026 ---- */

/* Bubbles are as wide as their text, up to the Figma width. */
.screen--chat .msg .bubble {
  flex: 0 1 auto;
  width: auto;
  min-width: 96px;
  max-width: 350px;
}

.bubble__link {
  color: var(--button-secondary-text);
  overflow-wrap: anywhere;
}

.bubble__time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.bubble__pin {
  display: inline-flex;
  color: var(--button-secondary-text);
}

/* Stickers sit on the chat with no bubble behind them. */
.screen--chat .msg .bubble.bubble--sticker,
.screen--chat .msg.mine .bubble.bubble--sticker,
html[data-theme="light"] .screen--chat .msg .bubble.bubble--sticker {
  min-width: 0;
  padding: 0;
  background: transparent;
}

.bubble--sticker .bubble__who {
  display: none;
}

.bubble__sticker {
  display: block;
  font-size: 72px;
  line-height: 84px;
}

.bubble__media {
  display: block;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.bubble__media img,
video.bubble__media {
  display: block;
  width: 100%;
  max-width: 322px;
  max-height: 320px;
  object-fit: cover;
  border-radius: 12px;
}

.bubble__file {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  text-decoration: none;
}

.bubble__file strong {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.bubble__file small {
  font-size: 11px;
  line-height: 14px;
  color: var(--text-muted);
}

html[data-theme="light"] .bubble__file {
  background: rgba(23, 19, 34, 0.06);
}

.msg .bubble.is-found,
.share-wrap.is-found .share-card {
  outline: 2px solid var(--button-secondary-text);
  outline-offset: 2px;
}

/* Go to the latest message. */
.chat-bottom {
  position: absolute;
  right: 31px;
  bottom: 191px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  background: var(--bg-surface-secondary);
  color: var(--text-primary);
  cursor: pointer;
}

.chat-bottom[hidden] {
  display: none;
}

/* Figma: Quick Access (Strand chat – Checklist shared 2). */
.quick {
  position: absolute;
  top: 128px;
  left: 50%;
  z-index: 5;
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 47px;
  background: rgba(6, 4, 11, 0.6);
  backdrop-filter: blur(12px);
  transform: translateX(-50%);
}

.quick__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #241c3c;
  color: #e3e3e3;
  cursor: pointer;
}

.quick__btn.is-on {
  box-shadow: inset 0 0 0 1.5px var(--button-secondary-text);
}

.quick__count {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--button-secondary-text);
  color: #120e1e;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 10px;
  line-height: 1;
}

.quick-backdrop {
  position: absolute;
  inset: 0;
  z-index: 4;
  border: none;
  background: transparent;
  cursor: default;
}

.quick-panel {
  position: absolute;
  top: 192px;
  left: 24px;
  z-index: 5;
  width: 392px;
  max-height: 360px;
  padding: 12px 8px;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: 20px;
  background: var(--menu-bg);
  backdrop-filter: blur(20px);
  font-family: "Montserrat", sans-serif;
}

.quick-panel__title,
.sticker-title {
  margin: 4px 12px 8px;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-muted);
}

.quick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 6px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--menu-text);
  font-family: "Montserrat", sans-serif;
  text-align: left;
  cursor: pointer;
}

.quick-row__pin {
  display: inline-flex;
  color: var(--button-secondary-text);
}

.quick-row__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.quick-row__copy strong {
  overflow: hidden;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quick-row__copy small {
  font-size: 11px;
  line-height: 16px;
  color: var(--text-muted);
}

.quick-empty {
  margin: 8px 12px;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-muted);
}

html[data-theme="light"] .quick {
  background: rgba(222, 218, 234, 0.7);
}

html[data-theme="light"] .quick__btn {
  background: #ffffff;
  color: #362b5a;
}

.chat-head__pin {
  color: #e3e3e3;
}

.chat-head__pin.is-on {
  color: var(--button-secondary-text);
}

html[data-theme="light"] .chat-head__pin {
  color: #171322;
}

/* Sticker and contact pickers. */
.chat-sheet__menu--stickers {
  left: 24px;
  right: 24px;
  bottom: 110px;
  width: auto;
  max-height: 360px;
  padding: 12px 8px;
  overflow: auto;
}

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.sticker-pick {
  display: grid;
  place-items: center;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: transparent;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

/* Figma: Loop button, 1px gradient outline (transparent → #1c009b → #a100a4). */
.chat-loop {
  border: 1px solid transparent;
  border-left: none;
  background: linear-gradient(#000, #000) padding-box, linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #1c009b 50%, #a100a4 100%) border-box;
}

html[data-theme="light"] .chat-loop {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #1c009b 50%, #a100a4 100%) border-box;
}

/* ---- Shared tool cards: one spacing scale and one button size ---- */
.share-wrap {
  margin: 0 0 14px;
}

.share-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.share-card > * {
  margin-top: 0;
  margin-bottom: 0;
}

.share-card > .share-who + .share-kind,
.share-card > .share-who + .share-kindline {
  margin-top: -4px;
}

/* A tool you shared keeps the same background and gets an accent outline. */
.share-wrap.mine .share-card {
  border-color: var(--button-secondary-text);
  background: #1b152d;
}

html[data-theme="light"] .share-wrap.mine .share-card {
  background: #ffffff;
  border-color: #362b5a;
}

.share-card .share-sent {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin: 0;
}

.share-card .share-foot {
  align-items: center;
  margin: 0;
}

.share-card .share-foot span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Every action button on a card: 44px high, 14px medium. */
.share-card .share-actions {
  display: flex;
  gap: 12px;
  margin: 0;
}

.share-card .share-actions button,
.share-card .share-outline,
.share-card .share-foot .share-outline,
.share-card .share-vote {
  height: 44px;
  min-width: 124px;
  padding: 0 18px;
  border-radius: 32px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.share-card .share-vote {
  margin: 0;
}

/* Figma: Pause is the quiet filled button beside the outlined Cancel timer. */
.share-card .share-actions .share-solid {
  border: none;
  background: #211b2c;
  color: #ffffff;
}

html[data-theme="light"] .share-card .share-actions .share-solid {
  background: #dedaea;
  color: #171322;
}

/* Countdown: room around the clock. */
.share-card .share-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  padding: 16px 8px;
  border-radius: 12px;
}

.share-card .share-time p {
  margin: 0;
}

/* Poll: who voted for each answer. */
.share-option__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.share-option.has-voters {
  height: auto;
  min-height: 52px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.share-voters {
  font-size: 11px;
  line-height: 16px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* Expenses. */
.share-card .budget-metrics {
  gap: 8px;
  margin: 0;
  padding: 8px;
}

.share-card .budget-count {
  margin: 0;
}

.share-card .budget-row {
  margin: 0;
}

.share-card .budget-share {
  margin: 0;
  padding-top: 12px;
}

.share-card .tool-add {
  height: 44px;
  margin: 0;
}

/* Countdown status: a small dot, then the word, as in Figma. */
.share-card .share-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  line-height: 18px;
}

.share-card .share-live img {
  width: 6px;
  height: 6px;
}

.share-card .share-time p {
  font-size: 12px;
  line-height: 18px;
  color: #c5c0d0;
}

.share-card .share-time p:last-child {
  font-size: 11px;
  color: var(--text-muted);
}

html[data-theme="light"] .share-card .share-time p {
  color: #38373d;
}

.share-card .budget-share > span {
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
}

.share-card .budget-share strong {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}

/* Expenses summary in two rows: the limit, then spent and remaining. */
.share-card .budget-metrics {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 8px;
  padding: 12px;
}

.share-card .budget-metrics p {
  flex: 1 1 0;
  min-width: 0;
}

.share-card .budget-metrics .budget-metrics__wide {
  flex: 0 0 100%;
}

/* A tool you shared: no outline. A #362b5a backing shows as a thin frame behind the card,
   with a small tail at the bottom corner, like a sent message bubble. */
.share-wrap.mine {
  padding: 3px 11px 3px 3px;
}

.share-wrap.mine .share-card,
html[data-theme="light"] .share-wrap.mine .share-card {
  position: relative;
  border-color: transparent;
  border-radius: 18px 18px 5px 18px;
  box-shadow: 0 0 0 3px #362b5a;
}

.share-wrap.mine .share-card::after {
  content: "";
  position: absolute;
  right: -11px;
  bottom: -3px;
  width: 12px;
  height: 14px;
  background: #362b5a;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

html[data-theme="light"] .share-wrap.mine .share-card {
  box-shadow: 0 0 0 3px #cdc8df;
}

html[data-theme="light"] .share-wrap.mine .share-card::after {
  background: #cdc8df;
}

/* Sent tools: a wider #362b5a backing, and a tail that joins it cleanly at the bottom corner. */
.share-wrap.mine {
  padding: 6px 15px 6px 6px;
}

.share-wrap.mine .share-card,
html[data-theme="light"] .share-wrap.mine .share-card {
  border-radius: 16px 16px 0 16px;
  box-shadow: 0 0 0 6px #362b5a;
}

.share-wrap.mine .share-card::after {
  right: -16px;
  bottom: -6px;
  width: 16px;
  height: 16px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

html[data-theme="light"] .share-wrap.mine .share-card {
  box-shadow: 0 0 0 6px #cdc8df;
}

/* Send button, shown in place of the microphone while the message box is in use. */
.chat-send {
  position: absolute;
  left: 362px;
  top: 80px;
  display: none;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  cursor: pointer;
}

.chat-dock.is-typing .chat-send {
  display: grid;
}

.chat-dock.is-typing .chat-mic {
  display: none;
}

/* Recording a voice message: covers the message box. The bars follow the voice. */
.voice-bar {
  position: absolute;
  left: 24px;
  bottom: 40px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 392px;
  height: 56px;
  padding: 0 6px 0 8px;
  border-radius: 28px;
  background: var(--bg-surface);
  box-shadow: 0 0 0 1px var(--border-default);
  font-family: "Montserrat", sans-serif;
  color: var(--text-primary);
}

.voice-bar__cancel {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
}

.voice-bar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-error);
  animation: voice-blink 1.2s ease-in-out infinite;
}

.voice-bar__time {
  min-width: 34px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.voice-bar__wave {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  min-width: 0;
}

.voice-bar__wave i {
  display: block;
  width: 3px;
  height: 4px;
  border-radius: 2px;
  background: var(--button-secondary-text);
  transition: height 0.08s linear;
}

.voice-bar__send {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  cursor: pointer;
}

@keyframes voice-blink {
  50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-bar__dot { animation: none; }
  .voice-bar__wave i { transition: none; }
}

.bubble__audio {
  display: block;
  width: 260px;
  max-width: 100%;
  height: 40px;
}

/* View tasks / View votes. */
.viewer {
  padding: 16px;
  font-family: "Montserrat", sans-serif;
  color: var(--text-primary);
}

.viewer .sticker-title {
  margin: 0 0 4px;
}

.viewer__title {
  margin: 0 0 4px;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
}

.viewer__note {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-muted);
}

.viewer__block {
  padding: 12px 0;
  border-top: 1px solid var(--border-default);
}

.viewer__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

.viewer__head strong {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.viewer__head span {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.viewer__head .is-done {
  color: #6ec558;
}

.viewer__sub {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-muted);
}

.viewer__people {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.viewer__person {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 20px;
}

.viewer__none {
  font-size: 12px;
  color: var(--text-muted);
}

.viewer__close {
  width: 100%;
  height: 44px;
  margin-top: 8px;
  border: 2px solid var(--button-secondary-text);
  border-radius: 32px;
  background: transparent;
  color: var(--button-secondary-text);
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}

.share-card .share-meta,
.share-card .share-meta span {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-muted);
}

/* ==========================================================================
   Motion
   Every interactive element eases between states in 150ms. Entrances (a new
   screen, a sheet, a dialog, a new message) are added in app.js (playMotion)
   so that an ordinary redraw does not replay them.
   ========================================================================== */
button,
a,
input,
textarea,
select,
[data-go],
[data-act],
.toggle__track,
.toggle__track::after {
  transition:
    background-color 150ms ease-in,
    color 150ms ease-in,
    border-color 150ms ease-in,
    box-shadow 150ms ease-in,
    opacity 150ms ease-in,
    scale 150ms ease-in,
    filter 150ms ease-in;
}

/* Pressing gives a small squeeze. `scale` is separate from `transform`, so buttons that
   are positioned with a transform stay where they are. */
button:active:not(:disabled),
[data-go]:active,
[data-act]:active:not(:disabled) {
  scale: 0.97;
}

/* Full-screen and full-width hit areas should not visibly shrink. */
.strand-dialog__backdrop:active,
.chat-sheet__backdrop:active,
.strand-sheet__backdrop:active,
.quick-backdrop:active,
.chat-overflow__backdrop:active,
.screen--splash:active,
.f-knot__main:active,
.f-tie__main:active,
.f-knot__rail button:active,
.chat-loop:active,
form:active {
  scale: 1;
}

/* Cards respond as a whole when their main area is pressed. */
.f-knot,
.f-tie,
.knot-card {
  transition: scale 150ms ease-in, box-shadow 150ms ease-in, background-color 150ms ease-in;
}

.f-knot:has(.f-knot__main:active),
.f-tie:has(.f-tie__main:active),
.knot-card:has(.knot-card__main:active) {
  scale: 0.985;
}

button:disabled {
  transition: background-color 150ms ease-in, color 150ms ease-in, opacity 150ms ease-in;
}

/* Screens: forward slides in from the right, back from the left, tabs cross-fade. */
.screen.nav-forward { animation: nav-forward 220ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.screen.nav-back { animation: nav-back 220ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.screen.nav-fade { animation: nav-fade 150ms ease-in both; }

@keyframes nav-forward {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}

@keyframes nav-back {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: none; }
}

@keyframes nav-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Sheets and menus rise from where they are anchored; their backdrops fade. */
.anim-in .strand-dialog__backdrop,
.anim-in .chat-sheet__backdrop,
.anim-in .strand-sheet__backdrop,
.anim-in .chat-overflow__backdrop {
  animation: nav-fade 150ms ease-in both;
}

.anim-in .chat-sheet__menu,
.anim-in .strand-sheet__panel,
.quick-panel.anim-in,
.chat-overflow.anim-in,
.tool-sheet.anim-in {
  animation: sheet-rise 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sheet-rise {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

/* Dialogs settle in. The card is centred with a transform, so this uses scale and opacity only. */
.anim-in .strand-dialog__card {
  animation: dialog-in 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes dialog-in {
  from { opacity: 0; scale: 0.95; }
  to { opacity: 1; scale: 1; }
}

/* A new message rises into the conversation. */
.msg.is-new,
.share-wrap.is-new {
  animation: message-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.msg.mine.is-new,
.share-wrap.mine.is-new {
  transform-origin: 100% 100%;
}

@keyframes message-in {
  from { opacity: 0; translate: 0 10px; scale: 0.98; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

/* Press and hold: the options slide out from the edge of the card. */
.is-held.anim-in .f-hold {
  animation: hold-in 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.is-held.anim-in .f-hold__title {
  animation: nav-fade 150ms ease-in both;
}

@keyframes hold-in {
  from { opacity: 0; translate: 24px 0; }
  to { opacity: 1; translate: 0 0; }
}

.bubble.is-held.anim-in .react-bar,
.share-wrap.is-held.anim-in .react-bar {
  animation: pop-in 160ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Small things that appear in place pop gently. */
.chat-bottom:not([hidden]),
.voice-bar {
  animation: pop-in 150ms ease-in both;
}

@keyframes pop-in {
  from { opacity: 0; scale: 0.8; }
  to { opacity: 1; scale: 1; }
}

/* People who ask their device for less motion get instant changes. */
@media (prefers-reduced-motion: reduce) {
  button,
  a,
  input,
  textarea,
  select,
  [data-go],
  [data-act],
  .f-knot,
  .f-tie,
  .knot-card {
    transition-duration: 0.01ms;
  }

  button:active:not(:disabled),
  [data-go]:active,
  [data-act]:active:not(:disabled),
  .f-knot:has(.f-knot__main:active),
  .f-tie:has(.f-tie__main:active),
  .knot-card:has(.knot-card__main:active) {
    scale: 1;
  }

  .screen.nav-forward,
  .screen.nav-back,
  .screen.nav-fade,
  .anim-in,
  .anim-in *,
  .msg.is-new,
  .share-wrap.is-new,
  .chat-bottom:not([hidden]),
  .voice-bar {
    animation: none;
  }
}

/* Knot page header: the knot's icon beside its name. */
.page-header__title--knot {
  gap: 8px;
  padding: 0 44px;
}

.page-header__mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
}

/* ==========================================================================
   Tools you shared: the card itself is #362b5a, like a sent message.
   No backing frame and no tail. Colours inside are chosen to meet WCAG AA on
   that background (4.5:1 for text, 3:1 for controls and graphics):
     #ffffff 13.0:1   #efedf3 11.2:1   #c5c0d0 7.0:1   #e09da3 5.8:1   #a49db2 4.9:1
   #9c91c0 (4.4:1) and the old #2d2639 dividers are not used here.
   ========================================================================== */
.share-wrap.mine {
  padding: 0;
}

.share-wrap.mine .share-card,
html[data-theme="light"] .share-wrap.mine .share-card {
  border-color: transparent;
  border-radius: 20px 20px 6px 20px;
  box-shadow: none;
}

.share-wrap.mine .share-card::after {
  content: none;
}

html:not([data-theme="light"]) .share-wrap.mine .share-card {
  background: #362b5a;
  color: #efedf3;
}

html:not([data-theme="light"]) .share-wrap.mine .share-card :is(.share-note, .share-sent, .share-foot span, .share-progress p, .share-meta, .share-meta span, .share-voters, .task-limit, .budget-row small, .budget-count + .budget-row small) {
  color: #c5c0d0;
}

html:not([data-theme="light"]) .share-wrap.mine .share-card :is(.share-assignee, .share-assignee span, .share-kind span, .budget-metrics small, .share-time p, .share-digits small, .share-colon) {
  color: #c5c0d0;
}

/* The progress track was the same colour as this background. */
html:not([data-theme="light"]) .share-wrap.mine .share-track {
  background: #1b152d;
}

/* Dividers and inner panels need to stand out from #362b5a. */
html:not([data-theme="light"]) .share-wrap.mine .share-card :is(.share-line, .share-task, .budget-row + .budget-row, .budget-share) {
  border-color: rgba(255, 255, 255, 0.22);
}

html:not([data-theme="light"]) .share-wrap.mine .share-card :is(.budget-metrics, .share-time) {
  background: #1b152d;
}

html:not([data-theme="light"]) .share-wrap.mine .share-card .share-actions .share-solid {
  background: #1b152d;
  color: #ffffff;
}

/* "Vote" before a choice is made, and "Voted" after. */
html:not([data-theme="light"]) .share-wrap.mine .share-vote:not(.is-ready) {
  background: #1b152d;
  color: #c5c0d0;
}

/* Light theme: the card takes the colour of a sent message there (#cdc8df) with dark text.
     #171322 12.6:1   #362b5a 8.6:1   #413b55 6.7:1 */
html[data-theme="light"] .share-wrap.mine .share-card {
  background: #cdc8df;
  color: #171322;
}

html[data-theme="light"] .share-wrap.mine .share-card :is(.share-note, .share-sent, .share-foot span, .share-progress p, .share-meta, .share-meta span, .share-voters, .task-limit, .budget-row small, .share-assignee, .share-assignee span, .share-kind span, .budget-metrics small, .share-time p, .share-digits small, .share-colon) {
  color: #413b55;
}

html[data-theme="light"] .share-wrap.mine .share-track {
  background: #ffffff;
}

html[data-theme="light"] .share-wrap.mine .share-card :is(.share-line, .share-task, .budget-row + .budget-row, .budget-share) {
  border-color: rgba(23, 19, 34, 0.28);
}

html[data-theme="light"] .share-wrap.mine .share-card :is(.budget-metrics, .share-time),
html[data-theme="light"] .share-wrap.mine .share-card .share-actions .share-solid,
html[data-theme="light"] .share-wrap.mine .share-vote:not(.is-ready) {
  background: #ffffff;
  color: #171322;
}

/* A completed checklist item or task stays readable on the sent-card colours. */
html:not([data-theme="light"]) .share-wrap.mine .share-card :is(.share-line.is-done span, .share-task strong) {
  color: #c5c0d0;
}

html[data-theme="light"] .share-wrap.mine .share-card :is(.share-line.is-done span, .share-line span, .share-task strong) {
  color: #413b55;
}

html[data-theme="light"] .share-wrap.mine .share-card :is(.share-title, .budget-row strong, .budget-row span, .budget-share span, .budget-share strong, .budget-metrics strong:not(.is-left), .share-digits strong, .share-who) {
  color: #171322;
}

/* A picture someone chose for a knot or strand fills the round icon slot. */
.f-knot__mark img.is-photo,
.knot-card__icon img.is-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}

.chat-head__mark.is-photo,
.page-header__mark.is-photo,
.strand-identity img {
  border-radius: 50%;
  object-fit: cover;
}

/* ---- Collections ---- */
.f-grid--one {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.f-grid__cell--all {
  border-radius: 12px;
}

.f-grid__cell {
  background: var(--knot-card-icon-bg);
}

.f-collection__mark img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  transform: none;
}

.f-hold.f-hold--one {
  width: 60px;
}

.collection-form .field-large {
  margin-bottom: 16px;
}

.collection-tabs {
  position: static;
  margin: 0 0 12px;
}

.collection-hint {
  margin: 0 0 16px;
}

.collection-picks {
  margin-bottom: 16px;
  border-radius: 16px;
  background: var(--bg-surface);
  overflow: hidden;
}

.collection-picks .empty-copy {
  margin: 0;
  padding: 14px 16px;
}

.pick-row--plain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 16px;
  border: none;
  border-bottom: 1px solid var(--border-default);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.pick-row--plain:last-child {
  border-bottom: none;
}

.pick-row--plain .pick-row__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 20px;
  color: var(--knot-card-title);
}

.pick-row--plain .pick-row__name small {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted);
}

.pick-row--plain .pick-row__check {
  position: static;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.c-scroll {
  top: 140px;
}

.c-sharing {
  margin: 0 0 16px;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: var(--text-muted);
}

.c-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.c-actions__btn {
  flex: 1;
  width: auto;
  height: 48px;
  font-size: 14px;
}

.c-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 8px 0 24px;
}

.c-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--bg-surface);
  overflow: hidden;
}

.c-tile__open {
  display: block;
  width: 100%;
  height: 100%;
}

.c-tile img,
.c-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-tile__play {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(6, 4, 11, 0.7);
  color: #ffffff;
  font-size: 12px;
}

.c-tile__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(6, 4, 11, 0.8);
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
}

.c-strand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.c-strand__remove {
  align-self: flex-end;
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: var(--text-error);
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  cursor: pointer;
}

.c-empty {
  padding-top: 24px;
}

.page-header__text {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  padding: 8px 0 8px 12px;
  border: none;
  background: transparent;
  color: var(--button-secondary-text);
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
}

/* The Private / Shared switcher sits in the page flow here, not pinned under the header. */
.collection-tabs {
  left: auto;
  width: 100%;
  transform: none;
}

.collection-tabs .auth-tab {
  flex: 1 1 0;
  width: auto;
}

.collection-form {
  padding-top: 17px;
}

/* ---- Sign-in screens: the colours inside the glow revolve slowly ----
   The glow keeps its shape and place. A soft sweep of pink and purple turns once every
   36 seconds inside it. */
@property --glow-turn {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.glow--auth::after,
.glow--splash::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 126px;
  background: conic-gradient(from var(--glow-turn) at 50% 50%, rgba(224, 157, 163, 0) 0deg, rgba(224, 157, 163, 0.5) 70deg, rgba(123, 108, 171, 0.45) 150deg, rgba(54, 43, 90, 0) 230deg, rgba(224, 157, 163, 0) 360deg);
  mix-blend-mode: screen;
  animation: glow-revolve 36s linear infinite;
}

@keyframes glow-revolve {
  to { --glow-turn: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .glow--auth::after,
  .glow--splash::after {
    animation: none;
  }
}

/* ---- Light theme microphone: white like the message box, purple glyph ---- */
html[data-theme="light"] .chat-mic {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  color: #362b5a;
}

html[data-theme="light"] .chat-dock.is-typing .chat-mic {
  display: none;
}

/* ---- Selecting photos and videos in a chat ---- */
.select-bar {
  position: absolute;
  top: 128px;
  left: 24px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 392px;
  min-height: 56px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--border-default);
  border-radius: 28px;
  background: var(--menu-bg);
  backdrop-filter: blur(20px);
  font-family: "Montserrat", sans-serif;
}

.select-bar__text {
  padding: 8px 2px;
  border: none;
  background: transparent;
  color: var(--button-secondary-text);
  font-family: inherit;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
}

.select-bar__count {
  flex: 1;
  font-size: 13px;
  color: var(--menu-text);
  text-align: center;
}

.select-bar__go {
  height: 44px;
  padding: 0 14px;
  border: none;
  border-radius: 22px;
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  font-family: inherit;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
}

.select-bar__go:disabled {
  background: var(--bg-surface-secondary);
  color: var(--text-muted);
  cursor: default;
}

/* A selected message gets a band of colour across the whole chat, and a tick. */
.is-picking .msg,
.is-picking .share-wrap {
  position: relative;
  cursor: pointer;
}

.is-picking .msg a,
.is-picking .msg video,
.is-picking .msg audio,
.is-picking .share-wrap button,
.is-picking .share-wrap a {
  pointer-events: none;
}

.msg.is-picked::before,
.share-wrap.is-picked::before {
  content: "";
  position: absolute;
  inset: -5px -24px;
  z-index: -1;
  background: rgba(224, 157, 163, 0.2);
}

html[data-theme="light"] .msg.is-picked::before,
html[data-theme="light"] .share-wrap.is-picked::before {
  background: rgba(54, 43, 90, 0.16);
}

.msg.is-picked .bubble,
.share-wrap.is-picked .share-card {
  box-shadow: 0 0 0 2px var(--button-primary-bg);
}

.chat-body.is-picking {
  isolation: isolate;
}

.select-sheet .quick-row__copy small {
  white-space: nowrap;
}

/* ---- Light theme: tools you shared ----
   The card keeps the sent-message lavender. Inner panels and quiet buttons use a soft
   tint instead of pure white, and the accents use the dark purple.
     on #cdc8df: #171322 12.6:1, #413b55 6.7:1, #362b5a 8.6:1
     on #ebe8f3: #171322 16.0:1, #413b55 8.5:1, #256b18 5.4:1 */
html[data-theme="light"] .share-wrap.mine .share-card :is(.budget-metrics, .share-time),
html[data-theme="light"] .share-wrap.mine .share-card .share-actions .share-solid,
html[data-theme="light"] .share-wrap.mine .share-vote:not(.is-ready) {
  background: #ebe8f3;
  color: #171322;
}

html[data-theme="light"] .share-wrap.mine .share-track {
  background: #ebe8f3;
}

html[data-theme="light"] .share-wrap.mine .share-track span {
  background: #362b5a;
}

html[data-theme="light"] .share-wrap.mine .share-card .budget-metrics .is-left {
  color: #256b18;
}

html[data-theme="light"] .share-wrap.mine .share-card :is(.share-who, .share-live, .share-live span) {
  color: #362b5a;
}

html[data-theme="light"] .share-wrap.mine .share-card :is(.share-outline, .tool-add, .share-assign) {
  border-color: #362b5a;
  color: #362b5a;
}

html[data-theme="light"] .share-wrap.mine .share-vote.is-ready {
  background: #362b5a;
  color: #ffffff;
}

html[data-theme="light"] .share-wrap.mine .share-card :is(.share-line, .share-task, .budget-row + .budget-row, .budget-share) {
  border-color: rgba(54, 43, 90, 0.3);
}

.chat-head__select {
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: var(--button-secondary-text);
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
}

/* ---- Profile photos ---- */
.f-profile--photo {
  padding: 0;
  overflow: hidden;
}

.f-profile--photo img {
  width: 48px;
  height: 48px;
  margin: 0;
  border-radius: 50%;
  transform: none;
}

.f-profile.profile-btn {
  position: relative;
  overflow: visible;
}

.f-profile .profile-dot {
  top: 2px;
  right: 2px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--bg-canvas);
  box-sizing: content-box;
}

.f-face--tie {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
}

.f-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.msg__face--photo {
  padding: 0;
  overflow: hidden;
}

.msg__face--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Notifications list ---- */
.note-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.note-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 16px;
  border: none;
  border-radius: 16px;
  background: var(--bg-surface);
  font-family: "Montserrat", sans-serif;
  text-align: left;
  cursor: pointer;
}

.note-row__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
}

.note-row.is-new .note-row__dot {
  background: var(--button-primary-bg);
}

.note-row__copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.note-row__copy strong {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--knot-card-title);
  overflow-wrap: anywhere;
}

.note-row.is-new .note-row__copy strong {
  font-weight: 500;
}

.note-row__copy small {
  font-size: 11px;
  line-height: 16px;
  color: var(--text-muted);
}

/* ---- Knot details ---- */
.page-header__title--knot {
  cursor: pointer;
}

.knot-edit {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.knot-edit__photo {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--knot-card-icon-bg);
  overflow: hidden;
  cursor: pointer;
}

.knot-edit__photo img,
.knot-edit--read img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.knot-edit__photo img.is-photo,
.knot-edit--read img.is-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.knot-edit--read img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.knot-edit--read strong {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--knot-card-title);
}

.knot-edit__photo span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2px 0 4px;
  background: rgba(6, 4, 11, 0.7);
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  text-align: center;
}

.knot-edit .knot-edit__name {
  flex: 1;
  min-width: 0;
  height: 56px;
  margin: 0;
}

.knot-edit .knot-edit__save {
  flex-shrink: 0;
  width: auto;
  height: 48px;
  padding: 0 18px;
  font-size: 14px;
}

.member-row {
  flex-wrap: wrap;
}

.member-acts {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.member-acts button {
  padding: 8px 6px;
  border: none;
  background: transparent;
  color: var(--button-secondary-text);
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
}

.member-acts .is-danger {
  color: var(--text-error);
}

.account-person__copy small.is-accent {
  color: var(--button-secondary-text);
}

/* ---- Edit Profile: readable text, the app's own focus colour ---- */
.account-field input,
.account-field textarea,
.account-prefix,
.account-prefix input {
  outline: none;
}

.account-field input::placeholder,
.account-field textarea::placeholder {
  color: var(--input-placeholder);
}

.account-field input:focus,
.account-field textarea:focus,
.account-prefix:focus-within {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 1px var(--input-border-focus);
}

.account-prefix input,
.account-prefix input:focus {
  border: none;
  box-shadow: none;
  background: transparent;
  color: var(--input-text);
}

.account-prefix em {
  color: var(--text-muted);
}

.account-count {
  margin: -8px 0 0;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-muted);
  text-align: right;
}

.account-picture button {
  cursor: pointer;
}

.account-picture__face .f-face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

/* ---- Header: notification bell beside the profile button ---- */
.f-header__side {
  display: flex;
  align-items: center;
  gap: 12px;
}

.f-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 24px;
  background: var(--input-bg);
  color: var(--text-secondary);
  cursor: pointer;
}

.f-bell__count {
  position: absolute;
  top: -2px;
  right: -2px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--bg-canvas);
  border-radius: 12px;
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
}

/* ---- Knot details ---- */
.page-header__knot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 280px;
  padding: 6px 10px;
  border: none;
  border-radius: 20px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.page-header__knot span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.knot-info .knot-edit {
  margin: 0 0 12px;
}

.knot-rule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  font-family: "Montserrat", sans-serif;
  cursor: pointer;
}

.knot-rule > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.knot-rule strong {
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: var(--text-primary);
}

.knot-rule small {
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted);
}

.knot-rule .toggle {
  position: relative;
  flex-shrink: 0;
}

.knot-rule input:disabled + .toggle__track {
  opacity: 0.5;
}

.knot-hours {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  color: var(--text-primary);
}

.knot-hours span:first-child {
  flex: 1;
}

.knot-hours__input {
  width: 72px;
  height: 44px;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--input-text);
  font-family: inherit;
  font-size: 15px;
  text-align: center;
  outline: none;
}

.knot-hours__input:focus {
  border-color: var(--input-border-focus);
}

.strand-person .member-acts button {
  white-space: nowrap;
}

.contact-row__name small {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted);
}

/* The header title lets taps pass through to the buttons beside it; the knot name itself must take them. */
.page-header__knot {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.knot-info .knot-edit__name {
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  outline: none;
}

.knot-info .knot-edit__name:focus {
  border-color: var(--input-border-focus);
}

/* ---- Knot details for people who cannot edit: a small picture beside the name ---- */
.knot-edit--read {
  min-height: 64px;
}

.knot-edit__photo--still {
  cursor: default;
}

.knot-edit--read .knot-edit__photo img {
  width: 36px;
  height: 36px;
  border-radius: 0;
  object-fit: contain;
}

.knot-edit--read .knot-edit__photo img.is-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.knot-edit--read strong {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- Quick access count: light text on the dark bubble in light mode ---- */
.quick__count {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
}

/* ---- Header bell: the Notification Bell image from Figma, sized like the profile icon ---- */
.f-bell img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* ---- Knots / Ties / Collections: a simple dissolve of the list ---- */
.f-body.nav-dissolve {
  animation: nav-fade 150ms ease-in both;
}

@media (prefers-reduced-motion: reduce) {
  .f-body.nav-dissolve {
    animation: none;
  }
}

/* ---- Search: the bar grows to full width while the button beside it fades away ---- */
.f-actions .f-search {
  flex: 0 0 auto;
  transition: width 150ms ease-in;
}

.f-actions .f-outline {
  flex: 0 0 auto;
  overflow: hidden;
  white-space: nowrap;
  transition: width 150ms ease-in, opacity 150ms ease-in, margin 150ms ease-in, padding 150ms ease-in, border-width 150ms ease-in;
}

.f-actions:has(.f-search input:focus) .f-outline {
  display: flex;
  width: 0;
  margin-left: -12px;
  padding: 0;
  border-width: 0;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .f-actions .f-search,
  .f-actions .f-outline {
    transition: none;
  }
}

/* ---- Light mode: the add-strand plus in the knot header is drawn in the dark purple ---- */
html[data-theme="light"] .page-header__plus img {
  opacity: 0;
}

html[data-theme="light"] .page-header__plus::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #362b5a;
  -webkit-mask: url("assets/figma/6498f.svg") center / contain no-repeat;
  mask: url("assets/figma/6498f.svg") center / contain no-repeat;
}

/* The bell artwork has wide empty margins, like the profile icon; enlarge it to match. */
.f-bell img {
  transform: scale(1.6);
}