/* Shared UI kit (menus, pickers, popovers, toasts) for window.JUI in ui.js. */
.jui-pop{position:fixed;z-index:1100;display:flex;flex-direction:column;max-height:min(480px,calc(100vh - 16px));max-width:calc(100vw - 16px);box-sizing:border-box;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 32px rgba(24,32,26,.16),0 1px 3px rgba(24,32,26,.08);font:14px/1.4 Inter,system-ui,-apple-system,sans-serif;text-align:left;overflow:hidden;animation:jui-in .09s ease-out}
.jui-pop *,.jui-toasts *{box-sizing:border-box}
@keyframes jui-in{from{opacity:0;transform:translateY(-3px)}}

/* ---- menu rows ---- */
.jui-menu{width:265px}
.jui-sub{width:auto;min-width:200px;max-width:300px}
.jui-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px}
.jui-it{display:flex;align-items:center;gap:8px;min-height:28px;padding:3px 8px;border-radius:6px;cursor:pointer;user-select:none;white-space:nowrap;color:var(--ink)}
.jui-it.sel,.jui-it.open{background:var(--hover)}
.jui-it.danger,.jui-it.danger .jui-ic{color:#d44c47}
.jui-it.danger.sel{background:#fdebec}
.jui-it.disabled{opacity:.45;cursor:default}
.jui-it.disabled.sel{background:none}
.jui-ic{flex:0 0 20px;width:20px;height:20px;display:grid;place-items:center;font-size:17px;line-height:1;color:var(--moss)}
.jui-sw{font-size:13px;font-weight:600;border:1px solid var(--line);border-radius:4px;color:var(--ink);background:var(--surface)}
.jui-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.jui-hint{flex:0 0 auto;margin-left:12px;color:var(--sage);font-size:12px}
.jui-check{flex:0 0 auto;width:14px;text-align:center;font-size:13px;color:var(--ink)}
.jui-arrow{flex:0 0 auto;color:var(--sage);font-size:16px;line-height:1;margin-right:-2px}
.jui-head{padding:8px 8px 4px;font-size:11.5px;font-weight:500;color:var(--sage);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jui-div{height:1px;margin:4px 2px;background:var(--line)}
.jui-empty{padding:6px 8px;font-size:13px;color:var(--sage)}
.jui-foot{flex:0 0 auto;padding:7px 12px 8px;border-top:1px solid var(--line);font-size:12px;line-height:1.45;color:var(--sage)}

/* ---- inputs + buttons ---- */
.jui-searchbox{flex:0 0 auto;padding:8px 8px 4px}
.jui-search,.jui-input{width:100%;height:30px;padding:0 9px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;outline:none}
.jui-search:focus,.jui-input:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(79,88,74,.12)}
.jui-btn{flex:0 0 auto;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--moss);font:inherit;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer}
.jui-btn:hover{background:var(--hover)}
.jui-btn:disabled{opacity:.5;cursor:default}
.jui-btn.primary{background:var(--evergreen);border-color:var(--evergreen);color:#fff}
.jui-btn.primary:hover{filter:brightness(1.1)}
.jui-btn.ghost{border-color:transparent;background:none}
.jui-btn.ghost:hover{background:var(--hover)}
.jui-inputpop{width:340px}
.jui-inrow{flex:0 0 auto;display:flex;gap:6px;padding:8px}
.jui-inrow .jui-input{flex:1 1 auto;min-width:0}
.jui-inputpop .jui-list{border-top:1px solid var(--line)}
.jui-note{margin-top:8px;font-size:12px;color:var(--sage);text-align:center}
.jui-err{margin-top:8px;font-size:12px;color:#d44c47;text-align:center}

/* ---- page picker ---- */
.jui-pages{width:340px}
.jui-path{flex:0 1 auto;max-width:45%;margin-left:8px;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--sage)}

/* ---- emoji picker ---- */
.jui-emoji{width:352px}
.jui-emo-head{flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:8px 8px 0 12px}
.jui-emo-title{flex:1;font-size:13px;font-weight:600;color:var(--moss)}
.jui-emo-grid{position:relative;flex:1 1 272px;height:272px;min-height:0;overflow-y:auto;padding:0 8px 6px}
.jui-emo-sec{position:sticky;top:0;z-index:1;height:28px;padding:9px 2px 0;background:var(--surface);font-size:11.5px;font-weight:500;color:var(--sage)}
.jui-emo-cells{display:grid;grid-template-columns:repeat(9,1fr)}
.jui-emo{height:34px;display:grid;place-items:center;border-radius:6px;font:22px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;cursor:pointer;user-select:none}
.jui-emo.sel{background:var(--hover)}
.jui-emo-tabs{flex:0 0 auto;display:flex;justify-content:space-between;padding:4px 6px;border-top:1px solid var(--line)}
.jui-emo-tab{width:30px;height:28px;padding:0;border:0;border-radius:6px;background:none;font-size:16px;line-height:1;opacity:.6;filter:grayscale(.6);cursor:pointer}
.jui-emo-tab:hover{opacity:.85;filter:none;background:var(--hover)}
.jui-emo-tab:disabled{opacity:.25;background:none;cursor:default}
.jui-emo-tab.on{opacity:1;filter:none;background:var(--active)}

/* ---- cover picker ---- */
.jui-cover{width:420px}
.jui-tabs{flex:0 0 auto;display:flex;align-items:flex-end;gap:2px;padding:4px 8px 0;border-bottom:1px solid var(--line)}
.jui-tab{margin-bottom:-1px;padding:7px 8px 8px;border:0;border-bottom:2px solid transparent;background:none;color:var(--sage);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.jui-tab:hover{color:var(--ink)}
.jui-tab.on{color:var(--ink);border-bottom-color:var(--ink)}
.jui-spacer{flex:1}
.jui-cover-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 12px 12px}
.jui-cover-body .jui-head{padding:8px 0 6px}
.jui-cover-body .jui-inrow{padding:8px 0 0}
.jui-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.jui-tile{height:56px;padding:0;border:0;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(24,32,26,.08);cursor:pointer;transition:opacity .12s}
.jui-tile:hover{opacity:.82}
.jui-drop{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px;padding:22px 12px;border:1.5px dashed var(--line);border-radius:8px;font-size:13px;color:var(--sage);text-align:center}
.jui-drop.over{border-color:var(--evergreen);background:var(--hover)}

/* ---- generic panel ---- */
.jui-panel{width:320px}

/* ---- toasts ---- */
.jui-toasts{position:fixed;left:50%;bottom:24px;z-index:1200;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateX(-50%);pointer-events:none}
.jui-toast{display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100vw - 32px));padding:8px 8px 8px 14px;border-radius:10px;background:var(--ink);color:#fff;box-shadow:0 10px 30px rgba(24,32,26,.3);font:14px/1.4 Inter,system-ui,-apple-system,sans-serif;pointer-events:auto;animation:jui-up .16s ease-out;transition:opacity .15s,transform .15s}
.jui-toast.out{opacity:0;transform:translateY(6px)}
@keyframes jui-up{from{opacity:0;transform:translateY(8px)}}
.jui-toast-msg{flex:1 1 auto;min-width:0}
.jui-toast-act{flex:0 0 auto;padding:3px 8px;border:0;border-radius:6px;background:none;color:#b9dcb0;font:inherit;font-weight:600;cursor:pointer}
.jui-toast-act:hover{background:rgba(255,255,255,.12)}
.jui-toast-x{flex:0 0 auto;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:none;color:rgba(255,255,255,.55);font-size:12px;cursor:pointer}
.jui-toast-x:hover{background:rgba(255,255,255,.12);color:#fff}

@media (max-width:640px){.jui-emoji{width:calc(100vw - 16px)}}
