.app{--depth-1:0 2px 6px #00000012,0 1px 1px #00000010;--depth-2:0 5px 14px #00000016,0 2px 5px #0000000d;--depth-3:0 10px 28px #0000001c,0 4px 10px #00000010;--depth-accent:0 7px 18px color-mix(in srgb,var(--accent) 22%,transparent);--edge-hi:inset 0 1px 0 color-mix(in srgb,var(--text) 7%,transparent);--press-shadow:0 1px 3px #00000012,inset 0 1px 2px #0000000d}
.app button>svg{stroke-width:1.78;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:transform 170ms cubic-bezier(.16,1,.3,1),opacity 150ms ease,color 150ms ease}

/* Re-drawn controls: soft squircle geometry, subtle edge light and clear press depth. */
.app .icon-button{position:relative;isolation:isolate;min-width:40px;min-height:40px;border-radius:14px;border:1px solid color-mix(in srgb,var(--line) 72%,transparent);background:linear-gradient(155deg,color-mix(in srgb,var(--text) 5%,transparent),color-mix(in srgb,var(--panel) 40%,transparent));box-shadow:var(--edge-hi),var(--depth-1);color:var(--muted);transition:background-color 170ms ease,border-color 170ms ease,color 170ms ease,box-shadow 190ms ease,transform 170ms cubic-bezier(.16,1,.3,1)}
.app .icon-button>svg{opacity:.93}
.app .icon-button:active{transform:translateY(1px) scale(.965);box-shadow:var(--press-shadow)}
.app .icon-button:active>svg{transform:scale(.9)}
@media(hover:hover){.app .icon-button:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 26%,var(--line));background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 13%,transparent),color-mix(in srgb,var(--panel) 36%,transparent));box-shadow:var(--edge-hi),var(--depth-2);transform:translateY(-1px)}.app .icon-button:hover>svg{transform:scale(1.055)}}

.app :is(.composer-submit,.new-chat-button,.brand-mark){position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent-text) 10%,transparent);border-radius:15px;background-image:linear-gradient(145deg,color-mix(in srgb,var(--accent-text) 17%,transparent),transparent 44%),linear-gradient(160deg,var(--accent),color-mix(in srgb,var(--accent) 78%,#000));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent-text) 24%,transparent),var(--depth-accent);transition:box-shadow 180ms ease,transform 170ms cubic-bezier(.16,1,.3,1),filter 170ms ease}
.app :is(.composer-submit,.new-chat-button,.brand-mark)>svg{stroke-width:1.95;opacity:.99}
.app :is(.composer-submit,.new-chat-button):active{transform:translateY(1px) scale(.96);box-shadow:0 2px 7px color-mix(in srgb,var(--accent) 18%,transparent),inset 0 1px 2px #0002}
.app :is(.composer-submit,.new-chat-button):active>svg{transform:scale(.9) rotate(-2deg)}
@media(hover:hover){.app :is(.composer-submit,.new-chat-button):hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--accent-text) 28%,transparent),0 10px 24px color-mix(in srgb,var(--accent) 26%,transparent)}}

/* Header, back and composer controls have distinct lighter silhouettes. */
.app .header-actions .icon-button,.app .mobile-back{background:linear-gradient(155deg,color-mix(in srgb,var(--text) 5%,transparent),color-mix(in srgb,var(--panel) 24%,transparent));border-color:color-mix(in srgb,var(--line) 60%,transparent)}
.app .mobile-back{border-radius:13px}
.app .composer>.icon-button{border-color:transparent;background:color-mix(in srgb,var(--panel) 10%,transparent);box-shadow:none;border-radius:12px}
.app .composer>.icon-button>svg{opacity:.82}
@media(hover:hover){.app .composer>.icon-button:hover{background:color-mix(in srgb,var(--accent) 11%,transparent);box-shadow:0 3px 8px #0000000d;transform:translateY(-1px)}.app .composer>.icon-button:hover>svg{opacity:1}}

/* Text/action buttons are redrawn as compact capsules with their own icon tile. */
.app :is(.primary-button,.secondary-button,.quiet-button,.selection-actions button,.message-selection-actions button){border-radius:14px;transition:background-color 180ms ease,border-color 180ms ease,box-shadow 190ms ease,transform 170ms cubic-bezier(.16,1,.3,1)}
.app .primary-button{box-shadow:var(--edge-hi),var(--depth-accent)}
.app :is(.secondary-button,.quiet-button,.selection-actions button,.message-selection-actions button){box-shadow:var(--edge-hi),var(--depth-1)}
.app :is(.primary-button,.secondary-button,.quiet-button,.selection-actions button,.message-selection-actions button)>svg{stroke-width:1.82;width:21px;height:21px;padding:3px;border-radius:8px;background:color-mix(in srgb,currentColor 9%,transparent)}
.app .primary-button>svg{background:color-mix(in srgb,var(--accent-text) 13%,transparent)}
.app :is(.primary-button,.secondary-button,.quiet-button,.selection-actions button,.message-selection-actions button):active{transform:translateY(1px) scale(.985);box-shadow:var(--press-shadow)}
@media(hover:hover){.app :is(.primary-button,.secondary-button,.quiet-button,.selection-actions button,.message-selection-actions button):hover{transform:translateY(-1px);box-shadow:var(--edge-hi),var(--depth-2)}}

/* Mobile navigation gets proper button silhouettes instead of floating glyphs. */
.app .mobile-nav button{border-radius:15px;transition:background-color 170ms ease,color 170ms ease,box-shadow 180ms ease,transform 170ms cubic-bezier(.16,1,.3,1)}
.app .mobile-nav button>svg{width:32px;height:32px;padding:6px;border-radius:11px;background:linear-gradient(155deg,color-mix(in srgb,var(--text) 5%,transparent),color-mix(in srgb,var(--panel) 20%,transparent));border:1px solid color-mix(in srgb,var(--line) 52%,transparent);box-shadow:var(--edge-hi),0 2px 5px #0000000c;transition:background-color 170ms ease,border-color 170ms ease,box-shadow 170ms ease,transform 170ms cubic-bezier(.16,1,.3,1)}
.app .mobile-nav button.active>svg{color:var(--accent);background:linear-gradient(155deg,color-mix(in srgb,var(--accent) 17%,transparent),color-mix(in srgb,var(--panel) 18%,transparent));border-color:color-mix(in srgb,var(--accent) 22%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 5%,transparent),0 4px 10px color-mix(in srgb,var(--accent) 13%,transparent)}
.app .mobile-nav button:active>svg{transform:translateY(1px) scale(.91);box-shadow:var(--press-shadow)}

.app .folder-tab{border-radius:13px;box-shadow:0 1px 3px #00000009;transition:box-shadow 170ms ease,transform 170ms cubic-bezier(.16,1,.3,1),background-color 170ms ease}
.app .folder-tab>svg{width:24px;height:24px;padding:4px;border-radius:8px;background:color-mix(in srgb,var(--text) 5%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 4%,transparent)}
.app .folder-tab.active>svg{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.app .folder-tab:active{transform:translateY(1px);box-shadow:none}

/* Lightweight depth for all important surfaces. Static shadows are cheap; only interactive elements animate. */
.app :is(.conversation-head,.composer,.search-box,.folder-tabs,.date-chip,.avatar,.modal-symbol){box-shadow:var(--edge-hi),var(--depth-1)}
.app :is(.message,.chat-row.active,.choice-row,.member-row,.setting-row,.theme-card,.wallpaper-card,.settings-sample,.original-post){box-shadow:0 2px 7px #0000000d}
.app :is(.modal,.thread,.emoji-panel,.message-menu,.chat-context-menu,.reaction-picker,.toast){box-shadow:var(--edge-hi),var(--depth-3)}
.app :is(.chat-context-menu button,.message-menu button,.message-foot button,.comment-link){transition:background-color 150ms ease,color 150ms ease,box-shadow 160ms ease,transform 150ms cubic-bezier(.16,1,.3,1)}
.app :is(.chat-context-menu button,.message-menu button):active,.app .message-foot button:active{transform:translateY(1px) scale(.98);box-shadow:var(--press-shadow)}
.app .message-foot button{box-shadow:0 1px 3px #00000008}
.app .comment-link>svg,.app .message-foot button>svg{stroke-width:1.75}

.app .modal-symbol{border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--accent) 7%,transparent))}
.app .modal-symbol>svg{stroke-width:1.78}

@media(hover:hover){
 .app :is(.message,.theme-card,.wallpaper-card,.choice-row){transition:box-shadow 190ms ease,transform 190ms cubic-bezier(.16,1,.3,1),border-color 170ms ease}
 .app :is(.message,.theme-card,.wallpaper-card,.choice-row):hover{box-shadow:var(--depth-2)}
}

@media(max-width:720px){
 .app{--depth-1:0 2px 5px #00000010;--depth-2:0 4px 10px #00000012;--depth-3:0 7px 18px #00000016;--depth-accent:0 5px 13px color-mix(in srgb,var(--accent) 18%,transparent)}
 .app .icon-button{border-color:color-mix(in srgb,var(--line) 50%,transparent);background:linear-gradient(155deg,color-mix(in srgb,var(--text) 4%,transparent),color-mix(in srgb,var(--panel) 18%,transparent));box-shadow:var(--edge-hi),var(--depth-1)}
 .app .header-actions .icon-button{background:color-mix(in srgb,var(--panel) 10%,transparent);border-color:color-mix(in srgb,var(--line) 38%,transparent)}
 .app .header-actions .icon-button>svg{width:19px;height:19px}
 .app .composer>.icon-button{box-shadow:none}
 .app .composer>.icon-button>svg{width:20px;height:20px}
 .app .composer-submit>svg{width:20px;height:20px}
}

@media(prefers-reduced-motion:reduce){.app button>svg,.app .mobile-nav button>svg,.app :is(.icon-button,.primary-button,.secondary-button,.quiet-button,.folder-tab,.message,.choice-row){transition:none!important;transform:none!important}}