/* Own-bot introduction: the visitor's future bot in a Telegram window, driven by the address field.
   Telegram Web A light theme metrics, with a custom wallpaper and accent in the brand colours.
   The commission section below keeps its existing layout. */
.partnership-layout{align-items:stretch}
.mirror-intro{grid-column:1;grid-row:1;align-self:end;min-width:0;padding:0}
.mirror-intro h2{max-width:none;font-size:clamp(52px,5.4vw,80px);line-height:1.02;letter-spacing:-.055em}
.mirror-intro h2 span{color:var(--brand)}
.mirror-intro .mirror-lead{max-width:470px;margin-top:24px;font-size:20px;line-height:1.5}

/* Address field. */
.mirror-claim{grid-column:1;grid-row:2;align-self:start;min-width:0;max-width:600px;--claim-muted:#664f57}
.mirror-claim-label{display:block;margin-bottom:11px;font-size:14px;font-weight:500;line-height:1.3;color:var(--claim-muted)}
.mirror-claim-bar{display:flex;align-items:stretch;gap:6px;padding:6px;border:1px solid #d3b9bc;border-radius:18px;background:#fffaf4;box-shadow:0 1px 0 #fff inset,0 18px 34px -26px #5b1d3366;transition:border-color .2s,box-shadow .2s}
.mirror-claim-bar:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px #902b461f,0 18px 34px -26px #5b1d3366}
.mirror-claim[data-own-bot-state=error] .mirror-claim-bar{border-color:#b8475f}
.mirror-claim-field{position:relative;display:flex;align-items:center;flex:1;min-width:0;padding-left:16px;cursor:text}
.mirror-claim-host{flex-shrink:0;font-size:21px;line-height:1;letter-spacing:-.02em;color:#7f6870}
.mirror-claim-input{flex:1;min-width:0;height:58px;padding:0 36px 0 1px;border:0;border-radius:0;background:transparent;color:var(--ink);font:500 21px/1 var(--font);letter-spacing:-.02em;outline:0;-webkit-appearance:none;appearance:none}
.mirror-claim-input::placeholder{color:#7f6870;opacity:1}
.mirror-claim-field:has(.mirror-claim-input:focus-visible){outline:2px solid var(--brand);outline-offset:4px;border-radius:12px}
.mirror-claim-bar:focus-within .mirror-claim-field{outline:0}
.mirror-claim-mark{position:absolute;right:10px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:#5f9e5a;opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.25,1.3);pointer-events:none}
.mirror-claim-mark::after{content:'';position:absolute;left:7px;top:6px;width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.mirror-claim[data-own-bot-state=ok] .mirror-claim-mark{opacity:1;transform:none}
.mirror-claim .mirror-create{flex-shrink:0;min-height:58px;margin:0;gap:22px;padding:15px 18px 15px 22px;border-radius:13px;font-size:17px}
.mirror-claim .mirror-create:hover{transform:none;box-shadow:none}
.mirror-claim-hint{display:flex;align-items:flex-start;gap:7px;min-height:21px;margin:12px 0 0 2px;font-size:14px;line-height:1.5;color:var(--claim-muted);transition:color .2s}
.mirror-claim-hint::before{content:'';flex:0 0 6px;width:6px;height:6px;margin-top:calc(.75em - 3px);border-radius:50%;background:#c9b1b6;transition:background .2s}
.mirror-claim[data-own-bot-state=ok] .mirror-claim-hint{color:#3f6b3b}
.mirror-claim[data-own-bot-state=ok] .mirror-claim-hint::before{background:#5f9e5a}
.mirror-claim[data-own-bot-state=error] .mirror-claim-hint{color:#a3334d}
.mirror-claim[data-own-bot-state=error] .mirror-claim-hint::before{background:#b8475f}
.mirror-claim-note{margin:26px 0 0;padding:18px 0 0 2px;border-top:1px solid #d6c0c1;font-size:14px;line-height:1.55;color:var(--claim-muted)}

/* Telegram window. */
.mirror-tg{grid-column:2;grid-row:1/3;align-self:center;width:100%;max-width:580px;justify-self:end;
 --tg-text:#000;--tg-secondary:#707579;--tg-accent:#902b46;--tg-shadow:0 1px 2px #10232f26;isolation:isolate}
.mirror-identity{display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#fff;color:var(--tg-text);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',Roboto,'Helvetica Neue',sans-serif;line-height:1.3125;letter-spacing:0;-webkit-font-smoothing:antialiased;box-shadow:0 0 0 1px #4b142c12,0 40px 70px -40px #4b142c80,0 14px 30px -18px #4b142c40}
.mirror-tg-header{position:relative;z-index:1;display:flex;align-items:center;gap:12px;height:56px;padding:0 10px 0 16px;background:#fff;box-shadow:0 1px 0 #0000000f}
.mirror-tg-avatar{flex:0 0 40px;width:40px;height:40px;border-radius:50%;object-fit:cover}
.mirror-tg-title{display:flex;flex-direction:column;min-width:0}
.mirror-tg-title strong{font-size:16px;font-weight:600;line-height:22px}
.mirror-tg-status{overflow:hidden;font-size:14px;line-height:18px;color:var(--tg-secondary);white-space:nowrap;text-overflow:ellipsis}
.mirror-tg-tools{display:flex;margin-left:auto;color:var(--tg-secondary)}
.mirror-tg-tools svg{box-sizing:content-box;padding:8px}
.mirror-tg-chat{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:488px;
 background:radial-gradient(70% 60% at 6% 4%,#f7e3d3 0,#f7e3d300 100%),radial-gradient(60% 55% at 98% 22%,#e9b9c2 0,#e9b9c200 100%),radial-gradient(70% 60% at 14% 100%,#dca4b4 0,#dca4b400 100%),radial-gradient(60% 55% at 92% 96%,#f2d6c4 0,#f2d6c400 100%),#ebc8c6}
.mirror-tg-chat::before{content:'';position:absolute;z-index:-1;inset:0;background:#5a1830;opacity:.13;mask:url('./assets/telegram-web/pattern.svg') 0 0/420px auto repeat;-webkit-mask:url('./assets/telegram-web/pattern.svg') 0 0/420px auto repeat;pointer-events:none}
.mirror-tg-about{width:min(calc(100% - 32px),340px);margin:auto;padding:9px 14px 12px;border-radius:15px;background:#fff;box-shadow:var(--tg-shadow)}
.mirror-tg-about strong{display:block;margin-bottom:4px;font-size:16px;font-weight:600;line-height:21px}
.mirror-tg-about p{font-size:15px;line-height:20px;color:var(--tg-text)}
.mirror-tg-footer{padding:8px 16px 16px}
.mirror-tg-start{display:grid;place-items:center;height:56px;border-radius:15px;background:#fff;color:var(--tg-accent);font-size:16px;font-weight:600;box-shadow:var(--tg-shadow)}
[data-own-bot-handle]{transition:color .25s}
.mirror-tg[data-own-bot-source=typed] [data-own-bot-handle]{color:var(--tg-accent)}
.mirror-tg-back{display:none;flex-shrink:0;color:var(--tg-secondary)}
.mirror-tg-status{border-radius:5px;margin-left:-3px;padding-left:3px;padding-right:3px}
.mirror-tg.is-claimed .mirror-tg-status{animation:mirror-tg-claimed 1.4s ease-out}
@keyframes mirror-tg-claimed{0%{background:#902b4600}18%{background:#902b4624}100%{background:#902b4600}}

.mirror-tg.is-armed:not(.is-revealed) .mirror-identity{opacity:0;transform:translateY(26px)}
.mirror-tg.is-revealed .mirror-identity{animation:mirror-tg-rise .9s cubic-bezier(.16,1,.3,1) both}
.mirror-tg.is-revealed .mirror-tg-about{animation:mirror-tg-pop .7s .3s cubic-bezier(.18,.9,.25,1.05) both}
@keyframes mirror-tg-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes mirror-tg-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* Link bot, as a Telegram chat row. */
.mirror-finder{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin-top:22px;padding:14px 22px 14px 14px;border:1px solid #d7c0c1;border-radius:18px;background:#fffaf4;color:var(--ink);text-decoration:none;transition:border-color .2s,background .2s,box-shadow .2s}
.mirror-finder-icon{display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;border-radius:50%;background:linear-gradient(160deg,#b8405e,#7a1f3e)}
.mirror-finder-icon img{filter:brightness(0) invert(1)}
.mirror-finder-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.mirror-finder-copy strong{font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.015em}
.mirror-finder-copy>span{font-size:15px;line-height:1.45;color:var(--muted)}
.mirror-finder-go{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto;padding-left:20px;color:var(--brand);font-size:15px;font-weight:500;white-space:nowrap}
.mirror-finder-arrow{padding:0;font-size:24px;line-height:1;transition:transform .2s}
.mirror-finder:hover{border-color:#c9a3ad;background:#fff;box-shadow:0 10px 24px -18px #67233866}
.mirror-finder:hover .mirror-finder-arrow{transform:translate(2px,-2px)}

@media(max-width:1240px){
 /* Narrow columns stack the field, its hint and the button. */
 .mirror-claim{display:flex;flex-direction:column;align-items:flex-start}
 .mirror-claim-label{order:0}
 .mirror-claim-bar{display:contents}
 .mirror-claim-field{order:1;align-self:stretch;flex:none;padding-left:16px;border:1px solid #d3b9bc;border-radius:16px;background:#fffaf4;box-shadow:0 1px 0 #fff inset,0 18px 34px -26px #5b1d3366;transition:border-color .2s,box-shadow .2s}
 .mirror-claim-field:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px #902b461f}
 .mirror-claim-field:has(.mirror-claim-input:focus-visible){outline:0;border-radius:16px}
 .mirror-claim[data-own-bot-state=error] .mirror-claim-field{border-color:#b8475f}
 /* Two lines reserved, so a wrapping hint does not push the button while typing. */
 .mirror-claim-hint{order:2;min-height:42px}
 .mirror-claim .mirror-create{order:3;margin-top:22px;min-height:60px;padding-inline:22px 20px}
 .mirror-claim-note{order:4}
}
@media(max-width:1100px) and (min-width:761px){
 .mirror-intro h2{font-size:clamp(44px,5.4vw,59px)}
 .mirror-intro .mirror-lead{font-size:18px}
 .mirror-claim-host,.mirror-claim-input{font-size:18px}
 .mirror-tg-chat{min-height:480px}
}
@media(max-width:760px){
 .mirror-intro{grid-row:auto}
 .mirror-intro h2{font-size:clamp(48px,10.5vw,70px)}
 .mirror-intro .mirror-lead{max-width:460px;margin-top:20px;font-size:18px}
 .mirror-tg{grid-column:1;grid-row:auto;justify-self:stretch;max-width:none;margin-top:4px}
 .mirror-identity{border-radius:14px}
 .mirror-tg-header{padding-left:8px;gap:10px}
 .mirror-tg-back{display:block;margin-right:-2px}
 .mirror-tg-chat{min-height:0}
 .mirror-tg-about{margin:56px auto 52px}
 .mirror-tg-footer{padding:6px 10px 10px}
 .mirror-tg-start{height:50px;border-radius:13px}
 .mirror-claim{grid-column:1;grid-row:auto;max-width:none}
 .mirror-claim-field{padding-left:14px}
 .mirror-claim-host,.mirror-claim-input{font-size:18px}
 .mirror-claim-input{height:52px}
 .mirror-claim .mirror-create{align-self:stretch;width:auto;margin-top:20px;min-height:58px}
 .mirror-claim-note{margin-top:20px;padding-top:16px}
 .mirror-finder{align-items:flex-start;gap:13px;margin-top:8px;padding:14px 16px 16px 14px}
 .mirror-finder-icon{flex-basis:46px;width:46px;height:46px}.mirror-finder-icon img{width:21px;height:21px}
 .mirror-finder-copy strong{font-size:16px}
 .mirror-finder-copy>span{font-size:14px}
 .mirror-finder-go{padding-left:4px}.mirror-finder-handle{display:none}
}
@media(max-width:380px){
 .mirror-intro h2{font-size:43px}.mirror-intro .mirror-lead{font-size:17px}
 .mirror-tg-tools svg:first-child{display:none}
 .mirror-tg-about{width:calc(100% - 24px);padding:8px 12px 11px;margin-block:40px 38px}
 .mirror-tg-about p{font-size:14px;line-height:19px}
 .mirror-claim-host,.mirror-claim-input{font-size:17px}
 .mirror-finder-icon{display:none}
}
@media(prefers-reduced-motion:reduce){
 .mirror-visual .mirror-identity{animation:none!important;opacity:1!important;transform:none!important}
 .mirror-tg-about,.mirror-tg-status{animation:none!important}
 .mirror-claim-bar,.mirror-claim-field,.mirror-claim-mark,.mirror-claim-hint,.mirror-claim-hint::before,[data-own-bot-handle]{transition:none!important}
 .mirror-finder,.mirror-finder-arrow{transition:none!important;transform:none!important}
}
