/* shared styles for the live meeting simulation (used by demo.html; index keeps its inline copy) */
.sim { background: linear-gradient(170deg, var(--ink-2), var(--ink-1) 60%); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 60px 120px -60px rgba(0,0,0,.9), 0 0 0 1px rgba(224,177,94,.04); }
.sim-head { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: .78rem; color: var(--paper-dim); }
.sim-live { display: inline-flex; align-items: center; gap: 7px; color: var(--coral); }
.sim-live .p { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: pulse 1.6s infinite; }
.sim-live.ended { color: var(--phosphor); }
.sim-live.ended .p { background: var(--phosphor); animation: none; box-shadow: 0 0 8px var(--phosphor); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(240,135,108,.5);} 50% { box-shadow: 0 0 0 6px rgba(240,135,108,0);} }
.sim-title { color: var(--paper); font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-clock { color: var(--paper-2); }
.sim-body { display: grid; grid-template-columns: 1fr 1fr; min-height: 400px; }
.sim-col { padding: 22px; min-width: 0; }
.sim-col + .sim-col { border-left: 1px solid var(--line-soft); }
.sim-col-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .24em; color: var(--faint); margin-bottom: 16px; }
.sim-talk .sim-col-label { color: var(--paper-dim); }
.sim-work .sim-col-label { color: var(--phosphor-dim); }
.say { margin-bottom: 14px; font-size: .92rem; line-height: 1.5; color: var(--paper-2); opacity: 0; transform: translateY(8px); animation: sayIn .5s var(--ease-out) forwards; }
@keyframes sayIn { to { opacity: 1; transform: none; } }
.say .who { font-family: var(--font-mono); font-size: .7rem; color: var(--gold); letter-spacing: .1em; display: block; margin-bottom: 2px; }
.say .caret { display: inline-block; width: 7px; height: 15px; background: var(--paper-2); vertical-align: -2px; margin-left: 2px; animation: blink 0.9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.art { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; margin-bottom: 12px; background: rgba(237,232,219,.025); display: flex; align-items: flex-start; gap: 12px; opacity: 0; transform: translateY(12px) scale(.97); animation: artIn .7s var(--ease-out) forwards; position: relative; overflow: hidden; }
@keyframes artIn { to { opacity: 1; transform: none; } }
.art.drafting::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(237,232,219,.06) 50%, transparent 70%); animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { transform: translateX(-100%);} to { transform: translateX(100%);} }
.art .ico { font-size: 1rem; line-height: 1.4; }
.art .t { font-size: .86rem; font-weight: 500; color: var(--paper); }
.art .m { font-family: var(--font-mono); font-size: .68rem; color: var(--paper-dim); margin-top: 2px; }
.art .st { margin-left: auto; font-family: var(--font-mono); font-size: .66rem; color: var(--gold); white-space: nowrap; }
.art.done { border-color: rgba(143,230,176,.25); }
.art.done .st { color: var(--phosphor); }
.forge-chip { display: flex; align-items: center; gap: 10px; border: 1px dashed rgba(224,177,94,.45); border-radius: 999px; padding: 9px 16px; margin-bottom: 12px; font-family: var(--font-mono); font-size: .72rem; color: var(--gold); opacity: 0; animation: artIn .6s var(--ease-out) forwards; }
.forge-chip .spark { animation: sparkle 1s ease infinite alternate; }
@keyframes sparkle { from { opacity: .5; } to { opacity: 1; } }
.forge-chip.vanish { animation: dissolve 1s var(--ease-out) forwards; }
@keyframes dissolve { to { opacity: 0; filter: blur(6px); transform: translateY(-8px) scale(.96); } }
.sim-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 22px; border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: .78rem; flex-wrap: wrap; }
.sim-foot .ai { color: var(--phosphor); }
.sim-foot .pay { color: var(--gold); }
.sim-foot .lbl { color: var(--faint); font-size: .64rem; letter-spacing: .18em; margin-right: 8px; }
.sim-fade { transition: opacity .8s var(--ease-out); }
.sim-fade.out { opacity: 0; }
@media (max-width: 820px) {
  .sim-body { grid-template-columns: 1fr; min-height: 0; }
  .sim-col + .sim-col { border-left: none; border-top: 1px solid var(--line-soft); }
  .sim-talk { max-height: 240px; overflow: hidden; }
}