bunnyquery 1.0.10 → 1.1.1

package/bunnyquery.css

@@ -202,40 +202,6 @@
     font-size: 0.85rem;
 }
 
-.bq-link-button {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    padding: 0.35rem 0.65rem;
-    margin: 0.2rem 0.2rem 0.2rem 0;
-    border: 1px solid var(--bq-line);
-    border-radius: 0.15rem;
-    background: var(--bq-paper);
-    color: var(--bq-pink);
-    font-size: 0.78rem;
-    font-weight: 600;
-    text-decoration: none;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
-    transition: background 0.15s, color 0.15s, border-color 0.15s;
-    cursor: pointer;
-}
-
-.bq-link-button:hover {
-    background: var(--bq-hover-bg);
-    border-color: var(--bq-pink);
-}
-
-.bq-link-button:visited {
-    color: #a01848;
-}
-
-.bq-link-button:visited:hover {
-    color: var(--bq-pink);
-}
-
 .bq-link {
     color: var(--bq-pink);
     text-decoration: none;
@@ -332,6 +298,117 @@
     color: #8a6d1a;
 }
 
+/* ------------ markdown body rendered by marked ----------------- */
+.bq-md {
+    white-space: normal;
+    word-break: break-word;
+}
+.bq-md > *:first-child { margin-top: 0; }
+.bq-md > *:last-child  { margin-bottom: 0; }
+.bq-md p {
+    margin: 0.4em 0;
+}
+.bq-md h1,
+.bq-md h2,
+.bq-md h3,
+.bq-md h4,
+.bq-md h5,
+.bq-md h6 {
+    margin: 0.8em 0 0.35em;
+    line-height: 1.25;
+    font-weight: 600;
+}
+.bq-md h1 { font-size: 1.3em; }
+.bq-md h2 { font-size: 1.18em; }
+.bq-md h3 { font-size: 1.08em; }
+.bq-md h4,
+.bq-md h5,
+.bq-md h6 { font-size: 1em; }
+.bq-md ul,
+.bq-md ol {
+    margin: 0.4em 0;
+    padding-left: 1.4em;
+}
+.bq-md li { margin: 0.15em 0; }
+.bq-md li > p { margin: 0.2em 0; }
+.bq-md blockquote {
+    margin: 0.5em 0;
+    padding: 0.2em 0.8em;
+    border-left: 3px solid var(--bq-line);
+    color: #555;
+    background: rgba(0, 0, 0, 0.03);
+}
+.bq-md hr {
+    border: 0;
+    border-top: 1px solid var(--bq-line);
+    margin: 0.8em 0;
+}
+.bq-md a {
+    color: var(--bq-pink);
+    text-decoration: underline;
+}
+.bq-md a:hover { text-decoration: none; }
+.bq-md code {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 0.9em;
+    padding: 0.1em 0.35em;
+    background: rgba(0, 0, 0, 0.06);
+    border-radius: 3px;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+.bq-md pre {
+    margin: 0.5em 0;
+    padding: 0.6em 0.8em;
+    background: #1e1e1e;
+    color: #f5f5f5;
+    border-radius: 4px;
+    overflow-x: auto;
+    white-space: pre;
+}
+.bq-md pre code {
+    background: transparent;
+    color: inherit;
+    padding: 0;
+    font-size: 0.85em;
+    white-space: pre;
+    word-break: normal;
+}
+.bq-md table {
+    border-collapse: collapse;
+    margin: 0.5em 0;
+    font-size: 0.95em;
+    display: block;
+    overflow-x: auto;
+}
+.bq-md th,
+.bq-md td {
+    border: 1px solid var(--bq-line);
+    padding: 0.3em 0.55em;
+    text-align: left;
+}
+.bq-md th {
+    background: rgba(0, 0, 0, 0.04);
+    font-weight: 600;
+}
+.bq-md img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+}
+.bq-md strong { font-weight: 600; }
+.bq-md em { font-style: italic; }
+.bq-md del { text-decoration: line-through; }
+/* keep our inline file/link anchors flush within markdown paragraphs */
+.bq-md .bq-file-download,
+.bq-md .bq-link-button {
+    margin: 0;
+}
+a.bq-link-button.is-refreshing {
+    opacity: 0.7;
+    cursor: wait;
+}
+
 .bq-pending-note {
     display: block;
     margin-top: 0.35rem;
@@ -340,37 +417,34 @@
     font-style: italic;
 }
 
-.bq-file-download,
-.bq-link-button {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    padding: 0.3rem 0.65rem;
-    border: 1px solid var(--bq-line);
-    background: var(--bq-paper);
-    color: var(--bq-ink);
-    font-family: var(--bq-mono);
-    font-size: 0.8rem;
+/* Plain pink underlined inline text links — matches agent.vue. Underline
+   stays on hover, no border/background. */
+a.bq-file-download,
+a.bq-link-button {
+    color: var(--bq-pink);
     text-decoration: none;
     cursor: pointer;
-    transition: background 0.15s, color 0.15s;
-    vertical-align: middle;
-}
-
-.bq-file-download:hover,
-.bq-link-button:hover {
-    background: var(--bq-ink);
-    color: var(--bq-paper);
-    text-decoration: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    font: inherit;
+    vertical-align: baseline;
 }
 
-.bq-link-button {
+a.bq-link-button {
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
+a.bq-file-download:hover,
+a.bq-link-button:hover {
+    color: var(--bq-pink);
+    text-decoration: underline;
+    background: transparent;
+}
+
 /* ---- input row ---------------------------------------------------------- */
 
 .bq-input-row {
@@ -655,6 +729,43 @@
     align-self: stretch;
 }
 
+.bq-login-actions {
+    display: flex;
+    justify-content: center;
+    margin-top: 0.25rem;
+}
+
+.bq-login-link {
+    all: unset;
+    cursor: pointer;
+    font-family: var(--bq-mono);
+    font-size: 0.78rem;
+    color: var(--bq-muted);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    padding: 0.25rem 0.5rem;
+}
+
+.bq-login-link:hover {
+    color: var(--bq-ink);
+}
+
+.bq-login-note {
+    margin: 0;
+    color: var(--bq-muted);
+    font-size: 0.8rem;
+    line-height: 1.4;
+}
+
+.bq-login-step {
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
+    margin-top: 0.5rem;
+    padding-top: 0.75rem;
+    border-top: 1px dashed var(--bq-line);
+}
+
 /*
  * Loading state for the login submit button.
  *
@@ -667,7 +778,7 @@
  *   .bq-agent .bq-login-submit.is-loading::after { content: "..."; }
  */
 .bq-agent .bq-login-submit {
-    --bq-login-loading-label: "Logging in...";
+    --bq-login-loading-label: "...";
     position: relative;
 }
 
@@ -803,6 +914,234 @@
     color: var(--bq-danger);
 }
 
+/* ---- modal: account settings ------------------------------------------- */
+
+.bq-modal-card {
+    width: 100%;
+    max-width: 26rem;
+    max-height: calc(100vh - 6rem);
+    overflow: auto;
+    margin: 0 auto;
+    background: var(--bq-paper);
+    border: 1px solid #d0d0d0;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+    font-family: var(--bq-mono);
+    color: var(--bq-ink);
+    display: flex;
+    flex-direction: column;
+}
+
+.bq-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid var(--bq-line);
+    position: sticky;
+    top: 0;
+    background: var(--bq-paper);
+    z-index: 1;
+}
+
+.bq-modal-title {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--bq-ink);
+    letter-spacing: 0.01em;
+}
+
+.bq-modal-close {
+    all: unset;
+    box-sizing: border-box;
+    width: 1.75rem;
+    height: 1.75rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.4rem;
+    line-height: 1;
+    color: var(--bq-muted);
+    cursor: pointer;
+    border-radius: 2px;
+    transition: background 0.15s, color 0.15s;
+}
+
+.bq-modal-close:hover {
+    color: var(--bq-ink);
+    background: var(--bq-hover-bg);
+}
+
+.bq-modal-body {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    padding: 1.25rem;
+}
+
+.bq-modal-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding-bottom: 1.25rem;
+    border-bottom: 1px solid var(--bq-line);
+}
+
+.bq-modal-section:last-child {
+    padding-bottom: 0;
+    border-bottom: 0;
+}
+
+.bq-modal-section-title {
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--bq-muted);
+    margin: 0;
+}
+
+.bq-modal-row {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    font-size: 0.82rem;
+    min-width: 0;
+}
+
+.bq-modal-value {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-weight: 600;
+    overflow-wrap: anywhere;
+}
+
+.bq-modal-badge {
+    flex: 0 0 auto;
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    padding: 0.15rem 0.45rem;
+    border: 1px solid var(--bq-line);
+    color: var(--bq-muted);
+    line-height: 1;
+}
+
+.bq-modal-badge--ok {
+    color: #2a7;
+    border-color: #2a7;
+}
+
+.bq-modal-badge--warn {
+    color: var(--bq-danger);
+    border-color: var(--bq-danger);
+}
+
+.bq-modal-verify-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    align-items: stretch;
+}
+
+.bq-modal-verify-row .bq-settings-input {
+    flex: 1 1 9rem;
+    min-width: 0;
+}
+
+.bq-modal-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.bq-modal-form-actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 0.25rem;
+}
+
+.bq-modal-msg {
+    margin: 0.25rem 0 0;
+    font-size: 0.75rem;
+    line-height: 1.4;
+}
+
+.bq-modal-msg--ok {
+    color: #2a7;
+}
+
+.bq-modal-msg--err {
+    color: var(--bq-danger);
+}
+
+/* Dedicated input for settings dialog — does NOT inherit chat .bq-input
+   left-padding (which is reserved for the attach button). */
+.bq-settings-input {
+    box-sizing: border-box;
+    width: 100%;
+    height: 2.25rem;
+    padding: 0 0.7rem;
+    border: 1px solid var(--bq-line);
+    background: var(--bq-paper);
+    color: var(--bq-ink);
+    font-family: var(--bq-mono);
+    font-size: 0.82rem;
+    line-height: 1.2;
+    outline: none;
+    border-radius: 0;
+    -webkit-appearance: none;
+    appearance: none;
+    resize: none;
+}
+
+.bq-settings-input:focus {
+    border-color: var(--bq-ink);
+}
+
+.bq-settings-input:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+/* Dedicated settings buttons — same visual language as the delete modal
+   buttons but without the delete-specific naming and with a tighter size
+   that pairs cleanly with the input height. */
+.bq-settings-btn {
+    font-family: var(--bq-mono);
+    font-size: 0.78rem;
+    line-height: 1;
+    padding: 0 0.9rem;
+    height: 2.25rem;
+    border: 1px solid var(--bq-line);
+    background: var(--bq-paper);
+    color: var(--bq-ink);
+    cursor: pointer;
+    transition: border-color 0.15s, background 0.15s, color 0.15s;
+}
+
+.bq-settings-btn:hover {
+    border-color: var(--bq-ink);
+}
+
+.bq-settings-btn--primary {
+    background: var(--bq-ink);
+    color: var(--bq-paper);
+    border-color: var(--bq-ink);
+}
+
+.bq-settings-btn--primary:hover {
+    background: var(--bq-paper);
+    color: var(--bq-ink);
+}
+
+.bq-settings-btn:disabled,
+.bq-settings-btn.is-loading {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
 @media (max-width: 800px) {
     .bq-modal-backdrop {
         padding: 0;
@@ -814,6 +1153,28 @@
         max-width: calc(100% - 1rem);
         max-height: calc(100% - 1rem);
     }
+
+    .bq-modal-card {
+        max-width: 100%;
+        max-height: calc(100vh - 1rem);
+    }
+
+    .bq-modal-header {
+        padding: 0.85rem 1rem;
+    }
+
+    .bq-modal-body {
+        padding: 1rem;
+        gap: 1.25rem;
+    }
+
+    .bq-modal-form-actions {
+        justify-content: stretch;
+    }
+
+    .bq-modal-form-actions .bq-settings-btn {
+        flex: 1 1 auto;
+    }
 }
 
 @media (max-width: 700px) {