/* Final interaction polish: keep folder navigation airy and sand transitions cheap. */
.app .folder-strip{
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
  border-radius:0!important;
  padding:0!important;
}
/* The sections row also carries the old .filters class. Reset that class completely
   here, then rebuild only the horizontal tab layout so no legacy pill can survive. */
.app .filters.folder-tabs{
  all:unset!important;
  display:flex!important;
  flex:1 1 auto!important;
  align-items:center!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-x:contain!important;
  scrollbar-width:none!important;
  touch-action:pan-y!important;
  box-sizing:border-box!important;
  gap:5px!important;
  margin:0!important;
  padding:2px 0!important;
  background:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  filter:none!important;
}
.app .filters.folder-tabs::-webkit-scrollbar{display:none!important}
.app .folder-strip::before,
.app .folder-strip::after,
.app .filters.folder-tabs::before,
.app .filters.folder-tabs::after{
  content:none!important;
  display:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}
.app .filters.folder-tabs .folder-tab{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  min-height:35px!important;
  padding:9px 12px!important;
  white-space:nowrap!important;
  background:transparent!important;
  background-image:none!important;
  border:1px solid transparent!important;
  box-shadow:none!important;
  border-radius:13px!important;
  color:var(--muted)!important;
}
.app .filters.folder-tabs .folder-tab>svg{
  background:transparent!important;
  box-shadow:none!important;
}
.app .filters.folder-tabs .folder-tab.active{
  background:color-mix(in srgb,var(--accent) 10%,transparent)!important;
  border-color:color-mix(in srgb,var(--accent) 16%,transparent)!important;
  color:var(--text)!important;
  box-shadow:0 2px 7px color-mix(in srgb,var(--accent) 9%,transparent),inset 0 1px 0 color-mix(in srgb,var(--text) 4%,transparent)!important;
}
.app .filters.folder-tabs .folder-tab.active>svg{
  background:transparent!important;
  color:var(--accent)!important;
}
.app .folder-edit-button{
  background:transparent!important;
  background-image:none!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
.app .folder-edit-button:active{
  background:color-mix(in srgb,var(--accent) 9%,transparent)!important;
}
.app .gesture-hint{
  background:transparent!important;
  box-shadow:none!important;
}

/* Closing copies never participate in layout or their own transitions. */
.app .sand-list-underlay.closing-shell{
  contain:strict;
  pointer-events:none!important;
  will-change:opacity;
}
.app .sand-list-underlay.closing-shell *,
.app .sand-window-flight.closing-shell *{
  animation-play-state:paused!important;
  transition:none!important;
}

/* Shadows grow together with a surface instead of appearing after it. */
@keyframes sandSurfaceDepthIn{
  0%{box-shadow:0 0 0 #0000,inset 0 1px 0 color-mix(in srgb,var(--text) 0%,transparent)}
  45%{box-shadow:0 3px 9px #0000000b,inset 0 1px 0 color-mix(in srgb,var(--text) 3%,transparent)}
  100%{box-shadow:var(--edge-hi),var(--depth-3)}
}
.app .modal:not(.closing-shell),
.app .emoji-panel:not(.closing-shell),
.app .message-menu:not(.message-selection-menu):not(.closing-shell),
.app .chat-context-menu:not(.closing-shell){
  animation-name:rise,sandSurfaceDepthIn;
  animation-duration:220ms,260ms;
  animation-timing-function:ease,cubic-bezier(.16,1,.3,1);
  animation-fill-mode:both;
}

@media(max-width:720px){
  .app .filters.folder-tabs{padding-inline:1px!important;gap:3px!important;margin:0!important}
  .app .filters.folder-tabs .folder-tab{padding-left:10px!important;padding-right:10px!important}
  .app .filters.folder-tabs .folder-tab.active{box-shadow:0 2px 5px color-mix(in srgb,var(--accent) 8%,transparent)!important}
}

@media(prefers-reduced-motion:reduce){
  .app .modal:not(.closing-shell),.app .emoji-panel:not(.closing-shell),.app .message-menu:not(.message-selection-menu):not(.closing-shell),.app .chat-context-menu:not(.closing-shell){animation:none!important}
}

/* The shared sections plate is intentional; retain its styling after the interaction resets. */
.app .filters.folder-tabs{background:color-mix(in srgb,var(--accent) 9%,var(--surface))!important;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line))!important;border-radius:22px!important;padding:5px!important;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 8%,transparent),0 4px 14px #0000000e!important}
.app .filters.folder-tabs .folder-tab.active{background:var(--panel)!important;border-color:color-mix(in srgb,var(--accent) 24%,var(--line))!important}
.app .folder-strip>.folder-edit-button{flex:0 0 46px!important;width:46px!important;min-height:46px!important;align-self:stretch!important;height:auto!important;border:1px solid var(--line)!important;border-radius:17px!important;background:var(--surface)!important;box-shadow:var(--edge-hi)!important}
@media(orientation:landscape) and (max-height:600px){.app .filters.folder-tabs{padding:3px!important}.app .folder-strip>.folder-edit-button{flex-basis:38px!important;width:38px!important;min-height:38px!important}}

/* The folder plate floats directly on the page, with no outer backing strip. */
.app .folder-strip{background:none!important;background-image:none!important;border:0!important;outline:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.app .folder-strip::before,.app .folder-strip::after{display:none!important;content:none!important}

/* Sand owns the opening; a second CSS rise or shadow animation must not change the final frame. */
.app .modal:not(.closing-shell),.app .emoji-panel:not(.closing-shell),.app .message-menu:not(.message-selection-menu):not(.closing-shell),.app .chat-context-menu:not(.closing-shell){animation:none!important}
.app .filters.folder-tabs{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 8%,transparent)!important}

/* One family of corners and quiet depth across controls, cards and windows. */
.app :is(button,input:not([type=range]):not([type=checkbox]),textarea,select,.search-box,.username-input,.chat-row,.chat-item,.message,.modal,.reaction-dialog,.emoji-panel,.message-menu,.chat-context-menu,.selection-toolbar,.filters.folder-tabs,.composer,.composer-context,.choice-row,.theme-card,.community-settings,.delete-preview,.settings-sample,.folder-tab,.folder-edit-button,.new-chat-button,.main){border-radius:var(--ui-radius,20px)!important}
.app :is(.avatar,.selection-check,.unread-badge,.rail-dot,.switch>i){border-radius:50%!important}
.app .switch{border-radius:999px!important}
.app .folder-strip{position:relative!important;isolation:isolate;z-index:80;overflow:visible!important}
.app .folder-strip>.selection-toolbar{position:absolute!important;top:calc(100% + 8px);right:0;left:auto;width:min(350px,100%);box-sizing:border-box;margin:0!important;padding:10px;z-index:65;transform-origin:calc(100% - 23px) top;background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));box-shadow:var(--depth-3);backdrop-filter:blur(16px);animation:chatSelectionArrival 260ms cubic-bezier(.16,1,.3,1) both}
.app .folder-strip>.folder-edit-button.selection-mode{color:var(--accent-text)!important;background:var(--accent)!important;border-color:var(--accent)!important}
.app .selection-actions{display:flex;gap:6px}.app .selection-actions>button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:9px 6px;font-size:11px;border:1px solid var(--line);background:var(--surface)}
.app .selection-check{z-index:2;width:24px;height:24px;border:2px solid var(--panel);box-shadow:0 1px 5px #0002;transition:background-color 180ms ease,box-shadow 180ms ease}
.app .selection-check.checked{background:var(--accent);color:var(--accent-text);box-shadow:0 0 0 1px var(--accent),0 2px 6px #0002}
.app .chat-row.is-selected>.chat-item{border-color:var(--accent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 65%,transparent)!important}
.app :is(.emoji-choice,.emoji-categories button,.reaction-dialog-options button,.reactions button){background:color-mix(in srgb,var(--panel) 76%,transparent);border:1px solid color-mix(in srgb,var(--line) 80%,transparent);box-shadow:var(--edge-hi),0 2px 5px #00000008;transition:background-color 180ms ease,border-color 180ms ease,box-shadow 180ms ease}
.app :is(.emoji-choice:hover,.emoji-categories button[aria-pressed=true],.reaction-dialog-options button:hover,.reactions button.mine){background:var(--accent-faint);border-color:color-mix(in srgb,var(--accent) 50%,var(--line));box-shadow:var(--edge-hi),0 3px 9px #00000012}
.app .emoji-native{font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;font-variant-emoji:emoji;filter:none!important;text-shadow:none!important;opacity:1;display:inline-block;line-height:1;vertical-align:middle}
.app .message-emoji{display:inline-block;width:auto;height:auto;line-height:1;vertical-align:middle}
@keyframes chatSelectionArrival{from{opacity:0;transform:perspective(600px) rotateX(-5deg) scale(.78)}to{opacity:1;transform:perspective(600px) rotateX(0) scale(1)}}
@media(orientation:landscape) and (max-height:600px){.app .folder-strip>.selection-toolbar{padding:6px}.app .selection-actions>button{flex-direction:row;padding:6px}}
@media(prefers-reduced-motion:reduce){.app .folder-strip>.selection-toolbar{animation:none}}