/* Workflow presentation override. Load only with workorder-workflow-layout.js. */
#work-order .v1-workflow-panel.gc-workflow-docked {
  position:fixed!important; inset:0 0 0 auto!important; width:360px!important;
  height:100dvh!important; max-height:100dvh!important; min-height:0!important;
  border-radius:0!important; border-top:0!important; border-right:0!important;
  border-bottom:0!important; overflow:hidden!important; box-sizing:border-box;
  flex-direction:column; z-index:1040;
  --wf-surface:#fff; --wf-compose:#f5f8fb; --wf-field:#fff;
  --wf-line:#d7e1ea; --wf-text:#173149; --wf-muted:#60768a; --wf-note:#f1f6fb;
  background:var(--wf-surface)!important; color:var(--wf-text);
}
html[data-theme="dark"] #work-order .v1-workflow-panel.gc-workflow-docked {
  --wf-surface:#101e2b; --wf-compose:#10202f; --wf-field:#0a1722;
  --wf-line:#30485c; --wf-text:#e1edf7; --wf-muted:#9eb4c7; --wf-note:#152737;
}
#work-order .gc-workflow-docked>.v1-drawer-head {
  flex:0 0 auto!important; min-height:0!important; padding:14px 14px 12px!important;
  position:relative!important; top:auto!important; background:var(--wf-surface)!important;
  border-bottom:1px solid var(--wf-line)!important;
}
#work-order .gc-workflow-docked .v1-drawer-head h2 {font-size:17px!important; line-height:1.3!important; margin:3px 0 8px!important}
#work-order .gc-workflow-docked .v1-workflow-current {gap:8px; margin:0!important}
#work-order .gc-workflow-docked .v1-workflow-current>span:first-child {display:none}
#work-order .gc-workflow-docked>.v1-drawer-body {
  display:flex!important; flex-direction:column!important; flex:1 1 0!important;
  min-height:0!important; max-height:none!important; padding:0!important; gap:0!important;
  overflow:hidden!important;
}
#work-order .gc-workflow-docked .gc-workorder-tabs {
  position:relative!important; top:auto!important; flex:0 0 auto!important;
  display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important;
  padding:7px 10px!important; gap:6px!important; border-bottom:1px solid var(--wf-line);
}
#work-order .gc-workflow-docked .gc-workorder-tabs button {min-height:38px!important; padding:7px 5px!important; font-size:11px!important}
#work-order .gc-workflow-docked .gc-workorder-flow:not([hidden]) {
  display:flex!important; flex-direction:column!important; flex:1 1 0!important;
  min-height:0!important; overflow:hidden!important; padding:0!important; gap:0!important;
}
#work-order .gc-workflow-docked [data-gc-workorder-panel][hidden] {display:none!important}
#work-order .gc-workflow-docked .gc-workorder-thread {
  flex:1 1 0!important; min-height:0!important; overflow-y:auto!important; overflow-x:hidden!important;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:12px 12px 16px!important; margin:0!important; border:0!important;
  background:var(--wf-surface)!important; scrollbar-gutter:stable; overflow-anchor:none;
}
#work-order .gc-workflow-docked .gc-workorder-thread:focus-visible {outline:2px solid #349af0; outline-offset:-3px}
#work-order .gc-workflow-docked .gc-workorder-thread-head {display:none!important}
#work-order .gc-workflow-docked .gc-workorder-thread-items {display:grid!important; gap:11px!important; padding:0!important}
#work-order .gc-workflow-docked .gc-thread-entry {
  display:block!important; min-width:0!important; padding:10px!important; margin:0!important;
  border:1px solid var(--wf-line)!important; border-radius:10px!important;
  background:var(--wf-note)!important; box-shadow:none!important;
}
#work-order .gc-workflow-docked .gc-thread-entry.is-system {background:transparent!important; border-color:transparent!important; border-left:2px solid var(--wf-line)!important; border-radius:0!important; padding:6px 9px!important}
#work-order .gc-workflow-docked .gc-thread-person {display:flex!important; align-items:center!important; gap:7px!important; margin:0 0 6px!important}
#work-order .gc-workflow-docked .gc-thread-avatar {width:25px!important; height:25px!important; min-width:25px!important; flex:0 0 25px!important; font-size:10px!important}
#work-order .gc-workflow-docked .gc-thread-person strong {font-size:12px!important; line-height:1.3!important}
#work-order .gc-workflow-docked .gc-thread-person time {display:block; font-size:10px!important; color:var(--wf-muted)!important; line-height:1.4!important}
#work-order .gc-workflow-docked .gc-thread-content {margin:0!important; padding:0!important; min-width:0}
#work-order .gc-workflow-docked .gc-thread-event-label {font-size:10px!important; color:var(--wf-muted)!important; line-height:1.4!important}
#work-order .gc-workflow-docked .gc-thread-content p {font-size:12px!important; line-height:1.5!important; margin:4px 0 0!important; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--wf-text)!important}
/* Customer Chat remains a different panel with its existing messaging implementation. */
#work-order .gc-workflow-docked .gc-workorder-customer-chat:not([hidden]) {flex:1 1 0!important; min-height:0!important; overflow-y:auto!important; overscroll-behavior:contain}
#work-order .gc-workflow-docked .gc-workorder-flow>#v1-workflow-form.gc-wf-composer {
  position:relative!important; display:flex!important; flex-direction:column!important;
  flex:0 0 auto!important; gap:7px!important; margin:0!important;
  padding:10px 12px max(10px,env(safe-area-inset-bottom))!important;
  border:0!important; border-top:1px solid var(--wf-line)!important; border-radius:0!important;
  background:var(--wf-compose)!important; box-shadow:0 -4px 12px #00000008!important;
}
#work-order #v1-workflow-form.gc-wf-composer>h3 {display:none!important}
#work-order #v1-workflow-form.gc-wf-composer [hidden] {display:none!important}
#work-order #v1-workflow-form.gc-wf-composer .gc-wf-controls {display:flex; align-items:center; gap:7px; min-width:0}
#work-order #v1-workflow-form.gc-wf-composer .gc-wf-controls>label {flex:1 1 0!important; min-width:0!important; margin:0!important; display:block!important}
#work-order #v1-workflow-form.gc-wf-composer .gc-wf-controls>label:first-child {flex:1.3 1 0!important}
#work-order #v1-workflow-form.gc-wf-composer select {
  width:100%!important; min-width:0!important; height:36px!important; min-height:36px!important;
  padding:6px 24px 6px 9px!important; border:1px solid var(--wf-line)!important;
  border-radius:8px!important; background-color:var(--wf-field)!important; color:var(--wf-text)!important;
  font:600 11px/1.3 inherit; font-size:11px!important; overflow:hidden; text-overflow:ellipsis;
}
#work-order #v1-workflow-form.gc-wf-composer .gc-wf-private {flex:0 0 auto; padding:8px 4px; font-size:11px; color:var(--wf-muted)}
#work-order #v1-workflow-form.gc-wf-composer .gc-wf-note {display:block!important; margin:0!important; padding:0!important; width:100%!important}
#work-order #v1-workflow-form.gc-wf-composer textarea {
  box-sizing:border-box; width:100%!important; min-width:0!important; height:58px; min-height:58px!important;
  max-height:104px!important; resize:none!important; overflow-y:auto!important;
  padding:9px 10px!important; border:1px solid var(--wf-line)!important; border-radius:10px!important;
  background:var(--wf-field)!important; color:var(--wf-text)!important; font-size:13px!important; line-height:1.45!important;
}
#work-order #v1-workflow-form.gc-wf-composer textarea::placeholder {color:var(--wf-muted)!important; opacity:1}
#work-order #v1-workflow-form.gc-wf-composer .gc-wf-tools {display:flex; align-items:center; gap:6px; min-width:0}
#work-order #v1-workflow-form.gc-wf-composer .gc-wf-tool {
  display:grid!important; place-items:center!important; box-sizing:border-box;
  width:38px!important; min-width:38px!important; height:38px!important; min-height:38px!important;
  margin:0!important; padding:8px!important; border:1px solid var(--wf-line)!important;
  background:var(--wf-field)!important; color:var(--wf-text)!important; border-radius:9px!important; cursor:pointer;
}
#work-order .gc-wf-tool svg {display:block; width:20px; height:20px; pointer-events:none}
#work-order #v1-workflow-form.gc-wf-composer .primary-button {
  margin:0 0 0 auto!important; min-height:38px!important; height:38px!important; width:auto!important;
  padding:7px 15px!important; border-radius:9px!important; font-size:12px!important; white-space:nowrap;
}
#work-order #v1-workflow-form.gc-wf-composer button:disabled {opacity:.45; cursor:not-allowed}
#work-order #v1-workflow-form.gc-wf-composer :is(button,select,textarea):focus-visible {outline:2px solid #349af0; outline-offset:2px}
#work-order #v1-workflow-form.gc-wf-composer .gc-wf-photo-hint,
#work-order #v1-workflow-form.gc-wf-composer .gc-wf-photo-status,
#work-order #v1-workflow-form.gc-wf-composer .operation-status {font-size:10px!important; line-height:1.4!important; color:var(--wf-muted); margin:0!important; padding:0!important; overflow-wrap:anywhere}
#work-order #v1-workflow-form.gc-wf-composer .gc-wf-photo-status:empty,
#work-order #v1-workflow-form.gc-wf-composer .operation-status:empty {display:none!important}
#work-order #v1-workflow-form.gc-wf-composer .gc-wf-attachments {display:flex; gap:6px; align-items:center}
#work-order .gc-wf-preview {width:44px; height:44px; overflow:hidden; border:1px solid var(--wf-line); border-radius:7px; display:grid; place-items:center; font-size:9px; overflow-wrap:anywhere}
#work-order .gc-wf-preview img {width:100%; height:100%; object-fit:cover}
#work-order #v1-workflow-form.gc-wf-composer .gc-wf-clear {margin-left:auto; border:0; background:transparent; color:var(--wf-muted); font-size:11px; min-height:36px; padding:6px; cursor:pointer}
#work-order #v1-workflow-form.gc-wf-composer .gc-wf-emojis {
  position:absolute; bottom:calc(100% + 6px); left:12px; right:12px; z-index:5;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px;
  padding:8px; border:1px solid var(--wf-line); border-radius:12px;
  background:var(--wf-compose); box-shadow:0 8px 24px #0003;
}
#work-order #v1-workflow-form.gc-wf-composer .gc-wf-emojis button {display:grid; place-items:center; width:100%; min-height:38px!important; height:38px; padding:4px; font-size:20px; border:0; background:transparent; cursor:pointer; border-radius:6px}
#work-order #v1-workflow-form.gc-wf-composer .gc-wf-emojis button:hover {background:var(--wf-field)}
#work-order .gc-wf-sr-only {position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important}
@media(min-width:751px) {
  /* The fixed drawer must not reserve an empty second column at POS widths. */
  #work-order .v1-workorder-layout {grid-template-columns:minmax(0,1fr)!important;gap:0!important}
  body.gc-workflow-visible #work-order>.v1-workorder-head {padding-right:376px!important}
  body.gc-workflow-visible .gc-marlon {right:376px!important}
  .gc-workflow-edge[aria-expanded="true"] {right:360px!important}
}
@media(min-width:1320px) {
  body.gc-workflow-visible #work-order .v1-workorder-layout {grid-template-columns:minmax(0,1fr) 360px!important;gap:16px!important}
}
@media(max-width:750px) {
  #work-order .v1-workflow-panel.gc-workflow-docked {width:100vw!important; height:var(--gc-workflow-vh,100dvh)!important; max-height:var(--gc-workflow-vh,100dvh)!important; top:var(--gc-workflow-vtop,0px)!important; bottom:auto!important; z-index:1050!important}
  #work-order .gc-workflow-docked>.v1-drawer-head {padding-top:max(12px,env(safe-area-inset-top))!important}
  body.gc-workflow-visible .gc-marlon {visibility:hidden!important; pointer-events:none!important}
}
@media(max-height:550px) {
  #work-order .gc-workflow-docked>.v1-drawer-head {padding-top:7px!important; padding-bottom:7px!important}
  #work-order .gc-workflow-docked .v1-drawer-head h2 {margin:1px 0 4px!important; font-size:15px!important}
  #work-order .gc-workflow-docked .gc-workorder-tabs {padding-top:4px!important; padding-bottom:4px!important}
  #work-order #v1-workflow-form.gc-wf-composer {gap:5px!important; padding-top:7px!important}
}
@media(prefers-reduced-motion:reduce) {#work-order .gc-workflow-docked {transition:none!important}}

/* Keep the original edge handle visible as the sole drawer launcher. */
#gc-workflow-edge:not([hidden]){
  display:grid!important;place-items:center!important;position:fixed!important;
  right:0!important;top:46%!important;z-index:1060!important;
  min-width:34px!important;min-height:108px!important;
}
@media(min-width:751px){
  #gc-workflow-edge[aria-expanded="true"]{right:360px!important}
}