/* ============================== */
/* Main View Customization */
/* ============================== */

.workspace-leaf-content[data-type="vaultkeeper-ai-main-view"] {
  background-color: var(--background-secondary);
}

.workspace-leaf-content[data-type="vaultkeeper-ai-main-view"] .view-content {
  align-self: center;
  max-width: 1000px;
  background-color: var(--background-secondary);
  padding-top: 0;
}

/* ============================== */
/* Mobile Drawer Full Width */
/* ============================== */

body:not(.is-tablet) .workspace-drawer.mod-right {
  max-width: 100%;
  width: 100%;
}

/* ============================== */
/* Drawer element collapse animation */
/* ============================== */

.vaultKeeper-drawer-hiding {
  overflow: hidden;
  height: var(--vaultKeeper-drawer-height);
  padding-top: var(--vaultKeeper-drawer-padding-top);
  padding-bottom: var(--vaultKeeper-drawer-padding-bottom);
  transition: height 0.25s ease, padding-top 0.25s ease, padding-bottom 0.25s ease;
}

.vaultKeeper-drawer-collapsed {
  overflow: hidden;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: height 0.25s ease, padding-top 0.25s ease, padding-bottom 0.25s ease;
}

.vaultKeeper-drawer-hidden {
  display: none;
}

.vaultKeeper-drawer-restoring {
  overflow: hidden;
  display: block;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: height 0.25s ease, padding-top 0.25s ease, padding-bottom 0.25s ease;
}

.vaultKeeper-drawer-expanding {
  overflow: hidden;
  height: var(--vaultKeeper-drawer-height);
  padding-top: var(--vaultKeeper-drawer-padding-top);
  padding-bottom: var(--vaultKeeper-drawer-padding-bottom);
  transition: height 0.25s ease, padding-top 0.25s ease, padding-bottom 0.25s ease;
}

/* ============================== */
/* Quick Actions Notice */
/* ============================== */

.quick-action-notice {
  display: flex;
  align-items: center;
  gap: var(--size-2-3);
}

/* ============================== */
/* Diff View Customization */
/* ============================== */

.workspace-leaf-content[data-type="vaultkeeper-ai-diff-view"] .view-content {
  container-type: size;
  container-name: diff-container;
  overflow: hidden;
}

/* ============================== */
/* Plan Approval View Customization */
/* ============================== */

.workspace-leaf-content[data-type="vaultkeeper-ai-plan-approval-view"] .view-content {
  container-type: size;
  container-name: plan-approval-container;
  overflow: hidden;
}

/* ============================== */
/* Artifact View Customization */
/* ============================== */

.workspace-leaf-content[data-type="vaultkeeper-ai-artifact-view"] .view-content {
  container-type: size;
  container-name: artifact-container;
  overflow: hidden;
}

/* ============================== */
/* Settings Styles */
/* ============================== */

/* Class is doubled to raise specificity above Obsidian's input border
   styles without referencing their selectors (future-proof) or !important. */
.api-key-setting-ok.api-key-setting-ok input[type="text"],
.api-key-setting-ok.api-key-setting-ok input[type="password"],
.api-key-setting-ok.api-key-setting-ok textarea {
  border-color: var(--color-green);
}

.api-key-setting-error.api-key-setting-error input[type="text"],
.api-key-setting-error.api-key-setting-error input[type="password"],
.api-key-setting-error.api-key-setting-error textarea {
  border-color: var(--color-red);
}

.api-key-setting-error .setting-item-control {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.ai-exclusions-input {
  width: max(350px, 100%);
  height: 110px;
  font: var(--font-monospace);
  font-size: 0.9em;
  resize: none;
}

.local-url-input {
  min-width: 80%;
}

.setting-item-memories-disabled-accent .checkbox-container {
  background-color: var(--interactive-accent-disabled-accent);
}

.setting-item-memories-disabled-accent .setting-item-info {
  font-weight: var(--font-light);
}

.setting-item-memories-disabled .checkbox-container {
  background-color: var(--interactive-accent-disabled);
}

/* ============================== */
/* CSS Variables for Common Components */
/* ============================== */

/* Doubled class + explicit interactive states beat Obsidian's
   button / button:hover / button:focus styles (specificity 0-1-1)
   without referencing their selectors or using !important. */
.transparent-button.transparent-button,
.transparent-button.transparent-button:hover,
.transparent-button.transparent-button:focus,
.transparent-button.transparent-button:active {
  border: none;
  outline: none;
  box-shadow: none;
  background-color: transparent;
}

.search-trigger {
  color: var(--interactive-accent);
  cursor: default;
}

.search-trigger:hover {
  text-decoration: underline;
}

/* Typing-in animation (used across components) */
.typing-in {
  overflow: hidden;
  white-space: nowrap;
  animation: reveal-center var(--typing-in-duration, 1.5s) ease-in-out forwards;
  max-width: 0;
  margin: 0 auto;
  padding: 5px;
}

@keyframes reveal-center {
  0% {
    max-width: 0;
    opacity: 0;
    filter: blur(1px);
  }
  100% {
    max-width: 100%;
    opacity: 1;
    filter: blur(0px);
  }
}

.conversation-history-modal {
  padding: 0px;
  overflow: hidden;
}
.conversation-history-modal .modal-header {
  display: none;
}
.conversation-history-modal .modal-close-button {
  display: none;
}

.help-modal {
  padding: 0px;
  overflow: hidden;
}
.help-modal .modal-header {
  display: none;
}
.help-modal .modal-close-button {
  display: none;
}

.planning-model-description-tip {
  font-size: var(--font-smaller);
  font-style: italic;
  color: var(--text-muted);
}

.setting-desc-icon-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--size-4-2);
  align-items: start;
}

.template-warning-icon {
  display: flex;
  align-self: anchor-center;
  margin: var(--size-4-1);
  color: var(--text-warning);
}

.file-disclaimer-icon {
  display: flex;
  align-self: anchor-center;
  margin: var(--size-4-1);
  color: var(--text-muted);
}

.file-disclaimer-link {
  color: var(--text-accent);
  cursor: pointer;
}

.file-disclaimer-link:hover {
  text-decoration: underline;
}

.top-bar-button {
  margin: var(--size-4-2) 0px var(--size-4-2) 0px;
  padding: var(--size-4-1) var(--size-4-2) var(--size-4-1) var(--size-4-2);
  color: var(--text-muted);
  border-radius: var(--radius-m);
}

.top-bar-button:hover {
  background-color: var(--background-modifier-hover);
}

.error-selector {
  display: inline-block;
  color: var(--color-red);
  border: var(--color-red);
  border-style: solid;
  border-width: var(--border-width);
  border-radius: var(--radius-m);
  padding: var(--size-2-3);
  margin: var(--size-4-2) 0;
}

.rate-limit-container {
  text-align: center;
}

.rate-limit-countdown {
  font-size: var(--font-smaller);
}

.rate-limit-info {
  font-size: var(--font-smaller);
  font-style: italic;
  color: var(--text-muted);
}

.rate-limit-link {
  color: var(--interactive-accent);
  cursor: pointer;
}

.rate-limit-link:hover {
  text-decoration: underline;
}

/* ============================== */
/* CSS Variables for Theming */
/* ============================== */

/* Custom variables mapped to Obsidian theme variables */
body {
  --code-background-inline: var(--code-background);
  --text-color: var(--text-normal);
  --link-color: var(--link-color);
  --blockquote-border: var(--blockquote-border-color);
  --table-border: var(--table-border-color);
  --table-header-background: var(--table-header-background);
  --hr-color: var(--hr-color);
  --alt-background-primary: color-mix(
    in hsl shorter hue,
    var(--background-primary) 75%,
    hsl(0 0% 0%) 25%
  );
  --interactive-accent-disabled-accent: color-mix(
    in hsl shorter hue,
    var(--background-modifier-border-hover) 50%,
    var(--interactive-accent) 40%
  );

  --interactive-accent-disabled: color-mix(
    in hsl shorter hue,
    var(--background-modifier-border-hover) 50%,
    var(--background-primary) 40%
  );
}

/* ============================== */
/* Additional Markdown Styles */
/* ============================== */

/* Headings in assistant messages */
.message-bubble.assistant h1 {
  font-size: 1.5em;
  font-weight: 600;
  margin: 0.67em 0;
  line-height: 1.2;
}

.message-bubble.assistant h2 {
  font-size: 1.3em;
  font-weight: 600;
  margin: 0.75em 0;
  line-height: 1.2;
}

.message-bubble.assistant h3 {
  font-size: 1.1em;
  font-weight: 600;
  margin: 0.83em 0;
  line-height: 1.3;
}

.message-bubble.assistant h4 {
  font-size: 1em;
  font-weight: 600;
  margin: 1.12em 0;
  line-height: 1.3;
}

.message-bubble.assistant h5 {
  font-size: 0.9em;
  font-weight: 600;
  margin: 1.5em 0;
  line-height: 1.3;
}

.message-bubble.assistant h6 {
  font-size: 0.85em;
  font-weight: 600;
  margin: 1.67em 0;
  line-height: 1.3;
}

/* Paragraphs */
.message-bubble.assistant p {
  margin: 0.5em 0;
  line-height: 1.6;
}

/* Lists */
.message-bubble.assistant ul,
.message-bubble.assistant ol {
  margin: 0.5em 0;
  padding-left: 2em;
  list-style-position: outside;
}

.message-bubble.assistant ol {
  list-style-type: decimal;
}

.message-bubble.assistant ul {
  list-style-type: disc;
}

.message-bubble.assistant li {
  margin: 0.25em 0;
  padding-left: 0.25em;
  display: list-item;
}

/* Handle nested lists properly */
.message-bubble.assistant ol ol,
.message-bubble.assistant ul ul,
.message-bubble.assistant ol ul,
.message-bubble.assistant ul ol {
  margin: 0.25em 0;
  padding-left: 1.5em;
}

/* Ensure nested list numbering works correctly */
.message-bubble.assistant ol ol {
  list-style-type: lower-alpha;
}

.message-bubble.assistant ol ol ol {
  list-style-type: lower-roman;
}

/* Fix paragraph spacing inside list items */
.message-bubble.assistant li > p {
  margin: 0;
}

.message-bubble.assistant li > p:first-child {
  margin-top: 0;
}

.message-bubble.assistant li > p:last-child {
  margin-bottom: 0;
}

/* Code blocks */
.message-bubble.assistant pre {
  background-color: var(--code-background);
  border-radius: 4px;
  padding: 0.5em;
  overflow-x: auto;
  margin: 0.5em 0;
  position: relative;
}

.message-bubble.assistant code {
  background-color: var(--code-background-inline);
  border-radius: 3px;
  padding: 0.2em 0.4em;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
}

.message-bubble.assistant pre code {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
}

/* Blockquotes */
.message-bubble.assistant blockquote {
  border-left: 4px solid var(--blockquote-border);
  padding-left: 1em;
  margin: 0.5em 0;
  color: var(--text-muted);
}

/* Tables */
.message-bubble.assistant table {
  border-collapse: collapse;
  margin: 0.5em 0;
  width: 100%;
  overflow-x: auto;
  display: block;
}

.message-bubble.assistant th,
.message-bubble.assistant td {
  border: 1px solid var(--table-border);
  padding: 0.5em;
  text-align: left;
  min-width: 100px;
}

.message-bubble.assistant th {
  background-color: var(--table-header-background);
  font-weight: 600;
}

/* Table alignment classes from GFM */
.message-bubble.assistant th[align="center"],
.message-bubble.assistant td[align="center"] {
  text-align: center;
}

.message-bubble.assistant th[align="right"],
.message-bubble.assistant td[align="right"] {
  text-align: right;
}

/* Links */
.message-bubble.assistant a {
  color: var(--link-color-hover);
  text-decoration: none;
}

.message-bubble.assistant a:hover {
  text-decoration: var(--link-decoration-hover);
}

/* Horizontal rules */
.message-bubble.assistant hr {
  border: none;
  border-top: 1px solid var(--hr-color);
  margin: 1em 0;
}

/* Images */
.message-bubble.assistant img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.5em 0;
}

/* Emphasis */
.message-bubble.assistant em {
  font-style: italic;
}

.message-bubble.assistant strong {
  font-weight: 600;
}

/* Strikethrough */
.message-bubble.assistant del {
  text-decoration: line-through;
  opacity: 0.7;
}

/* ============================== */
/* Additional HTML Elements */
/* ============================== */

/* Keyboard input */
.message-bubble.assistant kbd {
  display: inline-block;
  padding: 0.2em 0.4em;
  font-size: 0.875em;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  line-height: 1;
  color: var(--text-color);
  vertical-align: middle;
  background-color: var(--code-background-inline);
  border: 1px solid var(--table-border);
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* Mark/highlight */
.message-bubble.assistant mark {
  background-color: var(--text-highlight-bg);
  color: var(--text-normal);
  padding: 0.2em;
  border-radius: 2px;
}

/* Subscript and Superscript */
.message-bubble.assistant sub {
  font-size: 0.75em;
  vertical-align: sub;
}

.message-bubble.assistant sup {
  font-size: 0.75em;
  vertical-align: super;
}


/* Definition lists */
.message-bubble.assistant dl {
  margin: 0.5em 0;
}

.message-bubble.assistant dt {
  font-weight: 600;
  margin-top: 0.5em;
}

.message-bubble.assistant dd {
  margin-left: 2em;
  margin-bottom: 0.5em;
}

/* Details/Summary (collapsible sections) */
.message-bubble.assistant details {
  margin: 0.5em 0;
  padding: 0.5em;
  border: 1px solid var(--table-border);
  border-radius: 4px;
}

.message-bubble.assistant summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.25em;
}

.message-bubble.assistant details[open] summary {
  margin-bottom: 0.5em;
}

/* ============================== */
/* Responsive adjustments */
/* ============================== */

@media (max-width: 768px) {
  .message-bubble.assistant table {
    font-size: 0.875em;
  }
  
  .message-bubble.assistant th,
  .message-bubble.assistant td {
    padding: 0.25em;
    min-width: 50px;
  }
  
  .message-bubble.assistant pre {
    padding: 0.25em;
  }
}

/* ============================== */
/* Print styles */
/* ============================== */

@media print {
  .message-bubble.assistant {
    color: #000000;
  }

  .message-bubble.assistant a {
    color: #0969da;
    text-decoration: underline;
  }

  .message-bubble.assistant pre,
  .message-bubble.assistant code {
    background-color: #f6f8fa;
    color: #000000;
  }
}