/* Lokamo :: LokamoAI na stronie glownej. Wlasciciel pisze na iPhonie do asystenta
   (ChatGPT albo Claude polaczony z Lokamo), zmiana od razu widoczna w karcie
   goscia na drugim iPhonie. Kompozycja 52 x 40 em w .ax__cam, kamera (transform)
   liczona w asystent.js. Karta goscia to komponent .gx z home.css. */

.ax{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:56px;align-items:center;margin-top:60px}
@keyframes axMsg{from{opacity:0;transform:translateY(.7em)}to{opacity:1;transform:none}}
@keyframes axSpin{to{transform:rotate(1turn)}}
@keyframes axCaret{50%{opacity:0}}
.ax-still,.ax-still *,.ax-still *::before,.ax-still *::after{transition:none!important;animation:none!important}
.ax__sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Scenariusze: klikalne polecenia z postepem */
.ax__list{display:flex;flex-direction:column;gap:2px}
.ax__q{position:relative;display:block;width:100%;padding:16px 0 16px 24px;border:0;border-radius:8px;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.ax__q:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ax__bar{position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.ax__bar::after{content:"";position:absolute;inset:0;background:var(--cobalt);transform:scaleY(var(--p,0));transform-origin:50% 0}
.ax__q b{display:block;font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-.012em;color:#A9A9AF;transition:color .3s}
.ax__q span{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:#8A8A90;transition:color .3s}
.ax__q:hover b{color:#D6D6DB}
.ax__q[aria-pressed="true"] b{color:#fff}
.ax__q[aria-pressed="true"] span{color:#B9B9BF}

/* Scena */
.ax__stage{position:relative;aspect-ratio:52/40;container-type:size;overflow:hidden;border-radius:24px;background:#111114;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);isolation:isolate}
.ax__stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 1.3px);background-size:24px 24px;pointer-events:none}
.ax__cam{position:absolute;left:0;top:0;z-index:1;width:52em;height:40em;font-size:min(calc(100cqw / 52),calc(100cqh / 40));transform-origin:0 0}
.ax__stage .scn__pause{top:auto;bottom:14px;right:14px}
.ax__tag{position:absolute;top:1.25em;display:inline-flex;align-items:center;gap:.5em;height:2.1em;padding:0 .85em;border-radius:99em;font-size:.82em;white-space:nowrap;color:#C7C7CC;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:opacity .5s var(--ease)}
.ax__tag b{font-weight:600;color:#fff}
.ax__tag--own{left:3.05em}
.ax__tag--gst{left:39.63em}
.ax__own,.ax__gst{position:absolute;top:3.6em;width:17em;z-index:2;transition:opacity .5s var(--ease),filter .5s var(--ease)}
.ax__own{left:2.5em}
.ax__gst{left:32.5em}
.ax__own .phone,.ax__gst .phone{box-shadow:0 2.4em 4.4em -1.6em rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.ax__own .phone__screen{container-type:inline-size}
.ax__gst.is-dim,.ax__tag.is-dim{opacity:.32;filter:saturate(.3)}

/* Polaczenie przez Lokamo */
.ax__link{position:absolute;left:19.5em;top:21.1em;width:13em;height:0;z-index:1}
.ax__wire{position:absolute;left:0;right:0;top:0;height:1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 .22em,transparent .22em .55em)}
.ax__hub{position:absolute;left:50%;top:0;width:3.3em;height:3.3em;margin:-1.65em 0 0 -1.65em;border-radius:50%;display:grid;place-items:center;background:#16161A;border:1px solid rgba(255,255,255,.14);color:#8E8E94;transition:color .35s,border-color .35s,box-shadow .45s}
.ax__hub svg{width:1.4em;height:1.4em}
.ax__hub.is-on{color:#fff;border-color:rgba(46,75,255,.9);box-shadow:0 0 0 .32em rgba(46,75,255,.18),0 0 2.2em rgba(46,75,255,.55)}
.ax__link small{position:absolute;left:50%;top:2.3em;transform:translateX(-50%);font-size:.72em;color:#8E8E94;letter-spacing:.04em}
.ax__pulse{position:absolute;left:0;top:0;width:.72em;height:.72em;margin:-.36em 0 0 -.36em;border-radius:50%;background:#fff;box-shadow:0 0 0 .2em rgba(46,75,255,.6),0 0 1.3em .25em rgba(46,75,255,.85);opacity:0;pointer-events:none;z-index:3}

/* iPhone wlasciciela: czat (ciemny, neutralny) */
.ax-ios{position:absolute;inset:0;font-size:calc(100cqw / 22.4);overflow:hidden;background:#0E0E10;color:#fff;line-height:1.35}
.ax-sb{position:absolute;top:0;left:0;right:0;z-index:30;height:3em;display:flex;align-items:center;justify-content:space-between;padding:.4em 1.45em 0 2em;font-weight:620}
.ax-sb__t{font-size:.92em;letter-spacing:-.01em}
.ax-sb__i{display:flex;align-items:center;gap:.32em}
.ax-sb__sig{width:1em;height:.66em;fill:currentColor}
.ax-sb__wifi{width:1.02em;height:1.02em}
.ax-sb__bat{position:relative;width:1.45em;height:.72em;border-radius:.24em;border:1px solid rgba(255,255,255,.5)}
.ax-sb__bat i{position:absolute;inset:.1em;right:.3em;border-radius:.12em;background:#fff}
.ax-cm{position:absolute;left:0;right:0;top:3em;bottom:1.9em;display:flex;flex-direction:column;transition:bottom .4s cubic-bezier(.2,.8,.2,1)}
.ax-ios.is-kb .ax-cm{bottom:16.3em}
.ax-cm__bar{display:grid;grid-template-columns:2.2em 1fr 2.2em;align-items:center;padding:.35em 1em .75em;flex:none}
.ax-cm__ic{width:1.4em;height:1.4em;color:#D6D6DB}
.ax-cm__bar>.ax-cm__ic:last-child{justify-self:end}
.ax-cm__ttl{display:flex;flex-direction:column;align-items:center;gap:.32em}
.ax-cm__ttl b{font-size:1em;font-weight:620;letter-spacing:-.01em}
.ax-cm__ttl span{display:inline-flex;align-items:center;gap:.35em;padding:.28em .65em;border-radius:99em;background:rgba(46,75,255,.2);color:#B3BEFF;font-size:.7em;font-weight:560}
.ax-cm__ttl span svg{width:1em;height:1em}
.ax-log{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:.85em;padding:0 1em .75em}
.ax-cm__in{flex:none;display:flex;align-items:center;gap:.5em;margin:0 .75em .4em;min-height:2.75em;padding:.3em .32em .3em .36em;border-radius:1.4em;background:#1C1C1F;border:1px solid rgba(255,255,255,.08)}
.ax-cm__plus,.ax-cm__send{width:2.1em;height:2.1em;border-radius:50%;display:grid;place-items:center;flex:none;transition:background-color .2s,color .2s,transform .15s}
.ax-cm__plus{background:#2A2A2E;color:#fff}
.ax-cm__send{background:#38383D;color:#8E8E93}
.ax-cm__send.is-on{background:#fff;color:#0D0D0F}
.ax-cm__plus svg,.ax-cm__send svg{width:1.1em;height:1.1em}
.ax-cm__field{flex:1;min-width:0;font-size:.9em;white-space:nowrap;overflow:hidden}
.ax-cm__ph{color:#7A7A80}
.ax-typed:not(:empty)+.ax-cm__ph{display:none}
.ax-typed:not(:empty)::after{content:"";display:inline-block;width:1.5px;height:1.1em;margin-left:1px;vertical-align:-.2em;background:var(--cobalt);animation:axCaret 1s steps(1) infinite}
.ax-home{position:absolute;left:50%;bottom:.55em;width:8.4em;height:.32em;margin-left:-4.2em;border-radius:99em;background:#fff;z-index:35}
.ax-tap{position:absolute;left:0;top:0;width:2.8em;height:2.8em;margin:-1.4em 0 0 -1.4em;border-radius:50%;background:rgba(255,255,255,.4);opacity:0;pointer-events:none;z-index:40}
.gx .ax-tap{width:2.2em;height:2.2em;margin:-1.1em 0 0 -1.1em;background:rgba(13,13,15,.22)}
.ax-tap.is-on{animation:axTap .5s var(--ease-out)}
@keyframes axTap{0%{opacity:.85;transform:scale(.45)}100%{opacity:0;transform:scale(1.15)}}
.ax-cut{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:48;transition:opacity .45s}
.ax-cut.is-on{opacity:1}

/* Wiadomosci */
.ax-m{max-width:88%;font-size:.88em;line-height:1.42}
.ax-m.is-new{animation:axMsg .45s var(--ease-out) both}
.ax-m--u{align-self:flex-end;background:#2B2B30;color:#fff;padding:.55em .85em;border-radius:1.15em 1.15em .35em 1.15em}
.ax-m--a{align-self:flex-start;color:#E6E6EA}
.ax-m--a p+p,.ax-m--a p+div,.ax-m--a div+p{margin-top:.5em}
.ax-m--a b{color:#fff;font-weight:620}
.ax-m__tool{display:flex;align-items:center;gap:.5em;margin-bottom:.5em;font:500 .82em/1.2 var(--mono);color:#A0A0A6}
.ax-m__tool i{width:.95em;height:.95em;border-radius:50%;border:.14em solid rgba(255,255,255,.22);border-top-color:#fff;animation:axSpin .8s linear infinite;flex:none}
.ax-m__tool.is-done i{animation:none;border-color:var(--ok);background:var(--ok);box-shadow:inset 0 0 0 .16em #0E0E10}
.ax-m__acts{display:flex;flex-wrap:wrap;gap:.4em}
.ax-m__acts span{padding:.52em .85em;border-radius:99em;border:1px solid rgba(255,255,255,.2);color:#fff;font-size:.94em;transition:background-color .25s,color .25s,border-color .25s}
.ax-m__acts span.is-on{background:#fff;color:#0D0D0F;border-color:#fff}
.ax-new-in{animation:axMsg .45s var(--ease-out) both}
.ax-rem,.ax-sum,.ax-draft{border-radius:.95em;background:#1B1B1F;border:1px solid rgba(255,255,255,.09)}
.ax-rem{display:flex;align-items:center;gap:.65em;padding:.65em .8em}
.ax-rem svg{width:1.35em;height:1.35em;color:#FFB340;flex:none}
.ax-rem b{display:block;font-size:.95em;font-weight:620}
.ax-rem small{display:block;font-size:.86em;color:#A6A6AB}
.ax-sum{padding:.7em .8em .55em}
.ax-sum__k{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:.4em}
.ax-sum__k small{display:block;font-size:.82em;color:#A0A0A6}
.ax-sum__k b{display:block;margin-top:.1em;font-size:1em;font-weight:560;letter-spacing:-.02em;white-space:nowrap}
.ax-sum__bars{display:flex;align-items:flex-end;gap:.22em;height:3.2em;margin-top:.65em;border-bottom:1px solid rgba(255,255,255,.14)}
.ax-sum__bars i{flex:1;height:calc(var(--h) * 100%);border-radius:.2em .2em 0 0;background:#44444B;transform:scaleY(0);transform-origin:50% 100%;transition:transform .8s var(--ease-out)}
.ax-sum.is-in .ax-sum__bars i{transform:none}
.ax-sum__bars i:nth-child(8),.ax-sum__bars i:nth-child(9){background:var(--cobalt)}
.ax-sum__ax{display:flex;justify-content:space-between;margin-top:.3em;font-size:.82em;color:#A0A0A6}
.ax-draft{display:grid;grid-template-columns:3.3em 1fr;gap:.7em;align-items:center;padding:.5em;border-style:dashed;border-color:rgba(255,255,255,.22);transition:border-color .4s}
.ax-draft img{width:3.3em;height:3.3em;border-radius:.7em;object-fit:cover}
.ax-draft b{display:block;font-size:.92em;font-weight:620;line-height:1.25;margin:.25em 0 .1em}
.ax-draft small{font-size:.86em;color:#A6A6AB}
.ax-draft__tag{display:inline-block;font-size:.82em;padding:.12em .5em;border-radius:.4em;background:rgba(255,255,255,.09);color:#C7C7CC;transition:background-color .4s,color .4s}
.ax-draft.is-live{border-style:solid;border-color:rgba(27,158,90,.55)}
.ax-draft.is-live .ax-draft__tag{background:rgba(27,158,90,.2);color:#7BDDA6}

/* Klawiatura iOS (ciemna) */
.ax-kb{position:absolute;left:0;right:0;bottom:0;height:16.3em;padding:.2em .25em 0;background:rgba(40,40,44,.98);z-index:20;transform:translateY(102%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.ax-ios.is-kb .ax-kb{transform:none}
.ax-kb__sug{display:grid;grid-template-columns:repeat(3,1fr);height:2.3em;align-items:center;text-align:center;font-size:.86em;color:#E4E4E8}
.ax-kb__sug span+span{border-left:1px solid rgba(255,255,255,.14)}
.ax-kb__row{display:flex;justify-content:center;gap:.3em;margin-top:.5em}
.ax-kb__k{position:relative;width:1.9em;height:2.4em;border-radius:.32em;background:#606066;color:#fff;display:grid;place-items:center;box-shadow:0 .09em 0 rgba(0,0,0,.5);transition:background-color .08s}
.ax-kb__k span{font-size:1.16em;line-height:1}
.ax-kb.is-up .ax-kb__k span{text-transform:uppercase}
.ax-kb__k.is-down{background:#8C8C92}
.ax-kb__k--s{width:2.6em;background:#3E3E43}
.ax-kb__k--s svg{width:1.15em;height:1.15em}
.ax-kb.is-up [data-k="shift"]{background:#E8E8EC;color:#0D0D0F}
.ax-kb__k--n span{font-size:.82em}
.ax-kb__k--sp{flex:1;max-width:11em}
.ax-kb__k--sp span{font-size:.82em}
.ax-kb__k--r{width:4.4em}
.ax-kb__foot{display:flex;justify-content:space-between;padding:.75em 1.4em 0;color:#A6A6AB}
.ax-kb__foot svg{width:1.45em;height:1.45em}
.ax-kb__pop{position:absolute;left:0;top:0;width:2.9em;height:3.3em;margin-left:-1.45em;border-radius:.55em;background:#8C8C92;color:#fff;display:grid;place-items:center;opacity:0;pointer-events:none;box-shadow:0 .3em .7em rgba(0,0,0,.45);z-index:3}
.ax-kb__pop span{font-size:1.8em;line-height:1}
.ax-kb__pop.is-on{opacity:1}

/* Karta goscia: niedostepne, nowe danie, wstrzymane zamowienia, tlumaczenie */
.ax-ci{position:relative;display:block}
.ax-ci em{position:absolute;left:.4em;right:.4em;bottom:.45em;font-style:normal;font-size:.62em;font-weight:680;text-align:center;padding:.45em .3em;border-radius:99em;background:rgba(255,255,255,.95);color:#0D0D0F;box-shadow:0 .2em .6em -.2em rgba(0,0,0,.35);opacity:0;transform:translateY(.4em);transition:opacity .35s,transform .45s var(--ease-out)}
.ax__gst .gx__card img{transition:filter .5s,opacity .5s}
.ax__gst .gx__card b,.ax__gst .gx__row .mono{transition:color .4s}
.gx__card.ax-na img{filter:grayscale(1);opacity:.5}
.gx__card.ax-na em{opacity:1;transform:none}
.gx__card.ax-na b,.gx__card.ax-na .gx__row .mono{color:#A0A0A6}
.gx .gx__card.ax-na .gm__add,.gx.is-paused .gm__add{background:#E6E6EA;color:#B4B4BA}
.gx .gx__card.ax-flash{box-shadow:0 0 0 1.5px var(--cobalt),0 0 1.4em -.2em rgba(46,75,255,.6)}
.ax-new{display:none}
.ax-new.is-on{display:flex;animation:pop .6s var(--ease-out) both}
.ax-pz{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-out)}
.ax-pz>div{overflow:hidden;min-height:0}
.gx.is-paused .ax-pz{grid-template-rows:1fr}
.ax-pz p{margin:.75em .8em 0;padding:.6em .8em;border-radius:.85em;background:#FFF4DF;color:#6B4400;display:flex;flex-direction:column;gap:.15em}
.ax-pz b{font-size:.7em;font-weight:680}
.ax-pz small{font-size:.62em;color:#8A5A00}
.ax__gst .gx__tabs b{font-size:.58em}
.ax__gst .gx__card small{font-size:.6em}
.ax__gst .gx__name small{font-size:.6em}
.ax-tr{transition:opacity .19s,filter .19s}
.ax-tr.is-out{opacity:0;filter:blur(2px)}

/* Tablet i telefon */
@media (max-width:999px){
  .ax{grid-template-columns:1fr;gap:18px;margin-top:40px}
  .ax__list{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
}
@media (max-width:640px){
  .ax{margin-top:32px;gap:14px}
  .ax__stage{aspect-ratio:2/3;border-radius:20px}
  .ax__list{grid-template-columns:1fr;gap:0}
  .ax__q{padding:11px 0 11px 18px;min-height:44px}
  .ax__q b{font-size:15.5px}
  .ax__q span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ax__bar{top:12px;bottom:12px}
  .ax__stage .scn__pause{bottom:10px;right:10px}
}
@media (prefers-reduced-motion:reduce){
  .ax-tap{display:none}
}