/* 1.2.92 d2 — call tools */
.d2-det{display:grid;gap:8px;margin:10px 0}
.d2-box{padding:8px 10px;border-radius:10px;background:hsl(var(--muted));font-size:13px;line-height:1.4}
.d2-box.red{background:rgba(220,38,38,.12);border:1px solid rgba(220,38,38,.35)}
.d2-nrow{padding:6px 0;border-top:1px solid hsl(var(--border));font-size:13px;overflow-wrap:anywhere}
.d2-nrow:first-of-type{border-top:0}
.d2-ndel{background:none;border:0;color:hsl(var(--muted-foreground));cursor:pointer;padding:0 4px;font-size:12px}
.d2-nadd{display:grid;gap:6px;margin-top:8px}.d2-nadd .btn{justify-self:start}
.d2-mrow{gap:6px;margin-top:8px;flex-wrap:wrap}
.d2-bkbtn{background:#dc2626;color:#fff;border:0}.d2-bkbtn:hover{background:#b91c1c}
.d2-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.d2-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:2px 8px;border-radius:999px;background:hsl(var(--muted))}
.d2-chip.red{background:rgba(220,38,38,.14);color:#b91c1c;font-weight:600}.d2-chip.amber{background:rgba(245,158,11,.16);color:#92400e}
.dark .d2-chip.red{color:#fca5a5}.dark .d2-chip.amber{color:#fcd34d}
.d2-draggable{cursor:grab}
.d2-crl{display:grid;gap:6px;margin-bottom:10px}.d2-cro{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid hsl(var(--border));border-radius:10px;cursor:pointer}
.d2-ml{display:grid;gap:6px;max-height:55vh;overflow:auto}
.d2-mi{text-align:start;border:1px solid hsl(var(--border));border-radius:10px;padding:8px 10px;background:hsl(var(--card));color:inherit;cursor:pointer;font:inherit}
.d2-mi:hover{border-color:hsl(var(--primary))}
.d2-lightov{position:fixed;inset:0;z-index:100000;background:#000;display:flex;flex-direction:column}
.d2-lscreen{flex:1;background:#fff}
.d2-lbar{display:flex;gap:8px;padding:10px calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));background:#111;justify-content:center;flex-wrap:wrap}
.d2-lb{min-height:48px;min-width:88px;border-radius:12px;border:1px solid #444;background:#222;color:#fff;font-size:15px;font-weight:600;padding:0 14px}
.d2-lb.on{background:#fff;color:#111}.d2-lx{background:#dc2626;border-color:#dc2626}
.d2-lhint{position:absolute;top:calc(8px + env(safe-area-inset-top));left:0;right:0;text-align:center;color:#555;pointer-events:none}
.d2-lightov[data-mode="white"] .d2-lhint{color:#999}
.d2-sl{display:grid;gap:6px;margin:8px 0}.d2-sr{display:flex;gap:8px;align-items:center}.d2-ss{max-width:52%}
.d2-up{margin-top:12px;padding-top:10px;border-top:1px solid hsl(var(--border))}.d2-file{max-width:46%;font-size:12px}
.d2-vamov{position:fixed;inset:0;z-index:99990;background:hsl(var(--background));display:flex;flex-direction:column}
.d2-vambar{display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;border-bottom:1px solid hsl(var(--border));background:hsl(var(--card));flex-wrap:wrap}
.d2-seg{display:inline-flex;border:1px solid hsl(var(--border));border-radius:999px;overflow:hidden}
.d2-seg button{border:0;background:none;color:inherit;padding:8px 14px;font:inherit;font-weight:600;cursor:pointer;min-height:40px}
.d2-seg button.on{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.d2-vamif{flex:1;width:100%;border:0;background:hsl(var(--background))}
body.d2-vam-open{overflow:hidden}
@media (max-width:420px){.d2-ss{max-width:58%}.d2-file{max-width:100%}}

/* 1.2.92 review (H-D3): 🔊 Call sounds at phone width — the call type gets its own line, the sound picker + ▶ below it (the name column was squeezed to ~70px) */
@media (max-width:480px){.d2-sr{flex-wrap:wrap;row-gap:4px;padding:6px 0;border-top:1px solid hsl(var(--border))}.d2-sr:first-child{border-top:0}.d2-sr>.grow{flex:1 1 100%;min-width:0;overflow-wrap:anywhere}.d2-sr>.d2-ss{flex:1 1 0;width:auto;max-width:none;min-width:0}}
/* 1.2.92 review (H-D3): 🔗 merge list in HE/YI — an English address line keeps its own order ("100 Lee Ave…" no longer shows as "Lee Ave… 100") */
.rtl .d2-mi .mini{unicode-bidi:plaintext;text-align:right}

/* 1.2.97 👁 View as: the gold bar on top of the preview, the role buttons, the area coordinator list */
.d2-vambar.d2-vagold{background:#DEAA14;color:#183318;border-bottom:1px solid #b88c0c;justify-content:space-between;gap:8px;flex-wrap:nowrap}
.d2-vagold .d2-vatxt{font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.d2-vagold .d2-vatxt .mini{font-weight:500;opacity:.85}
.d2-vagold .d2-vaback{background:#183318;color:#fff;border:0;white-space:nowrap;flex:none}
.d2-vagold .d2-vaback:hover{background:#2C542F}
.d2-varoles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (min-width:700px){.d2-varoles{grid-template-columns:repeat(4,1fr)}}
.d2-varole{justify-content:center;min-height:44px}
.d2-vaacs{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow:auto}
.d2-vaac{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:start;padding:10px 12px;border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--card));color:inherit;cursor:pointer}
.d2-vaac:hover{border-color:#DEAA14}
.d2-vamodes{margin:0 0 10px;padding-inline-start:18px;display:flex;flex-direction:column;gap:4px}
.d2-vafoot{flex-wrap:wrap;gap:8px}
.d2-vagold .d2-vamode{font-weight:700}