:root {
  --inbox-surface: var(--bg-elevated, #161A24);
  --inbox-surface-2: var(--bg-surface, #0F1219);
  --inbox-border: var(--glass-border, rgba(255,255,255,.10));
  --inbox-text: var(--text-primary, #F0F3F8);
  --inbox-muted: var(--text-secondary, #A0AAB8);
  --inbox-accent: var(--accent, #EE4540);
  --inbox-announce: #f0c040;
  --inbox-danger: #e3262e;
}

.ta-inbox-root { display:inline-flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; }
.ta-inbox-bell { position:relative; display:inline-grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:0; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--inbox-text); cursor:pointer; z-index:1002; }
.ta-inbox-bell:hover,.ta-inbox-bell:focus-visible { background:var(--accent-dim,rgba(238,69,64,.15)); border-color:var(--inbox-border); box-shadow:0 0 0 5px color-mix(in srgb,var(--inbox-accent) 12%,transparent),0 6px 18px color-mix(in srgb,var(--inbox-accent) 30%,transparent); }
.ta-inbox-bell:focus-visible { outline:3px solid color-mix(in srgb,var(--inbox-accent) 65%,white); outline-offset:2px; }
.ta-inbox-bell__icon { font-size:1.12rem; line-height:1; }
.ta-inbox-bell__badge { position:absolute; top:1px; right:0; min-width:18px; height:18px; padding:0 4px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:var(--inbox-danger); color:#fff; font:700 10px/1 Inter,sans-serif; box-shadow:0 0 0 2px var(--bg-deep,#06080B); pointer-events:none; }
.ta-inbox-bell__badge[hidden] { display:none !important; }
.ta-inbox-bell__badge--pop { animation:ta-inbox-badge-pop .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes ta-inbox-badge-pop { 0%{transform:scale(.4)} 55%{transform:scale(1.28)} 100%{transform:scale(1)} }
.ta-inbox-bell.is-ringing .ta-inbox-bell__icon,.ta-inbox-bell--attention .ta-inbox-bell__icon { animation:ta-inbox-ring .78s ease-in-out 2; transform-origin:50% 8%; }
.ta-inbox-bell--tap .ta-inbox-bell__icon { animation:ta-inbox-tap .32s cubic-bezier(.2,.8,.25,1); }
@keyframes ta-inbox-ring { 0%,100%{transform:rotate(0)} 22%{transform:rotate(-13deg)} 48%{transform:rotate(11deg)} 72%{transform:rotate(-8deg)} }
@keyframes ta-inbox-tap { 0%{transform:scale(1)} 45%{transform:scale(.78) rotate(-8deg)} 100%{transform:scale(1)} }

.ta-inbox-popover { position:fixed; top:calc(var(--header-height,64px) + 8px); right:max(12px,env(safe-area-inset-right)); width:min(400px,calc(100vw - 24px)); max-height:min(620px,calc(100dvh - var(--header-height,64px) - 24px)); overflow:hidden; display:flex; flex-direction:column; color:var(--inbox-text); background:var(--inbox-surface); border:1px solid var(--inbox-border); border-radius:16px; box-shadow:0 22px 60px rgba(0,0,0,.55); z-index:1100; transform-origin:top right; }
.ta-inbox-popover[hidden],.ta-inbox-modal[hidden] { display:none !important; }
.ta-inbox-panel--enter { animation:ta-inbox-panel-in .32s cubic-bezier(.22,.9,.3,1.02) both; }
.ta-inbox-panel--exit { animation:ta-inbox-panel-out .18s cubic-bezier(.5,0,1,1) both; }
@keyframes ta-inbox-panel-in { 0%{opacity:0;transform:translateY(-12px) scale(.94)} 60%{opacity:1;transform:translateY(0) scale(1.015)} 100%{opacity:1;transform:translateY(0) scale(1)} }
@keyframes ta-inbox-panel-out { from{opacity:1;transform:translateY(0) scale(1)} to{opacity:0;transform:translateY(-8px) scale(.97)} }
.ta-inbox-popover__head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 16px 10px; border-bottom:1px solid var(--inbox-border); }
.ta-inbox-popover__title { margin:0; font-size:1.05rem; font-weight:800; letter-spacing:.2px; display:flex; align-items:center; gap:8px; }
.ta-inbox-popover__count { font:700 .72rem/1 Inter,sans-serif; color:var(--inbox-accent); background:var(--accent-dim,rgba(238,69,64,.14)); padding:3px 9px; border-radius:999px; }
.ta-inbox-popover__count[hidden] { display:none; }
.ta-inbox-popover__tools { display:flex; align-items:center; gap:4px; min-width:0; }
.ta-inbox-popover__close,.ta-inbox-popover__mark-all { min-width:36px; min-height:36px; border:0; border-radius:9px; color:var(--inbox-muted); background:transparent; cursor:pointer; }
.ta-inbox-popover__mark-all { max-width:150px; padding:0 8px; font-size:.72rem; font-weight:700; white-space:nowrap; }
.ta-inbox-popover__close:hover,.ta-inbox-popover__close:focus-visible,.ta-inbox-popover__mark-all:hover,.ta-inbox-popover__mark-all:focus-visible { color:var(--inbox-text); background:var(--accent-dim,rgba(238,69,64,.15)); }
.ta-inbox-control--tap { animation:ta-inbox-control-tap .28s ease; }
@keyframes ta-inbox-control-tap { 0%{transform:scale(1)} 50%{transform:scale(.94)} 100%{transform:scale(1)} }
.ta-inbox-popover__mark-all.is-busy { opacity:.66; cursor:wait; }
.ta-inbox-popover__mark-all.is-busy::after { content:''; display:inline-block; width:10px; height:10px; margin-left:6px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-1px; animation:ta-inbox-spin .65s linear infinite; }

.ta-inbox-popover__list { min-height:0; overflow:auto; padding:8px; overscroll-behavior:contain; transition:opacity .18s ease; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }
.ta-inbox-popover__list::-webkit-scrollbar { width:8px; }
.ta-inbox-popover__list::-webkit-scrollbar-track { background:transparent; }
.ta-inbox-popover__list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:8px; }
.ta-inbox-popover__list::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.26); }
.ta-inbox-popover__list.is-busy { opacity:.58; pointer-events:none; }
.ta-inbox-card { display:flex; align-items:flex-start; gap:12px; margin:0 0 10px; padding:13px 14px; border:1px solid var(--inbox-border); border-radius:14px; background:var(--inbox-surface-2); transition:opacity .24s ease,transform .24s ease,max-height .24s ease,margin .24s ease,padding .24s ease,background .16s ease,border-color .16s ease; }
.ta-inbox-card:hover { border-color:color-mix(in srgb,var(--inbox-accent) 34%,var(--inbox-border)); background:color-mix(in srgb,var(--inbox-surface-2) 97%,var(--inbox-accent) 3%); }
.ta-inbox-card:last-child { margin-bottom:0; }
.ta-inbox-card.is-unread { border-color:color-mix(in srgb,var(--inbox-accent) 50%,transparent); box-shadow:inset 3px 0 0 var(--inbox-accent); }
.ta-inbox-card.is-announcement { box-shadow:inset 3px 0 0 var(--inbox-announce); }
.ta-inbox-card.is-unread.is-announcement { box-shadow:inset 3px 0 0 var(--inbox-announce); }
.ta-inbox-card[role=button] { cursor:pointer; }
.ta-inbox-card[role=button]:focus-visible { outline:2px solid var(--inbox-accent); outline-offset:2px; }
.ta-inbox-card.is-removing { overflow:hidden; pointer-events:none; }
.ta-inbox-card.is-deleting { opacity:0; transform:translateX(28px) scale(.97); max-height:0; margin-bottom:0; padding-top:0; padding-bottom:0; border-width:0; }
.ta-inbox-card.is-reading { opacity:.48; transform:scale(.985); }
.ta-inbox-entering .ta-inbox-card { animation:ta-inbox-card-in .38s cubic-bezier(.22,.8,.3,1) both; }
.ta-inbox-entering .ta-inbox-card:nth-child(1){animation-delay:0ms} .ta-inbox-entering .ta-inbox-card:nth-child(2){animation-delay:38ms} .ta-inbox-entering .ta-inbox-card:nth-child(3){animation-delay:76ms} .ta-inbox-entering .ta-inbox-card:nth-child(4){animation-delay:114ms} .ta-inbox-entering .ta-inbox-card:nth-child(5){animation-delay:152ms} .ta-inbox-entering .ta-inbox-card:nth-child(6){animation-delay:190ms} .ta-inbox-entering .ta-inbox-card:nth-child(7){animation-delay:228ms} .ta-inbox-entering .ta-inbox-card:nth-child(n+8){animation-delay:266ms}
@keyframes ta-inbox-card-in { from{opacity:0;transform:translateY(10px) scale(.985)} to{opacity:1;transform:translateY(0) scale(1)} }
.ta-inbox-card__icon { flex:0 0 auto; display:grid; place-items:center; width:36px; height:36px; border-radius:11px; font-size:1.05rem; background:rgba(238,69,64,.15); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--inbox-accent) 22%,transparent); }
.ta-inbox-card.is-announcement .ta-inbox-card__icon { background:rgba(240,192,64,.15); }
.ta-inbox-card__content { flex:1; min-width:0; }
.ta-inbox-card__meta { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--inbox-muted); font-size:.72rem; }
.ta-inbox-card__title { margin:5px 0 3px; font-size:.92rem; overflow-wrap:anywhere; }
.ta-inbox-card__body { margin:0; color:var(--inbox-muted); font-size:.84rem; line-height:1.48; overflow-wrap:anywhere; white-space:pre-wrap; }
.ta-inbox-card__actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.ta-inbox-action { min-height:38px; flex:1 1 120px; padding:8px 10px; border:1px solid var(--inbox-border); border-radius:9px; color:var(--inbox-text); background:transparent; cursor:pointer; font:600 .76rem/1.2 Inter,sans-serif; transition:transform .16s ease,opacity .16s ease,background .16s ease,border-color .16s ease; }
.ta-inbox-action:hover,.ta-inbox-action:focus-visible { border-color:var(--inbox-accent); background:var(--accent-dim,rgba(238,69,64,.15)); }
.ta-inbox-action:active { transform:scale(.96); }
.ta-inbox-action.is-busy { opacity:.58; cursor:wait; }
.ta-inbox-action.is-busy::after { content:''; display:inline-block; width:10px; height:10px; margin-left:6px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-1px; animation:ta-inbox-spin .65s linear infinite; }
@keyframes ta-inbox-spin { to{transform:rotate(360deg)} }
.ta-inbox-action.is-primary { border-color:transparent; background:var(--inbox-accent); color:#fff; }
.ta-inbox-action.is-danger { color:#ff9090; border-color:color-mix(in srgb,var(--inbox-danger) 42%,transparent); }
.ta-inbox-empty,.ta-inbox-error,.ta-inbox-loading { padding:20px 12px; color:var(--inbox-muted); text-align:center; }
.ta-inbox-empty { display:flex; flex-direction:column; align-items:center; gap:6px; padding:38px 16px; }
.ta-inbox-empty__icon { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; color:var(--inbox-accent); background:var(--accent-dim,rgba(238,69,64,.14)); margin-bottom:6px; }
.ta-inbox-empty__icon svg { width:26px; height:26px; }
.ta-inbox-empty__title { margin:0; color:var(--inbox-text); font-weight:700; font-size:.95rem; }
.ta-inbox-empty__sub { margin:0; font-size:.8rem; opacity:.75; }
.ta-inbox-error { color:#ff9d9d; }

.ta-inbox-modal__backdrop { position:fixed; inset:0; background:rgba(0,0,0,.70); z-index:1190; }
.ta-inbox-modal:not([hidden]) .ta-inbox-modal__backdrop { animation:ta-inbox-fade-in .22s ease both; }
.ta-inbox-modal:not([hidden]) .ta-inbox-modal__dialog { animation:ta-inbox-dialog-in .3s cubic-bezier(.22,.9,.3,1.08) both; }
@keyframes ta-inbox-fade-in { from{opacity:0} to{opacity:1} }
@keyframes ta-inbox-dialog-in { from{opacity:0;transform:translate(-50%,-50%) scale(.92)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
.ta-inbox-modal__dialog { position:fixed; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:min(560px,calc(100vw - 24px)); max-height:min(78dvh,680px); overflow:auto; padding:22px; color:var(--inbox-text); background:var(--inbox-surface); border:1px solid var(--inbox-border); border-radius:18px; box-shadow:0 24px 80px rgba(0,0,0,.70); z-index:1200; }
.ta-inbox-modal__dialog:focus { outline:none; }
.ta-inbox-modal__title { margin:0 32px 10px 0; font-size:clamp(1.1rem,2vw,1.4rem); overflow-wrap:anywhere; }
.ta-inbox-modal__body { margin:0; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.ta-inbox-modal__help { margin:16px 0 0; color:var(--inbox-muted); font-size:.86rem; line-height:1.5; }
.ta-inbox-modal__close { position:absolute; top:12px; right:12px; min-width:40px; min-height:40px; border:0; border-radius:10px; color:var(--inbox-muted); background:transparent; cursor:pointer; }
.ta-inbox-modal__actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.ta-inbox-modal__actions button { flex:1 1 180px; min-height:44px; padding:10px 14px; border:1px solid var(--inbox-border); border-radius:10px; color:var(--inbox-text); background:var(--inbox-surface-2); cursor:pointer; }
.ta-inbox-modal__actions .is-primary { border-color:transparent; background:var(--inbox-accent); color:#fff; }
body.ta-inbox-lock { overflow:hidden; }

.index-header-actions { flex:0 0 auto; width:auto; min-width:0; max-width:none; gap:8px; overflow:visible; }
.app-header .header-right.index-header-actions { min-width:0; }
@media (max-width:992px) { .app-header .header-right.index-header-actions { flex:0 0 auto; width:auto; min-width:0; max-width:calc(100vw - 150px); gap:6px; } .ta-inbox-root,.ta-inbox-root .ta-inbox-bell { width:40px; height:40px; flex-basis:40px; } #creditWidgetCompact { flex:0 1 100px !important; width:100px !important; min-width:86px !important; max-width:156px !important; } }
@media (max-width:520px) { .ta-inbox-popover { top:calc(var(--header-height,64px) + 8px); right:12px; left:auto; bottom:auto; width:min(380px,calc(100vw - 24px)); max-height:min(82dvh,700px); border-radius:16px; padding-bottom:0; transform-origin:top right; } .ta-inbox-panel--enter { animation-name:ta-inbox-panel-in; } .ta-inbox-panel--exit { animation-name:ta-inbox-panel-out; } .ta-inbox-modal__dialog { inset:50% auto auto 50%; transform:translate(-50%,-50%); width:min(560px,calc(100vw - 24px)); max-height:min(78dvh,680px); border-radius:18px; padding:22px 16px; } .ta-inbox-modal__actions { display:grid; grid-template-columns:1fr 1fr; } .ta-inbox-modal__actions button { min-width:0; } }
@keyframes ta-inbox-sheet-in { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes ta-inbox-sheet-out { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(24px)} }
@media (max-width:360px) { .ta-inbox-modal__actions { grid-template-columns:1fr; } .ta-inbox-action { flex-basis:100%; } }
@media (prefers-reduced-motion:reduce) { .ta-inbox-bell--attention .ta-inbox-bell__icon,.ta-inbox-bell--tap .ta-inbox-bell__icon,.ta-inbox-bell__badge--pop,.ta-inbox-popover,.ta-inbox-popover *,.ta-inbox-entering .ta-inbox-card,.ta-inbox-modal *,.ta-inbox-card,.ta-inbox-action { animation:none !important; transition:none !important; } }
body.light .ta-inbox-bell__badge { box-shadow:0 0 0 2px var(--bg-deep,#F4F6F8); }
body.light .ta-inbox-popover,body.light .ta-inbox-modal__dialog { --inbox-surface:#fff; --inbox-surface-2:#f4f6f8; --inbox-text:#1E293B; --inbox-muted:#475569; }
/* End TeamAlpha Inbox notifications UI v52. */
