/* DM me user guide — additions only. Load AFTER dm-me.css.
   Everything else (tokens, header, buttons, bubbles, panels, footer) comes from dm-me.css. */

/* the scrolling body reuses #messages; guide sections stack a bit further apart */
#messages.guide{gap:14px;}

.intro{color:var(--ink-soft);font-size:14px;line-height:1.55;margin:0 4px;}
.intro strong{color:var(--ink);}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
}
.card h2{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:18px;
  margin:0 0 8px;
  display:flex;
  align-items:center;
  gap:10px;
}
.card h3{font-size:13px;font-weight:600;margin:14px 0 4px;}
.card p,.card li{font-size:14px;line-height:1.55;margin:0 0 8px;}
.card p:last-child,.card li:last-child{margin-bottom:0;}
.card ul,.card ol{margin:0;padding-left:20px;}
.card li::marker{color:var(--gold);}
.num{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:var(--gold);color:#fff;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;
}
.caption{font-size:12px;color:var(--ink-soft);margin:6px 2px 0;}
.note{
  background:rgba(208,153,61,0.12);
  border-left:3px solid var(--gold);
  border-radius:8px;
  padding:10px 12px;
  font-size:13.5px;
  line-height:1.5;
  margin-top:10px;
}

/* inline mention of a control, e.g. "tap [Invite]" */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--pine);color:#fff;
  border-radius:8px;padding:1px 9px;
  font-size:12.5px;font-weight:600;white-space:nowrap;
}

/* "screenshots": real header/panel/bubble classes inside a pine frame */
.mock{
  background:var(--pine);color:#fff;
  border-radius:12px;padding:12px 14px;margin:10px 0 4px;
}
.mock .panel{margin-top:0;}
.mock .header-row + .header-row{margin-top:6px;}
.mock .header-actions{flex-wrap:nowrap;}
.mock .icon-btn,.mock button{pointer-events:none;} /* purely illustrative */
.mock .wordmark{font-size:19px;}
.mock .icon-btn{padding:6px 10px;font-size:12px;}
.mock .icon-btn.icon-square{padding:6px;}
.mock .icon-btn.icon-only{padding:6px 8px;font-size:14px;}

.convo{
  display:flex;flex-direction:column;gap:8px;
  background:var(--bg);border-radius:12px;padding:12px;margin:10px 0 4px;
}
.convo .system-note{text-align:center;}

/* legend: control on the left, explanation on the right */
.legend{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.legend-row{display:flex;gap:12px;align-items:flex-start;}
.legend-key{flex:0 0 165px;display:flex;align-items:center;min-height:32px;}
.legend-key .icon-btn{background:var(--pine);border-color:transparent;pointer-events:none;white-space:normal;}
.legend-text{font-size:13.5px;line-height:1.5;padding-top:5px;}
@media (max-width:380px){
  .legend-row{flex-direction:column;gap:4px;}
  .legend-key{flex-basis:auto;}
}

/* FAQ */
details{border-top:1px solid var(--line);padding:10px 0;}
details:first-of-type{border-top:none;padding-top:0;}
details:last-of-type{padding-bottom:0;}
summary{cursor:pointer;font-weight:600;font-size:14px;line-height:1.4;}
summary::marker{color:var(--gold);}
details p{margin:8px 0 0;}
.mock.flush{padding:0;}