/* ============================================================
   Toast namespace (SmartWrite.notifier.toast)
   ============================================================ */

.toast-host {
  --toast-icon-size:    var(--icon-size-lg);
  --toast-icon-size-sm: var(--icon-size-md);

  --toast-icon-control: var(--icon-size-sm);
  --toast-width:        min(310px, calc(100vw - 32px));
  --toast-list-max-height: min(50vh, 360px);

  --toast-circle-speed: 0.4s;
  --toast-top-gap:      25px;

  position:             fixed;
  z-index:              400;
  pointer-events:       none;


}

.toast-host--top-right {
  top: calc(var(--header-height) + var(--toast-top-gap));
  right: 16px;
}

.toast-host--top-left {
  top: calc(var(--header-height) + var(--toast-top-gap));
  left: 16px;
}

.toast-host--bottom-right {
  bottom: 28px;
  right: 16px;
}

.toast-host--bottom-left {
  bottom: 28px;
  left: 16px;
}

.toast-card {
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  width: var(--toast-width);
  min-width: var(--toast-width);
  max-width: var(--toast-width);
  padding: 11px 16px;
  background: var(--raised-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  color: var(--text);
  font-size:    var(--font-size-sm);
  opacity:      0;
  transform:    translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.toast-host--top-right .toast-card,
.toast-host--top-left .toast-card {
  transform: translateY(-8px);
}

.toast-card.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Auto-save tick — separate host, always compact + transparent */
.toast-host--autosave {
  z-index: 401;
}

.toast-host--autosave .toast-card {
  width: auto;
  min-width: calc(var(--toast-icon-size) + 14px + 3.5em);
  max-width: none;
  padding: 6px 10px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.toast-host--autosave .toast__message {
  font-size: 12px;
  color: var(--text-faint);
}

.toast-card.success,
.toast-row.success { --theme-color: var(--col-green-200); }
.toast-card.error,
.toast-row.error   { --theme-color: var(--col-red-200); }
.toast-card.info,
.toast-row.info    { --theme-color: var(--col-blue-200); }
.toast-card.warning,
.toast-row.warning { --theme-color: var(--col-yellow-200); }
.toast-card.upload,
.toast-row.upload  { --theme-color: var(--col-green-300); }
.toast-card.message,
.toast-row.message { --theme-color: var(--messaging-kind-message); }
.toast-card.chat,
.toast-row.chat    { --theme-color: var(--messaging-kind-chat); }

.toast__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toast__title {
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.3;
}

.toast__message {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.45;
}

.toast-card.show .toast__message {
  animation: toastShowMessage 0.1s forwards var(--toast-circle-speed);
}

.toast__action {
  align-self: flex-start;
  margin-top: 4px;
}


.toast__icon {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

/* chage over animation from toast.js changetype function */



.toast-card.success .toast__icon,
.toast-card.error .toast__icon,
.toast-card.info .toast__icon,
.toast-card.warning .toast__icon,
.toast-card.upload .toast__icon,
.toast-card.message .toast__icon,
.toast-card.chat .toast__icon {
  display: flex;
}

.toast-card--list .toast__icon {
  display: none;
}

.toast__icon-container {
  position: relative;
  width: var(--toast-icon-size);
  height: var(--toast-icon-size);
}

.toast-card.show:not(.upload) .toast__icon-container {
  animation: toastAddShadow 0.2s forwards var(--toast-circle-speed);
  border-radius: 50%;
}

.toast-card.warning.show .toast__icon-container {
  border-radius: 0;
  box-shadow: none;
  animation: toastAddShadowTriangle 0.2s forwards var(--toast-circle-speed);
}

.toast__svg {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.toast-card.success .toast__svg--success,
.toast-card.error .toast__svg--error,
.toast-card.info .toast__svg--info,
.toast-card.warning .toast__svg--warning,
.toast-card.upload .toast__svg--upload,
.toast-card.message .toast__svg--message,
.toast-card.chat .toast__svg--chat {
  display: block;
}

.toast__shape {
  fill: transparent;
  stroke: var(--theme-color);
  stroke-width: 4;
}

.toast__shape-circle {
  stroke-dasharray: 239;
  stroke-dashoffset: 239;
}

.toast__shape-triangle {
  stroke-linejoin: round;
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
}

.toast-card.show:not(.upload) .toast__shape-circle {
  animation:
    toastDrawShape var(--toast-circle-speed) linear forwards,
    toastFillShape 0.2s forwards var(--toast-circle-speed);
}

.toast-card.show .toast__shape-triangle {
  animation:
    toastDrawShape var(--toast-circle-speed) linear forwards,
    toastFillShape 0.2s forwards var(--toast-circle-speed);
}

/* Upload — left arc dotted, right arc solid; spinning fill behind the track */
.toast__shape-arc {
  fill: none;
  stroke: var(--theme-color);
  stroke-width: 4;
}

.toast__shape-arc--dashed {
  stroke-dasharray: 4 8;
}

.toast-card.upload .toast__shape-circle--spin,
.toast-card.upload .toast__shape-circle--trail {
  fill: none;
  stroke: var(--theme-color);
  stroke-width: 4;
  stroke-linecap: round;
}

.toast-card.upload .toast__shape-circle--spin {
  stroke-dasharray: 58 181;
}

.toast-card.upload .toast__shape-circle--trail {
  stroke-dasharray: 34 205;
  stroke-dashoffset: -58;
  opacity: 0.38;
}

.toast-card.upload.show .toast__upload-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: toastUploadSpin 1.1s linear infinite;
}

.toast-card.upload .toast__symbol--upload {
  stroke: var(--theme-color);
}

.toast-card.upload.show .toast__symbol--upload {
  animation: none;
}

.toast__symbol {
  fill: transparent;
  stroke: var(--theme-color);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* note/chat glyphs are 24-unit paths scaled into the 80x80 canvas */
.toast__symbol--glyph {
  stroke-width: 1.8;
  fill: none;
}

.toast-card.show .toast__symbol {
  animation: toastColorSymbol 0.2s forwards var(--toast-circle-speed);
}

@keyframes toastDrawShape {
  to { stroke-dashoffset: 0; }
}

@keyframes toastFillShape {
  to { fill: var(--theme-color); stroke: var(--theme-color); }
}

@keyframes toastColorSymbol {
  to { stroke: white; }
}

@keyframes toastAddShadow {
  to { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
}

@keyframes toastAddShadowTriangle {
  to { filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.2)); }
}

@keyframes toastShowMessage {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

@keyframes toastUploadSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .toast-card.show:not(.upload) .toast__shape-circle,
  .toast-card.show .toast__shape-triangle {
    stroke-dashoffset: 0;
    fill: var(--theme-color);
    stroke: var(--theme-color);
    animation: none;
  }

  .toast-card.show .toast__symbol {
    stroke: white;
    animation: none;
  }

  .toast-card.show:not(.upload) .toast__icon-container {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    animation: none;
  }

  .toast-card.upload.show .toast__upload-spin {
    animation: none;
  }

  .toast-card.upload .toast__shape-circle--spin {
    stroke-dashoffset: 0;
  }
}

/* ============================================================
   File transfer rows (inside main toast)
   ============================================================ */

.toast-card--transfer-active {
  align-items: flex-start;
}

.toast-card.toast-card--swapping,
.toast__icon-container--swapping {
  opacity: 0.35;
  transition: opacity 0.16s ease;
}

.toast-card--transfer-active .toast__message {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.toast__transfer {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.file-transfer-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-height: min(50vh, 320px);
  overflow-y: auto;
}

.file-transfer-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.file-transfer-row-inner-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.file-transfer--info-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--surface-raised);
}

.file-transfer--info-icon-img {
  width: 18px;
  height: 18px;
  opacity: 0.85;
}

.file-transfer--info-title {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-transfer--info-filesize {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-faint);
}

.file-transfer--progress-bar {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  overflow: hidden;
}

.file-transfer--progress-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--col-green-300);
  transition: width 0.12s ease;
}

.file-transfer-row--failed .file-transfer--progress-bar-fill {
  background: var(--col-red-200);
}

.file-transfer-row--cancelled .file-transfer--progress-bar-fill {
  background: var(--col-yellow-200);
}

.file-transfer--progress-action-button {
  width: var(--toast-icon-control);
  height: var(--toast-icon-control);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
}

.file-transfer--progress-action-button:disabled {
  cursor: default;
}

.file-transfer--progress-action-button:not(:disabled):hover {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
}

.file-transfer__action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.file-transfer__action-icon svg {
  width: 16px;
  height: 16px;
}

.file-transfer__action-icon--success { color: var(--col-green-200); }
.file-transfer__action-icon--warning { color: var(--col-yellow-200); }
.file-transfer__action-icon--error   { color: var(--col-red-200); }
.file-transfer__action-icon--cancel  { color: var(--text-dim); }

/* ============================================================
   Notification list (one card, independent rows)
   ============================================================ */

.toast-card--list {
  align-items: stretch;
}

.toast-card--list .toast__body {
  gap: 0;
  width: 100%;
}

.toast__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: var(--toast-list-max-height);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
}

.toast-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.toast-row:not([hidden]) + .toast-row:not([hidden]) {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}

.toast-row--more {
  justify-content: center;
  color: var(--text-faint);
  font-size: 12px;
  padding: 0 0 8px;
}

.toast-row--exiting {
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
}

.toast-row__icon {
  position: relative;
  flex-shrink: 0;
  width: var(--toast-icon-size);
  height: var(--toast-icon-size);
}

.toast-row:not(.upload):not(.toast-row--exiting) .toast-row__icon {
  animation: toastAddShadow 0.2s forwards var(--toast-circle-speed);
  border-radius: 50%;
}

.toast-row.warning:not(.toast-row--exiting) .toast-row__icon {
  border-radius: 0;
  box-shadow: none;
  animation: toastAddShadowTriangle 0.2s forwards var(--toast-circle-speed);
}

.toast-row .toast__svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.toast-row:not(.upload):not(.toast-row--exiting) .toast__shape-circle {
  animation:
    toastDrawShape var(--toast-circle-speed) linear forwards,
    toastFillShape 0.2s forwards var(--toast-circle-speed);
}

.toast-row:not(.toast-row--exiting) .toast__shape-triangle {
  animation:
    toastDrawShape var(--toast-circle-speed) linear forwards,
    toastFillShape 0.2s forwards var(--toast-circle-speed);
}

.toast-row:not(.toast-row--exiting) .toast__symbol {
  animation: toastColorSymbol 0.2s forwards var(--toast-circle-speed);
}

.toast-row.upload .toast__shape-circle--spin,
.toast-row.upload .toast__shape-circle--trail {
  fill: none;
  stroke: var(--theme-color);
  stroke-width: 4;
  stroke-linecap: round;
}

.toast-row.upload .toast__shape-circle--spin {
  stroke-dasharray: 58 181;
}

.toast-row.upload .toast__shape-circle--trail {
  stroke-dasharray: 34 205;
  stroke-dashoffset: -58;
  opacity: 0.38;
}

.toast-row.upload:not(.toast-row--exiting) .toast__upload-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: toastUploadSpin 1.1s linear infinite;
}

.toast-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toast-row__title {
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast-row__message {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .toast-row:not(.upload) .toast__shape-circle,
  .toast-row .toast__shape-triangle {
    stroke-dashoffset: 0;
    fill: var(--theme-color);
    stroke: var(--theme-color);
    animation: none;
  }

  .toast-row .toast__symbol {
    stroke: white;
    animation: none;
  }

  .toast-row:not(.upload) .toast-row__icon {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    animation: none;
  }

  .toast-row.upload .toast__upload-spin {
    animation: none;
  }
}