/* Touch interface for the phone model. */
#experience.phone-mode{min-height:0}
.phone-mode .computer .desktop{border-radius:9% / 4.4%}
.phone-mode .menubar{height:40px;padding:10px 15px 0;background:transparent;font-size:12px}
.phone-mode .menubar>strong,.phone-mode .menubar>b,.phone-mode .menu-muted{display:none}
.phone-mode .menu-right{width:100%;justify-content:flex-end;gap:9px}
.phone-mode #time{margin-right:auto;order:-1;font-size:12px}
.phone-mode .desktop-welcome{top:19%;left:8%;right:8%}
.phone-mode .desktop-welcome>span{font-size:13px}
.phone-mode .desktop-welcome h2{font-size:clamp(23px,6vw,32px);line-height:1.15}
.phone-mode .desktop-icons{top:48%;left:7%;right:7%;flex-direction:row;justify-content:center;gap:26px}
.phone-mode .app-icon{font-size:13px;gap:10px;min-width:74px;min-height:90px}
.phone-mode .notes-icon,.phone-mode .telegram-icon{width:54px;height:54px;border-radius:13px}
.phone-mode .telegram-icon svg{width:46px;height:46px}
.phone-mode .notes-icon{padding-top:23px}.phone-mode .notes-icon i{margin:6px 9px}
.phone-mode .dock{display:none}
.phone-home{display:none}
.phone-mode .phone-home{display:flex;position:absolute;z-index:9;bottom:3px;left:25%;width:50%;height:34px;align-items:center;justify-content:center;border:0;background:transparent;padding:0}
.phone-home:after{content:'';height:4px;width:85px;background:#fff;border-radius:5px;box-shadow:0 0 2px #0004}
.phone-mode:has(.app-window:not([hidden])) .phone-home:after{background:#434b53}
.phone-mode .app-window,.phone-mode .telegram-window,.phone-mode .app-window.expanded{inset:40px 0 0;border:0;border-radius:0;box-shadow:none;padding-bottom:35px}
.phone-mode .window-bar{height:46px;position:relative;padding:0 12px;font-size:14px;background:#f5f3ef}
.phone-mode .traffic{width:48px}
.phone-mode .traffic .close{width:44px;height:44px;border-radius:0;background:transparent;color:transparent;position:relative}
.phone-mode .traffic .close:after{content:'‹';position:absolute;inset:0;color:#238abc;font-size:35px;line-height:40px}
.phone-mode .traffic .minimize,.phone-mode .traffic .maximize{display:none}
.phone-mode .notes-layout{height:calc(100% - 46px);display:flex;flex-direction:column}
.phone-mode .notes-layout aside{display:flex;gap:5px;padding:7px 9px;flex-shrink:0}
.phone-mode .notes-layout aside>span,.phone-mode .note-item small{display:none}
.phone-mode .note-item{font-size:12px;min-height:44px;justify-content:center;padding:8px;margin:0}
.phone-mode article{font-size:15px;line-height:1.6;padding:15px 17px;min-height:0}
.phone-mode article h2{font-size:25px;margin:10px 0}.phone-mode article p{margin:12px 0}
.phone-mode .telegram-window{display:flex;flex-direction:column}
.phone-mode .telegram-window[hidden]{display:none}
.phone-mode .telegram-window .window-bar{flex-shrink:0}
.phone-mode .chat-heading{height:auto;min-height:91px;display:flex;flex-wrap:wrap;padding:9px 13px;gap:8px;flex-shrink:0}
.phone-mode .chat-heading b{font-size:14px}.phone-mode .chat-heading small{font-size:11px}
.phone-mode .bot-avatar{width:32px;height:32px;font-size:22px}
.phone-mode .contact-link{font-size:13px;max-width:none;text-align:center;width:100%;padding:10px;min-height:40px}
.phone-mode .messages{height:auto;flex:1;min-height:0;padding:10px;gap:10px}
.phone-mode .message{font-size:14px;padding:10px;max-width:94%}
.phone-mode .chat-date{font-size:11px}
.phone-mode .quick-replies{height:auto;min-height:45px;flex-shrink:0;gap:5px;padding:4px 7px}
.phone-mode .quick-replies button{font-size:12px;min-height:40px;flex:1;border-radius:10px;padding:5px}
.phone-mode #chat-form{height:52px;flex-shrink:0;padding:5px 8px;align-items:center}
.phone-mode #chat-input{font-size:16px;height:42px}
.phone-mode #chat-form button{width:42px;height:42px;font-size:24px;flex-shrink:0}
.phone-mode.seated .site-header{top:12px}.phone-mode.seated footer{bottom:10px}
@media(max-height:500px){.phone-mode .desktop-welcome{top:16%}.phone-mode .desktop-welcome h2{font-size:19px}.phone-mode .desktop-welcome>span{display:none}.phone-mode .desktop-icons{top:47%;gap:8px}.phone-mode .app-icon{min-width:52px;font-size:11px}.phone-mode .notes-icon,.phone-mode .telegram-icon{width:38px;height:38px}.phone-mode .telegram-icon svg{width:33px;height:33px}.phone-mode .chat-heading{min-height:0}.phone-mode .chat-heading small,.phone-mode .bot-avatar,.phone-mode .quick-replies{display:none}.phone-mode .contact-link{width:auto;margin:0;padding:8px;font-size:11px}.phone-mode .chat-heading b{font-size:11px}.phone-mode .message{font-size:12px;padding:7px}}

/* Screen cutout matches the physical camera island on the model. */
.phone-mode .desktop:after{content:'';position:absolute;z-index:12;top:5.2%;left:50%;transform:translateX(-50%);width:30.4%;height:4.375%;border-radius:999px;background:#07090b;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff08}
.phone-mode .menubar{height:56px;padding:12px 16px 0;align-items:flex-start}
.phone-mode .menu-right{padding-top:12px}
.phone-mode .menu-right>span:first-child{margin-left:auto}
.phone-mode .app-window,.phone-mode .telegram-window,.phone-mode .app-window.expanded{top:62px}
.phone-mode .computer .desktop{border-radius:9.57% / 4.6875%}