/* Nội dung › Văn bản của bạn on the user's server: the list's top and a
   text's editor (frontend/panel/content/user-texts/). Values from
   output/reference/behaviours/content-reading.md, cited per block. */

/* The import notice and "New Text" (read#47, #48; md:L45381–45479, L45129–45188, L45780–45800) */

.ut-top {
  padding: 16px 16px 0;
}

.ut-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 1000px;
  margin-bottom: 12px;
  padding: 7px 16px;
  border: 1px solid color-mix(in srgb, var(--wovia-blue) 30%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--wovia-blue) 8%, transparent);
  color: color-mix(in srgb, var(--ink) 66.7%, transparent);
  font-size: 14px;
  line-height: 1.5;
}

.ut-notice-text {
  flex-grow: 1;
}

.ut-notice-link {
  color: var(--accent-soft);
  white-space: nowrap;
}

/* On the website without the extension: where to get it, under the notice (md:L45422–45430, L45465–45475). */
.ut-notice-install {
  margin-top: 8px;
}

.ut-notice-install .ut-notice-link {
  white-space: normal;
}

.ut-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 15px;
  padding-left: 40px;
}

.ut-new {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px 0 10px;
  border: 2px solid color-mix(in srgb, var(--pill) 31%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--pill) 10%, transparent);
  color: var(--pill);
  font: 500 14px/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ut-new:hover:not(:disabled) {
  background: color-mix(in srgb, var(--pill) 18%, transparent);
}

.ut-new:disabled {
  opacity: 0.6;
  cursor: default;
}

/* "Upload EPUB" (document-import.js, forum-requests.md F7): its size under it (md:L45169–45184), and while the file
   is read a 20 px spinner of its colour in place of its picture (md:L45165). */
.ut-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.ut-pill-caption {
  color: var(--text-muted);
  font-size: 11px;
}

.ut-new .ut-pill-spinner {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-width: 2px;
  border-top-color: var(--pill);
}

@media (max-width: 900px) {
  .ut-top {
    padding: 8px 8px 0;
  }

  .ut-notice {
    padding: 12px 16px;
    border-color: rgba(233, 30, 99, 0.3);
    border-radius: 8px;
    background: rgba(233, 30, 99, 0.1);
    color: color-mix(in srgb, var(--ink) 90%, transparent);
  }

  .ut-notice-link {
    color: oklch(from #e91e63 min(l, var(--max-lightness, 1)) c h);
    font-weight: 500;
    text-decoration: none;
  }

  .ut-notice-install {
    padding-top: 8px;
    border-top: 1px solid rgba(233, 30, 99, 0.2);
  }

  .ut-actions {
    padding: 0 8px 0 54px;
  }
}

/* The editor (read#52–#57; md:L46245–46527) ------------------------------------------- */

.ut {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ut-scroll {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
}

.ut-body {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 120px;
}

.ut-bar-title {
  cursor: default;
}

.ut-banner {
  margin-bottom: 24px;
  padding: 8px 12px;
  border-radius: 4px;
  background: rgba(181, 61, 9, 0.8);
  box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px rgba(0, 0, 0, 0.14);
  color: var(--on-accent);
  animation: ut-pulse 2s ease-in-out infinite;
}

.ut-switch {
  margin-left: 8px;
  color: var(--on-accent);
  font-weight: 500;
}

@keyframes ut-pulse {
  50% {
    opacity: 0.8;
  }
}

/* The title in an outlined row with "Upload file" after it (md:L46377–46437: `flexDirection: "row"`, the button 8 px on). */
.ut-title {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 12px 4px;
  border: 1px solid var(--field-border);
  border-radius: 4px;
}

.ut-title:focus-within {
  border-color: var(--accent);
}

.ut-title-field {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

/* MUI's IconButton in the theme's primary colour, white (ix:L164187): 8 px around a 24 px icon, round. */
.ut-upload-file {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
}

.ut-upload-file:hover:not(:disabled) {
  background: var(--hover);
}

.ut-upload-file:disabled {
  color: color-mix(in srgb, var(--ink) 30%, transparent);
  cursor: default;
}

.ut-title-label {
  display: block;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  font-size: 12px;
}

.ut-title-input {
  width: 100%;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 66.7%, transparent);
  font: 16px/1.2 var(--font);
  outline: none;
}

.ut-text {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 16px 14px;
  border: 1px solid var(--field-border);
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font: 16px/1.5 var(--font);
  resize: none;
  overflow-y: auto;
}

.ut-text:focus {
  border-color: var(--accent);
  outline: none;
}

.ut-foot {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 15px 0;
}

.ut-state {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding-bottom: 8px;
  color: var(--accent-soft);
  font-weight: 500;
}

.ut-state.is-failed {
  color: oklch(from #f87171 min(l, var(--max-lightness, 1)) c h);
}

.ut-start {
  flex-grow: 1;
}

/* The reader's Edit button on a user text (read#59; md:L1758–1781). */
.rd-edit {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin-left: 10px;
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--accent-soft) 50%, transparent);
  border-radius: 4px;
  background: transparent;
  color: var(--accent-soft);
  cursor: pointer;
}

.rd-edit:hover {
  border-color: var(--accent-soft);
  background: color-mix(in srgb, var(--accent-soft) 8%, transparent);
}

/* "Import Text" (import-dialog.js; read#65; the reference's ImportTextModal, im:L172–405):
   1100 px wide and 80 vh high (at most 900 px) on a big screen, full width on a small one;
   the sources in a 240 px column, the preview in 15 px monospace with an 80 px mini-map. */

.dialog:has(.import-text) {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(1100px, calc(100vw - 32px));
  max-width: none;
  height: min(80vh, 900px);
  max-height: 900px;
  padding: 12px 16px 8px;
}

.dialog:has(.import-text) > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.dialog:has(.import-text) .dialog-actions {
  margin-top: 8px;
}

.import-text {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.import-text-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  padding: 5px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.import-text-close:hover {
  background: var(--hover);
}

.import-text-heading {
  opacity: 0.7;
  font-size: 13px;
  font-weight: 500;
}

.import-text-sources {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  width: 240px;
  padding: 8px 12px;
  overflow-y: auto;
}

.import-text-sources .import-text-heading {
  padding: 0 16px 4px;
}

.import-text-source {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.import-text-source:hover {
  background: var(--hover);
}

.import-text-source.is-chosen {
  border-color: color-mix(in srgb, var(--accent-soft) 50%, transparent);
  background: color-mix(in srgb, var(--accent-soft) 8%, transparent);
}

.import-text-source.is-chosen:hover {
  background: color-mix(in srgb, var(--accent-soft) 12%, transparent);
}

.import-text-source.is-chosen .import-text-source-name {
  color: var(--accent-soft);
  font-weight: 600;
}

.import-text-source.is-disabled {
  opacity: 0.5;
  cursor: default;
}

.import-text-source.is-disabled:hover {
  background: transparent;
}

.import-text-source input {
  margin: 0;
  accent-color: var(--accent);
}

.import-text-view {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 8px 16px 16px;
  overflow: hidden;
}

.import-text-view .import-text-heading {
  padding-bottom: 6px;
}

.import-text-panes {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: 8px;
  background: var(--field-bg);
}

.import-text-preview,
.import-text-map-text {
  padding: 20px;
  font: 15px/1.6 monospace;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.import-text-preview {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  color: color-mix(in srgb, var(--ink) 90%, transparent);
}

.import-text-map {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  overflow: hidden;
  border-left: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--press) 33.3%, transparent);
}

.import-text-map-scroll {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.import-text-map-inner {
  position: relative;
  width: 100%;
}

.import-text-map-text {
  box-sizing: border-box;
  color: color-mix(in srgb, var(--ink) 30%, transparent);
  transform-origin: 0 0;
  user-select: none;
  pointer-events: none;
}

.import-text-map-view {
  position: absolute;
  left: 0;
  width: 100%;
  border-top: 1px solid color-mix(in srgb, var(--accent-soft) 40%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-soft) 40%, transparent);
  background: color-mix(in srgb, var(--accent-soft) 10%, transparent);
  pointer-events: none;
}

/* A small screen: full width, the sources above the preview (the reference's xs sizes). */
@media (max-width: 899px) {
  .dialog:has(.import-text) {
    width: 100vw;
    height: auto;
    max-height: calc(100vh - 32px);
  }

  .import-text {
    flex-direction: column;
  }

  .import-text-sources {
    width: 100%;
  }

  .import-text-panes {
    min-height: 240px;
  }
}

/* An image line of a page read in the reader on this device (local-reader.js; read#64). */
.reader-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}