:root {
        color-scheme: dark;
        --bg: #0a0a0b;
        --s1: #111113;
        --s2: #18181b;
        --s3: #202024;
        --bd: #26262b;
        --bd2: #34343b;
        --tx: #ededf0;
        --mu: #8c8c96;
        --mu2: #5e5e68;
        --ac: #f6b64a;
        --err: #ff7b72;
        --ok: #5fd68a;
        --sans:
          "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto,
          sans-serif;
        --mono:
          "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
          monospace;
      }
      * {
        box-sizing: border-box;
        margin: 0;
        -webkit-tap-highlight-color: transparent;
      }
      html,
      body {
        height: 100%;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
      }
      body {
        background: var(--bg);
        color: var(--tx);
        font: 15px/1.6 var(--sans);
        -webkit-font-smoothing: antialiased;
        overflow: hidden;
        overscroll-behavior: none;
        position: fixed;
        inset: 0;
        width: 100%;
      }
      button {
        font: inherit;
        color: inherit;
        background: none;
        border: 0;
        cursor: pointer;
        touch-action: manipulation;
      }
      button:focus-visible,
      input:focus-visible,
      textarea:focus-visible,
      a:focus-visible,
      summary:focus-visible {
        outline: 2px solid var(--ac);
        outline-offset: 2px;
      }
      ::selection {
        background: #f6b64a40;
      }
      #app {
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        padding-top: env(safe-area-inset-top, 0px);
        width: 100%;
        overflow: hidden;
      }

      /* header */
      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 18px;
        flex: none;
        min-width: 0;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 9px;
        font-weight: 600;
        font-size: 16px;
        letter-spacing: -0.01em;
        min-width: 0;
        white-space: nowrap;
      }
      .brand svg {
        flex: none;
      }
      .brand .bp,
      .bp {
        font-weight: 500;
        color: var(--mu);
      }
      .brand .bp {
        margin-left: -3px;
      }
      .status {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        color: var(--mu);
        padding: 6px 12px;
        border-radius: 999px;
        border: 1px solid var(--bd);
        max-width: 55vw;
        min-width: 0;
        transition:
          border-color 0.15s,
          color 0.15s;
      }
      .status:hover {
        border-color: var(--bd2);
        color: var(--tx);
      }
      .status span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--mu2);
        flex: none;
      }
      .status.on .dot {
        background: var(--ok);
        box-shadow: 0 0 0 3px #5fd68a22;
      }

      /* thread */
      #scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
        scroll-behavior: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
      }
      #thread {
        max-width: 780px;
        margin: 0 auto;
        padding: 12px 18px 40px;
        display: flex;
        flex-direction: column;
        gap: 26px;
        min-height: 100%;
      }
      .empty {
        margin: auto;
        text-align: center;
        padding: 40px 0 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }
      .empty h1 {
        font-size: 34px;
        font-weight: 600;
        letter-spacing: -0.03em;
        margin-top: 6px;
        line-height: 1.15;
      }
      .empty p {
        color: var(--mu);
        max-width: 420px;
      }
      .sugs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin-top: 14px;
        max-width: 560px;
      }
      .sug {
        border: 1px solid var(--bd);
        border-radius: 999px;
        padding: 7px 14px;
        font-size: 13px;
        color: var(--mu);
        transition: 0.15s;
      }
      .sug:hover {
        color: var(--tx);
        border-color: var(--bd2);
        background: var(--s1);
      }

      .msg.user {
        align-self: flex-end;
        max-width: 86%;
        background: var(--s2);
        border: 1px solid var(--bd);
        padding: 10px 15px;
        border-radius: 20px 20px 6px 20px;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }
      .msg.assistant {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 12px;
      }
      .av {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--s2);
        border: 1px solid var(--bd);
        display: grid;
        place-items: center;
        margin-top: 1px;
      }
      .body {
        min-width: 0;
      }
      .think {
        margin-bottom: 8px;
        display: none;
      }
      .think.show {
        display: block;
      }
      .think summary {
        cursor: pointer;
        color: var(--mu);
        font-size: 13px;
        user-select: none;
        list-style: none;
      }
      .think summary::before {
        content: "\25B8";
        display: inline-block;
        margin-right: 6px;
        transition: transform 0.15s;
      }
      .think[open] summary::before {
        transform: rotate(90deg);
      }
      .think .tb {
        margin-top: 6px;
        padding-left: 12px;
        border-left: 2px solid var(--bd);
        color: var(--mu);
        font-size: 13.5px;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        max-height: 260px;
        overflow: auto;
      }
      .md {
        overflow-wrap: anywhere;
        min-width: 0;
      }
      .md > *:first-child {
        margin-top: 0;
      }
      .md > *:last-child {
        margin-bottom: 0;
      }
      .md p {
        margin: 0.65em 0;
      }
      .md h1,
      .md h2,
      .md h3,
      .md h4 {
        margin: 1.2em 0 0.45em;
        line-height: 1.3;
        letter-spacing: -0.01em;
      }
      .md h1 {
        font-size: 1.4em;
      }
      .md h2 {
        font-size: 1.22em;
      }
      .md h3 {
        font-size: 1.08em;
      }
      .md h4 {
        font-size: 1em;
      }
      .md ul,
      .md ol {
        margin: 0.6em 0;
        padding-left: 1.4em;
      }
      .md li {
        margin: 0.2em 0;
      }
      .md li::marker {
        color: var(--mu);
      }
      .md a {
        color: var(--ac);
        text-underline-offset: 3px;
      }
      .md blockquote {
        margin: 0.8em 0;
        padding: 2px 0 2px 14px;
        border-left: 2px solid var(--ac);
        color: var(--mu);
      }
      .md hr {
        border: 0;
        border-top: 1px solid var(--bd);
        margin: 1.2em 0;
      }
      .md code {
        font: 13px var(--mono);
        background: var(--s3);
        padding: 1px 6px;
        border-radius: 6px;
      }
      .code {
        margin: 0.9em 0;
        border: 1px solid var(--bd);
        border-radius: 12px;
        background: #0d0d0f;
        overflow: hidden;
        max-width: 100%;
      }
      .code-h {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 8px 6px 14px;
        background: var(--s1);
        border-bottom: 1px solid var(--bd);
        font: 12px var(--mono);
        color: var(--mu);
      }
      .code-h button {
        font: 12px var(--sans);
        color: var(--mu);
        padding: 3px 9px;
        border-radius: 7px;
      }
      .code-h button:hover {
        background: var(--s3);
        color: var(--tx);
      }
      .code pre {
        padding: 13px 15px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .code pre code {
        background: none;
        padding: 0;
        font: 13px/1.65 var(--mono);
        color: #dcdce2;
      }
      .tbl {
        overflow-x: auto;
        margin: 0.9em 0;
        -webkit-overflow-scrolling: touch;
      }
      .md table {
        border-collapse: collapse;
        font-size: 14px;
        min-width: 60%;
      }
      .md th,
      .md td {
        border: 1px solid var(--bd);
        padding: 6px 12px;
        text-align: left;
      }
      .md th {
        background: var(--s1);
        font-weight: 600;
      }
      .typing {
        display: inline-flex;
        gap: 5px;
        padding: 8px 0;
      }
      .typing i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--mu);
        animation: bl 1.1s infinite;
      }
      .typing i:nth-child(2) {
        animation-delay: 0.15s;
      }
      .typing i:nth-child(3) {
        animation-delay: 0.3s;
      }
      @keyframes bl {
        0%,
        60%,
        100% {
          opacity: 0.25;
          transform: none;
        }
        30% {
          opacity: 1;
          transform: translateY(-3px);
        }
      }
      .err {
        margin-top: 10px;
        border: 1px solid #ff7b7240;
        background: #ff7b720d;
        color: #ffb4ae;
        border-radius: 12px;
        padding: 10px 14px;
        font-size: 13.5px;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
      }
      .cont {
        display: none;
        margin-top: 12px;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 12px;
        border: 1px solid #f6b64a55;
        background: #f6b64a0f;
        border-radius: 14px;
        padding: 10px 12px;
        font-size: 13px;
        color: var(--mu);
      }
      .cont.show {
        display: flex;
      }
      .cont span {
        flex: 1 1 180px;
        min-width: 0;
      }
      .cbtn {
        background: var(--ac);
        color: #1a1305;
        font-weight: 500;
        font-size: 13.5px;
        padding: 8px 14px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .cbtn:hover {
        filter: brightness(1.08);
      }
      .meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 14px;
        margin-top: 10px;
        font: 12px var(--mono);
        color: var(--mu2);
      }
      .meta .acts {
        display: flex;
        gap: 2px;
        margin-left: -6px;
      }
      .meta button {
        font: 12px var(--sans);
        color: var(--mu);
        padding: 3px 8px;
        border-radius: 7px;
      }
      .meta button:hover {
        background: var(--s2);
        color: var(--tx);
      }
      #jump {
        position: sticky;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: none;
        margin: 0 auto;
        width: max-content;
        background: var(--s2);
        border: 1px solid var(--bd2);
        border-radius: 999px;
        padding: 6px 14px;
        font-size: 13px;
        color: var(--mu);
      }
      #jump.show {
        display: block;
      }

      /* composer */
      .dock {
        flex: none;
        padding: 6px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        position: relative;
      }
      .dock-in {
        max-width: 780px;
        margin: 0 auto;
      }
      .skillbar {
        display: none;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 8px;
      }
      .skillbar.show {
        display: flex;
      }
      .composer {
        background: #0f0f11;
        border: 1px solid var(--bd);
        border-radius: 22px;
        padding: 14px 14px 10px 18px;
        transition: border-color 0.15s;
      }
      .composer:focus-within {
        border-color: var(--bd2);
      }
      #input {
        width: 100%;
        background: none;
        border: 0;
        outline: 0;
        resize: none;
        color: var(--tx);
        font: 16px/1.55 var(--sans);
        max-height: 200px;
        min-height: 26px;
        display: block;
      }
      #input::placeholder {
        color: var(--mu2);
      }
      .crow {
        display: flex;
        align-items: center;
        margin-top: 8px;
        margin-left: -6px;
        gap: 4px;
      }
      .sp {
        flex: 1;
      }
      .ib {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: var(--mu);
        transition: 0.15s;
        flex: none;
      }
      .ib:hover {
        background: var(--s2);
        color: var(--tx);
      }
      .ib.rec {
        color: var(--err);
        background: #ff7b7218;
        animation: pu 1.2s infinite;
      }
      @keyframes pu {
        50% {
          box-shadow: 0 0 0 6px #ff7b7210;
        }
      }
      .send {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #f2f2f4;
        color: #0a0a0b;
        display: grid;
        place-items: center;
        margin-left: 2px;
        flex: none;
        transition:
          transform 0.12s,
          opacity 0.15s;
      }
      .send:hover {
        transform: scale(1.06);
      }
      .send[disabled] {
        opacity: 0.35;
        cursor: default;
        transform: none;
      }
      .pills {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 10px;
        min-width: 0;
      }
      .pill,
      .pib {
        height: 34px;
        border: 1px solid var(--bd);
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--mu);
        font-size: 13px;
        transition: 0.15s;
        white-space: nowrap;
      }
      .pill {
        padding: 0 14px;
      }
      .pib {
        width: 34px;
        justify-content: center;
        flex: none;
      }
      .pill:hover,
      .pib:hover {
        border-color: var(--bd2);
        color: var(--tx);
        background: var(--s1);
      }
      #modelPill {
        max-width: 46vw;
        min-width: 0;
      }
      #modelPill span {
        overflow: hidden;
        text-overflow: ellipsis;
      }
      #modelPill svg,
      #libBtn svg {
        flex: none;
      }
      .hint {
        text-align: center;
        font-size: 12px;
        color: var(--mu2);
        margin-top: 10px;
      }

      /* popover + menus */
      .pop {
        position: fixed;
        z-index: 30;
        background: var(--s1);
        border: 1px solid var(--bd2);
        border-radius: 16px;
        box-shadow: 0 20px 50px #000a;
        display: none;
        overflow: hidden;
      }
      .pop.show {
        display: block;
        animation: pi 0.14s ease-out;
      }
      @keyframes pi {
        from {
          opacity: 0;
          transform: translateY(6px);
        }
      }
      #modelPop {
        width: min(400px, calc(100vw - 24px));
      }
      .sbox {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--bd);
        color: var(--mu);
      }
      .sbox input {
        flex: 1;
        background: none;
        border: 0;
        outline: 0;
        color: var(--tx);
        font: 16px var(--sans);
        min-width: 0;
      }
      .sbox small {
        font-size: 12px;
        color: var(--mu2);
        white-space: nowrap;
      }
      #mlist {
        max-height: min(340px, 46vh);
        overflow-y: auto;
        padding: 6px;
        -webkit-overflow-scrolling: touch;
      }
      .mi {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        text-align: left;
        padding: 8px 10px;
        border-radius: 10px;
        font: 13px var(--mono);
        color: #cfcfd6;
      }
      .mi.hl {
        background: var(--s3);
        color: var(--tx);
      }
      .mi.sel {
        color: var(--ac);
      }
      .mi b {
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .mi.cust {
        font-family: var(--sans);
        color: var(--mu);
      }
      .mnote {
        padding: 10px 12px;
        font-size: 12.5px;
        color: var(--mu2);
      }
      .menu {
        min-width: 210px;
        max-width: calc(100vw - 24px);
        max-height: 40vh;
        overflow-y: auto;
        padding: 6px;
      }
      .menu button {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: 10px;
        font-size: 14px;
        text-align: left;
        color: #d4d4da;
      }
      .menu button:hover,
      .menu button.hl {
        background: var(--s3);
      }
      #slashPop button {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
      }
      #slashPop span {
        font-size: 12px;
        color: var(--mu);
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /* modal */
      .ov {
        position: fixed;
        inset: 0;
        background: #000a;
        backdrop-filter: blur(6px);
        z-index: 40;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 16px;
      }
      .ov.show {
        display: flex;
      }
      .card {
        width: min(500px, 100%);
        max-height: calc(100dvh - 32px);
        overflow-y: auto;
        background: var(--s1);
        border: 1px solid var(--bd2);
        border-radius: 22px;
        padding: 24px;
        animation: pi 0.16s ease-out;
        -webkit-overflow-scrolling: touch;
      }
      .card h2 {
        font-size: 20px;
        letter-spacing: -0.02em;
        font-weight: 600;
      }
      .card .sub {
        color: var(--mu);
        font-size: 14px;
        margin: 4px 0 18px;
      }
      .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 16px;
      }
      .chip {
        border: 1px solid var(--bd);
        border-radius: 999px;
        padding: 4px 11px;
        font-size: 12.5px;
        color: var(--mu);
      }
      .chip:hover {
        color: var(--tx);
        border-color: var(--bd2);
        background: var(--s2);
      }
      label.f {
        display: block;
        font-size: 13px;
        color: var(--mu);
        margin: 14px 0 6px;
      }
      .in {
        width: 100%;
        background: #0a0a0b;
        border: 1px solid var(--bd);
        border-radius: 12px;
        padding: 11px 13px;
        color: var(--tx);
        font: 14px var(--mono);
        outline: 0;
        transition:
          border-color 0.15s,
          box-shadow 0.15s;
      }
      textarea.in {
        font-family: var(--sans);
        resize: vertical;
        min-height: 84px;
        line-height: 1.5;
      }
      .in:focus {
        border-color: var(--ac);
        box-shadow: 0 0 0 3px #f6b64a1f;
      }
      .kw {
        position: relative;
      }
      .kw button {
        position: absolute;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        color: var(--mu);
        padding: 5px 9px;
        border-radius: 8px;
      }
      .kw button:hover {
        background: var(--s3);
        color: var(--tx);
      }
      .kw .in {
        padding-right: 60px;
      }
      .chk {
        display: flex;
        gap: 9px;
        align-items: flex-start;
        font-size: 13px;
        color: var(--mu);
        margin-top: 14px;
      }
      .chk input {
        margin-top: 4px;
        accent-color: var(--ac);
      }
      .two {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      .btns {
        display: flex;
        gap: 10px;
        margin-top: 20px;
        justify-content: flex-end;
        flex-wrap: wrap;
      }
      .btn {
        padding: 10px 18px;
        border-radius: 12px;
        font-weight: 500;
        font-size: 14px;
        border: 1px solid var(--bd);
      }
      .btn:hover {
        background: var(--s2);
      }
      .btn.pri {
        background: #f2f2f4;
        color: #0a0a0b;
        border-color: #f2f2f4;
      }
      .btn.pri:hover {
        background: #fff;
      }
      .btn[disabled] {
        opacity: 0.5;
        cursor: default;
      }
      .note {
        font-size: 12.5px;
        color: var(--mu2);
        margin-top: 14px;
        line-height: 1.5;
      }
      .cerr {
        margin-top: 14px;
        font-size: 13px;
        color: #ffb4ae;
        border: 1px solid #ff7b7240;
        background: #ff7b720d;
        border-radius: 12px;
        padding: 10px 13px;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        display: none;
      }
      .cerr.show {
        display: block;
      }
      .cerr a {
        color: var(--ac);
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 3px;
      }
      .plist {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 4px;
      }
      .pitem {
        display: flex;
        gap: 10px;
        align-items: stretch;
      }
      .pitem > button.use {
        flex: 1;
        min-width: 0;
        text-align: left;
        border: 1px solid var(--bd);
        border-radius: 14px;
        padding: 11px 14px;
      }
      .pitem > button.use:hover {
        border-color: var(--bd2);
        background: var(--s2);
      }
      .pitem strong {
        display: block;
        font-weight: 500;
        font-size: 14px;
      }
      .pitem span {
        display: block;
        font-size: 12.5px;
        color: var(--mu);
        margin-top: 1px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .pitem .del {
        width: 36px;
        border-radius: 12px;
        color: var(--mu2);
        font-size: 18px;
      }
      .pitem .del:hover {
        background: var(--s3);
        color: var(--err);
      }
      .toast {
        position: fixed;
        left: 50%;
        bottom: calc(120px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
        background: var(--s3);
        border: 1px solid var(--bd2);
        padding: 8px 16px;
        border-radius: 999px;
        font-size: 13px;
        z-index: 60;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
        max-width: 90vw;
        text-align: center;
      }
      .toast.show {
        opacity: 1;
      }
      .skill {
        font: 12px var(--mono);
        color: var(--ac);
        border: 1px solid #f6b64a55;
        border-radius: 999px;
        padding: 3px 10px;
        white-space: nowrap;
      }
      .fhead {
        font-weight: 500;
        font-size: 14px;
        margin: 18px 0 12px;
        padding-top: 16px;
        border-top: 1px solid var(--bd);
      }
      #profWrap + .fhead {
        display: block;
      }
      .prow {
        display: flex;
        gap: 6px;
        align-items: stretch;
        margin-bottom: 6px;
      }
      .prow .use {
        flex: 1;
        min-width: 0;
        text-align: left;
        border: 1px solid var(--bd);
        border-radius: 14px;
        padding: 9px 13px;
        display: flex;
        flex-direction: column;
      }
      .prow.on .use {
        border-color: #f6b64a66;
      }
      .prow .use:hover {
        background: var(--s2);
        border-color: var(--bd2);
      }
      .prow .use strong {
        font-weight: 500;
        font-size: 14px;
      }
      .prow .use strong small {
        font-weight: 400;
        font-size: 11px;
        color: var(--mu2);
        margin-left: 6px;
      }
      .prow .use span {
        font: 12px var(--mono);
        color: var(--mu);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .mini {
        padding: 0 12px;
        border-radius: 12px;
        font-size: 13px;
        color: var(--mu);
        border: 1px solid var(--bd);
      }
      .mini:hover {
        background: var(--s3);
        color: var(--tx);
      }
      .mini.del {
        font-size: 18px;
      }
      .mini.del:hover {
        color: var(--err);
      }

      /* phones */
      @media (max-width: 560px) {
        .top {
          padding: 10px 12px;
        }
        .brand {
          font-size: 15px;
          gap: 7px;
        }
        .brand svg {
          width: 20px;
          height: 20px;
        }
        .status {
          max-width: 44vw;
          padding: 6px 10px;
          font-size: 12.5px;
        }
        #thread {
          padding: 8px 14px 24px;
          gap: 22px;
        }
        .empty {
          padding: 24px 0 40px;
        }
        .empty h1 {
          font-size: 27px;
        }
        .msg.user {
          max-width: 92%;
        }
        .msg.assistant {
          grid-template-columns: 24px minmax(0, 1fr);
          gap: 10px;
        }
        .av {
          width: 24px;
          height: 24px;
        }
        .code pre {
          padding: 11px 12px;
        }
        .meta button {
          padding: 7px 10px;
        }
        .cont {
          padding: 10px;
        }
        .cbtn {
          width: 100%;
          justify-content: center;
          padding: 11px 14px;
        }
        .dock {
          padding: 4px 10px calc(10px + env(safe-area-inset-bottom, 0px));
        }
        .composer {
          border-radius: 20px;
          padding: 12px 12px 8px 14px;
        }
        .pills {
          gap: 6px;
          margin-top: 8px;
        }
        .pills .sp {
          display: none;
        }
        #modelPill {
          flex: 1 1 auto;
          max-width: none;
          justify-content: flex-start;
          padding: 0 12px;
        }
        #libBtn {
          width: 34px;
          padding: 0;
          justify-content: center;
          flex: none;
        }
        #libBtn .lbl {
          display: none;
        }
        .hint {
          display: none;
        }
        #modelPop {
          left: 8px !important;
          right: 8px !important;
          width: auto !important;
          top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
          bottom: auto !important;
        }
        #mlist {
          max-height: min(320px, 50vh);
        }
        .ov {
          align-items: flex-end;
          padding: 0;
        }
        .card {
          width: 100%;
          max-height: 92dvh;
          border-radius: 22px 22px 0 0;
          padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
        }
        .in {
          font-size: 16px;
        }
        .two {
          grid-template-columns: 1fr;
        }
        .btns .btn {
          flex: 1 1 auto;
        }
        .prow .use,
        .pitem > button.use {
          padding: 11px 13px;
        }
        .mini {
          min-width: 44px;
        }
        .toast {
          bottom: calc(140px + env(safe-area-inset-bottom, 0px));
        }
      }
      @media (max-width: 360px) {
        .status span {
          max-width: 70px;
        }
        .brand .bp {
          display: none;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        * {
          animation: none !important;
          transition: none !important;
        }
      }