/* ==========================================================================
   VELMO - Telegram UI kit, redrawn in HTML/CSS

   Used by the live demo, the feature slider and the "how it works" mockups.
   Proportions follow Telegram for iOS (day theme) on a 393pt-wide iPhone,
   scaled into the handset. Everything inside .phone is sized in em, and the
   handset sets its own font-size from --pw, so the whole device scales as one
   object: change --pw and nothing inside needs touching.

   The chat runs in the system UI face, as Telegram does: SF on Apple
   devices, Segoe UI on Windows, Roboto on Android.
   ========================================================================== */

:root{
  --tg-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --tg-accent:#007AFF;
  --tg-in:#ffffff;
  --tg-out:#E6FFD2;
  --tg-out-meta:#4FAE4E;
  --tg-meta:rgba(0,0,0,.42);
  --tg-kb:rgba(52,84,48,.34);
  --tg-svc:rgba(42,74,44,.34);
  /* Telegram's default "gradient" wallpaper, the four colours it ships with */
  --tg-wall:
    radial-gradient(62% 48% at 18% 12%,#dbddbb 0%,rgba(219,221,187,0) 100%),
    radial-gradient(58% 46% at 90% 32%,#88b884 0%,rgba(136,184,132,0) 100%),
    radial-gradient(62% 52% at 16% 82%,#6ba587 0%,rgba(107,165,135,0) 100%),
    radial-gradient(64% 50% at 84% 96%,#d5d88d 0%,rgba(213,216,141,0) 100%),
    linear-gradient(#b3c79f,#a5c294);
}

/* ---------------------------------------------------------------- device */
.phone{--pw:336px;position:relative;width:var(--pw);aspect-ratio:336/705;font-size:calc(var(--pw) * .047619);
  padding:.625em;border-radius:3.4em;background:#0c0c0e;
  box-shadow:inset 0 0 0 .09em #3a3a3f,inset 0 0 0 .22em #0c0c0e,inset 0 0 0 .28em #1f1f23,
    0 2.4em 4em -1.6em rgba(40,20,90,.34),0 .6em 1.4em -.6em rgba(0,0,0,.28);
  contain:layout paint;flex:none;}
/* side keys */
.phone::before,.phone::after{content:"";position:absolute;width:.22em;border-radius:.2em;background:#232327;}
.phone::before{left:-.18em;top:7.4em;height:2.2em;box-shadow:0 3.2em 0 0 #232327,0 6em 0 0 #232327;}
.phone::after{right:-.18em;top:10.4em;height:4.2em;}
.phone__screen{position:relative;height:100%;border-radius:2.8em;overflow:hidden;background:#111;isolation:isolate;}
.phone__island{position:absolute;z-index:30;top:.62em;left:50%;width:6.1em;height:1.8em;transform:translateX(-50%);
  border-radius:1em;background:#000;}

/* ---------------------------------------------------------------- app shell */
.tg{position:absolute;inset:0;display:flex;flex-direction:column;font-family:var(--tg-font);letter-spacing:0;color:#000;
  -webkit-font-smoothing:antialiased;}
.tg-status{position:relative;z-index:20;flex:none;height:2.95em;display:flex;align-items:center;justify-content:space-between;
  padding:.5em 1.7em 0 2.1em;background:rgba(247,247,247,.94);font-size:1em;}
.tg-status b{font-size:.94em;font-weight:600;letter-spacing:-.01em;}
.tg-sys{display:flex;align-items:center;gap:.32em;}
.tg-sys svg{height:.72em;width:auto;}
.tg-sys .bat{height:.78em;}

.tg-head{position:relative;z-index:20;flex:none;height:2.8em;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 .6em;background:rgba(247,247,247,.94);border-bottom:.05em solid rgba(0,0,0,.14);}
.tg-back{display:flex;align-items:center;gap:.18em;color:var(--tg-accent);font-size:.98em;}
.tg-back svg{width:.62em;height:1.05em;}
.tg-back i{font-style:normal;min-width:1.35em;height:1.35em;padding:0 .38em;border-radius:1em;background:var(--tg-accent);color:#fff;
  font-size:.72em;font-weight:600;display:grid;place-items:center;margin-left:.2em;}
.tg-title{display:flex;flex-direction:column;align-items:center;line-height:1.15;}
.tg-title b{font-size:.98em;font-weight:600;letter-spacing:-.01em;}
.tg-title small{font-size:.76em;color:#8e8e93;display:flex;align-items:baseline;gap:.1em;}
.tg-title small.is-typing{color:var(--tg-accent);}
.tg-dots{display:inline-flex;gap:.14em;margin-left:.15em;}
.tg-dots i{width:.26em;height:.26em;border-radius:50%;background:currentColor;animation:tgDot 1.2s infinite ease-in-out;}
.tg-dots i:nth-child(2){animation-delay:.15s;}
.tg-dots i:nth-child(3){animation-delay:.3s;}
@keyframes tgDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-.12em)}}
.tg-ava{justify-self:end;width:2.2em;height:2.2em;border-radius:50%;overflow:hidden;flex:none;}
.tg-ava svg{width:100%;height:100%;}

/* ---------------------------------------------------------------- chat body */
.tg-body{position:relative;flex:1;min-height:0;background:var(--tg-wall);}
.tg-body::before{content:"";position:absolute;inset:0;opacity:.1;mix-blend-mode:multiply;pointer-events:none;
  background-size:9em 9em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23304a2c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 22c0-4 5-6 7-2 2-4 7-2 7 2 0 5-7 9-7 9s-7-4-7-9z'/%3E%3Ccircle cx='86' cy='18' r='6'/%3E%3Cpath d='M58 52l3 7 7 1-5 5 1 7-6-4-6 4 1-7-5-5 7-1z'/%3E%3Cpath d='M12 78l14-6-4 15-3-5z'/%3E%3Cpath d='M92 70c6 0 6 8 12 8'/%3E%3Cpath d='M80 100h18M89 91v18'/%3E%3Crect x='40' y='92' width='14' height='14' rx='3'/%3E%3Cpath d='M104 40l6 6M110 40l-6 6'/%3E%3C/svg%3E");}
.tg-log{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:.34em;
  padding:.8em .55em .7em;scrollbar-width:none;overscroll-behavior:contain;}
.tg-log::-webkit-scrollbar{display:none;}
.tg-log>:first-child{margin-top:auto;}

/* ---------------------------------------------------------------- service pill */
.svc{align-self:center;max-width:86%;margin:.3em 0;padding:.22em .62em;border-radius:1em;background:var(--tg-svc);color:#fff;
  font-size:.78em;font-weight:500;line-height:1.35;text-align:center;}

/* ---------------------------------------------------------------- bubbles */
.m{display:flex;flex-direction:column;max-width:84%;animation:msgIn .34s var(--ease,cubic-bezier(.22,1,.36,1)) both;}
.m--in{align-self:flex-start;}
.m--out{align-self:flex-end;align-items:flex-end;}
@keyframes msgIn{from{opacity:0;transform:translateY(.5em) scale(.98)}}
.b{position:relative;padding:.4em .66em .42em .7em;border-radius:1.05em;font-size:.86em;line-height:1.32;background:var(--tg-in);
  word-wrap:break-word;box-shadow:0 .06em .06em rgba(0,0,0,.08);}
.m--out .b{background:var(--tg-out);}
/* the tail: last bubble of a group */
.m--in.tail .b{border-bottom-left-radius:.3em;}
.m--out.tail .b{border-bottom-right-radius:.3em;}
.m.tail .b::after{content:"";position:absolute;bottom:0;width:.55em;height:.9em;background-repeat:no-repeat;background-size:100% 100%;}
.m--in.tail .b::after{left:-.42em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15'%3E%3Cpath fill='%23fff' d='M9 0v15H0c4-1 7-4 7-9V0z'/%3E%3C/svg%3E");}
.m--out.tail .b::after{right:-.42em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15'%3E%3Cpath fill='%23E6FFD2' d='M0 0v15h9C5 14 2 11 2 6V0z'/%3E%3C/svg%3E");}
.b strong{font-weight:600;}
.b .ln{display:block;}
.b .gap{display:block;height:.45em;}
.b .dim{color:rgba(0,0,0,.52);}
.b .fine{display:block;margin-top:.3em;font-size:.9em;color:rgba(0,0,0,.55);}
/* the timestamp floats into the last line, like Telegram's */
.tm{float:right;position:relative;top:.42em;margin-left:.6em;display:inline-flex;align-items:center;gap:.2em;
  font-size:.74em;line-height:1;color:var(--tg-meta);white-space:nowrap;}
.m--out .tm{color:var(--tg-out-meta);}
.tm svg{width:1.3em;height:.8em;}

/* rich request card: a bot message with a bold heading and labelled lines */
.b--card{min-width:14.5em;}
.b--card .hd{display:block;font-weight:600;margin-bottom:.3em;}
.b--card .row{display:flex;gap:.35em;}
.b--card .row em{font-style:normal;flex:none;width:1.25em;text-align:center;}
.b--card .row .rl{color:rgba(0,0,0,.5);font-variant-numeric:tabular-nums;}
.b--card .foot{display:block;margin-top:.35em;padding-top:.35em;border-top:.06em solid rgba(0,0,0,.08);font-size:.9em;color:rgba(0,0,0,.5);}

/* contact bubble */
.b--contact{display:flex;align-items:center;gap:.6em;min-width:12.5em;padding:.55em .7em .6em .6em;}
.b--contact .av{width:2.6em;height:2.6em;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:600;font-size:.9em;
  background:linear-gradient(160deg,#ff9a6b,#f2685b);}
.b--contact .who{display:flex;flex-direction:column;line-height:1.25;}
.b--contact .who b{font-weight:600;}
.b--contact .who span{color:var(--tg-out-meta);font-size:.92em;}
.b--contact .tm{position:absolute;right:.6em;bottom:.5em;top:auto;float:none;}

/* photo bubble: a picture without a file - gradients do the work */
.b--photo{padding:.18em;overflow:hidden;}
.ph{position:relative;width:12.4em;height:9.2em;border-radius:.9em;overflow:hidden;}
.b--photo .tm{position:absolute;right:.55em;bottom:.5em;top:auto;float:none;padding:.22em .4em;border-radius:.7em;background:rgba(0,0,0,.35);color:#fff;}
.b--photo.has-cap{padding-bottom:.42em;}
.b--photo .cap{display:block;padding:.35em .5em 0;}
.b--photo.has-cap .tm{position:relative;float:right;right:auto;bottom:auto;top:.42em;padding:0;background:none;color:var(--tg-out-meta);}
.ph i{position:absolute;display:block;}
/* nails */
.ph--nails{background:radial-gradient(90% 80% at 30% 20%,#fbe7df 0%,#f2cfc4 45%,#d9a898 100%);}
.ph--nails i{bottom:-1.2em;width:1.6em;height:4.6em;border-radius:.8em .8em .4em .4em;background:linear-gradient(#f7d7d0,#eab6aa);
  box-shadow:inset 0 .5em 0 -.02em #f4c9c0,inset 0 1.8em 0 -.6em rgba(255,255,255,.35);}
.ph--nails i:nth-child(1){left:1.6em;height:4em;transform:rotate(-14deg);}
.ph--nails i:nth-child(2){left:3.9em;height:5.2em;transform:rotate(-5deg);}
.ph--nails i:nth-child(3){left:6.2em;height:5.5em;transform:rotate(3deg);}
.ph--nails i:nth-child(4){left:8.4em;height:4.9em;transform:rotate(10deg);}
/* barber */
.ph--barber{background:radial-gradient(80% 70% at 50% 30%,#5b5b60 0%,#2d2d31 70%,#1d1d20 100%);}
.ph--barber i:nth-child(1){left:3.6em;top:1.6em;width:5.2em;height:6.4em;border-radius:50% 50% 45% 45%;background:linear-gradient(#caa585,#a47c5c);}
.ph--barber i:nth-child(2){left:3.3em;top:1.1em;width:5.8em;height:2.6em;border-radius:3em 3em 1em 1em;background:#151517;}
.ph--barber i:nth-child(3){left:3.9em;top:5.6em;width:4.6em;height:2.8em;border-radius:0 0 2.4em 2.4em;background:#2a221c;opacity:.9;}
.ph--barber i:nth-child(4){display:none;}
/* cake */
.ph--cake{background:radial-gradient(90% 80% at 50% 10%,#fff3f5 0%,#f8d9df 60%,#eebcc6 100%);}
.ph--cake i:nth-child(1){left:3em;bottom:1.2em;width:6.4em;height:3.6em;border-radius:.5em .5em .9em .9em;background:linear-gradient(#fffaf5,#f4e4d6);}
.ph--cake i:nth-child(2){left:3em;bottom:4.4em;width:6.4em;height:.9em;border-radius:.5em;background:#f39bb0;}
.ph--cake i:nth-child(3){left:5.9em;bottom:5em;width:.35em;height:1.4em;border-radius:.2em;background:#7c4ff0;}
.ph--cake i:nth-child(4){left:1.8em;bottom:.7em;width:8.8em;height:.6em;border-radius:1em;background:#e8d2c4;}
/* tutor */
.ph--study{background:linear-gradient(160deg,#e9f0ff,#cfdcf7);}
.ph--study i:nth-child(1){left:2em;top:1.4em;width:8.4em;height:6.4em;border-radius:.4em;background:#fff;box-shadow:0 .2em .6em rgba(40,60,120,.18);}
.ph--study i:nth-child(2){left:2.8em;top:2.4em;width:5.8em;height:.35em;border-radius:.2em;background:#7c8db8;box-shadow:0 1em 0 #b7c3de,0 2em 0 #b7c3de,0 3em 0 #b7c3de;}
.ph--study i:nth-child(3){left:7.6em;top:4.4em;width:2em;height:2em;border-radius:50%;border:.25em solid #7c4ff0;}
.ph--study i:nth-child(4){display:none;}
/* photographer */
.ph--peaks{background:linear-gradient(#ffd7a8 0%,#f6a5a0 45%,#8a7fc2 100%);}
.ph--peaks i:nth-child(1){left:-1em;bottom:-2.6em;width:9em;height:9em;transform:rotate(45deg);background:#4b3f7a;border-radius:.6em;}
.ph--peaks i:nth-child(2){left:5.4em;bottom:-3.4em;width:9em;height:9em;transform:rotate(45deg);background:#352c5c;border-radius:.6em;}
.ph--peaks i:nth-child(3){left:7.8em;top:1.4em;width:1.8em;height:1.8em;border-radius:50%;background:#fff3d6;}
.ph--peaks i:nth-child(4){display:none;}

/* ---------------------------------------------------------------- inline keyboard */
.kb{display:flex;flex-direction:column;gap:.2em;margin-top:.2em;width:100%;min-width:14.5em;}
.kb__row{display:flex;gap:.2em;}
.kb__btn{position:relative;flex:1 1 0;min-width:0;min-height:2.15em;padding:.3em .4em;border-radius:.5em;background:var(--tg-kb);color:#fff;
  font-family:var(--tg-font);font-size:.82em;font-weight:500;line-height:1.2;text-align:center;
  transition:background-color .15s,transform .15s,opacity .2s;-webkit-tap-highlight-color:transparent;}
.kb__row:last-child .kb__btn:first-child{border-bottom-left-radius:1.05em;}
.kb__row:last-child .kb__btn:last-child{border-bottom-right-radius:1.05em;}
.kb__btn:hover{background:rgba(40,70,38,.46);}
.kb__btn:active{transform:scale(.97);}
.kb__btn.is-chosen{background:rgba(255,255,255,.92);color:#2b5a2a;}
.kb.is-spent .kb__btn:not(.is-chosen){opacity:.45;}
.kb.is-spent .kb__btn{pointer-events:none;}
.kb__btn.is-off{opacity:.38;pointer-events:none;}
.kb__btn.is-label{background:transparent;pointer-events:none;font-size:.72em;min-height:1.6em;opacity:.9;}
.kb__btn.is-today{box-shadow:inset 0 0 0 .1em rgba(255,255,255,.75);}
.kb--cal .kb__btn{min-height:1.9em;font-size:.78em;padding:.2em;}
.kb--cal .kb__row:first-child .kb__btn{font-weight:600;}

/* the "tap here" hint - where the story goes if nobody taps */
.is-hint{z-index:1;}
.is-hint::after{content:"";position:absolute;inset:-.14em;border-radius:inherit;border:.14em solid rgba(255,255,255,.95);
  animation:tgHint 1.4s ease-out infinite;pointer-events:none;}
@keyframes tgHint{0%{opacity:.9;transform:scale(.96)}70%{opacity:0;transform:scale(1.12)}100%{opacity:0}}
.is-wiggle{animation:tgWig .4s;}
@keyframes tgWig{25%{transform:translateX(-.2em)}75%{transform:translateX(.2em)}}

/* ---------------------------------------------------------------- bot "about" card in an empty chat */
.tg-about{align-self:center;width:84%;margin:auto 0 .8em;padding:.8em .9em .9em;border-radius:1em;background:rgba(255,255,255,.92);
  font-size:.84em;line-height:1.38;text-align:center;animation:msgIn .4s both;}
.tg-about b{display:block;font-weight:600;margin-bottom:.35em;}
.tg-about span{color:rgba(0,0,0,.72);}

/* ---------------------------------------------------------------- bottom bars */
.tg-foot{position:relative;z-index:20;flex:none;background:rgba(247,247,247,.96);border-top:.05em solid rgba(0,0,0,.12);}
.tg-compose{display:flex;align-items:center;gap:.55em;height:3.1em;padding:0 .7em;}
.tg-compose svg{width:1.45em;height:1.45em;color:#8e8e93;flex:none;}
.tg-field{flex:1;height:2.15em;border-radius:1.1em;border:.06em solid rgba(0,0,0,.14);background:#fff;display:flex;align-items:center;
  padding:0 .8em;font-size:.86em;color:#a2a2a7;}
.tg-menu{display:inline-flex;align-items:center;gap:.3em;height:2em;padding:0 .7em;border-radius:1em;background:var(--tg-accent);color:#fff;
  font-size:.78em;font-weight:600;flex:none;}
.tg-menu svg{width:1em;height:1em;color:#fff;}
.tg-home{height:1.6em;display:grid;place-items:center;}
.tg-home::before{content:"";width:8.2em;height:.3em;border-radius:1em;background:#111;}

.tg-start{display:flex;align-items:center;justify-content:center;width:100%;height:3.1em;color:var(--tg-accent);
  font-family:var(--tg-font);font-size:.94em;font-weight:600;letter-spacing:.02em;text-transform:uppercase;position:relative;}
.tg-start.is-hint::after{inset:.35em 20%;border-radius:.8em;border-color:rgba(0,122,255,.55);}

.tg-reply{padding:.45em .4em .2em;background:#d3d6dc;}
.tg-reply__btn{position:relative;width:100%;height:2.7em;border-radius:.5em;background:#fff;box-shadow:0 .07em 0 rgba(0,0,0,.28);
  font-family:var(--tg-font);font-size:.88em;color:#000;}
.tg-reply__btn.is-hint::after{border-color:rgba(0,122,255,.6);}

/* ---------------------------------------------------------------- in-app notification */
.tg-banner{position:absolute;z-index:40;top:3.1em;left:.5em;right:.5em;display:flex;align-items:center;gap:.6em;padding:.6em .7em;
  border-radius:1.2em;background:rgba(250,250,252,.96);box-shadow:0 .6em 1.6em -.4em rgba(0,0,0,.3);
  transform:translateY(-140%);opacity:0;transition:transform .5s var(--ease,cubic-bezier(.22,1,.36,1)),opacity .3s;}
.tg-banner.is-in{transform:none;opacity:1;}
.tg-banner .av{width:2.3em;height:2.3em;border-radius:50%;overflow:hidden;flex:none;}
.tg-banner .av svg{width:100%;height:100%;}
.tg-banner .tx{flex:1;min-width:0;line-height:1.25;}
.tg-banner .tx b{display:flex;justify-content:space-between;font-size:.8em;font-weight:600;}
.tg-banner .tx b small{font-weight:400;color:#8e8e93;}
.tg-banner .tx span{display:block;font-size:.8em;color:#222;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* screen-to-screen hand-off between the client's phone and the owner's */
.tg.is-swapping{animation:tgSwap .56s var(--ease-io,ease) both;}
@keyframes tgSwap{0%{opacity:1;transform:none}45%{opacity:0;transform:translateX(-6%) scale(.985)}55%{opacity:0;transform:translateX(6%) scale(.985)}100%{opacity:1;transform:none}}

.tg.no-anim .m,.tg.no-anim .tg-about{animation:none;}

@media (prefers-reduced-motion:reduce){
  .m,.tg-about{animation:none;}
  .is-hint::after{animation:none;opacity:.8;}
}