/* POCKI visual polish: iPhone-first, full-screen and calm glass depth. */
html,body,#root{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}
button,input,textarea,select{font:inherit;-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
input,textarea,select{font-size:16px!important}

.stage{background:
  radial-gradient(circle at 28% 18%,rgba(82,116,166,.2),transparent 30%),
  radial-gradient(circle at 74% 82%,rgba(76,146,191,.12),transparent 32%),
  #080a11}
.phone{isolation:isolate;background:#09284a;border-color:#060a13;box-shadow:0 34px 110px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.1)}

.desktop{
  gap:0!important;
  padding:clamp(30px,6vh,54px) clamp(18px,5vw,27px) calc(116px + env(safe-area-inset-bottom))!important;
  background:
    radial-gradient(circle at 18% 10%,rgba(138,211,242,.32),transparent 29%),
    radial-gradient(circle at 88% 42%,rgba(105,126,216,.2),transparent 30%),
    radial-gradient(circle at 46% 84%,rgba(54,165,202,.17),transparent 34%),
    linear-gradient(158deg,#245a86 0%,#123e6b 38%,#071e3d 100%)!important;
}
.desktop:before,.desktop:after{content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(1px)}
.desktop:before{width:230px;height:230px;right:-105px;top:15%;background:radial-gradient(circle,rgba(255,255,255,.1),transparent 66%)}
.desktop:after{width:260px;height:260px;left:-145px;bottom:15%;background:radial-gradient(circle,rgba(109,206,239,.11),transparent 67%)}

.page-window{position:relative;z-index:1;overflow:hidden!important;touch-action:pan-y!important;cursor:grab}
.page-track{height:100%;transition:transform .52s cubic-bezier(.22,.8,.22,1)!important}
.page-window.dragging .page-track{transition:none!important}
.page{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-template-rows:repeat(3,minmax(84px,1fr))!important;
  align-content:stretch!important;
  align-items:start!important;
  column-gap:clamp(8px,3.2vw,18px)!important;
  row-gap:clamp(23px,5.5vh,48px)!important;
  padding:clamp(10px,2vh,22px) 0 8px!important;
}
.app-icon{position:relative;z-index:2;gap:8px!important;color:rgba(245,250,255,.96)!important;font-size:11px!important;font-weight:580;letter-spacing:-.1px;text-shadow:0 2px 8px rgba(0,15,34,.65)!important;transition:transform .18s ease,filter .18s ease}
.app-icon i{
  width:clamp(57px,15vw,66px)!important;
  height:clamp(57px,15vw,66px)!important;
  border-radius:20px!important;
  color:#123858!important;
  font-size:23px!important;
  background:linear-gradient(145deg,rgba(246,253,255,.96),rgba(147,211,238,.82))!important;
  border:1px solid rgba(255,255,255,.78);
  box-shadow:inset 0 1px 1px #fff,inset 0 -12px 25px rgba(42,132,188,.13),0 12px 24px rgba(0,27,57,.3)!important;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  position:relative;overflow:hidden;
}
.app-icon i:after{content:"";position:absolute;left:8px;right:8px;top:5px;height:40%;border-radius:15px;background:linear-gradient(180deg,rgba(255,255,255,.62),transparent);pointer-events:none}
.app-icon:nth-child(4n+2) i{background:linear-gradient(145deg,rgba(242,249,255,.97),rgba(183,194,241,.84))!important}
.app-icon:nth-child(4n+3) i{background:linear-gradient(145deg,rgba(244,253,255,.98),rgba(159,225,221,.84))!important}
.app-icon:nth-child(4n+4) i{background:linear-gradient(145deg,rgba(255,249,253,.97),rgba(204,190,236,.84))!important}
.app-icon:active{transform:scale(.9)!important;filter:brightness(1.08)}
.app-icon.edit-mode{animation:pocki-wiggle .22s ease-in-out infinite alternate}
.app-icon.is-dragging{transform:scale(1.08)!important;filter:drop-shadow(0 15px 15px rgba(0,15,35,.35));z-index:8}
@keyframes pocki-wiggle{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg)}}

.page-dots{z-index:2;gap:7px!important;margin:0 0 7px!important;align-items:center}
.page-dots button{width:6px;height:6px;border-radius:999px;color:transparent!important;background:rgba(225,244,255,.35)!important;transition:width .25s ease,background .25s ease}
.page-dots button.selected{width:17px;background:rgba(245,252,255,.95)!important}

.dock{
  z-index:4;bottom:calc(18px + env(safe-area-inset-bottom))!important;left:18px!important;right:18px!important;
  min-height:76px;padding:10px 12px!important;border-radius:28px!important;
  background:linear-gradient(135deg,rgba(225,247,255,.3),rgba(112,175,209,.14))!important;
  border:1px solid rgba(222,246,255,.52)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.58),0 18px 38px rgba(0,20,48,.33)!important;
  -webkit-backdrop-filter:blur(26px) saturate(145%)!important;backdrop-filter:blur(26px) saturate(145%)!important;
}
.dock button{display:grid;place-items:center;width:52px;height:52px;padding:0!important;border-radius:18px!important;color:transparent!important;background:linear-gradient(145deg,rgba(250,254,255,.94),rgba(193,229,241,.84))!important;box-shadow:inset 0 1px #fff,0 7px 18px rgba(0,38,68,.24)!important;position:relative;font-size:0!important}
.dock button:before{color:#163f5c;font-size:21px;font-weight:700}
.dock button:nth-child(1):before{content:"◌"}.dock button:nth-child(2):before{content:"▧"}.dock button:nth-child(3):before{content:"⌁"}.dock button:nth-child(4):before{content:"⌕"}
.dock button:after{position:absolute;bottom:-18px;color:rgba(243,251,255,.86);font-size:9px;font-weight:650;text-shadow:0 2px 5px rgba(0,20,45,.55)}
.dock button:nth-child(1):after{content:"聊天"}.dock button:nth-child(2):after{content:"图库"}.dock button:nth-child(3):after{content:"设置"}.dock button:nth-child(4):after{content:"搜索"}

.home-indicator{z-index:8;width:118px!important;height:4px!important;bottom:calc(6px + env(safe-area-inset-bottom))!important;background:rgba(220,246,255,.92)!important;box-shadow:0 1px 8px rgba(0,35,58,.35)}

.lock-glass{background:radial-gradient(circle at 74% 24%,rgba(191,237,247,.64),transparent 29%),radial-gradient(circle at 16% 70%,rgba(126,145,226,.57),transparent 40%),linear-gradient(145deg,#466b94,#174b78 51%,#092b53)!important}
.lock-glass:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.09),transparent 35%,rgba(166,221,244,.08));pointer-events:none}
.lock-glass .lock-center{border-color:rgba(235,251,255,.58)!important;background:linear-gradient(135deg,rgba(255,255,255,.25),rgba(175,221,241,.11))!important;box-shadow:inset 0 1px rgba(255,255,255,.65),0 20px 48px rgba(0,28,66,.26)!important;-webkit-backdrop-filter:blur(30px) saturate(135%)!important;backdrop-filter:blur(30px) saturate(135%)!important}
.lock-glass .lock-bottom button{color:#fff!important}

.chat-app{background:#cfe4ef!important}
.chat-topbar{min-height:82px!important;background:linear-gradient(135deg,rgba(245,252,255,.88),rgba(221,241,248,.77))!important;border-bottom:1px solid rgba(255,255,255,.82)!important;box-shadow:0 8px 22px rgba(41,91,119,.08);-webkit-backdrop-filter:blur(28px) saturate(135%)!important;backdrop-filter:blur(28px) saturate(135%)!important}
.chat-round{background:rgba(255,255,255,.7)!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:0 8px 19px rgba(35,93,124,.12)!important}
.chat-wallpaper{background:radial-gradient(circle at 86% 20%,rgba(255,255,255,.55) 0 2px,transparent 3px),radial-gradient(circle at 18% 68%,rgba(255,255,255,.38) 0 2px,transparent 3px),linear-gradient(155deg,#beddec 0%,#66add0 43%,#174f7b 100%)!important;background-size:94px 94px,130px 130px,auto!important}
.message-bubble{box-shadow:0 7px 20px rgba(14,54,83,.14)!important}
.message-bubble.theirs{background:rgba(250,253,255,.89)!important;border:1px solid rgba(255,255,255,.88)}
.message-bubble.mine{background:linear-gradient(145deg,#88d4f3,#57add9)!important;border:1px solid rgba(210,244,255,.65)}
.chat-composer{padding-bottom:calc(13px + env(safe-area-inset-bottom))!important;background:rgba(235,247,251,.88)!important;-webkit-backdrop-filter:blur(28px) saturate(135%)!important;backdrop-filter:blur(28px) saturate(135%)!important}
.chat-composer input{min-height:43px;background:rgba(255,255,255,.86)!important;border-color:rgba(255,255,255,.95)!important;box-shadow:inset 0 1px 3px rgba(39,84,108,.08)}
.chat-appearance-panel{z-index:7!important;margin:10px 12px 0!important;padding:14px!important;border:1px solid rgba(255,255,255,.86)!important;border-radius:22px!important;background:linear-gradient(145deg,rgba(249,253,255,.9),rgba(215,238,248,.82))!important;box-shadow:0 14px 30px rgba(29,78,107,.16),inset 0 1px #fff!important;-webkit-backdrop-filter:blur(28px) saturate(140%)!important;backdrop-filter:blur(28px) saturate(140%)!important}
.chat-appearance-panel>strong{display:block;margin-bottom:9px;color:#173f59;font-size:14px}
.chat-appearance-panel>span{display:block;margin:11px 0 6px;color:#718a99;font-size:10px;font-weight:750;letter-spacing:.5px}
.chat-appearance-panel>div{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.chat-appearance-panel button{min-height:36px;padding:7px 5px!important;border:1px solid rgba(255,255,255,.82)!important;border-radius:12px!important;background:rgba(255,255,255,.54)!important;color:#547183!important;font-size:10px!important;font-weight:700}
.chat-appearance-panel button.active{color:#fff!important;background:linear-gradient(145deg,#5fb3da,#347fae)!important;box-shadow:0 7px 15px rgba(45,126,169,.2)}
.translation-bubble{margin-top:5px!important;padding:8px 12px!important;border:1px solid rgba(255,255,255,.78)!important;background:rgba(255,255,255,.8)!important;color:#35566a!important;font-size:12px!important;box-shadow:0 4px 12px rgba(24,65,91,.1)!important}
.message-tools{z-index:4!important;display:flex!important;flex-wrap:wrap;gap:5px;max-width:250px;padding:6px!important;border:1px solid rgba(255,255,255,.82)!important;border-radius:15px!important;background:rgba(245,251,254,.9)!important;box-shadow:0 10px 24px rgba(8,44,70,.22)!important;-webkit-backdrop-filter:blur(22px)!important;backdrop-filter:blur(22px)!important}
.message-tools button{min-height:30px;padding:5px 8px!important;border:0!important;border-radius:9px!important;background:rgba(212,234,244,.76)!important;color:#315c75!important;font-size:10px!important;font-weight:700}
.burst-reply-button{white-space:nowrap;border:1px solid rgba(255,255,255,.9)!important;border-radius:18px!important;background:linear-gradient(145deg,#c7ecfa,#8dcae5)!important;color:#22516b!important;padding:10px 11px!important;font-size:11px!important;font-weight:800}

@media(max-width:600px){
  .stage{width:100vw;height:100dvh;min-height:100dvh;padding:0!important}
  .phone{width:100vw;height:100dvh;min-height:100dvh;max-height:none;border:0;border-radius:0;box-shadow:none;padding:0!important}
  .desktop{height:100dvh!important;padding-top:calc(26px + env(safe-area-inset-top))!important}
  .lock-glass{padding-top:calc(72px + env(safe-area-inset-top))!important}
  .chat-topbar{padding-top:calc(12px + env(safe-area-inset-top))!important;height:calc(74px + env(safe-area-inset-top))!important}
}

@media(max-height:720px){
  .desktop{padding-top:calc(18px + env(safe-area-inset-top))!important}
  .page{row-gap:15px!important;grid-template-rows:repeat(3,minmax(75px,1fr))!important}
  .app-icon i{width:54px!important;height:54px!important;border-radius:17px!important}
  .dock{min-height:67px!important}.dock button{width:46px;height:46px;border-radius:15px!important}
}

/* System layer: edge gestures, control center and recent tasks. */
.pocki-system-layer{--screen-dim:0;position:absolute;inset:0;z-index:60;pointer-events:none;overflow:hidden;border-radius:inherit;color:#12334c;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC",sans-serif}
.system-screen-dimmer{position:absolute;inset:0;z-index:0;background:#03111e;opacity:var(--screen-dim);pointer-events:none;transition:opacity .18s ease}
.system-edge-trigger{position:absolute;right:0;z-index:4;width:7px;height:54px;padding:0;border:0;background:transparent;pointer-events:auto;opacity:.2;transition:opacity .2s ease,transform .2s ease}
.system-edge-trigger span{display:block;width:2px;height:30px;margin-left:auto;border-radius:9px 0 0 9px;background:rgba(235,250,255,.78);box-shadow:0 0 8px rgba(139,222,255,.32)}
.system-edge-trigger:active{opacity:.9;transform:scaleX(1.3)}
.control-trigger{top:27%}.recents-trigger{top:42%}.on-lockscreen .system-edge-trigger{opacity:0;pointer-events:none}
.system-backdrop{position:absolute;inset:0;z-index:10;background:rgba(3,14,28,.23);opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity .28s ease}
.panel-open .system-backdrop{opacity:1;pointer-events:auto}
.system-sheet{position:absolute;z-index:12;pointer-events:auto;background:linear-gradient(145deg,rgba(244,252,255,.88),rgba(208,234,247,.72));border:1px solid rgba(255,255,255,.86);box-shadow:inset 0 1px rgba(255,255,255,.75),0 28px 70px rgba(0,22,49,.36);-webkit-backdrop-filter:blur(34px) saturate(150%);backdrop-filter:blur(34px) saturate(150%);transition:transform .42s cubic-bezier(.22,.82,.22,1),opacity .25s ease}
.system-sheet header{display:flex!important;align-items:center;justify-content:space-between;height:auto!important;min-height:0!important;margin:0 0 20px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.system-sheet header small{display:block;color:#6d8ca1;font-size:9px;font-weight:750;letter-spacing:1.8px}
.system-sheet header h2{margin:3px 0 0;font-size:27px;letter-spacing:-1.2px}
.system-sheet header button{min-width:58px;height:34px;border:1px solid rgba(255,255,255,.8);border-radius:18px;background:rgba(255,255,255,.58);color:#315d77;font-size:13px;font-weight:700}
.system-control-center{top:calc(14px + env(safe-area-inset-top));left:14px;right:14px;padding:23px 20px 18px;border-radius:31px;opacity:0;transform:translateY(-112%)}
.pocki-system-layer[data-panel="controls"] .system-control-center{opacity:1;transform:translateY(0)}
.system-toggle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.system-toggle-grid button{min-height:94px;padding:13px;border:1px solid rgba(255,255,255,.62);border-radius:24px;background:rgba(255,255,255,.44);color:#345b73;text-align:left;box-shadow:inset 0 1px rgba(255,255,255,.7);transition:transform .16s ease,background .2s ease,color .2s ease}
.system-toggle-grid button:active{transform:scale(.96)}
.system-toggle-grid button.active{color:#fff;background:linear-gradient(145deg,rgba(76,165,211,.96),rgba(52,111,175,.92));box-shadow:inset 0 1px rgba(255,255,255,.45),0 12px 24px rgba(31,100,151,.2)}
.system-toggle-grid i{display:grid;place-items:center;width:34px;height:34px;margin-bottom:9px;border-radius:12px;background:rgba(255,255,255,.6);color:#285d7d;font-style:normal;font-size:18px}
.system-toggle-grid b,.system-toggle-grid span{display:block}.system-toggle-grid b{font-size:14px}.system-toggle-grid span{margin-top:2px;font-size:10px;opacity:.7}
.system-sliders{display:grid;gap:11px;margin-top:13px}
.system-sliders label{display:grid;grid-template-columns:1fr auto;gap:7px 12px;padding:13px 15px;border:1px solid rgba(255,255,255,.65);border-radius:20px;background:rgba(255,255,255,.46);font-size:12px;font-weight:700}
.system-sliders label b{color:#568099}.system-sliders input{grid-column:1/-1;width:100%;height:5px;accent-color:#499dca}
.system-gesture-tip{margin:15px 0 0;color:#6b8ba0;font-size:10px;text-align:center}
.system-recents{left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));max-height:76%;padding:22px 18px 16px;border-radius:31px;opacity:0;transform:translateY(112%)}
.pocki-system-layer[data-panel="recents"] .system-recents{opacity:1;transform:translateY(0)}
.system-recents-list{display:flex;gap:12px;overflow-x:auto;padding:3px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:none}
.system-recents-list::-webkit-scrollbar{display:none}
.system-task-card{position:relative;flex:0 0 76%;min-height:270px;padding:14px;border-radius:25px;background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(170,215,237,.64));border:1px solid rgba(255,255,255,.82);box-shadow:0 15px 30px rgba(25,78,113,.15);scroll-snap-align:center}
.system-task-preview{display:grid;place-items:center;align-content:center;gap:14px;height:205px;border-radius:19px;background:linear-gradient(155deg,#5fa9d0,#174b77);color:#fff}
.system-task-preview i{display:grid;place-items:center;width:62px;height:62px;border-radius:20px;background:rgba(255,255,255,.86);color:#225573;font-style:normal;font-size:26px;box-shadow:0 11px 25px rgba(0,40,70,.22)}
.system-task-preview span{font-size:14px;font-weight:700}
.system-task-open{width:100%;height:38px;margin-top:10px;border:0;border-radius:15px;background:rgba(255,255,255,.7);color:#285a77;font-size:13px;font-weight:750}
.system-task-close{position:absolute;z-index:2;top:23px;right:23px;width:28px;height:28px;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(11,39,63,.38);color:#fff;font-size:18px;line-height:1}
.system-empty{display:grid;place-items:center;align-content:center;gap:7px;width:100%;height:250px;border:1px dashed rgba(68,120,150,.3);border-radius:24px;color:#476e85;text-align:center}.system-empty span{font-size:11px;opacity:.72}

@media(max-width:600px){.pocki-system-layer{border-radius:0}.system-control-center{top:calc(8px + env(safe-area-inset-top))}.system-recents{bottom:calc(9px + env(safe-area-inset-bottom))}}
@media(max-height:720px){.system-control-center{padding:17px 17px 13px}.system-sheet header{margin-bottom:12px}.system-toggle-grid button{min-height:77px;padding:10px}.system-toggle-grid i{width:28px;height:28px;margin-bottom:6px}.system-sliders{gap:7px;margin-top:9px}.system-sliders label{padding:10px 12px}.system-task-card{min-height:220px}.system-task-preview{height:158px}}