/* Desktop design adapter from the supplied office productivity package. */
@media screen and (min-width: 921px) {
/* FuuVo AI Sheet colour motion — always on, appearance only.
   Load after the existing AI Slides styles; add fv-sheet-motion to body.
   Template layout/assets are retained; the composer grows with its contents. */

@property --fv-sheet-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

body.fv-sheet-motion {
  --fv-sheet-rail-width: 72px;
  --fv-sheet-ambient-height: min(620px, 72vh);
  --fv-sheet-ink: #233c49;
  --fv-sheet-blue: #1678fa;
  --fv-sheet-green: #12a973;
  --fv-sheet-yellow: #f5c300;
  --fv-sheet-orange: #ff8a38;
  --fv-sheet-red: #f34764;
  --fv-sheet-violet: #a14cb2;
  --fv-sheet-cycle: 8s;
  background-color: #fff;
  isolation: isolate;
}

/* Both layers stay in the same place. Only opacity changes, and the bottom
   fades to fully transparent before the layer ends. There is no coloured box. */
body.fv-sheet-motion::before,
body.fv-sheet-motion::after {
  content: "";
  position: fixed;
  inset: 0 0 auto var(--fv-sheet-rail-width);
  height: var(--fv-sheet-ambient-height);
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 12%, rgba(0,0,0,.82) 37%, rgba(0,0,0,.38) 66%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 12%, rgba(0,0,0,.82) 37%, rgba(0,0,0,.38) 66%, transparent 100%);
}

body.fv-sheet-motion::before {
  background:
    radial-gradient(ellipse at 9% -12%, rgba(24,211,197,.34), transparent 54%),
    radial-gradient(ellipse at 51% -20%, rgba(77,158,255,.30), transparent 59%),
    radial-gradient(ellipse at 91% -6%, rgba(231,126,226,.27), transparent 55%);
}

body.fv-sheet-motion::after {
  background:
    radial-gradient(ellipse at 11% -6%, rgba(65,142,255,.31), transparent 56%),
    radial-gradient(ellipse at 53% -12%, rgba(255,111,144,.30), transparent 60%),
    radial-gradient(ellipse at 94% -12%, rgba(255,198,78,.35), transparent 56%);
  opacity: .08;
  animation: fv-sheet-ambient var(--fv-sheet-cycle) ease-in-out infinite;
}

body.fv-sheet-motion :is(#office-app, .office-app, .creation-workspace, .office-main) {
  background-color: transparent !important;
  background-image: none !important;
}

/* The header is part of the page flow. It scrolls away with the title,
   without a sticky white strip appearing over the ambient colours. */
body.fv-sheet-motion .office-spreadsheet-app > .creation-workspace > .creation-topbar {
  position: relative !important;
  top: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border-bottom-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}


/* One page scroll, readable white working surfaces. */
body.fv-sheet-motion .office-spreadsheet-app .office-tool-form-card,
body.fv-sheet-motion .office-spreadsheet-app .office-result-card {
  background: #fff; border: 1px solid #e1e8e8; border-radius: 20px;
  box-shadow: 0 10px 35px rgba(25,65,68,.035);
}
body.fv-sheet-motion .office-spreadsheet-app .office-tool-form-card { position: relative; top: auto; height: auto; max-height: none; overflow: visible; }
body.fv-sheet-motion .office-spreadsheet-app #office-tool-form { height: auto; max-height: none; overflow: visible; }
body.fv-sheet-motion .office-spreadsheet-app #office-tool-material { min-height: 180px; max-height: none; overflow-y: hidden; resize: none; box-sizing: border-box; }
body.fv-sheet-motion .office-spreadsheet-app .office-tool-hero h1,
body.fv-sheet-motion .office-spreadsheet-app :is(.office-card-heading,.office-result-head) h2 { color: #193d47; }
body.fv-sheet-motion .office-spreadsheet-app :is(.office-card-heading,.office-result-head) > span,
body.fv-sheet-motion .office-spreadsheet-app .office-result-head > div > span { color: #16796f; background: #eff8f5; }
body.fv-sheet-motion .office-spreadsheet-app :is(input, textarea, select) { color: #263f49; background-color: #fff; border-color: #dce6e7; }
body.fv-sheet-motion .office-spreadsheet-app :is(input,textarea)::placeholder { color: #6e8188; opacity: 1; }
body.fv-sheet-motion .office-spreadsheet-app :is(#office-subject,#office-tool-material,#office-purpose,#office-style,#office-detail):focus {
  outline: none; border-color: transparent !important;
  background: linear-gradient(#fff,#fff) padding-box, conic-gradient(from var(--fv-sheet-angle),#1678fa,#12a973,#f5c300,#ff8a38,#f34764,#a14cb2,#1678fa) border-box !important;
  box-shadow: 0 0 0 2px #16796f08; animation: fv-sheet-border var(--fv-sheet-cycle) linear infinite;
}
body.fv-sheet-motion .office-spreadsheet-app :is(.spreadsheet-toolbar-tabs,.spreadsheet-quick-prompts,.spreadsheet-sidebar-nav,.spreadsheet-sheet-list) > button:is(.is-active,[aria-pressed="true"]) {
  position: relative; isolation: isolate; background: #fff; border-color: transparent; color: #186c64; box-shadow: none;
}
body.fv-sheet-motion .office-spreadsheet-app :is(.spreadsheet-toolbar-tabs,.spreadsheet-quick-prompts,.spreadsheet-sidebar-nav,.spreadsheet-sheet-list) > button:is(.is-active,[aria-pressed="true"])::before {
  content: ''; position: absolute; inset: -1px; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--fv-sheet-angle),#1678fa,#12a973,#f5c300,#ff8a38,#f34764,#a14cb2,#1678fa);
  -webkit-mask: linear-gradient(#fff,#fff) content-box,linear-gradient(#fff,#fff); -webkit-mask-composite:xor;
  mask:linear-gradient(#fff,#fff) content-box,linear-gradient(#fff,#fff);mask-composite:exclude;
  animation: fv-sheet-border var(--fv-sheet-cycle) linear infinite;
}
body.fv-sheet-motion .office-spreadsheet-app .spreadsheet-toolbar-tabs > button { border-radius: 9px; }
/* Worksheet tabs have border:0 and overflow:hidden for long-name ellipsis.
   Keep their ring inside the button so all four sides remain fully visible. */
body.fv-sheet-motion .office-spreadsheet-app .spreadsheet-toolbar-tabs > button:is(.is-active,[aria-pressed="true"])::before {
  inset: 0;
  padding: 1.5px;
  background: conic-gradient(from var(--fv-sheet-angle),#096bfa,#059b58,#e9ad00,#f77919,#ee3159,#893bcc,#096bfa);
}
body.fv-sheet-motion .office-spreadsheet-app .spreadsheet-toolbar { background: #fbfdfd; border-color: #e5eded; }
body.fv-sheet-motion .office-spreadsheet-app .spreadsheet-grid-meta { color: #496c72; background: #fbfdfd; }
body.fv-sheet-motion .office-spreadsheet-app .spreadsheet-grid-meta small { color: #627b82; }
body.fv-sheet-motion .office-spreadsheet-app .spreadsheet-grid th { background: #f4f8f7; color: #55736e; border-color: #e2eae8; }
body.fv-sheet-motion .office-spreadsheet-app .spreadsheet-grid td { border-color: #e5ebeb; }
body.fv-sheet-motion .office-spreadsheet-app .spreadsheet-grid td:focus { outline: 2px solid #198879; outline-offset: -2px; background: #fff; }
body.fv-sheet-motion .office-spreadsheet-app .sheet-dot { background: #289782; }
body.fv-sheet-motion .office-spreadsheet-app .office-result-empty-icon {
  display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 20px;
  color: #198879; border: 1px solid #dcebe5; border-radius: 22px; background: #f7fbf9; box-shadow: none;
}
body.fv-sheet-motion .office-spreadsheet-app .office-result-empty-icon svg { width: 38px; height: 38px; display: block; }
body.fv-sheet-motion .office-spreadsheet-app .office-result-empty h3 { color: #29464c; }
body.fv-sheet-motion .office-spreadsheet-app .office-result-empty p { color: #697e85; }
body.fv-sheet-motion .office-spreadsheet-app #office-generate {
  position: relative; bottom: auto; color: #fff; border: 1px solid transparent;
  background: linear-gradient(110deg,#146e70,#2456bb 26%,#7142ac 50%,#a33773 72%,#146e70);
  background-size: 240% 100%; animation: fv-sheet-button var(--fv-sheet-cycle) ease-in-out infinite; box-shadow: none;
}
body.fv-sheet-motion .office-spreadsheet-app #office-generate:hover:not(:disabled) { filter: brightness(1.04); }
body.fv-sheet-motion .office-spreadsheet-app button:focus-visible { outline: 2px solid #23786e; outline-offset: 3px; }
body.fv-sheet-motion[data-fv-visibility="hidden"]::after { animation-play-state: paused; }
@keyframes fv-sheet-ambient { 0%,100% {opacity:.06;} 50% {opacity:1;} }
@keyframes fv-sheet-border { to {--fv-sheet-angle:360deg;} }
@keyframes fv-sheet-button { 0%,100% {background-position:0% 50%;} 50% {background-position:100% 50%;} }
@media (prefers-reduced-motion:reduce) {
  body.fv-sheet-motion::after, body.fv-sheet-motion :is(input,textarea,select,#office-generate), body.fv-sheet-motion .office-spreadsheet-app button::before {animation:none !important;}
  body.fv-sheet-motion::after {opacity:.25;}
}
@media (max-width:767px) {body.fv-sheet-motion {--fv-sheet-rail-width:0px;--fv-sheet-ambient-height:430px;}}
@media (forced-colors:active) {
 body.fv-sheet-motion::before,body.fv-sheet-motion::after,body.fv-sheet-motion .office-spreadsheet-app button::before {display:none;}
 body.fv-sheet-motion .office-spreadsheet-app button[aria-pressed="true"] {outline:2px solid Highlight;}
}

body.fv-sheet-motion .office-spreadsheet-app .spreadsheet-sidebar {background:rgba(255,255,255,.88);border:1px solid #e1e8e8;border-radius:18px;box-shadow:none;}
body.fv-sheet-motion .office-spreadsheet-app .spreadsheet-brand-mark {background:#eff8f5;color:#16796f;}
body.fv-sheet-motion .office-spreadsheet-app .spreadsheet-new-sheet {background:#fff;border-color:#dce6e4;color:#16796f;}
body.fv-sheet-motion .office-spreadsheet-app .spreadsheet-sidebar-tip {background:#fbfdfc;border-color:#e1e9e6;color:#697e85;}

}