/* pos.css — the bill screen = the V1 touch POS page (../ArohERP/qt/pos-html/Main.html, copied as it is, Piyush 2026-10-08).
   Part 1: the <style> of Main.html byte for byte (the page rule + @keyframes); the rest of the POS look is the inline
   styles in pos.js. app.js turns this sheet on only on the bill screen (link#pos-css media), so the page rule touches no other screen.
   billtap/tests/pos-same.sh checks part 1 against Main.html + Shell.html. */
html,body{margin:0;height:100%;overflow:hidden;background:#F3EFE8;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
@keyframes posWigA{0%{transform:rotate(-1.1deg)}100%{transform:rotate(1.1deg)}}
@keyframes posWigB{0%{transform:rotate(1deg)}100%{transform:rotate(-1deg)}}
@keyframes posFadeIn{from{opacity:0}to{opacity:1}}
@keyframes posRise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}

/* Part 2 (BillTap, not in the POS): the frame and the Mic view, in POS colours only —
   page #F3EFE8, card #FFFFFF, ink #1D1B18, dim #5E5850, line #E4DED3, accent #0E6B5A / #E3F0EC, Figtree + Bricolage Grotesque */
#app.pos { display: block; padding: 0; gap: 0; background: #F3EFE8; }

.pos-mic { flex: 1 1 0; min-height: 0; display: flex; }
.pos-mic .voice { position: relative; flex: 1 1 0; width: auto; min-width: 0; gap: 12px; padding: 16px; border-radius: 20px;
  background: #FFFFFF; color: #1D1B18; font-family: Figtree, system-ui, sans-serif;
  box-shadow: 0 1px 2px rgba(70,50,30,.06), 0 10px 30px rgba(70,50,30,.08); }
.pos-mic .voice .title { min-height: 44px; padding-right: 104px; }
.pos-mic .voice .title b { font-family: 'Bricolage Grotesque', Figtree, sans-serif; font-size: 20px; font-weight: 700; }
.pos-mic .voice .title small { font-size: 13px; color: #5E5850; }
.pos-mic .vtabs { position: absolute; top: 16px; right: 16px; }
.pos-mic .round { width: 48px; height: 48px; border: 0; border-radius: 14px; background: #F3EFE8; color: #1D1B18; box-shadow: none; }
.pos-mic .round.small { width: 44px; height: 44px; border-radius: 12px; }
.pos-mic .said { background: #F3EFE8; color: #1D1B18; border-radius: 14px 14px 4px 14px; font-size: 15px; padding: 8px 12px; }
.pos-mic .said.old { background: #F7F4EE; color: #5E5850; font-size: 14px; }
.pos-mic .said small { color: #8A8378; font-family: Figtree, system-ui, sans-serif; font-size: 12px; }
.pos-mic .reply { color: #1D1B18; font-size: 15px; }
.pos-mic .reply.old { color: #5E5850; font-size: 14px; }
.pos-mic .orb i { mix-blend-mode: multiply; }
.pos-mic .orb i:nth-child(1) { background: #0E6B5A; }
.pos-mic .orb i:nth-child(2) { background: #F2C3A4; }
.pos-mic .orb i:nth-child(3) { background: #91C8D6; }
.pos-mic .orb i:nth-child(4) { background: #EDC56E; }
.pos-mic .pick { background: #FFFFFF; border: 1px solid #E4DED3; border-radius: 14px; color: #1D1B18; }
.pos-mic .pick.first { background: #E3F0EC; border: 2px solid #0E6B5A; }
.pos-mic .pick .n { background: #F3EFE8; color: #1D1B18; }
.pos-mic .pick.first .n { background: #0E6B5A; color: #FFFFFF; }
.pos-mic .pick small { color: #5E5850; }
.pos-mic .hint { color: #5E5850; font-size: 13px; }
.pos-mic .typebox input { min-height: 48px; border: 0; border-radius: 14px; background: #F3EFE8; color: #1D1B18; padding: 0 14px; font-size: 16px; }
.pos-mic .typebox input::placeholder { color: #6A6258; }
.pos-mic .mic { background: #0E6B5A; color: #FFFFFF; box-shadow: 0 6px 16px rgba(14,107,90,.25); }
.pos-mic .recording .mic { background: #8A2A1F; }
.pos-mic .mic-ring { background: conic-gradient(from 0deg, #0E6B5A, #CBE5DC, #F9D5BE, #0E6B5A); }
.pos-mic .wave span { background: #0E6B5A; }