/* Canvas-first workspace shell. Existing controls keep their IDs and events;
   this layer only changes where contextual controls appear. */

.canvas-utility-dock,
.canvas-creation-dock,
.canvas-context-inspector,
.assistant-panel-toggle,
.assistant-context-summary {
  display: none;
}

.canvas-model-text-edit-card {
  width: min(520px, 100%);
}

.canvas-model-text-edit-message {
  padding-bottom: 10px;
}

.canvas-model-text-edit-list {
  display: grid;
  gap: 8px;
  max-height: min(48vh, 420px);
  overflow: auto;
  padding: 0 24px 8px;
}

.canvas-model-text-edit-row {
  display: grid;
  grid-template-columns: 24px 42px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: #526273;
  font-size: 12px;
}

.canvas-model-text-edit-row textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 31px;
  resize: vertical;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  padding: 6px 8px;
  color: #17212c;
  background: #fff;
  font: 13px/1.35 Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.canvas-model-text-edit-row textarea:focus {
  border-color: #246bfd;
  outline: 3px solid rgba(36, 107, 253, 0.15);
}

.canvas-model-text-edit-marker {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eef4ff;
  color: #246bfd;
  font-weight: 700;
}

.canvas-model-text-edit-count {
  margin: 0;
  padding: 0 24px 12px;
  color: #526273;
  font-size: 12px;
}

.canvas-model-text-edit-submit-options {
  display: flex;
  align-items: center;
  gap: 8px;
}

.canvas-model-text-edit-resolution {
  box-sizing: border-box;
  min-width: 116px;
  min-height: 38px;
  border: 1px solid #bdc9d8;
  border-radius: 6px;
  padding: 0 26px 0 10px;
  color: #17212c;
  background: #fff;
  font: 700 13px Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.canvas-model-text-edit-resolution:focus {
  border-color: #246bfd;
  outline: 3px solid rgba(36, 107, 253, 0.15);
}

@media (max-width: 560px) {
  .canvas-model-text-edit-list {
    padding-inline: 18px;
  }

  .canvas-model-text-edit-row {
    grid-template-columns: 22px 36px minmax(0, 1fr);
    gap: 5px;
  }

  .canvas-model-text-edit-count {
    padding-inline: 18px;
  }

  .canvas-model-text-edit-submit-options {
    flex: 1;
  }

  .canvas-model-text-edit-resolution,
  .canvas-model-text-edit-submit-options .app-dialog-confirm {
    min-width: 0;
    flex: 1;
  }
}

@media (min-width: 981px) {
  .app.workspace-mode .page {
    grid-template-rows: 46px minmax(0, 1fr) !important;
  }

  .app.workspace-mode .workspace-ribbon {
    display: none !important;
  }

  .app.workspace-mode .top {
    padding: 0 14px !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }

  .app.workspace-mode .top-meta {
    gap: 7px !important;
  }

  .app.workspace-mode .top-meta > span:not(.support-chip),
  .app.workspace-mode .support-chip,
  .app.workspace-mode .canvas-quality-note__context {
    display: none !important;
  }

  .app.workspace-mode .workspace-welcome {
    min-height: 28px !important;
    padding: 0 7px !important;
    gap: 5px !important;
    border-color: transparent !important;
    background: transparent !important;
  }

  .app.workspace-mode .workspace-welcome-label {
    display: none !important;
  }

  .app.workspace-mode .workspace {
    grid-template-columns: minmax(0, 1fr) 324px !important;
    min-width: 0;
    background: #e5e8ed !important;
    transition: grid-template-columns 180ms ease;
  }

  .app.workspace-mode.assistant-collapsed .workspace {
    grid-template-columns: minmax(0, 1fr) 48px !important;
  }

  .app.workspace-mode .canvas {
    grid-template-rows: 42px minmax(0, 1fr) !important;
  }

  .app.workspace-mode.artboard-manager-open .canvas,
  .app.workspace-mode.document-artboard-rail-open .canvas {
    grid-template-rows: 42px minmax(0, 1fr) 112px !important;
  }

  .app.workspace-mode.artboard-manager-open .workspace-settings-drawer,
  .app.workspace-mode.document-artboard-rail-open .workspace-settings-drawer,
  .app.workspace-mode.artboard-manager-open .workspace-drawer-toggle,
  .app.workspace-mode.document-artboard-rail-open .workspace-drawer-toggle {
    display: none !important;
  }

  .app.workspace-mode .canvas-topbar {
    min-height: 38px !important;
    padding: 0 10px !important;
    background: rgba(250, 251, 252, 0.96) !important;
  }

  .app.workspace-mode .canvas-workspace-title strong {
    font-size: 0.72rem !important;
    font-weight: 760 !important;
  }

  .app.workspace-mode .canvas-mode-tabs,
  .app.workspace-mode .canvas-tool-switch,
  .app.workspace-mode .zoom-controls,
  .app.workspace-mode .canvas-view-menu,
  .app.workspace-mode #artboardManagerToggle,
  .app.workspace-mode #addTitleButton {
    display: none !important;
  }

  .app.workspace-mode .composer-meta {
    margin-left: auto;
  }

  .app.workspace-mode .status-badge {
    min-height: 26px !important;
    padding: 0 9px !important;
    border: 0 !important;
    background: transparent !important;
    color: #667085 !important;
    font-size: 0.66rem !important;
  }

  .app.workspace-mode.has-canvas-version .canvas-stage,
  .app.workspace-mode .canvas-stage {
    position: relative !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0;
    overflow: hidden;
    background-color: #dfe3e8 !important;
  }

  .app.workspace-mode.has-canvas-version .canvas-layer-panel,
  .app.workspace-mode .canvas-layer-panel {
    position: absolute !important;
    z-index: 8200;
    left: 76px;
    top: 16px;
    bottom: auto;
    width: 244px !important;
    max-height: min(58vh, 520px);
    display: none !important;
    overflow: hidden;
    border: 1px solid #d0d5dd !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 16px 36px rgba(16, 24, 40, 0.16) !important;
  }

  .app.workspace-mode.has-canvas-version.layer-panel-open .canvas-layer-panel,
  .app.workspace-mode.layer-panel-open .canvas-layer-panel {
    display: grid !important;
  }

  .app.workspace-mode .canvas-layer-list {
    min-height: 0;
    overflow-y: auto;
  }

  .app.workspace-mode .canvas-layer-panel__head {
    min-height: 38px !important;
    padding: 5px 7px !important;
  }

  .app.workspace-mode .canvas-navigator {
    right: 16px !important;
    bottom: 76px !important;
    display: none !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.14) !important;
  }

  .app.workspace-mode.navigator-open .canvas-navigator:not([hidden]) {
    display: block !important;
  }

  .app.workspace-mode .canvas-navigator-toggle {
    display: none !important;
  }

  /* The workspace now uses the canvas-bottom toolbar. Keep legacy ribbon commands
     in the DOM for compatibility with their bottom-toolbar proxies, but never show it. */
  .app.workspace-mode #workspaceRibbon {
    display: none !important;
  }

  /* Bottom-dock buttons use a display rule that otherwise overrides HTML hidden. */
  .canvas-creation-dock .canvas-dock-tool[hidden] {
    display: none !important;
  }

  .app.workspace-mode.region-edit-mode .mask-canvas {
    display: block;
  }

  .canvas-utility-dock,
  .canvas-creation-dock {
    position: absolute;
    z-index: 9000;
    bottom: 16px;
    height: 48px;
    padding: 5px;
    align-items: center;
    gap: 3px;
    border: 1px solid rgba(208, 213, 221, 0.95);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.14);
    backdrop-filter: blur(14px);
  }

  .app.workspace-mode .canvas-utility-dock {
    left: 16px;
    top: 16px;
    bottom: auto;
    width: 48px;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .app.workspace-mode .canvas-creation-dock {
    left: 76px;
    right: 16px;
    max-width: none;
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable;
    transform: none;
  }

  .app.workspace-mode .canvas-creation-dock::-webkit-scrollbar {
    height: 6px;
  }

  .app.workspace-mode .canvas-creation-dock::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #98a2b3;
  }

  .canvas-utility-dock button,
  .canvas-creation-dock button {
    position: relative;
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #344054;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, transform 120ms ease;
  }

  .canvas-creation-dock .canvas-dock-tool {
    width: auto;
    min-width: max-content;
    padding: 0 9px;
    font-size: 11px;
    font-weight: 720;
    white-space: nowrap;
  }

  .canvas-creation-dock .canvas-dock-tool.is-paid {
    color: #b54708;
  }

  .canvas-utility-dock button {
    width: 38px;
    min-width: 38px;
    height: 32px;
    padding: 0 3px;
    font-size: 10px;
    font-weight: 720;
    white-space: nowrap;
  }

  .canvas-creation-dock .canvas-dock-tool[hidden] {
    display: none;
  }

  .canvas-dock-group-label {
    display: inline-flex;
    height: 24px;
    align-items: center;
    padding: 0 5px;
    border-radius: 5px;
    background: #f2f4f7;
    color: #475467;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .canvas-dock-group-label--paid {
    background: #eef4ff;
    color: #175cd3;
  }

  .canvas-utility-dock button:hover,
  .canvas-creation-dock button:hover,
  .canvas-utility-dock button.is-active,
  .canvas-creation-dock button.is-active {
    background: #f0f2f5;
    color: #101828;
  }

  .canvas-creation-dock button.is-active {
    background: #202327;
    color: #ffffff;
  }

  .canvas-utility-dock button:active,
  .canvas-creation-dock button:active {
    transform: translateY(1px);
  }

  .canvas-creation-dock button:disabled {
    color: #98a2b3;
    cursor: not-allowed;
    opacity: 0.58;
  }

  .canvas-utility-dock svg,
  .canvas-creation-dock svg,
  .assistant-panel-toggle svg,
  .assistant-context-summary svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .canvas-dock-separator {
    width: 1px;
    height: 24px;
    margin: 0 3px;
    background: #e4e7ec;
  }

  .canvas-utility-dock .canvas-dock-zoom {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 2px 0;
    font-size: 10px;
    font-weight: 760;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }

  .canvas-utility-dock .canvas-dock-zoom span {
    display: block;
  }

  .canvas-context-inspector {
    position: absolute;
    z-index: 8800;
    top: 52px;
    right: 16px;
    width: min(320px, calc(100% - 96px)) !important;
    max-width: min(320px, calc(100% - 96px)) !important;
    max-height: min(58vh, 520px) !important;
    display: none;
    overflow-y: auto;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.17);
  }

  .canvas-context-inspector:has(> .panel-group:not([hidden])) {
    display: block;
  }

  .canvas-context-inspector-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 7px 0 9px;
    border-bottom: 1px solid #eaecf0;
    background: rgba(255, 255, 255, 0.99);
    color: #344054;
    cursor: grab;
    user-select: none;
  }

  .canvas-context-inspector-header.is-dragging {
    cursor: grabbing;
  }

  .canvas-context-inspector-grip {
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    color: #98a2b3;
  }

  .canvas-context-inspector-grip svg,
  .canvas-context-inspector-header button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .canvas-context-inspector-title {
    flex: 1;
    overflow: hidden;
    font-size: 12px;
    font-weight: 720;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .canvas-context-inspector-header button {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #475467;
    cursor: pointer;
  }

  .canvas-context-inspector-header button:hover {
    background: #f2f4f7;
    color: #175cd3;
  }

  .canvas-context-inspector[data-collapsed]:has(> .panel-group:not([hidden])) {
    display: block !important;
    width: 36px;
    max-height: 36px;
    overflow: visible;
    border: 1px solid #d0d5dd;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(16, 24, 40, 0.16);
  }

  .canvas-context-inspector[data-collapsed] > .panel-group {
    display: none !important;
  }

  .canvas-context-inspector[data-collapsed] .canvas-context-inspector-header {
    width: 34px;
    min-height: 34px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    cursor: grab;
  }

  .canvas-context-inspector[data-collapsed] .canvas-context-inspector-header.is-dragging,
  .canvas-context-inspector[data-collapsed] .canvas-context-inspector-header.is-dragging button {
    cursor: grabbing;
  }

  .canvas-context-inspector[data-collapsed] .canvas-context-inspector-grip,
  .canvas-context-inspector[data-collapsed] .canvas-context-inspector-title {
    display: none;
  }

  .canvas-context-inspector[data-collapsed] .canvas-context-inspector-header button {
    width: 34px;
    height: 34px;
    cursor: grab;
  }

  .canvas-context-inspector[data-collapsed] .canvas-context-inspector-header button svg {
    transform: rotate(180deg);
  }

  .canvas-context-inspector > .panel-group {
    margin: 0 !important;
    padding: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Keep the inspector usable without covering the artwork; content scrolls inside. */
  .canvas-context-inspector .canvas-transform-inspector,
  .canvas-context-inspector .canvas-text-inspector,
  .canvas-context-inspector .canvas-image-inspector,
  .canvas-context-inspector .canvas-production-inspector,
  .canvas-context-inspector .canvas-quality-inspector {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .canvas-context-inspector .canvas-transform-grid,
  .canvas-context-inspector .canvas-text-inspector-grid {
    gap: 6px !important;
  }

  .canvas-context-inspector .canvas-transform-grid input,
  .canvas-context-inspector .canvas-text-inspector-grid input {
    height: 30px !important;
    padding-inline: 6px !important;
    font-size: 0.72rem !important;
  }

  .canvas-context-inspector button,
  .canvas-context-inspector select {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app.workspace-mode .workspace-settings-drawer {
    position: absolute !important;
    z-index: 9200 !important;
    top: auto !important;
    right: auto !important;
    bottom: 72px !important;
    left: 50% !important;
    width: 320px !important;
    height: auto !important;
    max-height: min(64vh, 590px);
    display: block !important;
    overflow: hidden;
    border: 1px solid #d0d5dd !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.99) !important;
    box-shadow: 0 18px 44px rgba(16, 24, 40, 0.18) !important;
    transform: translateX(-50%) !important;
    transition: opacity 140ms ease, transform 140ms ease !important;
  }

  .app.workspace-mode .workspace-settings-drawer.is-collapsed {
    display: none !important;
  }

  .app.workspace-mode .workspace-drawer-toggle {
    display: none !important;
  }

  .app.workspace-mode .workspace-drawer-body {
    height: auto !important;
    max-height: min(64vh, 590px);
    padding: 11px !important;
  }

  .app.workspace-mode .workspace-drawer-head {
    min-height: 36px !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
  }

  .app.workspace-mode .workspace-drawer-legend,
  .app.workspace-mode .workspace-drawer-section[data-tool-param="default"] + .workspace-drawer-legend {
    display: none !important;
  }

  .app.workspace-mode .workspace-more-tools {
    position: fixed !important;
    z-index: 15000 !important;
    inset: auto auto 82px 50% !important;
    width: min(720px, calc(100vw - 48px)) !important;
    max-height: min(62vh, 620px) !important;
    transform: translateX(-50%) !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.22) !important;
  }

  .app.workspace-mode .chat {
    position: relative;
    width: 324px !important;
    min-width: 324px !important;
    border-left-color: #d0d5dd !important;
    background: #fafbfc !important;
    transition: width 180ms ease, min-width 180ms ease;
  }

  .app.workspace-mode.assistant-collapsed .chat {
    width: 48px !important;
    min-width: 48px !important;
    overflow: hidden !important;
  }

  .assistant-panel-toggle {
    position: absolute;
    z-index: 9500;
    top: 8px;
    left: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #667085;
    cursor: pointer;
  }

  .assistant-panel-toggle:hover {
    background: #eef1f5;
    color: #101828;
  }

  .app.workspace-mode.assistant-collapsed .assistant-panel-toggle svg {
    transform: rotate(180deg);
  }

  .app.workspace-mode.assistant-collapsed .composer-wrap,
  .app.workspace-mode.assistant-collapsed .panel-scroll {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .app.workspace-mode .ai-chat-head {
    padding-left: 38px !important;
  }

  .assistant-context-summary {
    width: 100%;
    min-height: 34px;
    padding: 0 9px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #e0e4ea;
    border-radius: 7px;
    background: #ffffff;
    color: #475467;
    font-size: 0.68rem;
    font-weight: 720;
    text-align: left;
    cursor: pointer;
  }

  .assistant-context-summary:hover {
    border-color: #b9c2cf;
    color: #101828;
  }

  .assistant-context-summary svg {
    width: 16px;
    height: 16px;
    transition: transform 140ms ease;
  }

  .chat.assistant-parameters-open .assistant-context-summary svg {
    transform: rotate(90deg);
  }

  .chat:not(.assistant-parameters-open):not(.assistant-parameters-required) .composer-size-gate,
  .chat:not(.assistant-parameters-open) .document-booklet-options,
  .chat:not(.assistant-parameters-open) .right-generation-params {
    display: none !important;
  }

  .app.workspace-mode .composer {
    padding: 8px !important;
    gap: 7px !important;
    background: #fafbfc !important;
  }

  .app.workspace-mode .composer-input-wrap {
    min-height: 74px !important;
    border-radius: 8px !important;
  }

  .app.workspace-mode .composer-input-wrap #promptBox {
    min-height: 54px !important;
  }
}

@media (min-width: 981px) and (max-width: 1280px) {
  .app.workspace-mode .workspace {
    grid-template-columns: minmax(0, 1fr) 300px !important;
  }

  .app.workspace-mode .chat {
    width: 300px !important;
    min-width: 300px !important;
  }

  .canvas-creation-dock {
    left: 76px;
    right: 16px;
    transform: none;
  }

  .canvas-creation-dock button {
    width: 36px;
    min-width: 36px;
  }
}

@media (max-width: 980px) {
  .canvas-utility-dock,
  .canvas-creation-dock,
  .canvas-context-inspector,
  .assistant-panel-toggle,
  .assistant-context-summary {
    display: none !important;
  }
}

/* Keep the assistant's generation settings explicit and scannable. */
.workspace-mode .right-generation-params {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 9px 0 4px !important;
  border-top: 1px solid #e3e8ef !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

.workspace-mode .right-generation-params-title {
  grid-column: 1 / -1;
  color: #344054;
  font-size: 0.72rem;
  font-weight: 800;
}

.workspace-mode .right-generation-params label {
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 8px !important;
  color: #667085 !important;
  font-size: 0.66rem !important;
  font-weight: 750 !important;
}

.workspace-mode .right-generation-params label > span {
  display: block !important;
  white-space: nowrap;
}

.workspace-mode .right-generation-params select {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  border-radius: 6px !important;
  font-size: 0.7rem !important;
}