:root {
      color-scheme: light;
      --canvas: #eeeff1;
      --frame: #171719;
      --surface: #fff;
      --ink: #17181c;
      --muted: #60636a;
      --line: #e3e5e8;
      --soft: #f4f5f7;
      --red: #f62817;
      --approve: #16683f;
      --reject: #f62817;
      font: 16px/1.4 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; }
    body {
      margin: 0;
      min-block-size: 100vh;
      min-block-size: 100dvh;
      padding-block-start: calc(28px + max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)));
      padding-block-end: calc(20px + max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)));
      padding-inline-start: calc(var(--page-gutter, 16px) + max(env(safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px)));
      padding-inline-end: calc(var(--page-gutter, 16px) + max(env(safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px)));
      background: var(--canvas);
      color: var(--ink);
    }
    button, select { font: inherit; color: inherit; }
    button, summary, select { -webkit-tap-highlight-color: transparent; }
    button, summary { cursor: pointer; touch-action: manipulation; }
    :focus-visible { outline: 2px solid #406bcc; outline-offset: 3px; }
    [hidden] { display: none !important; }

    .widget { width: min(100%, 460px); margin-inline: auto; }
    .robot {
      position: relative;
      isolation: isolate;
      padding: 0 6px 12px;
      border: 1px solid #29292c;
      border-radius: 32px;
      background: var(--frame);
      box-shadow: 0 12px 26px #191b2424, 0 2px 5px #191b241a, inset 0 1px #ffffff18;
    }
    .antenna {
      position: absolute;
      inset-block-start: -13px;
      inset-inline-start: calc(50% - 6px);
      width: 12px;
      height: 9px;
      border: 2px solid var(--frame);
      border-radius: 5px;
      background: var(--red);
    }
    .antenna::after {
      content: "";
      position: absolute;
      inset: 7px 2px auto;
      height: 6px;
      background: var(--frame);
    }
    .brand-bar {
      min-height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 0 15px;
    }
    .visor {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 48px;
      height: 20px;
      border: 1px solid #424146;
      border-radius: 16px;
      background: #09090b;
    }
    .visor::before, .visor::after {
      content: "";
      width: 10px;
      height: 7px;
      border-radius: 9px 9px 0 0;
      border-top: 3px solid #fff;
    }
    .ear {
      position: absolute;
      z-index: -1;
      inset-block-start: 18px;
      width: 9px;
      height: 24px;
      border-radius: 6px;
      background: var(--red);
      box-shadow: inset 0 1px #ffffff42;
    }
    .ear-left { inset-inline-start: -6px; }
    .ear-right { inset-inline-end: -6px; }
    .robot::after {
      content: "";
      position: absolute;
      inset: auto calc(50% - 17px) 4px;
      height: 3px;
      border-radius: 3px;
      background: var(--red);
    }
    .surface {
      background: var(--surface);
      border-radius: 23px;
      padding: 18px 15px 15px;
    }
    h1 { margin: 0 0 14px; font-size: .875rem; font-weight: 400; line-height: 1.4; color: var(--muted); }
    .decisions, .task-actions, .dialog-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .decisions { margin-block: 15px 14px; }
    .button {
      display: inline-grid;
      place-items: center;
      min-height: 44px;
      border: 1px solid transparent;
      border-radius: 11px;
      padding: 8px;
      font-size: .875rem;
      font-weight: 500;
      line-height: 1.2;
      text-align: center;
      overflow-wrap: anywhere;
    }
    .button:active { filter: brightness(.92); }
    .button:disabled { opacity: .48; cursor: default; }
    .approve { color: #fff; background: var(--approve); }
    .reject { color: #a8170b; background: #fff2f0; border-color: var(--red); }
    .secondary { border-color: var(--line); background: var(--surface); }
    .neutral { color: #fff; background: #26272d; }
    .tasks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .task {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--surface);
    }
    .task h2 { margin: 0; font-size: 1.25rem; }
    .task-title {
      width: 100%;
      min-height: 50px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) 12px;
      align-items: start;
      gap: 8px;
      padding: 15px 11px;
      border: 0;
      border-radius: 13px;
      background: transparent;
      font-weight: 600;
      letter-spacing: -.012em;
      line-height: 1.25;
      text-align: start;
    }
    .number { color: var(--muted); font-size: .875rem; padding-top: 4px; }
    .task:has([aria-expanded="true"]) { border-color: #bfc2c8; }
    .task-title[aria-expanded="true"] { box-shadow: inset 3px 0 var(--red); border-radius: 0; }
    .task-name { overflow-wrap: anywhere; text-wrap: pretty; }
    .chevron {
      display: inline-block;
      width: 7px;
      height: 7px;
      margin-block-start: 4px;
      border: solid currentColor;
      border-width: 0 1.5px 1.5px 0;
      color: var(--muted);
      transform: rotate(45deg);
    }
    [aria-expanded="true"] > .chevron, details[open] summary > .chevron {
      transform: translateY(3px) rotate(225deg);
    }
    .task-body { padding: 0 11px 11px; }
    .metadata {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      padding-block: 10px;
      margin: 0;
      border-top: 1px solid var(--line);
    }
    .metadata dt { color: var(--muted); font-size: .75rem; }
    .metadata dd { margin: 2px 0 0; font-size: .875rem; font-weight: 500; overflow-wrap: anywhere; }
    .metadata time { white-space: nowrap; font-variant-numeric: tabular-nums; }
    .description { border-top: 1px solid var(--line); }
    .description summary {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-inline-end: 5px;
      border-radius: 6px;
      list-style: none;
      font-size: .875rem;
      font-weight: 500;
    }
    .description summary::-webkit-details-marker { display: none; }
    .description summary .chevron { margin-block-start: -4px; flex: none; }
    .description p { margin: -1px 0 12px; color: #33363c; font-size: .9375rem; line-height: 1.5; overflow-wrap: anywhere; }
    .task-actions { grid-template-columns: minmax(0, 1fr) minmax(77px, .5fr); }
    .source { margin: 12px 0 0; color: var(--muted); font-size: .75rem; overflow-wrap: anywhere; }
    .demo { margin: 12px 0 0; color: var(--muted); font-size: .75rem; text-align: center; }
    .feedback { margin: 12px 0 0; color: #28553d; font-size: .875rem; font-weight: 500; }
    .feedback:empty { margin: 0; }
    dialog {
      width: min(calc(100% - 32px), 370px);
      max-height: calc(100% - 32px);
      border: 1px solid var(--line);
      border-radius: 19px;
      padding: 19px;
      background: var(--surface);
      color: var(--ink);
      box-shadow: 0 18px 50px #0003;
    }
    dialog::backdrop { background: #15151ab0; }
    dialog h2 { font-weight: 600; margin: 0 0 8px; font-size: 1.125rem; line-height: 1.25; }
    dialog p { margin: 0 0 13px; font-size: .875rem; color: var(--muted); }
    dialog label { display: block; margin-bottom: 5px; font-size: .875rem; font-weight: 500; }
    dialog select { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 9px; padding: 8px; margin-bottom: 13px; background: var(--surface); }
    @media (max-width: 345px) {
      body { --page-gutter: 12px; }
      .surface { padding-inline: 11px; }
      .decisions .button, .task-actions .button { padding-inline: 5px; font-size: .8125rem; }
    }
    @media (min-width: 600px) { body { padding-block-start: 44px; } }