/* Sumongo motion — Client update scene (sm-client-update.css). Depends on sm-motion.css. */
.sm-cu .sm-stage {
  display: grid;
  grid-template-columns: 54fr 46fr;
  gap: 3.4em;
  align-items: center;
  padding: 2.2em 2.6em;
}
.sm-cu .sm-col { position: relative; min-width: 0; }

/* ----- Sumongo task ------------------------------------------------- */
.sm-cu .sm-app { overflow: visible; }
.sm-cu .sm-app-top { display: flex; align-items: center; gap: 1em; padding: .8em 1.1em; border-bottom: 1px solid var(--sm-line-soft); font-size: .86em; position: relative; }
.sm-cu .sm-app-top .sm-brand { font-size: .95em; }
.sm-cu .sm-crumb { flex: 1 1 auto; color: var(--sm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-cu .sm-crumb i { font-style: normal; color: var(--sm-faint); margin: 0 .3em; }
.sm-cu .sm-crumb strong { color: var(--sm-ink); font-weight: 550; }
.sm-bell { position: relative; display: inline-flex; width: 1.9em; height: 1.9em; align-items: center; justify-content: center; border-radius: 6px; color: var(--sm-ink-2); background: #f3f3f5; transform-origin: 50% 20%; }
.sm-bell .sm-svg { width: 1.1em; height: 1.1em; }
.sm-bell-badge { position: absolute; top: -.45em; right: -.45em; min-width: 1.35em; height: 1.35em; padding: 0 .35em; border-radius: 999px; background: var(--sm-accent); color: #fff; font-size: .68em; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--sm-paper); }
.sm-inbox { position: absolute; right: .9em; top: 3.2em; z-index: 4; width: 18em; background: var(--sm-paper); border: 1px solid var(--sm-line); border-radius: 9px; box-shadow: var(--sm-shadow-lift); overflow: hidden; }
.sm-inbox-head { display: flex; justify-content: space-between; padding: .55em .9em; font-size: .72em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sm-faint); border-bottom: 1px solid var(--sm-line-soft); }
.sm-inbox-item { display: flex; gap: .7em; align-items: flex-start; padding: .8em .9em; background: var(--sm-accent-tint); }
.sm-inbox-item .sm-svg { color: var(--sm-accent-ink); margin-top: .15em; }
.sm-inbox-item strong { display: block; font-size: .86em; font-weight: 550; }
.sm-inbox-item small { display: block; font-size: .74em; color: var(--sm-muted); margin-top: .15em; }
.sm-cu .sm-app-body { padding: 1em 1.1em 1.1em; display: grid; gap: .8em; }
.sm-task-line { display: flex; align-items: center; gap: .6em; }
.sm-task-line h4 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1.05em; font-weight: 550; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-panel-stack { display: grid; }
.sm-panel { grid-area: 1 / 1; border: 1px solid var(--sm-line); border-radius: 9px; background: var(--sm-paper); min-width: 0; }
.sm-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .7em .9em; border-bottom: 1px solid var(--sm-line-soft); font-size: .84em; color: var(--sm-muted); }
.sm-panel-head > span { display: inline-flex; align-items: center; gap: .45em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-panel-head strong { color: var(--sm-ink); font-weight: 550; }
.sm-ask-rows { display: grid; gap: .3em; padding: .6em .9em; }
.sm-ask { display: flex; align-items: center; gap: .55em; font-size: .88em; color: var(--sm-ink-2); padding: .3em 0; }
.sm-ask .sm-svg { color: var(--sm-faint); }
.sm-ask .sm-check { width: 1.05em; height: 1.05em; }
.sm-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .4em .9em .9em; }
.sm-panel-note { font-size: .74em; color: var(--sm-faint); }
.sm-waiting { display: flex; align-items: center; justify-content: center; gap: .7em; padding: 1.1em 1em; font-size: .86em; color: var(--sm-muted); background: #fafafb; border-style: dashed; }
.sm-pulse { width: .6em; height: .6em; border-radius: 50%; background: var(--sm-accent); box-shadow: 0 0 0 .3em var(--sm-accent-soft); flex-shrink: 0; }
.sm-received { border-color: var(--sm-accent-line); }
.sm-got-rows { display: grid; gap: .15em; padding: .55em .9em .8em; }
.sm-got { display: grid; grid-template-columns: 6em 1fr; align-items: center; gap: .6em; min-height: 2.2em; font-size: .88em; border-bottom: 1px solid var(--sm-line-soft); }
.sm-got:last-child { border-bottom: 0; }
.sm-got > span { color: var(--sm-faint); font-size: .92em; }
.sm-got > strong { font-weight: 550; color: var(--sm-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: .5em; }
.sm-got-file .sm-chip { font-size: .86em; }

/* ----- the client's browser ----------------------------------------- */
.sm-col-client { display: grid; }
.sm-client, .sm-client-empty { grid-area: 1 / 1; }
.sm-client-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; text-align: center; color: var(--sm-muted); font-size: .9em; font-weight: 500; }
.sm-client-empty .sm-avatar { width: 2.6em; height: 2.6em; font-size: .95em; }
.sm-client-empty small { display: block; font-size: .78em; color: var(--sm-faint); font-weight: 400; margin-top: .2em; }
.sm-client-bar { display: flex; align-items: center; gap: .35em; padding: .6em .9em; border-bottom: 1px solid var(--sm-line-soft); background: #f7f7f9; border-radius: var(--sm-radius) var(--sm-radius) 0 0; }
.sm-client-dot { width: .55em; height: .55em; border-radius: 50%; background: #d9d9de; }
.sm-client-url { margin-left: .6em; flex: 1 1 auto; font-size: .74em; color: var(--sm-muted); background: var(--sm-paper); border: 1px solid var(--sm-line-soft); border-radius: 5px; padding: .3em .7em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-client .sm-win-body { padding: 1em 1.2em 1.1em; display: grid; gap: .65em; }
.sm-client-head { display: flex; align-items: center; gap: .7em; margin-bottom: .2em; }
.sm-client-head > div { flex: 1 1 auto; min-width: 0; }
.sm-client-head strong { display: block; font-size: .9em; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-client-head small { display: block; font-size: .76em; color: var(--sm-muted); }
.sm-cfield > label { display: block; font-size: .76em; color: var(--sm-muted); margin-bottom: .3em; }
.sm-cinput { display: flex; align-items: center; gap: .5em; min-height: 2.3em; padding: .4em .7em; border: 1px solid var(--sm-line); border-radius: 7px; font-size: .9em; color: var(--sm-ink); background: var(--sm-paper); position: relative; }
.sm-cinput .sm-svg { color: var(--sm-faint); }
.sm-cinput.is-tall { min-height: 2.3em; }
.sm-cinput.is-drop { border-style: dashed; justify-content: center; color: var(--sm-faint); }
.sm-drop-hint { font-size: .9em; }
.sm-cinput.is-drop .sm-piece-file { position: absolute; left: .6em; top: 50%; transform: translateY(-50%); }
.sm-piece-date, .sm-piece-note { font-weight: 500; }
.sm-client-foot { display: flex; justify-content: flex-end; margin-top: .2em; }
.sm-send-reply { position: relative; min-width: 8.2em; }
.sm-send-label, .sm-send-sent { display: inline-flex; align-items: center; gap: .45em; }
.sm-send-sent { position: absolute; inset: 0; justify-content: center; }

/* ----- narrow ------------------------------------------------------- */
@container (max-width: 640px) {
  .sm-cu .sm-stage { grid-template-columns: 1fr; gap: 1.5em; padding: 1.3em 1.2em; aspect-ratio: 4 / 5; font-size: clamp(8px, 2.5cqw, 12px); align-content: center; }
  .sm-panel-note { display: none; }
  .sm-inbox { width: 15em; }
}