.in-app-notification-container{position:fixed;top:0;right:20px;z-index:9999;pointer-events:none}.in-app-notification{position:absolute;right:0;width:360px;max-width:calc(100vw - 40px);background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026,0 0 0 1px #0000000d;overflow:hidden;cursor:pointer;pointer-events:auto;animation:slideIn .3s ease-out;transition:transform .3s ease,opacity .3s ease,top .3s ease}.in-app-notification.exiting{animation:slideOut .3s ease-in forwards}.in-app-notification:hover{transform:translate(-4px);box-shadow:0 6px 16px #0003,0 0 0 1px #0000000d}.notification-content{display:flex;align-items:flex-start;gap:12px;padding:16px;position:relative}.notification-icon{width:40px;height:40px;border-radius:8px;flex-shrink:0;-o-object-fit:cover;object-fit:cover}.notification-text{flex:1;min-width:0;padding-right:24px}.notification-title{font-weight:600;font-size:14px;color:#1a1a1a;margin-bottom:4px;line-height:1.4}.notification-body{font-size:13px;color:#666;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.notification-close{position:absolute;top:12px;right:12px;width:24px;height:24px;border:none;background:transparent;color:#999;font-size:24px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s,color .2s}.notification-close:hover{background-color:#f5f5f5;color:#333}.notification-progress{height:3px;background:linear-gradient(90deg,#06f,#00a3ff);transition:width .05s linear;position:absolute;bottom:0;left:0}@keyframes slideIn{0%{transform:translate(120%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(120%);opacity:0}}@media (prefers-color-scheme: dark){.in-app-notification{background:#2a2a2a;box-shadow:0 4px 12px #0000004d,0 0 0 1px #ffffff1a}.notification-title{color:#fff}.notification-body{color:#b3b3b3}.notification-close{color:#999}.notification-close:hover{background-color:#3a3a3a;color:#fff}}@media (max-width: 640px){.in-app-notification-container{right:10px;left:10px}.in-app-notification{width:auto;max-width:none}}