/* Ayni library 0.2.0, status: the connection plug, the space card, the unread dot. Plain CSS, no build step, evergreen browsers
   2024+. Optional: load it after ayni-base.css. */

/* Header sync dot. Red at rest ("not synced" is the safe starting state); the
 * app toggles .synced / .busy / .offline as the network state changes. */
.sync-indicator          { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
                           color: var(--danger); transition: color var(--tr-move); }
.sync-indicator.synced   { color: var(--ok); }
.sync-indicator.busy     { color: var(--busy); }   /* a GET/PUT is in flight - sending / retrieving data */
.sync-indicator.offline  { color: var(--warn); }   /* working offline / changes queued - safe in the local cache */

/* The glyph is ONE plug, drawn by Ayni.plug.draw: .sy-in is it
 * seated in its socket, .sy-out the same plug pulled out. Connected = .synced or
 * .busy; everything else - no class (red, not synced yet / error) or .offline
 * (gold) - draws it unplugged, so the state survives being read without colour. */
.sync-indicator .sy-in           { display: none; }
.sync-indicator.synced .sy-in,
.sync-indicator.busy   .sy-in    { display: inline; }
.sync-indicator.synced .sy-out,
.sync-indicator.busy   .sy-out   { display: none; }

/* Where an app syncs one document the dot is also the
 * refresh control - it is a <button class="sync-indicator">, so it needs a
 * button's reset plus the hover / focus affordances of an .btn. The plain
 * <div> dot the other apps use never matches these rules. */
button.sync-indicator          { width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%;
                                 cursor: pointer; }
button.sync-indicator:focus         { outline: none; }
button.sync-indicator:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* THE FLOATING CHIP (ayni-status.js watchSyncChip). The plug
 * takes no room in the header: hidden while the connection is fine, a round chip
 * floating just outside the bar's end when it is not (.sy-show - Ayni sets its
 * top / right), green for a moment when it comes back, then .sy-fade takes it
 * away. In a frame it never shows: ayni-status.css hides the dot there and nothing here
 * sets `display`. Below the dialogs (sheets are 100). */
.sync-indicator:not(.sy-show)  { display: none; }
.sync-indicator.sy-show        { position: fixed; z-index: 95; margin: 0; padding: 0;
                                 width: 36px; height: 36px; border-radius: 50%;
                                 background: var(--card); border: 1px solid var(--line);
                                 box-shadow: 0 2px 10px var(--shadow);
                                 animation: sy-pop 0.2s ease-out;
                                 transition: opacity 0.25s, color var(--tr-move); }
.sync-indicator.sy-show:hover  { background: color-mix(in srgb, var(--text) 9%, var(--card)); }
.sync-indicator.sy-fade        { opacity: 0; }
@keyframes sy-pop              { from { opacity: 0; transform: scale(0.6); } }
@media (prefers-reduced-motion: reduce)
{
    .sync-indicator.sy-show    { animation: none; transition: none; }
}

/* A frame shows no sync dot of its own: its host shows one (embedded in a pane, the desktop for a window). */
html.is-embedded .sync-indicator { display: none; }
/* The connection status: ONE for the whole desktop, after its clock (it copies
   the worst of every window's), so no window shows its own. */
html.is-windowed .sync-indicator { display: none; }

/* "Space almost full" card (Ayni.spaceCard). It stays until
 * closed, bottom-centre; Ayni's notifications show over it (their own top
 * layer). Its buttons are the shared .btn / .btn.text. */
.quota-card              { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 190;
                           width: min(440px, calc(100vw - 32px)); box-sizing: border-box;
                           max-height: calc(100vh - 32px); overflow-y: auto;
                           background: var(--card2); color: var(--text); border: 1px solid var(--line);
                           border-left: 4px solid var(--warn); border-radius: var(--radius-s);
                           box-shadow: var(--elev-card); padding: 10px 12px 14px 16px; font-size: 0.9rem; }
.quota-card p            { margin: 6px 0; }
.quota-card ul           { margin: 4px 0 0; padding-left: 20px; color: var(--text-dim); }
.quota-card li           { margin: 4px 0; }
.quota-card-head         { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quota-card-head strong  { font-size: 1rem; }
.quota-card-actions      { display: flex; justify-content: flex-end; margin-top: 12px; }

/* The unread dot (Ayni.badge): red, on the app icon's top-right corner, placed by JS. It lets the tap through to the icon.
   It blinks 5 times when a new message arrives - on purpose also with
   "reduce motion" on: it is a short signal, not decoration. */
.icon-badge
{
    position: absolute; z-index: 2;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 2px var(--bg);
    pointer-events: none;
}
.icon-badge[hidden]  { display: none; }
.icon-badge.blink    { animation: icon-badge-blink .7s ease-in-out 5; }
@keyframes icon-badge-blink { 50% { opacity: 0.1; transform: scale(0.6); } }