/*
 * The reader for a single history entry. This is the widget's history/view.css
 * ported to the site: same reader column, same panels, same badges — so an entry
 * opened from sowhatify.com reads exactly like the same entry opened from the
 * Chrome widget. Everything is scoped under .history-reader so the widget's very
 * generic class names (.button, .meta, .hidden, .error) cannot leak into the rest
 * of the site or fight with Bootstrap.
 */

.history-reader {
  padding: 0 20px 48px;
}

.history-reader .hidden {
  display: none !important;
}

.history-reader .reader-head {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 0 8px;
}

.history-reader h1 {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.25;
}

.history-reader .meta {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  word-break: break-all;
}

.history-reader .header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.history-reader .ai-context-panel {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #fff;
}

.history-reader .ai-context-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: #344054;
}

.history-reader .ai-context-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-reader .ai-context-links li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  padding: 4px 0;
}

.history-reader .ai-context-link {
  color: var(--brand);
  text-decoration: none;
  font-size: 14px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.history-reader .ai-context-link:hover {
  text-decoration: underline;
}

.history-reader .ai-context-note {
  color: var(--muted);
  font-size: 13px;
}

.history-reader .link-with-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.history-reader .link-with-open-btn > a:first-child {
  min-width: 0;
  word-break: break-word;
}

.history-reader .open-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  text-decoration: none;
  color: var(--brand);
  border: 1px solid #b2ddff;
  background: #eff8ff;
  border-radius: 999px;
  padding: 3px 7px;
  white-space: nowrap;
}

.history-reader .open-link-btn:hover {
  background: #d1e9ff;
  border-color: #84caff;
}

.history-reader .button {
  display: inline-block;
  border: 1px solid #6b7280;
  background: #fff;
  color: #1f1f1f;
  border-radius: 8px;
  padding: 10px 14px;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.history-reader .button:hover {
  background: #f3f4f6;
  border-color: #4b5563;
  color: #1f1f1f;
}

.history-reader .button.secondary {
  background: #fff;
  color: #6b7280;
  border-color: #6b7280;
}

.history-reader .button.secondary:hover {
  background: #f3f4f6;
}

.history-reader .view-mode-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid #6b7280;
  border-radius: 8px;
  overflow: hidden;
}

.history-reader .view-mode-toggle .button.secondary {
  border: none;
  border-radius: 0;
  margin: 0;
}

.history-reader .view-mode-toggle .button.secondary + .button.secondary {
  border-left: 1px solid #6b7280;
}

.history-reader .view-mode-toggle .button.secondary.active,
.history-reader .view-mode-toggle .button.secondary.active:hover {
  background: #f3f4f6;
  color: #1f1f1f;
}

.history-reader .reader-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  font-size: 13px;
  color: #475467;
}

.history-reader .reader-controls label {
  font-weight: 600;
}

/*
 * Every select in the reader, not just the ones in the toolbar.
 *
 * The share panel's "Expires in" was a bare browser control sitting inside a styled card,
 * which is the one place on this page where the operating system's own widget shows through.
 * It is the same kind of control as the font and zoom pickers, so it gets the same treatment
 * rather than a second definition of what a select looks like here.
 */
.history-reader .reader-controls select,
.history-reader .share-controls select {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  padding: 6px 8px;
  font: inherit;
  color: var(--ink);
  /* The native arrow is drawn in the platform's own grey and sits tight to the edge; this
     replaces it with one that matches the border colour and leaves room to breathe. */
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
  cursor: pointer;
}

.history-reader .reader-controls select:focus,
.history-reader .share-controls select:focus {
  outline: none;
  border-color: #175cd3;
  box-shadow: 0 0 0 3px rgba(23, 92, 211, 0.12);
}

.history-reader .share-controls label {
  font-size: 13px;
  font-weight: 600;
  color: #475467;
}

.history-reader .result-body {
  --reader-font-size: 18px;
  --reader-zoom: 1;
  --reader-font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --reader-page-width: min(760px, calc(100vw - 40px));
  background: #fff;
  border: 1px solid #e5e0d8;
  border-radius: 12px;
  padding: 20px;
  line-height: 1.6;
  font-size: calc(var(--reader-font-size) * var(--reader-zoom));
  font-family: var(--reader-font-family);
  width: var(--reader-page-width);
  margin-left: auto;
  margin-right: auto;
}

.history-reader .result-meta {
  color: var(--muted);
  font-size: 13px;
  width: var(--reader-page-width, min(760px, calc(100vw - 40px)));
  margin: 10px auto 0;
}

.history-reader .result-body h2 {
  margin: 20px 0 8px;
  font-size: 1.2em;
}

.history-reader .result-body h3 {
  margin: 16px 0 6px;
  font-size: 1.1em;
}

.history-reader .result-body h4 {
  margin: 12px 0 4px;
  font-size: 1.05em;
}

.history-reader .result-body :is(h2, h3, h4):first-child {
  margin-top: 0;
}

.history-reader .result-body ul {
  margin: 8px 0;
  padding-left: 20px;
}

.history-reader .source-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.history-reader .source-text-note {
  color: var(--muted);
  font-size: 13px;
  width: var(--reader-page-width, min(760px, calc(100vw - 40px)));
  margin: 10px auto 0;
}

.history-reader .source-text-panel,
.history-reader .web-search-panel,
.history-reader .combined-input-panel,
.history-reader .workflow-steps-panel,
.history-reader .metadata-panel {
  width: var(--reader-page-width, min(760px, calc(100vw - 40px)));
  margin-left: auto;
  margin-right: auto;
}

.history-reader .workflow-steps-content,
.history-reader .metadata-content,
.history-reader .web-search-content {
  margin-top: 0;
}

.history-reader .workflow-step-card {
  border: 1px solid #e4e7ec;
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.history-reader .workflow-step-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.history-reader .workflow-step-badge {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  color: var(--brand);
  background: #eff8ff;
  border: 1px solid #b2ddff;
  border-radius: 999px;
  padding: 5px 8px;
}

.history-reader .workflow-step-type {
  font-size: 12px;
  font-weight: 600;
  color: #344054;
  background: #f2f4f7;
  border: 1px solid #eaecf0;
  border-radius: 999px;
  padding: 4px 8px;
}

.history-reader .workflow-step-model,
.history-reader .workflow-step-license {
  font-size: 12px;
  color: var(--muted);
}

.history-reader .workflow-step-unavailable {
  font-size: 12px;
  font-weight: 600;
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fecdca;
  border-radius: 999px;
  padding: 4px 8px;
}

.history-reader .workflow-step-heading {
  margin: 4px 0 10px;
  font-size: 17px;
}

.history-reader .workflow-step-section-heading {
  margin: 14px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.history-reader .workflow-step-fields {
  margin: 0;
  padding: 0;
}

.history-reader .workflow-step-field-label {
  margin: 0;
  padding: 8px 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.history-reader .workflow-step-field-value {
  margin: 0 0 4px;
  padding: 0 0 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  border-bottom: 1px solid #eef2f6;
}

.history-reader .workflow-step-fields dd:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.history-reader .workflow-step-pre {
  margin: 0;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #eef2f6;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow: auto;
}

.history-reader .workflow-step-output {
  margin-top: 4px;
}

.history-reader .metadata-list {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #fff;
}

.history-reader .metadata-label {
  margin: 0;
  padding: 12px 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.history-reader .metadata-list dt:first-child {
  padding-top: 0;
}

.history-reader .metadata-value {
  margin: 0 0 4px;
  padding: 0 0 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  border-bottom: 1px solid #eef2f6;
}

.history-reader .metadata-list dd:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.history-reader .metadata-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.history-reader .metadata-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #344054;
  font-size: 14px;
  line-height: 1.4;
}

.history-reader .web-search-section {
  margin-bottom: 28px;
}

.history-reader .web-search-section h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.history-reader .web-search-search-card {
  border: 1px solid #e4e7ec;
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.history-reader .web-search-search-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.history-reader .web-search-search-badge {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  color: var(--brand);
  background: #eff8ff;
  border: 1px solid #b2ddff;
  border-radius: 999px;
  padding: 5px 8px;
}

.history-reader .web-search-search-status {
  font-size: 12px;
  color: var(--muted);
  text-transform: lowercase;
}

.history-reader .web-search-query {
  margin: 0 0 8px;
  color: #475467;
  font-size: 14px;
}

.history-reader .web-search-results {
  margin: 0;
  padding-left: 20px;
}

.history-reader .web-search-results li {
  margin-bottom: 14px;
}

.history-reader .web-search-results a {
  color: var(--brand);
  word-break: break-word;
}

.history-reader .web-search-snippet,
.history-reader .web-search-meta {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
}

.history-reader .web-search-error {
  color: #b42318;
}

.history-reader .web-search-json {
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  background: #fff;
  padding: 12px 14px;
}

.history-reader .web-search-json-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px dashed #eaecf0;
}

.history-reader .web-search-json-row:last-child {
  border-bottom: none;
}

.history-reader .web-search-json-key {
  font-size: 12px;
  font-weight: 700;
  color: #344054;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.history-reader .web-search-json-value,
.history-reader .web-search-json-item {
  font-size: 14px;
  color: #1f2937;
  white-space: pre-wrap;
  word-break: break-word;
}

.history-reader .web-search-json-empty {
  font-size: 13px;
  color: var(--muted);
}

.history-reader .web-search-json-list,
.history-reader .web-search-json-nested {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-reader .web-search-json-card {
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  padding: 10px;
  background: #fcfcfd;
}

.history-reader .web-search-json-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 8px;
}

.history-reader .web-search-raw-toggle {
  margin-top: 12px;
}

.history-reader .web-search-raw {
  margin: 12px 0 0;
  padding: 16px;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 1.5;
}

.history-reader .error {
  width: var(--reader-page-width, min(760px, calc(100vw - 40px)));
  margin: 10px auto 0;
  color: #b42318;
}

/*
 * The share panel.
 *
 * Scoped under .history-reader like everything else here, and reusing the reader's
 * own .button / .hidden rules rather than introducing a second set. shared.php loads
 * this file too, so keep anything added below usable on a page with no session.
 */
.history-reader .share-panel {
  width: var(--reader-page-width, min(760px, calc(100vw - 40px)));
  margin: 12px auto 0;
  padding: 16px;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  background: #fff;
}

.history-reader .share-title {
  margin: 0 0 6px;
  font-size: 16px;
}

.history-reader .share-note {
  margin: 0 0 12px;
  font-size: 13px;
  color: #667085;
}

.history-reader .share-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.history-reader .share-result {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.history-reader .share-url {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #e4e7ec;
  border-radius: 6px;
  font-size: 13px;
}

.history-reader .share-status {
  margin: 10px 0 0;
  font-size: 13px;
  color: #667085;
}

.history-reader .share-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: #667085;
}

.history-reader .share-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid #f2f4f7;
}

/* ---------- the chat column ----------
 *
 * Only this page docks the chat: the article page's thread is part of a long document and has
 * no reading column to sit beside. The shared thread styling is in shared/ask-panel.css; what
 * is here is where the panel goes, which is this page's business.
 *
 * Docked is driven by a class rather than by the media query alone, because the reading width
 * is computed in JS from the same decision and the two have to be one fact. The query below is
 * the other half: a window dragged narrow with the chat open has to undock even though the
 * stored preference still says open.
 */
:root {
  --chat-width: 380px;
}

.history-reader .article-panel {
  width: var(--reader-page-width, min(760px, calc(100vw - 40px)));
  margin: 2rem auto 0;
}

.history-reader .article-panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.history-reader .article-panel-heading {
  margin: 0;
  font-size: 1.05rem;
}

.history-reader .article-panel-tools {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.history-reader .icon-button {
  font: inherit;
  font-size: 0.875rem;
  line-height: 1;
  padding: 0.25rem 0.375rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: var(--muted, #6c757d);
  cursor: pointer;
}

.history-reader .icon-button:hover,
.history-reader .icon-button:focus {
  border-color: var(--border, #dee2e6);
  color: inherit;
}

.history-reader .chat-settings {
  border: 1px solid var(--border, #dee2e6);
  border-radius: 6px;
  padding: 0.625rem;
  margin: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.history-reader .ask-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  width: 100%;
}

.history-reader .ask-submit-row {
  justify-content: space-between;
  margin-top: 0.5rem;
}

.history-reader .ask-context {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
}

.history-reader .ask-context-note,
.history-reader .ask-model-label {
  color: var(--muted, #6c757d);
  font-size: 0.8125rem;
}

/* Full width of the row rather than sized to the longest option: model ids vary wildly, and a
   select that resizes as you change it makes the panel jump. */
.history-reader .ask-model-select {
  font: inherit;
  font-size: 0.875rem;
  padding: 0.25rem 0.375rem;
  border: 1px solid var(--border, #dee2e6);
  border-radius: 4px;
  background: #fff;
  flex: 1 1 auto;
  min-width: 0;
}

/* Starts under the site header, which is sticky at z-index 1030 and therefore owns that
   band of the window at every scroll position. Starting at 0 put the column behind it. */
body.chat-docked .history-reader .article-panel {
  position: fixed;
  top: var(--site-header-height, 0px);
  right: 0;
  bottom: 0;
  width: var(--chat-width);
  overflow-y: auto;
  margin: 0;
  padding: 1rem;
  box-sizing: border-box;
  border-left: 1px solid var(--border, #dee2e6);
  background: #fff;
  z-index: 10;
}

body.chat-docked .history-reader {
  padding-right: var(--chat-width);
}

/* Full screen gives the chat the window, not the line length: text set edge to edge across a
   wide monitor is harder to read than the column it replaced. */
/* Full screen takes the page, not the site: the header stays reachable, so somebody who
   opened the chat from here can still navigate away without hunting for the close button. */
body.chat-fullscreen .history-reader .article-panel {
  position: fixed;
  top: var(--site-header-height, 0px);
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  margin: 0;
  padding: 1.5rem;
  border-left: 0;
  overflow-y: auto;
  z-index: 20;
  /* Opaque, like the docked column. Taken out of the flow and given no background of its
     own, the panel let the analysis it is covering show straight through it. */
  background: #fff;
}

body.chat-fullscreen .history-reader .article-panel > * {
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

body.chat-fullscreen .history-reader {
  padding-right: 0;
}

@media (max-width: 1099px) {
  body.chat-docked .history-reader .article-panel {
    position: static;
    width: var(--reader-page-width, min(760px, calc(100vw - 40px)));
    margin: 2rem auto 0;
    border-left: 0;
    padding: 0;
  }

  body.chat-docked .history-reader {
    padding-right: 0;
  }
}

/*
 * app/shared.php: every block in the reading column is the same width and centred,
 * so the notice, the analysis, the ask and the footer line up under the title.
 */
.history-reader.shared-reader > * {
  box-sizing: border-box;
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Inside the ask box the caption takes the box's width, not the page column's. */
.history-reader.shared-reader .shared-cta .result-meta {
  width: auto;
  max-width: 100%;
}

/* app/shared.php: an anonymous share says so before the analysis starts. */
.shared-anonymous {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid #f5d38a;
  border-radius: 10px;
  background: #fff9eb;
  color: #5c4a1a;
  font-size: 0.95rem;
}

.shared-anonymous.hidden {
  display: none;
}

/*
 * app/shared.php: the one ask on a shared analysis, after the result. The reader was
 * sent this and has no account; the ask is to get the same thing for themselves.
 */
.shared-cta {
  margin: 28px 0 20px;
  padding: 18px 20px;
  border: 1px solid #c7d7fe;
  border-radius: 10px;
  background: #f5f8ff;
}

.shared-cta.hidden {
  display: none;
}

.shared-cta h2 {
  font-size: 1.05rem;
  margin: 0 0 6px;
}

.shared-cta p {
  margin: 0 0 12px;
}