/* menus.css — the π and Lleu menus structured, with icons, adaptive by container queries (menus.js; owner 2026-10-31).
   Identical copy in friendly-apps-home and site.
   1.2.0: the Lleu areas as adaptive cards, the bar of an open area, the page form (lleu.html).
   1.3.0: small displays — the areas as a drop-down of rows that open in place.
   1.4.0: Lleu as a tool inside objects; the role chip.
   1.4.1: small windows keep Lleu small (no full sheet), inputs 16px (no zoom on phones).
   1.5.0: π like Lleu (cards, rows, the way back); "signed in as" in one place.
   1.6.0: the floating Lleu in chat mode with his menu; full screen when there is no room.
   1.7.0: the language in π's "Ansicht", one place at a time.
   1.11.0: the chat as a conversation with its choice row.
   1.12.0: the choice behind a gear (provider, model, agent, persona, virtual organisation).
   1.13.0: the chat fills its room the same way everywhere; no gap above the keyboard.
   1.14.0: Markdown in Lleu's answers.
   1.15.0: the development agent's checklist.
   1.16.0: several conversations in Lleu's chat.
   1.27.0: Lleu's bar of categories at the bottom (thumb zone) and the list of a category with several areas.
   1.28.0: folders for the conversations (chips, + Ordner, move by the folder sign).
   version: 1.32.0 · created 2026-10-31 by Pascal Ehlig, ITS · edited 2026-11-02 by Pascal Ehlig, ITS */
.pi-menu.g-menu{width:min(32rem,calc(100vw - 24px))!important;container-type:inline-size;padding:.5rem!important}
.g-menu .g-menu-group{display:block;padding:.25rem .25rem .5rem;break-inside:avoid}
.g-menu .g-menu-group h2{display:flex;align-items:center;gap:.5rem;margin:.25rem .4rem .35rem!important}
.g-menu .g-menu-group ul{margin:0}
.g-menu .g-menu-group a,.g-menu .g-menu-group li.meta{display:flex!important;align-items:center;gap:.6rem}
.g-mi{width:18px;height:18px;flex:none;opacity:.8}
.g-mh{width:16px;height:16px;flex:none;color:var(--accent-text,currentColor)}
.g-menu .g-menu-group[data-group="account"] h2 .g-mh{color:var(--accent,currentColor)}
@container (min-width:28rem){
  .g-menu-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:.25rem;align-items:start}
  .g-menu-grid .g-menu-group[data-group="account"]{grid-column:1/-1}
}
.lleu-panel.g-lleu{container-type:inline-size}
.g-lleu-tabs{display:flex;gap:4px;overflow-x:auto;padding:4px 0 8px;margin-bottom:6px;border-bottom:1px solid currentColor;border-color:color-mix(in srgb,currentColor 15%,transparent)}
.g-lleu-tab{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 .7rem;border:0;border-radius:10px;background:transparent;color:inherit;font:inherit;font-size:.85rem;cursor:pointer;white-space:nowrap}
.g-lleu-tab:hover,.g-lleu-tab:focus-visible,.g-lleu-tab[aria-current]{background:color-mix(in srgb,currentColor 10%,transparent)}
.g-lleu-tab.is-quiet{opacity:.6}
.g-lleu .lleu-part h3{display:flex;align-items:center;gap:.5rem}
@container (max-width:22rem){ .g-lleu-tab span{display:none} .g-lleu-tab{padding:0 .55rem} }
.g-menu li,.g-menu a{white-space:normal!important;overflow-wrap:anywhere}
/* 1.1.0: the Lleu panel as a floating chat window above its button (bottom right), in the page's design; a sheet from below on phones */
.lleu-panel.g-lleu{top:auto!important;left:auto!important;right:max(16px,env(safe-area-inset-right))!important;bottom:calc(var(--g-foot-h,var(--fold-foot,0px)) + 14px)!important;
  width:min(400px,calc(100vw - 24px))!important;max-height:min(72vh,640px);padding:0 0 12px!important;border:1px solid var(--border)!important;border-radius:20px;
  background:var(--surface)!important;color:var(--text)!important;box-shadow:0 24px 60px rgb(16 42 67 / .25);font:var(--t-base,1rem)/1.5 var(--sans,system-ui)}
.g-lleu .lleu-head{position:sticky;top:0;z-index:1;padding:10px 10px 10px 16px;background:var(--surface);border-bottom:1px solid var(--border);border-radius:20px 20px 0 0}
.g-lleu .lleu-title{display:flex;align-items:center;gap:10px;margin:0;font-size:1.05rem}
.g-lleu-seed{width:28px;height:28px;padding:5px;box-sizing:content-box;border-radius:50%;background:var(--action);color:var(--on-action)}
.g-lleu .g-lleu-close{display:grid;place-items:center;width:36px;height:36px;margin:0;padding:0;border-radius:50%;border:0;background:transparent;color:var(--muted)}
.g-lleu .g-lleu-close:hover{background:var(--sunken);color:var(--text)}
.g-lleu .g-lleu-tabs{margin:10px 12px 4px;padding:4px;border:0;border-radius:12px;background:var(--sunken)}
.g-lleu .g-lleu-tab[aria-current]{background:var(--surface);box-shadow:0 1px 3px rgb(0 0 0 / .1)}
.g-lleu .lleu-part{margin:10px 12px 0;padding:12px 14px;border:1px solid var(--border)!important;border-radius:14px;background:var(--surface)}
.g-lleu .lleu-part h3{margin:0 0 6px;font-size:.95rem}
.g-lleu .lleu-note{color:var(--muted);font-size:var(--t-small,.85rem)}
.g-lleu .lleu-btn{border:0;border-radius:999px;padding:7px 16px;background:var(--action);color:var(--on-action);font-weight:600}
.g-lleu .lleu-btn-quiet,.g-lleu .lleu-btn-deny{background:transparent;color:var(--text);border:1px solid var(--border)}
.g-lleu .lleu-chat-in{min-height:64px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);resize:vertical}
.g-lleu .lleu-chat-in:focus-visible,.g-lleu .lleu-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* small windows (owner 2026-10-31): Lleu stays a small window above the footer, it does not grow into a full sheet; inputs at 16px so a
   phone does not zoom in when one is tapped */
@media (max-width:600px){.lleu-panel.g-lleu.g-lleu-page-form{font-size:.92rem}
  .g-lleu .lleu-head{padding:6px 6px 6px 12px;border-radius:16px 16px 0 0}.g-lleu .lleu-title{font-size:.95rem}.g-lleu-seed{width:22px;height:22px;padding:4px}
  .g-lleu .g-lleu-close{width:32px;height:32px}.g-lleu .lleu-part{margin:8px 8px 0;padding:10px 12px}}
.g-lleu textarea,.g-lleu input,.g-lleu select{font-size:16px}
/* 1.2.0 (owner 2026-10-31): the Lleu menu adaptive — areas as cards (two columns with room, one when narrow, icons only when very narrow);
   an open area has a bar: back to the areas, its name, "open as a page"; areas in development are quiet and say "demnächst" */
.g-lleu-areas{container-type:inline-size;margin:10px 12px 0}
.g-lleu-areas[hidden],.g-lleu-bar[hidden]{display:none!important}
.g-lleu-areas ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr));gap:8px;margin:0;padding:0;list-style:none}
.g-lleu-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;min-height:84px;padding:12px;   /* the look: card.css */
  font:inherit;font-weight:600;text-align:start;text-decoration:none;cursor:pointer;text-transform:none;letter-spacing:0;font-size:var(--t-base,1rem);line-height:1.3;
}
.g-lleu-ic{width:26px;height:26px;padding:6px;box-sizing:content-box;border-radius:10px;background:var(--sunken);color:var(--accent-text,var(--text))}
.g-lleu-name{line-height:1.25}
.g-lleu-tag{padding:0 8px;border-radius:999px;font-size:.72rem;font-weight:600;background:var(--sunken);color:var(--muted)}
.g-lleu-area.is-planned .g-lleu-card{cursor:default}
.g-lleu-area.is-planned .g-lleu-ic{background:transparent;color:var(--muted)}
.g-lleu-area.is-off .g-lleu-tag{background:var(--warn-bg,#fff4d6);color:var(--warn,#8a5a00)}
@container (max-width:15rem){.g-lleu-areas ul{grid-template-columns:1fr}.g-lleu-card{flex-direction:row;align-items:center;min-height:48px}}
@container (min-width:30rem){.g-lleu-areas ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
.g-lleu-bar{display:flex;align-items:center;gap:8px;margin:10px 12px 0}
.g-lleu-back{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 10px 0 4px;border:0;border-radius:10px;background:var(--sunken);
  color:var(--text);font:inherit;font-size:.85rem;cursor:pointer}
.g-lleu-here{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-lleu-page{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--muted)}
.g-lleu-page:hover{background:var(--sunken);color:var(--text)}
.g-lleu .g-lleu-tabs{display:none}
/* the page form (lleu.html): the panel in the main area, not floating */
.lleu-panel.g-lleu.g-lleu-page-form{position:static!important;inset:auto!important;width:auto!important;max-height:none!important;box-shadow:none;
  margin:var(--s5,24px) 0 var(--s7,48px)}
.g-lleu-page-form .lleu-head{display:none}
.g-lleu-page-form{padding-top:2px!important}
/* 1.3.0 (owner 2026-10-31): small displays — a drop-down of small rows; a row opens its area right under it */
.g-lleu-compact{display:none;margin:10px 12px 0}
[data-g-small] .g-lleu-compact{display:block}
[data-g-small] .g-lleu-areas,[data-g-small] .g-lleu-bar{display:none!important}
.g-lleu-drop{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:0 12px;border:1px solid var(--border);border-radius:12px;
  background:var(--sunken);color:var(--text);font:inherit;font-weight:600;cursor:pointer;text-align:start}
.g-lleu-drop>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-lleu-drop::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);opacity:.6}
.g-lleu-drop[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.g-lleu-drop .g-mi{width:18px;height:18px}
.g-lleu-rows{margin:6px 0 0;padding:0;list-style:none;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
.g-lleu-rows[hidden]{display:none}
.g-lleu-rowi+.g-lleu-rowi{border-top:1px solid var(--border)}
.g-lleu-row{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 12px;border:0;background:none;color:var(--text);
  font:inherit;font-size:.92rem;text-align:start;cursor:pointer;text-transform:none;letter-spacing:0}
button.g-lleu-row:hover{background:var(--sunken)}
.g-lleu-row:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.g-lleu-row .g-lleu-name{flex:1;min-width:0}
button.g-lleu-row::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);opacity:.5;transition:transform var(--dur,.18s)}
button.g-lleu-row[aria-expanded="true"]::after{transform:rotate(45deg)}
.g-lleu-ric{width:18px;height:18px;color:var(--accent-text,var(--text))}
.g-lleu-rowi.is-planned .g-lleu-row{color:var(--muted);cursor:default}
.g-lleu-slot{position:relative}
.g-lleu-slot:empty{display:none}
.g-lleu-slot .lleu-part{margin:0 8px 8px!important;border-radius:10px}
.g-lleu-slot .lleu-part h3,.g-lleu-slot .g-menu-group>h2{display:none}
.g-lleu-rpage{position:absolute;right:10px;top:6px;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--muted)}
.g-lleu-slot:not(:has(.lleu-part)) .g-lleu-rpage{display:none}
.g-lleu-rpage:hover{background:var(--sunken);color:var(--text)}
/* 1.4.0 (owner 2026-10-31): Lleu as a tool inside an object (e.g. the designer with the wand) and the role it was opened in */
.g-lleu-tool{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px 0 8px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface);color:var(--text);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.g-lleu-tool .g-mi{width:18px;height:18px;color:var(--accent-text,var(--text))}
.g-lleu-tool:hover{border-color:var(--accent,#fb683e)}
.g-lleu-tool:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.g-lleu-tool:disabled{opacity:.6;cursor:not-allowed}
.g-lleu-role{display:inline-flex;align-items:center;gap:4px;margin-left:auto;margin-right:6px;padding:2px 10px 2px 6px;border-radius:999px;
  background:var(--sunken);font-size:.78rem;font-weight:600}
.g-lleu-role .g-mi{width:16px;height:16px}
/* 1.5.0 (owner 2026-10-31): the π menu like Lleu's — the cards and rows above its groups; an open group without its own heading */
.pi-menu.g-areas-host .g-lleu-areas,.pi-menu.g-areas-host .g-lleu-bar,.pi-menu.g-areas-host .g-lleu-compact{margin:4px 0 8px}
.g-areas-host:not([data-g-area=""]) .g-menu-group>h2{display:none}
.pi-menu .g-lleu-slot .g-menu-group{margin:0 8px 8px;padding:6px 8px;border:1px solid var(--border);border-radius:10px}
.pi-menu .g-menu-grid:has(> .g-menu-group:not([hidden])){display:block}
.pi-menu .g-menu-grid:not(:has(> .g-menu-group:not([hidden]))){display:none}
/* "signed in as" in one place: the header's account wins, the strip's initials and π's line step back */
[data-who-docked] .gw-air-who,[data-who-docked] .g-whoami{display:none!important}
.g-menu-group ul{list-style:none;margin:0;padding:0}.g-menu-group li{display:flex;align-items:center;gap:8px;min-height:34px}
.g-menu-group a{display:flex;align-items:center;gap:8px;min-height:34px;color:var(--text);text-decoration:none}.g-menu-group a:hover{text-decoration:underline}
/* 1.6.0 (owner 2026-10-31): the floating Lleu in chat mode — his menu (☰) and "open as a page" in his head; the list of areas under it;
   when there is not enough room he takes the whole screen, × top right */
.g-lleu-float .lleu-head{display:flex;align-items:center;gap:4px}
.g-lleu-float .lleu-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-lleu-float .g-lleu-here{margin-left:6px;font-weight:500;color:var(--muted)}
.g-lleu-float .g-lleu-here:not(:empty)::before{content:"· "}
.g-lleu-menubox{position:relative}
.g-lleu-menubtn{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.g-lleu-menubtn:hover,.g-lleu-menubtn[aria-expanded="true"]{background:var(--sunken);color:var(--text)}
.g-lleu-menubtn:focus-visible,.g-lleu-float .g-lleu-page:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.g-lleu-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:5;min-width:15rem;margin:0;padding:4px;list-style:none;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px rgb(16 42 67 / .2)}
.g-lleu-menu[hidden]{display:none}
.g-lleu-menu .g-lleu-row{border-radius:8px}
.g-lleu-menu .g-lleu-row[aria-current="true"]{font-weight:700;background:var(--sunken)}
.g-lleu-menu button.g-lleu-row::after{display:none}
.g-lleu-float .lleu-part h3{display:none}
@media (max-width:600px),(max-height:560px){
  .lleu-panel.g-lleu.g-lleu-float{inset:0!important;z-index:1000!important;width:100%!important;height:var(--vvh,100dvh);top:var(--vvtop,0)!important;bottom:auto!important;max-height:none!important;border-radius:0!important;border:0!important}
  .g-lleu-float .lleu-head{border-radius:0!important;padding-top:max(6px,env(safe-area-inset-top))}
  /* × where his bubble lives: bottom right */
  .g-lleu-float .g-lleu-close{position:fixed!important;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:3;
    width:52px!important;height:52px!important;background:var(--action)!important;color:var(--on-action)!important;box-shadow:0 10px 28px rgb(16 42 67 / .25)}
}
/* 1.7.0 (owner 2026-10-31): the language in π's "Ansicht" — one place at a time: the page's language menu wins while it shows */
.g-pi-langlink{display:none!important}
.g-pi-lang{display:flex;align-items:flex-start;gap:8px}
.g-pi-langs{display:flex;flex-wrap:wrap;gap:4px}
.g-pi-langbtn{min-height:30px;padding:0 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:.82rem;cursor:pointer}
.g-pi-langbtn[aria-current="true"]{background:var(--action);color:var(--on-action);border-color:var(--action)}
.g-pi-langbtn:disabled{opacity:.5;cursor:default}
.g-pi-langbtn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[data-lang-docked] .g-pi-lang{display:none!important}
.g-areas-host [data-part]:focus,.g-areas-host .g-menu-group:focus{outline:none}
.g-areas-host [data-part]:focus-visible,.g-areas-host .g-menu-group:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
/* 1.8.1: Lleu full screen above an on-screen keyboard — his × steps up above it */
[data-keyboard] .g-lleu-float .g-lleu-close{bottom:auto!important;top:calc(var(--vvtop,0px) + var(--vvh,100dvh) - 58px)}
/* 1.9.0: the page behind Lleu in full screen holds still; only his content scrolls */
/* 1.9.1: no lock on the page itself (it made him vanish); a swipe inside him just does not chain on to the page */
[data-lleu-full] body{overscroll-behavior:none}
.lleu-panel.g-lleu.g-lleu-float{overscroll-behavior:contain;overflow:auto}
/* 1.9.2: full screen for his window whatever view he shows (also without his areas, e.g. the sign-in note) */
@media (max-width:600px),(max-height:560px){.lleu-panel.g-lleu:not(.g-lleu-page-form){inset:0!important;z-index:1000!important;width:100%!important;height:var(--vvh,100dvh);top:var(--vvtop,0)!important;bottom:auto!important;max-height:none!important;border-radius:0!important}}
/* 1.10.0 (owner 2026-10-31): in full screen his window is one column — head, the answers filling the room, the field the full width, the row
   with "Senden" at the bottom and his × next to it (no reserved gap below) */
@media (max-width:600px),(max-height:560px){
  .lleu-panel.g-lleu:not(.g-lleu-page-form){display:flex!important;flex-direction:column;padding:0!important;overflow:hidden!important}
  .lleu-panel.g-lleu:not(.g-lleu-page-form)>.lleu-head{flex:none}
  .lleu-panel.g-lleu:not(.g-lleu-page-form)>.lleu-part:not([hidden]){flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px;margin:0!important;
    padding:10px 12px max(10px,env(safe-area-inset-bottom))!important;border:0!important;border-radius:0!important;overflow:auto}
  .lleu-panel.g-lleu .lleu-part[data-part="chat"] .lleu-chat-out{order:-1;flex:1 1 auto;min-height:0;overflow:auto;margin:0}
  .lleu-panel.g-lleu .lleu-part[data-part="chat"] .lleu-chat-in{display:block;width:100%;box-sizing:border-box;min-height:56px;flex:none}
  .lleu-panel.g-lleu .lleu-part[data-part="chat"] .lleu-row{flex:none;padding-right:64px;min-height:52px}
  .g-lleu-float .g-lleu-close{bottom:max(10px,env(safe-area-inset-bottom))!important;right:max(12px,env(safe-area-inset-right))!important;width:48px!important;height:48px!important}
}
.lleu-panel.g-lleu .lleu-chat-in{width:100%;box-sizing:border-box}
/* 1.11.0 (owner 2026-10-31): the chat as a conversation — bubbles above the field, the field stays, the log scrolls; the choice row */
.g-chat-src{display:none!important}
.g-chat-log{display:flex;flex-direction:column;gap:8px;min-height:6rem;max-height:40vh;overflow-y:auto;overscroll-behavior:contain;padding:4px 2px}
.g-chat-msg{max-width:85%;padding:8px 12px;border-radius:14px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.4}
.g-chat-msg.is-me{align-self:flex-end;background:var(--action);color:var(--on-action);border-bottom-right-radius:4px}
.g-chat-msg.is-lleu{align-self:flex-start;background:var(--sunken);color:var(--text);border-bottom-left-radius:4px}
.g-chat-msg.is-wait{color:var(--muted)}
.g-chat-pick{display:flex;flex-wrap:wrap;gap:6px}
.g-chat-sel{display:flex;flex-direction:column;flex:1 1 0;min-width:0;font-size:.72rem;color:var(--muted)}
.g-chat-sel select{min-height:32px;padding:0 6px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;font-size:.85rem}
@media (max-width:600px),(max-height:560px){
  .lleu-panel.g-lleu .lleu-part[data-part="chat"] .g-chat-log{flex:1 1 auto;max-height:none;min-height:0}
}
/* 1.12.0 (owner 2026-10-31): the choice behind a gear next to the field, with a short summary */
.g-chat-gearbox{display:flex;align-items:center;gap:8px;min-width:0}
.g-chat-gear{display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--muted);cursor:pointer}
.g-chat-gear .g-mi{width:18px;height:18px}
.g-chat-gear:hover,.g-chat-gear[aria-expanded="true"]{color:var(--text);background:var(--sunken)}
.g-chat-gear:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.g-chat-sum{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;color:var(--muted)}
.g-chat-pick[hidden]{display:none}
.g-chat-pick{padding:8px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.g-chat-sel{flex:1 1 9rem}
/* 1.13.0 (owner 2026-10-31): the chat fills its room the same way everywhere — the floating window has a fixed height and is one column
   like the full screen; the page form gives the chat the height of the window below its title; no gap above an on-screen keyboard */
.lleu-panel.g-lleu.g-lleu-float{display:flex!important;flex-direction:column;height:min(72vh,640px);max-height:none!important;padding:0!important;overflow:hidden!important}
.lleu-panel.g-lleu.g-lleu-float>.lleu-head{flex:none}
.lleu-panel.g-lleu>.lleu-part[data-part="chat"]:not([hidden]){display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-height:0}
.lleu-panel.g-lleu.g-lleu-float>.lleu-part:not([hidden]){flex:1 1 auto;min-height:0;margin:0!important;padding:10px 12px!important;border:0!important;border-radius:0!important;overflow:auto}
.lleu-panel.g-lleu .lleu-part[data-part="chat"] .g-chat-log{flex:1 1 auto;min-height:4rem;max-height:none}
.lleu-panel.g-lleu .lleu-part[data-part="chat"] textarea{flex:none}
.lleu-panel.g-lleu-page-form>.lleu-part[data-part="chat"]:not([hidden]){height:calc(100dvh - var(--head-h,64px) - 11rem);min-height:22rem}
[data-keyboard] .lleu-panel.g-lleu>.lleu-part:not([hidden]){padding-bottom:6px!important}
@media (max-width:600px),(max-height:560px){.lleu-panel.g-lleu.g-lleu-float{height:var(--vvh,100dvh)!important}}
/* 1.14.0 (owner 2026-10-31): Markdown in Lleu's answers */
.g-chat-msg.g-md{white-space:normal}
.g-md>:first-child{margin-top:0}.g-md>:last-child{margin-bottom:0}
.g-md p{margin:0 0 .5em}
.g-md h4,.g-md h5,.g-md h6,.g-md h7{margin:.6em 0 .3em;font-size:1rem;line-height:1.3}
.g-md ul,.g-md ol{margin:.2em 0 .5em;padding-left:1.3em}
.g-md li{margin:.15em 0}
.g-md li>input[type=checkbox]{margin:0 .4em 0 0;vertical-align:-1px}
.g-md code{padding:1px 5px;border-radius:5px;background:color-mix(in srgb,var(--text) 8%,transparent);font-family:var(--mono,ui-monospace,monospace);font-size:.88em}
.g-md pre{margin:.4em 0 .6em;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--text) 7%,transparent);overflow-x:auto}
.g-md pre code{padding:0;background:none;font-size:.85em;white-space:pre}
.g-md blockquote{margin:.4em 0;padding:.1em 0 .1em .8em;border-left:3px solid var(--accent);color:var(--muted)}
.g-md hr{border:0;border-top:1px solid var(--border);margin:.6em 0}
.g-md a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.g-md-table{overflow-x:auto;margin:.4em 0 .6em}
.g-md table{border-collapse:collapse;font-size:.9em}
.g-md th,.g-md td{padding:4px 8px;border:1px solid var(--border);text-align:left;vertical-align:top}
.g-md th{background:color-mix(in srgb,var(--text) 5%,transparent)}
/* 1.15.0 (owner 2026-10-31): the development agent's conditions as a checklist */
.g-dev-conds{margin:6px 0 10px}
.g-dev-conds h4{margin:0 0 6px;font-size:.9rem}
.g-dev-list{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.g-dev-list li{display:flex;align-items:flex-start;gap:8px;font-size:.88rem}
.g-dev-list input{margin:2px 0 0;accent-color:var(--ok,#1e6b45)}
.g-dev-list li.is-missing{color:var(--text)}
.g-dev-list li.is-met{color:var(--muted)}
/* 1.16.0 (owner 2026-10-31): several conversations — the bar above the log with the current title, its list and "+" */
.g-conv-bar{position:relative;display:flex;align-items:center;gap:6px;flex:none}
.g-conv-cur{flex:1;min-width:0;display:flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface);color:var(--text);font:inherit;font-size:.85rem;font-weight:600;text-align:start;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-conv-cur::after{content:"";flex:none;margin-left:auto;width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);opacity:.6}
.g-conv-new{flex:none;width:34px;height:34px;border:0;border-radius:50%;background:var(--action);color:var(--on-action);font:inherit;font-size:1.2rem;line-height:1;cursor:pointer}
.g-conv-cur:focus-visible,.g-conv-new:focus-visible,.g-conv-item:focus-visible,.g-conv-del:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.g-conv-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:6;max-height:50vh;overflow:auto;margin:0;padding:4px;list-style:none;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 30px rgb(16 42 67 / .2)}
.g-conv-list[hidden]{display:none}
.g-conv-list li{display:flex;align-items:center;gap:4px}
.g-conv-item{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding:6px 10px;border:0;border-radius:8px;background:none;color:var(--text);
  font:inherit;font-size:.88rem;text-align:start;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-conv-item small{color:var(--muted);font-size:.72rem}
.g-conv-item:hover,.g-conv-item[aria-current="true"]{background:var(--sunken)}
.g-conv-item[aria-current="true"]{font-weight:700}
.g-conv-del{flex:none;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.g-conv-del:hover{background:var(--sunken);color:var(--text)}
.g-conv-del .g-mi{width:16px;height:16px}
.g-conv-none{padding:8px 10px;color:var(--muted);font-size:.85rem}
.g-chat-empty{margin:auto 0;color:var(--muted);text-align:center;font-size:.9rem}
/* 1.18.0 (owner 2026-10-31): π with plenty of room — every group a large card with its entries, side by side */
.pi-menu.g-menu[data-g-big]{width:min(62rem,calc(100vw - 48px))!important;max-height:calc(100vh - 120px);overflow:auto;padding:14px!important}
.pi-menu[data-g-big] .g-lleu-areas,.pi-menu[data-g-big] .g-lleu-bar,.pi-menu[data-g-big] .g-lleu-compact{display:none!important}
.pi-menu[data-g-big] .g-menu-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:12px;align-items:stretch}
.pi-menu[data-g-big] .g-menu-group{display:block!important;margin:0;padding:14px 16px 12px}   /* the look: card.css */
.pi-menu[data-g-big] .g-menu-group>h2{display:flex!important;font-size:1.05rem;margin:0 0 .6rem!important;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.pi-menu[data-g-big] .g-menu-group>h2 .g-mh{width:26px;height:26px;color:var(--accent,currentColor)}
.pi-menu[data-g-big] .g-menu-group li,.pi-menu[data-g-big] .g-menu-group a{min-height:38px}
.pi-menu[data-g-big] .g-menu-grid .g-menu-group{grid-column:auto}
.g-lleu-area[hidden],.g-lleu-rowi[hidden]{display:none!important}
.g-menu .g-menu-group[hidden],.pi-menu[data-g-big] .g-menu-group[hidden]{display:none!important}   /* 1.21.1: a hidden group stays hidden in every view */
.g-pi-stagebtn{display:flex;align-items:center;gap:.6rem;min-height:38px;width:100%;padding:0;border:0;background:none;color:var(--text);font:inherit;cursor:pointer;text-align:start}.g-pi-stagebtn:hover{text-decoration:underline}.g-pi-stagebtn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.legal-binding{margin:0 0 var(--s4,16px);padding:10px 14px;border-left:4px solid var(--accent,#fb683e);border-radius:8px;background:var(--sunken,#eef1f4);font-weight:600}
html:not([data-signed-in]) .g-pi-stage-only{display:none!important}   /* 1.23.0: the stage needs a right (R1); until then signed in only */
[data-lang-docked] .g-pi-layout{display:flex!important}   /* 1.24.0: the layout stays when the languages step back */

/* 1.26.0: the rows of π › Ansicht carry their name (Darstellung, Menüposition) */
.g-pi-rowlabel{flex-basis:100%;font-size:.78rem;color:var(--muted);margin-bottom:2px}
[data-lang-docked] .g-pi-view{display:flex!important}
[data-lang-docked] .g-pi-address{display:none!important}   /* the header's language menu offers Du / Sie itself */
/* 1.28.0: an unshaped Lleu panel stays invisible for a moment (menus.js shapes it at once; after 0.4 s it shows anyway) */
.lleu-panel:not(.g-lleu){visibility:hidden;animation:g-lleu-late 0s .4s forwards}
@keyframes g-lleu-late{to{visibility:visible}}
/* 1.30.0: π lives in Lleu while Lleu is on the page — π's own button steps back, its menu fills the Lleu part */
html[data-pi-in-lleu] details[data-gwydion-pi]{display:none!important}
.lleu-part-pi .pi-menu.g-menu{position:static!important;width:auto!important;max-width:none!important;max-height:none!important;margin:0!important;box-shadow:none!important;border:0!important;background:transparent!important;inset:auto!important;transform:none!important}
/* 1.24.0 (owner 2026-11-01): without Lleu π hides at the bottom left — quiet, pretty, not obvious; it stays a 32 px target and comes up on
   hover, focus or open. A π configured to call attention (the bar form, html[data-pi-attention]) keeps its full look. */
html:not([data-pi-attention]) details[data-gwydion-pi]:not(.pi-bar):not([open])>summary{border-color:transparent!important;background:transparent!important;box-shadow:none!important;color:var(--muted,#486581)!important;opacity:.45;font:italic 400 16px/1 Georgia,"Times New Roman",serif!important;transition:opacity .25s,color .25s,border-color .25s,background-color .25s}
html:not([data-pi-attention]) details[data-gwydion-pi]:not(.pi-bar):not([open])>summary:hover,html:not([data-pi-attention]) details[data-gwydion-pi]:not(.pi-bar):not([open])>summary:focus-visible{opacity:1;color:var(--accent,#fb683e)!important;border-color:var(--border,#d9e6ee)!important;background:var(--surface,#fff)!important}
@media (prefers-reduced-motion:reduce){html:not([data-pi-attention]) details[data-gwydion-pi]>summary{transition:none}}
/* 1.25.0 (owner 2026-11-01): the quiet π stays quiet but readable for people who see less — full muted colour (≥ 3:1), no fading */
html:not([data-pi-attention]) details[data-gwydion-pi]:not(.pi-bar):not([open])>summary{opacity:1}
@media (prefers-contrast:more){html details[data-gwydion-pi]>summary{border-color:currentColor!important;color:var(--text,#102a43)!important}}
/* 1.26.0 (owner 2026-11-01: π inside Lleu read black on dark blue): π's part in Lleu stands on its own light surface with the page's text colour */
.lleu-part-pi .pi-menu.g-menu{background:var(--surface,#fff)!important;color:var(--text,#102a43)!important;border-radius:14px!important;padding:8px!important}
.lleu-part-pi .pi-menu.g-menu a,.lleu-part-pi .pi-menu.g-menu button,.lleu-part-pi .pi-menu.g-menu h2,.lleu-part-pi .pi-menu.g-menu li{color:var(--text,#102a43)}
/* 1.27.0 (owner 2026-11-01): Lleu by its functions — the bar of categories at the bottom, like a messenger */
.lleu-panel.g-lleu.g-lleu-float>.g-lleu-cats{flex:none;order:99;display:flex;gap:2px;padding:4px 6px max(4px,env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface,#fff)}
.g-lleu-cat{position:relative;flex:1 1 0;min-width:0;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;border-radius:12px;background:none;color:var(--muted);font:600 .7rem/1.1 var(--sans,system-ui);cursor:pointer;-webkit-tap-highlight-color:transparent}
.g-lleu-cat>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-lleu-cat .g-mi{width:22px;height:22px;padding:3px 14px;border-radius:999px;box-sizing:content-box;transition:background-color .15s}
.g-lleu-cat[aria-current="true"]{color:var(--text)}
.g-lleu-cat[aria-current="true"] .g-mi{background:color-mix(in srgb,var(--accent,#fb683e) 18%,transparent)}
.g-lleu-cat:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.g-lleu-catn{position:absolute;top:2px;left:calc(50% + 8px);min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:999px;background:var(--accent,#fb683e);color:#fff;font:700 .68rem/18px var(--sans,system-ui);text-align:center}
.g-lleu-catn[hidden]{display:none}
.lleu-panel.g-lleu.g-lleu-float>.g-lleu-catlist:not([hidden]){flex:1 1 auto;min-height:0;overflow:auto;padding:10px 12px}
.g-lleu-cathead{margin:0 0 8px;font:700 .95rem/1.2 var(--sans,system-ui)}
.g-lleu-catrows{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.g-lleu-catrow{width:100%;min-height:48px;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface,#fff);color:var(--text);font:600 .9rem/1.2 var(--sans,system-ui);text-align:left;cursor:pointer}
.g-lleu-catrow.is-planned{opacity:.55;cursor:default}
.g-lleu-catrow .g-lleu-tag{margin-left:auto}
@media (max-width:600px),(max-height:560px){
  .lleu-panel.g-lleu:not(.g-lleu-page-form)>.g-lleu-cats{flex:none;order:99;padding-right:calc(68px + env(safe-area-inset-right))}   /* his × stays bottom right */
  .lleu-panel.g-lleu:not(.g-lleu-page-form)>.g-lleu-catlist:not([hidden]){flex:1 1 auto;min-height:0;overflow:auto;padding:10px 12px}
  .lleu-panel.g-lleu .lleu-part[data-part="chat"] .lleu-row{padding-right:0}
}
/* 1.28.0 (1018c-Q864 c): folders for Lleu's conversations */
.g-conv-list li.g-conv-chips,.g-conv-list li.g-conv-move{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 6px 8px}
.g-conv-list li.g-conv-chips{border-bottom:1px solid var(--border);margin-bottom:4px}
.g-conv-list li.g-conv-move{padding:2px 10px 10px 18px}
.g-conv-move small{color:var(--muted);font-size:.78rem}
.g-conv-chip{min-height:32px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:600 .8rem/1 var(--sans,system-ui);cursor:pointer}
.g-conv-chip[aria-pressed="true"]{background:var(--action);color:var(--on-action);border-color:var(--action)}
.g-conv-fadd{border-style:dashed;color:var(--muted)}
.g-conv-fdel{display:grid;place-items:center;width:28px;height:28px;margin-left:-4px;border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer}
.g-conv-fdel .g-mi{width:14px;height:14px}
.g-conv-fname{min-height:32px;min-width:0;flex:1 1 140px;padding:0 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:.85rem}
.g-conv-tofolder[aria-expanded="true"]{background:var(--sunken);color:var(--text)}
.g-conv-chip:focus-visible,.g-conv-fdel:focus-visible,.g-conv-fname:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.g-conv-fol{flex:none;padding:1px 7px;border-radius:999px;background:var(--sunken);color:var(--muted);font-size:.7rem;font-weight:600}
/* 1.29.0 (menus.js 1.34.0): the × beside „open as a page“ where his own × moved to the bottom right (phones, small windows) */
.g-lleu-close-top{display:none;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:none;color:var(--text);cursor:pointer}
.g-lleu-close-top:hover{background:var(--sunken)}
.g-lleu-close-top:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (max-width:600px),(max-height:560px){.g-lleu-float .g-lleu-close-top{display:grid}}
/* 1.30.0 (menus.js 1.38.0): the wish card in the chat */
.g-conv-wish{background:transparent;color:var(--accent-text,var(--accent,#fb683e));border:1px solid var(--border)}.g-conv-wish .g-mi{width:18px;height:18px;opacity:1}
.g-wish-card{display:flex;flex-direction:column;gap:8px;max-width:100%!important;width:100%;box-sizing:border-box}
.g-wish-h{margin:0;font-weight:600}
.g-wish-kinds{display:flex;gap:6px}.g-wish-kinds button{min-height:36px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text);font:inherit;cursor:pointer}
.g-wish-kinds button[aria-pressed="true"]{background:var(--action);color:var(--on-action);border-color:transparent}
.g-wish-f{display:flex;flex-direction:column;gap:2px;font-size:.8rem;color:var(--muted)}
.g-wish-f input,.g-wish-f textarea{font:inherit;font-size:.92rem;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px;min-height:40px;box-sizing:border-box;width:100%}
.g-wish-row{display:flex;gap:8px}.g-wish-ok,.g-wish-no{min-height:44px;padding:0 18px;border-radius:999px;font:inherit;font-weight:600;cursor:pointer}
.g-wish-ok{border:0;background:var(--action);color:var(--on-action)}.g-wish-no{border:1px solid var(--border);background:transparent;color:var(--text)}
.g-wish-note{margin:0;font-size:.82rem;color:var(--muted)}
.g-wish-direct{flex-direction:row!important;align-items:center;gap:8px!important;color:var(--text)!important}.g-wish-direct input{width:20px!important;height:20px;min-height:0!important;accent-color:var(--accent,#fb683e)}
.g-chat-msg{position:relative}.g-chat-copy{position:absolute;top:2px;right:2px;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:.9rem;cursor:pointer;opacity:.7}.g-chat-copy:hover,.g-chat-copy:focus-visible{opacity:1;background:color-mix(in srgb,var(--text,#102a43) 8%,transparent)}.g-chat-msg.is-lleu,.g-chat-msg.is-me{padding-right:34px}