/* ============================================================
   css/layouts/workspace.css
   Zolto v8.1.0 — Top-Level Workspace Layout
   ============================================================
   Purpose:
   - Define the outermost application shell structure
   - Top bar, sidebar, main content split
   - Boot screen
   - Responsive breakpoints for the workspace
   - All sizing via CSS custom properties from variables.css
   - No colours or typography — only layout geometry
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. App Shell
   ───────────────────────────────────────────────────────────── */

#zolto-app {
  display:        flex;
  flex-direction: column;
  height:         100dvh;
  width:          100vw;
  overflow:       hidden;
  background:     var(--bg-app);
}


/* ─────────────────────────────────────────────────────────────
   2. Top Bar
   ───────────────────────────────────────────────────────────── */

.zolto-topbar {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  height:           var(--topbar-height);
  min-height:       var(--topbar-height);
  flex-shrink:      0;
  padding:          0 var(--space-3);
  background:       var(--topbar-bg);
  border-bottom:    1px solid var(--topbar-border);
  backdrop-filter:  blur(var(--topbar-backdrop-blur));
  -webkit-backdrop-filter: blur(var(--topbar-backdrop-blur));
  z-index:          var(--z-topbar);
  gap:              var(--space-2);
}

.zolto-topbar-left,
.zolto-topbar-right {
  display:     flex;
  align-items: center;
  gap:         var(--space-1-5);
  flex:        1;
}

.zolto-topbar-right {
  justify-content: flex-end;
}

.zolto-topbar-center {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

/* Wordmark */
.zolto-wordmark {
  display:        flex;
  align-items:    center;
  gap:            var(--space-1-5);
  text-decoration: none;
  flex-shrink:    0;
  padding:        var(--space-1) var(--space-2);
  border-radius:  var(--radius-sm);
  transition:     background var(--duration-fast) var(--ease-out);
}

.zolto-wordmark:hover {
  background: var(--bg-surface);
}

/* Document title */
.zolto-doc-title {
  display:     flex;
  align-items: center;
  gap:         var(--space-1-5);
  min-width:   0;
  max-width:   320px;
}

.zolto-doc-title-text {
  font-size:     var(--text-sm);
  font-weight:   var(--weight-medium);
  color:         var(--text-main);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  min-width:     40px;
  max-width:     280px;
  padding:       var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-sm);
  border:        1px solid transparent;
  outline:       none;
  transition:    border-color var(--duration-fast) var(--ease-out),
                 background   var(--duration-fast) var(--ease-out);
  cursor:        text;
}

.zolto-doc-title-text:empty::before {
  content: attr(data-placeholder);
  color:   var(--text-faint);
  pointer-events: none;
}

.zolto-doc-title-text:hover {
  background:   var(--bg-surface);
  border-color: var(--border-subtle);
}

.zolto-doc-title-text:focus {
  background:   var(--bg-surface);
  border-color: var(--border-accent);
  white-space:  normal;
  overflow:     visible;
  text-overflow: unset;
}

.zolto-doc-dirty-indicator {
  color:       var(--accent-primary);
  font-size:   var(--text-xs);
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
  animation:   none;
}

/* Preview mode switcher */
.zolto-preview-mode-group {
  display:       flex;
  align-items:   center;
  gap:           var(--space-0-5);
  background:    var(--bg-surface);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding:       var(--space-0-5);
}

.zolto-mode-btn {
  display:       flex;
  align-items:   center;
  justify-content: center;
  width:         28px;
  height:        24px;
  border-radius: var(--radius-sm);
  color:         var(--text-faint);
  transition:    background var(--duration-fast) var(--ease-out),
                 color      var(--duration-fast) var(--ease-out);
}

.zolto-mode-btn svg {
  width:  14px;
  height: 14px;
}

.zolto-mode-btn:hover {
  background: var(--bg-surface-2);
  color:      var(--text-mute);
}

.zolto-mode-btn.zolto-mode-active {
  background: var(--accent-primary-subtle);
  color:      var(--accent-primary);
}

/* Icon buttons */
.zolto-icon-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  border-radius:   var(--radius-sm);
  color:           var(--text-mute);
  flex-shrink:     0;
  transition:      background var(--duration-fast) var(--ease-out),
                   color      var(--duration-fast) var(--ease-out);
}

.zolto-icon-btn svg {
  width:  16px;
  height: 16px;
}

.zolto-icon-btn:hover {
  background: var(--bg-surface);
  color:      var(--text-main);
}

.zolto-icon-btn:active {
  background: var(--bg-surface-2);
}

.zolto-icon-btn-sm {
  width:  26px;
  height: 26px;
}

.zolto-icon-btn-sm svg {
  width:  14px;
  height: 14px;
}

/* Command palette pill */
.zolto-cmd-pill {
  display:       flex;
  align-items:   center;
  gap:           var(--space-0-5);
  padding:       var(--space-1) var(--space-2);
  background:    var(--bg-surface);
  border:        1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color:         var(--text-faint);
  font-size:     var(--text-xs);
  transition:    background  var(--duration-fast) var(--ease-out),
                 border-color var(--duration-fast) var(--ease-out),
                 color        var(--duration-fast) var(--ease-out);
}

.zolto-cmd-pill:hover {
  background:   var(--bg-surface-2);
  border-color: var(--border-normal);
  color:        var(--text-mute);
}

.zolto-cmd-pill kbd {
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  background:  transparent;
  border:      none;
  padding:     0;
  color:       inherit;
}

/* Dropdown menus */
.zolto-dropdown {
  position:      absolute;
  top:           calc(100% + var(--space-1));
  right:         0;
  min-width:     180px;
  background:    var(--dropdown-bg);
  border:        1px solid var(--dropdown-border);
  border-radius: var(--dropdown-radius);
  box-shadow:    var(--dropdown-shadow);
  z-index:       var(--z-dropdown);
  overflow:      hidden;
  padding:       var(--space-1);
}

.zolto-dropdown-item {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2-5);
  padding:       var(--space-1-5) var(--space-3);
  font-size:     var(--text-sm);
  color:         var(--dropdown-item-text);
  border-radius: var(--radius-sm);
  cursor:        pointer;
  user-select:   none;
  transition:    background var(--duration-fast) var(--ease-out),
                 color      var(--duration-fast) var(--ease-out);
}

.zolto-dropdown-item:hover,
.zolto-dropdown-active {
  background: var(--dropdown-item-hover-bg);
  color:      var(--dropdown-item-hover-text);
}

.zolto-dropdown-icon {
  font-size:  0.9em;
  width:      1.2em;
  text-align: center;
  flex-shrink: 0;
  color:      var(--text-faint);
}

.zolto-dropdown-sep {
  height:     1px;
  background: var(--dropdown-sep);
  margin:     var(--space-1) 0;
}

/* Dropdown anchor wrapper — any element that has a dropdown child */
.zolto-topbar-right {
  position: relative;
}


/* ─────────────────────────────────────────────────────────────
   3. Workspace (sidebar + main)
   ───────────────────────────────────────────────────────────── */

.zolto-workspace {
  display:    flex;
  flex:       1;
  overflow:   hidden;
  height:     var(--content-height);
  min-height: 0;
}


/* ─────────────────────────────────────────────────────────────
   4. Main Content Area
   ───────────────────────────────────────────────────────────── */

.zolto-main {
  flex:       1;
  min-width:  0;
  overflow:   hidden;
  display:    flex;
  position:   relative;
}

/* Route views */
[data-view] {
  display:        none;
  flex:           1;
  overflow:       hidden;
  flex-direction: column;
}

[data-view].zolto-view-active {
  display: flex;
}

/* Home view */
.zolto-view-home {
  align-items:     center;
  justify-content: center;
  overflow-y:      auto;
  padding:         var(--space-16) var(--space-8);
  background:      var(--bg-canvas);
}

.zolto-home-inner {
  max-width:  480px;
  width:      100%;
  text-align: center;
}

.zolto-home-title {
  font-family:    var(--font-display);
  font-size:      3.5rem;
  font-style:     italic;
  font-weight:    var(--weight-normal);
  letter-spacing: var(--tracking-tight);
  color:          var(--text-heading);
  line-height:    var(--leading-none);
  margin-bottom:  var(--space-4);
}

.zolto-home-tagline {
  font-size:     var(--text-lg);
  color:         var(--text-mute);
  margin-bottom: var(--space-8);
  line-height:   var(--leading-relaxed);
}

.zolto-home-actions {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-3);
  margin-bottom:   var(--space-12);
}

/* Recent documents */
.zolto-recent {
  text-align: left;
}

.zolto-recent-title {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--text-faint);
  margin-bottom:  var(--space-3);
}

.zolto-recent-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

/* Editor view */
.zolto-view-editor {
  display:        flex;
  flex-direction: row;
  flex:           1;
  overflow:       hidden;
}

/* Settings & Plugins views */
.zolto-view-settings,
.zolto-view-plugins {
  overflow-y:  auto;
  padding:     var(--space-10);
  background:  var(--bg-canvas);
}

.zolto-settings-inner,
.zolto-plugins-inner {
  max-width: 640px;
  margin:    0 auto;
}

.zolto-settings-title,
.zolto-plugins-title {
  font-size:     var(--heading-2);
  font-weight:   var(--weight-semibold);
  color:         var(--text-heading);
  margin-bottom: var(--space-8);
}


/* ─────────────────────────────────────────────────────────────
   5. Buttons (base styles used across all views)
   ───────────────────────────────────────────────────────────── */

.zolto-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  padding:         var(--space-2) var(--space-5);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-medium);
  line-height:     var(--leading-none);
  border-radius:   var(--radius-md);
  cursor:          pointer;
  user-select:     none;
  white-space:     nowrap;
  transition:      background   var(--duration-fast) var(--ease-out),
                   color        var(--duration-fast) var(--ease-out),
                   border-color var(--duration-fast) var(--ease-out),
                   box-shadow   var(--duration-fast) var(--ease-out),
                   transform    var(--duration-fast) var(--ease-out);
}

.zolto-btn:active {
  transform: scale(0.97);
}

.zolto-btn:disabled {
  opacity:        0.45;
  cursor:         not-allowed;
  pointer-events: none;
}

/* Primary */
.zolto-btn-primary {
  background: var(--accent-primary);
  color:      #ffffff;
  border:     1px solid transparent;
}

.zolto-btn-primary:hover {
  background: var(--accent-primary-hover);
}

.zolto-btn-primary:active {
  background: var(--accent-primary-active);
}

/* Secondary */
.zolto-btn-secondary {
  background: var(--bg-surface);
  color:      var(--text-main);
  border:     1px solid var(--border-normal);
}

.zolto-btn-secondary:hover {
  background: var(--bg-surface-2);
}

/* Ghost */
.zolto-btn-ghost {
  background: transparent;
  color:      var(--text-mute);
  border:     1px solid transparent;
}

.zolto-btn-ghost:hover {
  background: var(--bg-surface);
  color:      var(--text-main);
}

/* Danger */
.zolto-btn-danger {
  background: var(--intent-danger-bg);
  color:      var(--intent-danger-text);
  border:     1px solid var(--intent-danger-border);
}

.zolto-btn-danger:hover {
  background: var(--intent-danger);
  color:      #ffffff;
}

/* Size variants */
.zolto-btn-sm {
  padding:     var(--space-1-5) var(--space-3);
  font-size:   var(--text-xs);
  border-radius: var(--radius-sm);
}

.zolto-btn-lg {
  padding:       var(--space-3) var(--space-7);
  font-size:     var(--text-md);
  border-radius: var(--radius-lg);
}


/* ─────────────────────────────────────────────────────────────
   6. Toast Notifications
   ───────────────────────────────────────────────────────────── */

.zolto-toast-region {
  position:       fixed;
  bottom:         var(--space-6);
  right:          var(--space-6);
  z-index:        var(--z-toast);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  pointer-events: none;
  max-width:      360px;
  width:          calc(100vw - var(--space-12));
}

.zolto-toast {
  display:        flex;
  align-items:    flex-start;
  gap:            var(--space-3);
  padding:        var(--space-3) var(--space-4);
  background:     var(--toast-bg);
  border:         1px solid var(--toast-border);
  border-radius:  var(--toast-radius);
  box-shadow:     var(--toast-shadow);
  color:          var(--toast-text);
  font-size:      var(--text-sm);
  pointer-events: all;
  animation:      zolto-toast-in var(--duration-normal) var(--ease-spring) forwards;
}

.zolto-toast.zolto-toast-out {
  animation: zolto-toast-out var(--duration-fast) var(--ease-in) forwards;
}

@keyframes zolto-toast-in {
  from {
    opacity:   0;
    transform: translateY(var(--space-3)) scale(0.96);
  }
  to {
    opacity:   1;
    transform: translateY(0) scale(1);
  }
}

@keyframes zolto-toast-out {
  to {
    opacity:   0;
    transform: translateY(var(--space-2)) scale(0.96);
  }
}

.zolto-toast-icon {
  flex-shrink: 0;
  font-size:   1.1em;
  line-height: 1.4;
}

.zolto-toast-body {
  flex:        1;
  min-width:   0;
  line-height: var(--leading-snug);
}

.zolto-toast-title {
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-0-5);
}

.zolto-toast-close {
  flex-shrink: 0;
  color:       var(--text-faint);
  font-size:   var(--text-lg);
  line-height: 1;
  padding:     0 var(--space-1);
  transition:  color var(--duration-fast) var(--ease-out);
}

.zolto-toast-close:hover {
  color: var(--text-mute);
}


/* ─────────────────────────────────────────────────────────────
   7. Command Palette Overlay
   ───────────────────────────────────────────────────────────── */

.zolto-palette-overlay {
  position:         fixed;
  inset:            0;
  z-index:          var(--z-palette);
  display:          flex;
  align-items:      flex-start;
  justify-content:  center;
  padding-top:      clamp(var(--space-16), 12vh, 160px);
  background:       var(--bg-overlay);
  backdrop-filter:  blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation:        zolto-overlay-in var(--duration-fast) var(--ease-out) forwards;
}

.zolto-palette-overlay[hidden] {
  display: none;
}

@keyframes zolto-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.zolto-palette {
  width:         var(--palette-width);
  max-width:     calc(100vw - var(--space-8));
  background:    var(--palette-bg);
  border:        1px solid var(--palette-border);
  border-radius: var(--palette-radius);
  box-shadow:    var(--palette-shadow);
  overflow:      hidden;
  animation:     zolto-palette-in var(--duration-normal) var(--ease-spring) forwards;
}

@keyframes zolto-palette-in {
  from {
    opacity:   0;
    transform: scale(0.96) translateY(-var(--space-3));
  }
  to {
    opacity:   1;
    transform: scale(1) translateY(0);
  }
}

.zolto-palette-input-wrap {
  display:      flex;
  align-items:  center;
  gap:          var(--space-3);
  padding:      var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.zolto-palette-search-icon {
  width:       18px;
  height:      18px;
  flex-shrink: 0;
  color:       var(--text-faint);
}

.zolto-palette-input {
  flex:        1;
  font-size:   var(--text-md);
  font-weight: var(--weight-normal);
  color:       var(--palette-input-text);
  background:  transparent;
  line-height: var(--leading-normal);
}

.zolto-palette-input::placeholder {
  color: var(--palette-placeholder);
}

.zolto-palette-esc-hint {
  font-size:  var(--text-xs);
  color:      var(--text-faint);
  background: var(--bg-surface);
  border:     1px solid var(--border-subtle);
  padding:    0.2em 0.5em;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.zolto-palette-results {
  max-height:    360px;
  overflow-y:    auto;
  padding:       var(--space-1);
}

.zolto-palette-item {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size:     var(--text-sm);
  color:         var(--palette-item-text);
  cursor:        pointer;
  transition:    background var(--duration-fast) var(--ease-out),
                 color      var(--duration-fast) var(--ease-out);
}

.zolto-palette-item:hover,
.zolto-palette-item[aria-selected="true"] {
  background: var(--palette-item-hover-bg);
  color:      var(--palette-item-active-text);
}

.zolto-palette-item-icon {
  width:        28px;
  height:       28px;
  flex-shrink:  0;
  display:      flex;
  align-items:  center;
  justify-content: center;
  background:   var(--bg-surface-2);
  border-radius: var(--radius-sm);
  font-size:    0.9em;
  color:        var(--text-mute);
}

.zolto-palette-item-body {
  flex: 1;
  min-width: 0;
}

.zolto-palette-item-label {
  font-weight:   var(--weight-medium);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.zolto-palette-item-desc {
  font-size: var(--text-xs);
  color:     var(--text-faint);
  margin-top: var(--space-0-5);
}

.zolto-palette-item-kbd {
  flex-shrink: 0;
  font-size:   var(--text-xs);
  color:       var(--text-faint);
}

.zolto-palette-group-label {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--text-faint);
  padding:        var(--space-2) var(--space-3) var(--space-1);
  user-select:    none;
}

.zolto-palette-empty {
  text-align:  center;
  padding:     var(--space-8) var(--space-4);
  font-size:   var(--text-sm);
  color:       var(--text-faint);
}


/* ─────────────────────────────────────────────────────────────
   8. Global Error Overlay
   ───────────────────────────────────────────────────────────── */

.zolto-error-overlay {
  position:        fixed;
  inset:           0;
  z-index:         calc(var(--z-boot) - 1);
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--bg-overlay);
  padding:         var(--space-8);
}

.zolto-error-overlay[hidden] {
  display: none;
}

.zolto-error-box {
  background:    var(--bg-surface);
  border:        1px solid var(--border-error);
  border-radius: var(--radius-xl);
  padding:       var(--space-8);
  max-width:     480px;
  width:         100%;
  text-align:    center;
}

.zolto-error-title {
  font-size:     var(--heading-3);
  font-weight:   var(--weight-semibold);
  color:         var(--text-error);
  margin-bottom: var(--space-3);
}

.zolto-error-message {
  font-size:     var(--text-sm);
  color:         var(--text-mute);
  margin-bottom: var(--space-6);
  line-height:   var(--leading-relaxed);
}


/* ─────────────────────────────────────────────────────────────
   9. Autocomplete Popup
   ───────────────────────────────────────────────────────────── */

.zolto-autocomplete {
  position:      fixed;
  z-index:       var(--z-dropdown);
  background:    var(--dropdown-bg);
  border:        1px solid var(--dropdown-border);
  border-radius: var(--dropdown-radius);
  box-shadow:    var(--dropdown-shadow);
  overflow:      hidden;
  min-width:     220px;
  max-width:     380px;
  max-height:    240px;
  overflow-y:    auto;
  padding:       var(--space-1);
}

.zolto-autocomplete[hidden] {
  display: none;
}

.zolto-autocomplete-item {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2-5);
  padding:       var(--space-1-5) var(--space-3);
  font-size:     var(--text-sm);
  color:         var(--dropdown-item-text);
  border-radius: var(--radius-sm);
  cursor:        pointer;
  transition:    background var(--duration-fast) var(--ease-out),
                 color      var(--duration-fast) var(--ease-out);
}

.zolto-autocomplete-item:hover,
.zolto-autocomplete-item[aria-selected="true"] {
  background: var(--palette-item-hover-bg);
  color:      var(--palette-item-active-text);
}

.zolto-autocomplete-icon {
  font-size:   0.85em;
  color:       var(--text-faint);
  flex-shrink: 0;
}

.zolto-autocomplete-label {
  font-weight:  var(--weight-medium);
  font-family:  var(--font-mono);
  font-size:    0.9em;
}

.zolto-autocomplete-desc {
  font-size: var(--text-xs);
  color:     var(--text-faint);
  margin-left: auto;
  padding-left: var(--space-3);
  white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────
   10. Boot Screen
   ───────────────────────────────────────────────────────────── */

#zolto-boot {
  position:        fixed;
  inset:           0;
  z-index:         var(--z-boot);
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--bg-app);
  transition:      opacity   var(--duration-slow) var(--ease-out),
                   visibility var(--duration-slow) var(--ease-out);
}

#zolto-boot.hidden {
  opacity:        0;
  visibility:     hidden;
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────
   11. Responsive — Sidebar collapse on narrow screens
   ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Sidebar overlays content on mobile */
  .zolto-sidebar {
    position:   absolute;
    top:        0;
    left:       0;
    height:     100%;
    z-index:    var(--z-sidebar);
    transform:  translateX(-100%);
    transition: transform var(--duration-normal) var(--ease-out);
    box-shadow: var(--shadow-xl);
  }

  [data-sidebar="open"] .zolto-sidebar {
    transform: translateX(0);
  }

  /* Overlay behind sidebar on mobile */
  [data-sidebar="open"] .zolto-workspace::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: var(--bg-overlay);
    z-index:    calc(var(--z-sidebar) - 1);
  }

  /* Hide the command pill on small screens */
  .zolto-cmd-pill {
    display: none;
  }

  /* Collapse document title max-width */
  .zolto-doc-title {
    max-width: 140px;
  }

  /* Toast sits above nav bars */
  .zolto-toast-region {
    bottom: var(--space-4);
    right:  var(--space-4);
  }

  /* Home view padding */
  .zolto-view-home {
    padding: var(--space-10) var(--space-5);
  }

  .zolto-home-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 480px) {
  /* Palette full-width on very small screens */
  .zolto-palette {
    width:         calc(100vw - var(--space-4));
    max-width:     100%;
    border-radius: var(--radius-lg);
  }

  .zolto-palette-overlay {
    padding-top:   var(--space-6);
    align-items:   flex-start;
  }

  /* Stack topbar buttons */
  .zolto-topbar-center {
    display: none;
  }
}


/* ─────────────────────────────────────────────────────────────
   12. Print — hide all workspace chrome
   ───────────────────────────────────────────────────────────── */

@media print {
  .zolto-topbar,
  .zolto-sidebar,
  .zolto-editor-pane,
  .zolto-split-handle,
  .zolto-preview-toolbar,
  .zolto-toast-region,
  .zolto-palette-overlay,
  .zolto-autocomplete,
  #zolto-boot {
    display: none !important;
  }

  .zolto-workspace,
  .zolto-main,
  .zolto-view-editor {
    display: block !important;
    height:  auto !important;
    overflow: visible !important;
  }

  .zolto-preview-pane {
    width:    100% !important;
    height:   auto !important;
    overflow: visible !important;
  }

  .zolto-preview {
    max-width: none !important;
    padding:   0 !important;
  }
}