loadtoagent 1.0.0

package/renderer/styles-responsive-product.css

@@ -0,0 +1,689 @@
+/*
+ * Responsive product surfaces
+ * ---------------------------
+ * Overlays, run composer, onboarding, settings, and update surfaces.
+ * Breakpoints are ordered wide-to-narrow, followed by height and motion rules.
+ */
+
+/* Compact screens ≤ 1100px: reflow onboarding and setup choices into fewer columns. */
+@media (max-width:1100px) {
+  .beginner-guide-intro {
+    display: flex;
+    align-items: baseline;
+    gap: 9px;
+  }
+
+  .beginner-guide-intro span {
+    margin: 0;
+  }
+
+  .guide-toggle {
+    order: 3;
+  }
+
+  .beginner-guide {
+    grid-template-columns: 1fr;
+    padding-top: 18px;
+  }
+
+  .beginner-guide ol {
+    grid-template-columns: repeat(2,minmax(0,1fr));
+  }
+}
+
+/* Compact screens ≤ 900px: reflow onboarding and setup choices into fewer columns. */
+@media (max-width:900px) {
+  .provider-rail-item small {
+    display: none;
+  }
+
+  .provider-rail-item {
+    justify-content: center;
+  }
+
+  .section-title {
+    justify-content: center;
+  }
+
+  .runtime-segment>header {
+    flex-wrap: wrap;
+  }
+
+  .runtime-segment>header em {
+    display: none;
+  }
+
+  .runtime-segment .agent-flow-overview {
+    grid-template-columns: 1fr;
+  }
+
+  .language-settings-card {
+    grid-template-columns: 48px minmax(0,1fr);
+  }
+
+  .language-select {
+    grid-column: 1/-1;
+  }
+
+  .version-route {
+    grid-template-columns: 1fr;
+  }
+
+  .version-connector {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+
+  .version-connector i {
+    width: 1px;
+    height: 15px;
+    background: #345e54!important;
+  }
+
+  .update-console {
+    grid-template-columns: 48px minmax(0,1fr);
+  }
+
+  .update-actions {
+    grid-column: 1/-1;
+    justify-content: flex-end;
+  }
+
+  .settings-meta-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .version-node {
+    min-height: 100px;
+  }
+}
+
+/* Compact screens ≤ 720px: use edge-to-edge dialogs and single-column task forms. */
+@media (max-width:720px) {
+  .beginner-guide li:first-child {
+    border-top: 0;
+  }
+
+  .beginner-guide-intro {
+    display: block;
+  }
+
+  .beginner-guide-intro span {
+    margin-top: 5px;
+  }
+
+  .child-row {
+    margin-left: 13px;
+    margin-right: 13px;
+  }
+
+  .detail-drawer {
+    width: 100vw;
+    height: 100vh;
+    height: 100dvh;
+    border-left: 0;
+  }
+
+  .drawer-head {
+    padding: 16px 14px 13px;
+  }
+
+  .drawer-meta {
+    padding: 0 14px 13px;
+  }
+
+  .drawer-tabs {
+    padding: 0 8px;
+    overflow-x: auto;
+  }
+
+  .drawer-tab {
+    min-width: 0;
+    flex: 1;
+    padding-inline: 8px;
+    white-space: nowrap;
+  }
+
+  .drawer-content {
+    padding: 15px 14px calc(24px + env(safe-area-inset-bottom));
+  }
+
+  .modal-backdrop {
+    align-items: end;
+    padding: 0;
+  }
+
+  .run-provider-picker {
+    grid-template-columns: repeat(2,minmax(0,1fr));
+  }
+
+  .modal-actions {
+    display: grid;
+    grid-template-columns: repeat(2,minmax(0,1fr));
+  }
+
+  .modal-actions button {
+    width: 100%;
+    padding-inline: 8px;
+  }
+
+  .toast {
+    width: max-content;
+    max-width: calc(100vw - 28px);
+    bottom: calc(78px + env(safe-area-inset-bottom));
+    text-align: center;
+  }
+
+  .settings-section {
+    margin-top: 20px;
+  }
+
+  .update-notice {
+    margin-top: 15px;
+  }
+
+  .update-notice small {
+    display: none;
+  }
+
+  .update-notice button {
+    padding-inline: 9px;
+  }
+
+  .settings-head {
+    align-items: flex-start;
+  }
+
+  .settings-head h2 {
+    font-size: 21px;
+  }
+
+  .settings-head p:last-child {
+    font-size: 10px;
+  }
+
+  .settings-emblem {
+    width: 46px;
+    height: 46px;
+  }
+
+  .language-settings-card {
+    padding: 15px;
+  }
+
+  .version-route {
+    padding: 13px;
+  }
+
+  .version-node {
+    padding: 15px;
+  }
+
+  .version-node strong {
+    font-size: 24px;
+  }
+
+  .update-console {
+    padding: 16px;
+  }
+
+  .update-actions {
+    justify-content: stretch;
+  }
+
+  .update-actions button {
+    flex: 1;
+  }
+
+  .update-progress {
+    margin-right: 16px;
+    margin-left: 16px;
+  }
+
+  .update-error {
+    margin-right: 16px;
+    margin-left: 16px;
+  }
+
+  .release-notes>div {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .release-notes pre {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+
+  .new-run-cta-copy {
+    justify-content: center;
+  }
+
+  .new-run-cta-copy small {
+    display: none;
+  }
+
+  .run-composer {
+    width: 100%;
+    max-width: none;
+    border-radius: 20px 20px 0 0;
+  }
+
+  .run-composer .modal-head {
+    padding: 18px 16px 14px;
+  }
+
+  .run-composer .modal-head h2 {
+    font-size: 20px;
+  }
+
+  .run-step {
+    padding: 16px;
+  }
+
+  .run-composer .run-provider-picker {
+    grid-template-columns: repeat(2,minmax(0,1fr));
+  }
+
+  .run-advanced {
+    margin-inline: 16px;
+  }
+
+  .run-composer .form-error {
+    margin-inline: 16px;
+  }
+
+  .run-modal-actions {
+    padding-inline: 16px;
+  }
+
+  .run-shortcut-hint {
+    display: none;
+  }
+
+  .sidebar .nav-item[data-view="settings"] {
+    display: none;
+  }
+
+  .mobile-more-nav {
+    display: grid;
+  }
+
+  .mobile-tools-menu {
+    position: fixed;
+    z-index: 45;
+    right: 10px;
+    bottom: calc(76px + env(safe-area-inset-bottom));
+    left: 10px;
+    max-width: 430px;
+    margin-left: auto;
+    padding: 12px;
+    border: 1px solid #324456;
+    border-radius: 16px;
+    background: #111925;
+    box-shadow: 0 24px 70px rgba(0,0,0,.62);
+  }
+
+  .mobile-tools-menu:not(.hidden) {
+    display: grid;
+    gap: 7px;
+  }
+
+  .mobile-tools-menu>div {
+    padding: 4px 5px 8px;
+  }
+
+  .mobile-tools-menu>div b {
+    display: block;
+    font-size: 14px;
+  }
+
+  .mobile-tools-menu>div span {
+    display: block;
+    margin-top: 3px;
+    color: #9ba9b8;
+    font-size: 11px;
+  }
+
+  .mobile-tools-menu>button {
+    min-height: 58px;
+    display: grid;
+    grid-template-columns: 40px minmax(0,1fr);
+    align-items: center;
+    gap: 10px;
+    padding: 8px 10px;
+    border: 1px solid #263646;
+    border-radius: 12px;
+    background: #0d141e;
+    color: #dce6ee;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .mobile-tools-menu>button:hover {
+    border-color: #45647a;
+    background: #152230;
+  }
+
+  .mobile-tools-menu i {
+    width: 38px;
+    height: 38px;
+    display: grid;
+    place-items: center;
+    border-radius: 10px;
+    background: #172736;
+    color: #87def7;
+    font-style: normal;
+  }
+
+  .mobile-tools-menu b {
+    display: block;
+    font-size: 12px;
+  }
+
+  .mobile-tools-menu small {
+    display: block;
+    margin-top: 4px;
+    color: #94a3b3;
+    font-size: 10px;
+  }
+
+  .guide-toggle {
+    order: 0;
+    grid-column: 1/-1;
+    width: 100%;
+  }
+
+  .new-run-cta {
+    min-width: 0;
+    height: 46px;
+    padding-inline: 9px;
+    width: 100%;
+  }
+
+  .beginner-guide {
+    margin-top: 16px;
+    gap: 14px;
+    padding: 16px 44px 16px 14px;
+  }
+
+  .beginner-guide ol {
+    grid-template-columns: 1fr;
+    display: flex;
+    gap: 9px;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: thin;
+  }
+
+  .beginner-guide li {
+    border-left: 0;
+    border-top: 1px solid #263746;
+    padding: 9px 2px;
+    min-width: min(82vw,330px);
+    scroll-snap-align: start;
+  }
+
+  .beginner-guide li>button {
+    min-height: 116px;
+  }
+
+  .guide-dismiss {
+    top: 10px;
+    right: 9px;
+    font-size: 0;
+  }
+
+  .guide-dismiss:after {
+    content: "×";
+    font-size: 18px;
+  }
+
+  body[data-current-view="settings"] .topbar {
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+  }
+
+  body[data-current-view="settings"] .topbar h1 {
+    font-size: 19px;
+  }
+
+  .run-modal {
+    width: 100%;
+    max-width: none;
+    max-height: 94vh;
+    max-height: 94dvh;
+    padding: 19px 16px calc(18px + env(safe-area-inset-bottom));
+    border-right: 0;
+    border-bottom: 0;
+    border-left: 0;
+    border-radius: 20px 20px 0 0;
+    scroll-padding-bottom: 88px;
+    background: #0b131c;
+  }
+}
+
+/* Compact screens ≤ 640px: use edge-to-edge dialogs and single-column task forms. */
+@media (max-width:640px) {
+  .run-provider-picker {
+    grid-template-columns: repeat(2,1fr);
+  }
+
+  .runtime-strip {
+    grid-template-columns: auto 1fr;
+  }
+
+  .runtime-strip>span:last-child {
+    grid-column: 1/-1;
+  }
+}
+
+/* Compact screens ≤ 520px: keep compact forms and dialog actions inside the safe area. */
+@media (max-width:520px) {
+  .runtime-segment>header {
+    display: grid;
+    grid-template-columns: 39px minmax(0,1fr) auto;
+    align-items: center;
+    gap: 9px;
+  }
+
+  .runtime-segment>header>.runtime-segment-icon {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .runtime-segment>header>span:nth-child(2) {
+    grid-column: 2;
+    grid-row: 1;
+    min-width: 0;
+  }
+
+  .runtime-segment>header>strong {
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  .runtime-segment>header>.live-tmux-overview-open {
+    grid-column: 1/4;
+    grid-row: 2;
+    width: 100%;
+    margin: 0;
+  }
+}
+
+/* Compact screens ≤ 430px: keep compact forms and dialog actions inside the safe area. */
+@media (max-width:430px) {
+  .settings-head p:last-child {
+    display: none;
+  }
+
+  .language-settings-card {
+    grid-template-columns: 1fr;
+  }
+
+  .language-settings-mark {
+    width: 42px;
+    height: 42px;
+  }
+
+  .language-select {
+    grid-column: auto;
+  }
+
+  .update-console {
+    grid-template-columns: 1fr;
+  }
+
+  .update-state-mark {
+    width: 42px;
+    height: 42px;
+  }
+
+  .update-actions {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .release-notes>div {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 7px;
+  }
+}
+
+/* Compact screens ≤ 420px: keep compact forms and dialog actions inside the safe area. */
+@media (max-width:420px) {
+  .primary-button {
+    font-size: 11px;
+  }
+
+  .ghost-button {
+    font-size: 11px;
+  }
+
+  .beginner-guide li {
+    grid-template-columns: 26px minmax(0,1fr);
+    gap: 8px;
+  }
+
+  .beginner-guide li>i {
+    width: 24px;
+    height: 24px;
+  }
+
+  .drawer-content {
+    padding-inline: 11px;
+  }
+
+  .drawer-head {
+    padding-right: 11px;
+    padding-left: 11px;
+  }
+
+  .drawer-meta {
+    padding-right: 11px;
+    padding-left: 11px;
+  }
+
+  .run-modal {
+    padding-right: 13px;
+    padding-left: 13px;
+  }
+
+  .new-run-cta-copy b {
+    font-size: 11px;
+  }
+
+  .run-composer .modal-head {
+    padding-inline: 14px;
+  }
+
+  .run-step {
+    padding: 14px;
+  }
+
+  .run-prompt-tools {
+    align-items: flex-end;
+    flex-direction: column;
+  }
+
+  .run-prompt-examples {
+    width: 100%;
+  }
+
+  .run-composer .path-field {
+    display: grid;
+    grid-template-columns: minmax(0,1fr) 86px;
+  }
+
+  .run-composer .path-field button {
+    width: 86px;
+  }
+
+  .run-advanced {
+    margin-inline: 14px;
+  }
+
+  .run-composer .form-error {
+    margin-inline: 14px;
+  }
+
+  .run-modal-actions {
+    grid-template-columns: 84px minmax(0,1fr);
+    padding-inline: 14px;
+  }
+
+  .run-modal-actions .ghost-button {
+    width: 100%;
+  }
+
+  .run-submit-button {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .guide-toggle {
+    min-width: 0;
+  }
+
+  .guide-toggle b {
+    font-size: 11px;
+  }
+
+  .run-provider-docs {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Short screens ≤ 720px high: shorten dialogs while keeping their primary actions in view. */
+@media (max-height:720px) {
+  .run-composer textarea#runPrompt {
+    min-height: 88px;
+  }
+
+  .run-step {
+    padding-top: 14px;
+    padding-bottom: 14px;
+  }
+}
+
+/* Short screens ≤ 620px high: shorten dialogs while keeping their primary actions in view. */
+@media (max-height:620px) {
+  .run-modal {
+    max-height: 100vh;
+    max-height: 100dvh;
+    border-radius: 0;
+  }
+
+  .detail-drawer {
+    height: 100vh;
+    height: 100dvh;
+  }
+}
+
+/* Reduced motion: preserve state changes while removing decorative movement. */
+@media (prefers-reduced-motion:reduce) {
+  .runtime-pulse {
+    animation: none!important;
+  }
+}