html, body { width:100%; height:100%; margin:0; }
body { background:#f5f2e9; }
#next-app { height:100%; height:100dvh; min-height:0; overflow:hidden; }
/* Startup owns scrolling before the application shell is available. */
.ui-root .ui-start { padding:min(2rem,32px); max-width:32rem; max-block-size:100%; margin:auto; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
/* One coherent application rail on a wide browser. World keeps its existing
   full host and navigation motion. */
/* Clip decorative overflow without making the frame scroll; body and nav own scrolling. */
.ui-root .ui-shell { --ui-header-ornament-space:76px; height:100%; min-height:0; display:flex; flex-direction:column; inline-size:100%; max-inline-size:var(--ui-frame-max); margin-inline:auto; position:relative; isolation:isolate; overflow:clip; container:app-frame / inline-size; background:var(--ui-page); box-shadow:0 0 32px rgb(53 67 43 / .06); }
.ui-root .ui-shell__header { position:relative; z-index:3; display:grid; grid-template-columns:64px minmax(0,1fr) 64px; align-items:center; gap:4px; min-block-size:76px; padding:max(12px,env(safe-area-inset-top)) 8px 12px; border-bottom:1px solid #eee7d8; background-color:var(--ui-page); background-image:linear-gradient(rgb(255 253 247 / .55),rgb(255 253 247 / .55)),url('../../assets/ui/v1/raster/surface-pale-wood-384.png'); background-position:center; background-repeat:no-repeat; background-size:cover,115% auto; flex-shrink:0; touch-action:pan-x; container:shell-header / inline-size; }
.ui-root .ui-shell__title { display:grid; align-content:center; min-width:0; min-block-size:var(--ui-measured-title-height,0px); text-align:center; text-wrap:balance; }
.ui-root .ui-shell__title-measure { position:absolute; inset:0 auto auto 0; visibility:hidden; pointer-events:none; display:block; text-align:center; text-wrap:balance; }
.ui-root :is(.ui-shell__title,.ui-shell__title-measure) { hyphens:manual; }
.ui-root :is(.ui-shell__title,.ui-shell__title-measure)[data-title-soft-hyphenated] { overflow-wrap:normal; }
.ui-root .ui-shell__title:focus-visible { outline:none; }
.ui-root .ui-shell__icon-button { position:relative; z-index:1; width:64px; min-height:44px; padding:4px 2px; gap:2px; font-size:var(--ui-body-size); font-weight:400; }
.ui-root .ui-shell__glyph { display:block; width:20px; height:24px; flex:0 0 20px; }
.ui-root .ui-shell__ornament { position:absolute; inset-inline-end:-16px; inset-block-start:3px; width:96px; height:96px; object-fit:contain; pointer-events:none; user-select:none; }
.ui-root .ui-shell__content { position:relative; z-index:1; flex:1 1 auto; min-height:0; overflow:hidden; }
.ui-root :is(.ui-shell__body,.ui-shell__outgoing-page) { position:absolute; inset:0; z-index:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; scrollbar-gutter:auto; scrollbar-width:none; padding-inline:max(12px,env(safe-area-inset-left)); background-color:var(--ui-page); background-image:linear-gradient(rgb(255 254 249 / .55),rgb(255 254 249 / .55)),url('../../assets/ui/v1/raster/surface-pale-wood-384.png'); background-position:center; background-size:cover,auto max(115%,115cqw); background-repeat:no-repeat; }
.ui-root :is(.ui-shell__body,.ui-shell__outgoing-page) > * { max-width:var(--ui-content-max); margin-inline:auto; }
.ui-root .ui-shell__outgoing { position:absolute; inset:0; z-index:1; isolation:isolate; pointer-events:none; user-select:none; overflow:hidden; }
.ui-root .ui-shell__outgoing-page { pointer-events:none; user-select:none; }
/* Keep the FINAL five-destination row at normal size; enlarged labels reflow whole. */
.ui-root .ui-shell__nav { position:relative; z-index:2; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; padding:4px 6px max(4px,env(safe-area-inset-bottom)); border-top:1px solid #eee7d8; background-color:#fffdf7; background-image:linear-gradient(rgb(255 254 249 / .86),rgb(255 254 249 / .86)),url('../../assets/ui/v1/raster/surface-pale-wood-384.png'); background-position:center; background-repeat:no-repeat; background-size:cover,115% auto; flex-shrink:0; }
.ui-root .ui-shell__tab { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; min-height:max(64px,3rem); gap:2px; padding:4px 2px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--ui-text); font:inherit; font-size:.8125rem; line-height:1.125rem; font-weight:600; overflow-wrap:normal; cursor:pointer; }
.ui-root .ui-shell__tab > span:not([aria-hidden]) { white-space:nowrap; }
.ui-root .ui-shell__tab[aria-current="page"] { background:linear-gradient(#edf3df,#dfe9c9); color:var(--ui-heading); }
.ui-root .ui-shell__selection { position:absolute; z-index:0; pointer-events:none; border:1px solid transparent; border-radius:10px; box-sizing:border-box; background:linear-gradient(#edf3df,#dfe9c9); transform-origin:0 0; }
.ui-root .ui-shell__tab { position:relative; z-index:1; }
@media (forced-colors:none) {
  .ui-root .ui-shell__nav[data-selection-ready] .ui-shell__tab[aria-current="page"] { background:transparent; }
}
.ui-root .ui-shell__tab:disabled { opacity:.5; }
.ui-root .ui-shell__nav-art { width:38px; height:38px; object-fit:contain; pointer-events:none; }
.ui-root .ui-shell__art-crop { display:block; position:relative; overflow:hidden; flex-shrink:0; }
.ui-root .ui-shell__art-crop > img { position:absolute; max-width:none; object-fit:contain; }
/* The header's square full-canvas window remains anchored at the page edge. */
.ui-root .ui-shell__ornament.ui-shell__art-crop { position:absolute; }
.ui-root .ui-shell__body::-webkit-scrollbar { display:none; }
@container app-frame (max-width:20em) {
  .ui-root .ui-shell__body,.ui-root .ui-shell__outgoing-page { --ui-header-ornament-space:0px; }
  .ui-root .ui-shell__header { grid-template-columns:44px minmax(0,1fr); padding:4px 8px 8px; gap:0; }
  .ui-root .ui-shell__title { grid-column:1 / -1; grid-row:2; padding-inline:0; min-block-size:0; }
  .ui-root .ui-shell__back-text { display:none; }
  .ui-root .ui-shell__icon-button { grid-column:1; grid-row:1; width:44px; padding:6px; }
  .ui-root .ui-shell__ornament { display:none; }
  .ui-root .ui-shell__nav { padding-inline:2px; gap:0; }
  .ui-root .ui-shell__tab { padding-inline:0; }
}
/* Font-relative threshold preserves full labels without reducing the saved scale. */
@container app-frame (max-width:18em) {
  .ui-root .ui-shell__nav { display:flex; flex-wrap:wrap; padding:max(6px,calc(.25rem + 1px)); padding-block-end:max(6px,calc(.25rem + 1px),env(safe-area-inset-bottom)); }
  .ui-root .ui-shell__tab { flex:1 0 max-content; min-height:44px; padding-inline:8px; }
}
@media (max-width:359px) {
  .ui-root .ui-shell__header { padding-inline:4px; }
}
@container app-frame (max-width:9.5em) {
  .ui-root .ui-shell__nav { --ui-nav-focus-space:max(6px,calc(.25rem + 1px)); display:flex; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; padding:var(--ui-nav-focus-space) max(var(--ui-nav-focus-space),env(safe-area-inset-right)) max(var(--ui-nav-focus-space),env(safe-area-inset-bottom)) max(var(--ui-nav-focus-space),env(safe-area-inset-left)); gap:4px; scroll-padding-inline:var(--ui-nav-focus-space); }
  .ui-root .ui-shell__tab { flex:1 0 max-content; min-height:44px; padding:4px 8px; }
  .ui-root .ui-shell__nav-art,.ui-root .ui-shell__tab > .ui-shell__art-crop { display:none; }
}
/* Short viewports keep a reading area; every full-size label stays reachable
   in the native horizontal rail by touch, keyboard focus and selection. */
@media (max-height:480px) {
  .ui-root .ui-shell__header { grid-template-columns:44px minmax(0,1fr) 44px; min-block-size:52px; padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) 4px max(4px,env(safe-area-inset-left)); gap:0; }
  .ui-root .ui-shell__title { grid-column:2; grid-row:1; min-block-size:0; }
  .ui-root .ui-shell__header[data-title-needs-row] > .ui-shell__title { grid-column:1 / -1; grid-row:2; }
  .ui-root .ui-shell__icon-button { grid-column:1; grid-row:1; width:44px; min-width:44px; min-height:44px; padding:6px; }
  .ui-root .ui-shell__back-text,.ui-root .ui-shell__ornament { display:none; }
  .ui-root .ui-shell__nav { --ui-nav-focus-space:max(6px,calc(.25rem + 1px)); display:flex; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; padding:var(--ui-nav-focus-space) max(var(--ui-nav-focus-space),env(safe-area-inset-right)) max(var(--ui-nav-focus-space),env(safe-area-inset-bottom)) max(var(--ui-nav-focus-space),env(safe-area-inset-left)); gap:4px; scroll-padding-inline:var(--ui-nav-focus-space); }
  .ui-root .ui-shell__tab { flex:1 0 max-content; min-height:44px; padding:4px 8px; }
  .ui-root .ui-shell__nav-art,.ui-root .ui-shell__tab > .ui-shell__art-crop { display:none; }
}
/* Short large-text layouts need the same compact rail. Taller layouts retain
   whole-label wrapping, and normal-size phone layouts keep their artwork. */
@media (max-height:640px) {
  @container app-frame (max-width:18em) {
    .ui-root .ui-shell__header { grid-template-columns:44px minmax(0,1fr) 44px; min-block-size:52px; padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) 4px max(4px,env(safe-area-inset-left)); gap:0; }
    .ui-root .ui-shell__title { grid-column:2; grid-row:1; min-block-size:0; }
    .ui-root .ui-shell__header[data-title-needs-row] > .ui-shell__title { grid-column:1 / -1; grid-row:2; }
    .ui-root .ui-shell__icon-button { grid-column:1; grid-row:1; width:44px; min-width:44px; min-height:44px; padding:6px; }
    .ui-root .ui-shell__back-text,.ui-root .ui-shell__ornament { display:none; }
    .ui-root .ui-shell__nav { --ui-nav-focus-space:max(6px,calc(.25rem + 1px)); display:flex; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; padding:var(--ui-nav-focus-space) max(var(--ui-nav-focus-space),env(safe-area-inset-right)) max(var(--ui-nav-focus-space),env(safe-area-inset-bottom)) max(var(--ui-nav-focus-space),env(safe-area-inset-left)); gap:4px; scroll-padding-inline:var(--ui-nav-focus-space); }
    .ui-root .ui-shell__tab { flex:1 0 max-content; min-height:44px; padding:4px 8px; }
    .ui-root .ui-shell__nav-art,.ui-root .ui-shell__tab > .ui-shell__art-crop { display:none; }
  }
}
@media (forced-colors:active) {
  /* Keep the mask and its button on the same system palette pair in every state. */
  .ui-root .ui-shell__header .ui-shell__icon-button.ui-button,
  .ui-root .ui-shell__header .ui-shell__icon-button.ui-button:is(:hover,:active,:focus-visible) { background:ButtonFace; color:ButtonText; }
  /* A mask paints its background: retain this glyph's system-color currentColor. */
  .ui-root .ui-shell__glyph { color:ButtonText; forced-color-adjust:none; }
  .ui-root .ui-shell__header,.ui-root .ui-shell__body,.ui-root .ui-shell__outgoing-page,.ui-root .ui-shell__nav { background-image:none; border-color:CanvasText; }
  .ui-root .ui-shell__selection { display:none; }
  .ui-root .ui-shell__ornament { display:none; }
  /* Preserve the chosen system pair without an opaque inline text backplate. */
  .ui-root .ui-shell__tab[aria-current="page"] { background:Highlight; color:HighlightText; forced-color-adjust:none; }
  .ui-root .ui-shell__tab:focus-visible { outline-color:CanvasText; }
}

/* 她发来新消息时聊天标签上的小点 */
.ui-root .ui-shell__tab { position: relative; }
.ui-root .ui-shell__reply-dot { position: absolute; top: 6px; right: calc(50% - 22px); width: 9px; height: 9px; border-radius: 50%; background: #c0564b; box-shadow: 0 0 0 2px #fffdf4; }
.ui-root .ui-shell__reply-dot[hidden] { display: none; }