/* Phản hồi: khung vẽ chú thích ảnh chụp màn hình (bms-feedback-capture.js). Máy tính: hộp giữa màn hình; điện thoại: toàn màn hình.
   Ngoại lệ DD-013: 4 màu mực vẽ và khung vẽ tối trên điện thoại dùng màu cố định (không theo theme). */
.bms-annot{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(15,23,42,.72);font-family:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--bms-text,#0F172A)}
.bms-annot-card{display:flex;flex-direction:column;width:min(1240px,100%);max-height:100%;overflow:hidden;border-radius:16px;background:var(--bms-surface,#fff);box-shadow:0 24px 60px rgba(15,23,42,.35)}
.bms-annot-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--bms-border,#E2E8F0)}
.bms-annot-head h3{order:-1;flex:1;margin:0;font-size:15px;font-weight:700}
.bms-annot-btn{height:40px;padding:0 16px;border-radius:10px;font:600 14px Roboto,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.bms-annot-btn.ghost{border:1px solid var(--bms-border-strong,#DCE3EF);background:var(--bms-surface,#fff);color:var(--bms-text,#334155)}
.bms-annot-btn.primary{border:1px solid var(--bms-primary,#2563EB);background:var(--bms-primary,#2563EB);color:#fff}
.bms-annot-tools{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;padding:10px 16px;border-bottom:1px solid var(--bms-border,#E2E8F0);background:var(--bms-surface-subtle,#F8FAFC)}
.bms-annot-seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--bms-border-strong,#DCE3EF);border-radius:12px;background:var(--bms-surface,#fff)}
.bms-annot-seg button,.bms-annot-acts button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:var(--bms-text,#334155);font:600 14px Roboto,system-ui,sans-serif;cursor:pointer}
.bms-annot-seg button[aria-pressed="true"]{background:var(--bms-primary-soft,#EFF6FF);color:var(--bms-primary-active,#1D4ED8);box-shadow:inset 0 0 0 1px var(--bms-primary-soft,#BFDBFE)}
.bms-annot svg{width:18px;height:18px;flex:none}
.bms-annot-colors{display:inline-flex;gap:8px}
.bms-annot-colors button{width:28px;height:28px;padding:0;border:2px solid #fff;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px #CBD5E1;cursor:pointer}
.bms-annot-colors button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--c)}
.bms-annot-acts{display:inline-flex;gap:4px;margin-left:auto}
.bms-annot-acts button{border:1px solid var(--bms-border-strong,#DCE3EF);background:var(--bms-surface,#fff)}
.bms-annot-acts button:disabled{opacity:.4;cursor:default}
.bms-annot-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto;background:var(--bms-canvas,#E2E8F0)}
.bms-annot-stage canvas{display:block;max-width:100%;max-height:calc(100vh - 220px);border-radius:8px;box-shadow:0 4px 18px rgba(15,23,42,.18);cursor:crosshair;touch-action:none;background:#fff}
/* Điện thoại: toàn màn hình, Huỷ/Xong trên đầu, công cụ ở dưới tầm ngón cái */
.bms-annot.is-phone{padding:0;background:#0F172A}
.bms-annot.is-phone .bms-annot-card{width:100%;height:100%;max-height:none;border-radius:0;background:#0F172A}
.bms-annot.is-phone .bms-annot-head{padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));border-bottom:0;background:#0F172A}
.bms-annot.is-phone .bms-annot-head h3{order:0;text-align:center;color:#F8FAFC}
.bms-annot.is-phone .bms-annot-btn.ghost{border-color:#334155;background:transparent;color:#E2E8F0}
.bms-annot.is-phone .bms-annot-stage{order:1;padding:8px;background:#0F172A}
.bms-annot.is-phone .bms-annot-stage canvas{max-height:100%;border-radius:6px}
.bms-annot.is-phone .bms-annot-tools{order:2;display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 12px;padding-bottom:max(12px,env(safe-area-inset-bottom));border:0;background:#111827}
.bms-annot.is-phone .bms-annot-seg{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border-color:#334155;background:#1F2937}
.bms-annot.is-phone .bms-annot-seg button{justify-content:center;height:40px;color:#CBD5E1}
.bms-annot.is-phone .bms-annot-seg button[aria-pressed="true"]{background:#2563EB;color:#fff;box-shadow:none}
.bms-annot.is-phone .bms-annot-colors{gap:12px}
.bms-annot.is-phone .bms-annot-colors button{width:32px;height:32px;border-color:#111827;box-shadow:0 0 0 2px #64748B}
.bms-annot.is-phone .bms-annot-colors button[aria-pressed="true"]{box-shadow:0 0 0 2px #fff}
.bms-annot.is-phone .bms-annot-acts button{height:40px;padding:0 10px;border-color:#334155;background:transparent;color:#E2E8F0}
.bms-annot.is-phone .bms-annot-acts span{display:none}
.bms-annot.is-phone .bms-annot-acts button[data-annot-undo] span{display:inline}
.bms-annot svg{fill:none!important}
.bms-annot :where(button):is(button):focus-visible{outline:2px solid var(--bms-focus,#2563EB);outline-offset:2px}
/* Nút "Chụp" trong hàng chế độ Phản hồi của Nexus (điện thoại và khung Nexus bên phải trên máy tính) */
:is(html.bms-phone-v2, html:not(.bms-phone-v2) #floatingActionsContainer.is-topbar-docked) .ph-nx-chip.shot { padding: 0 10px; background: #f3f4f6; color: #111827; font-weight: 400; }
:is(html.bms-phone-v2, html:not(.bms-phone-v2) #floatingActionsContainer.is-topbar-docked) .ph-nx-chip.shot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
:is(html.bms-phone-v2, html:not(.bms-phone-v2) #floatingActionsContainer.is-topbar-docked) .ph-nx-previews .pv img[data-nx-file-edit] { cursor: pointer; }

/* Hiệu ứng chụp: chớp trắng rồi khung vẽ hiện ra từ ảnh vừa chụp */
.bms-shot-flash{position:fixed;inset:0;z-index:2147483001;pointer-events:none;background:#fff;animation:bms-shot-flash .55s ease-out forwards}
@keyframes bms-shot-flash{0%{opacity:0}12%{opacity:.9}100%{opacity:0}}
.bms-annot{animation:bms-annot-in .28s ease-out}
.bms-annot-card{animation:bms-annot-card-in .32s cubic-bezier(.2,.8,.2,1)}
@keyframes bms-annot-in{from{background:rgba(15,23,42,0)}}
@keyframes bms-annot-card-in{from{opacity:0;transform:scale(1.06)}}
@media (prefers-reduced-motion: reduce){.bms-shot-flash,.bms-annot,.bms-annot-card{animation:none}}
