.tf-notifications { position:relative;flex:none; }
.tf-notification-bell { position:relative;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);cursor:pointer; }
.tf-notification-bell>span[data-notification-count] { position:absolute;right:-7px;top:-6px;min-width:18px;height:18px;border-radius:9px;padding:1px 4px;background:var(--ink);color:var(--surface);font:600 10px/16px 'DM Sans',sans-serif; }
.tf-notification-panel { position:absolute;right:0;top:46px;width:min(350px,calc(100vw - 28px));max-height:70dvh;overflow:auto;z-index:100;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 15px 45px #0002;padding:16px;color:var(--ink); }
.tf-notification-panel>div:first-child { display:flex;gap:10px;align-items:center;justify-content:space-between; }
.tf-notification-panel strong { font-size:15px; }.tf-notification-panel p { margin:12px 0;font-size:13px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere; }
.tf-notification-panel button { font:inherit;font-size:13px;border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:8px;padding:8px 10px;cursor:pointer; }
.tf-notification-panel>small { display:block;margin-top:12px;color:var(--muted);font-size:12px;line-height:1.5; }
.tf-notification-panel button.tf-notification-item { display:block;width:100%;text-align:left;background:var(--surface);padding:12px;margin-bottom:8px; }
.tf-notification-item strong,.tf-notification-item small { display:block;overflow-wrap:anywhere; }
.tf-notification-item small { color:var(--muted);font-size:12px;margin-top:5px; }
[data-support-unread] { display:inline-block;margin-left:7px;border-radius:8px;background:var(--soft);color:var(--ink);padding:2px 6px;font-size:11px; }
@media(max-width:600px) { .tf-notification-panel { position:fixed;top:76px;right:14px; }.tf-notification-bell { width:32px;height:32px; } }