/*
  ZenShareDialog (TO-59, pitch C3 / U4): share one brief with colleagues.

  Its own stylesheet, like tomo-banner.css. The backdrop carries .tomo-face, so every token below
  (and the dark palette) comes from tomo-face.css; the .tomo-face pane layout is undone here,
  because the dialog floats over the host's page. No dark rules of its own: tokens only.

  Hosts include it after tomo-face.css:
    <link rel="stylesheet" href="_content/Tomo.Face/tomo-share.css" />
*/

.zen-share.tomo-face {
  position: fixed;
  inset: 0;
  z-index: 1000;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: var(--tomo-space-4);
  container-type: normal;
  background: color-mix(in srgb, var(--tomo-canvas) 55%, rgba(10, 14, 20, 0.55));
  font-size: 14px;
  line-height: 1.5;
}

.zen-share__dialog {
  box-sizing: border-box;
  width: min(460px, 100%);
  max-height: calc(100dvh - 2 * var(--tomo-space-4));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--tomo-surface-elevated);
  border: 1px solid var(--tomo-border-light);
  border-radius: var(--tomo-radius-lg);
  box-shadow: 0 24px 60px rgba(10, 14, 20, 0.28);
  color: var(--tomo-text-primary);
}

.zen-share__head {
  display: flex;
  align-items: center;
  gap: var(--tomo-space-2);
  padding: 14px var(--tomo-space-4);
  border-bottom: 1px solid var(--tomo-border-subtle);
}

.zen-share__icon { display: inline-flex; color: var(--tomo-accent); }
.zen-share__icon svg { width: 18px; height: 18px; }

.zen-share__title { margin: 0; font-size: 16px; font-weight: 700; }

.zen-share__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--tomo-space-4);
  overflow-y: auto;
}

.zen-share__line { margin: 0; font-size: 13.5px; color: var(--tomo-text-secondary); line-height: 1.55; }
.zen-share__line b { color: var(--tomo-text-primary); }

.zen-share__label {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tomo-text-muted);
}

.zen-share__pills { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; align-items: center; }

.zen-share__empty { font-size: 13px; font-style: italic; color: var(--tomo-text-muted); }

.zen-share__pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  padding: 0 2px 0 12px;
  border-radius: var(--tomo-radius-full);
  background: var(--tomo-accent-subtle);
  border: 1px solid color-mix(in srgb, var(--tomo-accent) 40%, transparent);
  color: var(--tomo-text-primary);
  font-size: 12.5px;
  font-weight: 700;
}

/* Added here, not yet sent: dashed until Share is pressed. */
.zen-share__pill--new { border-style: dashed; }

.zen-share__pill-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--tomo-radius-full);
  background: transparent;
  color: var(--tomo-text-secondary);
  cursor: pointer;
}

.zen-share__pill-x svg { width: 12px; height: 12px; }
.zen-share__pill-x:hover:not(:disabled) { background: color-mix(in srgb, var(--tomo-accent) 18%, transparent); }
.zen-share__pill-x:disabled { opacity: 0.5; cursor: not-allowed; }

.zen-share__confirm {
  display: flex;
  flex-direction: column;
  gap: var(--tomo-space-2);
  margin-top: 10px;
  padding: var(--tomo-space-3);
  border: 1px solid var(--tomo-danger-line);
  border-radius: var(--tomo-radius-md);
  background: var(--tomo-danger-bg);
}

.zen-share__confirm-q { font-size: 14px; font-weight: 700; }
.zen-share__confirm-line { margin: 0; font-size: 12.5px; color: var(--tomo-text-secondary); }
.zen-share__confirm-actions { display: flex; flex-wrap: wrap; gap: var(--tomo-space-2); }

.zen-share__remove {
  border: 1px solid transparent;
  background: var(--tomo-danger-ink);
  color: var(--tomo-on-danger);
}

.zen-share__check {
  display: flex;
  align-items: center;
  gap: var(--tomo-space-2);
  font-size: 13px;
  color: var(--tomo-text-primary);
  cursor: pointer;
}

.zen-share__check input { width: 16px; height: 16px; margin: 0; accent-color: var(--tomo-accent); }

.zen-share__people { display: flex; flex-direction: column; gap: 6px; }

.zen-share__person {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tomo-touch);
  padding: 7px 10px;
  border: 1px solid var(--tomo-border-light);
  border-radius: var(--tomo-radius-md);
  background: var(--tomo-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--tomo-duration-fast) var(--tomo-ease-out),
    border-color var(--tomo-duration-fast) var(--tomo-ease-out);
}

.zen-share__person:hover:not(:disabled) { background: var(--tomo-surface-sunken); }
.zen-share__person:disabled { cursor: default; }

.zen-share__person--added {
  border-color: color-mix(in srgb, var(--tomo-accent) 55%, transparent);
  background: var(--tomo-accent-subtle);
}

.zen-share__person--added:hover:not(:disabled) { background: var(--tomo-accent-subtle); }

.zen-share__avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--tomo-radius-full);
  background: var(--tomo-surface-sunken);
  color: var(--tomo-text-secondary);
  font-size: 11px;
  font-weight: 800;
}

.zen-share__who { display: flex; flex-direction: column; min-width: 0; }
.zen-share__name { font-size: 13.5px; font-weight: 600; }
.zen-share__role { font-size: 12px; color: var(--tomo-text-muted); }

.zen-share__add { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--tomo-accent); }
.zen-share__person--added .zen-share__add { color: var(--tomo-text-primary); }

.zen-share__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--tomo-accent) 30%, transparent);
  border-radius: var(--tomo-radius-md);
  background: var(--tomo-accent-subtle);
  font-size: 13px;
  line-height: 1.55;
}

.zen-share__notice p { margin: 0; }
.zen-share__notice-icon { display: inline-flex; flex: none; margin-top: 2px; color: var(--tomo-accent); }
.zen-share__notice-icon svg { width: 16px; height: 16px; }

.zen-share__error {
  margin: 0;
  padding: var(--tomo-space-2) var(--tomo-space-3);
  border: 1px solid var(--tomo-danger-line);
  border-radius: var(--tomo-radius-sm);
  background: var(--tomo-danger-bg);
  color: var(--tomo-danger-ink);
  font-size: 13px;
}

.zen-share__done {
  display: flex;
  align-items: center;
  gap: var(--tomo-space-2);
  margin: 0;
  color: var(--tomo-ok);
  font-size: 13px;
  font-weight: 600;
}

.zen-share__done svg { width: 16px; height: 16px; flex: none; }

.zen-share__mock {
  display: flex;
  align-items: center;
  gap: var(--tomo-space-2);
  padding: 6px 10px;
  border: 1px dashed var(--tomo-warn-line);
  border-radius: var(--tomo-radius-sm);
  background: var(--tomo-warn-bg);
  color: var(--tomo-warn-ink);
  font-size: 12.5px;
}

.zen-share__mock svg { width: 14px; height: 14px; flex: none; }

.zen-share__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: var(--tomo-space-3) var(--tomo-space-4);
  border-top: 1px solid var(--tomo-border-subtle);
}

.zen-share__foot .tomo-btn { min-height: 40px; }
.zen-share__fear { margin-left: auto; font-size: 12px; color: var(--tomo-text-muted); }

@media (max-width: 480px) {
  .zen-share.tomo-face { align-items: flex-end; padding: 0; }
  .zen-share__dialog { width: 100%; border-radius: var(--tomo-radius-lg) var(--tomo-radius-lg) 0 0; }
  .zen-share__foot { flex-direction: column; align-items: stretch; }
  .zen-share__fear { margin-left: 0; order: -1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .zen-share__person { transition: none; }
}