/* viberoom - Copyright (c) 2026 Todor Rusev - AGPL-3.0-or-later; see LICENSE */
.automations-dialog { width: min(800px, calc(100 * var(--layout-vw, 1vw) - 32px)); min-width: min(320px, calc(100 * var(--layout-vw, 1vw) - 32px)); max-height: calc(100 * var(--layout-vh, 1dvh) - 40px); overflow: auto; }
.auto-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; }
.auto-heading h3 { margin: 3px 0 0; }
.auto-eyebrow { font-size: var(--fs-xs); font-weight: 700; color: var(--primary); }
.auto-intro { display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: calc(18px * var(--r-scale)); background: var(--lav); margin-bottom: 18px; }
.auto-intro > div:last-child { min-width: 0; }
.auto-intro p { margin: 5px 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.auto-intro .auto-intro-title { font-size: var(--fs-lg); font-weight: 800; color: var(--ink); }
.auto-intro .auto-availability { font-size: var(--fs-xs); color: var(--muted); }
.auto-availability .i { width: 13px; height: 13px; vertical-align: -2px; }
.auto-art { flex: 0 0 116px; color: var(--primary); }
.auto-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.auto-paper { fill: var(--panel); stroke: var(--primary); }
.auto-calendar { stroke: var(--primary); }
.auto-ticks { stroke: var(--muted); stroke-width: 4; }
.auto-clock-face { fill: var(--primary); stroke: var(--primary); }
.auto-hand { stroke: var(--btn-on-primary); stroke-width: 3; }
.auto-spark { stroke: var(--primary); }
.auto-clock, .auto-clock-face, .auto-spark { transform-box: fill-box; transform-origin: center; }
.auto-hand { transform-box: view-box; transform-origin: 86px 51px; } 
.auto-clock { animation: auto-hello 650ms var(--ease-out) both; }
@keyframes auto-hello { 0% { transform: translateY(5px) rotate(-5deg); } 60% { transform: translateY(-3px) rotate(2deg); } 100% { transform: none; } }
.automations-dialog .auto-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.auto-main-actions { margin-bottom: 22px !important; }
.auto-main-actions [data-auto="refresh"] { margin-inline-start: auto; }
.auto-totals { color: var(--muted); font-size: var(--fs-xs); }
.auto-section-title { display: flex; align-items: center; gap: 8px; margin: 22px 0 12px; font-size: var(--fs-sm); }
.auto-section-title > .i { color: var(--primary); width: 18px; height: 18px; }
.auto-section-title > span { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; margin-inline-start: auto; }
.auto-jobs, .auto-runs, [data-auto-proposals] { display: grid; gap: 12px; }
.auto-card { min-width: 0; border: 1px solid color-mix(in srgb, var(--muted) 20%, transparent); border-radius: calc(16px * var(--r-scale)); padding: 16px; background: var(--card); transition: border-color var(--t-fast), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
.auto-card:hover, .auto-card:focus-within { border-color: color-mix(in srgb, var(--primary) 45%, transparent); box-shadow: var(--shadow-tile); transform: translateY(-2px); }
.auto-card-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.auto-card-heading h4 { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; margin: 0; font-size: var(--fs-md); }
.auto-mark { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: calc(11px * var(--r-scale)); background: var(--lav); color: var(--primary); }
.auto-mark .i { width: 19px; height: 19px; }
.auto-mark[data-action="reminder"] { background: var(--warm); color: var(--warm-ink); }
.auto-status { flex: none; padding: 4px 9px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); background: var(--soft); }
.auto-status[data-tone="enabled"], .auto-status[data-tone="completed"] { background: var(--st-ready); color: var(--st-ready-ink); }
.auto-status[data-tone="waiting"], .auto-status[data-tone="running"] { background: var(--lav); color: var(--primary); }
.auto-status[data-tone="interrupted"], .auto-status[data-tone="failed"] { background: var(--warm); color: var(--warm-ink); }
.auto-proposal { border-style: dashed; border-color: var(--primary); }
.auto-card p { margin: 8px 0; overflow-wrap: anywhere; font-size: var(--fs-sm); }
.auto-card .auto-recipient { color: var(--muted); font-size: var(--fs-xs); margin-inline-start: 44px; }
.auto-schedule { display: flex; align-items: baseline; gap: 7px; font-weight: 700; }
.auto-schedule .i { flex: none; width: 14px; height: 14px; align-self: center; }
.auto-card .auto-next { color: var(--muted); font-size: var(--fs-xs); display: flex; flex-wrap: wrap; gap: 6px; }
.auto-next strong { font-weight: 600; color: var(--ink-2); }
.auto-card .auto-toolbar [data-auto="delete"] { margin-inline-start: auto; }
.automations-dialog .auto-instructions { white-space: pre-wrap; max-height: 240px; overflow: auto; padding: 10px 12px; background: var(--soft); border-radius: calc(10px * var(--r-scale)); }
.automations-dialog details { margin-top: 12px; color: var(--ink-2); font-size: var(--fs-sm); }
.automations-dialog details > summary { cursor: pointer; font-weight: 600; }
.automations-dialog details[open] > summary { color: var(--primary); margin-bottom: 10px; }
.auto-ground-rules { border-top: 1px solid color-mix(in srgb, var(--muted) 18%, transparent); padding-top: 14px; }
.auto-ground-rules .i { width: 14px; height: 14px; vertical-align: -2px; }
.auto-ground-rules p { line-height: 1.5; }
.auto-empty { display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: calc(16px * var(--r-scale)); background: var(--soft); }
.auto-empty h4 { margin: 0 0 5px; font-size: var(--fs-sm); }
.auto-empty p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.auto-empty-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--r-pill); background: var(--lav); color: var(--primary); }
.auto-empty-icon .i { width: 25px; height: 25px; }
.auto-empty-small { padding: 14px 16px; }
.auto-empty-small > .i { flex: none; color: var(--muted); }
.auto-history-hint { margin: -4px 0 12px; }
.automations-dialog form, .auto-form-section { display: grid; gap: 14px; min-width: 0; }
.auto-form-section { margin: 0; padding: 16px; border: 1px solid color-mix(in srgb, var(--muted) 20%, transparent); border-radius: calc(16px * var(--r-scale)); }
.auto-form-section legend { padding: 0 7px; font-size: var(--fs-sm); font-weight: 800; }
.auto-form-section legend span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--lav); color: var(--primary); margin-inline-end: 6px; }
.auto-field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.auto-field-row > label { flex: 1 1 200px; min-width: 0; }
.automations-dialog form label { display: grid; gap: 6px; }
.automations-dialog form label.carry-check { display: flex; align-items: center; }
.automations-dialog form input:not([type=checkbox]), .automations-dialog form textarea, .automations-dialog form select { width: 100%; min-width: 0; box-sizing: border-box; }
.auto-form-actions { justify-content: space-between; }
.auto-editing .auto-intro { display: none; }
.automations-dialog [hidden] { display: none !important; }
.automations-dialog [data-auto-feedback], .automations-dialog [data-auto-preview]:not(:empty) { padding: 10px 14px; border-radius: calc(10px * var(--r-scale)); background: var(--lav); color: var(--primary); font-size: var(--fs-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.automations-dialog [data-auto-feedback].error { background: var(--warm); color: var(--warm-ink); }
.automations-dialog [data-auto-preview]:empty { display: none; }
.automations-dialog[aria-busy=true] { cursor: progress; }
.auto-confirm-preview { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: calc(14px * var(--r-scale)); background: var(--soft); margin: 14px 0; }
.auto-confirm-preview > div { min-width: 0; }
.auto-confirm-preview p { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 180px; overflow: auto; font-size: var(--fs-sm); margin: 7px 0 0; }
.auto-heading, .auto-intro, .auto-main-actions, .auto-section-title, .auto-card, .auto-empty, .auto-history-hint, .auto-ground-rules, .auto-form-section, .auto-form-actions { animation: rise var(--t-slow) var(--ease-out) both; }
.auto-intro, .auto-form-section:nth-of-type(1) { animation-delay: 40ms; }
.auto-main-actions, .auto-form-section:nth-of-type(2) { animation-delay: 80ms; }
.auto-section-title, .auto-form-section:nth-of-type(3) { animation-delay: 120ms; }
.auto-card, .auto-empty, .auto-history-hint, .auto-ground-rules, .auto-form-actions { animation-delay: 160ms; }
.auto-card:nth-child(2) { animation-delay: 210ms; }
.auto-card:nth-child(3) { animation-delay: 260ms; }
.auto-card:nth-child(4) { animation-delay: 310ms; }
.auto-card:nth-child(n + 5) { animation-delay: 360ms; }
.auto-mark, .auto-mark .i, .auto-status, .auto-section-title > .i, .auto-empty-icon { transition: transform var(--t-base) var(--ease-pop); }
.auto-card:hover .auto-mark { transform: scale(1.08) rotate(-4deg); }
.auto-card:hover .auto-status { transform: scale(1.05); }
.auto-card:hover .auto-mark .i-bell { animation: auto-swing 700ms var(--ease-out); }
.auto-card:hover .auto-mark .i-spark { animation: auto-twinkle 700ms var(--ease-pop); }
.auto-card:hover .auto-mark .i-check { animation: auto-pop 480ms var(--ease-pop); }
.auto-card:hover .auto-mark .i-clock { animation: auto-tick 560ms var(--ease-pop); }
.auto-card:hover .auto-mark .i-alert { animation: auto-shake 520ms var(--ease-out); }
.auto-card:hover .auto-mark .i-user { transform: translateY(-1px) scale(1.1); }
.auto-section-title:hover > .i { transform: rotate(-12deg) scale(1.15); }
.auto-empty:hover .auto-empty-icon { transform: scale(1.08) rotate(-6deg); }
.auto-intro:hover .auto-hand { animation: auto-sweep 900ms cubic-bezier(.4, 0, .2, 1); }
.auto-intro:hover .auto-clock-face { animation: auto-face 900ms var(--ease-pop); }
.auto-intro:hover .auto-spark { animation: auto-flash 900ms var(--ease-out); }
.auto-intro:hover .auto-ticks { stroke-dasharray: 28; animation: auto-tickoff 800ms 150ms var(--ease-out) both; }
@keyframes auto-sweep { to { transform: rotate(360deg); } }
@keyframes auto-face { 40% { transform: scale(1.06); } 100% { transform: none; } }
@keyframes auto-flash { 0%, 100% { opacity: 1; stroke-width: 3; } 30% { opacity: 0.25; stroke-width: 4.5; } 60% { opacity: 1; stroke-width: 5; } }
@keyframes auto-tickoff { from { stroke-dashoffset: 28; } to { stroke-dashoffset: 0; } }
.automations-dialog details > summary { transition: color var(--t-fast), transform var(--t-base) var(--ease-out); }
.automations-dialog details > summary:hover { color: var(--primary); transform: translateX(2px); }
@keyframes auto-swing { 20% { transform: rotate(14deg); } 45% { transform: rotate(-10deg); } 70% { transform: rotate(5deg); } 100% { transform: none; } }
@keyframes auto-twinkle { 35% { transform: scale(1.25) rotate(20deg); opacity: 0.7; } 100% { transform: none; opacity: 1; } }
@keyframes auto-pop { 40% { transform: scale(1.3); } 100% { transform: none; } }
@keyframes auto-tick { 30% { transform: rotate(-12deg) scale(1.08); } 65% { transform: rotate(14deg) scale(1.08); } 100% { transform: none; } }
@keyframes auto-shake { 20%, 60% { transform: translateX(-2px); } 40%, 80% { transform: translateX(2px); } 100% { transform: none; } }
@media (max-width: 560px) {
  .automations-dialog { padding: 18px; }
  .auto-intro { padding: 14px; gap: 12px; }
  .auto-art { flex-basis: 64px; }
  .auto-totals { flex-basis: 100%; order: 1; }
  .auto-card { padding: 12px; }
  .auto-card-heading h4 { flex-basis: calc(100% - 44px); }
  .auto-status { margin-inline-start: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .automations-dialog *, .automations-dialog *::before, .automations-dialog *::after { animation: none !important; transition: none !important; }
  .auto-card:hover, .auto-card:focus-within, .auto-card:hover :is(.auto-mark, .auto-status, .i), .auto-section-title:hover > .i, .auto-empty:hover .auto-empty-icon, .automations-dialog details > summary:hover { transform: none; }
}